pattern-dump 0.1.0-alpha.3 → 0.2.0-alpha.0

package/templates/storefront/src/patterns/components/note/note.md

@@ -0,0 +1,11 @@
+---
+title: Note
+---
+
+A short aside. A page places one with values of its own:
+
+```md
+<pd-components-note tone="tip" heading="Try breaking it">
+Text, in **markdown**.
+</pd-components-note>
+```

package/templates/storefront/src/patterns/components/note/note.schema.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "title": "Note",
+  "description": "A short aside. On a page: <pd-components-note heading=\"…\">text</pd-components-note>.",
+  "type": "object",
+  "required": ["heading", "text"],
+  "x-pd-content": "text",
+  "properties": {
+    "heading": { "type": "string", "description": "One line, in bold" },
+    "text": { "type": "string", "contentMediaType": "text/markdown", "description": "The note itself: the tag's content, as markdown" },
+    "tone": { "type": "string", "enum": ["tip", "warning"], "description": "Its colour; a plain note without one" }
+  }
+}

package/templates/storefront/src/patterns/components/note/note~warning.json

@@ -0,0 +1,4 @@
+{
+  "heading": "Careful",
+  "tone": "warning"
+}

package/templates/storefront/src/patterns/layouts/page/page.hbs

@@ -0,0 +1,8 @@
+{{#> partials-base }}
+<article class="page">
+  <h1 class="page-title">{{title}}</h1>
+  {{#if description}}<p class="page-description">{{description}}</p>{{/if}}
+  <div class="page-body">{{{body}}}</div>
+  {{#if page.next}}<p class="page-next"><a rel="next" href="{{page.next.route}}">Next: {{page.next.title}}</a></p>{{/if}}
+</article>
+{{/partials-base}}

package/templates/storefront/src/patterns/layouts/page/page.json

@@ -0,0 +1,8 @@
+{
+  "title": "A page",
+  "description": "Its one-sentence description.",
+  "body": "<p>The page's markdown, rendered.</p>",
+  "site": { "title": __PD_BRAND_JSON__, "footer": "Made with Pattern Dump." },
+  "nav": [{ "route": "/", "title": "Home", "current": true }, { "route": "/about/", "title": "About" }],
+  "page": { "next": { "route": "/about/", "title": "About" } }
+}

package/templates/storefront/src/patterns/layouts/page/page.md

@@ -0,0 +1,6 @@
+---
+title: Page
+---
+
+The layout every page renders with, unless its frontmatter names another with `layout: <name>`.
+Its schema is the frontmatter contract: a page may set `title` (required) and `description`.

package/templates/storefront/src/patterns/layouts/page/page.schema.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "title": "Page",
+  "description": "The layout every page renders with. Its properties are what a page's frontmatter may set.",
+  "type": "object",
+  "x-pd-prose-images": { "widths": [480, 672, 1344], "sizes": "(min-width: 44rem) 42rem, calc(100vw - 2rem)" },
+  "required": ["title"],
+  "properties": {
+    "title": { "type": "string", "description": "The page's heading, its title in the navigation and in search results" },
+    "description": { "type": "string", "description": "One sentence under the heading, and the page's description for search results" },
+    "page": {
+      "type": "object",
+      "description": "What the storefront works out for the page",
+      "properties": {
+        "next": { "description": "The page after this one in the navigation" }
+      }
+    }
+  }
+}

package/templates/storefront/src/patterns/partials/base/base.hbs

@@ -0,0 +1,17 @@
+<div class="site">
+  <a class="site-skip" href="#main">Skip to the content</a>
+  <header class="site-header">
+    <a class="site-title" href="/">{{site.title}}</a>
+    <nav class="site-nav" aria-label="Site">
+      <ul>
+        {{#each nav}}<li><a href="{{route}}"{{#if current}} aria-current="page"{{/if}}>{{title}}</a></li>{{/each}}
+      </ul>
+    </nav>
+  </header>
+  <main class="site-main" id="main">
+    {{> @partial-block }}
+  </main>
+  <footer class="site-footer">
+    <p>{{site.footer}}</p>
+  </footer>
+</div>

package/templates/storefront/src/patterns/partials/base/base.json

@@ -0,0 +1,4 @@
+{
+  "site": { "title": __PD_BRAND_JSON__, "footer": "Made with Pattern Dump." },
+  "nav": [{ "route": "/", "title": "Home", "current": true }, { "route": "/about/", "title": "About" }]
+}

package/templates/storefront/src/patterns/partials/base/base.md

@@ -0,0 +1,6 @@
+---
+title: Base
+---
+
+The frame every layout fills: the header with the site's name and navigation, the main content, and
+the footer. A layout fills it with `{{#> partials-base }} … {{/partials-base}}`.

package/templates/storefront/src/patterns/partials/base/base.schema.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "title": "Base",
+  "description": "The frame every layout is built on. Its site property declares what storefront.site may hold.",
+  "type": "object",
+  "required": ["site"],
+  "properties": {
+    "site": {
+      "type": "object",
+      "description": "Values every page shares: storefront.site in the config",
+      "required": ["title"],
+      "properties": {
+        "title": { "type": "string", "description": "The site's name, in the header" },
+        "footer": { "type": "string", "description": "The line at the bottom of every page" }
+      }
+    }
+  }
+}

package/templates/storefront/src/patterns/partials/head/head.hbs

@@ -0,0 +1 @@
+<link rel="icon" href="/assets/icon.svg">

package/templates/storefront/src/patterns/partials/head/head.md

@@ -0,0 +1,6 @@
+---
+title: Head
+---
+
+What the skin adds to every page's `<head>`: here, the icon. Pattern Dump writes the title, the
+description, the search and link-preview tags and the stylesheets itself, so they don't belong here.

package/templates/storefront/src/styles/components/note.scss

@@ -0,0 +1,8 @@
+@use "../base/tokens";
+
+.note { margin-block: tokens.$space-md; padding: tokens.$space-md; border-left: 4px solid var(--color-border, #6b7280); border-radius: tokens.$radius; background: #f3f4f6; }
+.note-tip { border-left-color: #0b7a3e; background: #ecf8f1; }
+.note-warning { border-left-color: #a15c00; background: #fdf4e7; }
+.note-heading { margin: 0 0 tokens.$space-xs; font-weight: 700; }
+.note-text > :first-child { margin-top: 0; }
+.note-text > :last-child { margin-bottom: 0; }

package/templates/storefront/src/styles/layouts/page.scss

@@ -0,0 +1,6 @@
+@use "../base/tokens";
+
+.page-title { margin-block: 0 tokens.$space-sm; line-height: 1.2; }
+.page-description { margin-block: 0 tokens.$space-lg; color: var(--color-text-muted, #4b5563); }
+.page-body iframe { width: 100%; border: 0; }
+.page-next { margin-top: tokens.$space-lg; }

package/templates/storefront/src/styles/partials/base.scss

@@ -0,0 +1,13 @@
+@use "../base/tokens";
+
+.site { max-width: 44rem; margin: 0 auto; padding: tokens.$space-lg tokens.$space-md; }
+.site-skip { position: absolute; left: -100vw; }
+.site-skip:focus { left: tokens.$space-md; }
+.site-header { display: flex; flex-wrap: wrap; gap: tokens.$space-md; align-items: baseline; justify-content: space-between; }
+.site-title { font-weight: 700; color: inherit; text-decoration: none; }
+.site-nav ul { display: flex; gap: tokens.$space-md; margin: 0; padding: 0; list-style: none; }
+.site-nav a[aria-current="page"] { font-weight: 700; }
+.site-main { margin-block: tokens.$space-lg; }
+// An image never overflows the column: with its width and height it keeps its aspect ratio as it scales down.
+.site img { max-inline-size: 100%; block-size: auto; }
+.site-footer { border-top: 1px solid var(--color-border, #6b7280); color: var(--color-text-muted, #4b5563); }

package/templates/storefront-fills/config.txt

@@ -0,0 +1,14 @@
+  // The website: every markdown file in pages/ is a page, rendered with the skin in src/patterns/layouts
+  // and src/patterns/partials. `npm run dev` prints its address, http://live.localhost:4000/.
+  storefront: {
+    pagesDir: "./pages",
+    outDir: "./site",
+    // The workbench is published on the website's own host, under /workbench/ (and built for that path,
+    // build.basePath below).
+    workbenchUrl: "/workbench/",
+    // Your domain, once you have one: canonical URLs, link previews and the sitemap are built from it.
+    // url: "https://www.example.com/",
+    site: { title: __PD_BRAND_JSON__, footer: "Made with Pattern Dump." },
+  },
+  build: { basePath: "/workbench/" },
+

package/templates/storefront-fills/gitignore.txt

@@ -0,0 +1,2 @@
+site
+_site

package/templates/storefront-fills/readme.md

@@ -0,0 +1,60 @@
+
+## The website
+
+`pages/` is a website: every markdown file in it is a page, at the address its path names
+(`pages/about.md` is `/about/`). `npm run dev` serves it next to the workbench:
+
+| Address | Serves |
+|---|---|
+| http://live.localhost:4000/ | the website |
+| http://pd.localhost:4000/ | the workbench |
+
+If Safari can't open them, add this line to `/etc/hosts`: `127.0.0.1  live.localhost pd.localhost`.
+
+### Try breaking it
+
+`pages/index.md` places the note component with a `pd-` tag, and its values are checked against the
+component's schema before the page is shown. With the website open, change `tone="tip"` to `tone="tips"`
+and save: the page shows what is wrong, with the file, line and column. Change it back and the page
+returns by itself. How `pd-` tags work:
+[placing components](https://github.com/n8design/pattern-dump/blob/main/docs/guide/storefront.md#placing-components).
+
+### Where it lives
+
+| Path | What lives there |
+|---|---|
+| `pages/` | the pages, in markdown (`pages/` is the website; `src/patterns/pages/`, if you have it, holds page-sized components) |
+| `src/patterns/layouts/page/` | the layout every page renders with; its schema is what a page's frontmatter may set |
+| `src/patterns/partials/base/` | the frame around every page: header, navigation, footer |
+| `src/patterns/partials/head/` | what the skin adds to every page's `<head>` (the icon) |
+| `src/patterns/components/note/` | the component the home page shows |
+| `pattern-dump.config.ts` | `storefront`: the website's name and footer (`site`), and where it is published |
+
+A page that doesn't exist shows a built-in 404 page; write `pages/404.md` to change it. A page that moved
+can forward from its old address (`redirectFrom: [/old/]`), and `index: false` keeps a page out of search
+engines. All of it is in the [storefront guide](https://github.com/n8design/pattern-dump/blob/main/docs/guide/storefront.md).
+
+### Build it
+
+`npm run build` writes the website to `site/` and the workbench to `dist/`, built for `/workbench/`. The
+website is served from the root of its host, with the workbench copied into it at `/workbench/`, which is
+what the GitHub Pages workflow does.
+
+### Publish it
+
+`.github/workflows/pages.yml` publishes both to GitHub Pages on every push to `main`. The website lives at
+the root of its host, so it needs a custom domain (a project page under `/<repository>/` can't host it).
+Once, in the repository on GitHub:
+
+1. **Settings → Pages → Source:** "GitHub Actions".
+2. **Settings → Pages → Custom domain:** your domain, then Save. GitHub recommends verifying the domain in
+   your account settings first.
+3. **DNS:** for an apex domain (`example.com`), `A` records to `185.199.108.153`, `185.199.109.153`,
+   `185.199.110.153` and `185.199.111.153`; for a subdomain (`www.example.com`), a `CNAME` record to
+   `<your-user>.github.io`, without the repository name.
+4. **Enforce HTTPS** in the same settings, once GitHub offers it (it can take up to a day).
+5. **`storefront.url`** in `pattern-dump.config.ts`: the same address, for canonical URLs, link previews and
+   the sitemap.
+
+The workflow writes no `CNAME` file: with a GitHub Actions deploy, the custom domain is the setting in
+step 2. It installs with `npm ci`, so `pattern-dump` must come from the npm registry, not a local file.

package/dist/chunks/chunk-3WZHFYHZ.js

@@ -1,160 +0,0 @@
-// packages/config/src/validate.ts
-var SHAPE = {
-  $schema: "string",
-  sourceDir: "string",
-  patternsDir: "string",
-  outDir: "string",
-  styles: {
-    keys: {
-      strategy: { values: ["parallel"], unsupported: ["co-located"] },
-      dir: "string",
-      entry: "string-or-strings"
-    },
-    required: ["dir"]
-  },
-  themes: {
-    keys: {
-      dir: "string",
-      default: "string",
-      switch: { values: ["attribute", "stylesheet"] },
-      swatch: { keys: { slots: "strings" }, required: ["slots"] }
-    },
-    required: ["dir", "default"]
-  },
-  assets: {
-    keys: {
-      strategy: { values: ["central"], unsupported: ["component-relative"] },
-      dir: "string-or-strings",
-      css: "strings"
-    }
-  },
-  scriptsDir: "string",
-  globalScripts: "strings",
-  dataDir: "string",
-  helpers: "string",
-  documentBase: "strings",
-  overviews: "boolean",
-  shell: {
-    keys: { brand: { keys: { title: "string", logo: "logo", logoAlt: "string", href: "string" } } }
-  },
-  packages: "packages",
-  exclude: "strings",
-  build: { keys: { outDir: "string", basePath: "string", audit: "boolean" } }
-};
-var REQUIRED = ["sourceDir", "patternsDir", "outDir", "styles"];
-var isObject = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
-var isStrings = (v) => Array.isArray(v) && v.every((x) => typeof x === "string");
-function distance(a, b) {
-  const row = Array.from({ length: b.length + 1 }, (_, i) => i);
-  for (let i = 1; i <= a.length; i++) {
-    let prev = row[0];
-    row[0] = i;
-    for (let j = 1; j <= b.length; j++) {
-      const cur = row[j];
-      row[j] = Math.min(row[j] + 1, row[j - 1] + 1, prev + (a[i - 1].toLowerCase() === b[j - 1].toLowerCase() ? 0 : 1));
-      prev = cur;
-    }
-  }
-  return row[b.length];
-}
-function suggest(key, known) {
-  let best;
-  let bestD = Infinity;
-  for (const k of known) {
-    const d = distance(key, k);
-    if (d < bestD) {
-      best = k;
-      bestD = d;
-    }
-  }
-  if (best === void 0) return void 0;
-  const sameStart = key.slice(0, 3).toLowerCase() === best.slice(0, 3).toLowerCase();
-  return bestD <= 2 || bestD <= 3 && sameStart ? best : void 0;
-}
-function checkObject(value, shape, required, at, problems) {
-  const known = Object.keys(shape);
-  const unknown = Object.keys(value).filter((k) => !(k in shape));
-  for (const key of required) {
-    if (value[key] !== void 0) continue;
-    const near = unknown.find((u) => suggest(u, [key]) === key);
-    problems.push(near ? `missing required "${at}${key}" (found "${at}${near}" \u2014 did you mean "${at}${key}"?)` : `missing required "${at}${key}"`);
-  }
-  for (const key of unknown) {
-    const near = suggest(key, known);
-    if (near && required.includes(near) && value[near] === void 0) continue;
-    problems.push(`unknown key "${at}${key}"${near ? ` \u2014 did you mean "${at}${near}"?` : ""}`);
-  }
-  for (const key of known) {
-    if (value[key] !== void 0) checkValue(value[key], shape[key], `${at}${key}`, problems);
-  }
-}
-function checkValue(value, rule, at, problems) {
-  const fail = (expected) => problems.push(`"${at}" must be ${expected}`);
-  if (rule === "string") {
-    if (typeof value !== "string") fail("a string");
-    return;
-  }
-  if (rule === "boolean") {
-    if (typeof value !== "boolean") fail("true or false");
-    return;
-  }
-  if (rule === "strings") {
-    if (!isStrings(value)) fail("a list of strings");
-    return;
-  }
-  if (rule === "string-or-strings") {
-    if (typeof value !== "string" && !isStrings(value)) fail("a string or a list of strings");
-    return;
-  }
-  if (rule === "packages") {
-    const ok = Array.isArray(value) && value.every((p) => typeof p === "string" || isObject(p) && typeof p.name === "string" && (p.exclude === void 0 || isStrings(p.exclude)));
-    if (!ok) fail(`a list of package names or { name, exclude } objects`);
-    return;
-  }
-  if (rule === "logo") {
-    const ok = typeof value === "string" || isObject(value) && typeof value.light === "string" && typeof value.dark === "string";
-    if (!ok) fail(`a path or { light, dark }`);
-    return;
-  }
-  if ("values" in rule) {
-    if (typeof value === "string" && rule.unsupported?.includes(value)) {
-      problems.push(`"${at}": "${value}" is not supported yet \u2014 use ${rule.values.map((v) => `"${v}"`).join(" or ")}, or leave it out`);
-    } else if (typeof value !== "string" || !rule.values.includes(value)) {
-      fail(rule.values.map((v) => `"${v}"`).join(" or "));
-    }
-    return;
-  }
-  if (!isObject(value)) {
-    fail("an object");
-    return;
-  }
-  checkObject(value, rule.keys, rule.required ?? [], `${at}.`, problems);
-}
-var ConfigError = class extends Error {
-  name = "ConfigError";
-};
-function configProblems(raw) {
-  if (!isObject(raw)) return ["the config must be an object (a .ts config must `export default defineConfig({ \u2026 })`)"];
-  const problems = [];
-  checkObject(raw, SHAPE, REQUIRED, "", problems);
-  return problems;
-}
-function validateConfig(raw, source) {
-  const problems = configProblems(raw);
-  if (problems.length > 0) {
-    throw new ConfigError(`${source}: invalid config
-${problems.map((p) => `  - ${p}`).join("\n")}`);
-  }
-  return raw;
-}
-
-// packages/config/src/index.ts
-function defineConfig(config) {
-  return config;
-}
-
-export {
-  ConfigError,
-  validateConfig,
-  defineConfig
-};