Reorganized into a monorepo, refactored the frontend again, goodbye Parcel

1 files changed, 64 insertions, 0 deletions

diff --git a/packages/client/src/components/RepositoryHeader.vue b/packages/client/src/components/RepositoryHeader.vue
new file mode 100644
index 0000000..9f37df4
--- /dev/null
+++ b/packages/client/src/components/RepositoryHeader.vue
@@ -0,0 +1,64 @@
+<template>
+	<div id="header" class="mx-0 d-flex mt-3 ms-2">
+		<BaseBackButton to="/" />
+		<div class="d-inline ms-3">
+			<span id="title" class="fs-1">{{ name }}</span>
+			<p id="about" class="fs-4">
+				{{ description }}
+			</p>
+		</div>
+	</div>
+</template>
+
+<script>
+import BaseBackButton from "@/components/BaseBackButton";
+import { ref } from "vue";
+
+export default {
+	name: "RepositoryHeader",
+	props: {
+		repository: {
+			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>
+
+<style lang="scss" scoped>
+@use "../scss/colors";
+
+@import "../scss/bootstrap";
+@import "../scss/fonts";
+
+#title {
+	font-family: $font-title;
+	font-weight: 300;
+	line-height: 0.6;
+}
+
+#about {
+	font-weight: 300;
+	padding-left: 1px;
+	margin: 0px;
+	margin-top: 10px;
+}
+</style>