@morphemecms/cms 0.0.0-stage → 0.1.0

package/site/defineSite.mjs

@@ -0,0 +1,136 @@
+// A site's settings (its src/site/config.ts, `@site/config`): what it says of itself, over the standard ones, which are the
+// same on every site (where its content, data and apps are, the lists the standard blocks use). Plain
+// JavaScript, so Node, Vite and the Worker's build can all load it.
+
+/** @typedef {{ value: string; label: string; note?: string; pick?: string; pickLabel?: string }} ButtonTarget */
+
+/**
+ * What a site says of itself in its config.ts.
+ * @typedef {object} SiteOwn
+ * @property {string} name The editor's name as an app (on the home screen, in the tab).
+ * @property {string} description What the editor is for (the app's description).
+ * @property {string} locale The site's language, with the country (BCP 47): the editor's, unless one is picked on "Konto" or
+ *   the browser asks for another the editor has (src/i18n/); the commits are always in it.
+ * @property {string} domain The site's own domain: a link written with it is a link within the site. The site is at
+ *   https://<domain>/ (Astro's `site`, the structured data), and measures only there and at www.<domain> (site/tracking.ts).
+ * @property {string} siteDescription What search engines show of the site when a page has no description of its own.
+ * @property {{ owner: string; name: string; branch: string }} repo Where a save goes: one commit on this branch (src/github.ts).
+ */
+
+/**
+ * What a site can say of itself, else the standard: the owner's picture (beside a blog post, and shown when a page with
+ * none of its own is shared), the booking page and the pages a booking ends on, the page about the owner, the block
+ * drawn after every blog post, the word a page's title can end in, pictures that are the same though their names say
+ * otherwise, the file of its redirects from old addresses, and its app store.
+ * @typedef {object} SiteChoices
+ * @property {{ src: string; alt: string } | null} picture The owner's picture, or none.
+ * @property {{ path: string; thanks: string[] }} booking The booking page, where "Book en tid" goes when no booking sheet
+ *   opens ('': the site has none, and the header has no button to it), and the pages a booking or an order ends on: not
+ *   for search engines (site/noindex.mjs), and without the action bar.
+ * @property {string} aboutPath The page about the owner (an AboutPage in the structured data), or ''.
+ * @property {string} postEnd The block drawn across the page after every blog post (its type, with its shared texts), or ''.
+ * @property {string} titleEnd A word a page's title can end in, after a dash, for search engines (" – København"): kept in
+ *   <title>, left out of the page's heading (displayTitle in site/text.ts). Empty: nothing is left out.
+ * @property {Record<string, string>} samePictures Pictures that are the same though their names say otherwise (a crop
+ *   saved under a new name), by name (samePicture in site/images.mjs).
+ * @property {{ rules: string; map: string }} siteRedirects The site's other redirects: rules ("<from> <to> 301", one to a
+ *   line) and the Worker's map (`{ ids, paths }`, worker/index.js), shown and changed with the editor's own under
+ *   Videresendelser (src/redirects.ts).
+ * @property {{ owner: string; name: string; branch: string; catalog: string } | null} store The app store ("Apps" ›
+ *   "Appstore", src/store.ts): the GitHub repository and branch of its catalog (`catalog`, the apps and themes that can
+ *   be installed, each with where its folder is in the repository, at which commit), or none: then "Appstore" has only
+ *   the site's own.
+ */
+
+/** @type {SiteChoices} */
+const CHOICES = {
+  picture: null,
+  booking: { path: '', thanks: [] },
+  aboutPath: '',
+  postEnd: '',
+  titleEnd: '',
+  samePictures: {},
+  siteRedirects: { rules: 'public/_redirects', map: 'src/data/old-addresses.json' },
+  store: null,
+};
+
+/** The same on every site. */
+const STANDARD = {
+  /** The Worker's settings: the editor turns R2 caching on and off in them ("Indstillinger" › "Avanceret", src/r2Caching.ts). */
+  wrangler: 'wrangler.jsonc',
+  /** The folders the editor loads: the blog posts, the pages, the data files, the pictures and the PDFs, videos and zip
+   * files (shown with the pictures in "Filer", at /filer/<name> on the site). */
+  folders: {
+    blog: 'src/content/blog',
+    pages: 'src/content/pages',
+    data: 'src/data',
+    media: 'public/images/uploads',
+    files: 'public/filer',
+  },
+  /** The redirects the editor writes when a page or post moves (src/addresses.ts; worker/index.js reads it). */
+  redirects: 'src/data/redirects.json',
+  /** The blocks turned off under "Blokindstillinger" (src/BlockSettings.tsx): `{ "off": [types] }`. */
+  blockSettings: 'src/data/block-settings.json',
+  /** The apps (src/apps/) installed under "Apps" (src/AppList.tsx): `{ "installed": [ids] }`; the folder of their
+   * settings, a file for each (<id>.json); and the folder of the apps themselves, one for each (<id>/). */
+  apps: { installed: 'src/data/apps.json', settings: 'src/data/apps', folder: 'src/apps' },
+  /** The blocks' shared texts as the owner saved them ("Blokke"), by the block's type; until then those in the block's
+   * shared.ts. */
+  blockTexts: 'src/data/blocks.json',
+  /** The theme in use, `{ "theme": "<folder>" }`, swapped on "Udseende" (ThemePick in src/Library.tsx, site/theme.mjs). */
+  theme: 'src/data/theme.json',
+  /** The icon pack chosen, `{ "pack": "<id>" }`, under "Udseende" › "Ikonpakker" (IconPacks in src/Library.tsx;
+   * site/iconPacks.mjs): a system pack (icons/<id>/) or one a theme installed brings (`<theme>/<pack>`). Without it, the
+   * theme's. */
+  icons: 'src/data/icons.json',
+  /** How the site moves, `{ "scheme": "expressive" | "standard" | "calm" }`, under "Udseende" › "Bevægelse" (Motion in
+   * src/Motion.tsx; lib/motion.ts, site/motion.ts). Without it, the theme's ("motion" in its theme.json). */
+  motion: 'src/data/motion.json',
+  /** The folder of the themes installed, one for each (<folder>/) (site/theme.mjs); one from the store (src/store.ts) is
+   * copied into it and deleted from it. */
+  themes: 'src/themes',
+  /** The addresses the pages may load from besides what the apps need, by kind (as an app's csp.json): those allowed
+   * after the pages' Content-Security-Policy stopped them ("Blokeret adresse"). site/siteCsp.mjs gives them to the build. */
+  csp: 'src/data/csp.json',
+  /** The site's colours, for light and dark mode, under "Farver" (src/Colors.tsx, lib/colors.ts). */
+  colors: 'src/data/colors.json',
+  /** The menu ("Hovedmenu", its items under `items`), for "Vis som menuen" among the pages (src/Library.tsx). */
+  menu: 'src/data/menu.json',
+  /** Addresses of the site that are not pages, which a new page or post cannot have. */
+  reserved: ['/editor/', '/admin/', '/oauth/', '/images/', '/filer/', '/ny/', '/404/'],
+  /** The lists the standard blocks use, by what they hold, and their ids (their addresses, #liste/<id>): the
+   * testimonials, the list the block "Udtalelser" brings (src/standard/testimonials/list.ts), the tags, which a
+   * testimonial's "Opret et tag" makes a new one of, and the cookies, the list the block "Cookieliste" brings. */
+  lists: { testimonials: 'udtalelser', tags: 'kategorier', cookies: 'cookies' },
+  /** The folder of the site's cookie list, "Cookies" under "Lister" (the standard block "Cookieliste",
+   * src/standard/cookies/list.ts): a file per cookie, those an app sets added when it is installed and taken out when it
+   * is uninstalled (src/cookieList.ts). */
+  cookieList: 'src/data/cookie-list',
+  /** Where a button of the standard block "Knapper" can go besides a page: the booking sheet, the phone (their
+   * addresses and texts: `buttons` in defaults/standard.ts and defaults/sitedata.ts), and a promotion on the page that a
+   * button can open (`picked` in defaults/standard.ts, the choices `promotions` in defaults/rules.ts).
+   * @type {ButtonTarget[]} */
+  buttonTargets: [
+    { value: 'booking', label: 'Book en tid' },
+    { value: 'phone', label: 'Ring', note: 'Ved Ring vises telefonnummeret efter teksten.' },
+    {
+      value: 'promotion',
+      label: 'Åbn promovering',
+      note: 'Ved Åbn promovering bruges promoveringens tekst.',
+      pick: 'promotions',
+      pickLabel: 'Promovering',
+    },
+  ],
+  /** Which pages are the front page, the blog page and the 404 page: `{ "front": "<its address>", "blog": …, "notFound": … }`
+   * ("Indstillinger" › "Udseende" › "Standardsider", defaults/standardPages.ts). */
+  standardPages: 'src/data/standard-pages.json',
+};
+
+/** @typedef {SiteOwn & SiteChoices & typeof STANDARD} SiteConfig */
+
+/**
+ * A site's settings: what it says of itself (`own`), with the standard ones for the rest.
+ * @param {SiteOwn & Partial<SiteChoices>} own
+ * @returns {SiteConfig}
+ */
+export const defineSite = (own) => ({ ...STANDARD, ...CHOICES, ...own });

