update

Author: robotism

eslint.config.mjs eslint.config.tseslint.config.mjs renamed to eslint.config.ts

@@ -2,6 +2,8 @@
 
 import appconfig from "./site.config";
 
+import tailwindcss from "@tailwindcss/vite";
+
 export default defineNuxtConfig({
   compatibilityDate: "2025-02-19",
   devtools: {
@@ -10,7 +12,9 @@ export default defineNuxtConfig({
       enabled: true,
     },
   },
-  vite: {},
+  vite: {
+    plugins: [tailwindcss()],
+  },
   nitro: {
     prerender: {
       crawlLinks: true,
@@ -135,4 +139,4 @@ export default defineNuxtConfig({
     },
   },
   content: {},
-});
+});

nuxt.config.ts

@@ -28,15 +28,14 @@
     "@nuxtjs/robots": "^5.2.4",
     "@nuxtjs/sitemap": "^7.2.6",
     "@quasar/extras": "^1.16.17",
-    "@tailwindcss/postcss": "^4.0.9",
+    "@tailwindcss/vite": "^4.0.9",
     "@unhead/vue": "^1.11.20",
     "@vueuse/nuxt": "^12.7.0",
     "eslint": "^9.21.0",
     "gsap": "^3.12.7",
     "moment": "^2.30.1",
     "nuxt": "^3.15.4",
     "nuxt-quasar-ui": "^2.1.12",
-    "postcss": "^8.5.3",
     "quasar": "^2.17.7",
     "tailwindcss": "^4.0.9",
     "vue": "latest",
@@ -45,7 +44,6 @@
   "devDependencies": {
     "@iconify-json/lucide": "^1.2.27",
     "@iconify-json/simple-icons": "^1.2.26",
-    "autoprefixer": "^10.4.20",
     "prettier": "3.5.2",
     "typescript": "^5.7.3"
   },

package-lock.json

@@ -41,6 +41,10 @@ p {
     color: var(--ui-secondary);
   }
 
+  blockquote {
+    border-left: 2px solid var(--ui-secondary);
+  }
+
   p {
   }
 }

package.json

@@ -11,10 +11,10 @@
           {{ article?.title }}
         </div>
         <div class="flex flex-row">
-          <q-chip color="secondary" text-color="white" icon="alarm">
+          <q-chip dense color="secondary" text-color="white" icon="alarm">
             {{ $fmt?.fromNow?.(article.updatedAt) }}
           </q-chip>
-          <q-chip color="secondary" text-color="white" icon="event">
+          <q-chip dense color="secondary" text-color="white" icon="event">
             {{ $fmt?.localDate?.(article.updatedAt, "YYYY-MM-DD HH:mm") }}
           </q-chip>
         </div>
@@ -42,6 +42,7 @@
       <div class="flex flex-row">
         <q-chip
           v-for="(tag, index) in articleRouteTags"
+          dense
           :key="index"
           icon="las la-location-arrow"
           color="green-4"
@@ -71,6 +72,7 @@
         </q-chip>
         <q-chip
           v-for="(tag, index) in article?.tags"
+          dense
           :key="index"
           icon="las la-tag"
           color="blue-4"

postcss.config.mjs

@@ -7,11 +7,8 @@
     />
     <NuxtLinkLocale
       to="/"
-      class="cursor-pointer bg-gradient-to-r bg-clip-text text-transparent text-xl font-bold"
-      :class="[
-        'from-amber-500 to-pink-500',
-        'hover:from-pink-500 hover:to-amber-500',
-      ]"
+      class="cursor-pointer text-primary hover:text-secondary text-xl font-bold"
+      style="text-shadow: #fc0 1px 0 10px"
     >
       {{ $t("app.name") }}
     </NuxtLinkLocale>

src/assets/css/typography.css

@@ -5,23 +5,22 @@
         class="w-full h-full flex flex-col gap-4 items-center justify-center"
       >
         <img
+          class="object-contain w-full max-h-[30vh]"
           v-if="article.cover"
           :src="article.cover"
-          class="object-contain w-full max-h-[30vh]"
           :alt="article.title"
         />
         <MarkdownRender class="max-w-[1080px]" :value="article" />
-        <div class="flex w-full justify-between">
+        <div class="flex w-full justify-between px-2">
           <div v-if="previous">
-            <NuxtLink :to="`/articles/${previous?.id}`">
-              {{ previous?.title }}
-              <q-btn :label="$t('articles.previous')" />
+            <NuxtLink :to="previous?.route">
+              <q-btn :label="$t('articles.previous') + ':' + previous?.title" />
             </NuxtLink>
           </div>
+          <div></div>
           <div v-if="next">
-            <NuxtLink :to="`/articles/${next?.id}`">
-              {{ next?.title }}
-              <q-btn :label="$t('articles.next')" />
+            <NuxtLink :to="next?.route">
+              <q-btn :label="$t('articles.next') + ':' + next?.title" />
             </NuxtLink>
           </div>
         </div>
@@ -39,11 +38,12 @@
 <script lang="ts" setup>
 import MarkdownRender from "~/components/article/MarkdownRender.vue";
 
+const route = useRoute();
 const { locale } = useI18n();
 const { computedTitle } = useWindow();
-const { getArticleIdByRoute } = useArticles();
+const { getArticleIdByRoute, getRouteByArticleId } = useArticles();
 
-const { data: article } = await useAsyncData(() =>
+const { data: article } = await useAsyncData(route.path + "#article", () =>
   queryCollection("articles")
     .where("id", "=", getArticleIdByRoute())
     .limit(1)
@@ -53,7 +53,7 @@ const { data: article } = await useAsyncData(() =>
     })
 );
 
-const { data: previous } = await useAsyncData(() =>
+const { data: previous } = await useAsyncData(route.path + "#previous", () =>
   queryCollection("articles")
     .where("stem", "LIKE", locale.value + "/%")
     .where("updatedAt", "<", article.value?.updatedAt)
@@ -65,17 +65,24 @@ const { data: previous } = await useAsyncData(() =>
     })
 );
 
-const { data: next } = await useAsyncData(() =>
+const { data: next } = await useAsyncData(route.path + "#next", () =>
   queryCollection("articles")
     .where("stem", "LIKE", locale.value + "/%")
-    .where("updatedAt", "<", article.value?.updatedAt)
+    .where("updatedAt", ">", article.value?.updatedAt)
     .order("updatedAt", "ASC")
     .limit(1)
     .first()
     .catch((err) => {
       console.error(err);
     })
 );
+if (previous.value) {
+  previous.value.route = getRouteByArticleId(previous.value.id) || "";
+}
+
+if (next.value) {
+  next.value.route = getRouteByArticleId(next.value.id) || "";
+}
 
 useHead(() => ({
   titleTemplate: computedTitle(article.value?.title),