@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/theme/components/RichText.astro

@@ -1,28 +1,28 @@
----
-// A page's text, with the site's blocks put in it in the editor (packages/editor/lib/blocks.mjs) shown
-// as the real components: each block drawn from its view, the standard blocks' and the apps' (blockSites in
-// packages/editor/src/standard/sites.ts; the folder's name is its type). The text keeps the page's "prose" style; the blocks are outside it (not-prose; the video
-// is in it, as a video written in the text, packages/editor/lib/video.mjs); a block hidden in the editor is left
-// out (splitBlocks). The HTML comes as `html`, or as the default slot (rendered Markdown). `path`: the
-// page's address, for the testimonials' label. `preview`: a new version of a page (/ny/), whose topics
-// show the opening of the new versions too. Each block gets its type, and its shared texts as `texts` (blockTexts).
-import { splitBlocks } from '@morphemecms/cms/lib/blocks.mjs';
-import { blockSites } from '@morphemecms/cms/src/standard/sites';
-import { blockTexts } from '@morphemecms/cms/site/site';
-
-interface Props {
-  html?: string;
-  path?: string;
-  preview?: boolean;
-}
-const { path, preview } = Astro.props;
-const html = Astro.props.html ?? (await Astro.slots.render('default'));
-
-const parts = splitBlocks(html, Object.keys(blockSites));
----
-
-{parts.map((p, i) => {
-  if (p.html !== undefined) return <Fragment set:html={p.html} />;
-  const Block = blockSites[p.type];
-  return <Block type={p.type} props={p.props} index={i} path={path} preview={preview} texts={blockTexts[p.type]} />;
-})}
+---
+// A page's text, with the site's blocks put in it in the editor (packages/editor/lib/blocks.mjs) shown
+// as the real components: each block drawn from its view, the standard blocks' and the apps' (blockSites in
+// packages/editor/src/standard/sites.ts; the folder's name is its type). The text keeps the page's "prose" style; the blocks are outside it (not-prose; the video
+// is in it, as a video written in the text, packages/editor/lib/video.mjs); a block hidden in the editor is left
+// out (splitBlocks). The HTML comes as `html`, or as the default slot (rendered Markdown). `path`: the
+// page's address, for the testimonials' label. `preview`: a new version of a page (/ny/), whose topics
+// show the opening of the new versions too. Each block gets its type, and its shared texts as `texts` (blockTexts).
+import { splitBlocks } from '@morphemecms/cms/lib/blocks.mjs';
+import { blockSites } from '@morphemecms/cms/src/standard/sites';
+import { blockTexts } from '@morphemecms/cms/site/site';
+
+interface Props {
+  html?: string;
+  path?: string;
+  preview?: boolean;
+}
+const { path, preview } = Astro.props;
+const html = Astro.props.html ?? (await Astro.slots.render('default'));
+
+const parts = splitBlocks(html, Object.keys(blockSites));
+---
+
+{parts.map((p, i) => {
+  if (p.html !== undefined) return <Fragment set:html={p.html} />;
+  const Block = blockSites[p.type];
+  return <Block type={p.type} props={p.props} index={i} path={path} preview={preview} texts={blockTexts[p.type]} />;
+})}

package/theme/components/Section.astro

@@ -1,29 +1,29 @@
----
-// A front-page section: container, spacing above, reveal on scroll and an optional heading + intro.
-import Container from '@theme/components/Container.astro';
-import SectionHeading from '@theme/components/SectionHeading';
-import Inline from '@theme/components/Inline.astro';
-
-interface Props {
-  title?: string;
-  intro?: string;
-  class?: string;
-  /** Id for the heading; the section is then labelled by it (aria-labelledby). */
-  id?: string;
-}
-const { title, intro, class: className, id } = Astro.props;
----
-
-<Container
-  class:list={['pt-(--theme-section-space) md:pt-(--theme-section-space-large)', className]}
-  aria-labelledby={title && id ? id : undefined}
-  data-reveal
->
-  {title && <SectionHeading id={id} text={title} />}
-  {intro && (
-    <p class="type-body-large mt-3 max-w-[52ch] text-muted">
-      <Inline text={intro} />
-    </p>
-  )}
-  <slot />
-</Container>
+---
+// A front-page section: container, spacing above, reveal on scroll and an optional heading + intro.
+import Container from '@theme/components/Container.astro';
+import SectionHeading from '@theme/components/SectionHeading';
+import Inline from '@theme/components/Inline.astro';
+
+interface Props {
+  title?: string;
+  intro?: string;
+  class?: string;
+  /** Id for the heading; the section is then labelled by it (aria-labelledby). */
+  id?: string;
+}
+const { title, intro, class: className, id } = Astro.props;
+---
+
+<Container
+  class:list={['pt-(--theme-section-space) md:pt-(--theme-section-space-large)', className]}
+  aria-labelledby={title && id ? id : undefined}
+  data-reveal
+>
+  {title && <SectionHeading id={id} text={title} />}
+  {intro && (
+    <p class="type-body-large mt-3 max-w-[52ch] text-muted">
+      <Inline text={intro} />
+    </p>
+  )}
+  <slot />
+</Container>

