@morphemecms/cms 0.0.0-stage → 0.1.0

package/src/SectionsField.tsx

@@ -0,0 +1,65 @@
+// The sections of a fixed page (a list of blocks, collections.ts) as one text in the editor, like a
+// page: the sections are cards in the text (Ret, Skjul/Vis, arrows, Fjern), the text between them is
+// the owner's own, each heading a section of its own, and "Indsæt blok" puts a section back in.
+// Read and written by sections.mjs; the file keeps its list of sections, so the site is unchanged.
+// With the field's `intro`, the page's introduction is the text at the top (DataForm.tsx).
+import { useContext, useMemo, useRef } from 'react';
+import type { Field } from './schema';
+import { sectionBlocks } from './blocks';
+import { useBlockDialog } from './BlockDialog';
+import MarkdownEditor, { type MarkdownHandle } from './MarkdownEditor';
+import { Fields } from './fields';
+import { introOf, leadsOfField, looksOf, sectionsFromParts, sectionsToMarkdown } from './sections.mjs';
+import { headingLooks, sectionLooks } from '@site/editor';
+
+type Props = {
+  field: Field;
+  value: Record<string, unknown>[];
+  /** The page's introduction, with the field's `intro`. */
+  intro?: string;
+  /** The fixed page: its file and the values of its other fields, for the previews of the sections. */
+  page?: { file: string; values: Record<string, unknown> };
+  /** The blocks not offered under "Indsæt" (turned off, or of an app not installed); those already here stay. */
+  off?: string[];
+  onChange: (value: unknown, intro?: string) => void;
+};
+
+export default function SectionsField({ field, value, intro, page, off = [], onChange }: Props) {
+  // The sections whose text and picture are written above their card.
+  const leads = useMemo(() => leadsOfField(field), [field]);
+  const list = useMemo(() => sectionBlocks(field.blocks!, leads), [field, leads]);
+  const context = useContext(Fields)!;
+  // What "Indsæt" offers: as EntryForm.tsx, the template's blocks without those not offered.
+  const insertable = useMemo(
+    () =>
+      off.length
+        ? { ...field.template, blocks: (field.template?.blocks ?? list.map((b) => b.type)).filter((type) => !off.includes(type)) }
+        : field.template,
+    [field, list, off],
+  );
+  const [ask, dialog] = useBlockDialog(list, { ...context, page }, insertable);
+  const editor = useRef<MarkdownHandle>(null);
+  // The text as the page is opened; after that the editor holds it.
+  const markdown = useMemo(() => sectionsToMarkdown(value, leads, field.intro ? intro : undefined), []);
+  return (
+    <div>
+      <span className="mb-1 block font-medium">{field.label}</span>
+      <MarkdownEditor
+        ref={editor}
+        value={markdown}
+        blocks={ask}
+        addImage={context.pickImage}
+        looks={(items) => looksOf(items, { file: page?.file, leads, intro: !!field.intro, sectionLooks, headingLooks })}
+        sections
+        onChange={() => {
+          const parts = editor.current?.parts();
+          if (!parts) return;
+          if (!field.intro) return onChange(sectionsFromParts(parts, leads));
+          const [text, rest] = introOf(parts);
+          onChange(sectionsFromParts(rest, leads), text);
+        }}
+      />
+      {dialog}
+    </div>
+  );
+}

package/src/SelectionParts.tsx