package/site/directives/interact.d.mts

@@ -0,0 +1,2 @@
+declare function _default(load: any, _opts: any, el: any): void;
+export default _default;

package/site/directives/interact.mjs

@@ -0,0 +1,31 @@
+// Astro client directive: client:interact
+// Hydrates an island only when the visitor reaches for it (touch, hover, focus or click),
+// so pages don't download React/Motion for a menu that may never be opened.
+// A click that lands before hydration has finished is replayed afterwards.
+export default (load, _opts, el) => {
+  const events = ['touchstart', 'pointerenter', 'focusin', 'click'];
+  let started = false;
+  let pendingClick = null;
+
+  const onClick = (e) => {
+    pendingClick = e.target instanceof Element ? e.target.closest('button, a') : null;
+  };
+
+  const start = async (e) => {
+    if (e.type === 'click') onClick(e);
+    if (started) return;
+    started = true;
+    events.forEach((name) => el.removeEventListener(name, start));
+    el.addEventListener('click', onClick, { capture: true });
+    const hydrate = await load();
+    await hydrate();
+    el.removeEventListener('click', onClick, { capture: true });
+    if (pendingClick) {
+      // Wait a frame so React has attached its handlers before replaying the click.
+      const target = pendingClick;
+      requestAnimationFrame(() => (el.contains(target) ? target : el.querySelector('button'))?.click());
+    }
+  };
+
+  events.forEach((name) => el.addEventListener(name, start, { passive: true }));
+};

