initial commit

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,81 @@
+<template>
+  <select
+    v-model='selectedFont'
+    :disabled='loading'
+    @change='updateFont'
+  >
+    <option
+      value=''
+      disabled
+    >
+      Select a font...
+    </option>
+    <option value='JetBrains Mono'>
+      JetBrains Mono
+    </option>
+    <option value='Source Code Pro'>
+      Source Code Pro
+    </option>
+    <option value='Fira Code'>
+      Fira Code
+    </option>
+    <option value='Ubuntu Mono'>
+      Ubuntu Mono
+    </option>
+  </select>
+  <select
+    v-model='selectedTheme'
+    :disabled='loading'
+    @change='updateTheme'
+  >
+    <option
+      value=''
+      disabled
+    >
+      Select a theme...
+    </option>
+    <option value='catppuccin-latte'>
+      Catppuccin Latte
+    </option>
+    <option value='catppuccin-frappe'>
+      Catppuccin Frappe
+    </option>
+    <option value='catppuccin-macchiato'>
+      Catppuccin Macchiato
+    </option>
+    <option value='catppuccin-mocha'>
+      Catppuccin Mocha
+    </option>
+  </select>
+  <NuxtRouteAnnouncer />
+  <NuxtPage />
+</template>
+
+<script setup>
+const { theme, setTheme } = useTheme()
+const selectedTheme = ref('')
+
+const { font, setFont } = useFont()
+const selectedFont = ref('')
+const loading = ref(true)
+
+onMounted(() => {
+  selectedTheme.value = theme.value
+  selectedFont.value = font.value
+  loading.value = false
+})
+
+const updateTheme = () => {
+  setTheme(selectedTheme.value)
+}
+
+const updateFont = () => {
+  setFont(selectedFont.value)
+}
+
+useHead({
+  bodyAttrs: {
+    class: 'bg-bg',
+  },
+})
+</script>

composables/useFont.ts

@@ -0,0 +1,24 @@
+import { ref, onMounted } from 'vue'
+
+export const useFont = () => {
+  const font = ref('JetBrains Mono')
+
+  onMounted(() => {
+    const storedFont = localStorage.getItem('font')
+    if (storedFont) {
+      font.value = storedFont
+      document.body.style.fontFamily = storedFont
+    }
+  })
+
+  const setFont = (newFont: string) => {
+    font.value = newFont
+    document.body.style.fontFamily = newFont
+    localStorage.setItem('font', newFont)
+  }
+
+  return {
+    font,
+    setFont,
+  }
+}

composables/useTheme.ts

@@ -0,0 +1,28 @@
+import { ref, onMounted } from 'vue'
+
+const themes = ['catppuccin-latte', 'catppuccin-frappe', 'catppuccin-macchiato', 'catppuccin-mocha']
+
+export const useTheme = () => {
+  const theme = ref('catppuccin-mocha')
+
+  onMounted(() => {
+    const storedTheme = localStorage.getItem('theme')
+    if (storedTheme) {
+      theme.value = storedTheme
+      document.body.classList.remove(...themes)
+      document.body.classList.add(storedTheme)
+    }
+  })
+
+  const setTheme = (newTheme: string) => {
+    theme.value = newTheme
+    document.body.classList.remove(...themes)
+    document.body.classList.add(newTheme)
+    localStorage.setItem('theme', newTheme)
+  }
+
+  return {
+    theme,
+    setTheme,
+  }
+}

eslint.config.mjs

@@ -0,0 +1,10 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+).override('nuxt/stylistic', {
+  rules: {
+    'vue/html-quotes': ['error', 'single'],
+  },
+})

nuxt.config.ts

