@morphemecms/cms 0.2.0 → 0.3.0

package/src/standard/Block.astro

@@ -11,9 +11,14 @@ interface Props {
   props?: Record<string, unknown>;
   /** Its shared texts, when the block takes them as RichText.astro gives them (blockTexts). */
   texts?: Record<string, unknown>;
+  /** The page's address, and whether it is a new version, for a block that needs them (PageLayout.astro's column). */
+  path?: string;
+  preview?: boolean;
+  /** The page's text as HTML, for a block drawn beside it. */
+  html?: string;
 }
-const { type, props = {}, texts } = Astro.props;
+const { type, props = {}, texts, path, preview, html } = Astro.props;
 const Site = blockSites[type];
 ---
 
-{Site && <Site type={type} props={props} texts={texts} />}
+{Site && <Site type={type} props={props} path={path} preview={preview} texts={texts} html={html} />}

package/src/standard/BlockSite.astro

@@ -7,10 +7,10 @@ import type { SiteProps } from '../schema';
 import { blockLoads, blockViews } from './views';
 
 type Props = SiteProps & { type: string };
-const { type, props, index, path, preview, texts } = Astro.props;
+const { type, props, index, path, preview, texts, html } = Astro.props;
 const contract = blockLoads[type];
 const View = blockViews[type];
-const view = contract && View ? await contract.load(props ?? {}, { texts: texts ?? {}, index, path, preview }) : null;
+const view = contract && View ? await contract.load(props ?? {}, { texts: texts ?? {}, index, path, preview, html }) : null;
 const after = view === null ? undefined : contract.after?.(view);
 ---
 

package/src/standard/accordion/lead.ts

@@ -0,0 +1,4 @@
+// The front page lead of the "accordion" block: the text above its card. Exposes lead; type-only dependency on ../../schema.
+import type { Lead } from '../../schema';
+
+export const lead: Lead = { heading: 'heading', body: 'intro' };

package/src/standard/cards/lead.ts

@@ -0,0 +1,4 @@
+// The front page lead of the "cards" block: the text above its card. Exposes lead; type-only dependency on ../../schema.
+import type { Lead } from '../../schema';
+
+export const lead: Lead = { heading: 'heading' };

package/src/standard/frontLeads.ts

@@ -0,0 +1,12 @@
+// The text above a block's card that is the block's own on the front page, from each block's lead.ts (the standard
+// blocks' and the apps'). Exposes frontLeads (re-exported by defaults/standardPages.ts); depends on Vite's import.meta.glob.
+import type { Lead } from '../schema';
+import { leadsOf } from './leads.mjs';
+
+type Found = Record<string, { lead: Lead }>;
+
+/** The text above a block's card that is the block's own on the front page: its heading, text and picture (the top: the "Banner"'s text up to its "Knapper" block). */
+export const frontLeads: Record<string, Lead> = leadsOf({
+  ...import.meta.glob<{ lead: Lead }>('./*/lead.ts', { eager: true }),
+  ...(import.meta.glob<{ lead: Lead }>('/src/apps/*/blocks/*/lead.ts', { eager: true }) as Found),
+});

package/src/standard/hero/index.tsx

@@ -3,7 +3,7 @@
 // page's H1), the first paragraph the subtitle, the others the introduction, and the text after the buttons is under
 // them, a quote ("> …") in it too (fields.ts); the picture beside the text or behind it (`placement`), across the whole
 // width of the window or as wide as the text (`width`); at the top of a page or anywhere in its text. At the top of the
-// front page its text up to the buttons is written as the text above its card (`frontLeads` in packages/editor/defaults/standardPages.ts,
+// front page its text up to the buttons is written as the text above its card (`lead.ts` in this folder,
 // sections.mjs). How it looks is the theme's
 // (packages/editor/theme/blocks/hero/View.tsx; what it shows: view.ts, and load.ts on the site).
 import { ArrowsInLineHorizontal, ArrowsOutLineHorizontal, Columns, ImageSquare, Sparkle } from '@phosphor-icons/react';

