Ship the demo as a static site deployed to GitHub Pages

TypeCraft has no real server dependency - projects live in localStorage
and fonts compile client-side - so the whole app now exports statically:

- Preset base designs are fetched directly from the Fontsource CDN on
  jsDelivr as static WOFF1 files (CORS-enabled), replacing the
  /api/font-proxy route, which is removed
- /editor/[projectId] and /preview/[shareId] become /editor?project=
  and /preview?share= so no dynamic segments remain
- next.config gains STATIC_EXPORT / NEXT_PUBLIC_BASE_PATH switches;
  the starter-font fetch and share links are basePath-aware
- A GitHub Actions workflow builds the export and deploys it to GitHub
  Pages on every push to main (enables Pages on first run)
- README gains the live demo link and updated architecture notes

Author: SBrophy-dev

.github/workflows/deploy-pages.yml

@@ -0,0 +1,56 @@
+name: Deploy demo to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - run: npm ci
+
+      - name: Configure GitHub Pages
+        id: pages
+        uses: actions/configure-pages@v5
+        with:
+          # Create the Pages site on first run so no manual setup is needed.
+          enablement: true
+
+      - name: Build static export
+        run: npm run build
+        env:
+          STATIC_EXPORT: "1"
+          # e.g. "/TypeCraft" for a project site — provided by configure-pages.
+          NEXT_PUBLIC_BASE_PATH: ${{ steps.pages.outputs.base_path }}
+
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: out
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -9,15 +9,19 @@ A real browser-based type foundry. TypeCraft loads any font as **editable Bézie
 
 Everything you see is the actual font: every preview is rendered with a real, freshly-compiled `FontFace`, not a CSS approximation.
 
+**▶ Try it now — live demo: https://sbrophy-dev.github.io/TypeCraft/**
+
+No account, no install. Projects live in your browser's localStorage; nothing leaves your machine.
+
 ## How it works
 
-1. **Start from real outlines.** Remix one of ~19 curated open-licensed designs (Inter, Playfair, Space Mono, Bebas Neue, Caveat…), upload your own TTF/OTF/WOFF, or open a blank canvas. Imported fonts are normalized to a 1000-UPM, Y-up outline model with consistent winding.
+1. **Start from real outlines.** Remix one of ~19 curated open-licensed designs (Inter, Playfair, Space Mono, Bebas Neue, Caveat…) fetched as static WOFFs from the Fontsource CDN, upload your own TTF/OTF/WOFF, or open a blank canvas. Imported fonts are normalized to a 1000-UPM, Y-up outline model with consistent winding.
 2. **Style with geometry, not tricks.** Each control performs a genuine operation on the vectors:
    - **Weight** offsets the outline along its normals (miter-limited, with self-intersection cleanup so heavy weights stay clean).
    - **Contrast** thins horizontal strokes relative to vertical stems.
    - **Width / x-Height / Slant** rescale, remap and shear the outlines.
    - **Rounding** replaces sharp corners with Bézier fillets; **Roughen** adds deterministic hand-drawn jitter; **Hollow** turns letters into outlined forms.
-3. **Redraw any glyph.** A full vector editor: drag anchors and handles, toggle smooth/corner points, insert and delete points, draw new contours with the pen tool, marquee-select, nudge with the keyboard, and drag the sidebearings — all over live metric guides with a ghost of the original and the styled result.
+3. **Redraw any glyph.** A full vector workstation: pen, rectangle and ellipse tools; smart snapping to points, metric guides and a unit grid; per-glyph undo/redo; flip / rotate / align operations; a contour clipboard that works across glyphs (turn a `d` into a `b`); numeric coordinates; and a trace-reference underlay for drawing over any other glyph or the bundled template — all over live metric guides with a ghost of the original and the styled result.
 4. **Export a real font.** Compile to OpenType in-browser and download **OTF + WOFF2 + a CSS `@font-face` kit + sample HTML**, zipped.
 
 ## Tech stack
@@ -47,17 +51,26 @@ npm run dev      # http://localhost:3000
 
 > **Tip:** don't run `npm run build` while `npm run dev` is live — they share the `.next` directory.
 
