create-shapio 0.2.0

package/templates/astro/src/pages/[locale]/[...slug].astro

@@ -0,0 +1,28 @@
+---
+import Base from '../../layouts/Base.astro';
+import { renderPage } from '../../lib/render.js';
+import { listPages } from '../../lib/shapio.js';
+import { HOME_SLUG, LOCALES, otherLocale, pagePath, type Locale } from '../../lib/site.js';
+import type { Page } from '../../lib/types.js';
+
+/** Every published page in every locale; `home` is the locale's front page (`/en/`, `/fr/`). */
+export const getStaticPaths = async () => {
+  const paths = [];
+  for (const locale of LOCALES) {
+    for (const page of await listPages(locale)) {
+      paths.push({
+        params: { locale, slug: page.slug === HOME_SLUG ? undefined : page.slug },
+        props: { page, locale },
+      });
+    }
+  }
+  return paths;
+};
+
+type Props = { page: Page; locale: Locale };
+const { page, locale } = Astro.props;
+---
+
+<Base title={page.title} description={page.description} locale={locale} alternatePath={pagePath(otherLocale(locale), page.slug)}>
+  <div lang={page.locale} set:html={renderPage(page)} />
+</Base>

package/templates/astro/src/pages/[locale]/articles/[slug].astro

@@ -0,0 +1,25 @@
+---
+import Base from '../../../layouts/Base.astro';
+import { renderArticle } from '../../../lib/render.js';
+import { listArticles } from '../../../lib/shapio.js';
+import { articlePath, LOCALES, otherLocale, stringsFor, type Locale } from '../../../lib/site.js';
+import type { Article } from '../../../lib/types.js';
+
+export const getStaticPaths = async () => {
+  const paths = [];
+  for (const locale of LOCALES) {
+    for (const article of await listArticles(locale)) {
+      paths.push({ params: { locale, slug: article.slug }, props: { locale, article } });
+    }
+  }
+  return paths;
+};
+
+type Props = { locale: Locale; article: Article };
+const { locale, article } = Astro.props;
+const context = { locale, strings: stringsFor(locale) };
+---
+
+<Base title={article.title} description={article.excerpt} locale={locale} alternatePath={articlePath(otherLocale(locale), article.slug)}>
+  <Fragment set:html={renderArticle(article, context)} />
+</Base>

package/templates/astro/src/pages/[locale]/articles/index.astro

@@ -0,0 +1,22 @@
+---
+import Base from '../../../layouts/Base.astro';
+import { renderArticleCard } from '../../../lib/render.js';
+import { listArticles } from '../../../lib/shapio.js';
+import { articlesPath, LOCALES, otherLocale, stringsFor, type Locale } from '../../../lib/site.js';
+import type { Article } from '../../../lib/types.js';
+
+export const getStaticPaths = async () =>
+  Promise.all(
+    LOCALES.map(async (locale) => ({ params: { locale }, props: { locale, articles: await listArticles(locale) } })),
+  );
+
+type Props = { locale: Locale; articles: Article[] };
+const { locale, articles } = Astro.props;
+const strings = stringsFor(locale);
+const context = { locale, strings };
+---
+
+<Base title={strings.articles} locale={locale} alternatePath={articlesPath(otherLocale(locale))}>
+  <h1 class="page-title">{strings.articles}</h1>
+  <ul class="cards" set:html={articles.map((article) => renderArticleCard(article, context)).join('')} />
+</Base>

package/templates/astro/src/pages/[locale]/colophon.astro

@@ -0,0 +1,19 @@
+---
+import Base from '../../layouts/Base.astro';
+import { getSiteSettings } from '../../lib/shapio.js';
+import { colophonPath, LOCALES, otherLocale, stringsFor, type Locale } from '../../lib/site.js';
+
+/** The singleton page: the siteSettings entry's colophon, one per locale. */
+export const getStaticPaths = () => LOCALES.map((locale) => ({ params: { locale }, props: { locale } }));
+
+type Props = { locale: Locale };
+const { locale } = Astro.props;
+const strings = stringsFor(locale);
+const settings = await getSiteSettings(locale);
+---
+
+<Base title={strings.colophon} locale={locale} alternatePath={colophonPath(otherLocale(locale))}>
+  <h1 class="page-title">{strings.colophon}</h1>
+  {settings?.tagline ? <p class="lead">{settings.tagline}</p> : null}
+  <div class="prose" set:html={settings?.colophon?.html ?? ''} />
+</Base>