package/src/standard/hero/lead.ts

@@ -0,0 +1,4 @@
+// The front page lead of the "hero" block: the text above its card. Exposes lead; type-only dependency on ../../schema.
+import type { Lead } from '../../schema';
+
+export const lead: Lead = { body: 'text', upTo: 'buttons' };

package/src/standard/leads.d.mts

@@ -0,0 +1,8 @@
+/**
+ * @param {Record<string, { lead: import('../schema').Lead }>} modules glob results, keyed by the path of each lead.ts
+ * @returns {Record<string, import('../schema').Lead>} the leads, keyed by block type (the folder of lead.ts);
+ * an app's lead (a path under /apps/) over a standard one of the same type, whatever the order of the keys
+ */
+export function leadsOf(modules: Record<string, {
+    lead: any;
+}>): Record<string, any>;

package/src/standard/leads.mjs

@@ -0,0 +1,14 @@
+// The front page's leads of the blocks (lead.ts in a block's folder), keyed by block type: what leadsOf makes of the
+// glob results of the standard blocks and the apps' blocks. Exposes leadsOf; used by frontLeads.ts. No imports.
+
+/**
+ * @param {Record<string, { lead: import('../schema').Lead }>} modules glob results, keyed by the path of each lead.ts
+ * @returns {Record<string, import('../schema').Lead>} the leads, keyed by block type (the folder of lead.ts);
+ * an app's lead (a path under /apps/) over a standard one of the same type, whatever the order of the keys
+ */
+export function leadsOf(modules) {
+  const own = (path) => path.includes('/apps/');
+  const entries = Object.entries(modules).map(([path, m]) => ({ path, type: path.split('/').at(-2), lead: m.lead }));
+  const ordered = [...entries.filter((e) => !own(e.path)), ...entries.filter((e) => own(e.path))];
+  return Object.fromEntries(ordered.map((e) => [e.type, e.lead]));
+}

package/src/standard/leads.test.d.mts

@@ -0,0 +1 @@
+export {};

package/src/standard/leads.test.mjs

@@ -0,0 +1,27 @@
+// Tests leadsOf (leads.mjs): the front-page leads of the blocks, keyed by block type, an app's over a standard one.
+// Run: node --test src/standard/leads.test.mjs
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { leadsOf } from './leads.mjs';
+
+test('keys a standard lead by its block type', () => {
+  assert.deepEqual(leadsOf({ '/src/standard/hero/lead.ts': { lead: { body: 'text', upTo: 'buttons' } } }), {
+    hero: { body: 'text', upTo: 'buttons' },
+  });
+});
+
+test('keys an app lead by its block type', () => {
+  const found = leadsOf({ '/src/apps/x/blocks/prices/lead.ts': { lead: { heading: 'heading' } } });
+  assert.deepEqual(Object.keys(found), ['prices']);
+});
+
+test('an app lead wins over a standard one, in either order', () => {
+  const standard = ['./hero/lead.ts', { lead: { heading: 'standard' } }];
+  const app = ['/src/apps/x/blocks/hero/lead.ts', { lead: { heading: 'app' } }];
+  assert.deepEqual(leadsOf(Object.fromEntries([standard, app])), { hero: { heading: 'app' } });
+  assert.deepEqual(leadsOf(Object.fromEntries([app, standard])), { hero: { heading: 'app' } });
+});
+
+test('no modules, no leads', () => {
+  assert.deepEqual(leadsOf({}), {});
+});

package/src/standard/posts/lead.ts

@@ -0,0 +1,4 @@
+// The front page lead of the "posts" block: the text above its card. Exposes lead; type-only dependency on ../../schema.
+import type { Lead } from '../../schema';
+
+export const lead: Lead = { heading: 'heading' };

package/src/standard/steps/lead.ts

