@morphemecms/cms 0.0.0-stage → 0.1.0

package/src/FileView.tsx

@@ -0,0 +1,30 @@
+// A file in Filer as it is shown (Media.tsx, and Deleted.tsx when it was deleted): a picture, a video
+// to play, or a PDF to open and a zip file to download, each a button.
+import { ArrowSquareOut, DownloadSimple, FilePdf, FileVideo, FileZip, type Icon } from '@phosphor-icons/react';
+import { LinkButton } from './ui';
+import { fileKindOf, type FileKind } from './images';
+import { t } from './i18n';
+
+/** The kind of a file in Filer, by its address: one in the folder of files, or else a picture. */
+export type Kind = 'picture' | FileKind;
+export const KINDS: Kind[] = ['picture', 'pdf', 'video', 'zip'];
+export const kindOf = (src: string): Kind => fileKindOf(src) ?? 'picture';
+
+/** The icon of a PDF, a video and a zip file, in the grid. */
+export const fileIcons: Record<FileKind, Icon> = { pdf: FilePdf, video: FileVideo, zip: FileZip };
+
+/** src: where the browser gets it (the site, or the bytes in this browser); name: its file name. */
+export function FileView({ src, name }: { src: string; name: string }) {
+  const kind = kindOf(name);
+  if (kind === 'picture') return <img src={src} alt="" className="max-h-[45dvh] w-full rounded-xl bg-tint object-contain" />;
+  if (kind === 'video') return <video src={src} controls preload="metadata" className="max-h-[45dvh] w-full rounded-xl bg-tint" />;
+  return kind === 'pdf' ? (
+    <LinkButton href={src} target="_blank" rel="noopener" kind="outlined" wide icon={ArrowSquareOut}>
+      {t.media.openPdf}
+    </LinkButton>
+  ) : (
+    <LinkButton href={src} download={name} kind="outlined" wide icon={DownloadSimple}>
+      {t.media.download}
+    </LinkButton>
+  );
+}

package/src/FormFrame.tsx

