chore: upgrade to nuxt 4

2025-10-19 15:32:55 +08:00
parent e814c77333
commit 21c717ed79
50 changed files with 3353 additions and 4155 deletions
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { revisions } from "@/data/siteRevisions";
+useHead({ title: "Oeufs?" });
+</script>
+
+<template>
+  <div class="flex flex-col items-center w-full h-full justify-between">
+    <Navbar />
+    <slot />
+    <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"
+    >
+      <label class="flex items-center gap-2">
+        <p>Revision:</p>
+        <!--
+          the onchange is so bad - i'd rather it be done through vue
+          but nuxt is genuinely screwing me over here
+
+          ig r4 has to be in next.js
+        -->
+        <select
+          class="p-2 border rounded-lg dark:bg-[#222]"
+          onchange="location = this.value"
+        >
+          <option v-for="(r, i) in revisions" :key="i" :value="r.url">
+            {{ r.title }}
+          </option>
+        </select>
+      </label>
+      <div class="flex flex-col items-center">
+        <p>
+          Licensed under the AGPL-3.0 on
+          <a class="underline" href="https://github.com/potatoeggy/public">
+            GitHub</a
+          >
+          and
+          <a class="underline" href="https://git.eggipelago.com/eggy/public">
+            Gitea
+          </a>
+        </p>
+      </div>
+      <div class="w-36"></div>
+    </footer>
+  </div>
+  <slot name="top-button" />
+</template>
+
+<style>
+html {
+  background: white;
+  color: black;
+  transition:
+    color 0.2s ease,
+    background 0.2s ease;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+
+html.dark {
+  background: #222;
+  color: white;
+}
+
+html::before {
+  content: "";
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  background: #222;
+  transform: translateX(-100%);
+  transition: transform 0.2s ease;
+  z-index: 0;
+}
+
+/* div#__nuxt {
+  min-height: 100vh;
+} 
+
+it's better if everything is sort of long but that is not the case
+*/
+
+html.dark::before {
+  transform: translateX(0);
+}
+
+main {
+  width: 80%;
+  max-width: 60rem;
+  margin: auto;
+  padding-top: 2rem;
+}
+
+footer {
+  --footer-drop-color: lightgray;
+  transition: background 0.2s ease;
+  box-shadow: 0 -0.05rem 0.75rem 0 var(--footer-drop-color);
+  margin-top: 2rem;
+}
+
+html.dark footer {
+  --footer-drop-color: black;
+}
+
+@media screen and (max-width: 600px) {
+  main {
+    width: 90%;
+  }
+}
+</style>