+## Demo deployment
+
+The app has no server dependencies (projects live in localStorage, fonts compile client-side, presets come from a CORS-enabled CDN), so it exports as a fully static site:
+
+```bash
+STATIC_EXPORT=1 npm run build   # writes ./out
+```
+
+Every push to `main` builds and deploys the demo to **GitHub Pages** via [.github/workflows/deploy-pages.yml](.github/workflows/deploy-pages.yml). `NEXT_PUBLIC_BASE_PATH` handles the `/TypeCraft` subdirectory automatically.
+
 ## Project structure
 
 ```
 src/
 ├── app/
 │   ├── page.tsx                  # Marketing home + live hero demo
 │   ├── dashboard/                # Project library + new-project flow
-│   ├── editor/[projectId]/       # The editor
-│   ├── preview/[shareId]/        # Read-only share view
-│   ├── billing/                  # Pricing page
-│   └── api/font-proxy/           # Server proxy that fetches preset fonts as WOFF
+│   ├── editor/                   # The editor (?project=<id>)
+│   ├── preview/                  # Read-only share view (?share=<id>)
+│   └── billing/                  # Pricing page
 ├── components/
 │   ├── editor/
 │   │   ├── TypeCraftEditor.tsx   # Editor shell: state, history, compile, views
@@ -74,6 +87,7 @@ src/
     ├── transforms.ts             # The StyleParams pipeline (applyStyle)
     ├── font-model.ts             # Parse a font binary → editable outlines
     ├── compile.ts                # Project → opentype.js Font + live FontFace
+    ├── accents.ts                # Auto-composed accented Latin (é ñ ü ç …)
     ├── use-compiled-font.ts      # React hook: debounced compile → CSS family
     ├── exporter.ts               # OTF / WOFF2 / CSS kit / sample HTML → ZIP
     ├── charset.ts                # Character coverage + glyph names

next.config.ts

@@ -1,7 +1,21 @@
 import type { NextConfig } from "next";
 
+/**
+ * TypeCraft runs entirely in the browser (projects live in localStorage and
+ * fonts compile client-side), so the whole app can ship as a static export.
+ *
+ * - STATIC_EXPORT=1        build a fully static site into ./out (used by the
+ *                          GitHub Pages deploy workflow; `next dev` unaffected).
+ * - NEXT_PUBLIC_BASE_PATH  subdirectory the site is served from, e.g.
+ *                          "/TypeCraft" on GitHub Pages project sites. Also
+ *                          read by client code that fetches public assets.
+ */
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
+
 const nextConfig: NextConfig = {
   reactStrictMode: true,
+  ...(process.env.STATIC_EXPORT ? { output: "export" as const, trailingSlash: true } : {}),
+  ...(basePath ? { basePath } : {}),
   experimental: {
     optimizePackageImports: ["lucide-react"]
   },

src/app/api/font-proxy/route.ts

@@ -88,7 +88,7 @@ export default function DashboardPage() {
               </p>
             </div>
             <div className="project-actions">
-              <Link className="button button-dark" href={`/editor/${project.id}`}>
+              <Link className="button button-dark" href={`/editor?project=${project.id}`}>
                 Open
               </Link>
               <button className="icon-button" type="button" aria-label="Duplicate" onClick={() => onDuplicate(project.id)}>

src/app/dashboard/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Suspense } from "react";
+import { useSearchParams } from "next/navigation";
+import TypeCraftEditor from "@/components/editor/TypeCraftEditor";
+
+/**
+ * The editor addresses projects via ?project=<id> (instead of a dynamic
+ * segment) so the whole app can be exported as a static site.
+ */
+function EditorRoute() {
+  const params = useSearchParams();
+  return <TypeCraftEditor projectId={params.get("project") ?? ""} />;
+}
+
+export default function EditorPage() {
+  return (
+    <Suspense fallback={null}>
+      <EditorRoute />
+    </Suspense>
+  );
+}

src/app/editor/[projectId]/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Suspense } from "react";
+import { useSearchParams } from "next/navigation";
+import SharedPreview from "@/components/editor/SharedPreview";
+
+/**
+ * Shared previews address shares via ?share=<id> (instead of a dynamic
+ * segment) so the whole app can be exported as a static site.
+ */
+function PreviewRoute() {
+  const params = useSearchParams();
+  return <SharedPreview shareId={params.get("share") ?? ""} />;
+}
+
+export default function PreviewPage() {
+  return (
+    <Suspense fallback={null}>
+      <PreviewRoute />
+    </Suspense>
+  );
+}

src/app/editor/page.tsx

@@ -17,7 +17,7 @@ export function NewProjectDialog({ onClose }: { onClose: () => void }) {
   const [blankName, setBlankName] = useState("My Typeface");
   const fileRef = useRef<HTMLInputElement>(null);
 
-  const open = (id: string) => router.push(`/editor/${id}`);
+  const open = (id: string) => router.push(`/editor?project=${id}`);
 
   async function pickPreset(preset: FontPreset) {
     setError(null);