@@ -0,0 +1,237 @@
+// What every form in the editor has around its fields: the top bar with the way back and a link to
+// the page on the site, "Slet" below the fields where entries can be deleted, and a bar at the bottom
+// of the screen with "Gem", which is only there when something has been changed. Messages are shown
+// by the app (Env.notify); the first "Gem" asks whether the editor may also send notifications.
+// Leaving with changes that are not saved asks first, to save them or not (in the editor's dialog;
+// closing or reloading the page asks in the browser's own). "Forhåndsvis" beside "Gem" and in the top bar shows the page with
+// what is in the form, before it is saved (pagePreview.tsx).
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { ArrowSquareOut, Binoculars, Trash } from '@phosphor-icons/react';
+import Screen, { type Back } from './Screen';
+import { Button, Group, IconButton, IconLink, LoadingIndicator, type TabChoice, ListItem } from './ui';
+import { hasUnsaved, setUnsaved } from './deploy';
+import { askToNotify } from './notifications';
+import { choose } from './ask';
+import { when } from './when';
+import { useSidebar } from './sidebar';
+import type { Env } from './App';
+import { t } from './i18n';
+
+import type { Edit } from './schema';
+import type { EditorType } from './notifications';
+
+// `kind`: what kind of notification it is (notifications.ts: `site`, `saved`, `failed`), kept under "Notifikationer";
+// without it, it is only shown at the bottom (something going on, a form that cannot be saved).
+export type Status = { text: string; error?: boolean; edit?: Edit; kind?: EditorType } | null;
+
+type Props<T extends string> = {
+  title: string;
+  /** The way back; leaving asks first while something is unsaved, unless it has a `guard` of its own (a field's page
+   * goes back to its form, which keeps what is unsaved). */
+  back: Back;
+  status?: ReactNode;
+  view?: string;
+  /** More in the top bar, before the link to the site. */
+  actions?: ReactNode;
+  /** The icon of the form's navigation drawer, the last in the top bar (Screen). */
+  drawer?: ReactNode;
+  /** The form's tabs, in the top bar (Screen). */
+  tabs?: TabChoice<T>;
+  dirty: boolean;
+  saving: boolean;
+  // Deleting the entry: "Sletter" instead of "Gemmer".
+  deleting?: boolean;
+  /** Saves the form; true when it was saved (not when it said why not, or the owner chose not to). */
+  onSave: () => Promise<unknown>;
+  /** "Forhåndsvis" beside "Gem" and in the top bar (pagePreview.tsx). */
+  onPreview?: () => void;
+  onDelete?: () => void;
+  deleteLabel?: string;
+  /** The fields beside the text on a wide computer screen (FormColumns in ui.tsx). */
+  panel?: boolean;
+  /** A list (the menu): as wide as the other lists on a computer. */
+  wide?: boolean;
+  children: ReactNode;
+};
+
+// When a file was last saved (Env.savedAt), for the top bar: undefined while it is being asked, null
+// when it is not known (a new file). Set it to the time of a save.
+export function useSavedAt(env: Env, path: string) {
+  const [savedAt, setSavedAt] = useState<Date | null | undefined>(path ? undefined : null);
+  useEffect(() => {
+    if (path)
+      env.savedAt([path]).then(
+        (t) => setSavedAt(t[path] ?? null),
+        () => setSavedAt(null),
+      );
+  }, []);
+  return [savedAt, setSavedAt] as const;
+}
+
+// The top bar's line under the title: deleting, saving, or when the file was last saved.
+export function savedStatus({
+  savedAt,
+  saving,
+  deleting,
+  isNew,
+}: {
+  savedAt?: Date | null;
+  saving: boolean;
+  deleting?: boolean;
+  isNew?: boolean;
+}) {
+  if (deleting) return <LoadingIndicator>{t.app.busy.deleting}</LoadingIndicator>;
+  if (saving) return <LoadingIndicator>{t.app.busy.saving}</LoadingIndicator>;
+  if (savedAt) return t.app.lastSaved(when(savedAt));
+  return isNew ? t.app.notSavedYet : undefined;
+}
+
+// The open form's save (onSave, with the question about notifications), while something is unsaved.
+let saveOpen: (() => Promise<boolean>) | null = null;
+
+/** Asks, while something is unsaved ("Gem ændringerne?"), whether to save it first ("Gem", the main one) or leave
+ * it ("Kassér"); Esc stays. True when the editor may go on: nothing unsaved, it was saved, or it is left. A save that fails or stops (a field not filled in, an address that is taken) stays. */
+export async function mayLeave() {
+  if (!hasUnsaved()) return true;
+  const answer = await choose({
+    title: t.app.unsavedTitle,
+    text: t.app.unsaved,
+    choices: [...(saveOpen ? [{ value: 'save', label: t.common.save }] : []), { value: 'discard', label: t.app.discard }],
+    // A choice to make: no "Annuller"; Esc stays on the screen (null), so nothing is lost.
+    cancel: false,
+  });
+  if (!answer) return false;
+  if (answer.choice === 'save' && !(await saveOpen?.())) return false;
+  setUnsaved(false);
+  return true;
+}
+
+// The addresses of the open form and of its fields' pages of their own (Field.page, CompanyForm.tsx): the editor goes
+// between them without leaving the form (App.tsx), so it keeps what is in it, saved or not, and asks nothing.
+let formPages: string[] = [];
+
+/** Keeps the addresses of the open form and of its fields' pages while it is open. */
+export function useFormPages(pages: string[]) {
+  const key = pages.join('\n');
+  useEffect(() => {
+    formPages = key.split('\n');
+    return () => {
+      formPages = [];
+    };
+  }, [key]);
+}
+
+/** Whether going from one address (a route) to another stays in the open form: to one of its fields' pages, or back. */
+export const inForm = (from: string, to: string) => from !== to && formPages.includes(from) && formPages.includes(to);
+
+// Goes to another screen of the editor (a hash, or a way there, e.g. nav.ts up), asking first while
+// something is unsaved.
+export function leaveTo(to: string | (() => void)) {
+  const go = typeof to === 'string' ? () => (location.hash = to) : to;
+  void mayLeave().then((yes) => yes && go());
+}
+
+export default function FormFrame<T extends string>({
+  title,
+  back,
+  status,
+  view,
+  actions,
+  drawer,
+  tabs,
+  dirty,
+  saving,
+  deleting,
+  onSave,
+  onPreview,
+  onDelete,
+  deleteLabel,
+  panel,
+  wide,
+  children,
+}: Props<T>) {
+  // On a computer the save bar starts where the sidebar (or its rail, sidebar.ts) ends.
+  const sidebar = useSidebar();
+  const save = useRef(onSave);
+  save.current = onSave;
+  useEffect(() => {
+    if (!dirty) return;
+    const warn = (e: BeforeUnloadEvent) => e.preventDefault();
+    window.addEventListener('beforeunload', warn);
+    // The editor does not reload itself to a newer version meanwhile (deploy.ts keepCurrent).
+    setUnsaved(true);
+    saveOpen = async () => {
+      askToNotify();
+      return (await save.current()) === true;
+    };
+    return () => {
+      window.removeEventListener('beforeunload', warn);
+      setUnsaved(false);
+      saveOpen = null;
+    };
+  }, [dirty]);
+
+  return (
+    <Screen
+      title={title}
+      status={status}
+      panel={panel}
+      wide={wide}
+      drawer={drawer}
+      tabs={tabs}
+      back={{ guard: leaveTo, ...back }}
+      actions={
+        <>
+          {actions}
+          {onPreview && <IconButton icon={Binoculars} label={t.preview.button} aria-haspopup="dialog" onClick={onPreview} />}
+          {view && <IconLink href={view} target="_blank" rel="noopener" label={t.app.viewOnSite} icon={ArrowSquareOut} />}
+        </>
+      }
+    >
+      <div className="space-y-6">{children}</div>
+      {onDelete && (
+        <div className="mt-12">
+          <Group>
+            <ListItem
+              tone="delete"
+              disabled={saving}
+              onClick={onDelete}
+              headline={
+                <span className="inline-flex items-center gap-3">
+                  <Trash size={18} />
+                  {deleting ? <LoadingIndicator>{t.app.busy.deleting}</LoadingIndicator> : (deleteLabel ?? t.common.delete)}
+                </span>
+              }
+            />
+          </Group>
+        </div>
+      )}
+      {(dirty || saving) && (
+        <div
+          className={`editor-save-bar fixed inset-x-0 bottom-0 z-20 border-t border-line bg-surface/90 pb-[env(safe-area-inset-bottom)] backdrop-blur-md ${sidebar ? 'md:left-64' : 'md:left-18'}`}
+        >
+          <div className="mx-auto max-w-3xl px-4 py-3 md:px-6">
+            {/* "Forhåndsvis" beside "Gem". */}
+            <div className={onPreview ? 'grid grid-cols-[auto_1fr] gap-2' : ''}>
+              {onPreview && (
+                <Button kind="outlined" icon={Binoculars} aria-haspopup="dialog" onClick={onPreview}>
+                  {t.preview.button}
+                </Button>
+              )}
+              <Button
+                wide
+                disabled={saving}
+                onClick={() => {
+                  askToNotify();
+                  void onSave();
+                }}
+              >
+                {saving ? <LoadingIndicator>{deleting ? t.app.busy.deleting : t.app.busy.saving}</LoadingIndicator> : t.common.saveChanges}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </Screen>
+  );
+}

package/src/Keywords.tsx

@@ -0,0 +1,225 @@
+// "Søgeord" under the fields of "Interne links" (Part.below, packages/editor/defaults/internalLinks.ts): every primary and secondary
+// keyword of the pages, the posts and the fixed pages with the fields for them ("Søgemaskiner"), each with the page it
+// links to, which of its keywords it is and, at the right, how many pages and posts link with it on the site as it was
+// last built (/editor/links.json, packages/editor/scripts/link-counts.mjs; one that another page has too, which wins, links from none).
+// Only those of the published ones, as the site links them (packages/editor/site/autolinks.mjs); a new version of a page (/ny/…)
+// gives its own to the page it is for. Over them, as over the lists, a search by word and page, the order (A–Å, the
+// default, under the first letter, Å–A, the most or the fewest links first; kept in this browser) and the funnel with
+// the filters by kind of keyword, by links and by kind of page, each picked one as a chip. A row opens the page at
+// "Søgemaskiner" (openAtSeo).
+import { ArrowsDownUp } from '@phosphor-icons/react';
+import { useEffect, useMemo, useState } from 'react';
+import { Choice, EmptyNote, Filters, FormHeading, Group, InputChip, listClass, SearchRow, useKept, ListItem } from './ui';
+import type { RepoFile } from './github';
+import { readFields, splitFrontmatter } from './frontmatter.mjs';
+import { openAtSeo } from './EntryForm';
+import { headed, letterOf } from './Sheet';
+import { collections } from './site';
+import { config, standardPages, standardPaths } from '@site/editor';
+import { byText } from './schema';
+import { t } from './i18n';
+
+/** A keyword: the page it is on (its file, `#…`, its name, its address on the site and its list) and which it is. */
+type Keyword = { word: string; primary: boolean; title: string; href: string; address: string; kind: string };
+
+/** How many pages link with each word on the site as it was last built: by the word in lower case, where it links. */
+type Counts = Record<string, { href: string; pages: number }>;
+
+type Sort = 'az' | 'za' | 'most' | 'fewest';
+const SORT_KEY = 'editor-sort-soegeord';
+function savedSort(): Sort {
+  try {
+    const s = localStorage.getItem(SORT_KEY);
+    if (s === 'az' || s === 'za' || s === 'most' || s === 'fewest') return s;
+  } catch {}
+  return 'az';
+}
+
+const split = (text: unknown) =>
+  String(text ?? '')
+    .split(',')
+    .map((w) => w.trim())
+    .filter(Boolean);
+const has = (fields: { name: string }[]) => fields.some((f) => f.name === 'keyword');
+
+// The keywords of one page, post or fixed page.
+const wordsOf = (d: Record<string, unknown>, page: Omit<Keyword, 'word' | 'primary'>): Keyword[] => [
+  ...split(d.keyword).map((word) => ({ word, primary: true, ...page })),
+  ...split(d.keywords).map((word) => ({ word, primary: false, ...page })),
+];
+
+function keywordsOf(files: RepoFile[]): Keyword[] {
+  // A standard page is where it is shown: the front page at /, the blog page at /blog/ (their own addresses send on
+  // there); the 404 page has no address, so its words link nowhere; the others (the contact page) at their own.
+  const paths = standardPaths(files.find((f) => f.path === config.standardPages)?.text);
+  const shownAt = (address: string) => {
+    const standard = standardPages.find((p) => paths[p.key] === address);
+    return standard && standard.at !== undefined ? standard.at : address;
+  };
+  return collections.flatMap((c) => {
+    if (c.kind === 'markdown' && has(c.fields))
+      return files
+        .filter((f) => f.path.startsWith(`${c.folder}/`) && f.path.endsWith('.md'))
+        .flatMap((f) => {
+          const d = readFields(splitFrontmatter(f.text).yaml);
+          const draft = d.status && d.status !== 'published';
+          const address = String(d.path || `/${f.path.slice(c.folder.length + 1).replace(/(\/index)?\.md$/, '')}/`);
+          const at = shownAt(address);
+          if (draft || address.startsWith('/ny/') || at === null) return [];
+          return wordsOf(d, {
+            title: String(d.title ?? f.path),
+            href: `#${f.path}`,
+            address: at,
+            kind: c.id,
+          });
+        });
+    if (c.kind === 'files')
+      return c.files
+        .filter((file) => has(file.fields))
+        .flatMap((file) => {
+          const text = files.find((f) => f.path === file.file)?.text;
+          return text ? wordsOf(JSON.parse(text), { title: file.label, href: `#${file.file}`, address: file.view, kind: c.id }) : [];
+        });
+    return [];
+  });
+}
+
+export default function Keywords({ files }: { files: RepoFile[] }) {
+  const [query, setQuery] = useKept('soegeord-soeg', '');
+  const [sort, setSort] = useState(savedSort);
+  const [which, setWhich] = useKept<'' | 'primary' | 'secondary'>('soegeord-slags', '');
+  const [linked, setLinked] = useKept<'' | 'with' | 'without'>('soegeord-links', '');
+  const [kind, setKind] = useKept('soegeord-side', '');
+  // undefined while they load; null when the site has none (not built since they came, or offline).
+  const [counts, setCounts] = useState<Counts | null>();
+  useEffect(() => {
+    fetch('/editor/links.json', { cache: 'no-store' })
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => setCounts(data?.words ?? null))
+      .catch(() => setCounts(null));
+  }, []);
+  const linksOf = (k: Keyword) => {
+    const c = counts?.[k.word.toLowerCase()];
+    return c && c.href === k.address ? c.pages : 0;
+  };
+
+  const all = useMemo(() => keywordsOf(files), [files]);
+  const kinds = collections.filter((c) => all.some((k) => k.kind === c.id));
+  const shownKind = kinds.some((c) => c.id === kind) ? kind : '';
+  const counted = !!counts;
+  const shownLinked = counted ? linked : '';
+  const shownSort = counted || sort === 'az' || sort === 'za' ? sort : 'az';
+  function pickSort(next: Sort) {
+    setSort(next);
+    try {
+      localStorage.setItem(SORT_KEY, next);
+    } catch {}
+  }
+  const filters = [
+    {
+      title: t.keywords.whichFilter,
+      value: which,
+      options: [
+        { value: '', label: t.keywords.allWhich },
+        { value: 'primary', label: t.keywords.which.primary },
+        { value: 'secondary', label: t.keywords.which.secondary },
+      ],
+      onChange: (v: string) => setWhich(v as typeof which),
+    },
+    counted && {
+      title: t.keywords.linksFilter,
+      value: shownLinked,
+      options: [
+        { value: '', label: t.keywords.allLinks },
+        { value: 'with', label: t.keywords.linked.with },
+        { value: 'without', label: t.keywords.linked.without },
+      ],
+      onChange: (v: string) => setLinked(v as typeof linked),
+    },
+    kinds.length > 1 && {
+      title: t.keywords.kindFilter,
+      value: shownKind,
+      options: [{ value: '', label: t.keywords.allKinds }, ...kinds.map((c) => ({ value: c.id, label: c.label }))],
+      onChange: setKind,
+    },
+  ].filter((f) => !!f);
+  // Each filter picked, as a chip that removes it.
+  const chips = [
+    which && { key: 'which', label: t.keywords.which[which], clear: () => setWhich('') },
+    shownLinked && { key: 'links', label: t.keywords.linked[shownLinked], clear: () => setLinked('') },
+    shownKind && { key: 'kind', label: kinds.find((c) => c.id === shownKind)!.label, clear: () => setKind('') },
+  ].filter((c) => !!c);
+
+  const words = query.toLowerCase().split(/\s+/).filter(Boolean);
+  const byWord = (a: Keyword, b: Keyword) => byText(a.word, b.word) || byText(a.title, b.title);
+  const order: Record<Sort, (a: Keyword, b: Keyword) => number> = {
+    az: byWord,
+    za: (a, b) => -byWord(a, b),
+    most: (a, b) => linksOf(b) - linksOf(a) || byWord(a, b),
+    fewest: (a, b) => linksOf(a) - linksOf(b) || byWord(a, b),
+  };
+  const shown = all
+    .filter(
+      (k) =>
+        words.every((w) => `${k.word} ${k.title}`.toLowerCase().includes(w)) &&
+        (!which || k.primary === (which === 'primary')) &&
+        (!shownLinked || linksOf(k) > 0 === (shownLinked === 'with')) &&
+        (!shownKind || k.kind === shownKind),
+    )
+    .sort(order[shownSort]);
+  // By word under the first letter; by links in one list.
+  const groups = shownSort === 'az' || shownSort === 'za' ? headed(shown, (k) => letterOf(k.word)) : [{ key: null, items: shown }];
+  const sorts: Sort[] = counted ? ['az', 'za', 'most', 'fewest'] : ['az', 'za'];
+
+  return (
+    <section className="space-y-6">
+      <FormHeading>{t.keywords.title}</FormHeading>
+      <SearchRow
+        value={query}
+        onChange={setQuery}
+        label={t.keywords.searchLabel}
+        sort={
+          <Choice
+            title={t.library.sort}
+            icon={ArrowsDownUp}
+            value={shownSort}
+            options={sorts.map((s) => ({ value: s, label: t.keywords.sorts[s] }))}
+            onChange={pickSort}
+          />
+        }
+        filter={<Filters title={t.library.filter} selected={chips.length > 0} groups={filters} />}
+      />
+      {chips.length > 0 && (
+        <div className="flex flex-wrap gap-2">
+          {chips.map((c) => (
+            <InputChip key={c.key} removeLabel={t.library.removeFilter(c.label)} onRemove={c.clear}>
+              {c.label}
+            </InputChip>
+          ))}
+        </div>
+      )}
+      {shown.length ? (
+        groups.map((g) => (
+          <Group key={g.key ?? 'all'} title={g.key ?? undefined}>
+            {g.items.map((k) => (
+              <ListItem
+                key={`${k.word} ${k.href}`}
+                href={k.href}
+                onClick={openAtSeo}
+                headline={k.word}
+                supporting={t.keywords.on(k.title, k.primary)}
+                truncate
+                count={counted && t.keywords.links(linksOf(k))}
+                arrow
+              />
+            ))}
+          </Group>
+        ))
+      ) : (
+        <ul className={listClass}>
+          <EmptyNote item>{all.length ? t.keywords.noMatch : t.keywords.none}</EmptyNote>
+        </ul>
+      )}
+    </section>
+  );
+}