fix: dev server issues, daisyui variables

moebiusmania · Nov 18, 2023 · d0f82ea · d0f82ea
1 parent 6f47479
commit d0f82ea
Show file tree

Hide file tree

Showing 14 changed files with 55 additions and 115 deletions.
diff --git a/app.vue b/app.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { Ref } from "vue";
+import type { Ref } from "vue";
 import { SITE_TITLE, SITE_DESCRIPTION } from "@/utils/config";
 
 const route = useRoute()
 
 const themes: { [k: string]: string } = {
-  dark: "night",
+  dark: "sunset",
   light: "corporate",
 }
 

diff --git a/components/Footer.server.vue b/components/Footer.server.vue
@@ -12,8 +12,7 @@ const today: Date = new Date();
         <a href="https://v3.nuxtjs.org/" class="text-primary ml-1" rel="noopener noreferrer" target="_blank">Nuxt 3</a>
       </p>
       <div class="w-36 sm:ml-auto sm:mt-0 mt-4 flex justify-center md:justify-end gap-3">
-        <a class="hover:text-primary-focus" href="https://github.com/moebiusmania" target="_blank"
-          rel="noopener noreferrer">
+        <a class="hover:text-primary" href="https://github.com/moebiusmania" target="_blank" rel="noopener noreferrer">
           <svg role="img" fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
             class="w-5 h-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <title>GitHub icon</title>
@@ -23,8 +22,8 @@ const today: Date = new Date();
           </svg>
         </a>
 
-        <a class="hover:text-primary-focus" href="https://www.youtube.com/channel/UCxaNVAQjuYZdpCrDukpVnxg"
-          target="_blank" rel="noopener noreferrer">
+        <a class="hover:text-primary" href="https://www.youtube.com/channel/UCxaNVAQjuYZdpCrDukpVnxg" target="_blank"
+          rel="noopener noreferrer">
           <svg role="img" fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
             class="w-5 h-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <title>YouTube icon</title>
@@ -34,7 +33,7 @@ const today: Date = new Date();
           </svg>
         </a>
 
-        <a class="hover:text-primary-focus" href="https://www.linkedin.com/in/salvatorelaisa" target="_blank"
+        <a class="hover:text-primary" href="https://www.linkedin.com/in/salvatorelaisa" target="_blank"
           rel="noopener noreferrer">
           <svg role="img" fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
             class="w-5 h-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -45,8 +44,7 @@ const today: Date = new Date();
           </svg>
         </a>
 
-        <a class="hover:text-primary-focus" href="https://twitter.com/moebiusmania" target="_blank"
-          rel="noopener noreferrer">
+        <a class="hover:text-primary" href="https://twitter.com/moebiusmania" target="_blank" rel="noopener noreferrer">
           <svg role="img" fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
             class="w-5 h-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <title>Twitter icon</title>

diff --git a/components/Header.vue b/components/Header.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { SITE_TITLE } from "@/utils/config";
 
