3D to SVG

.fallowrc.jsonc

@@ -1,6 +1,13 @@
 {
   "$schema": "https://raw.githubusercontent.com/fallow-rs/fallow/main/schema.json",
-  "entry": ["src/site.{ts,tsx,js,jsx}"],
+  "entry": [
+    "src/site.{ts,tsx,js,jsx}",
+    // Tool client modules load via an Astro <script>, dynamic imports, and a Web
+    // Worker URL — boundaries Fallow can't trace.
+    "src/pages/tools/_3d-to-svg/geometry.ts",
+    "src/pages/tools/_3d-to-svg/emit.ts",
+    "src/pages/tools/_3d-to-svg/svg.worker.ts"
+  ],
   "audit": {
     "healthBaseline": ".fallow/health-baseline.json",
     "dupesBaseline": ".fallow/dupes-baseline.json"

AGENTS.md

@@ -95,7 +95,6 @@ Top-down: entry first, **Helpers.** last.
 - **JSDoc** on exports and non-trivial helpers when the contract is not obvious—often one crisp line is enough. Do not document module-private types (see **Exports**).
 - In prose, backtick **identifiers** (`siteUrl`), not section headers.
 - **Section blocks** (see **File layout**) label structure only — no extra explanation inside the marker.
-- **`@sideEffect` (house tag):** flag non-pure functions, even when prose is trimmed to the tag alone. Terse clause names the effect (e.g. "Mutates DOM.", "Async I/O."). On exports and closures, use a multi-line block: why line, then `@sideEffect`. Covers mutation, async I/O, non-determinism, and DOM/event registration. Not standard JSDoc/TSDoc. Pure functions get **no** tag.
 
 ## Naming
 

package.json

@@ -18,10 +18,16 @@
     "fallow:audit": "fallow audit",
     "deploy": "bun run build && wrangler deploy"
   },
+  "dependencies": {
+    "clipper-lib": "^6.4.2",
+    "three": "^0.185.0"
+  },
   "devDependencies": {
     "@astrojs/mdx": "^6.0.2",
     "@astrojs/rss": "^4.0.18",
     "@astrojs/sitemap": "^3.7.3",
+    "@types/clipper-lib": "^6.4.0",
+    "@types/three": "^0.185.0",
     "@vanilla-extract/css": "^1.20.1",
     "@vanilla-extract/vite-plugin": "^5.2.2",
     "astro": "^6.4.4",

src/components/BaseHead.astro

@@ -1,16 +1,23 @@
 ---
 import '../styles/code.css.ts';
 import '../styles/global.css.ts';
+import {siteTitle} from '../site';
 
 interface Props {
   title: string;
   description: string;
   image?: string;
+  imageAlt?: string;
+  keywords?: string;
+  jsonLd?: Record<string, unknown>;
 }
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
-const {title, description, image = '/blog/hello-world.jpg'} = Astro.props;
+const {title, description, image, imageAlt = siteTitle, keywords, jsonLd} = Astro.props;
+
+// No fallback image: a page that wants a social card passes a real one.
+const imageURL = image === undefined ? undefined : new URL(image, Astro.site);
 ---
 
 <meta charset="utf-8" />
@@ -30,15 +37,27 @@ const {title, description, image = '/blog/hello-world.jpg'} = Astro.props;
 <title>{title}</title>
 <meta name="title" content={title} />
 <meta name="description" content={description} />
+<meta name="author" content={siteTitle} />
+<meta name="robots" content="index, follow" />
+{keywords ? <meta name="keywords" content={keywords} /> : undefined}
 
 <meta property="og:type" content="website" />
+<meta property="og:site_name" content={siteTitle} />
 <meta property="og:url" content={Astro.url} />
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
-<meta property="og:image" content={new URL(image, Astro.url)} />
+{imageURL ? <meta property="og:image" content={imageURL} /> : undefined}
+{imageURL ? <meta property="og:image:alt" content={imageAlt} /> : undefined}
 
-<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:card" content={imageURL ? 'summary_large_image' : 'summary'} />
 <meta name="twitter:url" content={Astro.url} />
 <meta name="twitter:title" content={title} />
 <meta name="twitter:description" content={description} />
-<meta name="twitter:image" content={new URL(image, Astro.url)} />
+{imageURL ? <meta name="twitter:image" content={imageURL} /> : undefined}
+{imageURL ? <meta name="twitter:image:alt" content={imageAlt} /> : undefined}
+
+{
+  jsonLd ? (
+    <script type="application/ld+json" set:html={JSON.stringify(jsonLd)} is:inline />
+  ) : undefined
+}

src/components/BaseLayout.astro

@@ -2,26 +2,46 @@
 import BaseHead from './BaseHead.astro';
 import Breadcrumbs from './Breadcrumbs.astro';
 import Footer from './Footer.astro';
-import {MAIN_CONTENT_ID, main, skipLink} from '../styles/global.css';
+import {MAIN_CONTENT_ID, main, mainFullBleed, skipLink} from '../styles/global.css';
 
 interface Props {
   title: string;
   description: string;
   image?: string;
+  imageAlt?: string;
+  keywords?: string;
+  jsonLd?: Record<string, unknown>;
   hasBreadcrumbs?: boolean;
+  isFullBleed?: boolean;
 }
 
-const {title, description, image, hasBreadcrumbs = true} = Astro.props;
+const {
+  title,
+  description,
+  image,
+  imageAlt,
+  keywords,
+  jsonLd,
+  hasBreadcrumbs = true,
+  isFullBleed = false
+} = Astro.props;
 ---
 
 <!doctype html>
 <html lang="en">
   <head>
-    <BaseHead title={title} description={description} image={image} />
+    <BaseHead
+      title={title}
+      description={description}
+      image={image}
+      imageAlt={imageAlt}
+      keywords={keywords}
+      jsonLd={jsonLd}
+    />
   </head>
   <body>
     <a class={skipLink} href={`#${MAIN_CONTENT_ID}`}>Skip to content</a>
-    <main class={main} id={MAIN_CONTENT_ID} tabindex="-1">
+    <main class={isFullBleed ? mainFullBleed : main} id={MAIN_CONTENT_ID} tabindex="-1">
       {hasBreadcrumbs ? <Breadcrumbs /> : undefined}
       <slot />
     </main>

src/data/projects.ts

@@ -41,6 +41,19 @@ export const workspaceTools: readonly Project[] = [
   }
 ];
 
+export const tools: readonly Project[] = [
+  {
+    name: '3D to SVG',
+    href: '/tools/3d-to-svg/',
+    details: [
+      {
+        kind: 'text',
+        value: 'A web-based tool that turns a 3D model into an SVG icon.'
+      }
+    ]
+  }
+];
+
 export const activeProjects: readonly Project[] = [
   {
     name: 'MilkTea',

src/pages/blog/[...slug].astro

@@ -24,7 +24,12 @@ const {post} = Astro.props;
 const {Content} = await render(post);
 ---
 
-<BaseLayout title={formatTitle(post.data.title)} description={post.data.description}>
+<BaseLayout
+  title={formatTitle(post.data.title)}
+  description={post.data.description}
+  image={post.data.heroImage}
+  imageAlt={post.data.title}
+>
   <article>
     <Prose>
       {post.data.heroImage ? (

src/pages/index.astro

@@ -4,7 +4,7 @@ import {getCollection} from 'astro:content';
 import BaseLayout from '../components/BaseLayout.astro';
 import ProjectList from '../components/ProjectList.astro';
 import Prose from '../components/Prose.astro';
-import {activeProjects, olderProjects, workspaceTools} from '../data/projects';
+import {activeProjects, olderProjects, tools, workspaceTools} from '../data/projects';
 import {inlineImage, siteTitle as siteTitleStyle} from '../styles/prose.css';
 import {sectionLead} from '../styles/projects.css';
 import {siteDescription, siteTitle} from '../site';
@@ -35,6 +35,12 @@ const latestPost = posts[0];
       ) : undefined
     }
 
+    <h2>Tools</h2>
+
+    <p class={sectionLead}>A collection of web-based tools I've made.</p>
+
+    <ProjectList projects={tools} />
+
     <h2>Workspace</h2>
 
     <p class={sectionLead}>Config and apps I use to keep my machine and tasks in order.</p>