refactor: migrate base App

src/App.vue

@@ -1,158 +1,80 @@
+<script setup lang="ts">
+import { ref, provide } from "vue";
+import { RouterView } from "vue-router";
+import { isWarnKey, modalResultKey, nsfwKey, showModalKey } from "@/keys";
+import RefHeader from "@/components/RefHeader.vue";
+import RefFooter from "@/components/RefFooter.vue";
+import SiteNavigation from "@/components/SiteNavigation.vue";
+import pkg from "../package.json";
+
+const version = pkg.version;
+
+const isNsfw = ref(false);
+const isConfirmedHorny = ref(false);
+const isWarn = ref(false);
+
+const showModal = (): void => {
+  if (!isConfirmedHorny.value) {
+    isWarn.value = true;
+    document.body.classList.add("scroll-lock");
+
+    setTimeout(() => {
+      isNsfw.value = false;
+    }, 1);
+  } else {
+    isNsfw.value = !isNsfw.value;
+  }
+};
+
+const modalResult = (value: boolean): void => {
+  isNsfw.value = value;
+  isConfirmedHorny.value = value;
+  isWarn.value = false;
+  document.body.classList.remove("scroll-lock");
+};
+
+provide(isWarnKey, isWarn);
+provide(modalResultKey, modalResult);
+provide(nsfwKey, isNsfw);
+provide(showModalKey, showModal);
+</script>
+
 <template>
-  <ref-header>
+  <RefHeader>
+    <!-- max 500px -->
+    <picture>
+      <source
+        srcset="@/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&avif&quality=75&srcset"
+        sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
+        type="image/avif"
+      />
+      <source
+        srcset="
+          @/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&webp&quality=100&srcset
+        "
+        sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
+        type="image/webp"
+      />
       <img
         class="nav-logo"
-      src="@/assets/sebin-smug-icon.png"
+        srcset="@/assets/sebin-smug-icon.png?w=36;40;48;56;72;80;96;112;108;120;144;168&png&srcset"
+        sizes="(min-width: 120em) 56px, (min-width: 80em) 48px, (min-width: 35em) 40px, 36px"
         alt="Sebin Avatar"
       />
+    </picture>
 
-    <navigation :routes="routes" />
+    <SiteNavigation />
-  </ref-header>
+  </RefHeader>
 
   <main>
-    <router-view />
+    <RouterView />
   </main>
 
-  <ref-footer>
+  <RefFooter>
     <p>v{{ version }} &copy; {{ new Date().getFullYear() }} Sebin Nyshkim</p>
     <p>
       Background Pattern &copy;
       <a href="https://www.svgbackgrounds.com/">SVG Backgrounds</a>
     </p>
-  </ref-footer>
+  </RefFooter>
 </template>
-
-<script>
-import Navigation from "@/components/Navigation.vue";
-import RefHeader from "@/components/Header.vue";
-import RefFooter from "@/components/Footer.vue";
-
-export default {
-  components: { Navigation, RefHeader, RefFooter },
-  data() {
-    return {
-      nsfw: false,
-      isConfirmedHorny: false,
-      isWarn: false,
-      version: require("../package.json").version,
-      routes: [
-        { path: "/", name: "Home" },
-        { path: "/general", name: "General" },
-        { path: "/anatomy", name: "Anatomy" },
-        { path: "/clothing", name: "Clothing" },
-        { path: "/abilities", name: "Abilities" },
-        { path: "/overdrive", name: "Overdrive" },
-      ],
-      links: [
-        { href: "https://twitter.com/SebinNyshkim", text: "Twitter" },
-        { href: "https://t.me/SebinNyshkim", text: "Telegram" },
-        {
-          href: "https://www.furaffinity.net/user/sonofdragons",
-          text: "Fur Affinity",
-        },
-      ],
-    };
-  },
-  methods: {
-    showWarning() {
-      if (!this.isConfirmedHorny) {
-        this.isWarn = true;
-        document.body.classList.toggle("scroll-lock");
-
-        setTimeout(() => {
-          this.nsfw = false;
-        }, 1);
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@import "@/scss/base.scss";
-@import "~normalize.css";
-
-#app {
-  color: $copy-color;
-  font-size: 1.125em;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  transition: all ease-in-out 0.25s;
-
-  @include mq-desktop {
-    font-size: 1.25em;
-  }
-
-  @include mq-bigscreen {
-    font-size: 1.5em;
-  }
-
-  position: relative;
-
-  &:before,
-  &:after {
-    content: "";
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  &:before {
-    background: url("/subtle-prism.svg");
-    mix-blend-mode: multiply;
-    z-index: -1;
-  }
-
-  &:after {
-    background: radial-gradient(
-        circle at bottom right,
-        $bg-color-lighter 5%,
-        transparent 50%
-      ),
-      radial-gradient(
-        circle at top left,
-        $bg-color-light 5%,
-        $bg-color-dark 100%
-      );
-
-    z-index: -2;
-
-    @include theme(dark) {
-      background: radial-gradient(
-          circle at bottom right,
-          darken($bg-color-lighter, 30%) 5%,
-          transparent 50%
-        ),
-        radial-gradient(
-          circle at top left,
-          darken($bg-color-light, 10%) 5%,
-          darken($bg-color-dark, 10%) 100%
-        );
-    }
-  }
-}
-
-.nav-logo {
-  display: block;
-  margin: 0 0.5em 0 0.25em;
-  height: 2em;
-  border: 0.125em solid #fff;
-  border-radius: 100%;
-  box-shadow: 0.125em 0.125em 0.5em rgba(#000, 0.7);
-}
-
-main {
-  min-height: 100vh;
-  padding: 2em 0 1em 0;
-}
-
-.footer p {
-  margin: 0;
-
-  & + p {
-    margin: 0.5em auto 0 auto;
-  }
-}
-</style>