nuxt3 rewrite

Author: eggsy

Diff for: .gitignore

@@ -95,3 +95,5 @@ sw.*
 # Others
 .yarn
 .netlify
+.output
+.data

Diff for: .node-version

@@ -1,5 +1,13 @@
 <h1 align="center">eggsy.xyz Changelog</h1>
 
+## ⚠️ 7.0.0
+
+Complete rewrite in Nuxt 3, updating all the modules and converting all code from Vue 2 to Vue 3.
+
+**⚠️ Breaking Changes:**
+
+- ❌ Daily songs page integration as well as Firebase related stuff are removed.
+
 ## 6.0.0
 
 Modernized layouts, pages, components, deleted bunch of unnecessary complications, simplified blog pages and revamped colors.

Diff for: .npmrc

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const colorMode = useColorMode()
+
+useHead(() => {
+  let string = "eggsy.xyz"
+
+  return {
+    titleTemplate: `%s - ${string}`,
+    htmlAttrs: {
+      class: `min-h-screen ${colorMode.preference} ${colorMode.value}`,
+    },
+    meta: [
+      {
+        hid: "og:site_name",
+        name: "og:site_name",
+        content: string,
+      },
+    ],
+  }
+})
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-50 dark:bg-neutral-900">
+    <Navbar class="pt-10" />
+
+    <!-- Nuxt component -->
+    <main class="responsive-screen min-h-screen pb-8">
+      <NuxtLoadingIndicator />
+      <NuxtPage />
+    </main>
+
+    <!-- Footer -->
+    <Footer />
+
+    <!-- Go to top button -->
+    <GoTop />
+
+    <!-- Sponsor Popup -->
+    <SponsorPopup />
+  </div>
+</template>

Diff for: @types/runtimeConfig.d.ts

@@ -0,0 +1,3 @@
+@use "body.scss";
+@use "scrollbar.scss";
+@use "transitions.scss";

Diff for: @types/vue.shim.d.ts

@@ -3,16 +3,16 @@
   Author: Voknehzyr (@voknehzyr)
 */
 
-.tippy-tooltip.discord-theme {
+.tippy-box[data-theme~="discord"] {
   background-color: black;
   box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.5);
 }
 