@@ -0,0 +1,4 @@
+// The front page lead of the "steps" block: the text above its card. Exposes lead; type-only dependency on ../../schema.
+import type { Lead } from '../../schema';
+
+export const lead: Lead = { heading: 'heading' };

package/src/standard/testimonials/lead.ts

@@ -0,0 +1,4 @@
+// The front page lead of the "testimonials" block: the text above its card. Exposes lead; type-only dependency on ../../schema.
+import type { Lead } from '../../schema';
+
+export const lead: Lead = { heading: 'heading' };

package/src/standard/view.tsx

@@ -76,8 +76,9 @@ export const shownPicture = (src: string): Picture => ({ src: shownAt(src) });
 export type ViewOf<V> = (props: Record<string, any>, data: BlockData) => V | null;
 
 /** Where a block stands on the site, for its load.ts: its shared texts (shared.ts, with those saved over them), its
- * place among the parts of the text, the page's address, and whether the page is a new version (/ny/). */
-export type LoadContext = { texts: Record<string, any>; index: number; path?: string; preview?: boolean };
+ * place among the parts of the text, the page's address, whether the page is a new version (/ny/), and, for a block
+ * drawn beside the page's text (`beside`), the text as HTML. */
+export type LoadContext = { texts: Record<string, any>; index: number; path?: string; preview?: boolean; html?: string };
 
 /** What a block's contract makes its view from on the site, when it is built (load.ts). Null: nothing is shown. */
 export type Load<V> = (props: Record<string, any>, at: LoadContext) => Promise<V | null>;
@@ -89,6 +90,8 @@ export type Contract<V> = {
   after?: (view: V) => string | undefined;
   /** Drawn across the page, below the text and the column beside it, when it ends a page's text (endBlock in views.ts). */
   across?: boolean;
+  /** Can be drawn in a column beside the text of a page, when src/data/side.json chooses its type (sideBlock in views.ts). */
+  beside?: boolean;
 };
 
 /** The kinds of a button, as Material 3 names them (m3.material.io/components/buttons): what a block's or an app's

package/src/standard/views.ts

@@ -4,6 +4,8 @@
 import { appLooks, themeViews } from './siteLooks';
 import type { Contract, View } from './view';
 import { parseBlock } from '../../lib/blocks.mjs';
+import { sideBlockOf } from '../../lib/side-block.mjs';
+import { sideSetting } from '../../site/side';
 
 const byType = <T>(found: Record<string, T>) => Object.fromEntries(Object.entries(found).map(([file, m]) => [file.split('/').at(-2)!, m]));
 const defaults = <T>(found: Record<string, { default: T }>) =>
@@ -22,6 +24,12 @@ export const blockLoads: Record<string, Contract<any>> = {
   ...byType(appLooks.loads),
 };
 
+/** The block type drawn in a column beside the text of a page, or null: the one src/data/side.json chooses, when its
+ * load.ts says `beside`, unless the page is `wide` or has `side: false` (lib/side-block.mjs). The theme's page layout
+ * (PageLayout.astro) draws it with Block.astro, given the page's text as `html`. */
+export const sideBlock = (page: { wide?: boolean; side?: boolean }): string | null =>
+  sideBlockOf(page, sideSetting, (type) => blockLoads[type]?.beside === true);
+
 // A block's tag in the text, at its very end (blocks.mjs writes it so).
 const END = /<div data-block="([\w-]+)"(?: data-props="[^"]*")?\s*><\/div>\s*$/;
 

package/theme/layouts/PageLayout.astro

@@ -1,5 +1,6 @@
 ---
-// A page (the standard theme's): back link, title and the text with its blocks (its pictures in it), in one column, and the booking
+// A page (the standard theme's): back link, title and the text with its blocks (its pictures in it), in one column (with
+// the block src/data/side.json chooses in a column beside it, when there is one: sideBlock), and the booking
 // prompt across the page when the text ends with it. A wide page (`wide`, "Hele bredden"): its blocks go across the
 // page, its text keeps a readable width, and its first paragraph is the introduction under the heading (as
 // PageHeader.astro's).
