Added an about page

1 files changed, 58 insertions, 0 deletions

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>