package/templates/astro/src/pages/build.json.ts

@@ -0,0 +1,9 @@
+import { pinnedSnapshot } from '../lib/shapio.js';
+import { LOCALES } from '../lib/site.js';
+
+/** `/build.json`: which publication snapshot this build shows (for checks and deployment debugging). */
+export const GET = async () =>
+  new Response(
+    JSON.stringify({ snapshot: await pinnedSnapshot(), locales: LOCALES, builtAt: new Date().toISOString() }),
+    { headers: { 'content-type': 'application/json' } },
+  );

package/templates/astro/src/pages/index.astro

@@ -0,0 +1,18 @@
+---
+import { DEFAULT_LOCALE, HOME_SLUG, pagePath } from '../lib/site.js';
+
+const target = pagePath(DEFAULT_LOCALE, HOME_SLUG);
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Redirecting…</title>
+    <meta http-equiv="refresh" content={`0; url=${target}`} />
+    <link rel="canonical" href={target} />
+  </head>
+  <body>
+    <a href={target}>Continue to the site</a>
+  </body>
+</html>

package/templates/astro/src/pages/preview.astro

@@ -0,0 +1,21 @@
+---
+import '../styles/site.css';
+import { publicShapioUrl } from '../lib/config.js';
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex" />
+    <meta name="referrer" content="no-referrer" />
+    <title>Preview</title>
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+  </head>
+  <body data-shapio-url={publicShapioUrl()}>
+    <div class="preview-banner" id="preview-banner" role="status">Preview</div>
+    <main id="content" aria-live="polite"></main>
+    <script src="../scripts/preview.ts"></script>
+  </body>
+</html>

package/templates/astro/src/scripts/preview.ts

@@ -0,0 +1,47 @@
+import { initVisualEditing } from '@shapio/visual';
+import { loadPreview, parsePreviewUrl, type PreviewRequest } from '../lib/preview.js';
+import { stringsFor } from '../lib/site.js';
+
+/**
+ * The preview page's browser side: read the request, drop the token from the address bar, render the draft.
+ * Inside Shapio's preview pane (`?shapio-visual=1`), @shapio/visual turns on visual editing: a click on a
+ * field focuses it in Shapio, and each save there re-renders the draft here (with the token kept in memory,
+ * since the address bar no longer has it).
+ */
+const show = (element: HTMLElement | null, text: string) => {
+  if (element) {
+    element.textContent = text;
+  }
+};
+
+const render = async (shapioUrl: string, request: PreviewRequest, content: HTMLElement) => {
+  const strings = stringsFor(request.locale);
+  try {
+    const { html, title } = await loadPreview(shapioUrl, request);
+    document.title = `${title} · ${strings.siteName}`;
+    content.innerHTML = html;
+  } catch (error) {
+    show(content, `${strings.previewFailed}: ${error instanceof Error ? error.message : String(error)}`);
+  }
+};
+
+const run = async () => {
+  const content = document.getElementById('content');
+  const banner = document.getElementById('preview-banner');
+  const request = parsePreviewUrl(new URL(window.location.href));
+  // The token must not linger in the address bar, history or a shared screenshot.
+  window.history.replaceState(null, '', `${window.location.pathname}${window.location.search}`);
+  if (!request || !content) {
+    show(content, 'This preview link is incomplete.');
+    return;
+  }
+  const strings = stringsFor(request.locale);
+  const shapioUrl = document.body.dataset.shapioUrl ?? '';
+  document.documentElement.lang = request.locale;
+  show(banner, strings.previewBanner);
+  show(content, strings.previewLoading);
+  await render(shapioUrl, request, content);
+  initVisualEditing({ origin: shapioUrl, onRefresh: () => render(shapioUrl, request, content) });
+};
+
+void run();

package/templates/astro/src/styles/site.css

