@morphemecms/cms 0.0.0-stage → 0.1.0

package/src/blocks.ts

@@ -0,0 +1,251 @@
+// What the editor knows about a block in the text: its name, what it is, its fields (asked in
+// BlockDialog.tsx), what its card in the text says about it to a screen reader (describe) and how it
+// looks (draw). The blocks are each a folder, the standard ones in packages/editor/src/standard/ and the site's
+// own in src/apps/<app>/blocks/ (registry.tsx finds them); the sections of a fixed page are blocks in its text too
+// (sectionBlocks, sections.mjs), drawn by the theme's editor/previews.tsx.
+import type { ReactNode } from 'react';
+import type { Block, Edit, Field, Lead, Relation } from './schema';
+import type { ListRows, Option, TestimonialRow } from './fields';
+import type { SiteData } from '@site/editor';
+import type { StandardSiteData } from './standard/site';
+import { CalendarCheck, Code, Newspaper, SquaresFour, TextAlignLeft, type Icon } from '@phosphor-icons/react';
+import { HTML } from './markdown.mjs';
+import { withoutColors } from '../lib/text-colors.mjs';
+import { t } from './i18n';
+
+export type BlockProps = Record<string, unknown>;
+
+/** A block by its type, drawn as in the editor (its `draw`), for a theme's section that shows one
+ * (preview() in registry.tsx); null when no block has the type. */
+export type DrawBlock = (type: string, props: BlockProps) => ReactNode;
+
+export type SiteBlock = {
+  type: string;
+  label: string;
+  /** What it is, where one is picked (only where the name is not enough). */
+  hint?: string;
+  /** Edited elsewhere (Block.edit). */
+  edit?: Edit;
+  fields: Field[];
+  /** What the card in the text says about it, in lines, when not its fields (describe). */
+  detail?: (props: BlockProps, data: BlockData) => string[];
+  /** Not offered among the blocks to put in: a fixed page's own text, which is written in the text. */
+  written?: boolean;
+  /** Its heading and text are written in the text above it (sections.mjs); a new one gets a heading. */
+  lead?: Lead;
+  /** Cannot be hidden on the site (its line in the file has no props to say so: HTML). */
+  shown?: boolean;
+  /** Drawn in its sheet above the fields, as it is with them now (BlockDialog.tsx): the buttons,
+   * which are the shared ones until it has its own. */
+  preview?: boolean;
+  /** Its fields filled in as an example, for its preview under "Blokindstillinger" when it is on no
+   * page (BlockSettings.tsx). Without it, exampleOf fills them in from their names. */
+  example?: BlockProps;
+  /** Before its name where it is picked (BlockDialog.tsx). */
+  icon: Icon;
+  /** How it looks on the site, with what is in it now (the card in the text, its sheet): its View.tsx given the view
+   * its view.ts makes (registry.tsx). Without it, the card has the lines of describe. */
+  draw?: (props: Record<string, any>, data: BlockData) => ReactNode;
+  /** Gone from the site by itself (a notice whose time is over): its card is greyed, like a hidden one. */
+  over?: (props: BlockProps) => boolean;
+  /** One of the editor's standard blocks (packages/editor/src/standard/), not the site's own (src/apps/<app>/blocks/). */
+  standard?: boolean;
+  /** Added by an app (src/apps/<app>/blocks/, apps.ts): its id. Offered once the app is installed. */
+  app?: string;
+};
+
+/** A block, in its folder in packages/editor/src/standard/ or src/apps/<app>/blocks/ (index.tsx): all but its type, which
+ * is the folder's name, whether it is a standard block, and how it looks (its View.tsx, registry.tsx). */
+export type BlockDefinition = Omit<SiteBlock, 'type' | 'standard' | 'app' | 'draw'>;
+export const defineBlock = (block: BlockDefinition) => block;
+
+// What the cards need besides the blocks: the lists' rows (an app's block shows its own list's) and the testimonials as they are now, the names of
+// the pages, posts … (for the fields that pick one), the rest of the site (for the previews,
+// previews.tsx), and the address of the page being edited (for "Dem om denne side"); on a fixed
+// page its file and its form's values as they are now.
+export type BlockData = {
+  lists: ListRows;
+  testimonials: TestimonialRow[];
+  relations: Record<Relation, Option[]>;
+  /** The site's data, with what the standard blocks take from it (StandardSiteData). */
+  site: SiteData & StandardSiteData;
+  path?: string;
+  page?: { file: string; values: Record<string, unknown> };
+};
+
+// Fields filled in as an example from what they are: a text with its name ("Overskrift"), a choice
+// with its default or first option, a page or post with the first ones there are, a list with three
+// items; a date or a picture stays empty.
+function exampleFields(fields: Field[], data: BlockData): BlockProps {
+  return Object.fromEntries(
+    fields.map((f): [string, unknown] => {
+      if (f.default !== undefined && f.default !== '') return [f.name, f.default];
+      switch (f.type) {
+        case 'string':
+        case 'text':
+        case 'markdown':
+          return [f.name, f.label];
+        case 'number':
+          return [f.name, 1];
+        case 'select':
+          return [f.name, f.options?.[0]?.value ?? ''];
+        case 'relation': {
+          const values = (data.relations[f.to!] ?? []).map((o) => o.value);
+          return [f.name, f.multiple ? values.slice(0, 3) : (values[0] ?? '')];
+        }
+        case 'object':
+          return [f.name, exampleFields(f.fields!, data)];
+        case 'list':
+          return [f.name, Array.from({ length: Math.min(3, f.maxItems ?? 3) }, () => exampleFields(f.fields!, data))];
+        case 'boolean':
+          return [f.name, false];
+        case 'blocks':
+          return [f.name, []];
+        default:
+          return [f.name, ''];
+      }
+    }),
+  );
+}
+
+/** A block's fields as an example, for its preview when it is on no page: its own (example), or
+ * filled in from what they are. */
+export const exampleOf = (block: SiteBlock, data: BlockData): BlockProps => block.example ?? exampleFields(block.fields, data);
+
+// What a card says: a line for each field that is filled in (a text shortened, a list as its items,
+// a picked page or testimonial by its name), or what the block lists from elsewhere (prices,
+// testimonials). Without anything to show, only its name.
+export const plain = (s: unknown) =>
+  withoutColors(String(s))
+    // Without the blocks and pictures in it (a "Banner"'s text).
+    .replace(/<div data-block="[a-z]+"[^>]*><\/div>/g, ' ')
+    .replace(/!\[(?:\\.|[^\]])*\]\([^)]*\)/g, ' ')
+    .replace(/\]\([^)]*\)/g, ']')
+    .replace(/[*_`#>[\]]/g, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+export const cut = (s: string, n: number) => (s.length > n ? `${s.slice(0, n - 1).trimEnd()}…` : s);
+
+export function valueText(f: Field, v: unknown, data: BlockData, n = 140): string {
+  if (v == null || v === '' || (Array.isArray(v) && !v.length)) return '';
+  switch (f.type) {
+    case 'string':
+    case 'text':
+    case 'markdown':
+      return cut(plain(v), n);
+    case 'number':
+      return `${f.label}: ${v}`;
+    case 'select':
+      return f.options?.find((o) => o.value === v)?.label ?? String(v);
+    case 'relation': {
+      const options = [...(data.relations[f.to!] ?? []), ...(f.fixed ? data.relations.fixed : [])];
+      const name = (x: unknown) => options.find((o) => o.value === x)?.label ?? String(x);
+      return Array.isArray(v) ? v.map(name).join(', ') : name(v);
+    }
+    case 'object':
+      return f.fields!.map((g) => valueText(g, (v as BlockProps)[g.name], data, n)).find(Boolean) ?? '';
+    case 'list': {
+      const one = (item: unknown) =>
+        f.field
+          ? valueText(f.field, item, data, 60)
+          : (f
+              .fields!.filter((g) => !f.summary || [f.summary].flat().includes(g.name))
+              .map((g) => valueText(g, (item as BlockProps)[g.name], data, 60))
+              .find(Boolean) ?? '');
+      return `${f.label}: ${(v as unknown[]).map(one).filter(Boolean).join(' · ')}`;
+    }
+    default:
+      return '';
+  }
+}
+
+// The testimonials with any of the tags (all without tags), as the block on the site picks them
+// (standard/testimonials/load.ts).
+export const withTags = (rows: TestimonialRow[], tags: unknown) => {
+  const wanted = (tags ?? []) as string[];
+  return rows.filter((row) => !wanted.length || (row.categories ?? []).some((c) => wanted.includes(c)));
+};
+export const names = (rows: TestimonialRow[]) => (rows.length ? rows.map((row) => row.name).join(', ') : t.blocks.noTestimonials);
+
+/** The lines on the card of a block in the text. */
+export function describe(block: SiteBlock, props: BlockProps, data: BlockData): string[] {
+  const lines = block.detail
+    ? block.detail(props, data)
+    : block.fields.map((f) => valueText(f, props[f.name], data)).filter((line) => line && line !== block.label);
+  return lines.filter(Boolean).slice(0, 8);
+}
+
+// The blocks in the text of a fixed page in the editor, which are its sections (collections.ts). A
+// section of text is written as text and is a card only while hidden.
+export const sectionBlocks = (blocks: Block[], leads: Record<string, Lead> = {}): SiteBlock[] =>
+  blocks.map((b) => {
+    // A block a page can have (`pageBlocks`, withPageBlocks in registry.tsx) is a section as it is; with a lead on this
+    // page (the field's `leads`), without the fields written in the text above its card.
+    if ('draw' in b) {
+      const lead = leads[b.type];
+      return lead ? { ...(b as SiteBlock), lead, fields: b.fields.filter((f) => !inLead(f.name, lead)) } : (b as SiteBlock);
+    }
+    return sectionBlock(
+      b,
+      b.fields.filter((f) => !inLead(f.name, b.lead)),
+    );
+  });
+
+// Whether a field is written in the text above the card (a section's or a block's lead); one written there only up to
+// a block (`upTo`) is on the card too.
+const inLead = (name: string, lead?: Lead) =>
+  !!lead &&
+  (name === lead.heading ||
+    (name === lead.body && !lead.upTo) ||
+    (!!lead.image && ['image', 'imageAlt', 'imageDecorative'].includes(name)));
+
+// A section as a card: only the fields that are not written in the text above it (its lead).
+// The icon of each type of section (a fixed page's own: text, booking, posts); others the icon of
+// the blocks.
+const sectionIcons: Record<string, Icon> = {
+  text: TextAlignLeft,
+  booking: CalendarCheck,
+  posts: Newspaper,
+};
+
+const sectionBlock = (b: Block, fields: Field[]): SiteBlock => ({
+  type: b.type,
+  label: b.label,
+  icon: sectionIcons[b.type] ?? SquaresFour,
+  hint: b.hint,
+  edit: b.edit,
+  fields,
+  lead: b.lead,
+  written: b.type === 'text',
+});
+
+// What a piece of HTML is, for its card: a video from YouTube or Vimeo with its title, Calendly's calendar,
+// a table; and the start of the code.
+function htmlLines(code: string): string[] {
+  const src = /<iframe[^>]*\ssrc="([^"]*)"/i.exec(code)?.[1] ?? '';
+  const title = /\stitle="([^"]*)"/i.exec(code)?.[1];
+  const what = /youtube\.com|youtu\.be/.test(src)
+    ? t.blocks.html.youtube
+    : /vimeo\.com/.test(src)
+      ? t.blocks.html.vimeo
+      : code.includes('calendly')
+        ? t.blocks.html.calendly
+        : /^<table/i.test(code.trim())
+          ? t.blocks.html.table
+          : '';
+  const start = code.trim().replace(/\s+/g, ' ');
+  return [what && title ? `${what}: ${title}` : what, start.length > 120 ? `${start.slice(0, 120)}…` : start];
+}
+
+/** HTML on a line of its own in the text, kept as it is (markdown.mjs). Put in on the pages; a card
+ * wherever it is, also on the blog posts. */
+export const htmlBlock: SiteBlock = {
+  type: HTML,
+  label: t.blocks.html.label,
+  icon: Code,
+  hint: t.blocks.html.hint,
+  fields: [{ name: 'code', label: t.blocks.html.code, type: 'text', required: true }],
+  detail: (p) => htmlLines(String(p.code ?? '')),
+  shown: true,
+  standard: true,
+};

package/src/brand.ts

@@ -0,0 +1,153 @@
+// The logo and the icons, made in the browser from a picture the owner picks (BrandForm.tsx).
+//   Logo: public/logo.svg, shown next to the name on the site as a CSS mask (base.css .logo-mark),
+//     so only its shape counts and it takes the site's colour. An SVG is kept with only what draws (cleanSvg); other
+//     pictures are put inside an SVG.
+//   Icon: public/favicon.svg (the browser tab, Google), public/favicon.ico (for what asks for that
+//     address), public/apple-touch-icon.png (the site on an iPhone home screen) and the app icons in
+//     public/editor/, drawn on the site's background colour (light mode, colors.json) with the same
+//     margins as packages/editor/scripts/editor-icons.mjs.
+import { t } from './i18n';
+import { cleanSvg } from '../lib/svg.mjs';
+
+export const LOGO = 'public/logo.svg';
+export const FAVICON = 'public/favicon.svg';
+const FAVICON_ICO = 'public/favicon.ico';
+// The PNG icons: size in pixels and the picture's share of the width.
+const APP_ICONS: [string, number, number][] = [
+  ['public/editor/icon-192.png', 192, 0.7],
+  ['public/editor/icon-512.png', 512, 0.7],
+  ['public/editor/icon-maskable-512.png', 512, 0.5],
+  ['public/editor/apple-touch-icon.png', 180, 0.66],
+  ['public/apple-touch-icon.png', 180, 0.66],
+];
+export const BRAND_FILES = [LOGO, FAVICON, FAVICON_ICO, ...APP_ICONS.map(([path]) => path)];
+
+export type Picture = { image: HTMLImageElement; svg: string | null };
+
+// Opens a picture (SVG, PNG, JPEG, WebP).
+export async function openPicture(file: Blob): Promise<Picture> {
+  let svg: string | null = null;
+  let blob = file;
+  if (file.type === 'image/svg+xml' || (file instanceof File && /\.svg$/i.test(file.name))) {
+    // An SVG can hold code, which would run if the file was opened on the site (and could reach the editor's
+    // GitHub login there), so only what draws is kept (cleanSvg).
+    svg = cleanSvg(await file.text(), { style: true })?.svg ?? null;
+    if (!svg) throw new Error(t.company.brand.svgUnreadable);
+    const root = new DOMParser().parseFromString(svg, 'image/svg+xml').documentElement;
+    // Without a width and height an SVG has no size to draw from; give it one from its viewBox.
+    const box = root
+      .getAttribute('viewBox')
+      ?.split(/[\s,]+/)
+      .map(Number);
+    if (box?.length === 4 && !root.getAttribute('width')) {
+      const scale = 512 / Math.max(box[2], box[3]);
+      root.setAttribute('width', String(box[2] * scale));
+      root.setAttribute('height', String(box[3] * scale));
+    }
+    blob = new Blob([new XMLSerializer().serializeToString(root)], { type: 'image/svg+xml' });
+  }
+  const image = new Image();
+  image.src = URL.createObjectURL(blob);
+  await image.decode().catch(() => {
+    throw new Error(t.company.brand.cannotOpen);
+  });
+  return { image, svg };
+}
+
+// The picture on a square of `px`, as large as `share` of it allows; on `bg` and in `tint` if given.
+function draw({ image }: Picture, px: number, share: number, bg?: string, tint?: string): HTMLCanvasElement {
+  const scale = (px * share) / Math.max(image.naturalWidth, image.naturalHeight);
+  const [w, h] = [image.naturalWidth * scale, image.naturalHeight * scale];
+  const picture = document.createElement('canvas');
+  picture.width = picture.height = px;
+  const ctx = picture.getContext('2d')!;
+  ctx.imageSmoothingQuality = 'high';
+  ctx.drawImage(image, (px - w) / 2, (px - h) / 2, w, h);
+  if (tint) {
+    ctx.globalCompositeOperation = 'source-in';
+    ctx.fillStyle = tint;
+    ctx.fillRect(0, 0, px, px);
+  }
+  if (!bg) return picture;
+  const canvas = document.createElement('canvas');
+  canvas.width = canvas.height = px;
+  const out = canvas.getContext('2d')!;
+  out.fillStyle = bg;
+  out.fillRect(0, 0, px, px);
+  out.drawImage(picture, 0, 0);
+  return canvas;
+}
+
+const png = (canvas: HTMLCanvasElement) =>
+  new Promise<Uint8Array>((resolve, reject) =>
+    canvas.toBlob(
+      (b) => (b ? b.arrayBuffer().then((a) => resolve(new Uint8Array(a))) : reject(new Error(t.company.brand.notReady))),
+      'image/png',
+    ),
+  );
+
+// An ICO file with one PNG in it (`px` square), as packages/editor/scripts/editor-icons.mjs makes it.
+function ico(image: Uint8Array, px: number): Uint8Array {
+  const file = new Uint8Array(22 + image.length);
+  const head = new DataView(file.buffer);
+  head.setUint16(2, 1, true); // an icon
+  head.setUint16(4, 1, true); // one picture
+  file[6] = file[7] = px; // width and height
+  head.setUint16(10, 1, true); // colour planes
+  head.setUint16(12, 32, true); // bits per pixel
+  head.setUint32(14, image.length, true);
+  head.setUint32(18, 22, true); // where the picture starts
+  file.set(image, 22);
+  return file;
+}
+
+const dataUrl = (canvas: HTMLCanvasElement) => canvas.toDataURL('image/png');
+
+// Whether a picture has no see-through background (its corners are solid), so that as a mask it
+// would be a plain square.
+export function solid({ image }: Picture): boolean {
+  const canvas = document.createElement('canvas');
+  canvas.width = canvas.height = 32;
+  const ctx = canvas.getContext('2d', { willReadFrequently: true })!;
+  ctx.drawImage(image, 0, 0, 32, 32);
+  return [
+    [0, 0],
+    [31, 0],
+    [0, 31],
+    [31, 31],
+  ].every(([x, y]) => ctx.getImageData(x, y, 1, 1).data[3] > 250);
+}
+
+// The logo file: an SVG as it is (cleaned, openPicture), another picture (at most 600 px) inside an SVG.
+export function logoFile(picture: Picture): string {
+  if (picture.svg) return picture.svg;
+  const { naturalWidth: w, naturalHeight: h } = picture.image;
+  const scale = Math.min(1, 600 / Math.max(w, h));
+  const canvas = document.createElement('canvas');
+  [canvas.width, canvas.height] = [Math.round(w * scale), Math.round(h * scale)];
+  canvas.getContext('2d')!.drawImage(picture.image, 0, 0, canvas.width, canvas.height);
+  return (
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${canvas.width} ${canvas.height}">` +
+    `<image href="${dataUrl(canvas)}" width="${canvas.width}" height="${canvas.height}"/></svg>\n`
+  );
+}
+
+// The icon files from a picture, on the site's background colour (`bg`). `fromLogo`: the logo's shape in
+// the accent colour (`accent`), like the logo.
+export async function iconFiles(
+  picture: Picture,
+  fromLogo: boolean,
+  { bg: BG, accent }: { bg: string; accent: string },
+): Promise<{ files: Record<string, string | Uint8Array>; preview: string }> {
+  const tint = fromLogo ? accent : undefined;
+  const files: Record<string, string | Uint8Array> = {};
+  // The favicon: a rounded square with the picture inside, nested like the one
+  // packages/editor/scripts/editor-icons.mjs reads.
+  files[FAVICON] =
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="${BG}"/>` +
+    `<svg x="8" y="8" width="48" height="48" viewBox="0 0 256 256"><image href="${dataUrl(draw(picture, 256, 1, undefined, tint))}" width="256" height="256"/></svg></svg>\n`;
+  files[FAVICON_ICO] = ico(await png(draw(picture, 32, 0.75, BG, tint)), 32);
+  for (const [path, px, share] of APP_ICONS) files[path] = await png(draw(picture, px, share, BG, tint));
+  const preview = URL.createObjectURL(new Blob([files[APP_ICONS[0][0]] as BlobPart], { type: 'image/png' }));
+  return { files, preview };
+}

package/src/cache.ts

@@ -0,0 +1,42 @@
+// The site's files as the editor last loaded them, kept in this browser (IndexedDB), with the commit
+// they are from and who was logged in. The editor opens with them at once, and loads the files from
+// GitHub again only when the branch has a newer commit (App.tsx). Cleared on "Log ud".
+import type { RepoFile, Viewer } from './github';
+
+/** folders: which folders the files are from (App.tsx FOLDERS), so files kept by an editor that
+ * loaded fewer folders (before "Medier") are loaded again. */
+export type Cached = { commit: string; files: RepoFile[]; user: Viewer; folders?: string };
+
+const STORE = 'cache';
+const KEY = 'files';
+
+function open(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open('editor', 1);
+    request.onupgradeneeded = () => request.result.createObjectStore(STORE);
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+  });
+}
+
+export async function readCache(): Promise<Cached | null> {
+  try {
+    const db = await open();
+    return await new Promise((resolve) => {
+      const request = db.transaction(STORE).objectStore(STORE).get(KEY);
+      request.onsuccess = () => resolve((request.result as Cached | undefined) ?? null);
+      request.onerror = () => resolve(null);
+    });
+  } catch {
+    return null;
+  }
+}
+
+/** Keeps the files; null forgets them. */
+export async function writeCache(cached: Cached | null) {
+  try {
+    const store = (await open()).transaction(STORE, 'readwrite').objectStore(STORE);
+    if (cached) store.put(cached, KEY);
+    else store.delete(KEY);
+  } catch {}
+}