Merge pull request #81 from Nikhil-Vats/master

Show Readme file from github in Component.vue page

Author: sarthak-sehgal

src/components/Component.vue

@@ -85,6 +85,11 @@
 					<contributor v-for="contributor in contributors" :key="contributor.id" :imageURL="contributor.avatar_url" :name="contributor.username" />
 				</div>
 			</div>
+			<div id="readme" class="section">
+				<div class="title">README</div>
+				<div class="content" v-html="computeReadme ()">
+				</div>
+			</div>
 			<div id="legal" class="section">
 				<div class="title">Legal</div>
 				<div class="content">
@@ -144,6 +149,7 @@ A watcher has been added to the component to render the details dynamically when
 			contributors: [],
 			license: '',
 			author: '',
+			readme: '',
 			githubURL: 'https://www.github.com/',
 			sniper_data: {},
 			js_dependencies: [],
@@ -250,10 +256,38 @@ A watcher has been added to the component to render the details dynamically when
 					this.sniper_data = result.data.sniper_data;
 					this.js_dependencies = result.data.js_dependencies;
 					this.css_dependencies = result.data.css_dependencies;
-					this.isLoading = false;
 					const url = `${API_URL}details/${this.name}`;
 					console.log(this.sniper_data);
 
+					axios({
+						method: 'GET',
+						url: `https://api.github.com/repos/${this.githubURL.slice(19)}/contents/README.md`
+					}).then(
+						result => {
+							this.readme = result.data.content;
+							axios({
+								method: 'POST',
+								url: 'https://api.github.com/markdown/raw',
+								headers: {'Content-Type': 'text/plain'},
+								data: Buffer.from(result.data.content, 'base64').toString('ascii')
+							}).then(
+								result => {
+									this.readme = result.data;
+									this.isLoading = false;
+								},
+								error => {
+									this.readme = '';
+									this.isLoading = false;
+									console.log(error);
+								}
+							);
+						},
+						error => {
+							this.readme = '';
+							this.isLoading = false;
+							console.log(error);
+						}
+					);
 					axios({ method: 'GET', url }).then(
 						result => {
 							if (result.data.error) {
@@ -284,6 +318,13 @@ A watcher has been added to the component to render the details dynamically when
 				return 'none';
 			}
 		},
+		computeReadme () {
+			if (this.readme === '') {
+				return 'Not available';
+			} else {
+				return this.readme;
+			}
+		},
 		computeLicense () {
 			if (this.license === '') {
 				return 'Not available';
@@ -406,6 +447,11 @@ A watcher has been added to the component to render the details dynamically when
   // margin-top: -20px;
   color: rgba(0, 0, 0, 0.7);
 }
+#readme {
+	* {
+		overflow-x: auto;
+	}
+}
 #biojsio {
   width: 80%;
   border-radius: 3px;