@@ -0,0 +1,134 @@
+// "Dele" › "UI-komponenter" (BlockParts.tsx), the group "Kontakter, valg og sideark": the theme's switches, radio buttons,
+// sliders, dividers and side sheets (packages/editor/theme/ui/, through @site/editor) as the site draws them, in every
+// kind and state (the sliders also centered, in each size, with an icon and vertical), with made-up texts. The
+// switches, radio buttons and sliders can be tried (a slider's tracks and labels follow it here as on the site);
+// nothing is saved, and the side sheets are only drawn (on the site a modal one opens over the page with sideSheet()).
+// On a phone the standard one is drawn without the page beside it, as there is no room for both.
+import { SiteButton, SiteDivider, SiteRadioButton, SiteRadioGroup, SiteSideSheet, SiteSlider, SiteSwitch } from './themeUi';
+import { Part } from './PartsShown';
+import { Preview } from './ui';
+import { t } from './i18n';
+
+const say = t.parts.screens.selection;
+const dividerKinds = ['full-width', 'inset', 'middle-inset'] as const;
+const sliderSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'] as const;
+
+export default function SelectionParts() {
+  const grid = 'grid gap-6 p-4 sm:grid-cols-2';
+  const sheet = (kind: 'standard' | 'modal') => (
+    <SiteSideSheet
+      kind={kind}
+      headline={say.heading}
+      closeLabel={say.close}
+      actions={
+        <>
+          <SiteButton>{say.apply}</SiteButton>
+          <SiteButton kind="outlined">{say.cancel}</SiteButton>
+        </>
+      }
+    >
+      <p>{say.text}</p>
+    </SiteSideSheet>
+  );
+  return (
+    <>
+      <Part name="Switch" use={say.switch}>
+        <Preview>
+          <div className={grid}>
+            <SiteSwitch label={say.switchLabel} />
+            <SiteSwitch label={say.switchLabel} checked />
+            <SiteSwitch label={say.switchLabel} supporting={say.switchSupporting} icons="both" />
+            <SiteSwitch label={say.switchLabel} supporting={say.switchSupporting} icons="both" checked />
+            <SiteSwitch label={say.switchLabel} icons="selected" checked />
+            <SiteSwitch label={say.switchLabel} checked disabled />
+          </div>
+        </Preview>
+      </Part>
+      <Part name="RadioButton" use={say.radioButton}>
+        <Preview>
+          <div className={grid}>
+            <SiteRadioGroup label={say.groupLabel}>
+              {say.choices.map((c, i) => (
+                <SiteRadioButton
+                  key={c}
+                  name="parts-selection-time"
+                  value={c}
+                  label={c}
+                  supporting={i === 0 ? say.choiceSupporting : undefined}
+                  checked={i === 0}
+                />
+              ))}
+            </SiteRadioGroup>
+            <SiteRadioGroup label={say.groupLabel}>
+              {say.choices.map((c, i) => (
+                <SiteRadioButton key={c} name="parts-selection-disabled" value={c} label={c} checked={i === 1} disabled />
+              ))}
+            </SiteRadioGroup>
+          </div>
+        </Preview>
+      </Part>
+      <Part name="Slider" use={say.slider}>
+        <Preview>
+          <div className="grid gap-8 p-4 sm:grid-cols-2">
+            <SiteSlider label={say.volume} value={40} valueLabel />
+            <SiteSlider label={say.count} max={10} value={6} stops valueLabel="always" />
+            <SiteSlider label={say.price} max={1000} step={50} range={[200, 700]} handleLabels={say.handles} valueLabel="always" />
+            <SiteSlider label={say.volume} value={40} disabled />
+            <SiteSlider label={say.balance} min={-50} max={50} value={20} centered valueLabel />
+            <SiteSlider label={say.balance} min={-50} max={50} step={10} value={-30} centered stops valueLabel="always" />
+          </div>
+          <div className="grid gap-8 p-4 sm:grid-cols-2">
+            {sliderSizes.map((size) => (
+              <SiteSlider key={size} label={say.sliderSizes[size]} size={size} value={60} />
+            ))}
+            {(['medium', 'large', 'xlarge'] as const).map((size) => (
+              <SiteSlider key={size} label={`${say.brightness}: ${say.sliderSizes[size]}`} size={size} value={60} icon="sun" />
+            ))}
+            <SiteSlider label={`${say.brightness}: ${say.sliderSizes.large}`} size="large" value={4} icon="sun" />
+          </div>
+          <div className="flex flex-wrap items-end justify-center gap-10 p-4" role="group" aria-label={say.verticalSliders}>
+            <SiteSlider label={say.volume} orientation="vertical" value={40} valueLabel />
+            <SiteSlider label={say.count} orientation="vertical" max={10} value={6} stops />
+            <SiteSlider label={say.price} orientation="vertical" max={1000} step={50} range={[200, 700]} handleLabels={say.handles} />
+            <SiteSlider label={say.brightness} orientation="vertical" size="medium" value={70} icon="sun" />
+          </div>
+        </Preview>
+      </Part>
+      <Part name="Divider" use={say.divider}>
+        <Preview>
+          <div className="space-y-6 py-4">
+            {dividerKinds.map((k) => (
+              <div key={k} className="space-y-2">
+                <p className="px-4 text-sm text-muted">{say.kinds[k]}</p>
+                <SiteDivider kind={k} />
+              </div>
+            ))}
+            <div className="flex h-16 items-center gap-4 px-4">
+              <span className="text-sm text-muted">{say.kinds.vertical}</span>
+              <SiteDivider vertical />
+              <span className="text-sm text-muted">{say.kinds['middle-inset']}</span>
+              <SiteDivider vertical kind="middle-inset" />
+            </div>
+          </div>
+        </Preview>
+      </Part>
+      <Part name="SideSheet" use={say.sideSheet}>
+        <Preview>
+          <div className="space-y-6">
+            <div className="space-y-2">
+              <p className="px-2 text-sm text-muted">{say.sheetKinds.standard}</p>
+              <div className="flex h-80 overflow-hidden">
+                <p className="hidden min-w-0 flex-1 p-4 text-muted sm:block">{say.page}</p>
+                {sheet('standard')}
+              </div>
+            </div>
+            <div className="space-y-2">
+              <p className="px-2 text-sm text-muted">{say.sheetKinds.modal}</p>
+              <div className="ml-auto h-80 w-full max-w-sm">{sheet('modal')}</div>
+            </div>
+          </div>
+        </Preview>
+      </Part>
+    </>
+  );
+}

