@morphemecms/cms 0.7.0 → 0.8.0

package/src/EntryForm.tsx

@@ -4,8 +4,8 @@
 // gives the same page). A new address (Adresse) moves the page or post, with a redirect from the
 // old one (addresses.ts). The Filer files the page newly refers to get the page's tags in the same commit (autoTags.mjs).
 // An earlier version (Versions.tsx) is opened as changes that are not saved,
-// at the address the page or post has now.
-// The form's sections are listed in a pane (large and wider) or a side sheet (below): SectionList in ui.tsx.
+// at the address the page or post has now. Its preview draft says whether it is a post (post, for the lead).
+// The form's sections are listed as "on this page" in a card at the end of the form (large and wider only): SectionList in ui.tsx.
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { slugify, slugOf, type Field, type MarkdownCollection } from './schema';
@@ -34,20 +34,7 @@ import { isOver } from '../lib/notice.mjs';
 import { splitPicture } from '../lib/crop.mjs';
 import { asStandardTemplate, blockProblems, notOffered, siteBlocks } from './registry';
 import { FieldInput, Fields, useWrongField, WrongField, type FieldContext } from './fields';
-import { Article, ClockCounterClockwise, Eye, MagnifyingGlass, ShareNetwork, SlidersHorizontal } from '@phosphor-icons/react';
-import {
-  CheckList,
-  FoldSection,
-  FormColumns,
-  type NavigationItem,
-  SectionList,
-  SectionPane,
-  SectionSheet,
-  SectionsButton,
-  SharePreview,
-  useAtLeast,
-  useInView,
-} from './ui';
+import { CheckList, FoldSection, FormColumns, type NavigationItem, SectionList, SectionPane, SharePreview, useInView } from './ui';
 import FormFrame, { savedStatus, useSavedAt } from './FormFrame';
 import { usePagePreview } from './pagePreview';
 import { savedOn, VersionList, VersionNotice, WithVersions, type ShownVersion } from './Versions';
@@ -67,8 +54,8 @@ const SHARE = SHARE_FIELDS;
 // The sections of the form, under each other on one page, each folding in and out under its heading (FoldSection in
 // ui.tsx): the text with the title and heading (open from the start), the status, the other fields, those for search
 // engines, those for social media, and the earlier versions (folded from the start, so the page is short; nothing is remembered till
