navbar improve

nginx/vue/src/components/Navbar.vue

@@ -1,4 +1,5 @@
 <script setup>
+import Headline from "@/components/text/Headline.vue";
 import { computed } from "vue";
 import { useRoute } from "vue-router";
 
@@ -17,10 +18,36 @@ const parentPath = computed(() => {
 const inHome = computed(() => {
     return route.path == "/";
 });
+
+const faces = [
+    "^_^",
+    "¯\\_(ツ)_/¯",
+    "(◕‿◕✿)",
+    "ಠ_ಠ",
+    "ʘ‿ʘ",
+    "^̮^",
+    ">_>",
+    "¬_¬",
+    "˙ ͜ʟ˙",
+    "( ͡° ͜ʖ ͡°)",
+    "[̲̅$̲̅(̲̅5̲̅)̲̅$̲̅]",
+    "(ง'̀-'́)ง",
+    "\ (•◡•) /",
+    "( ͡ᵔ ͜ʖ ͡ᵔ )",
+    "ᕙ(⇀‸↼‶)ᕗ",
+    "⚆ _ ⚆",
+    "(｡◕‿◕｡)",
+    "(╯°□°)╯︵ ʞooqǝɔɐɟ",
+    "̿ ̿ ̿'̿'\̵͇̿̿\з=(•_•)=ε/̵͇̿̿/'̿'̿ ̿",
+    "(☞ﾟヮﾟ)☞ ☜(ﾟヮﾟ☜)",
+];
+const faces_string = faces.join("      ");
 </script>
 
 <template>
-    <nav class="flex flex-row w-fit h-fit background">
+    <nav
+        class="flex flex-row w-full h-fit background border border-primary bg-bg_primary"
+    >
         <RouterLink class="bdr-2 bg-bg_primary" to="/" v-if="!inHome">
             <a>HOME</a>
         </RouterLink>
@@ -31,6 +58,9 @@ const inHome = computed(() => {
         >
             <a>UP</a>
         </RouterLink>
+        <Headline class="border flex-1">
+            <code class="whitespace-pre">{{ faces_string }}</code>
+        </Headline>
     </nav>
 </template>
 

nginx/vue/src/components/text/Headline.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+
+const container = ref(null);
+const item1 = ref(null);
+const item2 = ref(null);
+const offset = ref(0);
+
+let rafId;
+
+const speed = 0.5; // pixels per frame
+
+function animate() {
+    const ctnr = container.value;
+    const it1 = item1.value;
+    const it2 = item2.value;
+
+    const width = Math.max(ctnr.offsetWidth, it1.scrollWidth);
+
+    offset.value -= speed;
+
+    if (offset.value <= -width) {
+        offset.value += width;
+    }
+
+    it1.style.transform = `translateX(${offset.value}px)`;
+    it2.style.transform = `translateX(${width + offset.value}px)`;
+
+    rafId = requestAnimationFrame(animate);
+}
+
+onMounted(() => {
+    rafId = requestAnimationFrame(animate);
+});
+
+onUnmounted(() => {
+    cancelAnimationFrame(rafId);
+});
+</script>
+
+<template>
+    <div class="marquee" ref="container">
+        <p class="item" ref="item1"><slot /></p>
+        <p class="item item2" ref="item2"><slot /></p>
+    </div>
+</template>
+
+<style scoped>
+.marquee {
+    overflow: hidden;
+    width: 100%;
+    will-change: transform;
+}
+
+.item {
+    top: 0px;
+    padding-right: 3em;
+    width: fit-content;
+    white-space: nowrap;
+}
+
+.item2 {
+    position: absolute;
+}
+</style>