Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 12 commits into from
Jul 6, 2024
Merged

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

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
175bc3a
build(nuxt): move to minimal nuxt config
arunanshub Jun 30, 2024
44120e0
build: ignore .vercel/ folder
arunanshub Jun 30, 2024
3454842
build(deps-dev): removing icons reduces the size of edge function
arunanshub Jun 30, 2024
cdfa13b
fix(components): fix icon color
arunanshub Jun 30, 2024
af9f3d9
build(nuxt): enable `headNext` config
arunanshub Jun 30, 2024
d338123
build(nuxt): remove because it is enabled by default
arunanshub Jun 30, 2024
6201d20
build(nuxt): add nuxt-security module
arunanshub Jul 1, 2024
f5ddc88
style(nuxt.config): biome
arunanshub Jul 4, 2024
69f71b4
build(nuxt): add nuxt-seo and remove nuxt-secuity for now
arunanshub Jul 6, 2024
a790937
build: disable ogimage
arunanshub Jul 6, 2024
04f1c7e
build: enable ogimage and update deps
arunanshub Jul 6, 2024
f03e67e
build(nuxt): use dot as separator
arunanshub Jul 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
.nuxt
.nitro
.cache
.vercel
dist

# Node dependencies
Expand Down
5 changes: 0 additions & 5 deletions assets/css/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
arunanshub marked this conversation as resolved.
Show resolved Hide resolved
}
Expand Down
2 changes: 1 addition & 1 deletion biome.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
},
Expand Down
3 changes: 1 addition & 2 deletions components/AsideLink.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tip

Codebase Verification

Inconsistent usage of the Icon component.

The class attribute update for the Icon component in components/AsideLink.vue is not consistently applied across the codebase. Several instances still use the size attribute and different class attributes.

  • pages/index.vue: <Icon name="carbon:result" size="1.1rem" class="lg:opacity-60" />
  • pages/index/quiz/[section].vue: <Icon name="eos-icons:loading" size="4rem"></Icon>
  • components/IntroItem.vue: <Icon size="1.2rem" :name="iconName" class="opacity-80 flex-shrink-0" />
  • components/TheHeader.vue: <Icon name="logos:linux-tux" size="8rem" aria-label="Distrohop logo" />
  • components/ConflictingAnswersList.vue: <Icon name="material-symbols:warning-outline" size="0.8rem" class="text-red-600 mt-1" />
  • components/StarButton.vue: <Icon :name="isImportant ? 'ph:star-fill' : 'ph:star'" class="text-[#ff7a00]" size="1.3rem" />

Please update these instances to ensure consistent usage of the class attribute and remove the size attribute.

Analysis chain

Verify the usage of the Icon component.

The class attribute update for the Icon component enhances styling flexibility. Ensure that the usage is consistent across the codebase and doesn't break any existing functionality.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the usage of the `Icon` component to ensure consistency.

# Test: Search for the `Icon` component usage. Expect: Consistent usage of the updated `class` attribute.
rg --type vue $'<Icon'

Length of output: 51

Script:

#!/bin/bash
# Description: Verify the usage of the `Icon` component to ensure consistency.

# Test: Search for the `Icon` component usage in .vue files. Expect: Consistent usage of the updated `class` attribute.
rg --glob '*.vue' '<Icon'

Length of output: 402

Script:

#!/bin/bash
# Description: Verify the usage of the `Icon` component to ensure consistency.

# Extract and display the lines containing the `Icon` component along with a few lines of context.
rg --glob '*.vue' '<Icon' -C 3

Length of output: 2799

:class="{ 'opacity-95': isExactActive }"
/>
<div class="hidden lg:block">
Expand Down
2 changes: 1 addition & 1 deletion components/ConflictingAnswersList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 8 additions & 2 deletions components/IntroItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -18,7 +17,14 @@ defineProps({
},
iconColor: {
type: String,
required: false,
default: 'black',
},
})
</script>

<style scoped>
.icon {
color: v-bind(iconColor);
}
arunanshub marked this conversation as resolved.
Show resolved Hide resolved
</style>
4 changes: 2 additions & 2 deletions components/StarButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
3 changes: 2 additions & 1 deletion components/TheHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion error.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
arunanshub marked this conversation as resolved.
Show resolved Hide resolved
<TheHeader />
<div class="mt-[15vh] flex grow flex-col items-center gap-4 text-center">
<h1 class="text-6xl font-semibold">{{ error.statusCode }}</h1>
Expand Down
2 changes: 1 addition & 1 deletion layouts/default.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
113 changes: 23 additions & 90 deletions nuxt.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,111 +1,44 @@
import browserslistToEsbuild from 'browserslist-to-esbuild'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true },
arunanshub marked this conversation as resolved.
Show resolved Hide resolved
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider configuring devtools based on environment.

Enabling devtools in production may expose sensitive information. Consider enabling it conditionally based on the environment.

devtools: { enabled: process.env.NODE_ENV !== 'production' },

modules: [
'@nuxtjs/tailwindcss',
'@nuxt/fonts',
'@nuxt/icon',
'@nuxt/content',
'@nuxt/image',
'@nuxtjs/seo',
],

app: {
head: {
titleTemplate: '%s · Distrohop',
// manually add lang until we use nuxt-i18n
htmlAttrs: { lang: 'en' },
},
},
experimental: {
asyncContext: true,
headNext: true,
componentIslands: 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',
],

// Module Options
content: {
highlight: { theme: 'github-light' },
},
delayHydration: {
debug: process.env.NODE_ENV === 'development',
mode: 'mount',
exclude: ['/quiz/**'],
fonts: {
families: [{ name: 'Artifika' }, { name: 'Archivo' }],
},

// CSS and fonts
postcss: {
plugins: {
'postcss-preset-env': true,
cssnano: {
preset: [
'default',
{
discardComments: { removeAll: true },
},
],
},
},
},
// 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,
},
icon: {
class: 'icon',
},

// Build
nitro: {
compressPublicAssets: { brotli: true, gzip: true },
minify: true,
future: { nativeSWR: true },
},
vite: {
esbuild: {
legalComments: 'none',
target: browserslistToEsbuild(),
},
},
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,
},
},
arunanshub marked this conversation as resolved.
Show resolved Hide resolved

// Development
devtools: { enabled: true },
typescript: {
strict: true,
tsConfig: {
compilerOptions: {
types: ['@types/node'],
},
},
},
})
57 changes: 19 additions & 38 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.0",
"@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.2",
"tailwindcss": "^3.4.4",
"type-fest": "^4.20.1",
"valibot": "^0.35.0",
"vue": "latest"
},
"packageManager": "[email protected]"
"packageManager": "[email protected]+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a",
"devDependencies": {
"@types/lodash-es": "^4.17.12"
}
}
Loading