@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/theme/blocks/accordion/PageRow.tsx

@@ -1,25 +1,25 @@
-// A row's text in the accordion (Accordion.tsx in ../faq/, a row with `page`): the text, a link to the row's page
-// (`link`: its text, e.g. "Læs mere om priser", the shared text of "Foldeliste"), and links to more specific pages
-// (`more`, e.g. "Depression som ung", as chips). The standard block "Foldeliste", and a site's own rows (this site's front
-// page, home/Topics.astro).
-import { Svg } from '@morphemecms/cms/src/icon';
-import type { PageRowView } from '@morphemecms/cms/src/standard/accordion/view';
-import { Link } from '@morphemecms/cms/src/standard/view';
-import Chip from '@theme/ui/Chip';
-
-export default function PageRow(row: PageRowView) {
-  return (
-    <>
-      <p className="block-row-text">{row.text}</p>
-      <div className="block-row-links">
-        <Link href={row.href} className="block-link block-row-link">
-          {row.link}
-          <Svg name="arrow-right" size={18} />
-        </Link>
-        {row.more?.map((m) => (
-          <Chip key={m.href} href={m.href} label={m.label} />
-        ))}
-      </div>
-    </>
-  );
-}
+// A row's text in the accordion (Accordion.tsx in ../faq/, a row with `page`): the text, a link to the row's page
+// (`link`: its text, e.g. "Læs mere om priser", the shared text of "Foldeliste"), and links to more specific pages
+// (`more`, e.g. "Depression som ung", as chips). The standard block "Foldeliste", and a site's own rows (this site's front
+// page, home/Topics.astro).
+import { Svg } from '@morphemecms/cms/src/icon';
+import type { PageRowView } from '@morphemecms/cms/src/standard/accordion/view';
+import { Link } from '@morphemecms/cms/src/standard/view';
+import Chip from '@theme/ui/Chip';
+
+export default function PageRow(row: PageRowView) {
+  return (
+    <>
+      <p className="block-row-text">{row.text}</p>
+      <div className="block-row-links">
+        <Link href={row.href} className="block-link block-row-link">
+          {row.link}
+          <Svg name="arrow-right" size={18} />
+        </Link>
+        {row.more?.map((m) => (
+          <Chip key={m.href} href={m.href} label={m.label} />
+        ))}
+      </div>
+    </>
+  );
+}

package/theme/blocks/accordion/View.tsx

@@ -1,17 +1,17 @@
-// "Foldeliste": its head in the text (BlockHead.tsx), then its rows (Accordion.tsx in ../faq/, each
-// with PageRow.tsx) with the space of a block in the text.
-import BlockHead from '@theme/blocks/BlockHead';
-import Accordion from '@theme/blocks/faq/Accordion';
-import type { AccordionView } from '@morphemecms/cms/src/standard/accordion/view';
-import { useInText } from '@morphemecms/cms/src/standard/view';
-
-export default function AccordionBlock({ view }: { view: AccordionView }) {
-  return (
-    <>
-      <BlockHead view={view} />
-      <div className={useInText() || undefined}>
-        <Accordion rows={view.rows.map((page) => ({ label: page.label, page }))} group={view.group} />
-      </div>
-    </>
-  );
-}
+// "Foldeliste": its head in the text (BlockHead.tsx), then its rows (Accordion.tsx in ../faq/, each
+// with PageRow.tsx) with the space of a block in the text.
+import BlockHead from '@theme/blocks/BlockHead';
+import Accordion from '@theme/blocks/faq/Accordion';
+import type { AccordionView } from '@morphemecms/cms/src/standard/accordion/view';
+import { useInText } from '@morphemecms/cms/src/standard/view';
+
+export default function AccordionBlock({ view }: { view: AccordionView }) {
+  return (
+    <>
+      <BlockHead view={view} />
+      <div className={useInText() || undefined}>
+        <Accordion rows={view.rows.map((page) => ({ label: page.label, page }))} group={view.group} />
+      </div>
+    </>
+  );
+}