-.tippy-tooltip[data-inertia][data-state="visible"] {
+.tippy-box[data-inertia][data-state="visible"] {
   transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
-.tippy-popper[x-placement^="top"] .tippy-tooltip[data-animation="discord-anim"] {
+.tippy-box[data-placement^="top"][data-animation="discord-anim"] {
   transform-origin: center !important;
 
   &[data-state="hidden"] {
@@ -25,7 +25,7 @@
   }
 }
 
-.tippy-popper[x-placement^="bottom"] .tippy-tooltip[data-animation="discord-anim"] {
+.tippy-box[data-placement^="bottom"][data-animation="discord-anim"] {
   &[data-state="hidden"] {
     opacity: 0;
     transform: scale(0.9) translateY(11px);
@@ -36,20 +36,19 @@
   }
 }
 
-.tippy-popper[x-placement^="top"] .tippy-tooltip.discord-theme .tippy-arrow {
+.tippy-box[data-placement^="top"][data-theme~="discord"] .tippy-arrow {
   border-top-color: black;
   filter: drop-shadow(0 2px 16px 0 rgba(0, 0, 0, 0.5));
 }
 
-.tippy-popper[x-placement^="bottom"] .tippy-tooltip.discord-theme .tippy-arrow {
+.tippy-box[data-placement^="bottom"][data-theme~="discord"] .tippy-arrow {
   border-bottom-color: black;
   filter: drop-shadow(0 2px 16px 0 rgba(0, 0, 0, 0.5));
 }
 
-.tippy-tooltip.discord-theme .tippy-content {
-  font-family: "Inter", sans-serif;
-  padding: 1.5px 4px;
-  color: rgba(255, 255, 255, 0.95);
+.tippy-box[data-theme~="discord"] .tippy-content {
+  padding: 4px 8px;
+  color: rgba(255, 255, 255, 0.95) !important;
   font-weight: 500;
   letter-spacing: 0.4px;
   font-size: 0.965em;

Diff for: CHANGELOG.md

@@ -0,0 +1,19 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  .responsive-screen {
+    @apply max-w-screen-lg mx-auto px-6 md:px-0;
+  }
+}
+
+@layer components {
+  .card-base {
+    @apply border-[0.1px] p-4 bg-neutral-100 hover:bg-neutral-200/40 border-neutral-200 transition-colors dark:bg-neutral-800/30 dark:border-neutral-800/80 dark:hover:bg-neutral-800/40 dark:text-white/80 dark:hover:text-white;
+  }
+
+  .focus-ring {
+    @apply ring-offset-2 focus:outline-none focus:ring-1 ring-offset-gray-50 ring-gray-300 dark:ring-offset-neutral-900 dark:ring-neutral-800 dark:focus:ring-offset-neutral-900 dark:focus:ring-neutral-800;
+  }
+}

Diff for: app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="flex flex-col gap-2 md:grid md:grid-flow-col md:auto-cols-fr">
+    <slot />
+  </div>
+</template>

Diff for: src/stylesheets/body.scss renamed to assets/css/body.scss

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+interface Props {
+  type?: string
+  title?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "information",
+  title: "",
+})
+
+const getIcon = computed(() => {
+  if (props.type === "warning") return "❗️"
+  else if (props.type === "danger") return "🚨"
+  else if (props.type === "success") return "✅"
+  else return "💡"
+})
+</script>
+
+<template>
+  <div
+    class="notification flex flex-col md:items-center md:flex-row gap-x-4 gap-y-2"
+    :class="type"
+  >
+    <span class="text-xl md:text-lg">{{ getIcon }}</span>
+
+    <div>
+      <h1 v-if="title">{{ title }}</h1>
+
+      <p v-if="!!$slots.default">
+        <slot />
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.notification,
+.nuxt-content .notification {
+  @apply rounded-lg border-[0.1px] my-5 p-4 bg-opacity-25 bg-neutral-300 border-neutral-200 dark:bg-neutral-800/30 dark:border-neutral-800;
+
+  h1 {
+    @apply font-medium text-lg m-0 hover:no-underline;
+  }
+
+  p,
+  p strong,
+  a {
+    @apply m-0 dark:text-white/70;
+  }
+
+  a {
+    @apply font-medium text-current underline hover:underline;
+  }
+}
+</style>

Diff for: assets/css/main.scss

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { SmartLink } from "#components"
+
+interface Props {
+  path: string
+}
+
+const props = defineProps<Props>()
+
+const { data: surroundPosts, status } = await useAsyncData(
+  `${props.path}-surround`,
+  () => {
+    return queryCollectionItemSurroundings("posts", props.path).order(
+      "createdAt",
+      "DESC",
+    )
+  },
+)
+
+const prev = computed(() => surroundPosts.value?.[0] || null)
+const next = computed(() => surroundPosts.value?.[1] || null)
+</script>
+
+<template>
+  <Transition name="fade" mode="out-in">
+    <div
+      v-if="status !== 'pending'"
+      class="grid gap-x-4 gap-y-2 grid-cols-1 md:grid-cols-2"
+    >
+      <Component
+        :is="prev ? SmartLink : 'div'"
+        :href="prev && prev.path"
+        class="rounded-lg card-base flex items-center space-x-2"
+        :class="
+          !prev
+            ? 'cursor-not-allowed'
+            : 'dark:hover:text-white hover:bg-opacity-40'
+        "
+      >
+        <Icon name="heroicons:chevron-left" class="h-4 w-4 flex-shrink-0" />
+
+        <span v-if="prev" class="truncate">{{ prev.title }}</span>
+        <span v-else class="truncate">Eski Gönderi Yok</span>
+      </Component>
+
+      <Component
+        :is="next ? SmartLink : 'div'"
+        :href="next && next.path"
+        :class="[
+          'rounded-lg card-base flex items-center space-x-2 justify-end',
+          !next
+            ? 'cursor-not-allowed'
+            : 'dark:hover:text-white hover:bg-opacity-40',
+        ]"
+      >
+        <span v-if="next" class="truncate">{{ next.title }}</span>
+        <span v-else class="truncate">Yeni Gönderi Yok</span>
+
+        <Icon name="heroicons:chevron-right" class="h-4 w-4 flex-shrink-0" />
+      </Component>
+    </div>
+  </Transition>
+</template>