Added an about page

2 files changed, 81 insertions, 2 deletions

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>