Add the Halftone Painter and Pattern Studio at /apps/

AGENTS.md

@@ -12,6 +12,7 @@ Josselin Perrus's personal site: an Astro 7 static site served by Cloudflare Wor
 - `src/content.config.ts`: the content collection, built from `articles/*.md` and `daily-logs/*.md` in the submodule.
 - `src/pages/index.astro`: the home. Its Writing list holds the articles, not the activity logs, and picking a topic on the map shows only the articles about it. An article's topics are its `topics` frontmatter field (`customer-success`, `product`, `ai-agents`: each one that makes up 30% or more of it).
 - `src/pages/articles/[slug].astro`: the page of every article and activity log. The Markdown goes through the plugins in `src/lib/` set in `astro.config.mjs`: the `# Title` line is dropped, the headings are renumbered from h2, and `rehype-article.mjs` shapes figures, YouTube embeds (moved to youtube-nocookie.com) and tables for `src/styles/prose.css`. In a table, a row whose cells are all bold is highlighted, and a paragraph starting with `Table:` right after it, past a blank line, is its caption. An image alone in its paragraph is captioned with its title, or with its alt text when that has a space.
+- `src/pages/apps/`: `/apps/`, which lists the apps, and each app's own full-screen page at `/apps/<slug>/`. An app is one Astro file with its markup, styles and script, on the bare `src/layouts/App.astro`. Apps are strictly front-end: they run in the visitor's browser and keep their work there, in `localStorage`. The navigation doesn't link to `/apps/` yet; each app's title does. The card images are in `src/assets/apps/`.
 - `src/data/projects.ts`: the projects, with their screenshots in `src/assets/projects/`, and which articles belong to each, by article id.
 - `docs/document-sharing.md`: how the encrypted portfolio links on `/documents/` work and how to create them.
 - `wrangler.jsonc`: the Cloudflare Worker `meaningfool`, which serves `dist/` as static assets.

src/layouts/App.astro

@@ -0,0 +1,51 @@
+---
+// The page around a full-screen app: the site's head, without its header, footer or background, because the app takes
+// the whole window. The app brings its own styles.
+import Favicons from '../components/Favicons.astro';
+import { SITE_SHARE } from '../lib/share';
+
+interface Props {
+	title: string;
+	description: string;
+}
+
+const { title, description } = Astro.props;
+const canonical = new URL(Astro.url.pathname, Astro.site).toString();
+const ogImage = new URL(SITE_SHARE.path, Astro.site).toString();
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+		<Favicons />
+
+		<title>{title}</title>
+		<meta name="description" content={description} />
+		<link rel="canonical" href={canonical} />
+
+		<!-- Open Graph -->
+		<meta property="og:title" content={title} />
+		<meta property="og:description" content={description} />
+		<meta property="og:type" content="website" />
+		<meta property="og:url" content={canonical} />
+		<meta property="og:site_name" content="meaningfool" />
+		<meta property="og:image" content={ogImage} />
+		<meta property="og:image:width" content="1200" />
+		<meta property="og:image:height" content="630" />
+		<meta property="og:image:alt" content={SITE_SHARE.alt} />
+
+		<!-- Twitter Cards -->
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta name="twitter:site" content="@nonils" />
+		<meta name="twitter:creator" content="@nonils" />
+		<meta name="twitter:title" content={title} />
+		<meta name="twitter:description" content={description} />
+		<meta name="twitter:image" content={ogImage} />
+		<meta name="twitter:image:alt" content={SITE_SHARE.alt} />
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>