@@ -0,0 +1,45 @@
+export default defineNuxtConfig({
+  compatibilityDate: '2024-04-03',
+  devtools: { enabled: true },
+  modules: ['@unocss/nuxt', '@vueuse/nuxt', '@nuxt/eslint'],
+  eslint: {
+    config: {
+      stylistic: {
+        quoteProps: 'as-needed',
+      },
+    },
+  },
+  app: {
+    head: {
+      link: [
+        {
+          rel: 'stylesheet',
+          href: 'https://fonts.bunny.net/css?family=fira-code:300,400,500,600,700|jetbrains-mono:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i|source-code-pro:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|ubuntu-mono:400,400i,700,700i',
+        },
+      ],
+      script: [
+        {
+          type: 'text/javascript',
+          innerHTML: /* js */ `
+            const theme = localStorage.getItem('theme')
+
+            if (theme === 'system' || !theme)
+              document.body.classList.add(
+                window.matchMedia('(prefers-color-scheme: dark)').matches
+                  ? 'dark'
+                  : 'light'
+              )
+            else
+              document.body.classList.add(theme)
+
+            const font = localStorage.getItem('font')
+
+            if (font)
+              document.body.style.fontFamily = font
+          `,
+          tagPosition: 'bodyClose',
+        },
+      ],
+    },
+  },
+})

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@fontsource-variable/fira-code": "^5.0.19",
+    "@fontsource-variable/jetbrains-mono": "^5.0.22",
+    "@fontsource-variable/source-code-pro": "^5.0.20",
+    "@fontsource/ubuntu-mono": "^5.0.21",
+    "nuxt": "^3.13.0",
+    "unocss-preset-theme": "^0.13.0",
+    "vue": "^3.4.38"
+  },
+  "devDependencies": {
+    "@nuxt/eslint": "^0.5.2",
+    "@unocss/nuxt": "^0.62.3",
+    "@vueuse/nuxt": "^11.0.3"
+  }
+}

pages/about.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const route = useRoute()
+</script>
+
+<template>
+  <div>
+    <h1>
+      Nuxt Routing set up successfully!
+    </h1>
+    <p>Current route: {{ route.path }}</p>
+    <a
+      href='https://nuxt.com/docs/getting-started/routing'
+      target='_blank'
+    >Learn more about Nuxt Routing</a>
+  </div>
+</template>

pages/index.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const route = useRoute()
+</script>
+
+<template>
+  <div>
+    <h1 c-text>
+      Nuxt Routing set up successfully!
+    </h1>
+    <p c-subtext>
+      Current route: {{ route.path }}
+    </p>
+  </div>
+</template>

public/robots.txt

@@ -0,0 +1 @@
+

server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

shims.d.ts

@@ -0,0 +1,6 @@
+import type { AttributifyAttributes } from '@unocss/preset-attributify'
+
+declare module '@vue/runtime-dom' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  interface HTMLAttributes extends AttributifyAttributes { }
+}

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

uno.config.ts

@@ -0,0 +1,61 @@
+import { defineConfig, type PresetFactory } from 'unocss'
+import {
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  transformerCompileClass,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+import type { Theme } from 'unocss/preset-uno'
+import presetTheme from 'unocss-preset-theme'
+
+export default defineConfig<Theme>({
+  theme: {
+    colors: {
+      text: '#4c4f69',
+      subtext: '#5c5f77',
+      bg: '#eff1f5',
+    },
+  },
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetTypography(),
+    presetIcons(),
+    presetTheme<Theme>({
+      theme: {
+        'catppuccin-latte': {
+          colors: {
+            text: '#4c4f69',
+            subtext: '#5c5f77',
+            bg: '#eff1f5',
+          },
+        },
+        'catppuccin-frappe': {
+          colors: {
+            text: '#c6d0f5',
+            subtext: '#b5bfe2',
+            bg: '#303446',
+          },
+        },
+        'catppuccin-macchiato': {
+          colors: {
+            text: '#cad3f5',
+            subtext: '#b8c0e0',
+            bg: '#24273a',
+          },
+        },
+        'catppuccin-mocha': {
+          colors: {
+            text: '#cdd6f4',
+            subtext: '#bac2de',
+            bg: '#1e1e2e',
+          },
+        },
+      },
+    }) as PresetFactory<Theme>,
+  ],
+  transformers: [transformerDirectives(), transformerVariantGroup(), transformerCompileClass()],
+})