Feature - Dark Mode Generator tool

eslint.config.ts

@@ -20,6 +20,7 @@ export default defineConfig([
       },
     },
   },
+
   {
     files: ['scripts/**'],
     languageOptions: {
@@ -28,4 +29,11 @@ export default defineConfig([
       },
     },
   },
+
+  {
+    rules: {
+      curly: ['error', 'all'],
+      eqeqeq: ['error', 'always'],
+    },
+  },
 ])

package.json

@@ -15,23 +15,23 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.9",
-    "@astrojs/cloudflare": "^13.6.0",
+    "@astrojs/cloudflare": "^13.6.1",
     "@astrojs/mdx": "5.0.4",
     "@astrojs/rss": "^4.0.18",
     "@astrojs/sitemap": "3.7.2",
     "@lucide/astro": "^1.17.0",
     "astro": "6.3.1",
-    "wrangler": "^4.95.0"
+    "wrangler": "^4.98.0"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.60.0",
     "@tailwindcss/cli": "^4.3.0",
     "@tailwindcss/forms": "^0.5.11",
-    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "^4.3.0",
-    "@types/node": "^25.9.1",
-    "eslint": "^10.4.0",
+    "@types/node": "^25.9.2",
+    "eslint": "^10.4.1",
     "eslint-plugin-astro": "^1.7.0",
     "globals": "^17.6.0",
     "prettier": "^3.8.3",
@@ -40,7 +40,7 @@
     "rehype-external-links": "^3.0.0",
     "tailwindcss": "^4.3.0",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.60.0"
+    "typescript-eslint": "^8.61.0"
   },
   "overrides": {
     "vite": "^7"

scripts/generate-dark-variants.js

@@ -5,137 +5,15 @@ import { fileURLToPath } from 'url'
 import fs from 'fs'
 import path from 'path'
 
-const SHADE_MAP = {
-  50: 800,
-  100: 800,
-  200: 700,
-  300: 600,
-  400: 500,
-  500: 400,
-  600: 300,
-  700: 200,
-  800: 100,
-  900: 50,
-}
-
-const COLOR_MAP = {
-  white: 'gray-900',
-  black: 'white',
-}
-
-const COLOR_FAMILIES = [
-  'red',
-  'orange',
-  'amber',
-  'yellow',
-  'lime',
-  'green',
-  'emerald',
-  'teal',
-  'cyan',
-  'sky',
-  'blue',
-  'indigo',
-  'violet',
-  'purple',
-  'fuchsia',
-  'pink',
-  'rose',
-  'slate',
-  'gray',
-  'zinc',
-  'neutral',
-  'stone',
-]
+import { DEFAULT_CONFIG } from '../src/lib/dark-mode/config.js'
+import { transformHtmlString } from '../src/lib/dark-mode/transform-html.js'
 
 function getProjectRoot() {
   const scriptFilePath = fileURLToPath(import.meta.url)
 
   return path.resolve(path.dirname(scriptFilePath), '..')
 }
 
-function splitVariantPrefix(className) {
-  const lastSeparatorIndex = className.lastIndexOf(':')
-
-  if (lastSeparatorIndex === -1) {
-    return {
-      variantPrefix: '',
-      classWithoutVariant: className,
-    }
-  }
-
-  return {
-    variantPrefix: className.slice(0, lastSeparatorIndex + 1),
-    classWithoutVariant: className.slice(lastSeparatorIndex + 1),
-  }
-}
-
-function transformClass(className) {
-  const { variantPrefix, classWithoutVariant } = splitVariantPrefix(className)
-
-  const gray900Match = classWithoutVariant.match(/^(.*?)(gray-900)(\/\d+)?$/)
-
-  if (gray900Match) {
-    const grayPrefix = gray900Match[1] ?? ''
-    const graySuffix = gray900Match[3] ?? ''
-
-    return `${className} dark:${variantPrefix}${grayPrefix}white${graySuffix}`
-  }
-
-  for (const [lightColor, darkColor] of Object.entries(COLOR_MAP)) {
-    if (classWithoutVariant.includes(lightColor)) {
-      const colorMatch = classWithoutVariant.match(/^((?:[\w]+-)*)(white|black)(\/\d+)?$/)
-
-      if (colorMatch) {
-        const colorPrefix = colorMatch[1] ?? ''
-        const colorSuffix = colorMatch[3] ?? ''
-        const darkClass = `${colorPrefix}${darkColor}${colorSuffix}`
-
-        return `${className} dark:${variantPrefix}${darkClass}`
-      }
-    }
-  }
-
-  for (const colorFamily of COLOR_FAMILIES) {
-    const colorRegex = new RegExp(`^([\\w-]*?)${colorFamily}-(\\d+)(.*?)$`)
-    const colorMatch = classWithoutVariant.match(colorRegex)
-
-    if (colorMatch) {
-      const colorPrefix = colorMatch[1] ?? ''
-      const colorShade = colorMatch[2] ?? '0'
-      const colorSuffix = colorMatch[3] ?? ''
-      const shadeNum = parseInt(colorShade, 10)
-
-      if (shadeNum in SHADE_MAP) {
-        const darkShade = SHADE_MAP[shadeNum]
-        const darkClass = `${colorPrefix}${colorFamily}-${darkShade}${colorSuffix}`
-
-        return `${className} dark:${variantPrefix}${darkClass}`
-      }
-    }
-  }
-
-  return className
-}
-
-function transformClassAttribute(classAttr) {
-  if (!classAttr) return classAttr
-
-  return classAttr
-    .split(/\s+/)
-    .filter(Boolean)
-    .map((className) => (className.includes('dark:') ? className : transformClass(className)))
-    .join(' ')
-}
-
-function transformHtmlContent(htmlContent) {
-  return htmlContent.replace(/class="([^"]*)"/g, (_, classAttr) => {
-    const transformedClass = transformClassAttribute(classAttr)
-
-    return `class="${transformedClass}"`
-  })
-}
-
 function isPathWithinBounds(targetPath, allowedParent) {
   const normalizedTarget = path.normalize(path.resolve(targetPath))
   const normalizedParent = path.normalize(path.resolve(allowedParent))
@@ -244,7 +122,7 @@ function processFolder() {
 
     try {
       const lightContent = fs.readFileSync(lightPath, 'utf-8')
-      const darkContent = transformHtmlContent(lightContent)
+      const darkContent = transformHtmlString(lightContent, DEFAULT_CONFIG)
 
       fs.writeFileSync(darkPath, darkContent, 'utf-8')
 

src/components/BaseHead.astro

@@ -5,7 +5,7 @@ import { Font } from 'astro:assets'
 
 import OgImage from '../assets/og.jpg'
 
-import { SITE_TITLE } from '../consts'
+import { SITE_TITLE } from '../constants/seo'
 
 import type { ImageMetadata } from 'astro'