new stuff yay

2024-08-26 23:24:28 -04:00 · 2024-08-26 23:24:28 -04:00 · 48d073a1de
parent 392e9dec12
commit 48d073a1de
10 changed files with 118 additions and 79 deletions
--- a/app.vue
+++ b/app.vue
@ -5,22 +5,11 @@
    @change='updateFont'
  >
    <option
-      value=''
-      disabled
+      v-for='(value, key) in fonts'
+      :key='key'
+      :value='key'
    >
-      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
+      {{ value.name }}
    </option>
  </select>
  <select
@ -29,22 +18,11 @@
    @change='updateTheme'
  >
    <option
-      value=''
-      disabled
+      v-for='(value, key) in themes'
+      :key='key'
+      :value='key'
    >
-      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
+      {{ value.name }}
    </option>
  </select>
  <NuxtRouteAnnouncer />
@ -52,6 +30,9 @@
 </template>

 <script setup>
+import { themes } from '~/types/themes'
+import { fonts } from '~/types/fonts'
+
 const { theme, setTheme } = useTheme()
 const selectedTheme = ref('')

--- a/bun.lockb
+++ b/bun.lockb
--- a/composables/useFont.ts
+++ b/composables/useFont.ts
@ -1,19 +1,24 @@
 import { ref, onMounted } from 'vue'