package/site/editor-version.d.mts

@@ -0,0 +1 @@
+export function editorVersion(): string;

package/site/editor-version.mjs

@@ -0,0 +1,26 @@
+// A fingerprint of the editor's code (the package in packages/editor/, the themes in src/themes/ with their
+// blocks, which one is in use (src/data/theme.json), the icon packs in packages/editor/icons/ and which one is chosen
+// (src/data/icons.json), the apps in src/apps/ and the site's configuration in src/site/), made at
+// build time. It is written both in the editor's page and in /editor/version.json, so an editor that is still open from before a change to it can tell that a
+// newer one is out (packages/editor/src/deploy.ts). Only changes to the editor count: a save of the owner's also
+// gives a new build, but the same fingerprint.
+import { createHash } from 'node:crypto';
+import { existsSync, readdirSync, readFileSync } from 'node:fs';
+import { join, relative, sep } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+// This package, and the site's own (from its root, the working directory).
+const DIRS = [fileURLToPath(new URL('..', import.meta.url)), 'src/themes', 'src/apps', 'src/site'];
+
+export function editorVersion() {
+  const hash = createHash('sha256');
+  for (const dir of DIRS.filter((d) => existsSync(d)))
+    for (const entry of readdirSync(dir, { recursive: true, withFileTypes: true })
+      .filter((e) => e.isFile() && !relative(dir, e.parentPath).split(sep).includes('node_modules'))
+      .map((e) => join(e.parentPath, e.name))
+      .sort())
+      hash.update(entry).update(readFileSync(entry));
+  hash.update(readFileSync('src/data/theme.json'));
+  if (existsSync('src/data/icons.json')) hash.update(readFileSync('src/data/icons.json'));
+  return hash.digest('hex').slice(0, 12);
+}

package/site/fill.ts

@@ -0,0 +1,13 @@
+// The shared texts of the blocks (src/data/blocks.json, "Blokke" in the editor) have
+// places like {antal} for what differs from block to block.
+
+/** The text with each {name} replaced by its value; a name without a value stays as it is. */
+export const fill = (text: string, values: Record<string, string | number>) =>
+  text.replace(/\{(\w+)\}/g, (all, name: string) => (name in values ? String(values[name]) : all));
+
+/** The text before and after {name}, for a value that is drawn on its own (in bold); with no {name}
+ * the text is all before. */
+export function around(text: string, name: string): [string, string] {
+  const at = text.indexOf(`{${name}}`);
+  return at < 0 ? [text, ''] : [text.slice(0, at), text.slice(at + name.length + 2)];
+}

package/site/format.ts