package/theme/blocks/buttons/Buttons.tsx

@@ -1,28 +1,28 @@
-// Buttons (Button.tsx in ../../ui/): the standard block "Knapper", and a site's or an app's own buttons (this site's
-// front page, the price cards, the action bar). Only the buttons: the caller lays them out (.block-buttons in a row).
-// What each shows is made by the contract (@morphemecms/cms/src/standard/buttons/view.ts: buttonsOf in the editor,
-// loadButtons on the site), its kind too. `className`: the site's own classes on each button, e.g. its width. The arrow
-// goes after the text (Button's trailingIcon), the other icons before it.
-import Button from '@theme/ui/Button';
-import type { ButtonView } from '@morphemecms/cms/src/standard/buttons/view';
-
-export default function Buttons({ buttons, className }: { buttons: ButtonView[]; className?: string }) {
-  return (
-    <>
-      {buttons.map((b, i) => (
-        <Button
-          key={i}
-          href={b.href}
-          kind={b.kind}
-          icon={b.icon !== 'arrow-right' ? b.icon : undefined}
-          trailingIcon={b.icon === 'arrow-right' ? 'arrow-right' : undefined}
-          data-open={b.open}
-          className={className}
-          aria-label={b.label}
-        >
-          {b.text}
-        </Button>
-      ))}
-    </>
-  );
-}
+// Buttons (Button.tsx in ../../ui/): the standard block "Knapper", and a site's or an app's own buttons (this site's
+// front page, the price cards, the action bar). Only the buttons: the caller lays them out (.block-buttons in a row).
+// What each shows is made by the contract (@morphemecms/cms/src/standard/buttons/view.ts: buttonsOf in the editor,
+// loadButtons on the site), its kind too. `className`: the site's own classes on each button, e.g. its width. The arrow
+// goes after the text (Button's trailingIcon), the other icons before it.
+import Button from '@theme/ui/Button';
+import type { ButtonView } from '@morphemecms/cms/src/standard/buttons/view';
+
+export default function Buttons({ buttons, className }: { buttons: ButtonView[]; className?: string }) {
+  return (
+    <>
+      {buttons.map((b, i) => (
+        <Button
+          key={i}
+          href={b.href}
+          kind={b.kind}
+          icon={b.icon !== 'arrow-right' ? b.icon : undefined}
+          trailingIcon={b.icon === 'arrow-right' ? 'arrow-right' : undefined}
+          data-open={b.open}
+          className={className}
+          aria-label={b.label}
+        >
+          {b.text}
+        </Button>
+      ))}
+    </>
+  );
+}

package/theme/blocks/buttons/View.tsx

@@ -1,12 +1,12 @@
-// "Knapper": its own buttons, or the shared ones, in a row, on a phone under each other in the full width.
-import Buttons from '@theme/blocks/buttons/Buttons';
-import type { ButtonsView } from '@morphemecms/cms/src/standard/buttons/view';
-import { useInText } from '@morphemecms/cms/src/standard/view';
-
-export default function ButtonsBlock({ view }: { view: ButtonsView }) {
-  return (
-    <div className={useInText('block-buttons')}>
-      <Buttons buttons={view.buttons} />
-    </div>
-  );
-}
+// "Knapper": its own buttons, or the shared ones, in a row, on a phone under each other in the full width.
+import Buttons from '@theme/blocks/buttons/Buttons';
+import type { ButtonsView } from '@morphemecms/cms/src/standard/buttons/view';
+import { useInText } from '@morphemecms/cms/src/standard/view';
+
+export default function ButtonsBlock({ view }: { view: ButtonsView }) {
+  return (
+    <div className={useInText('block-buttons')}>
+      <Buttons buttons={view.buttons} />
+    </div>
+  );
+}

package/theme/blocks/cards/LinkCards.tsx