package/theme/components/SectionHeading.tsx

@@ -1,8 +1,8 @@
-// The h2 used for every front-page section. `text`: its text.
-export default function SectionHeading({ text, id, className }: { text: string; id?: string; className?: string }) {
-  return (
-    <h2 id={id} className={['type-headline-large md:type-display-medium', className].filter(Boolean).join(' ')}>
-      {text}
-    </h2>
-  );
-}
+// The h2 used for every front-page section. `text`: its text.
+export default function SectionHeading({ text, id, className }: { text: string; id?: string; className?: string }) {
+  return (
+    <h2 id={id} className={['type-headline-large md:type-display-medium', className].filter(Boolean).join(' ')}>
+      {text}
+    </h2>
+  );
+}

package/theme/components/TextSection.astro

@@ -1,16 +1,16 @@
----
-// A text on the blog page or the 404 page (packages/editor/site/standardPages.ts): an optional heading and Markdown.
-import PageSection from '@theme/components/PageSection.astro';
-import Markdown from '@theme/components/Markdown.astro';
-
-interface Props {
-  heading?: string;
-  body: string;
-  class?: string;
-}
-const { heading, body, class: className } = Astro.props;
----
-
-<PageSection title={heading} class={className}>
-  <Markdown body={body} class={heading && 'mt-6'} />
-</PageSection>
+---
+// A text on the blog page or the 404 page (packages/editor/site/standardPages.ts): an optional heading and Markdown.
+import PageSection from '@theme/components/PageSection.astro';
+import Markdown from '@theme/components/Markdown.astro';
+
+interface Props {
+  heading?: string;
+  body: string;
+  class?: string;
+}
+const { heading, body, class: className } = Astro.props;
+---
+
+<PageSection title={heading} class={className}>
+  <Markdown body={body} class={heading && 'mt-6'} />
+</PageSection>

package/theme/components/home/PageBlock.astro

@@ -1,19 +1,19 @@
----
-// A block a page can have, as a section of the front page (`pageBlocks` in packages/editor/defaults/collections.ts): the standard
-// one's or the app's (Block.astro, by its type), in the front page's width and space, with its shared texts.
-import Block from '@morphemecms/cms/src/standard/Block.astro';
-import Section from '@theme/components/Section.astro';
-import { blockTexts } from '@morphemecms/cms/site/site';
-
-interface Props {
-  section: { type: string; hidden?: boolean } & Record<string, unknown>;
-  class?: string;
-}
-const { type, hidden, ...props } = Astro.props.section;
----
-
-<Section class={Astro.props.class}>
-  <div class="block-place">
-    <Block type={type} props={props} texts={blockTexts[type]} />
-  </div>
-</Section>
+---
+// A block a page can have, as a section of the front page (`pageBlocks` in packages/editor/defaults/collections.ts): the standard
+// one's or the app's (Block.astro, by its type), in the front page's width and space, with its shared texts.
+import Block from '@morphemecms/cms/src/standard/Block.astro';
+import Section from '@theme/components/Section.astro';
+import { blockTexts } from '@morphemecms/cms/site/site';
+
+interface Props {
+  section: { type: string; hidden?: boolean } & Record<string, unknown>;
+  class?: string;
+}
+const { type, hidden, ...props } = Astro.props.section;
+---
+
+<Section class={Astro.props.class}>
+  <div class="block-place">
+    <Block type={type} props={props} texts={blockTexts[type]} />
+  </div>
+</Section>

package/theme/components/home/Text.astro