@@ -0,0 +1,11 @@
+import { config } from '@site/config';
+
+// A date as the site's language writes it ("12. marts 2024", "March 12, 2024").
+const dateFmt = new Intl.DateTimeFormat(config.locale, { day: 'numeric', month: 'long', year: 'numeric' });
+
+export const formatDate = (d: Date) => dateFmt.format(d);
+
+export function readingMinutes(markdown: string | undefined) {
+  const words = (markdown ?? '').split(/\s+/).filter(Boolean).length;
+  return Math.max(1, Math.round(words / 200));
+}

package/site/home.ts

@@ -0,0 +1,66 @@
+// The front page: the page chosen under "Indstillinger" › "Udseende" › "Standardsider" (src/data/standard-pages.json,
+// packages/editor/defaults/standardPages.ts), read
+// into sections for the theme's templates/Home.astro: each block a section of its own (its type says how it looks,
+// e.g. a theme's components/home/), with the text above it that is its own (its lead), and the rest of the text
+// as sections of text ("text": a heading and Markdown). The types below are the standard blocks'; an app's block is a
+// section too, by its own type, which the theme that draws it types itself (e.g. its components/home/sections.ts).
+import setting from '@data/standard-pages.json';
+import { getPages, type Page, type PostChoice } from './content';
+import { isBlogCategory } from './categories';
+import { pageH1, partsOfMarkdown, sectionsFromParts } from '@morphemecms/cms/src/sections.mjs';
+import { frontLeads } from '@site/standardPages';
+
+type Link = { label: string; href: string };
+
+type Sections = {
+  // The standard block "Banner" (type "hero"; text: Markdown, with its heading, the subtitle and the introduction, its
+  // picture, its "Knapper" block and the text under it: heroParts in packages/editor/src/standard/hero/fields.ts).
+  hero: { text: string; placement?: string; width?: string };
+  // The standard block "Foldeliste" with a heading and an introduction.
+  accordion: { heading: string; intro: string; items: (Link & { text?: string; more?: Link[] })[] };
+  // The standard block "Udtalelser" (show 'front': the front page's).
+  testimonials: { heading: string; show?: string };
+  // The standard block "Kort" with a heading (design: '' an icon, 'image' a picture, 'text' neither).
+  cards: { heading: string; design?: string; items: { icon?: string; image?: string; title: string; text: string; href?: string }[] };
+  steps: { heading: string; items: { title: string; text: string }[] };
+  // show "categories" (the default): `count` posts (3 when not set, postCount in the standard block
+  // Blogindlæg's shared.ts) in any of `categories` (all posts when empty),
+  // the newest or (order "random") picked anew on each visit; "picked": the posts in `picked`.
+  posts: { heading: string } & PostChoice;
+  text: { heading?: string; body: string };
+};
+
+/** The category its "Alle indlæg" goes to: the one picked for the link (`link`), else the one its
+ * posts are from when they are from exactly one; null for the whole blog, also when that tag is not a
+ * blog category (it has no page). */
+export const allPostsCategory = (choice: { show?: string; categories?: string[]; link?: string }) => {
+  const slug = choice.link || (choice.show !== 'picked' && choice.categories?.length === 1 ? choice.categories[0] : null);
+  return slug && isBlogCategory(slug) ? slug : null;
+};
+/** Where its "Alle indlæg" goes: that category, else the blog. */
+export const allPostsLink = (choice: { show?: string; categories?: string[]; link?: string }) => {
+  const category = allPostsCategory(choice);
+  return category ? `/blog/kategori/${category}/` : '/blog/';
+};
+
+export type SectionType = keyof Sections;
+export type HomeSection = { [T in SectionType]: { type: T; hidden?: boolean } & Sections[T] }[SectionType];
+
+/** The address of the page that is the front page; its own address sends on to / (packages/editor/worker/index.js). */
+export const frontPath = setting.front;
+
+/** The front page: the page, its heading (H1, at the top of its text; `headingHtml` with its colours, when a word in it
+ * has one) and its sections shown on the site. */
+export type FrontPage = { page: Page; heading: string; headingHtml?: string; sections: HomeSection[] };
+
+export async function frontPage(): Promise<FrontPage> {
+  const page = (await getPages({ previews: false })).find((p) => p.data.path === frontPath);
+  if (!page) throw new Error(`src/data/standard-pages.json: forsiden, ${frontPath}, findes ikke, eller den er en kladde.`);
+  const sections = sectionsFromParts(partsOfMarkdown(page.body ?? ''), frontLeads) as HomeSection[];
+  const h1 = pageH1(page.body);
+  return { page, heading: h1.heading || page.data.title, headingHtml: h1.html, sections: sections.filter((s) => !s.hidden) };
+}
+
+/** The (shown) section of a type, if the front page has one. */
+export const sectionOf = <T extends SectionType>(sections: HomeSection[], type: T) =>
+  sections.find((s): s is Extract<HomeSection, { type: T }> => s.type === type);