+import { fonts } from '~/types/fonts'
+
+const fontNames = Object.keys(fonts)

 export const useFont = () => {
-  const font = ref('JetBrains Mono')
+  const font = ref('jetbrains-mono')

  onMounted(() => {
    const storedFont = localStorage.getItem('font')
    if (storedFont) {
      font.value = storedFont
-      document.body.style.fontFamily = storedFont
+      document.body.classList.remove(...fontNames)
+      document.body.classList.add(storedFont)
    }
  })

  const setFont = (newFont: string) => {
    font.value = newFont
-    document.body.style.fontFamily = newFont
+    document.body.classList.remove(...fontNames)
+    document.body.classList.add(newFont)
    localStorage.setItem('font', newFont)
  }

--- a/composables/useTheme.ts
+++ b/composables/useTheme.ts
@ -1,6 +1,7 @@
 import { ref, onMounted } from 'vue'
+import { themes } from '~/types/themes'

-const themes = ['catppuccin-latte', 'catppuccin-frappe', 'catppuccin-macchiato', 'catppuccin-mocha']
+const themeNames = Object.keys(themes)

 export const useTheme = () => {
  const theme = ref('catppuccin-mocha')
@ -9,14 +10,14 @@ export const useTheme = () => {
    const storedTheme = localStorage.getItem('theme')
    if (storedTheme) {
      theme.value = storedTheme
-      document.body.classList.remove(...themes)
+      document.body.classList.remove(...themeNames)
      document.body.classList.add(storedTheme)
    }
  })

  const setTheme = (newTheme: string) => {
    theme.value = newTheme
-    document.body.classList.remove(...themes)
+    document.body.classList.remove(...themeNames)
    document.body.classList.add(newTheme)
    localStorage.setItem('theme', newTheme)
  }
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@ -1,3 +1,5 @@
+import { fonts } from './types/fonts'
+
 export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
@ -11,10 +13,21 @@ export default defineNuxtConfig({
  },
  app: {
    head: {
+      style: [
+        {
+          children: Object.entries(fonts)
+            .map(([className, fontFamily]) => /* css */ `.${className} { font-family: '${fontFamily.name}', monospace; }`)
+            .join('\n'),
+        },
+      ],
      link: [
+        {
+          rel: 'preconnect',
+          href: 'https://fonts.bunny.net',
+        },
        {
          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',
+          href: `https://fonts.bunny.net/css?family=${Object.values(fonts).map(({ link }) => link).join('|')}`,
        },
      ],
      script: [
@ -35,7 +48,7 @@ export default defineNuxtConfig({
            const font = localStorage.getItem('font')

            if (font)
-              document.body.style.fontFamily = font
+              document.body.classList.add(font)
          `,
          tagPosition: 'bodyClose',
        },
--- a/package.json
+++ b/package.json
@ -10,10 +10,11 @@
    "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/fira-code": "^5.0.19",
+    "@fontsource/jetbrains-mono": "^5.0.21",
+    "@fontsource/source-code-pro": "^5.0.19",
    "@fontsource/ubuntu-mono": "^5.0.21",
+    "@nuxtjs/google-fonts": "^3.2.0",
    "nuxt": "^3.13.0",
    "unocss-preset-theme": "^0.13.0",
    "vue": "^3.4.38"
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,4 +1,4 @@
 {
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json"
-}
+}
--- a/types/fonts.ts
+++ b/types/fonts.ts
@ -0,0 +1,18 @@
+export const fonts = {
+  'jetbrains-mono': {
+    name: 'JetBrains Mono',
+    link: 'jetbrains-mono:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i',
+  },
+  'fira-code': {
+    name: 'Fira Code',
+    link: 'fira-code:300,400,500,600,700',
+  },
+  'source-code-pro': {
+    name: 'Source Code Pro',
+    link: 'source-code-pro:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i',
+  },
+  'ubuntu-mono': {
+    name: 'Ubuntu Mono',
+    link: 'ubuntu-mono:400,400i,700,700i',
+  },
+}
--- a/types/themes.ts
+++ b/types/themes.ts
@ -0,0 +1,54 @@
+export const themes = {
+  'tokyonight-day': {
+    name: 'Tokyo Night (Day)',
+    colors: {
+      text: '#3760bf',
+      subtext: '#5c5f77',
+      bg: '#eff1f5',
+    },
+  },
+  'tokyonight-night': {
+    name: 'Tokyo Night (Night)',
+    colors: {
+      text: '#c0caf5',
+      subtext: '#a9b1d6',
+      bg: '#1a1b26',
+    },
+  },
+  'catppuccin-latte': {
+    name: 'Catppuccin (Latte)',
+    colors: {
+      text: '#4c4f69',
+      subtext: '#5c5f77',
+      bg: '#eff1f5',
+    },
+  },
+  'catppuccin-frappe': {
+    name: 'Catppuccin (Frappe)',
+    colors: {
+      text: '#c6d0f5',
+      subtext: '#b5bfe2',
+      bg: '#303446',
+    },
+  },
+  'catppuccin-macchiato': {
+    name: 'Catppuccin (Macchiato)',
+    colors: {
+      text: '#cad3f5',
+      subtext: '#b8c0e0',
+      bg: '#24273a',
+    },
+  },
+  'catppuccin-mocha': {
+    name: 'Catppuccin (Mocha)',
+    colors: {
+      text: '#cdd6f4',
+      subtext: '#bac2de',
+      bg: '#1e1e2e',
+    },
+  },
+}
+
+export const themesWithoutName = Object.fromEntries(
+  Object.entries(themes).map(([key, { name, ...rest }]) => [key, rest]),
+)
--- a/uno.config.ts
+++ b/uno.config.ts
@ -10,51 +10,17 @@ import {
 } from 'unocss'
 import type { Theme } from 'unocss/preset-uno'
 import presetTheme from 'unocss-preset-theme'
+import { themesWithoutName } from '~/types/themes'

 export default defineConfig<Theme>({
-  theme: {
-    colors: {
-      text: '#4c4f69',
-      subtext: '#5c5f77',
-      bg: '#eff1f5',
-    },
-  },
+  theme: themesWithoutName['catppuccin-mocha'],
  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',
-          },
-        },
-      },
+      theme: themesWithoutName,
    }) as PresetFactory<Theme>,
  ],
  transformers: [transformerDirectives(), transformerVariantGroup(), transformerCompileClass()],