@@ -1,13 +1,13 @@
----
-// A text the site's owner writes: an optional heading and Markdown.
-import Section from '@theme/components/Section.astro';
-import Markdown from '@theme/components/Markdown.astro';
-import type { HomeSection } from '@morphemecms/cms/site/home';
-
-type Props = Extract<HomeSection, { type: 'text' }> & { class?: string };
-const { heading, body, class: className } = Astro.props;
----
-
-<Section title={heading} class={className}>
-  <Markdown body={body} class={heading && 'mt-6'} />
-</Section>
+---
+// A text the site's owner writes: an optional heading and Markdown.
+import Section from '@theme/components/Section.astro';
+import Markdown from '@theme/components/Markdown.astro';
+import type { HomeSection } from '@morphemecms/cms/site/home';
+
+type Props = Extract<HomeSection, { type: 'text' }> & { class?: string };
+const { heading, body, class: className } = Astro.props;
+---
+
+<Section title={heading} class={className}>
+  <Markdown body={body} class={heading && 'mt-6'} />
+</Section>

package/theme/components/loadPopup.ts

@@ -1,22 +1,22 @@
-// A pop-up's box on the site (PopupView.tsx): its picture with the sizes the site has made of it, and its button
-// (PopupButton.tsx) with the site's targets and pages.
-import { loadButtons } from '@morphemecms/cms/src/standard/buttons/load';
-import { pictureOf } from '@morphemecms/cms/src/standard/load';
-import type { Popup } from '@morphemecms/cms/site/popups';
-import type { PopupBoxView } from '@theme/components/PopupView';
-import type { PopupButtonView } from '@theme/components/PopupButton';
-
-async function buttonOf(button: Popup['button']): Promise<PopupButtonView | undefined> {
-  if (!button) return undefined;
-  if (button.to === 'file') return button.href ? { file: { href: button.href, label: button.label?.trim() || 'Download PDF' } } : undefined;
-  const icon = button.to === 'phone' ? 'phone' : 'arrow-right';
-  return { buttons: await loadButtons([{ to: button.to, label: button.label, href: button.href, kind: 'filled', icon }]) };
-}
-
-export const loadPopup = async (p: Popup): Promise<PopupBoxView> => ({
-  slug: p.slug,
-  image: p.image ? pictureOf(p.image) : undefined,
-  heading: p.heading,
-  text: p.text,
-  button: await buttonOf(p.button),
-});
+// A pop-up's box on the site (PopupView.tsx): its picture with the sizes the site has made of it, and its button
+// (PopupButton.tsx) with the site's targets and pages.
+import { loadButtons } from '@morphemecms/cms/src/standard/buttons/load';
+import { pictureOf } from '@morphemecms/cms/src/standard/load';
+import type { Popup } from '@morphemecms/cms/site/popups';
+import type { PopupBoxView } from '@theme/components/PopupView';
+import type { PopupButtonView } from '@theme/components/PopupButton';
+
+async function buttonOf(button: Popup['button']): Promise<PopupButtonView | undefined> {
+  if (!button) return undefined;
+  if (button.to === 'file') return button.href ? { file: { href: button.href, label: button.label?.trim() || 'Download PDF' } } : undefined;
+  const icon = button.to === 'phone' ? 'phone' : 'arrow-right';
+  return { buttons: await loadButtons([{ to: button.to, label: button.label, href: button.href, kind: 'filled', icon }]) };
+}
+
+export const loadPopup = async (p: Popup): Promise<PopupBoxView> => ({
+  slug: p.slug,
+  image: p.image ? pictureOf(p.image) : undefined,
+  heading: p.heading,
+  text: p.text,
+  button: await buttonOf(p.button),
+});

package/theme/components/loadPosts.ts