package/site/iconPacks.d.mts

@@ -0,0 +1,20 @@
+/** The pack the site draws its icons with: the one chosen (src/data/icons.json's `pack`), else the theme's ("icons" in
+ * its theme.json), else the standard theme's. `installed`: the ids of the packs there are. */
+export function packInUse({ chosen, theme, icons, standardIcons, installed }: {
+    chosen: any;
+    theme: any;
+    icons: any;
+    standardIcons: any;
+    installed: any;
+}): any;
+/** Where a theme's own packs are in its folder, one folder each. */
+export const THEME_PACKS_FOLDER: "icon-packs";
+/** A pack's manifest, in its folder. */
+export const ICON_PACK_FILE: "pack.json";
+/** A pack's licence, in its folder. */
+export const ICON_PACK_LICENSE: "LICENSE";
+/** The system's own packs, by their folders in this package's icons/: the ids a theme's "icons" and src/data/icons.json name them by. */
+export const SYSTEM_PACKS: string[];
+export function themePackId(theme: any, pack: any): string;
+export function packTheme(id: any): any;
+export function themePack(theme: any, name: any, own: any): any;

package/site/iconPacks.mjs

@@ -0,0 +1,43 @@
+// The site's icon packs, and which one it draws its icons with, without reading a file: for the site's build
+// (packages/editor/site/icons.mjs, packages/editor/site/theme.mjs) and the editor (packages/editor/src/iconPacks.ts) alike.
+//
+// An icon pack is a folder: its manifest (pack.json: name, author, licence; ICON_PACK_FILE), its licence (LICENSE, and
+// one more for each set it takes icons from besides its own, `includes`) and an SVG file for every icon the site and the
+// editor draw, by the name they draw it by, Phosphor's (usedIcons in packages/editor/site/icons.mjs: `map-pin.svg`, `play-fill.svg`).
+// The system's own are in packages/editor/icons/<pack>/ (Material Symbols, Phosphor and Lucide, written by `npm run icons`); a theme
+// may bring its own in its folder, src/themes/<theme>/icon-packs/<pack>/, which come and go with the theme (the
+// Appstore installs, updates and uninstalls them with it, as its other files).
+//
+// Which one is used: the one chosen under "Indstillinger" › "Udseende" › "Ikonpakker" (src/data/icons.json,
+// `{ "pack": "<id>" }`), else the theme in use's ("icons" in its theme.json: a system pack, or one of its own by its
+// folder), else the standard theme's (Material Symbols).
+
+/** Where a theme's own packs are in its folder, one folder each. */
+export const THEME_PACKS_FOLDER = 'icon-packs';
+
+/** A pack's manifest, in its folder. */
+export const ICON_PACK_FILE = 'pack.json';
+
+/** A pack's licence, in its folder. */
+export const ICON_PACK_LICENSE = 'LICENSE';
+
+/** The system's own packs, by their folders in this package's icons/: the ids a theme's "icons" and src/data/icons.json name them by. */
+export const SYSTEM_PACKS = ['material-symbols', 'phosphor', 'lucide'];
+
+/** A pack's id: a system pack's folder, a theme's `<theme>/<its folder>`. */
+export const themePackId = (theme, pack) => `${theme}/${pack}`;
+
+/** The theme a pack came with, from its id; undefined for the system's own. */
+export const packTheme = (id) => (id.includes('/') ? id.split('/')[0] : undefined);
+
+/** A theme's own pack ("icons" in its theme.json: one of its own by its folder, else a system pack) as an id. `own`:
+ * whether the theme has a pack of its own by that name. */
+export const themePack = (theme, name, own) => (own ? themePackId(theme, name) : name);
+
+/** The pack the site draws its icons with: the one chosen (src/data/icons.json's `pack`), else the theme's ("icons" in
+ * its theme.json), else the standard theme's. `installed`: the ids of the packs there are. */
+export function packInUse({ chosen, theme, icons, standardIcons, installed }) {
+  if (typeof chosen === 'string' && chosen) return chosen;
+  const name = icons ?? standardIcons;
+  return themePack(theme, name, installed.includes(themePackId(theme, name)));
+}