@@ -0,0 +1,199 @@
+/* The example site's whole stylesheet: system fonts, the Shapio palette, light and dark. */
+:root {
+  --ink: #0f172a;
+  --ivory: #faf9f6;
+  --cobalt: #2563eb;
+  --periwinkle: #a5b4fc;
+  --muted: #475569;
+  --surface: #ffffff;
+  --border: #e2e8f0;
+  color-scheme: light dark;
+  font-family:
+    system-ui,
+    -apple-system,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+  line-height: 1.6;
+  color: var(--ink);
+  background: var(--ivory);
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --ink: #e2e8f0;
+    --ivory: #0f172a;
+    --cobalt: #a5b4fc;
+    --muted: #94a3b8;
+    --surface: #1e293b;
+    --border: #334155;
+  }
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+}
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+a {
+  color: var(--cobalt);
+}
+.skip {
+  position: absolute;
+  left: -999px;
+}
+.skip:focus {
+  left: 1rem;
+  top: 1rem;
+  background: var(--surface);
+  padding: 0.5rem;
+}
+.site-header,
+.site-footer,
+main {
+  max-width: 64rem;
+  margin: 0 auto;
+  padding: 1rem;
+}
+.site-header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: center;
+  justify-content: space-between;
+}
+.site-header nav {
+  display: flex;
+  gap: 1rem;
+}
+.brand {
+  font-weight: 800;
+  text-decoration: none;
+  color: inherit;
+  font-size: 1.25rem;
+}
+.tagline {
+  flex: 1;
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.875rem;
+}
+.site-footer {
+  color: var(--muted);
+  font-size: 0.875rem;
+  border-top: 1px solid var(--border);
+}
+.button {
+  display: inline-block;
+  background: var(--cobalt);
+  color: var(--ivory);
+  padding: 0.75rem 1.25rem;
+  border-radius: 0.5rem;
+  text-decoration: none;
+  font-weight: 600;
+}
+.hero {
+  display: grid;
+  gap: 2rem;
+  align-items: center;
+  padding: 2rem 0;
+}
+@media (min-width: 64rem) {
+  .hero {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+.hero h1 {
+  font-size: clamp(2rem, 5vw, 3.25rem);
+  line-height: 1.1;
+  margin: 0 0 1rem;
+}
+.lead {
+  font-size: 1.25rem;
+  color: var(--muted);
+}
+.hero-image,
+.cover {
+  border-radius: 0.75rem;
+}
+.feature-grid,
+.gallery-grid,
+.cards {
+  list-style: none;
+  padding: 0;
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+}
+.feature-grid li,
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+}
+.gallery figure {
+  margin: 0;
+}
+.gallery img {
+  border-radius: 0.5rem;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+  width: 100%;
+}
+.cta {
+  text-align: center;
+  padding: 3rem 1rem;
+  background: var(--surface);
+  border-radius: 1rem;
+  margin: 2rem 0;
+}
+.article {
+  max-width: 48rem;
+  margin: 0 auto;
+}
+.byline {
+  color: var(--muted);
+}
+.prose table {
+  border-collapse: collapse;
+  width: 100%;
+}
+.prose th,
+.prose td {
+  border: 1px solid var(--border);
+  padding: 0.5rem;
+  text-align: left;
+}
+.prose img {
+  border-radius: 0.5rem;
+}
+.author {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  border-top: 1px solid var(--border);
+  margin-top: 2rem;
+  padding-top: 1rem;
+}
+.avatar {
+  width: 4rem;
+  height: 4rem;
+  border-radius: 50%;
+  object-fit: cover;
+}
+.author-name {
+  font-weight: 700;
+  margin: 0;
+}
+.preview-banner {
+  background: #fef3c7;
+  color: #78350f;
+  padding: 0.5rem 1rem;
+  text-align: center;
+  font-weight: 600;
+}

package/templates/astro/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "es2024",
+    "lib": ["es2024", "dom", "dom.iterable"],
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts", "scripts/**/*.ts"]
+}

package/templates/next/.env.example

