build(nuxt): move to minimal nuxt config (#261)

* build(nuxt): move to minimal nuxt config

* build: ignore .vercel/ folder

* build(deps-dev): removing icons reduces the size of edge function

* fix(components): fix icon color

* build(nuxt): enable `headNext` config

* build(nuxt): remove because it is enabled by default

https://nuxt.com/docs/api/nuxt-config#headnext

* build(nuxt): add nuxt-security module

* style(nuxt.config): biome

* build(nuxt): add nuxt-seo and remove nuxt-secuity for now

* build: disable ogimage

* build: enable ogimage and update deps

* build(nuxt): use dot as separator

.gitignore

@@ -3,6 +3,7 @@
 .nuxt
 .nitro
 .cache
+.vercel
 dist
 
 # Node dependencies

assets/css/tailwind.css

@@ -2,11 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-.min-h-screen-dynamic {
-  /* prettier-ignore */
-  @apply min-h-screen min-h-[100dvh];
-}
-
 .btn-primary {
   @apply border border-black bg-sky-900 px-4 py-1 text-white hover:bg-white hover:text-gray-900 active:bg-sky-700 active:text-white;
 }

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
   "organizeImports": {
     "enabled": true
   },

components/AsideLink.vue

@@ -6,8 +6,7 @@
   >
     <Icon
       :name="iconName"
-      size="1.5rem"
-      class="h-full opacity-30 lg:h-5 lg:opacity-40"
+      class="opacity-30 text-2xl lg:w-6 lg:h-5 lg:opacity-40"
       :class="{ 'opacity-95': isExactActive }"
     />
     <div class="hidden lg:block">

components/ConflictingAnswersList.vue

@@ -12,7 +12,7 @@
         <Icon
           name="material-symbols:warning-outline"
           size="0.8rem"
-          color="red"
+          class="text-red-600 mt-1"
         />
         <span>"{{ conflictingAnswer }}"</span>
       </li>

components/IntroItem.vue

@@ -2,9 +2,8 @@
   <li class="flex items-center gap-2">
     <Icon
       size="1.2rem"
-      :color="iconColor"
       :name="iconName"
-      class="min-h-fit min-w-fit opacity-80"
+      class="opacity-80 flex-shrink-0"
     />
     <span><slot /></span>
   </li>
@@ -18,7 +17,14 @@ defineProps({
   },
   iconColor: {
     type: String,
+    required: false,
     default: 'black',
   },
 })
 </script>
+
+<style scoped>
+.icon {
+  color: v-bind(iconColor);
+}
+</style>

components/StarButton.vue

@@ -1,8 +1,8 @@
 <template>
-  <button class="bg-transparent">
+  <button class="flex bg-transparent">
     <Icon
       :name="isImportant ? 'ph:star-fill' : 'ph:star'"
-      color="#ff7a00"
+      class="text-[#ff7a00]"
       size="1.3rem"
     />
   </button>

components/TheHeader.vue

@@ -3,12 +3,13 @@
     <div
       class="mx-auto flex w-full select-none items-center justify-center p-4"
     >
-      <NuxtLink to="/" class="flex items-center">
+      <NuxtLink to="/" class="flex items-center gap-3">
         <Icon
           name="logos:linux-tux"
           size="8rem"
           aria-label="Distrohop logo"
           class="h-14 w-20 lg:h-40 lg:w-full"
+          mode="svg"
         />
         <span
           class="font-artifika self-center whitespace-nowrap text-2xl font-semibold lg:text-4xl"

error.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen-dynamic flex flex-col bg-neutral-100">
+  <div class="min-h-dvh flex flex-col bg-neutral-100">
     <TheHeader />
     <div class="mt-[15vh] flex grow flex-col items-center gap-4 text-center">
       <h1 class="text-6xl font-semibold">{{ error.statusCode }}</h1>

layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen-dynamic flex flex-col bg-neutral-100">
+  <div class="min-h-dvh flex flex-col bg-neutral-100">
     <NuxtLoadingIndicator color="#3c3c3c" />
     <TheHeader />
     <div class="flex grow flex-col">

nuxt.config.ts

@@ -1,111 +1,48 @@
-import browserslistToEsbuild from 'browserslist-to-esbuild'
-
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  app: {
-    head: {
-      titleTemplate: '%s · Distrohop',
-      // manually add lang until we use nuxt-i18n
-      htmlAttrs: { lang: 'en' },
-    },
-  },
-  experimental: {
-    asyncContext: true,
-    headNext: true,
-    componentIslands: true,
-  },
+  devtools: { enabled: true },
 
-  // Modules
   modules: [
-    // Image Handling and Optimization
-    '@nuxt/image',
-    // Performance Optimization
-    '@nuxtjs/critters',
-    'nuxt-delay-hydration',
-    // Content Management
-    '@nuxt/content',
-    // Utility Functions
-    '@vueuse/nuxt',
-    // Fonts and Typography
-    '@nuxtjs/fontaine',
-    '@nuxtjs/google-fonts',
     '@nuxtjs/tailwindcss',
-    // SEO and Crawling
-    '@nuxtjs/robots',
-    // Icons
-    'nuxt-icon',
-    'nuxt-build-cache',
+    '@nuxt/fonts',
+    '@nuxt/icon',
+    '@nuxt/content',
+    '@nuxt/image',
+    '@nuxtjs/seo',
   ],
 
