better links

nginx/vue/src/components/quick/LinkTable.vue

@@ -18,6 +18,8 @@ const keys = ["name", "link"];
         :key="rowIndex"
         :href="row.link"
     >
+        <p>
             {{ row.name }}
+        </p>
     </a>
 </template>

nginx/vue/src/components/quick/ToggleLinkTable.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { ref } from "vue";
+import LinkTable from "@/components/quick/LinkTable.vue";
+
+const props = defineProps({
+    linkArr: {
+        type: Array,
+        required: true,
+    },
+    title: {
+        type: String,
+        required: true,
+    },
+});
+
+const show_links = ref(true);
+</script>
+
+<template>
+    <div class="flex-row">
+        <h2>{{ title }}</h2>
+        <button @click="show_links = !show_links">Toggle</button>
+    </div>
+    <LinkTable v-if="show_links" :linkArr="props.linkArr" />
+</template>

nginx/vue/src/views/Bookmarks.vue

@@ -1,5 +1,64 @@
 <script setup>
-import LinkTable from "@/components/quick/LinkTable.vue";
+import { ref } from "vue";
+
+import ToggleLinkTable from "@/components/quick/ToggleLinkTable.vue";
+
+const job_links = [
+    {
+        name: "LinkedIn",
+        link: "https://www.linkedin.com/",
+    },
+    {
+        name: "Jack and Jill",
+        link: "https://app.jackandjill.ai",
+    },
+    {
+        name: "LinkedIn",
+        link: "https://www.linkedin.com/",
+    },
+    {
+        name: "Prospects",
+        link: "https://www.prospects.ac.uk/",
+    },
+    {
+        name: "GOV",
+        link: "https://findajob.dwp.gov.uk",
+    },
+    {
+        name: "Glassdoor",
+        link: "https://www.glassdoor.co.uk/",
+    },
+    {
+        name: "Indeed",
+        link: "https://www.indeed.co.uk/",
+    },
+];
+
+const learning_links = [
+    {
+        name: "Leetcode",
+        link: "https://leetcode.com/",
+    },
+    {
+        name: "ISLP",
+        link: "https://hastie.su.domains/ISLP/ISLP_website.pdf.download.html",
+    },
+];
+
+const social_links = [
+    {
+        name: "Outlook",
+        link: "https://outlook.live.com/",
+    },
+    {
+        name: "Gmail",
+        link: "https://mail.google.com/",
+    },
+    {
+        name: "Whatsapp",
+        link: "https://web.whatsapp.com/",
+    },
+];
 
 const radio_links = [
     {
@@ -48,6 +107,18 @@ const chinese_links = [
         name: "Stroke Order",
         link: "https://www.strokeorder.com/",
     },
+    {
+        name: "HSK 1 Peking University",
+        link: "https://youtube.com/playlist?list=PLVWfp7qXLmKVfSUkucXErLncKn-JqgBbK&si=2ytO3inS8-iOAOx2",
+    },
+    {
+        name: "Stroke Order",
+        link: "https://www.strokeorder.com/",
+    },
+    {
+        name: "Offbeat Mandarin",
+        link: "https://www.youtube.com/@OffbeatMandarin",
+    },
 ];
 
 const art_links = [
@@ -59,6 +130,55 @@ const art_links = [
         name: "Cameron's World",
         link: "https://www.cameronsworld.net/",
     },
+    {
+        name: "Neocities",
+        link: "https://neocities.org/",
+    },
+];
+
+const vue_links = [
+    {
+        name: "Vue",
+        link: "https://vuejs.org/guide/introduction.html",
+    },
+    {
+        name: "Vue Router",
+        link: "https://router.vuejs.org/introduction.html",
+    },
+    {
+        name: "Pinia",
+        link: "https://pinia.vuejs.org/introduction.html",
+    },
+];
+
+const go_links = [
+    {
+        name: "Golang",
+        link: "https://golang.org/doc/",
+    },
+    {
+        name: "Gin Gonic",
+        link: "https://gin-gonic.com/en/docs/introduction/",
+    },
+    {
+        name: "GORM",
+        link: "https://gorm.io/gen/index.html",
+    },
+];
+
+const doc_links = [
+    {
+        name: "Rust",
+        link: "https://doc.rust-lang.org/stable/book/index.html",
+    },
+    {
+        name: "Javascript",
+        link: "https://developer.mozilla.org/en-US/docs/Web/JavaScript",
+    },
+    {
+        name: "Python",
+        link: "https://docs.python.org/3/",
+    },
 ];
 </script>
 
@@ -66,17 +186,16 @@ const art_links = [
     <main class="center-content flex-col">
         <div class="background halftone" />
         <div class="a4page-portrait bdr-1 flex-col relative scroll-y gap">
-            <h1>Radio Links</h1>
+            <ToggleLinkTable title="Learning" :linkArr="learning_links" />
-            <LinkTable :linkArr="radio_links" />
+            <ToggleLinkTable title="Radio" :linkArr="radio_links" />
-            <span>---</span>
+            <ToggleLinkTable title="Hacking" :linkArr="hacking_links" />
-            <h1>Hack</h1>
+            <ToggleLinkTable title="Chinese" :linkArr="chinese_links" />
-            <LinkTable :linkArr="hacking_links" />
+            <ToggleLinkTable title="Web Art" :linkArr="art_links" />
-            <span>---</span>
+            <ToggleLinkTable title="Go Docs" :linkArr="go_links" />
-            <h1>Chinese</h1>
+            <ToggleLinkTable title="Vue Docs" :linkArr="vue_links" />
-            <LinkTable :linkArr="chinese_links" />
+            <ToggleLinkTable title="Job Apps" :linkArr="job_links" />
-            <span>---</span>
+            <ToggleLinkTable title="Social" :linkArr="social_links" />
-            <h1>Art</h1>
+            <ToggleLinkTable title="Other Docs" :linkArr="doc_links" />
-            <LinkTable :linkArr="art_links" />
         </div>
     </main>
 </template>