-const classes = "mr-5 hover:text-neutral-focus dark:hover:text-neutral-content"
+const classes = "mr-5 hover:text-neutral dark:hover:text-neutral-content"
 const nav: Array<{
   name: string,
   href: string
@@ -35,7 +35,7 @@ const isActive = (href: string, route: any) => [classes, { underline: href === r
         <NuxtLink v-for="(item, index) in nav" :key="index" :class="isActive(item.href, route)" :href="item.href">{{
           item.name }}</NuxtLink>
         <a aria-label="theme switcher" :href="toggleTheme(dark)"
-          class="w-6 h-6 pt-0.5 cursor-pointer hover:text-neutral-focus dark:hover:text-neutral-content" id="theme">
+          class="w-6 h-6 pt-0.5 cursor-pointer hover:text-neutral dark:hover:text-neutral-content" id="theme">
           <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="currentColor">
             <path v-if="dark" class="sun" fill-rule="evenodd"
               d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"

diff --git a/components/Pagination.server.vue b/components/Pagination.server.vue
@@ -15,37 +15,19 @@ const next: number = page + 1;
 <template>
   <div class="pt-6 pb-8 space-y-2 md:space-y-5">
     <nav class="flex justify-between">
-      <NuxtLink
-        v-if="prev > 0"
-        class="text-primary hover:text-primary-focus"
-        :href="`/post/page/${prev}`"
-      >
+      <NuxtLink v-if="prev > 0" class="text-primary hover:text-primary" :href="`/post/page/${prev}`">
         <button aria-label="precedente">&larr; Precedente</button>
       </NuxtLink>
-      <button
-        aria-label="precedente"
-        v-else
-        disabled
-        class="text-neutral opacity-40"
-      >
+      <button aria-label="precedente" v-else disabled class="text-neutral opacity-40">
         &larr; Precedente
       </button>
 
       <span>Pagina {{ page }} di {{ totalPages }}</span>
 
-      <NuxtLink
-        v-if="allPosts === limit"
-        class="text-primary hover:text-primary-focus"
-        :href="`/post/page/${next}`"
-      >
+      <NuxtLink v-if="allPosts === limit" class="text-primary hover:text-primary" :href="`/post/page/${next}`">
         <button aria-label="successivo">Successivo &rarr;</button>
       </NuxtLink>
-      <button
-        aria-label="successivo"
-        v-else
-        disabled
-        class="text-neutral opacity-40"
-      >
+      <button aria-label="successivo" v-else disabled class="text-neutral opacity-40">
         Successivo &rarr;
       </button>
     </nav>

diff --git a/components/PostPreview.vue b/components/PostPreview.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ParsedContent } from "@nuxt/content/dist/runtime/types";
+import type { ParsedContent } from "@nuxt/content/dist/runtime/types";
 
 defineProps<{
   post: ParsedContent;
@@ -26,33 +26,20 @@ defineProps<{
         </h2>
       </NuxtLink>
       <div class="flex flew-wrap">
-        <NuxtLink
-          v-for="tag in post.tags"
-          class="mr-3 text-sm font-medium text-primary uppercase hover:text-primary-focus"
-          :href="`/tags/${tag}`"
-        >
+        <NuxtLink v-for="tag in post.tags" class="mr-3 text-sm font-medium text-primary uppercase hover:text-primary"
+          :href="`/tags/${tag}`">
           {{ tag }}
         </NuxtLink>
       </div>
       <p class="leading-relaxed mt-6 dark:text-base-content">
         {{ post.summary }}
       </p>
-      <NuxtLink
-        class="text-primary hover:text-primary-focus inline-flex items-center mt-4"
-        :href="`/post${post._path}`"
-      >
+      <NuxtLink class="text-primary hover:text-primary inline-flex items-center mt-4" :href="`/post${post._path}`">
         Continua a leggere ({{
           post.readingTime.text.replace("min read", "minuti")
         }})
-        <svg
-          class="w-4 h-4 ml-2"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          stroke-width="2"
-          fill="none"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
+        <svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none"
+          stroke-linecap="round" stroke-linejoin="round">
           <path d="M5 12h14"></path>
           <path d="M12 5l7 7-7 7"></path>
         </svg>

diff --git a/pages/devices/index.vue b/pages/devices/index.vue
@@ -21,8 +21,7 @@ const getOne = async (): Promise<ParsedContent[]> => {
 };
 
 const getColumns = (slug: string): string =>
-  `my-8 divide-y divide-primary-content grid gap-6 md:grid-cols-1 ${
-    slug ? "" : "md:grid-cols-2 lg:grid-cols-3"
+  `my-8 divide-y divide-neutral-content dark:divide-neutral grid gap-6 md:grid-cols-1 ${slug ? "" : "md:grid-cols-2 lg:grid-cols-3"
   }`;
 
 const posts: ParsedContent[] = slug ? await getOne() : await getAll();
@@ -31,8 +30,7 @@ const posts: ParsedContent[] = slug ? await getOne() : await getAll();
 <template>
   <div>
     <h1
-      class="text-3xl font-extrabold leading-9 tracking-tight text-base-content sm:text-4xl sm:leading-10 md:text-6xl md:leading-14"
-    >
+      class="text-3xl font-extrabold leading-9 tracking-tight text-base-content sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
       Devices
     </h1>
     <p class="mt-4">

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ParsedContent } from "@nuxt/content/dist/runtime/types";
+import type { ParsedContent } from "@nuxt/content/dist/runtime/types";
 import { SITE_TITLE, SITE_DESCRIPTION } from "@/utils/config";
 
 const posts: ParsedContent[] = await queryContent()
@@ -32,12 +32,12 @@ const posts: ParsedContent[] = await queryContent()
 
     <p class="text-xl leading-7 text-secondary">{{ SITE_DESCRIPTION }}</p>
 
-    <ul class="my-8 divide-y divide-primary-content">
+    <ul class="my-8 divide-y divide-neutral-content dark:divide-neutral">
       <PostPreview v-for="post in posts" :post="post" />
     </ul>
 
     <section class="flex justify-end text-base font-medium leading-6">
-      <NuxtLink href="/post/page/1" class="text-primary hover:primary-focus" aria-label="Tutti gli articoli">
+      <NuxtLink href="/post/page/1" class="text-primary hover:primary" aria-label="Tutti gli articoli">
         Tutti gli articoli &rarr;
       </NuxtLink>
     </section>

diff --git a/pages/post/[slug].vue b/pages/post/[slug].vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ParsedContent } from "@nuxt/content/dist/runtime/types";
+import type { ParsedContent } from "@nuxt/content/dist/runtime/types";
 import { SITE_TITLE } from "@/utils/config";
 
 definePageMeta({
@@ -55,8 +55,8 @@ const isReview = (tags: Array<string>): boolean => {
         <p class="my-2">
           Tags:
           <NuxtLink v-for="tag in post.tags"
-            class="uppercase inline-block mx-1 no-underline hover:text-primary-focus hover:underline"
-            :href="`/tags/${tag}`">{{ tag }}</NuxtLink>
+            class="uppercase inline-block mx-1 no-underline hover:text-primary hover:underline" :href="`/tags/${tag}`">{{
+              tag }}</NuxtLink>
         </p>
         <ReadingTime :value="post.readingTime.text" />
         <GamingPlatforms v-if="isReview(post.tags)" :platforms="post.platforms" />

diff --git a/pages/post/page/[page].vue b/pages/post/page/[page].vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { ParsedContent } from "@nuxt/content/dist/runtime/types";
-import { ref, Ref } from "vue";
+import type { ParsedContent } from "@nuxt/content/dist/runtime/types";
+import type { Ref } from "vue";
+import { ref } from "vue";
 
 definePageMeta({
   pageTransition: {
@@ -57,32 +58,17 @@ const onTyping = async (value: string): Promise<void> => {
 <template>
   <div>
     <h1
-      class="text-3xl font-extrabold leading-9 tracking-tight text-base-content sm:text-4xl sm:leading-10 md:text-6xl md:leading-14"
-    >
+      class="text-3xl font-extrabold leading-9 tracking-tight text-base-content sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
       Tutti gli articoli
     </h1>
-    <Search
-      :value="search"
-      :results="posts.length"
-      @typing="onTyping"
-      @clear="onClear"
-    />
-    <ul class="my-8 divide-y divide-primary-content">
+    <Search :value="search" :results="posts.length" @typing="onTyping" @clear="onClear" />
+    <ul class="my-8 divide-y divide-neutral-content dark:divide-neutral">
       <TransitionGroup name="list">
-        <PostPreview
-          v-for="post in posts"
-          :post="post"
-          :key="post._path?.replace('/', '')"
-        />
+        <PostPreview v-for="post in posts" :post="post" :key="post._path?.replace('/', '')" />
       </TransitionGroup>
     </ul>
-    <Pagination
-      v-if="search.length === 0"
-      :total-pages="totalPages"
-      :page="page"
-      :limit="limit"
-      :all-posts="posts.length"
-    />
+    <Pagination v-if="search.length === 0" :total-pages="totalPages" :page="page" :limit="limit"
+      :all-posts="posts.length" />
   </div>
 </template>
 
@@ -92,7 +78,8 @@ const onTyping = async (value: string): Promise<void> => {
   https://vuejs.org/guide/built-ins/transition-group.html
 -->
 <style>
-.list-move, /* apply transition to moving elements */
+.list-move,
+/* apply transition to moving elements */
 .list-enter-active,
 .list-leave-active {
   transition: all 0.5s ease;

diff --git a/pages/post/year/[year].vue b/pages/post/year/[year].vue
@@ -16,11 +16,10 @@ const posts: ParsedContent[] = await queryContent()
       {{ posts.length }} articoli trovati
     </p>
     <h1
-      class="text-3xl font-extrabold leading-9 tracking-tight text-base-content sm:text-4xl sm:leading-10 md:text-6xl md:leading-14 capitalize"
-    >
+      class="text-3xl font-extrabold leading-9 tracking-tight text-base-content sm:text-4xl sm:leading-10 md:text-6xl md:leading-14 capitalize">
       Ricerca per anno: {{ year }}
     </h1>
-    <ul class="my-8 divide-y divide-primary-content">
+    <ul class="my-8 divide-y divide-neutral-content dark:divide-neutral">
       <PostPreview v-for="post in posts" :post="post" />
     </ul>
   </div>

diff --git a/pages/post/year/index.vue b/pages/post/year/index.vue
@@ -16,8 +16,8 @@ const years: Array<string> = Array.from(new Array(difference), (e, i) => BASE +
     </div>
     <div class="flex flex-wrap max-w-lg">
       <div v-for="year in years" class="mt-2 mb-2 mr-5">
-        <NuxtLink class="mr-3 text-sm font-medium text-primary uppercase hover:primary-focus"
-          :href="`/post/year/${year}`">{{ year }}</NuxtLink>
+        <NuxtLink class="mr-3 text-sm font-medium text-primary uppercase hover:primary" :href="`/post/year/${year}`">{{
+          year }}</NuxtLink>
         <!-- <NuxtLink class="-ml-2 text-sm font-semibold text-gray-600 uppercase dark:text-gray-300"
           :href="`/year/${tag.label}`">({{ tag.items }})</NuxtLink> -->
       </div>

diff --git a/pages/tags/[tag].vue b/pages/tags/[tag].vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ParsedContent } from "@nuxt/content/dist/runtime/types";
+import type { ParsedContent } from "@nuxt/content/dist/runtime/types";
 
 const route = useRoute();
 const tag: string = route.params.tag as string;
@@ -16,11 +16,10 @@ const posts: ParsedContent[] = await queryContent()
       {{ posts.length }} articoli trovati con il tag
     </p>
     <h1
-      class="text-3xl font-extrabold leading-9 tracking-tight text-base-content sm:text-4xl sm:leading-10 md:text-6xl md:leading-14 capitalize"
-    >
+      class="text-3xl font-extrabold leading-9 tracking-tight text-base-content sm:text-4xl sm:leading-10 md:text-6xl md:leading-14 capitalize">
       {{ tag }}
     </h1>
-    <ul class="my-8 divide-y divide-primary-content">
+    <ul class="my-8 divide-y divide-neutral-content dark:divide-neutral">
       <PostPreview v-for="post in posts" :post="post" />
     </ul>
   </div>

diff --git a/pages/tags/index.vue b/pages/tags/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ParsedContent } from "@nuxt/content/dist/runtime/types";
+import type { ParsedContent } from "@nuxt/content/dist/runtime/types";
 
 type Tag = {
   label: string;
@@ -29,29 +29,19 @@ const tags: Array<Tag> = [...new Set(allTags)]
 
 <template>
   <div
-    class="flex flex-col items-start justify-start divide-y divide-gray-200 dark:divide-gray-700 md:justify-center md:items-center md:divide-y-0 md:flex-row md:space-x-6 md:mt-24"
-  >
+    class="flex flex-col items-start justify-start divide-y divide-gray-200 dark:divide-gray-700 md:justify-center md:items-center md:divide-y-0 md:flex-row md:space-x-6 md:mt-24">
     <div class="pt-6 pb-8 space-x-2 md:space-y-5">
       <h1
-        class="text-3xl font-extrabold leading-9 tracking-tight text-base-content sm:text-4xl sm:leading-10 md:text-6xl md:leading-14 capitalize"
-      >
+        class="text-3xl font-extrabold leading-9 tracking-tight text-base-content sm:text-4xl sm:leading-10 md:text-6xl md:leading-14 capitalize">
         Tags
       </h1>
     </div>
     <div class="flex flex-wrap max-w-lg">
-      <div
-        v-for="tag in tags"
-        class="mt-2 mb-2 mr-5 transition-all hover:underline"
-      >
-        <NuxtLink
-          class="mr-3 text-sm font-medium text-primary uppercase hover:text-primary-focus"
-          :href="`/tags/${tag.label}`"
-          >{{ tag.label }}</NuxtLink
-        ><NuxtLink
-          class="-ml-2 text-sm font-semibold text-gray-600 uppercase dark:text-gray-300"
-          :href="`/tags/${tag.label}`"
-          >({{ tag.items }})</NuxtLink
-        >
+      <div v-for="tag in tags" class="mt-2 mb-2 mr-5 transition-all hover:underline">
+        <NuxtLink class="mr-3 text-sm font-medium text-primary uppercase hover:text-primary" :href="`/tags/${tag.label}`">
+          {{ tag.label }}</NuxtLink>
+        <NuxtLink class="-ml-2 text-sm font-semibold text-gray-600 uppercase dark:text-gray-300"
+          :href="`/tags/${tag.label}`">({{ tag.items }})</NuxtLink>
       </div>
     </div>
   </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,7 +7,7 @@ module.exports = {
   },
   plugins: [require('@tailwindcss/typography'), require('daisyui')],
   daisyui: {
-    themes: ['corporate', 'night'],
-    darkTheme: 'night',
+    themes: ['corporate', 'sunset'],
+    darkTheme: 'sunset',
   },
 }