@@ -1,16 +1,16 @@
-// A blog post on the site, as BlogPosts.tsx, PostList.tsx and PostMeta.tsx draw it (posts.ts), with its picture's sizes.
-import { pictureOf } from '@morphemecms/cms/src/standard/load';
-import { postPath, type Post } from '@morphemecms/cms/site/content';
-import { formatDate, readingMinutes } from '@morphemecms/cms/site/format';
-import type { PostView } from '@theme/components/posts';
-
-export const postViewOf = (post: Post): PostView => ({
-  href: postPath(post),
-  title: post.data.title,
-  description: post.data.description,
-  image: post.data.image ? pictureOf(post.data.image) : undefined,
-  imageAlt: post.data.imageDecorative ? undefined : post.data.imageAlt,
-  date: post.data.date.toISOString(),
-  dateText: formatDate(post.data.date),
-  minutes: readingMinutes(post.body),
-});
+// A blog post on the site, as BlogPosts.tsx, PostList.tsx and PostMeta.tsx draw it (posts.ts), with its picture's sizes.
+import { pictureOf } from '@morphemecms/cms/src/standard/load';
+import { postPath, type Post } from '@morphemecms/cms/site/content';
+import { formatDate, readingMinutes } from '@morphemecms/cms/site/format';
+import type { PostView } from '@theme/components/posts';
+
+export const postViewOf = (post: Post): PostView => ({
+  href: postPath(post),
+  title: post.data.title,
+  description: post.data.description,
+  image: post.data.image ? pictureOf(post.data.image) : undefined,
+  imageAlt: post.data.imageDecorative ? undefined : post.data.imageAlt,
+  date: post.data.date.toISOString(),
+  dateText: formatDate(post.data.date),
+  minutes: readingMinutes(post.body),
+});

package/theme/components/posts.ts

@@ -1,15 +1,15 @@
-// A blog post as BlogPosts.tsx, PostList.tsx and PostMeta.tsx draw it: its page, title, description, picture, date
-// (ISO, and as Danish text) and reading time. On the site: postViewOf (loadPosts.ts); the standard block
-// "Blogindlæg" from its view (blocks/posts/View.tsx).
-import type { Picture } from '@morphemecms/cms/src/standard/view';
-
-export type PostView = {
-  href: string;
-  title: string;
-  description?: string;
-  image?: Picture;
-  imageAlt?: string;
-  date: string;
-  dateText: string;
-  minutes: number;
-};
+// A blog post as BlogPosts.tsx, PostList.tsx and PostMeta.tsx draw it: its page, title, description, picture, date
+// (ISO, and as Danish text) and reading time. On the site: postViewOf (loadPosts.ts); the standard block
+// "Blogindlæg" from its view (blocks/posts/View.tsx).
+import type { Picture } from '@morphemecms/cms/src/standard/view';
+
+export type PostView = {
+  href: string;
+  title: string;
+  description?: string;
+  image?: Picture;
+  imageAlt?: string;
+  date: string;
+  dateText: string;
+  minutes: number;
+};

package/theme/editor/looks.mjs

@@ -1,7 +1,7 @@
-// How the sections of the front page look on the site, so the editor shows them so too (looksOf in
-// packages/editor/src/sections.mjs, editor.css): by file and section type, the looks of a section's heading and the
-// text under it. The standard theme has none of its own: a heading looks like the page's other headings.
-export const LOOKS = {};
-
-// The look of the other headings of the front page, when not 'page-section'.
-export const HEADINGS = {};
+// How the sections of the front page look on the site, so the editor shows them so too (looksOf in
+// packages/editor/src/sections.mjs, editor.css): by file and section type, the looks of a section's heading and the
+// text under it. The standard theme has none of its own: a heading looks like the page's other headings.
+export const LOOKS = {};
+
+// The look of the other headings of the front page, when not 'page-section'.
+export const HEADINGS = {};

package/theme/editor/previews.tsx

