Added an about page

5 files changed, 107 insertions, 20 deletions

diff --git a/packages/client/src/components/RepositoryHeader.vue b/packages/client/src/components/RepositoryHeader.vue
index 9f37df4..50a1db9 100644
--- a/packages/client/src/components/RepositoryHeader.vue
+++ b/packages/client/src/components/RepositoryHeader.vue
@@ -12,33 +12,21 @@
 
 <script>
 import BaseBackButton from "@/components/BaseBackButton";
-import { ref } from "vue";
 
 export default {
 	name: "RepositoryHeader",
 	props: {
-		repository: {
+		name: {
+			type: String,
+			required: true
+		},
+		description: {
 			type: String,
 			required: true
 		}
 	},
 	components: {
 		BaseBackButton
-	},
-	setup(props) {
-		const name = ref("");
-		const description = ref("");
-
-		const fetchProjects = async() => {
-			const repository_data = await (await fetch(`${window.location.protocol}//${window.location.host}/api/v1/repos/${props.repository}`)).json();
-			name.value = repository_data.data.name;
-			description.value = repository_data.data.description;
-		};
-
-		return { name, description, fetchProjects };
-	},
-	created() {
-		this.fetchProjects();
 	}
 };
 </script>
diff --git a/packages/client/src/components/RepositoryNavbar.vue b/packages/client/src/components/RepositoryNavbar.vue
index c69762f..f709976 100644
--- a/packages/client/src/components/RepositoryNavbar.vue
+++ b/packages/client/src/components/RepositoryNavbar.vue
@@ -6,7 +6,7 @@
 					<div class="collapse navbar-collapse">
 						<ul class="navbar-nav align-items-center flex-fill">
 							<li
-								v-for="(item, index) in ['log', 'refs', 'tree']" :key="index"
+								v-for="(item, index) in nav_items" :key="index"
 								class="nav-item">
 								<router-link
 									class="nav-link fs-4" :class="{ active: activePage === item }"
@@ -38,10 +38,25 @@ export default {
 		activePage: {
 			type: String,
 			required: true
+		},
+		hasReadme: {
+			type: Boolean,
+			required: true
 		}
 	},
 	components: {
 		RepositoryCloneDropdown
+	},
+	data() {
+		return {
+			nav_items: [ "log", "refs", "tree" ]
+		};
+	},
+	watch: {
+		hasReadme() {
+			console.log("HEEEJ");
+			this.nav_items = [ "about" ].concat(this.nav_items);
+		}
 	}
 };
 </script>
diff --git a/packages/client/src/router/index.js b/packages/client/src/router/index.js
index 69cd036..a6db1e1 100644
--- a/packages/client/src/router/index.js
+++ b/packages/client/src/router/index.js
@@ -14,6 +14,11 @@ const routes = [
 		props: route => ({ repository: route.params.repo }),
 		children: [
 			{
+				path: "about",
+				name: "Repository About",
+				component: () => import("../views/RepositoryAbout")
+			},
+			{
 				path: "log",
 				name: "Repository Log",
 				component: () => import("../views/RepositoryLog")
diff --git a/packages/client/src/views/Repository.vue b/packages/client/src/views/Repository.vue
index 93c3f82..bbadb16 100644
--- a/packages/client/src/views/Repository.vue
+++ b/packages/client/src/views/Repository.vue
@@ -1,7 +1,9 @@
 <template>
 	<div class="container-fluid px-0 d-flex">
-		<RepositoryHeader :repository="$router.currentRoute._rawValue.params.repo" />
-		<RepositoryNavbar :repository="$router.currentRoute._rawValue.params.repo" :active-page="$router.currentRoute._rawValue.path.split('/')[2]" />
+		<RepositoryHeader :name="name" :description="description" />
+		<RepositoryNavbar
+			:repository="$router.currentRoute._rawValue.params.repo" :active-page="$router.currentRoute._rawValue.path.split('/')[2]"
+			:has-readme="has_readme" />
 		<router-view />
 	</div>
 </template>
@@ -9,12 +11,31 @@
 <script>
 import RepositoryHeader from "@/components/RepositoryHeader";
 import RepositoryNavbar from "@/components/RepositoryNavbar";
+import { ref } from "vue";
 
 export default {
 	name: "Repository",
 	components: {
 		RepositoryHeader,
 		RepositoryNavbar
+	},
+	setup(props) {
+		const name = ref("");
+		const description = ref("");
+		const has_readme = ref(null);
+
+		const fetchProjects = async(repository) => {
+			console.log(repository);
+			const repository_data = await (await fetch(`${window.location.protocol}//${window.location.host}/api/v1/repos/${repository}`)).json();
+			name.value = repository_data.data.name;
+			description.value = repository_data.data.description;
+			has_readme.value = repository_data.data.has_readme;
+		};
+
+		return { name, description, has_readme, fetchProjects };
+	},
+	created() {
+		this.fetchProjects(this.$router.currentRoute._rawValue.params.repo);
 	}
 };
 </script>
diff --git a/packages/client/src/views/RepositoryAbout.vue b/packages/client/src/views/RepositoryAbout.vue
new file mode 100644
index 0000000..4b4d700
--- /dev/null
+++ b/packages/client/src/views/RepositoryAbout.vue
@@ -0,0 +1,58 @@
+<template>
+	<div class="row mx-0">
+		<div class="col ms-4 ps-4 ps-sm-5 mt-3 fs-5 vld-parent">
+			<RepositoryTreeBlob
+				:repository="$router.currentRoute._rawValue.params.repo" path="README.md"
+				:content="readme" v-if="readme" />
+			<BaseErrorMessage :fetch-failed="fetch_failed" />
+			<Loading
+				:active="is_loading" :height="24"
+				:width="24" color="#ffffff"
+				:opacity="0" :is-full-page="false" />
+		</div>
+	</div>
+</template>
+
+<script>
+import RepositoryTreeBlob from "@/components/RepositoryTreeBlob";
+import Loading from "vue-loading-overlay";
+import BaseErrorMessage from "@/components/BaseErrorMessage";
+import { ref } from "vue";
+import fetchData from "@/util/fetch";
+
+export default {
+	name: "RepositoryAbout",
+	components: {
+		RepositoryTreeBlob,
+		Loading,
+		BaseErrorMessage
+	},
+	setup(props) {
+		const readme = ref(null);
+		const is_loading = ref(true);
+		const fetch_failed = ref(null);
+
+		const fetchReadme = async(repository) => {
+			const readme_data = await fetchData(`repos/${repository}/tree?path=README.md`, fetch_failed, is_loading, "tree");
+
+			if(readme_data) {
+				readme.value = readme_data.content;
+			}
+		};
+
+		return {
+			readme,
+			is_loading,
+			fetch_failed,
+			fetchReadme
+		};
+	},
+	created() {
+		this.fetchReadme(this.$router.currentRoute._rawValue.params.repo);
+	}
+};
+</script>
+
+<style lang="scss">
+@import "~vue-loading-overlay/dist/vue-loading.css";
+</style>