rename quick to util

nginx/vue/src/components/home/Favorites.vue

@@ -1,5 +1,5 @@
 <script setup>
-import OptionalLinkTable from "@/components/quick/OptionalLinkTable.vue";
+import OptionalLinkTable from "@/components/util/OptionalLinkTable.vue";
 const favs = [
     {
         type: "Daioh",

nginx/vue/src/components/home/Feed.vue

@@ -1,5 +1,6 @@
 <script setup>
-import Markdown from "@/components/quick/Markdown.vue";
+import Markdown from "@/components/util/Markdown.vue";
+import Header from "@/components/text/Header.vue";
 
 import { ref, computed, onMounted } from "vue";
 import { useAuthStore } from "@/stores/auth";
@@ -43,7 +44,7 @@ onMounted(() => {
     <div
         class="flex flex-col p-1 overflow-scroll text-left items-start justify-start"
     >
-        <h2>{{ post.title }}</h2>
+        <Header>{{ post.title }}</Header>
         <Markdown class="flex-1 border-box text-wrap" :source="post.content" />
         <p>by: {{ post.author.username }}</p>
         <small

nginx/vue/src/components/home/Gym.vue

@@ -1,5 +1,5 @@
 <script setup>
-import OptionalLinkTable from "@/components/quick/OptionalLinkTable.vue";
+import OptionalLinkTable from "@/components/util/OptionalLinkTable.vue";
 const gym = [
     { name: "Row", type: "30 min" },
     { name: "Run", type: "5k" },

nginx/vue/src/components/home/Intro.vue

@@ -1,32 +1,37 @@
+<script setup>
+import Header from "@/components/text/Header.vue";
+import Paragraph from "@/components/text/Paragraph.vue";
+</script>
+
 <template>
     <div
         class="flex-1 border-box flex flex-col p-1 text-left items-start justify-start"
     >
-        <h2>Intro</h2>
-        <p>
+        <Header>Intro</Header>
+        <Paragraph>
             Hi, I'm Adam, thank you for visiting my website. I'm currently a 20
             something graduate looking for work. I like to game, listen to lots
             of music and occasionally watch anime.
-        </p>
-        <h2>Getting around</h2>
-        <p>
+        </Paragraph>
+        <Header>Getting around</Header>
+        <Paragraph>
             Pages available can be traversed through links below. I am hoping to
             add some shrines, code-walkthoughs, live chat and page transitions
             at a later date.
-        </p>
-        <h2>Contact</h2>
-        <p>
+        </Paragraph>
+        <Header>Contact</Header>
+        <Paragraph>
             Please email me <a href="mailto:adam.a.french@outlook.com">here</a>,
             or contact me though any of the social medias linked.
-        </p>
-        <h2>A Quote</h2>
+        </Paragraph>
+        <Header>A Quote</Header>
         <!-- <p>
             What makes me a good demoman? If I were a bad demoman, I wouldn't be
             sittin' here discussin' it with you, now would I?!
         </p> -->
-        <p>
+        <Paragraph>
             One crossed wire, one wayward pinch of potassium chlorate, one
             errant twitch, and KA-BLOOIE!
-        </p>
+        </Paragraph>
     </div>
 </template>

nginx/vue/src/components/home/Links.vue

@@ -1,7 +1,7 @@
 <script setup>
-import RouterTable from "@/components/quick/RouterTable.vue";
-import LinkTable from "@/components/quick/LinkTable.vue";
-import Markdown from "@/components/quick/Markdown.vue";
+import RouterTable from "@/components/util/RouterTable.vue";
+import LinkTable from "@/components/util/LinkTable.vue";
+import Markdown from "@/components/util/Markdown.vue";
 
 const site_links = [
     { name: "CV", link: "/cv" },

nginx/vue/src/components/home/Stamps.vue

@@ -1,27 +1,17 @@
 <template>
-    <div class="flex-col items-center">
-        <div class="flex flex-col">
-            <!-- <img src="/img/stamps/portal.gif" />
-            <img src="/img/stamps/miku.gif" />
-            <img src="/img/stamps/utau.gif" /> -->
-            <div class="flex flex-row items-center">
-                <p>--> make webring w me --></p>
-                <a href="https://www.adam-french.co.uk">
-                    <img
-                        src="https://www.adam-french.co.uk/img/stamps/mine.gif"
-                    />
-                </a>
-            </div>
-            <div class="flex flex-row items-center">
-                <p>--> hit up bro --></p>
-                <a href="https://jacobbarron.xyz">
-                    <img
-                        src="https://jacobbarron.xyz/Banneh.gif"
-                        alt="jacobbarron.xyz"
-                    />
-                </a>
-            </div>
-        </div>
+    <div class="grid grid-cols-4 overflow-scroll gap-0">
+        <a href="https://www.adam-french.co.uk">
+            <img src="https://www.adam-french.co.uk/img/stamps/mine.gif" />
+        </a>
+        <a href="https://jacobbarron.xyz">
+            <img
+                src="https://jacobbarron.xyz/Banneh.gif"
+                alt="jacobbarron.xyz"
+            />
+        </a>
+        <img src="/img/stamps/portal.gif" />
+        <img src="/img/stamps/miku.gif" />
+        <img src="/img/stamps/utau.gif" />
     </div>
 </template>
 

nginx/vue/src/components/home/Watching.vue

@@ -1,5 +1,5 @@
 <script setup>
-import OptionalLinkTable from "@/components/quick/OptionalLinkTable.vue";
+import OptionalLinkTable from "@/components/util/OptionalLinkTable.vue";
 
 const data = [
     {

nginx/vue/src/components/text/Header.vue

@@ -0,0 +1,7 @@
+<template>
+    <div class="w-full border-b border-primary">
+        <h1>
+            <slot />
+        </h1>
+    </div>
+</template>

nginx/vue/src/components/text/Paragraph.vue

@@ -0,0 +1,5 @@
+<template>
+    <p class="p-1">
+        <slot />
+    </p>
+</template>

nginx/vue/src/components/util/ToggleLinkTable.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from "vue";
-import LinkTable from "@/components/quick/LinkTable.vue";
+import LinkTable from "@/components/util/LinkTable.vue";
 
 const props = defineProps({
     linkArr: {