@@ -0,0 +1,15 @@
+# Copy to .env, or let `npm run seed` write SHAPIO_URL and SHAPIO_DELIVERY_TOKEN for you.
+SHAPIO_URL=http://localhost:4300
+# A read-only delivery token (Shapio admin: Settings → API tokens, a delivery role).
+SHAPIO_DELIVERY_TOKEN=
+# Optional: build this publication snapshot instead of the latest one. The site then stays at it:
+# /api/revalidate does nothing.
+# SHAPIO_SNAPSHOT=42
+# The signing secret of the Shapio webhook that calls /api/revalidate (`npm run seed` writes it).
+SHAPIO_WEBHOOK_SECRET=
+# Optional: the site key on a multi-site Shapio (default: the token's site, else the primary site).
+# SHAPIO_SITE=marketing
+# Next.js collects anonymous telemetry unless this is set; the npm scripts set it too.
+NEXT_TELEMETRY_DISABLED=1
+# Optional: the Shapio URL the browser calls for draft previews, when it differs from SHAPIO_URL.
+# NEXT_PUBLIC_SHAPIO_URL=https://cms.example.com

package/templates/next/README.md

@@ -0,0 +1,69 @@
+# Shapio starter: Next.js
+
+A [Next.js](https://nextjs.org) (App Router) site built from [Shapio](https://github.com/mybrokengnome/shapio)
+content: pages made of sections, a journal of articles with an author, and the `siteSettings` singleton, in
+English and French. Every page is generated at build time from one pinned publication snapshot and served by
+`next start`, which refreshes only the pages a publish changed (on-demand revalidation, below).
+
+You need a running Shapio (>= 0.1) with an owner account.
+
+```sh
+npm install
+SHAPIO_URL=http://localhost:4300 SHAPIO_ADMIN_EMAIL=you@example.com SHAPIO_ADMIN_PASSWORD='…' npm run seed
+npm run build
+npm run start       # http://localhost:3000/ (redirects to /en/)
+npm run smoke       # in another shell: checks the served pages over HTTP
+npm run smoke -- --revalidate   # also checks /api/revalidate with a signed test event
+npm test            # unit tests (path mapping, signature check)
+```
+
+`npm run seed` applies the models in `shapio/` to Shapio live, creates the content and writes `SHAPIO_URL` and
+`SHAPIO_DELIVERY_TOKEN` to `.env`. `SHAPIO_SNAPSHOT` pins a build to an exact snapshot (by default
+`next.config.ts` pins the latest one when the build starts); `SHAPIO_SITE` picks the site on a multi-site
+instance. Next.js telemetry is off: `NEXT_TELEMETRY_DISABLED=1` in the npm scripts and `.env.example`.
+
+| File                         | Role                                                                |
+| ---------------------------- | ------------------------------------------------------------------- |
+| `next.config.ts`             | pins the snapshot; `/` redirects to `/en/`; `frame-ancestors`       |
+| `src/lib/shapio.ts`          | reads the delivery API with `@shapio/client` at the pinned snapshot |
+| `src/app/[locale]/…`         | the layout (site settings), pages, articles and the colophon        |
+| `src/components/…`           | sections, articles and responsive images                            |
+| `src/app/preview/`           | draft preview with visual editing (`@shapio/visual`)                |
+| `src/app/api/revalidate/`    | the webhook target: on-demand revalidation of changed pages         |
+| `src/lib/revalidation*.ts`   | the snapshot diff and which pages a change touches                  |
+| `shapio/`, `scripts/seed.ts` | the models and the seed                                             |
+
+Preview: the seed creates a deployment connection named **Preview** that opens drafts at
+`http://localhost:3000/preview/` (set `SITE_URL` when seeding for another address). Add that origin to Shapio's
+`CORS_ORIGINS`. In Shapio's preview pane, clicking the title, body or cover focuses that field and saves
+re-render the draft ([visual editing](https://github.com/mybrokengnome/shapio/blob/main/documentation/visual-editing.md)). `NEXT_PUBLIC_SHAPIO_URL` sets the Shapio URL the browser
+calls, when it differs from `SHAPIO_URL`.
+
+## Incremental rebuilds (on-demand revalidation)
+
+With `npm run start`, a publish refreshes only the pages it changed, without a rebuild:
+
+1. `npm run seed` creates a Shapio webhook named **Site revalidation** that sends `entry.published`,
+   `entry.unpublished`, `entry.deleted`, `change_set.shipped`, `schema.activated` and `schema.deleted` to
+   `http://localhost:3000/api/revalidate/` (`SITE_URL` + `/api/revalidate/`, with the trailing slash: the site
+   uses `trailingSlash`, and Shapio does not follow the redirect), and writes its signing secret to
+   `.env` as `SHAPIO_WEBHOOK_SECRET` (every run rotates it). Shapio never calls loopback or private addresses
+   on its own: for a local site, start Shapio with `OUTBOUND_PRIVATE_NETWORK_ALLOWLIST=127.0.0.1/32,::1/128`
+   (the seed turns on "Allow private network" for a `localhost` URL; without the allowlist Shapio refuses the
+   webhook, and the seed says so and goes on without it).
+2. The route checks the signature (`verifyWebhookSignature` from `@shapio/client`), then asks Shapio what
+   changed between the snapshot the site shows and the current one (`/api/snapshots/changes`), and calls
+   `revalidatePath` for those pages: an article's page and its locale's list, a page by its slug (`home` is
+   `/en/`), the list and every article page for an author, every page for the `siteSettings` singleton or a
+   schema change. A changed slug refreshes the old and the new address.
+3. The site moves to the new snapshot: revalidated pages re-render at it, and the snapshot is kept in
+   `.next/shapio-revalidate.json` so a restart carries on from it. `next build` empties `.next/`, so a new build
+   starts again from its own snapshot.
+
+Articles and pages published after the build render on their first request (`dynamicParams = true`); unknown
+slugs are a 404. A build pinned with `SHAPIO_SNAPSHOT` keeps showing that snapshot: the route answers with the
+reason and revalidates nothing. The snapshot is held per `next start` process, so run one process per copy of
+the site, each with its own webhook. In Shapio, Publishing → Webhooks shows every delivery and can send a test.
+
+Guide: [site starters](https://github.com/mybrokengnome/shapio/blob/main/documentation/starters.md). Inside the
+Shapio repository, run the scripts with `pnpm --filter example-next <script>` after `pnpm build`.

package/templates/next/gitignore

@@ -0,0 +1,5 @@
+node_modules/
+.next/
+next-env.d.ts
+*.tsbuildinfo
+.env

package/templates/next/next.config.ts

@@ -0,0 +1,69 @@
+import { createClient } from '@shapio/client';
+import type { NextConfig } from 'next';
+import { PHASE_PRODUCTION_BUILD } from 'next/constants.js';
+
+/**
+ * Pins one publication snapshot for the whole `next build`: Next renders pages in several worker processes, so
+ * the snapshot is read here, once, before any page renders, and handed to every worker as SHAPIO_SNAPSHOT
+ * (inlined into the build). A set SHAPIO_SNAPSHOT wins and pins the site for good; otherwise `next start` moves
+ * forward from this snapshot as Shapio's webhook calls /api/revalidate (src/lib/liveSnapshot.ts). `next dev` and
+ * `next start` do not read Shapio here.
+ */
+const pinSnapshot = async (): Promise<string> => {
+  if (process.env.SHAPIO_SNAPSHOT) {
+    return process.env.SHAPIO_SNAPSHOT;
+  }
+  const token = process.env.SHAPIO_DELIVERY_TOKEN;
+  if (!token) {
+    throw new Error('Set SHAPIO_DELIVERY_TOKEN to build the site; `npm run seed` writes one to .env');
+  }
+  const client = createClient({
+    baseUrl: process.env.SHAPIO_URL || 'http://localhost:4300',
+    token,
+    site: process.env.SHAPIO_SITE || undefined,
+  });
+  const { snapshot } = await client.snapshots.current();
+  return String(snapshot);
+};
+
+const originOf = (url: string) => {
+  try {
+    return new URL(url).origin;
+  } catch {
+    return undefined;
+  }
+};
+
+/**
+ * Only this site and Shapio may frame its pages (Shapio's preview pane shows /preview/ beside the document).
+ * The origin comes from NEXT_PUBLIC_SHAPIO_URL, else SHAPIO_URL.
+ */
+const frameAncestors = () => {
+  const shapio = originOf(
+    process.env.NEXT_PUBLIC_SHAPIO_URL || process.env.SHAPIO_URL || 'http://localhost:4300',
+  );
+  return `frame-ancestors 'self'${shapio ? ` ${shapio}` : ''}`;
+};
+
+const nextConfig = async (phase: string): Promise<NextConfig> => ({
+  trailingSlash: true,
+  headers: async () => [
+    { source: '/:path*', headers: [{ key: 'Content-Security-Policy', value: frameAncestors() }] },
+  ],
+  // The front page lives under its locale (`/en/`), as in the Astro and SvelteKit starters.
+  redirects: async () => [{ source: '/', destination: '/en/', permanent: false }],
+  env: {
+    // The preview page calls Shapio from the browser: NEXT_PUBLIC_SHAPIO_URL, else SHAPIO_URL.
+    NEXT_PUBLIC_SHAPIO_URL:
+      process.env.NEXT_PUBLIC_SHAPIO_URL || process.env.SHAPIO_URL || 'http://localhost:4300',
+    ...(phase === PHASE_PRODUCTION_BUILD
+      ? {
+          SHAPIO_SNAPSHOT: await pinSnapshot(),
+          // A snapshot set by hand stays the site's snapshot under `next start`: /api/revalidate does nothing.
+          SHAPIO_SNAPSHOT_PINNED: process.env.SHAPIO_SNAPSHOT ? 'true' : 'false',
+        }
+      : {}),
+  },
+});
+
+export default nextConfig;

package/templates/next/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "example-next",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Next.js (App Router) starter: pages and articles from Shapio, statically generated at one pinned snapshot, EN + FR.",
+  "type": "module",
+  "engines": {
+    "node": ">=24"
+  },
+  "scripts": {
+    "dev": "NEXT_TELEMETRY_DISABLED=1 next dev",
+    "build": "NEXT_TELEMETRY_DISABLED=1 next build",
+    "start": "NEXT_TELEMETRY_DISABLED=1 next start",
+    "seed": "node --env-file-if-exists=.env --import tsx scripts/seed.ts --site-url http://localhost:3000 --revalidate-path /api/revalidate/",
+    "smoke": "node --env-file-if-exists=.env --import tsx scripts/smokeHttp.ts --url http://localhost:3000",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@shapio/client": "^0.2.0",
+    "@shapio/visual": "^0.2.0",
+    "next": "16.3.8",
+    "react": "19.3.0",
+    "react-dom": "19.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "24.19.1",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "tsx": "4.23.15",
+    "typescript": "6.0.3",
+    "vitest": "5.0.3"
+  }
+}

package/templates/next/public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Shapio">
+  <title>Shapio</title>
+  <rect width="64" height="64" rx="14" fill="#2563EB"/>
+  <g transform="translate(32 32) scale(0.72) translate(-32 -32)">
+    <path fill="#FAF9F6" d="M43.39 8.16L51.31 12.73A8.25 8.25 0 0 1 55.43 19.88L55.43 21.08A4.72 4.72 0 0 1 48.36 25.17L33.51 16.59ZM20.61 55.84L12.69 51.27A8.25 8.25 0 0 1 8.57 44.12L8.57 42.92A4.72 4.72 0 0 1 15.64 38.83L30.49 47.41Z"/>
+    <path fill="#FAF9F6" d="M30.23 5.67A8.84 8.84 0 0 1 39.07 5.67L47.52 10.54L26.62 22.61A3.24 3.24 0 0 0 25 25.42L25 26.92A2.65 2.65 0 0 0 26.33 29.21L29.37 30.97A1.47 1.47 0 0 1 29.37 33.52L24.24 36.48A3.24 3.24 0 0 1 21 36.48L15.27 33.17A10.61 10.61 0 0 1 9.97 23.98L9.97 23.49A10.61 10.61 0 0 1 15.27 14.3ZM33.77 58.33A8.84 8.84 0 0 1 24.93 58.33L16.48 53.46L37.38 41.39A3.24 3.24 0 0 0 39 38.58L39 37.08A2.65 2.65 0 0 0 37.67 34.79L34.63 33.03A1.47 1.47 0 0 1 34.63 30.48L39.76 27.52A3.24 3.24 0 0 1 43 27.52L48.73 30.83A10.61 10.61 0 0 1 54.03 40.02L54.03 40.51A10.61 10.61 0 0 1 48.73 49.7Z"/>
+    <path fill="none" stroke="#2563EB" stroke-width="1.1" d="M35.28 17.61L47.52 10.54M28.72 46.39L16.48 53.46"/>
+  </g>
+</svg>