@@ -1,56 +1,56 @@
-// The standard pages' sections in the editor as they look on the site, where the theme draws a block its own way there
-// (by `<file>#<key>`: 'src/data/standard-pages.json#front' …, the same React components as on the site; the theme's
-// CSS is the editor's, @theme/styles/global.css), with what is in it now; the standard theme draws every block as the
-// block (preview() in packages/editor/src/registry.tsx). Also what another theme's previews.tsx can take from here
-// (Texts, contactOf, Text …). Links and buttons are only drawn
-// (Link, InEditor): the card around a preview is the button that opens the block's menu (MarkdownEditor.tsx).
-import { createContext, useContext, type ReactNode } from 'react';
-import type { BlockData, BlockProps, DrawBlock } from '@morphemecms/cms/src/blocks';
-import type { SiteData } from '@site/sitedata';
-
-export const cx = (...names: unknown[]) => names.filter(Boolean).join(' ');
-export type Props = BlockProps & Record<string, any>;
-export type Contact = BlockData['site']['contact'];
-
-// The texts every copy of a block has, and the labels of the buttons, as the editor has them now
-// (BlockData's site, sitedata.ts); preview() gives them to the blocks it draws.
-export const Texts = createContext<Pick<SiteData, 'labels' | 'blocks'> | null>(null);
-export const useTexts = () => useContext(Texts)!;
-
-// The phone, e-mail and address, as saved under "Virksomheden".
-export const contactOf = (data: BlockData): Contact => data.site.contact;
-
-// Markdown as plain paragraphs, for a text that is not edited here (a hidden section, Om mig).
-export const plainParagraphs = (markdown: string) =>
-  markdown
-    .split(/\n\s*\n/)
-    .map((p) =>
-      p
-        .replace(/^#+\s*/, '')
-        .replace(/!\[[^\]]*\]\([^)]*\)/g, '')
-        .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
-        .replace(/<[^>]+>/g, '')
-        .replace(/[*_`>]/g, '')
-        .trim(),
-    )
-    .filter(Boolean);
-
-// A text that is not edited here, in the page's text style: a hidden section of text.
-export const Text = ({ heading, body }: { heading?: string; body: string }) => (
-  <div className="prose max-w-none">
-    {heading && <h2>{heading}</h2>}
-    {plainParagraphs(body).map((p, i) => (
-      <p key={i}>{p}</p>
-    ))}
-  </div>
-);
-
-export type Preview = (props: Props, data: BlockData, block: DrawBlock) => ReactNode;
-
-// What every standard page draws its own way: a text (only on a page with sections in their own fields). A section of
-// a block's type is drawn by that block, and the prices by the block "Priser" (`block`, as the site's Block.astro).
-export const everyFixedPage: Record<string, Preview> = {
-  text: (props) => <Text heading={props.heading} body={String(props.body ?? '')} />,
-};
-
-export const fixedPages: Record<string, Record<string, Preview>> = {};
+// The standard pages' sections in the editor as they look on the site, where the theme draws a block its own way there
+// (by `<file>#<key>`: 'src/data/standard-pages.json#front' …, the same React components as on the site; the theme's
+// CSS is the editor's, @theme/styles/global.css), with what is in it now; the standard theme draws every block as the
+// block (preview() in packages/editor/src/registry.tsx). Also what another theme's previews.tsx can take from here
+// (Texts, contactOf, Text …). Links and buttons are only drawn
+// (Link, InEditor): the card around a preview is the button that opens the block's menu (MarkdownEditor.tsx).
+import { createContext, useContext, type ReactNode } from 'react';
+import type { BlockData, BlockProps, DrawBlock } from '@morphemecms/cms/src/blocks';
+import type { SiteData } from '@site/sitedata';
+
+export const cx = (...names: unknown[]) => names.filter(Boolean).join(' ');
+export type Props = BlockProps & Record<string, any>;
+export type Contact = BlockData['site']['contact'];
+
+// The texts every copy of a block has, and the labels of the buttons, as the editor has them now
+// (BlockData's site, sitedata.ts); preview() gives them to the blocks it draws.
+export const Texts = createContext<Pick<SiteData, 'labels' | 'blocks'> | null>(null);
+export const useTexts = () => useContext(Texts)!;
+
+// The phone, e-mail and address, as saved under "Virksomheden".
+export const contactOf = (data: BlockData): Contact => data.site.contact;
+
+// Markdown as plain paragraphs, for a text that is not edited here (a hidden section, Om mig).
+export const plainParagraphs = (markdown: string) =>
+  markdown
+    .split(/\n\s*\n/)
+    .map((p) =>
+      p
+        .replace(/^#+\s*/, '')
+        .replace(/!\[[^\]]*\]\([^)]*\)/g, '')
+        .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+        .replace(/<[^>]+>/g, '')
+        .replace(/[*_`>]/g, '')
+        .trim(),
+    )
+    .filter(Boolean);
+
+// A text that is not edited here, in the page's text style: a hidden section of text.
+export const Text = ({ heading, body }: { heading?: string; body: string }) => (
+  <div className="prose max-w-none">
+    {heading && <h2>{heading}</h2>}
+    {plainParagraphs(body).map((p, i) => (
+      <p key={i}>{p}</p>
+    ))}
+  </div>
+);
+
+export type Preview = (props: Props, data: BlockData, block: DrawBlock) => ReactNode;
+
+// What every standard page draws its own way: a text (only on a page with sections in their own fields). A section of
+// a block's type is drawn by that block, and the prices by the block "Priser" (`block`, as the site's Block.astro).
+export const everyFixedPage: Record<string, Preview> = {
+  text: (props) => <Text heading={props.heading} body={String(props.body ?? '')} />,
+};
+
+export const fixedPages: Record<string, Record<string, Preview>> = {};