package/src/SeoScores.tsx

@@ -0,0 +1,184 @@
+// "SEO-vurdering" under "Søgemaskineoptimering" (#seo/vurdering): every page and blog post with the score of its SEO
+// rating (seo.ts, the same as at the top of "Søgemaskiner" on it) in a ring at the start of its row, and its
+// primary keyword under its name, under "Sider" and "Blogindlæg", the lowest first. Over them, as over the lists, a
+// search by name and keyword, the order (lowest or highest first, A–Å or Å–A, kept in this browser) and the funnel with
+// the filters by rating, by primary keyword and by kind, each picked one as a chip; under the title the average. A tap
+// on the ring opens the page or post at "Søgemaskiner" (openAtSeo), on the rest of the row at its top.
+import { ArrowsDownUp } from '@phosphor-icons/react';
+import { useMemo, useState } from 'react';
+import Screen from './Screen';
+import { Choice, EmptyNote, Filters, Group, InputChip, listClass, ScoreRing, scoreOf, SearchRow, useKept, ListItem } from './ui';
+import type { RepoFile } from './github';
+import { readFields, splitFrontmatter } from './frontmatter.mjs';
+import { fileRating } from './seo';
+import type { Env } from './App';
+import { openAtSeo } from './EntryForm';
+import { collections } from './site';
+import { byText, type Collection, type MarkdownCollection } from './schema';
+import { t } from './i18n';
+
+/** Where it opens, under "Søgemaskineoptimering". */
+export const SEO_SCORES_ROUTE = 'seo/vurdering';
+
+type Sort = 'low' | 'high' | 'az' | 'za';
+const SORTS: Sort[] = ['low', 'high', 'az', 'za'];
+const SORT_KEY = 'editor-sort-seo';
+
+function savedSort(): Sort {
+  try {
+    const s = localStorage.getItem(SORT_KEY);
+    if (SORTS.some((x) => x === s)) return s as Sort;
+  } catch {}
+  return 'low';
+}
+
+type Rated = { path: string; title: string; keyword: string; score: number };
+
+// The filters: by the rating's colour (ScoreRing: green from 90, orange from 50, else red), by whether a primary keyword
+// is filled in, and by kind (the list it is in).
+type Rating = 'good' | 'average' | 'bad';
+const RATINGS: Rating[] = ['good', 'average', 'bad'];
+const ratingOf = (score: number): Rating => (score >= 90 ? 'good' : score >= 50 ? 'average' : 'bad');
+type HasKeyword = 'with' | 'without';
+
+// The pages and posts: the collections of Markdown files with the fields for search engines (EntryForm.tsx), the
+// blog posts last.
+const rated = () => collections.filter(isRated).sort((a, b) => Number(a.id === 'blog') - Number(b.id === 'blog'));
+
+function rate(collection: MarkdownCollection, file: RepoFile, relations: Env['relations']): Rated {
+  const checks = fileRating(file.text, collection.id === 'blog', relations);
+  const d = readFields(splitFrontmatter(file.text).yaml);
+  const title = String(d.title ?? '');
+  return { path: file.path, title: title || file.path, keyword: String(d.keyword ?? '').trim(), score: scoreOf(checks) };
+}
+
+/** Whether a list has the SEO rating: the pages and posts, with the fields for search engines (EntryForm.tsx). */
+export const isRated = (c: Collection): c is MarkdownCollection => c.kind === 'markdown' && c.fields.some((f) => f.name === 'seoTitle');
+
+export default function SeoScores({ files, env }: { files: RepoFile[]; env: Env }) {
+  const [query, setQuery] = useKept('seo-soeg', '');
+  const [sort, setSort] = useState(savedSort);
+  function pickSort(next: Sort) {
+    setSort(next);
+    try {
+      localStorage.setItem(SORT_KEY, next);
+    } catch {}
+  }
+  const groups = useMemo(
+    () =>
+      rated().map((c) => ({
+        collection: c,
+        items: files.filter((f) => f.path.startsWith(`${c.folder}/`) && f.path.endsWith('.md')).map((f) => rate(c, f, env.relations)),
+      })),
+    [files, env.relations],
+  );
+  const all = groups.flatMap((g) => g.items);
+  const average = all.length ? Math.round(all.reduce((sum, r) => sum + r.score, 0) / all.length) : null;
+  const [rating, setRating] = useKept<Rating | ''>('seo-vurdering', '');
+  const [hasKeyword, setHasKeyword] = useKept<HasKeyword | ''>('seo-soegeord', '');
+  const [kind, setKind] = useKept('seo-slags', '');
+  const shownKind = groups.some((g) => g.collection.id === kind) ? kind : '';
+  const kindName = groups.find((g) => g.collection.id === shownKind)?.collection.label ?? '';
+  const filters = [
+    {
+      title: t.seo.ratingFilter,
+      value: rating,
+      options: [{ value: '', label: t.seo.allRatings }, ...RATINGS.map((r) => ({ value: r, label: t.seo.ratings[r] }))],
+      onChange: (v: string) => setRating(v as Rating | ''),
+    },
+    {
+      title: t.seo.keywordFilter,
+      value: hasKeyword,
+      options: [
+        { value: '', label: t.seo.allKeywords },
+        { value: 'with', label: t.seo.keywords.with },
+        { value: 'without', label: t.seo.keywords.without },
+      ],
+      onChange: (v: string) => setHasKeyword(v as HasKeyword | ''),
+    },
+    groups.length > 1 && {
+      title: t.seo.kindFilter,
+      value: shownKind,
+      options: [{ value: '', label: t.seo.allKinds }, ...groups.map((g) => ({ value: g.collection.id, label: g.collection.label }))],
+      onChange: setKind,
+    },
+  ].filter((f) => !!f);
+  // Each filter picked, as a chip that removes it.
+  const chips = [
+    rating && { key: 'rating', label: t.seo.ratings[rating], clear: () => setRating('') },
+    hasKeyword && { key: 'keyword', label: t.seo.keywords[hasKeyword], clear: () => setHasKeyword('') },
+    shownKind && { key: 'kind', label: kindName, clear: () => setKind('') },
+  ].filter((c) => !!c);
+  const words = query.toLowerCase().split(/\s+/).filter(Boolean);
+  const fits = (r: Rated) =>
+    words.every((w) => `${r.title} ${r.keyword}`.toLowerCase().includes(w)) &&
+    (!rating || ratingOf(r.score) === rating) &&
+    (!hasKeyword || !!r.keyword === (hasKeyword === 'with'));
+  const order = (a: Rated, b: Rated) =>
+    sort === 'low'
+      ? a.score - b.score || byText(a.title, b.title)
+      : sort === 'high'
+        ? b.score - a.score || byText(a.title, b.title)
+        : (sort === 'za' ? -1 : 1) * byText(a.title, b.title);
+  const shown = groups
+    .filter((g) => !shownKind || g.collection.id === shownKind)
+    .map((g) => ({ ...g, items: g.items.filter(fits).sort(order) }))
+    .filter((g) => g.items.length);
+
+  return (
+    <Screen
+      title={t.seo.title}
+      wide
+      back={{ href: '#seo', label: t.common.parts.seo }}
+      status={average === null ? undefined : t.seo.average(average)}
+    >
+      <p className="mb-4 text-muted">{t.seo.intro}</p>
+      <SearchRow
+        value={query}
+        onChange={setQuery}
+        label={t.seo.searchLabel}
+        sort={
+          <Choice
+            title={t.library.sort}
+            icon={ArrowsDownUp}
+            value={sort}
+            options={SORTS.map((s) => ({ value: s, label: t.seo.sorts[s] }))}
+            onChange={pickSort}
+          />
+        }
+        filter={<Filters title={t.library.filter} selected={chips.length > 0} groups={filters} />}
+        className="mb-6"
+      />
+      {chips.length > 0 && (
+        <div className="-mt-2 mb-6 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 ? (
+        shown.map((g) => (
+          <Group key={g.collection.id} title={g.collection.label}>
+            {g.items.map((r) => (
+              <ListItem
+                key={r.path}
+                href={`#${r.path}`}
+                leading={<ScoreRing score={r.score} label={t.seo.scoreLabel(r.score)} onClick={openAtSeo} />}
+                headline={r.title}
+                supporting={r.keyword || t.seo.noKeyword}
+                truncate
+                arrow
+              />
+            ))}
+          </Group>
+        ))
+      ) : (
+        <ul className={listClass}>
+          <EmptyNote item>{t.seo.none}</EmptyNote>
+        </ul>
+      )}
+    </Screen>
+  );
+}

