chore: improve docs

css only!

components/Date.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { getPrettyDate, getUtcDate } from "~~/shared/metadata";
-import { AnyParsedContent } from "~~/shared/types";
+import type { AnyParsedContent } from "~~/shared/types";
 
 const props = defineProps<{ doc: AnyParsedContent }>();
 

components/HeaderLoop.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+const props = defineProps<{ strings: string[]; class?: string }>();
+</script>
+
+<template>
+  <h1 :class="[props.class, 'text-loop relative text-center w-full h-16']">
+    <span class="text absolute w-full" v-for="s in props.strings" :key="s">
+      {{ s }}
+    </span>
+  </h1>
+</template>
+
+<style scoped lang="scss">
+@use "sass:math";
+@mixin text-loop($els) {
+  .text-loop {
+    overflow: hidden;
+    $duration: 3s;
+
+    @if $els > 1 {
+      & > span {
+        display: block;
+        opacity: 0;
+        @for $i from 1 through $els {
+          &:nth-child(#{$i}) {
+            animation: move-test-#{$i} $duration * $els infinite;
+          }
+        }
+      }
+    }
+  }
+
+  @for $i from 1 through $els {
+    @keyframes move-test-#{$i} {
+      $interval: calc(100% / $els);
+      $upper_bound: $interval * $i;
+      $lower_bound: $interval * ($i - 1);
+
+      // we try to make the previous exit and the next enter
+      // at the same time, also taking care of negatives
+
+      // for i = 1, this is negative, so start the animation at the end of the cycle
+      @if $i > 1 {
+        0% {
+          opacity: 0;
+          transform: translateY(100%);
+        }
+
+        #{$lower_bound - $interval * 0.05} {
+          opacity: 0;
+          transform: translateY(100%);
+        }
+      }
+
+      #{$lower_bound} {
+        opacity: 1;
+        transform: translateY(0%);
+      }
+
+      #{$lower_bound + $interval * 0.95} {
+        opacity: 1;
+        transform: translateY(0%);
+      }
+
+      #{$upper_bound} {
+        opacity: 0;
+        transform: translateY(-100%);
+      }
+
+      @if $i == 1 {
+        // reset el 1
+        #{100% - $interval * 0.05} {
+          opacity: 0;
+          transform: translateY(100%);
+        }
+        100% {
+          opacity: 1;
+          transform: translateY(0%);
+        }
+      } @else {
+        100% {
+          opacity: 0;
+          transform: translateY(-100%);
+        }
+      }
+    }
+  }
+}
+
+/**
+  * For one element, we have the following pattern. To expand it to 2+
+  * els, we divide 100% by the number of els and turn on the animation
+  * only at the correct time.
+  * -5%: invis
+  * 0%: vis
+  * 95%: vis
+  * 100%: invis
+  */
+
+@include text-loop(3);
+</style>

layouts/default.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { revisions } from "@/data/siteRevisions";
-useHead({ title: "Eggworld" });
+useHead({ title: "Oeufs?" });
 </script>
 
 <template>
@@ -10,7 +10,7 @@ useHead({ title: "Eggworld" });
     <footer
       class="flex items-center justify-between p-3 bg-gray-100 w-full text-sm dark:bg-gray-800 flex-col md:flex-row gap-2"
     >
-      <div class="flex items-center gap-2">
+      <label class="flex items-center gap-2">
         <p>Revision:</p>
         <!--
           the onchange is so bad - i'd rather it be done through vue
@@ -26,7 +26,7 @@ useHead({ title: "Eggworld" });
             {{ r.title }}
           </option>
         </select>
-      </div>
+      </label>
       <div class="flex flex-col items-center">
         <p>
           Licensed under the AGPL-3.0 on
@@ -49,7 +49,9 @@ useHead({ title: "Eggworld" });
 html {
   background: white;
   color: black;
-  transition: color 0.2s ease, background 0.2s ease;
+  transition:
+    color 0.2s ease,
+    background 0.2s ease;
   overflow-x: hidden;
   overflow-y: scroll;
   scroll-behavior: smooth;

nuxt.config.ts

@@ -31,7 +31,7 @@ export default defineNuxtConfig({
     "@nuxt/content",
     "@nuxtjs/tailwindcss",
     "@nuxtjs/color-mode",
-    "@funken-studio/sitemap-nuxt-3",
+    "@nuxtjs/sitemap",
   ],
   css: ["@/assets/css/main.scss"],
   nitro: {
@@ -42,9 +42,11 @@ export default defineNuxtConfig({
   typescript: {
     shim: false,
   },
-  /* @ts-expect-error */
+  site: {
+    url: process.env.BASE_URL || "https://eggworld.me",
+  },
   sitemap: {
-    hostname: process.env.BASE_URL || "https://eggworld.me",
+    strictNuxtContentPaths: true,
   },
   tailwindcss: {},
   colorMode: {
@@ -94,6 +96,9 @@ export default defineNuxtConfig({
     },
   },
   experimental: {
+    sharedPrerenderData: true,
+  },
+  features: {
     noScripts: true,
   },
 });

package.json

@@ -7,21 +7,20 @@
     "preview": "nuxt preview"
   },
   "devDependencies": {
-    "@funken-studio/sitemap-nuxt-3": "^4.0.4",
+    "@nuxt/content": "^2.12.0",
-    "@nuxt/content": "^2.6.0",
+    "@nuxtjs/color-mode": "^3.3.2",
-    "@nuxtjs/color-mode": "^3.2.0",
+    "@nuxtjs/sitemap": "^5.1.0",
-    "@nuxtjs/tailwindcss": "^6.7.0",
+    "@nuxtjs/tailwindcss": "^6.11.4",
-    "@tailwindcss/typography": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.10",
-    "@types/node": "^20.2.5",
+    "@types/node": "^20.11.24",
-    "dayjs": "^1.11.7",
+    "dayjs": "^1.11.10",
-    "nuxt": "3.5.2",
+    "nuxt": "3.10.3",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.5",
     "reading-time": "^2.0.0-1",
-    "rehype-katex": "^6.0.3",
+    "rehype-katex": "^7.0.0",
-    "remark-math": "^5.1.1",
+    "remark-math": "^6.0.0",
-    "sass": "^1.62.1",
+    "sass": "^1.71.1",
-    "typescript": "^5.0.4",
+    "typescript": "^5.3.3",
-    "unist-util-visit": "^4.1.2",
+    "vite-svg-loader": "^5.1.0"
-    "vite-svg-loader": "^4.0.0"
   }
 }

pages/index.vue

@@ -4,12 +4,14 @@ import About from "@/components/index/about.vue";
 
 //definePageMeta({ layout: "withtop" });
 useTitle("Home", "Personal website!");
+
+const welcomeStrings = ["Welcome!", "Bienvenue!", "欢迎!"];
 </script>
 
 <template>
   <main class="flex flex-col items-center justify-around gap-8">
     <div class="flex flex-col items-center">
-      <h1 class="text-bitter font-bold">Welcome!</h1>
+      <HeaderLoop class="text-bitter font-bold" :strings="welcomeStrings" />
       <p>What are you here to see?</p>
       <p>
         For my portfolio, please visit