@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/theme/blocks/steps/StepList.tsx

@@ -1,23 +1,23 @@
-// Numbered steps along a line, each with a heading and a text (.block-steps in ../blocks.css): the standard block
-// "Trin", and the site's own steps (this site's front page, home/Steps.astro). `className`: the site's own classes on
-// it, e.g. a margin.
-import type { Step } from '@morphemecms/cms/src/standard/steps/view';
-
-export default function StepList({ items, className }: { items: Step[]; className?: string }) {
-  return (
-    <ol className={className ? `block-steps ${className}` : 'block-steps'}>
-      <span className="block-steps-line" aria-hidden="true"></span>
-      {items.map((s, i) => (
-        <li key={i} className="block-step">
-          <span aria-hidden="true" className="block-step-number">
-            {i + 1}
-          </span>
-          <div className="block-step-body">
-            <h3 className="block-step-title">{s.title}</h3>
-            <p className="block-step-text">{s.text}</p>
-          </div>
-        </li>
-      ))}
-    </ol>
-  );
-}
+// Numbered steps along a line, each with a heading and a text (.block-steps in ../blocks.css): the standard block
+// "Trin", and the site's own steps (this site's front page, home/Steps.astro). `className`: the site's own classes on
+// it, e.g. a margin.
+import type { Step } from '@morphemecms/cms/src/standard/steps/view';
+
+export default function StepList({ items, className }: { items: Step[]; className?: string }) {
+  return (
+    <ol className={className ? `block-steps ${className}` : 'block-steps'}>
+      <span className="block-steps-line" aria-hidden="true"></span>
+      {items.map((s, i) => (
+        <li key={i} className="block-step">
+          <span aria-hidden="true" className="block-step-number">
+            {i + 1}
+          </span>
+          <div className="block-step-body">
+            <h3 className="block-step-title">{s.title}</h3>
+            <p className="block-step-text">{s.text}</p>
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}

package/theme/blocks/steps/View.tsx

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

package/theme/blocks/testimonials/List.tsx

@@ -1,46 +1,46 @@
-// Testimonials one after another with the whole text (.block-testimonial-list in ../blocks.css), in two columns where
-// there is room, so long and short texts sit well together: the standard block "Udtalelser" with `layout` 'list'. With
-// `filters`, filter chips (Chip) with their tags over them (.block-filters; with two tags or more): one shows only those with that
-// tag, "Alle" all of them again (on the site by script.ts; without JavaScript all are shown and the buttons are hidden;
-// in the editor only drawn, "Alle" chosen). Each has its anchor, so a short one elsewhere can link to it.
-import { siteT } from '@morphemecms/cms/src/i18n';
-import type { TestimonialTexts, TestimonialView } from '@morphemecms/cms/src/standard/testimonials/view';
-import { useOnSite } from '@morphemecms/cms/src/standard/view';
-import Testimonial from '@theme/blocks/testimonials/Testimonial';
-import Chip from '@theme/ui/Chip';
-
-const say = siteT.blocks.testimonials;
-
-export default function List({
-  testimonials,
-  texts,
-  filters,
-  className,
-}: {
-  testimonials: TestimonialView[];
-  texts: TestimonialTexts;
-  filters: { slug: string; name: string }[];
-  className?: string;
-}) {
-  const onSite = useOnSite();
-  if (testimonials.length === 0 && !onSite) return <p className="block-empty">{say.none}</p>;
-  return (
-    <div className={className ? `block-testimonials ${className}` : 'block-testimonials'} data-testimonial-filter="">
-      {filters.length > 1 && (
-        <div className="block-filters" role="group" aria-label={say.filterLabel} hidden={onSite} data-filters="">
-          <Chip kind="filter" label={say.filterAll} selected data-tag="" />
-          {filters.map((tag) => (
-            <Chip key={tag.slug} kind="filter" label={tag.name} data-tag={tag.slug} />
-          ))}
-        </div>
-      )}
-      <div className="block-testimonial-list">
-        {testimonials.map((t) => (
-          <div key={t.slug} data-tags={t.categories.join(' ')}>
-            <Testimonial testimonial={t} texts={texts} full />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
+// Testimonials one after another with the whole text (.block-testimonial-list in ../blocks.css), in two columns where
+// there is room, so long and short texts sit well together: the standard block "Udtalelser" with `layout` 'list'. With
+// `filters`, filter chips (Chip) with their tags over them (.block-filters; with two tags or more): one shows only those with that
+// tag, "Alle" all of them again (on the site by script.ts; without JavaScript all are shown and the buttons are hidden;
+// in the editor only drawn, "Alle" chosen). Each has its anchor, so a short one elsewhere can link to it.
+import { siteT } from '@morphemecms/cms/src/i18n';
+import type { TestimonialTexts, TestimonialView } from '@morphemecms/cms/src/standard/testimonials/view';
+import { useOnSite } from '@morphemecms/cms/src/standard/view';
+import Testimonial from '@theme/blocks/testimonials/Testimonial';
+import Chip from '@theme/ui/Chip';
+
+const say = siteT.blocks.testimonials;
+
+export default function List({
+  testimonials,
+  texts,
+  filters,
+  className,
+}: {
+  testimonials: TestimonialView[];
+  texts: TestimonialTexts;
+  filters: { slug: string; name: string }[];
+  className?: string;
+}) {
+  const onSite = useOnSite();
+  if (testimonials.length === 0 && !onSite) return <p className="block-empty">{say.none}</p>;
+  return (
+    <div className={className ? `block-testimonials ${className}` : 'block-testimonials'} data-testimonial-filter="">
+      {filters.length > 1 && (
+        <div className="block-filters" role="group" aria-label={say.filterLabel} hidden={onSite} data-filters="">
+          <Chip kind="filter" label={say.filterAll} selected data-tag="" />
+          {filters.map((tag) => (
+            <Chip key={tag.slug} kind="filter" label={tag.name} data-tag={tag.slug} />
+          ))}
+        </div>
+      )}
+      <div className="block-testimonial-list">
+        {testimonials.map((t) => (
+          <div key={t.slug} data-tags={t.categories.join(' ')}>
+            <Testimonial testimonial={t} texts={texts} full />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/theme/blocks/testimonials/Slider.tsx

@@ -1,44 +1,44 @@
-// Testimonials to leaf through in a carousel (Carousel.tsx in ../../ui/): the standard block "Udtalelser", and a site's
-// own (this site's front page). One card with the next one peeking in at the edge, two on a tablet, three on a
-// computer, with the carousel's page indicator under them. With one testimonial it is just the card (Testimonial.tsx);
-// in the editor with none, a note. `label`: what it is called for screen readers; `short`: two lines each, with a link
-// to the whole text.
-import { siteT } from '@morphemecms/cms/src/i18n';
-import type { TestimonialTexts, TestimonialView } from '@morphemecms/cms/src/standard/testimonials/view';
-import { useOnSite } from '@morphemecms/cms/src/standard/view';
-import Testimonial from '@theme/blocks/testimonials/Testimonial';
-import Carousel from '@theme/ui/Carousel';
-
-const say = siteT.blocks.testimonials;
-
-export default function Slider({
-  testimonials,
-  texts,
-  label,
-  short = false,
-  className,
-}: {
-  testimonials: TestimonialView[];
-  texts: TestimonialTexts;
-  label: string;
-  short?: boolean;
-  className?: string;
-}) {
-  const onSite = useOnSite();
-  if (testimonials.length === 0) return onSite ? null : <p className="block-empty">{say.none}</p>;
-  if (testimonials.length === 1) return <Testimonial testimonial={testimonials[0]} texts={texts} short={short} className={className} />;
-  return (
-    <Carousel
-      label={label}
-      roleDescription={say.carousel}
-      itemRoleDescription={say.slide}
-      items={testimonials.map((t, i) => ({
-        key: t.slug,
-        label: say.slideOf(i + 1, testimonials.length),
-        content: <Testimonial testimonial={t} texts={texts} short={short} />,
-      }))}
-      indicatorLabels={testimonials.map((t, i) => say.show1(i + 1, t.name))}
-      className={className}
-    />
-  );
-}
+// Testimonials to leaf through in a carousel (Carousel.tsx in ../../ui/): the standard block "Udtalelser", and a site's
+// own (this site's front page). One card with the next one peeking in at the edge, two on a tablet, three on a
+// computer, with the carousel's page indicator under them. With one testimonial it is just the card (Testimonial.tsx);
+// in the editor with none, a note. `label`: what it is called for screen readers; `short`: two lines each, with a link
+// to the whole text.
+import { siteT } from '@morphemecms/cms/src/i18n';
+import type { TestimonialTexts, TestimonialView } from '@morphemecms/cms/src/standard/testimonials/view';
+import { useOnSite } from '@morphemecms/cms/src/standard/view';
+import Testimonial from '@theme/blocks/testimonials/Testimonial';
+import Carousel from '@theme/ui/Carousel';
+
+const say = siteT.blocks.testimonials;
+
+export default function Slider({
+  testimonials,
+  texts,
+  label,
+  short = false,
+  className,
+}: {
+  testimonials: TestimonialView[];
+  texts: TestimonialTexts;
+  label: string;
+  short?: boolean;
+  className?: string;
+}) {
+  const onSite = useOnSite();
+  if (testimonials.length === 0) return onSite ? null : <p className="block-empty">{say.none}</p>;
+  if (testimonials.length === 1) return <Testimonial testimonial={testimonials[0]} texts={texts} short={short} className={className} />;
+  return (
+    <Carousel
+      label={label}
+      roleDescription={say.carousel}
+      itemRoleDescription={say.slide}
+      items={testimonials.map((t, i) => ({
+        key: t.slug,
+        label: say.slideOf(i + 1, testimonials.length),
+        content: <Testimonial testimonial={t} texts={texts} short={short} />,
+      }))}
+      indicatorLabels={testimonials.map((t, i) => say.show1(i + 1, t.name))}
+      className={className}
+    />
+  );
+}

package/theme/blocks/testimonials/Testimonial.tsx

@@ -1,124 +1,124 @@
-// One testimonial, word for word, on an outlined card (Card.tsx in ../../ui/, .block-testimonial in ../blocks.css): the
-// standard block "Udtalelser" (Slider.tsx, List.tsx), and a site's own testimonials (this site's front page). A long
-// text is cut after seven lines with a "Læs mere" button that unfolds it in place: on the site by script.ts (only with
-// JavaScript; without it the whole text is shown), in the editor here. `full` always shows everything, with the anchor the testimonials page has it by. Its
-// tags (none unless shown) are chips (Chip), each a link to the tag's page when it has one. `short` shows the first two lines and
-// links to the whole text on the testimonials page. "Læs mere" and "Vis mindre" are the block's shared texts. Before
-// the name its picture, round, or without one the theme's mark, with the name's first letter as `data-initial` for a
-// theme that shows it (the standard theme's and Material's avatars; a theme with a logo as its mark leaves it out).
-import { useLayoutEffect, useRef, useState } from 'react';
-import Card from '@theme/ui/Card';
-import { Svg } from '@morphemecms/cms/src/icon';
-import { siteT } from '@morphemecms/cms/src/i18n';
-import type { TestimonialTexts, TestimonialView } from '@morphemecms/cms/src/standard/testimonials/view';
-import { Link, useOnSite } from '@morphemecms/cms/src/standard/view';
-import Chip from '@theme/ui/Chip';
-
-export default function Testimonial({
-  testimonial: t,
-  texts,
-  full = false,
-  short = false,
-  className,
-}: {
-  testimonial: TestimonialView;
-  texts: TestimonialTexts;
-  full?: boolean;
-  short?: boolean;
-  className?: string;
-}) {
-  const onSite = useOnSite();
-  // In the editor: whether it is unfolded, and whether its text is cut (measured once it is drawn).
-  const [open, setOpen] = useState(false);
-  const [cut, setCut] = useState(true);
-  const text = useRef<HTMLQuoteElement>(null);
-  useLayoutEffect(() => {
-    const el = text.current;
-    if (el && !open && !onSite) setCut(el.scrollHeight > el.clientHeight + 2);
-  });
-  const clamp = !full && !open && !onSite;
-  return (
-    <Card
-      as="figure"
-      className={className ? `block-testimonial ${className}` : 'block-testimonial'}
-      data-testimonial=""
-      id={full ? t.anchor : undefined}
-    >
-      <div className="block-testimonial-head">
-        <span className="block-testimonial-quote-mark" aria-hidden="true">
-          “
-        </span>
-        {t.tags.length > 0 && (
-          <span className="block-testimonial-tags">
-            {t.tags.map((tag) =>
-              tag.href ? <Chip key={tag.name} href={tag.href} label={tag.name} /> : <Chip key={tag.name} plain label={tag.name} />,
-            )}
-          </span>
-        )}
-      </div>
-      {short ? (
-        <>
-          <blockquote className="block-testimonial-text block-testimonial-short">{t.quote.join(' ')}</blockquote>
-          <Link href={t.href} className="block-testimonial-more">
-            {texts.more} <span className="block-sr-only">{siteT.blocks.testimonials.from(t.name)}</span>
-            <Svg name="arrow-right" size={16} />
-          </Link>
-        </>
-      ) : (
-        <blockquote
-          ref={text}
-          className="block-testimonial-text"
-          data-clamp={full ? undefined : ''}
-          style={
-            clamp
-              ? {
-                  maxHeight: 'calc(1.625em * 7)',
-                  overflow: 'hidden',
-                  // Faded at the bottom only when it is cut.
-                  ...(cut ? { maskImage: 'linear-gradient(to bottom, #000 55%, transparent)' } : {}),
-                }
-              : undefined
-          }
-        >
-          {t.context && <p className="block-testimonial-context">{t.context}</p>}
-          {t.quote.map((p, i) => (
-            <p key={i}>{p}</p>
-          ))}
-        </blockquote>
-      )}
-      {!full && !short && (
-        <button
-          type="button"
-          className="block-testimonial-more"
-          aria-expanded={open}
-          data-expand=""
-          data-more={texts.more}
-          data-less={texts.less}
-          hidden={onSite || !cut}
-          onClick={() => setOpen(!open)}
-        >
-          <span>{open ? texts.less : texts.more}</span>
-          <Svg name="caret-down" size={16} />
-        </button>
-      )}
-      <figcaption className="block-testimonial-name">
-        {t.image ? (
-          <img
-            className="block-testimonial-picture"
-            src={t.image.src}
-            srcSet={t.image.srcset}
-            sizes={t.image.srcset ? '48px' : undefined}
-            width={t.image.width}
-            height={t.image.height}
-            alt=""
-            loading="lazy"
-            decoding="async"
-          />
-        ) : (
-          <span className="block-testimonial-mark" aria-hidden="true" data-initial={[...t.name.trim()][0]?.toLocaleUpperCase()}></span>
-        )}
-        {t.name}
-      </figcaption>
-    </Card>
-  );
-}
+// One testimonial, word for word, on an outlined card (Card.tsx in ../../ui/, .block-testimonial in ../blocks.css): the
+// standard block "Udtalelser" (Slider.tsx, List.tsx), and a site's own testimonials (this site's front page). A long
+// text is cut after seven lines with a "Læs mere" button that unfolds it in place: on the site by script.ts (only with
+// JavaScript; without it the whole text is shown), in the editor here. `full` always shows everything, with the anchor the testimonials page has it by. Its
+// tags (none unless shown) are chips (Chip), each a link to the tag's page when it has one. `short` shows the first two lines and
+// links to the whole text on the testimonials page. "Læs mere" and "Vis mindre" are the block's shared texts. Before
+// the name its picture, round, or without one the theme's mark, with the name's first letter as `data-initial` for a
+// theme that shows it (the standard theme's and Material's avatars; a theme with a logo as its mark leaves it out).
+import { useLayoutEffect, useRef, useState } from 'react';
+import Card from '@theme/ui/Card';
+import { Svg } from '@morphemecms/cms/src/icon';
+import { siteT } from '@morphemecms/cms/src/i18n';
+import type { TestimonialTexts, TestimonialView } from '@morphemecms/cms/src/standard/testimonials/view';
+import { Link, useOnSite } from '@morphemecms/cms/src/standard/view';
+import Chip from '@theme/ui/Chip';
+
+export default function Testimonial({
+  testimonial: t,
+  texts,
+  full = false,
+  short = false,
+  className,
+}: {
+  testimonial: TestimonialView;
+  texts: TestimonialTexts;
+  full?: boolean;
+  short?: boolean;
+  className?: string;
+}) {
+  const onSite = useOnSite();
+  // In the editor: whether it is unfolded, and whether its text is cut (measured once it is drawn).
+  const [open, setOpen] = useState(false);
+  const [cut, setCut] = useState(true);
+  const text = useRef<HTMLQuoteElement>(null);
+  useLayoutEffect(() => {
+    const el = text.current;
+    if (el && !open && !onSite) setCut(el.scrollHeight > el.clientHeight + 2);
+  });
+  const clamp = !full && !open && !onSite;
+  return (
+    <Card
+      as="figure"
+      className={className ? `block-testimonial ${className}` : 'block-testimonial'}
+      data-testimonial=""
+      id={full ? t.anchor : undefined}
+    >
+      <div className="block-testimonial-head">
+        <span className="block-testimonial-quote-mark" aria-hidden="true">
+          “
+        </span>
+        {t.tags.length > 0 && (
+          <span className="block-testimonial-tags">
+            {t.tags.map((tag) =>
+              tag.href ? <Chip key={tag.name} href={tag.href} label={tag.name} /> : <Chip key={tag.name} plain label={tag.name} />,
+            )}
+          </span>
+        )}
+      </div>
+      {short ? (
+        <>
+          <blockquote className="block-testimonial-text block-testimonial-short">{t.quote.join(' ')}</blockquote>
+          <Link href={t.href} className="block-testimonial-more">
+            {texts.more} <span className="block-sr-only">{siteT.blocks.testimonials.from(t.name)}</span>
+            <Svg name="arrow-right" size={16} />
+          </Link>
+        </>
+      ) : (
+        <blockquote
+          ref={text}
+          className="block-testimonial-text"
+          data-clamp={full ? undefined : ''}
+          style={
+            clamp
+              ? {
+                  maxHeight: 'calc(1.625em * 7)',
+                  overflow: 'hidden',
+                  // Faded at the bottom only when it is cut.
+                  ...(cut ? { maskImage: 'linear-gradient(to bottom, #000 55%, transparent)' } : {}),
+                }
+              : undefined
+          }
+        >
+          {t.context && <p className="block-testimonial-context">{t.context}</p>}
+          {t.quote.map((p, i) => (
+            <p key={i}>{p}</p>
+          ))}
+        </blockquote>
+      )}
+      {!full && !short && (
+        <button
+          type="button"
+          className="block-testimonial-more"
+          aria-expanded={open}
+          data-expand=""
+          data-more={texts.more}
+          data-less={texts.less}
+          hidden={onSite || !cut}
+          onClick={() => setOpen(!open)}
+        >
+          <span>{open ? texts.less : texts.more}</span>
+          <Svg name="caret-down" size={16} />
+        </button>
+      )}
+      <figcaption className="block-testimonial-name">
+        {t.image ? (
+          <img
+            className="block-testimonial-picture"
+            src={t.image.src}
+            srcSet={t.image.srcset}
+            sizes={t.image.srcset ? '48px' : undefined}
+            width={t.image.width}
+            height={t.image.height}
+            alt=""
+            loading="lazy"
+            decoding="async"
+          />
+        ) : (
+          <span className="block-testimonial-mark" aria-hidden="true" data-initial={[...t.name.trim()][0]?.toLocaleUpperCase()}></span>
+        )}
+        {t.name}
+      </figcaption>
+    </Card>
+  );
+}

package/theme/blocks/testimonials/View.tsx

@@ -1,21 +1,21 @@
-// "Udtalelser": its head in the text (BlockHead.tsx), then its testimonials in Slider.tsx or (`layout` 'list') List.tsx, with the
-// space of a block in the text.
-import BlockHead from '@theme/blocks/BlockHead';
-import List from '@theme/blocks/testimonials/List';
-import Slider from '@theme/blocks/testimonials/Slider';
-import type { TestimonialsView } from '@morphemecms/cms/src/standard/testimonials/view';
-import { useInText } from '@morphemecms/cms/src/standard/view';
-
-export default function Testimonials({ view }: { view: TestimonialsView }) {
-  const inText = useInText() || 'block-in-text';
-  return (
-    <>
-      <BlockHead view={view} />
-      {view.layout === 'list' ? (
-        <List testimonials={view.testimonials} texts={view.texts} filters={view.filters} className={inText} />
-      ) : (
-        <Slider testimonials={view.testimonials} texts={view.texts} label={view.label} className={inText} />
-      )}
-    </>
-  );
-}
+// "Udtalelser": its head in the text (BlockHead.tsx), then its testimonials in Slider.tsx or (`layout` 'list') List.tsx, with the
+// space of a block in the text.
+import BlockHead from '@theme/blocks/BlockHead';
+import List from '@theme/blocks/testimonials/List';
+import Slider from '@theme/blocks/testimonials/Slider';
+import type { TestimonialsView } from '@morphemecms/cms/src/standard/testimonials/view';
+import { useInText } from '@morphemecms/cms/src/standard/view';
+
+export default function Testimonials({ view }: { view: TestimonialsView }) {
+  const inText = useInText() || 'block-in-text';
+  return (
+    <>
+      <BlockHead view={view} />
+      {view.layout === 'list' ? (
+        <List testimonials={view.testimonials} texts={view.texts} filters={view.filters} className={inText} />
+      ) : (
+        <Slider testimonials={view.testimonials} texts={view.texts} label={view.label} className={inText} />
+      )}
+    </>
+  );
+}