From 4da3272bf7893760f6710c9a1ec7de02358136e6 Mon Sep 17 00:00:00 2001
From: HampusM <hampus@hampusmat.com>
Date: Sat, 5 Jun 2021 19:37:52 +0200
Subject: Reorganized into a monorepo, refactored the frontend again, goodbye
 Parcel

---
 packages/client/src/views/Home.vue | 79 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 packages/client/src/views/Home.vue

(limited to 'packages/client/src/views/Home.vue')

diff --git a/packages/client/src/views/Home.vue b/packages/client/src/views/Home.vue
new file mode 100644
index 0000000..80f2e9a
--- /dev/null
+++ b/packages/client/src/views/Home.vue
@@ -0,0 +1,79 @@
+<template>
+	<div class="container-fluid px-0">
+		<HomeHeader />
+		<HomeProjectsHeader />
+		<div class="row mx-0">
+			<div class="col ms-4">
+				<ul id="repos">
+					<li v-for="(project, project_name, index) in projects" :key="index">
+						<div v-if="(search !== null && project_name.includes(search)) || search == null">
+							<span class="fs-3">
+								<router-link :to="project_name">
+									{{ project_name }}
+								</router-link>
+							</span>
+							<span class="repo-last-updated fs-5">Last updated about {{ project["last_updated"] }} ago</span>
+							<span class="fs-5">{{ project["description"] }}</span>
+						</div>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import HomeHeader from "@/components/HomeHeader";
+import HomeProjectsHeader from "@/components/HomeProjectsHeader";
+import { ref } from "vue";
+
+export default {
+	name: "Home",
+	components: {
+		HomeHeader,
+		HomeProjectsHeader
+	},
+	setup() {
+		const projects = ref({});
+		const search = ref("");
+
+		const fetchProjects = async() => {
+			const projects_data = await (await fetch(`${window.location.protocol}//${window.location.host}/api/v1/repos`)).json();
+			projects.value = projects_data.data;
+		};
+
+		search.value = (new URLSearchParams(window.location.search)).get("q");
+
+		return { projects, search, fetchProjects };
+	},
+	mount() {
+		this.fetchProjects();
+	},
+	created() {
+		this.fetchProjects();
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@use "../scss/colors";
+@import "../scss/bootstrap";
+
+#repos {
+	margin-top: 25px;
+	li {
+		margin-bottom: 25px;
+	}
+}
+
+.repo-last-updated {
+	display: block;
+	font-weight: 300;
+	font-style: italic;
+}
+
+ul {
+	list-style-type: none;
+	padding: 0;
+}
+</style>
-- 
cgit v1.2.3-18-g5258