-// the next time). Its list (on large and wider screens in a pane at the end of the form, narrower in a side sheet from the
-// button at the right of the top bar) opens one and scrolls to it, and marks the one in view. A field that keeps the form from being
+// the next time). Its list (an "on this page" card at the end of the form, on large and wider screens only) opens one and
+// scrolls to it, and marks the one in view. A field that keeps the form from being
 // saved has its section opened and is scrolled to (FieldInput in fields.tsx).
 type Section = 'content' | 'status' | 'other' | 'seo' | 'share' | 'versions';
 const sectionOf = (path: string): Section => {
@@ -226,19 +213,16 @@ function Form({
     (text) => notify({ text, error: true }),
     (path) => unfold(sectionOf(path)),
   );
-  // On large and wider screens: the sections pane at the end of the form, until its button puts it away; narrower, the
-  // sections are in a side sheet, opened by the same button.
-  const large = useAtLeast('large');
-  const [pane, setPane] = useState(true);
-  const [sheet, setSheet] = useState(false);
+  // The form's name, in the top bar and over the sections list (the "on this page" card, on large and wider screens).
+  const formTitle = isNew ? collection.create! : String(initial.title || collection.singular);
   const has = (id: Section) => collection.fields.some(inSection(id));
   const sections: NavigationItem[] = [
-    { id: 'content', label: t.forms.sections.content, icon: Article },
-    ...(has('status') ? [{ id: 'status', label: t.forms.sections.status, icon: Eye }] : []),
-    ...(has('other') ? [{ id: 'other', label: t.forms.otherFields, icon: SlidersHorizontal }] : []),
-    ...(has('seo') ? [{ id: 'seo', label: t.forms.seo, icon: MagnifyingGlass }] : []),
-    ...(has('share') ? [{ id: 'share', label: t.forms.share, icon: ShareNetwork }] : []),
-    ...(isNew ? [] : [{ id: 'versions', label: t.history.versions, icon: ClockCounterClockwise }]),
+    { id: 'content', label: t.forms.sections.content },
+    ...(has('status') ? [{ id: 'status', label: t.forms.sections.status }] : []),
+    ...(has('other') ? [{ id: 'other', label: t.forms.otherFields }] : []),
+    ...(has('seo') ? [{ id: 'seo', label: t.forms.seo }] : []),
+    ...(has('share') ? [{ id: 'share', label: t.forms.share }] : []),
+    ...(isNew ? [] : [{ id: 'versions', label: t.history.versions }]),
   ];
   const shows = (id: Section) => sections.some((s) => s.id === id);
   // The section in view, marked in the sections list: while the page scrolls, the last one whose top is above a third of the
@@ -291,8 +275,7 @@ function Form({
       cancelAnimationFrame(frame);
     };
   }, []);
-  // Opens a section and scrolls to it (or to `box` in it: the text), after the side sheet below large has been told to close (the page does
-  // not scroll while a dialog is open). It is opened at once (flushSync), so it is there to scroll to.
+  // Opens a section and scrolls to it (or to `box` in it: the text). It is opened at once (flushSync), so it is there to scroll to.
   const textBox = useRef<HTMLDivElement>(null);
   const goTo = (id: Section, box?: HTMLElement | null) => {
     if (!open.has(id)) flushSync(() => unfold(id));
@@ -644,7 +627,9 @@ function Form({
         shell: isNew || (relaid && others.length) ? others : url,
         heading: h1?.heading ?? (changes('title', 'heading') ? String(values.heading || named().title) : undefined),
         headingHtml: h1?.html,
-        // A post's picture at the top (a page has its pictures in its text).
+        // A post has a picture field (a page has its pictures in its text); the preview splits only a post's lead.
+        post: collection.fields.some((f) => f.name === 'image'),
+        // A post's picture at the top.
         image:
           collection.fields.some((f) => f.name === 'image') && changes('image', 'imageAlt', 'imageDecorative')
             ? values.image
@@ -673,17 +658,10 @@ function Form({
     <Fields.Provider value={fields}>
       <WrongField.Provider value={wrongField.field}>
         <FormFrame
-          title={isNew ? collection.create! : String(initial.title || collection.singular)}
+          title={formTitle}
           back={{ href: `#liste/${collection.id}`, label: collection.label }}
           status={savedStatus({ savedAt, saving, deleting, isNew })}
           view={isNew ? undefined : url}
-          drawer={
-            <SectionsButton
-              label={t.forms.sections.title}
-              open={large ? pane : sheet}
-              onClick={() => (large ? setPane(!pane) : setSheet(true))}
-            />
-          }
           dirty={dirty}
           saving={saving || deleting}
           deleting={deleting}
@@ -757,28 +735,13 @@ function Form({
               </>
             }
             pane={
-              pane ? (
-                <SectionPane title={t.forms.sections.title} open>
-                  <SectionList title={t.forms.sections.title} items={sections} value={section} onChange={pick} />
-                </SectionPane>
-              ) : undefined
+              <SectionPane caption={t.forms.sections.title} title={formTitle}>
+                <SectionList title={t.forms.sections.title} items={sections} value={section} onChange={pick} />
+              </SectionPane>
             }
           />
         </FormFrame>
         {blockDialog}
-        {!large && (
-          <SectionSheet title={t.forms.sections.title} open={sheet} onClose={() => setSheet(false)}>
-            <SectionList
-              title={t.forms.sections.title}
-              items={sections}
-              value={section}
-              onChange={(id) => {
-                setSheet(false);
-                pick(id);
-              }}
-            />
-          </SectionSheet>
-        )}
         {picker}
         {previewSheet}
       </WrongField.Provider>

package/src/FormFrame.tsx

@@ -1,7 +1,7 @@
 // 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.
+// of the screen with "Gem" (across the bar on a phone, at its end from medium), 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).
@@ -32,7 +32,7 @@ type Props<T extends string> = {
   view?: string;
   /** More in the top bar, before the link to the site. */
   actions?: ReactNode;
-  /** The button at the end of the top bar, after the account (a form's SectionsButton in ui.tsx). */
+  /** The button at the end of the top bar, after the account. */
   drawer?: ReactNode;
   /** The form's tabs, in the top bar (Screen). */
   tabs?: TabChoice<T>;
@@ -206,8 +206,8 @@ export default function FormFrame<T extends string>({
       {(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">
           <div className="mx-auto max-w-3xl px-4 py-3 medium:px-6">
-            {/* "Forhåndsvis" beside "Gem". */}
-            <div className={onPreview ? 'grid grid-cols-[auto_1fr] gap-2' : ''}>
+            {/* "Forhåndsvis" beside "Gem": across the bar on a phone, at its end from medium. */}
+            <div className={['gap-2 medium:flex medium:justify-end', onPreview && 'grid grid-cols-[auto_1fr]'].filter(Boolean).join(' ')}>
               {onPreview && (
                 <Button kind="outlined" icon={Binoculars} aria-haspopup="dialog" onClick={onPreview}>
                   {t.preview.button}

package/src/Parts.tsx

@@ -7,9 +7,6 @@
 import { useMemo, useRef, useState } from 'react';
 import {
   AppWindow,
-  Article,
-  Eye,
-  SlidersHorizontal,
   Gear,
   ArrowDown,
   ArrowsDownUp,
@@ -97,8 +94,6 @@ import {
   MenuRow,
   SectionList,
   SectionPane,
-  SectionSheet,
-  SectionsButton,
 } from './ui';
 import { FieldList, Fields, useWrongField, WrongField, type FieldContext } from './fields';
 import { newValue, problemAt } from './check';
@@ -146,12 +141,11 @@ export default function Parts({ env }: { env: Env }) {
   const [picture, setPicture] = useState(examplePicture);
   const [folded, setFolded] = useState<number | null>(0);
   const [sectionOpen, setSectionOpen] = useState<number | null>(0);
-  const [sectionsSheet, setSectionsSheet] = useState(false);
   const [sectionPicked, setSectionPicked] = useState('content');
   const sectionItems = [
-    { id: 'content', label: t.forms.sections.content, icon: Article },
-    { id: 'status', label: t.forms.sections.status, icon: Eye, badge: 2 },
-    { id: 'other', label: t.forms.otherFields, icon: SlidersHorizontal },
+    { id: 'content', label: t.forms.sections.content },
+    { id: 'status', label: t.forms.sections.status, badge: 2 },
+    { id: 'other', label: t.forms.otherFields },
   ];
   const [tags, setTags] = useState(['a', 'b']);
   const dialog = useRef<HTMLDialogElement>(null);
@@ -707,28 +701,12 @@ export default function Parts({ env }: { env: Env }) {
               </div>
             </Part>
 
-            <Part name="SectionList, SectionPane, SectionSheet, SectionsButton" use={use.sectionList}>
-              <div className="space-y-4">
-                <div className={row}>
-                  <SectionsButton label={t.forms.sections.title} open={sectionsSheet} onClick={() => setSectionsSheet(true)} />
-                </div>
-                <div className="max-w-sm">
-                  <SectionPane title={t.forms.sections.title} open>
-                    <SectionList title={t.forms.sections.title} items={sectionItems} value={sectionPicked} onChange={setSectionPicked} />
-                  </SectionPane>
-                </div>
+            <Part name="SectionList, SectionPane" use={use.sectionList}>
+              <div className="max-w-xs">
+                <SectionPane caption={t.forms.sections.title} title={examples.pages[0]}>
+                  <SectionList title={t.forms.sections.title} items={sectionItems} value={sectionPicked} onChange={setSectionPicked} />
+                </SectionPane>
               </div>
-              <SectionSheet title={t.forms.sections.title} open={sectionsSheet} onClose={() => setSectionsSheet(false)}>
-                <SectionList
-                  title={t.forms.sections.title}
-                  items={sectionItems}
-                  value={sectionPicked}
-                  onChange={(id) => {
-                    setSectionPicked(id);
-                    setSectionsSheet(false);
-                  }}
-                />
-              </SectionSheet>
             </Part>
 
             <Part name="SharePreview" use={use.sharePreview}>

package/src/Screen.tsx

@@ -8,7 +8,8 @@
 // scrolling and keeps clear of a phone's notch. A screen's tabs (`tabs`) are the bottom of the bar, under the title, as wide
 // as the content, and stay with it. The back arrow goes to the screen above, back in the history when that is the screen
 // before (nav.ts up). The content is as wide as a form reads well, or wider for lists and the grid of files (`wide`) and for
-// a form with its fields beside the text (`panel`).
+// a form with its fields beside the text (`panel`). The column (editor.css .editor-column) stands centred on the window,
+// off-centre only as far as the panels beside it require.
 // Under the content of every screen is the editor's footer (EditorFooter.tsx).
 import { useId, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
@@ -30,7 +31,7 @@ export type Back = { href: string; label: string; guard?: (go: () => void) => vo
 // `status`: more about the screen, e.g. when it was last saved: under the title, on a computer after it.
 // `wide`: the content is wider on a computer (lists, the files); `panel`: a form with its other fields
 // beside the text on a wide computer screen (FormColumns in ui.tsx). `drawer`: a button at the end of the
-// bar, after the account (a form's SectionsButton). `home`: the start screen,
+// bar, after the account. `home`: the start screen,
 // with the account on a phone too. `tabs`: the screen's tabs, in the bar, with the open one's content.
 type Props<T extends string> = {
   title: string;
@@ -93,7 +94,13 @@ export default function Screen<T extends string>({
   const id = useId();
   const menu = useMenuOpen();
   const { menuButtonInTopBar } = useMenuLayout();
-  const width = wide ? 'max-w-3xl medium:max-w-5xl' : panel ? 'max-w-3xl large:max-w-6xl' : 'max-w-3xl';
+  // The column's widest width (--column-width: 48rem; 64rem from medium for `wide`, 72rem from large for `panel`); editor.css
+  // (.editor-column) keeps it centred on the window.
+  const width = wide
+    ? 'editor-column [--column-width:48rem] medium:[--column-width:64rem]'
+    : panel
+      ? 'editor-column [--column-width:48rem] large:[--column-width:72rem]'
+      : 'editor-column [--column-width:48rem]';
   // A link out of the screen, through `guard`: the back arrow goes up (nav.ts), the other links as links.
   const leave = (go?: () => void) => (e: React.MouseEvent<HTMLAnchorElement>) => {
     if (!go && !back?.guard) return;
@@ -145,7 +152,7 @@ export default function Screen<T extends string>({
       </div>
       {tabs && (
         <div className="editor-bar-tabs">
-          <div className={`mx-auto medium:px-6 ${width}`}>
+          <div className={`medium:px-6 ${width}`}>
             <TabRow id={id} {...tabs} />
           </div>
         </div>
@@ -155,7 +162,7 @@ export default function Screen<T extends string>({
   return (
     <div className="min-h-dvh">
       {slot ? createPortal(bar, slot) : bar}
-      <main className={`editor-screen mx-auto px-4 pt-6 pb-[calc(6rem+env(safe-area-inset-bottom))] medium:px-6 medium:pt-8 ${width}`}>
+      <main className={`editor-screen px-4 pt-6 pb-[calc(6rem+env(safe-area-inset-bottom))] medium:px-6 medium:pt-8 ${width}`}>
         {/* At expanded and wider: the way here, the title and the status, under the bar. */}
         <div className="mb-6 hidden min-w-0 items-center gap-x-2 expanded:flex">
           {crumbs.length > 0 && (

package/src/editor.css

@@ -24,9 +24,10 @@
   --editor-section-gap: 2rem;
   --editor-section-rhythm: 0.625em;
 
-  /* A form's sections pane (SectionPane in ui.tsx): Material 3's 412dp pane against the window's end edge
-     (m3.material.io/foundations/layout/breakpoints/large-extra-large). */
-  --section-pane-width: 25.75rem;
+  /* A form's "on this page" area (SectionPane in ui.tsx) against the window's end edge: its width, the card in it
+     stands --section-pane-gap in from the end edge and from under the top bar. */
+  --section-pane-width: 16rem;
+  --section-pane-gap: 2rem;
 }
 
 /* In dark mode the score's number in the light colours, which are read on the dark. */
@@ -372,9 +373,73 @@
   }
 }
 
-/* The sections pane (FormColumns' `pane` in ui.tsx) stands against the window's end edge on large and wider: the content
-   keeps clear of it, so the form is centred to its left, and the save bar ends where the pane begins. */
+/* The type of the "on this page" card (SectionPane and SectionList in ui.tsx), from the theme's type roles: the small
+   caption, the form's name under it, and a section's name (the one in view in medium weight). */
+.section-pane-caption {
+  font-size: var(--type-label-small-size);
+  line-height: var(--type-label-small-line-height);
+  font-weight: var(--type-label-small-weight);
+  letter-spacing: var(--type-label-small-tracking);
+}
+.section-pane-title {
+  font-size: var(--type-headline-small-size);
+  line-height: var(--type-headline-small-line-height);
+  font-weight: var(--type-headline-small-weight);
+  letter-spacing: var(--type-headline-small-tracking);
+}
+.section-list-item {
+  font-size: var(--type-body-medium-size);
+  line-height: var(--type-body-medium-line-height);
+  font-weight: var(--type-body-medium-weight);
+  letter-spacing: var(--type-body-medium-tracking);
+}
+.section-list-item[aria-current='location'] {
+  font-weight: var(--type-label-medium-weight);
+}
+
+/* The content column (.editor-column: Screen.tsx's tabs row and its main) stands centred on the window, not in the space
+   beside the panels. --column-start and --column-end are the widths of the panels beside the content: the navigation
+   rail from medium, the standard drawer instead of it from expanded while it is open (:root[data-sidebar='open']; the
+   modal drawer below expanded is over the content, so the rail counts), and the "on this page" area at the end from large
+   (.editor-section-pane). The column keeps its width (--column-width, set by Screen.tsx) and moves off the middle only as
+   far as it must to stay clear of the panels: its start margin is the middle of the window less the start panel, but
+   not less than nothing and not more than the space left between the panels less the column. Only when that space is
+   smaller than the column does it get narrower. (Measured against the window's width, 100vw, scrollbar and all.) Below
+   medium nothing stands beside the content and the column is centred by auto margins. */
+:root {
+  --column-start: 0px;
+  --column-end: 0px;
+}
+.editor-column {
+  max-width: var(--column-width);
+  margin-inline: auto;
+}
+@media (width >= theme(--breakpoint-medium)) {
+  :root {
+    --column-start: var(--navigation-rail-width, 5.5rem);
+  }
+  .editor-column {
+    margin-inline-start: clamp(
+      0px,
+      (100vw - var(--column-width)) / 2 - var(--column-start),
+      100vw - var(--column-start) - var(--column-end) - var(--column-width)
+    );
+    margin-inline-end: auto;
+  }
+}
+@media (width >= theme(--breakpoint-expanded)) {
+  :root[data-sidebar='open'] {
+    --column-start: var(--navigation-drawer-width, 22.5rem);
+  }
+}
+
+/* The "on this page" area (FormColumns' `pane` in ui.tsx) stands against the window's end edge on large and wider: the
+   content keeps clear of it (its end padding; --column-end tells the column, so it stays centred on the window while
+   there is room), and the save bar ends where the area begins. */
 @media (width >= theme(--breakpoint-large)) {
+  :root:has(.editor-section-pane) {
+    --column-end: var(--section-pane-width);
+  }
   .editor-content:has(.editor-section-pane) {
     padding-inline-end: var(--section-pane-width);
   }

package/src/i18n/da-DK/parts.ts

@@ -60,7 +60,7 @@ export const parts: Messages['parts'] = {
     editorFooter:
       'Linjen nederst på hver skærm, under indholdet, med et link til licenserne for det, hjemmesiden og editoren er lavet med.',
     sectionList:
-      'Afsnittene i en lang formular som en liste, hvor det afsnit, der ses, er markeret. På en stor skærm står den i et panel for enden af formularen, som knappen yderst i topbjælken viser og skjuler; på en mindre skærm åbner knappen den i et sidepanel, der lukker, når man vælger et afsnit.',
+      'Afsnittene i en lang formular som en »på denne side«-liste på et kort: almindelig tekst, det afsnit, der ses, i den primære farve, og formularens navn over. Den bliver i billedet for enden af formularen på en stor skærm; på en mindre skærm vises den ikke.',
   },
   /** Over the parts: the search, and the groups to show one of (as Material 3 sorts its components). */
   filter: {

package/src/i18n/da-DK/theme.ts

@@ -21,6 +21,10 @@ export const theme: Messages['theme'] = {
   seeAll: 'Se alle',
   blog: 'Blog',
   relatedPosts: 'Relaterede indlæg',
+  share: 'Del',
+  shareOn: (network: string) => `Del på ${network}`,
+  copyLink: 'Kopiér link',
+  linkCopied: 'Linket er kopieret',
   readingTime: (minutes) => `${minutes} min. læsetid`,
   postsAbout: (count, tag) => `${count} indlæg om ${tag}`,
   notFound: 'Siden findes ikke',

package/src/i18n/en-US/parts.ts

@@ -60,7 +60,7 @@ export const parts = {
     editorFooter:
       'The line at the bottom of every screen, under the content, with a link to the licenses of what the website and the editor are made with.',
     sectionList:
-      'The sections of a long form as a list, with the one in view selected. On a large screen it is in a pane at the end of the form, shown and hidden by the button at the end of the top bar; on a smaller screen the button opens it in a side sheet, which closes when you choose a section.',
+      'The sections of a long form as an "on this page" list on a card: plain text, the section in view in the accent color, and the form’s name over it. It stays in view at the end of the form on a large screen; on a smaller screen it is not shown.',
   },
   /** Over the parts: the search, and the groups to show one of (as Material 3 sorts its components). */
   filter: {

package/src/i18n/en-US/theme.ts

@@ -21,6 +21,10 @@ export const theme = {
   seeAll: 'See all',
   blog: 'Blog',
   relatedPosts: 'Related posts',
+  share: 'Share',
+  shareOn: (network: string) => `Share on ${network}`,
+  copyLink: 'Copy link',
+  linkCopied: 'Link copied',
   readingTime: (minutes: number) => `${minutes} min read`,
   postsAbout: (count: number, tag: string) => `${count} ${count === 1 ? 'post' : 'posts'} about ${tag}`,
   notFound: 'Page not found',

package/src/icon.tsx

@@ -37,7 +37,7 @@ function useMaterialLoaded(wanted: boolean) {
 
 const PHOSPHOR = '/node_modules/@phosphor-icons/core/assets/';
 const regular = import.meta.glob<string>(
-  '/node_modules/@phosphor-icons/core/assets/regular/{arrow-left,arrow-right,arrow-square-out,arrow-up-right,bank,bicycle,book-open,book-open-text,bus,calendar-blank,car,caret-down,caret-left,caret-right,caret-up,certificate,chats,check,clock,coffee,cookie,copy,device-mobile,door-open,download-simple,envelope-simple,eye,eye-slash,flower-lotus,graduation-cap,hand-heart,handshake,heart,house,info,keyboard,leaf,lifebuoy,lightbulb,list,magnifying-glass,map-pin,map-trifold,medal,minus,moon,pencil-simple,phone,question,sun,ticket,train,trash,user,users,users-three,video-camera,warning-circle,wheelchair,x}.svg',
+  '/node_modules/@phosphor-icons/core/assets/regular/{arrow-left,arrow-right,arrow-square-out,arrow-up-right,bank,bicycle,book-open,book-open-text,bus,calendar-blank,car,caret-down,caret-left,caret-right,caret-up,certificate,chats,check,clock,coffee,cookie,copy,device-mobile,door-open,download-simple,envelope-simple,eye,eye-slash,facebook-logo,flower-lotus,graduation-cap,hand-heart,handshake,heart,house,info,keyboard,leaf,lifebuoy,lightbulb,link-simple,linkedin-logo,list,magnifying-glass,map-pin,map-trifold,medal,minus,moon,pencil-simple,phone,pinterest-logo,question,sun,ticket,train,trash,user,users,users-three,video-camera,warning-circle,wheelchair,x,x-logo}.svg',
   { query: '?raw', import: 'default', eager: true },
 );
 // The filled ones ("Video": its play button; the navigation drawer's active item).

package/src/materialIcons.ts

@@ -1,8 +1,6 @@
 // All of Material Symbols (Outlined, regular and filled) as text, by their file, for the icons icon.tsx draws that are not on
-// its list: one lazy chunk, loaded in the browser the first time one is drawn (the server render has them from
-// virtual:material-symbols-ssr instead, packages/editor/site/materialSymbols.mjs). Imported by icon.tsx only dynamically.
-export const materialIcons = import.meta.glob<string>('/node_modules/@material-symbols/svg-400/outlined/*.svg', {
-  query: '?raw',
-  import: 'default',
-  eager: true,
-});
+// its list: one lazy chunk, loaded in the browser the first time one is drawn. The set comes from virtual:material-symbols
+// (packages/editor/site/materialSymbols.mjs), one module read file by file. Imported by icon.tsx only dynamically.
+import all from 'virtual:material-symbols';
+
+export const materialIcons: Record<string, string> = all;

package/src/pagePreview.tsx

@@ -15,6 +15,9 @@
 // page of another one. As on the site but for this: a changed text has the pictures themselves (not
 // the sizes the build makes), its words are not yet links to other pages (packages/editor/site/autolinks.mjs), and
 // a video written in it as HTML is the video.
+//
+// A post's text starts with its lead, a paragraph drawn larger and before the picture (data-editor="lead",
+// theme/layouts/PostLayout.astro; lib/lead.mjs). The preview splits the text the same way, for a post only (postLead.mjs).
 import { useRef, useState, type ReactNode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { flushSync } from 'react-dom';
@@ -23,6 +26,7 @@ import { sectionClass, sectionsOf } from '../lib/text-sections.mjs';
 import { BREAKPOINTS, breakpointOf, type Breakpoint } from '../lib/breakpoints.mjs';
 import { processor } from '../lib/markdown';
 import { splitPicture } from '../lib/crop.mjs';
+import { isPostPage, leadFill } from './postLead.mjs';
 import { preview as drawBlock, siteBlocks } from './registry';
 import { shownAt } from './images';
 import { pageH1 } from './sections.mjs';
@@ -40,6 +44,8 @@ export type PageDraft = {
   headingHtml?: string;
   /** The picture at the top (a blog post's); null: none. */
   image?: { src: string; alt: string } | null;
+  /** A blog post (not a page): only its text starts with a lead. */
+  post?: boolean;
   /** The text, in Markdown with its blocks. */
   body?: string;
   /** What the blocks are drawn with. */
@@ -136,8 +142,22 @@ export async function pageDocument(draft: PageDraft): Promise<string> {
       end.innerHTML = blockHtml(block.type, block.props, draft.data);
     } else end?.remove();
     const text = doc.querySelector('[data-editor="text"]')!;
+    // A post's lead goes before its picture (or before its text when it has none), as in PostLayout.astro.
+    const { lead, rest } = leadFill(html, isPostPage(draft));
+    let leadBox = doc.querySelector('[data-editor="lead"]');
+    if (!lead) leadBox?.remove();
+    else {
+      if (!leadBox) {
+        // The text's own tag and class plus post-lead, as the layout does (a theme may replace the layout).
+        leadBox = doc.createElement(text.tagName);
+        leadBox.setAttribute('data-editor', 'lead');
+        leadBox.className = `${text.className} post-lead`;
+        (doc.querySelector('[data-editor="image"]') ?? text).before(leadBox);
+      }
+      leadBox.innerHTML = lead;
+    }
     const types = siteBlocks.map((b) => b.type);
-    text.innerHTML = sectionsOf(html)
+    text.innerHTML = sectionsOf(rest)
       .map((run) => {
         const inner = splitBlocks(run.html, types)
           .map((p) => ('html' in p ? p.html : blockHtml(p.type, p.props, draft.data)))

package/src/postLead.d.mts

@@ -0,0 +1,7 @@
+export function isPostPage(draft: {
+    post?: boolean;
+}): boolean;
+export function leadFill(html: string, isPost: boolean): {
+    lead: string;
+    rest: string;
+};

package/src/postLead.mjs

@@ -0,0 +1,9 @@
+// What the editor's preview puts in a post's lead and in its text: a post's text is split with splitLead, a page's never is.
+// Exposes isPostPage (reads draft.post from pagePreview.tsx) and leadFill. Depends on lib/lead.mjs.
+import { splitLead } from '../lib/lead.mjs';
+
+/** @param {{ post?: boolean }} draft */
+export const isPostPage = (draft) => draft.post === true;
+
+/** @param {string} html the text as HTML @param {boolean} isPost @returns {{ lead: string, rest: string }} */
+export const leadFill = (html, isPost) => (isPost ? splitLead(html) : { lead: '', rest: html });

package/src/postLead.test.mjs

@@ -0,0 +1,28 @@
+// Tests for isPostPage (draft.post) and leadFill (postLead.mjs).
+// Run with: node --test src/postLead.test.mjs
+import { strict as assert } from 'node:assert';
+import { test } from 'node:test';
+import { isPostPage, leadFill } from './postLead.mjs';
+
+test('a post with a paragraph first has a lead', () => {
+  assert.deepEqual(leadFill('<p>Hi</p><h2>A</h2>', true), { lead: '<p>Hi</p>', rest: '<h2>A</h2>' });
+});
+
+test('a post with a heading first has no lead', () => {
+  assert.deepEqual(leadFill('<h2>A</h2><p>Hi</p>', true), { lead: '', rest: '<h2>A</h2><p>Hi</p>' });
+});
+
+test('a page with a paragraph first stays unsplit', () => {
+  assert.deepEqual(leadFill('<p>Hi</p><h2>A</h2>', false), { lead: '', rest: '<p>Hi</p><h2>A</h2>' });
+});
+
+test('a post without a picture, text starting with a paragraph, has a lead', () => {
+  const isPost = isPostPage({ post: true });
+  assert.deepEqual(leadFill('<p>Hi</p>', isPost), { lead: '<p>Hi</p>', rest: '' });
+});
+
+test('only a draft marked post is a post', () => {
+  assert.equal(isPostPage({ post: true }), true);
+  assert.equal(isPostPage({ post: false }), false);
+  assert.equal(isPostPage({}), false);
+});