wip

wevm · Oct 22, 2023 · 4070e64 · 4070e64
1 parent 8989ece
commit 4070e64
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 17 deletions.
diff --git a/src/app/main.tsx b/src/app/main.tsx
diff --git a/src/app/root.tsx b/src/app/root.tsx
@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react'
+import { useApplyCssTransition } from './hooks/useApplyCssTransition.js'
+
+export function Root({ children }: { children: ReactNode }) {
+  useApplyCssTransition()
+  return <div className="vocs">{children}</div>
+}
diff --git a/src/app/routes.tsx b/src/app/routes.tsx
@@ -6,7 +6,7 @@ import { routes as routes_virtual } from 'virtual:routes'
 import { A } from './components/A.js'
 import { CodeGroup } from './components/CodeGroup.js'
 import { FrontmatterHead } from './components/FrontmatterHead.js'
-import { Main } from './main.js'
+import { Root } from './root.js'
 
 const components: MDXComponents = {
   a: A,
@@ -26,11 +26,13 @@ export const routes = routes_virtual.map((route_virtual) => ({
         <>
           {head && <Helmet>{head}</Helmet>}
           {frontmatter && <FrontmatterHead frontmatter={frontmatter} />}
-          <Main>
-            <route.default components={components} />
-          </Main>
+          <Root>
+            <article>
+              <route.default components={components} />
+            </article>
+          </Root>
         </>
       ),
     } satisfies RouteObject
   },
-}))
+})) satisfies RouteObject[]
diff --git a/src/app/utils/initialize-theme.ts b/src/app/utils/initialize-theme.ts
@@ -0,0 +1,13 @@
+const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+
+const storedTheme = localStorage.getItem('vocs.theme')
+const theme = storedTheme || 'dark'
+
+if (theme === 'dark') document.documentElement.classList.add('dark')
+
+if (!storedTheme)
+  // Update the theme if the user changes their OS preference
+  darkModeMediaQuery.addEventListener('change', ({ matches: isDark }) => {
+    if (isDark) document.documentElement.classList.add('dark')
+    else document.documentElement.classList.remove('dark')
+  })
diff --git a/src/build.ts b/src/build.ts
@@ -30,4 +30,19 @@ export async function build({ outDir = 'dist', ssr = false }: BuildParameters =
     },
     root: __dirname,
   })
+
+  // initialize theme script
+  await vite.build({
+    build: {
+      lib: {
+        formats: ['iife'],
+        name: 'theme',
+        entry: [resolve(__dirname, './app/utils/initialize-theme.ts')],
+      },
+      minify: true,
+      outDir: resolve(outDir, ssr ? 'client' : ''),
+      emptyOutDir: false,
+    },
+    configFile: undefined,
+  })
 }
diff --git a/src/index.html b/src/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/app/utils/initialize-theme.ts"></script>
     <link href="/styles/index.css" rel="stylesheet">
     <!--head-->
   </head>

diff --git a/src/prerender.ts b/src/prerender.ts
@@ -21,7 +21,10 @@ export async function prerender(args: PrerenderParameters = {}) {
   // Prerender each route.
   for (const route of routes) {
     const { head, body } = await mod.prerender(route)
-    const html = template.replace('<!--body-->', body).replace('<!--head-->', head)
+    const html = template
+      .replace('<!--body-->', body)
+      .replace('<!--head-->', head)
+      .replace('/app/utils/initialize-theme.ts', '/initialize-theme.iife.js')
     const filePath = `${route.endsWith('/') ? `${route}index` : route}.html`.replace(/^\//, '')
     const path = resolve(outDir_resolved, filePath)
     const pathDir = dirname(path)