@@ -1,72 +1,72 @@
-// Cards that link to other pages (outlined cards, Card.tsx in ../../ui/; one without a page is only its text), each with
-// an icon, (`design` 'image') a picture or ('text') nothing at the top, a heading, a text and the link's text at the
-// bottom (`more`, the block's shared text), two side by side from small screens (.block-cards in ../blocks.css), on the
-// theme's surface or (`background`) the accent: the standard block "Kort", and a site's own cards (this site's front
-// page).
-// `className`: the site's own classes on the list, e.g. its margin.
-import { Svg } from '@morphemecms/cms/src/icon';
-import type { LinkCard } from '@morphemecms/cms/src/standard/cards/view';
-import Card from '@theme/ui/Card';
-
-const sizes = '(min-width: 640px) 352px, 100vw';
-
-export default function LinkCards({
-  items,
-  more,
-  design,
-  background,
-  className,
-}: {
-  items: LinkCard[];
-  more: string;
-  design?: string;
-  background?: string;
-  className?: string;
-}) {
-  const pictures = design === 'image';
-  const filled = background === 'accent' ? 'block-cards-accent' : undefined;
-  return (
-    <ul className={['block-cards', pictures && 'block-cards-pictures', filled, className].filter(Boolean).join(' ')}>
-      {items.map((card, i) => {
-        const inside = (
-          <>
-            {pictures ? (
-              <span className="block-card-picture">
-                {card.image && (
-                  <img
-                    src={card.image.src}
-                    srcSet={card.image.srcset}
-                    sizes={card.image.srcset ? sizes : undefined}
-                    width={card.image.width}
-                    height={card.image.height}
-                    alt=""
-                    loading="lazy"
-                    decoding="async"
-                  />
-                )}
-              </span>
-            ) : (
-              design !== 'text' && <Svg name={card.icon ?? ''} size={28} className="block-card-icon" />
-            )}
-            <span className="block-card-title">{card.title}</span>
-            <span className="block-card-text">{card.text}</span>
-            {card.href && (
-              <span className="block-card-more">
-                {more}
-                <Svg name="arrow-right" size={18} className="block-card-arrow" />
-              </span>
-            )}
-          </>
-        );
-        // A card without a page is not a link, and has no link's text.
-        return (
-          <li key={i}>
-            <Card href={card.href || undefined} className="block-card">
-              {inside}
-            </Card>
-          </li>
-        );
-      })}
-    </ul>
-  );
-}
+// Cards that link to other pages (outlined cards, Card.tsx in ../../ui/; one without a page is only its text), each with
+// an icon, (`design` 'image') a picture or ('text') nothing at the top, a heading, a text and the link's text at the
+// bottom (`more`, the block's shared text), two side by side from small screens (.block-cards in ../blocks.css), on the
+// theme's surface or (`background`) the accent: the standard block "Kort", and a site's own cards (this site's front
+// page).
+// `className`: the site's own classes on the list, e.g. its margin.
+import { Svg } from '@morphemecms/cms/src/icon';
+import type { LinkCard } from '@morphemecms/cms/src/standard/cards/view';
+import Card from '@theme/ui/Card';
+
+const sizes = '(min-width: 640px) 352px, 100vw';
+
+export default function LinkCards({
+  items,
+  more,
+  design,
+  background,
+  className,
+}: {
+  items: LinkCard[];
+  more: string;
+  design?: string;
+  background?: string;
+  className?: string;
+}) {
+  const pictures = design === 'image';
+  const filled = background === 'accent' ? 'block-cards-accent' : undefined;
+  return (
+    <ul className={['block-cards', pictures && 'block-cards-pictures', filled, className].filter(Boolean).join(' ')}>
+      {items.map((card, i) => {
+        const inside = (
+          <>
+            {pictures ? (
+              <span className="block-card-picture">
+                {card.image && (
+                  <img
+                    src={card.image.src}
+                    srcSet={card.image.srcset}
+                    sizes={card.image.srcset ? sizes : undefined}
+                    width={card.image.width}
+                    height={card.image.height}
+                    alt=""
+                    loading="lazy"
+                    decoding="async"
+                  />
+                )}
+              </span>
+            ) : (
+              design !== 'text' && <Svg name={card.icon ?? ''} size={28} className="block-card-icon" />
+            )}
+            <span className="block-card-title">{card.title}</span>
+            <span className="block-card-text">{card.text}</span>
+            {card.href && (
+              <span className="block-card-more">
+                {more}
+                <Svg name="arrow-right" size={18} className="block-card-arrow" />
+              </span>
+            )}
+          </>
+        );
+        // A card without a page is not a link, and has no link's text.
+        return (
+          <li key={i}>
+            <Card href={card.href || undefined} className="block-card">
+              {inside}
+            </Card>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/theme/blocks/cards/View.tsx

@@ -1,20 +1,20 @@
-// "Kort": its head in the text (BlockHead.tsx), then LinkCards.tsx with the space of a block in the text.
-import BlockHead from '@theme/blocks/BlockHead';
-import LinkCards from '@theme/blocks/cards/LinkCards';
-import type { CardsView } from '@morphemecms/cms/src/standard/cards/view';
-import { useInText } from '@morphemecms/cms/src/standard/view';
-
-export default function Cards({ view }: { view: CardsView }) {
-  return (
-    <>
-      <BlockHead view={view} />
-      <LinkCards
-        items={view.items}
-        design={view.design}
-        background={view.background}
-        more={view.more}
-        className={useInText() || undefined}
-      />
-    </>
-  );
-}
+// "Kort": its head in the text (BlockHead.tsx), then LinkCards.tsx with the space of a block in the text.
+import BlockHead from '@theme/blocks/BlockHead';
+import LinkCards from '@theme/blocks/cards/LinkCards';
+import type { CardsView } from '@morphemecms/cms/src/standard/cards/view';
+import { useInText } from '@morphemecms/cms/src/standard/view';
+
+export default function Cards({ view }: { view: CardsView }) {
+  return (
+    <>
+      <BlockHead view={view} />
+      <LinkCards
+        items={view.items}
+        design={view.design}
+        background={view.background}
+        more={view.more}
+        className={useInText() || undefined}
+      />
+    </>
+  );
+}

package/theme/blocks/checklist/Checks.tsx

@@ -1,15 +1,15 @@
-// Lines with a check before each, a list without dividers (List.tsx in ../../ui/, .block-checklist in ../blocks.css):
-// the standard block "Tjekliste", in two columns where there is room when it has six or more, and what is included on
-// a card of "Priskort" (../pricecards/View.tsx). `className`: the classes of where it is (the space of a block in the
-// text, a card's).
-import List, { ListItem } from '@theme/ui/List';
-
-export default function Checks({ items, className }: { items: string[]; className?: string }) {
-  return (
-    <List dividers="none" className={className ? `block-checklist ${className}` : 'block-checklist'}>
-      {items.map((text, i) => (
-        <ListItem key={i} leadingIcon="check" headline={text} />
-      ))}
-    </List>
-  );
-}
+// Lines with a check before each, a list without dividers (List.tsx in ../../ui/, .block-checklist in ../blocks.css):
+// the standard block "Tjekliste", in two columns where there is room when it has six or more, and what is included on
+// a card of "Priskort" (../pricecards/View.tsx). `className`: the classes of where it is (the space of a block in the
+// text, a card's).
+import List, { ListItem } from '@theme/ui/List';
+
+export default function Checks({ items, className }: { items: string[]; className?: string }) {
+  return (
+    <List dividers="none" className={className ? `block-checklist ${className}` : 'block-checklist'}>
+      {items.map((text, i) => (
+        <ListItem key={i} leadingIcon="check" headline={text} />
+      ))}
+    </List>
+  );
+}

package/theme/blocks/checklist/View.tsx

@@ -1,14 +1,14 @@
-// "Tjekliste": its head in the text (BlockHead.tsx), and Checks.tsx with the space of a block in the text.
-import BlockHead from '@theme/blocks/BlockHead';
-import Checks from '@theme/blocks/checklist/Checks';
-import type { ChecklistView } from '@morphemecms/cms/src/standard/checklist/view';
-import { useInText } from '@morphemecms/cms/src/standard/view';
-
-export default function Checklist({ view }: { view: ChecklistView }) {
-  return (
-    <>
-      <BlockHead view={view} />
-      <Checks items={view.items} className={useInText() || 'block-in-text'} />
-    </>
-  );
-}
+// "Tjekliste": its head in the text (BlockHead.tsx), and Checks.tsx with the space of a block in the text.
+import BlockHead from '@theme/blocks/BlockHead';
+import Checks from '@theme/blocks/checklist/Checks';
+import type { ChecklistView } from '@morphemecms/cms/src/standard/checklist/view';
+import { useInText } from '@morphemecms/cms/src/standard/view';
+
+export default function Checklist({ view }: { view: ChecklistView }) {
+  return (
+    <>
+      <BlockHead view={view} />
+      <Checks items={view.items} className={useInText() || 'block-in-text'} />
+    </>
+  );
+}

package/theme/blocks/cookies/View.tsx

@@ -1,36 +1,36 @@
-// "Cookieliste": the cookies as a table, a row each with who sets it first and then its name, which scrolls sideways on
-// a narrow screen. Built of the standard blocks' part .block-table.
-import type { CookiesView } from '@morphemecms/cms/src/standard/cookies/view';
-import { useInText } from '@morphemecms/cms/src/standard/view';
-
-export default function Cookies({ view }: { view: CookiesView }) {
-  const { texts } = view;
-  return (
-    <div className={useInText('block-table')}>
-      <table>
-        <thead>
-          <tr>
-            <th scope="col">{texts.provider}</th>
-            <th scope="col">{texts.name}</th>
-            <th scope="col">{texts.purpose}</th>
-            <th scope="col">{texts.lasts}</th>
-            <th scope="col">{texts.category}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {view.cookies.map((c) => (
-            <tr key={`${c.name} ${c.provider}`}>
-              <td>{c.provider}</td>
-              <th scope="row">
-                <code>{c.name}</code>
-              </th>
-              <td>{c.purpose}</td>
-              <td>{c.lasts}</td>
-              <td>{texts[c.category]}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}
+// "Cookieliste": the cookies as a table, a row each with who sets it first and then its name, which scrolls sideways on
+// a narrow screen. Built of the standard blocks' part .block-table.
+import type { CookiesView } from '@morphemecms/cms/src/standard/cookies/view';
+import { useInText } from '@morphemecms/cms/src/standard/view';
+
+export default function Cookies({ view }: { view: CookiesView }) {
+  const { texts } = view;
+  return (
+    <div className={useInText('block-table')}>
+      <table>
+        <thead>
+          <tr>
+            <th scope="col">{texts.provider}</th>
+            <th scope="col">{texts.name}</th>
+            <th scope="col">{texts.purpose}</th>
+            <th scope="col">{texts.lasts}</th>
+            <th scope="col">{texts.category}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {view.cookies.map((c) => (
+            <tr key={`${c.name} ${c.provider}`}>
+              <td>{c.provider}</td>
+              <th scope="row">
+                <code>{c.name}</code>
+              </th>
+              <td>{c.purpose}</td>
+              <td>{c.lasts}</td>
+              <td>{texts[c.category]}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/theme/blocks/faq/Accordion.tsx

@@ -1,34 +1,34 @@
-// Rows that fold out (.block-accordion in ../blocks.css): the standard block "Spørgsmål og svar" (a question, and its
-// answer as it was written: `html`), and "Foldeliste" and a site's own rows of pages (`page`: PageRow.tsx in
-// ../accordion/; this site's topics). Native <details>/<summary>, no JavaScript: the same `name` (`group`; in the
-// editor, without one, its own) keeps one open at a time in each list (browsers without support just allow several).
-// Closed text is still in the HTML for search engines, and the browser's find-in-page opens the row it finds. Opening
-// and closing glide: in CSS where the browser can animate ::details-content, else by script.ts; the text fades in as
-// it opens. Reduced motion: no animation.
-import { useId } from 'react';
-import PageRow from '@theme/blocks/accordion/PageRow';
-import { Svg } from '@morphemecms/cms/src/icon';
-import type { AccordionRow } from '@morphemecms/cms/src/standard/faq/view';
-
-export default function Accordion({ rows, group }: { rows: AccordionRow[]; group?: string }) {
-  const own = useId();
-  return (
-    <div className="block-accordion">
-      {rows.map((row, i) => (
-        <details key={i} name={group ?? own} className="block-accordion-row">
-          <summary className="block-accordion-label">
-            {row.label}
-            <Svg name="caret-down" size={20} className="block-accordion-icon" />
-          </summary>
-          <div className="block-accordion-body">
-            {'html' in row ? (
-              <div className="block-accordion-answer" dangerouslySetInnerHTML={{ __html: row.html }} />
-            ) : (
-              <PageRow {...row.page} />
-            )}
-          </div>
-        </details>
-      ))}
-    </div>
-  );
-}
+// Rows that fold out (.block-accordion in ../blocks.css): the standard block "Spørgsmål og svar" (a question, and its
+// answer as it was written: `html`), and "Foldeliste" and a site's own rows of pages (`page`: PageRow.tsx in
+// ../accordion/; this site's topics). Native <details>/<summary>, no JavaScript: the same `name` (`group`; in the
+// editor, without one, its own) keeps one open at a time in each list (browsers without support just allow several).
+// Closed text is still in the HTML for search engines, and the browser's find-in-page opens the row it finds. Opening
+// and closing glide: in CSS where the browser can animate ::details-content, else by script.ts; the text fades in as
+// it opens. Reduced motion: no animation.
+import { useId } from 'react';
+import PageRow from '@theme/blocks/accordion/PageRow';
+import { Svg } from '@morphemecms/cms/src/icon';
+import type { AccordionRow } from '@morphemecms/cms/src/standard/faq/view';
+
+export default function Accordion({ rows, group }: { rows: AccordionRow[]; group?: string }) {
+  const own = useId();
+  return (
+    <div className="block-accordion">
+      {rows.map((row, i) => (
+        <details key={i} name={group ?? own} className="block-accordion-row">
+          <summary className="block-accordion-label">
+            {row.label}
+            <Svg name="caret-down" size={20} className="block-accordion-icon" />
+          </summary>
+          <div className="block-accordion-body">
+            {'html' in row ? (
+              <div className="block-accordion-answer" dangerouslySetInnerHTML={{ __html: row.html }} />
+            ) : (
+              <PageRow {...row.page} />
+            )}
+          </div>
+        </details>
+      ))}
+    </div>
+  );
+}

package/theme/blocks/faq/View.tsx

@@ -1,16 +1,16 @@
-// "Spørgsmål og svar": its head in the text (BlockHead.tsx), then Accordion.tsx with the space of a block in the text.
-import BlockHead from '@theme/blocks/BlockHead';
-import Accordion from '@theme/blocks/faq/Accordion';
-import type { FaqView } from '@morphemecms/cms/src/standard/faq/view';
-import { useInText } from '@morphemecms/cms/src/standard/view';
-
-export default function Faq({ view }: { view: FaqView }) {
-  return (
-    <>
-      <BlockHead view={view} />
-      <div className={useInText() || undefined}>
-        <Accordion rows={view.rows} group={view.group} />
-      </div>
-    </>
-  );
-}
+// "Spørgsmål og svar": its head in the text (BlockHead.tsx), then Accordion.tsx with the space of a block in the text.
+import BlockHead from '@theme/blocks/BlockHead';
+import Accordion from '@theme/blocks/faq/Accordion';
+import type { FaqView } from '@morphemecms/cms/src/standard/faq/view';
+import { useInText } from '@morphemecms/cms/src/standard/view';
+
+export default function Faq({ view }: { view: FaqView }) {
+  return (
+    <>
+      <BlockHead view={view} />
+      <div className={useInText() || undefined}>
+        <Accordion rows={view.rows} group={view.group} />
+      </div>
+    </>
+  );
+}