package/src/Sheet.tsx

@@ -0,0 +1,35 @@
+// What the lists with headings between their entries share (Filer, Media.tsx; the lists,
+// Library.tsx; Apps, AppList.tsx): the entries under their headings, and the names of the headings, a
+// month or a letter. The sheet from the bottom and its parts are in ui.tsx.
+import { locale, t } from './i18n';
+
+/** How many entries a list has before it gets headings between them; fewer are one group. */
+export const HEADINGS_FROM = 7;
+
+/** The entries, in their order, under a heading each time their key (a letter, a month) changes; with
+ * fewer than HEADINGS_FROM, one group without a heading (key null). */
+export function headed<T>(items: T[], keyOf: (item: T) => string): { key: string | null; items: T[] }[] {
+  if (items.length < HEADINGS_FROM) return items.length ? [{ key: null, items }] : [];
+  return items.reduce<{ key: string | null; items: T[] }[]>((all, item) => {
+    const key = keyOf(item);
+    if (all.at(-1)?.key === key) all.at(-1)!.items.push(item);
+    else all.push({ key, items: [item] });
+    return all;
+  }, []);
+}
+
+/** The first letter of a name, for the headings when sorted by name; the names that start with a digit together. */
+export const letterOf = (name: string) => {
+  // Its first letter or digit (not a quotation mark before it).
+  const first = /[\p{L}\p{N}]/u.exec(name)?.[0].toUpperCase() ?? '';
+  return /\d/.test(first) ? '0–9' : first;
+};
+
+/** A month ("2025-06") as "Juni 2025" (in the editor's language), or a year alone. */
+export function dateName(key: string) {
+  if (!key) return t.common.noDate;
+  const [year, month] = key.split('-');
+  if (!month) return year;
+  const name = new Date(Number(year), Number(month) - 1).toLocaleDateString(locale, { month: 'long', year: 'numeric' });
+  return name[0].toLocaleUpperCase(locale) + name.slice(1);
+}