@@ -8,9 +9,10 @@
 import Base from '@theme/layouts/Base.astro';
 import Icon from '@theme/components/Icon.astro';
 import EndBlock from '@theme/components/EndBlock.astro';
-import { endBlock } from '@morphemecms/cms/src/standard/views';
+import Block from '@morphemecms/cms/src/standard/Block.astro';
+import { blockLoads, endBlock, sideBlock } from '@morphemecms/cms/src/standard/views';
 import { getPages, pageHeading, pageHeadingHtml, parentPage, stateOf, withoutH1, type Page } from '@morphemecms/cms/site/content';
-import { nav } from '@morphemecms/cms/site/site';
+import { blockTexts, nav } from '@morphemecms/cms/site/site';
 import { firstPicture, picturesOf } from '@morphemecms/cms/site/images.mjs';
 import { splitBlocks } from '@morphemecms/cms/lib/blocks.mjs';
 import { markdownHtml } from '@morphemecms/cms/lib/inline';
@@ -61,6 +63,13 @@ const questions = await Promise.all(
 const preview = isPreview(path);
 const current = livePath(path);
 const review = (page.data.review ?? '').trim();
+// The block beside the text (sideBlock): when its type's load gives a view; else the page is drawn as without one.
+const sideType = sideBlock(page.data);
+const sideText = end ? end.html : html;
+const side =
+  sideType && (await blockLoads[sideType].load({}, { texts: blockTexts[sideType] ?? {}, index: 0, path: current, preview, html: sideText })) !== null
+    ? sideType
+    : null;
 ---
 
 <Base
@@ -93,7 +102,7 @@ const review = (page.data.review ?? '').trim();
     </Container>
 
     <Container as="div" class:list={[wide ? 'mt-4' : 'mt-8 md:mt-12']}>
-      <div>
+      <div {...(side ? { class: 'page-with-side' } : {})}>
         <div
           data-editor="text"
           class:list={[
@@ -103,8 +112,13 @@ const review = (page.data.review ?? '').trim();
               : 'max-w-[66ch]',
           ]}
         >
-          <RichText html={end ? end.html : html} path={current} preview={preview} />
+          <RichText html={sideText} path={current} preview={preview} />
         </div>
+        {side && (
+          <aside class="page-side">
+            <Block type={side} texts={blockTexts[side]} path={current} preview={preview} html={sideText} />
+          </aside>
+        )}
       </div>
     </Container>
   </article>

package/theme/styles/components.css

@@ -20,6 +20,10 @@
   /* The space over the first block on the blog page, under the tags: its posts, close to them. */
   --theme-blog-first-space: 2.5rem;
   --theme-blog-first-space-large: 3.5rem;
+  /* The column beside the text of a page (PageLayout.astro, the block src/data/side.json chooses): its width and the gap
+     between it and the text, from md. */
+  --theme-side-width: 20rem;
+  --theme-side-gap: 3rem;
   /* The logo (Logo.astro, and at the top of the menu on a phone): the mark (the site's logo) in a tile, its colour and
      size (a share of the mark's own), the name's weight and size, and the role (hidden with none; on a phone, and from md). */
   --theme-logo-tile: transparent;
@@ -189,6 +193,25 @@
   }
 }
 
+/* A page with a block beside its text (PageLayout.astro): the text, then the column (on a phone below the text); from md
+   two columns, the second one staying in view while the text is read. */
+.page-with-side > .page-side {
+  margin-top: 3rem;
+}
+@media (min-width: 48rem) {
+  .page-with-side {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) var(--theme-side-width);
+    column-gap: var(--theme-side-gap);
+    align-items: start;
+  }
+  .page-with-side > .page-side {
+    margin-top: 0;
+    position: sticky;
+    top: 6rem;
+  }
+}
+
 /* A page's and a post's title (PageHeader.astro, PageLayout.astro, PostLayout.astro, Home.astro): the display role, by
    the variables above. */
 .theme-title {