diff options
Diffstat (limited to 'src/views/Home.vue')
| -rw-r--r-- | src/views/Home.vue | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/src/views/Home.vue b/src/views/Home.vue new file mode 100644 index 0000000..79ec4ab --- /dev/null +++ b/src/views/Home.vue @@ -0,0 +1,62 @@ +<template> + <HomeHeader /> + <div class="row mx-0 mt-5"> + <div id="projects-header" class="col ms-4"> + <p class="fs-1"> + Projects + </p> + </div> + <div id="projects-search" class="col d-flex justify-content-end"> + <form> + <input type="search" name="q"> + <input type="submit" value="Search"> + </form> + </div> + </div> + <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"> + <p class="fs-3"> + <router-link :to="project_name"> + {{ project_name }} + </router-link> + </p> + <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> +</template> + +<script> +import HomeHeader from "../components/HomeHeader"; +import { watch, reactive, toRefs } from "vue"; + +export default { + name: "Home", + components: { + HomeHeader + }, + setup() + { + const state = reactive({ projects: Object, search: String }); + + watch(() => + { + fetch(`http://localhost:1337/api/v1/repos`) + .then((res) => res.json()) + .then((data) => state.projects = data["data"]); + }); + + state.search = (new URLSearchParams(window.location.search)).get("q"); + + return { + ... toRefs(state) + }; + } +} +</script>
\ No newline at end of file |