-  // Module Options
-  content: {
-    highlight: { theme: 'github-light' },
-  },
-  delayHydration: {
-    debug: process.env.NODE_ENV === 'development',
-    mode: 'mount',
-    exclude: ['/quiz/**'],
-  },
-
-  // CSS and fonts
-  postcss: {
-    plugins: {
-      'postcss-preset-env': true,
-      cssnano: {
-        preset: [
-          'default',
-          {
-            discardComments: { removeAll: true },
-          },
-        ],
+  app: {
+    head: {
+      templateParams: {
+        separator: '·',
       },
     },
   },
-  // NOTE: the actual tailwindcss config file is in the root of the project
-  tailwindcss: {
-    // exposeConfig lets us use tailwind completion in vscode
-    exposeConfig: true,
-  },
-  googleFonts: {
-    download: true,
-    families: {
-      Artifika: true,
-      Archivo: true,
-    },
-  },
 
-  // Build
-  nitro: {
-    compressPublicAssets: { brotli: true, gzip: true },
-    minify: true,
-    future: { nativeSWR: true },
+  fonts: {
+    families: [{ name: 'Artifika' }, { name: 'Archivo' }],
   },
-  vite: {
-    esbuild: {
-      legalComments: 'none',
-      target: browserslistToEsbuild(),
-    },
+
+  icon: {
+    class: 'icon',
   },
-  routeRules: {
-    '/': { swr: true },
-    '/quiz/**': { swr: true },
-    '/info/**': { static: true },
+
+  sourcemap: false,
+
+  site: {
+    url: 'https://distrohop.vercel.app',
+    name: 'Distrohop',
+    description:
+      'Distrohop is a website that helps you find the best Linux distribution for your needs.',
+    defaultLocale: 'en',
   },
+
   runtimeConfig: {
     databaseUrl: process.env.DATABASE_URL,
     turso: {
       authToken: process.env.TURSO_AUTH_TOKEN,
     },
   },
 
-  // Development
-  devtools: { enabled: true },
-  typescript: {
-    strict: true,
-    tsConfig: {
-      compilerOptions: {
-        types: ['@types/node'],
-      },
-    },
-  },
+  compatibilityDate: '2024-07-06',
 })

package.json

@@ -1,54 +1,35 @@
 {
   "name": "nuxt-app",
   "private": true,
+  "type": "module",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare",
-    "db:migrate": "tsx migrate.ts",
-    "db:seed": "tsx src/server/database/seed.ts",
-    "db:generate": "drizzle-kit generate:sqlite --config ./drizzle.config.ts"
-  },
-  "browserslist": ["last 4 versions, >0.2%, not dead"],
-  "devDependencies": {
-    "@biomejs/biome": "1.8.3",
-    "@nuxt/devtools": "latest",
-    "@tailwindcss/typography": "^0.5.13",
-    "@types/better-sqlite3": "^7.6.10",
-    "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.14.9",
-    "drizzle-kit": "^0.22.7",
-    "lodash-es": "^4.17.21",
-    "nuxt": "^3.12.2",
-    "nuxt-build-cache": "^0.1.1",
-    "prettier": "^3.3.2",
-    "prettier-plugin-tailwindcss": "^0.6.5",
-    "tailwindcss": "^3.4.4",
-    "tsx": "^4.16.0",
-    "type-fest": "^4.20.1",
-    "vue": "^3.4.31",
-    "vue-router": "^4.4.0",
-    "vue-tsc": "^2.0.22"
+    "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@biomejs/biome": "^1.8.3",
     "@libsql/client": "^0.7.0",
-    "@nuxt/content": "2.13.1",
+    "@nuxt/content": "^2.13.1",
+    "@nuxt/fonts": "^0.7.1",
+    "@nuxt/icon": "^1.0.0",
     "@nuxt/image": "^1.7.0",
-    "@nuxtjs/critters": "^0.7.1",
-    "@nuxtjs/fontaine": "^0.4.3",
-    "@nuxtjs/google-fonts": "^3.2.0",
-    "@nuxtjs/robots": "^3.0.0",
+    "@nuxtjs/seo": "2.0.0-rc.11",
     "@nuxtjs/tailwindcss": "^6.12.0",
-    "@vueuse/core": "^10.11.0",
-    "@vueuse/nuxt": "^10.11.0",
-    "browserslist-to-esbuild": "^2.1.1",
+    "@tailwindcss/typography": "^0.5.13",
+    "drizzle-kit": "^0.22.8",
     "drizzle-orm": "^0.31.2",
-    "nuxt-delay-hydration": "^1.3.3",
-    "nuxt-icon": "^0.6.10",
-    "postcss-preset-env": "^9.5.14",
-    "valibot": "^0.36.0"
+    "lodash-es": "^4.17.21",
+    "nuxt": "^3.12.3",
+    "tailwindcss": "^3.4.4",
+    "type-fest": "^4.21.0",
+    "valibot": "^0.35.0",
+    "vue": "latest"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a",
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.12"
+  }
 }