Initial commit

2026-09-23 15:09:14 +02:00
commit e8a71dcb92
74 changed files with 2931 additions and 0 deletions
@@ -0,0 +1,69 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'node:path'
+
+const here = (...p) => resolve(import.meta.dirname, ...p)
+
+// Two build targets from one config:
+//
+//   vite build              → dist/       the deliverable: tlig.css + fonts,
+//                                         no HTML. This is what WordPress
+//                                         enqueues.
+//   vite build --mode demo  → demo-dist/  a static demo page that loads that
+//                                         stylesheet through a real <link>,
+//                                         with the site images beside it.
+//
+// The second exists because in dev Vite injects CSS through JavaScript, so
+// anything with a `transition` animates from its unstyled state on first paint.
+// That is a dev artifact, but it makes the demo misrepresent the stylesheet.
+// The static build paints once, the way a browser will on the real site.
+export default defineConfig(({ mode }) => {
+  const isDemo = mode === 'demo'
+
+  return {
+    root: 'src',
+
+    // Relative asset URLs — a url() in CSS resolves against the stylesheet's
+    // own location, so the output can be dropped at any path under wp-content
+    // without rebuilding.
+    base: './',
+
+    // `site/` mirrors the live asset tree, so the demo can reference
+    // /wp-content/includes/images/… exactly as a WordPress template does.
+    publicDir: here('site'),
+
+    css: {
+      devSourcemap: true,
+    },
+
+    build: {
+      outDir: isDemo ? here('demo-dist') : here('dist'),
+      emptyOutDir: true,
+
+      // The demo needs the wood and scroll images; the deliverable does not —
+      // WordPress already hosts them.
+      copyPublicDir: isDemo,
+
+      sourcemap: true,
+      cssCodeSplit: false,
+
+      rollupOptions: {
+        // The demo is built from the page; the deliverable from the entry
+        // module, so no demo markup or demo CSS can reach dist/.
+        input: isDemo ? here('src/index.html') : here('src/main.js'),
+
+        output: {
+          // Predictable names: WordPress enqueues these paths, so they must not
+          // change on every build. Fonts keep their own names for the same
+          // reason — a preload hint in the theme header has to stay valid.
+          entryFileNames: isDemo ? 'assets/[name]-[hash].js' : 'tlig.js',
+          assetFileNames: (info) => {
+            const name = info.names?.[0] ?? info.name ?? ''
+            if (name.endsWith('.css')) return 'tlig.css'
+            if (/\.(woff2?|ttf|eot|svg)$/.test(name)) return 'fonts/[name][extname]'
+            return 'assets/[name]-[hash][extname]'
+          },
+        },
+      },
+    },
+  }
+})