@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/src/standard/video/index.tsx

@@ -1,23 +1,23 @@
-// "Video", a standard block: the link to a video from YouTube or Vimeo and a title. On the site the title and the play
-// button over a still from the video, which is only loaded when it is played (packages/editor/lib/video.mjs). How it
-// looks is the theme's (packages/editor/theme/blocks/video/View.tsx; what it shows: view.ts, and load.ts on the site).
-import { VideoCamera } from '@phosphor-icons/react';
-import { defineBlock } from '../../blocks';
-import { t } from '../../i18n';
-
-export default defineBlock({
-  label: t.blocks.video.label,
-  icon: VideoCamera,
-  hint: t.blocks.video.hint,
-  fields: [
-    {
-      name: 'url',
-      label: t.blocks.video.url,
-      type: 'string',
-      required: true,
-      pattern: ['(youtube(-nocookie)?\\.com|youtu\\.be|vimeo\\.com)/', t.blocks.video.urlProblem],
-    },
-    { name: 'title', label: t.blocks.video.title, type: 'string' },
-  ],
-  detail: (p) => [String(p.title || t.blocks.video.video), String(p.url ?? '')],
-});
+// "Video", a standard block: the link to a video from YouTube or Vimeo and a title. On the site the title and the play
+// button over a still from the video, which is only loaded when it is played (packages/editor/lib/video.mjs). How it
+// looks is the theme's (packages/editor/theme/blocks/video/View.tsx; what it shows: view.ts, and load.ts on the site).
+import { VideoCamera } from '@phosphor-icons/react';
+import { defineBlock } from '../../blocks';
+import { t } from '../../i18n';
+
+export default defineBlock({
+  label: t.blocks.video.label,
+  icon: VideoCamera,
+  hint: t.blocks.video.hint,
+  fields: [
+    {
+      name: 'url',
+      label: t.blocks.video.url,
+      type: 'string',
+      required: true,
+      pattern: ['(youtube(-nocookie)?\\.com|youtu\\.be|vimeo\\.com)/', t.blocks.video.urlProblem],
+    },
+    { name: 'title', label: t.blocks.video.title, type: 'string' },
+  ],
+  detail: (p) => [String(p.title || t.blocks.video.video), String(p.url ?? '')],
+});

package/src/standard/video/load.ts

@@ -1,10 +1,10 @@
-// "Video" on the site (view.ts): as a video written in the text (facadeOf, ../../../lib/video.mjs).
-import { facadeOf } from '../../../lib/video.mjs';
-import { videoOf } from '../../../lib/video-id.mjs';
-import type { Load } from '../view';
-import type { VideoView } from './view';
-
-export const load: Load<VideoView> = async (props) => {
-  const video = videoOf(String(props.url ?? ''));
-  return video && facadeOf(video, props.title);
-};
+// "Video" on the site (view.ts): as a video written in the text (facadeOf, ../../../lib/video.mjs).
+import { facadeOf } from '../../../lib/video.mjs';
+import { videoOf } from '../../../lib/video-id.mjs';
+import type { Load } from '../view';
+import type { VideoView } from './view';
+
+export const load: Load<VideoView> = async (props) => {
+  const video = videoOf(String(props.url ?? ''));
+  return video && facadeOf(video, props.title);
+};

package/src/standard/video/view.ts

@@ -1,42 +1,42 @@
-// What "Video" shows (its view, drawn by the theme's View.tsx): the link that stands in for the video until it is
-// played (../../../lib/video.mjs): the video's page, the address that plays it, its title, and its still from the site
-// (packages/editor/scripts/video-thumbnails.mjs). In the editor (viewOf) the still is the one the site would have, and, when the site
-// does not have it yet (a video it has not been built with), YouTube's or Vimeo's (`stillElsewhere`); on the site
-// (load.ts) the site's, when it could be fetched. On the site nothing for an address that is not a video; in the
-// editor the plain box.
-import { player, stillName, videoOf, videoPage, vimeoInfo } from '../../../lib/video-id.mjs';
-import type { ViewOf } from '../view';
-
-export type VideoView = {
-  href: string;
-  player: string;
-  title: string;
-  still: { src: string; srcset?: string } | null;
-  /** In the editor: YouTube's or Vimeo's still, for when the site has none. */
-  stillElsewhere?: () => Promise<string | null>;
-};
-
-/** The still YouTube or Vimeo has of a video, or null. */
-async function theirStill(video: NonNullable<ReturnType<typeof videoOf>>): Promise<string | null> {
-  if (video.site === 'youtube') return `https://i.ytimg.com/vi/${video.id}/hqdefault.jpg`;
-  try {
-    const res = await fetch(vimeoInfo(video, 960));
-    return res.ok ? ((await res.json()).thumbnail_url ?? null) : null;
-  } catch {
-    return null;
-  }
-}
-
-export const viewOf: ViewOf<VideoView> = (props) => {
-  const video = videoOf(String(props.url ?? ''));
-  const title = String(props.title || 'Video');
-  // While its link is not (yet) a video's: the plain box.
-  if (!video) return { href: '', player: '', title, still: null };
-  return {
-    href: videoPage(video),
-    player: player(video),
-    title,
-    still: { src: `/images/_video/${stillName(video)}-960.webp` },
-    stillElsewhere: () => theirStill(video),
-  };
-};
+// What "Video" shows (its view, drawn by the theme's View.tsx): the link that stands in for the video until it is
+// played (../../../lib/video.mjs): the video's page, the address that plays it, its title, and its still from the site
+// (packages/editor/scripts/video-thumbnails.mjs). In the editor (viewOf) the still is the one the site would have, and, when the site
+// does not have it yet (a video it has not been built with), YouTube's or Vimeo's (`stillElsewhere`); on the site
+// (load.ts) the site's, when it could be fetched. On the site nothing for an address that is not a video; in the
+// editor the plain box.
+import { player, stillName, videoOf, videoPage, vimeoInfo } from '../../../lib/video-id.mjs';
+import type { ViewOf } from '../view';
+
+export type VideoView = {
+  href: string;
+  player: string;
+  title: string;
+  still: { src: string; srcset?: string } | null;
+  /** In the editor: YouTube's or Vimeo's still, for when the site has none. */
+  stillElsewhere?: () => Promise<string | null>;
+};
+
+/** The still YouTube or Vimeo has of a video, or null. */
+async function theirStill(video: NonNullable<ReturnType<typeof videoOf>>): Promise<string | null> {
+  if (video.site === 'youtube') return `https://i.ytimg.com/vi/${video.id}/hqdefault.jpg`;
+  try {
+    const res = await fetch(vimeoInfo(video, 960));
+    return res.ok ? ((await res.json()).thumbnail_url ?? null) : null;
+  } catch {
+    return null;
+  }
+}
+
+export const viewOf: ViewOf<VideoView> = (props) => {
+  const video = videoOf(String(props.url ?? ''));
+  const title = String(props.title || 'Video');
+  // While its link is not (yet) a video's: the plain box.
+  if (!video) return { href: '', player: '', title, still: null };
+  return {
+    href: videoPage(video),
+    player: player(video),
+    title,
+    still: { src: `/images/_video/${stillName(video)}-960.webp` },
+    stillElsewhere: () => theirStill(video),
+  };
+};

package/src/standard/view.tsx

@@ -1,105 +1,105 @@
-// One drawing of a standard block, for the site and the editor alike. A standard block's contract says what it shows
-// (view.ts in its folder here: the type of its view, and viewOf, which makes it from the block's fields and the
-// site's data in the editor; load.ts: the same view on the site, when it is built), and the theme draws that view
-// (View.tsx in the theme's blocks/<type>/, a React component given `view`). On the site BlockSite.astro loads the view
-// and has React draw it as HTML, without sending any JavaScript; in the editor registry.tsx draws it as the block's
-// `draw`. The parts a theme's drawings are made of (Buttons, LinkCards …) are React components too, which the site's
-// Astro components show the same way. What differs between the two is said here, so the drawing is the same: a link
-// is a link only on the site (Link), and only there does a block stand in the text (useInText). A drawing is on the
-// site unless the editor says otherwise (InEditor, around the editor and its pictures of the blocks).
-import { createContext, useContext, type ComponentType, type ReactNode } from 'react';
-import type { BlockData } from '../blocks';
-import { shownAt } from '../images';
-
-const Editor = createContext(false);
-// The editor's own screens, which are drawn with the theme's UI parts too (packages/editor/src/ui.tsx): their links lead
-// somewhere. What the editor draws of the site in them (a preview, a picture of a block) is InEditor again.
-const Own = createContext(false);
-
-/** What is drawn in it is in the editor: the editor (App.tsx) and its pictures of the blocks (registry.tsx, Preview). */
-export const InEditor = ({ children }: { children: ReactNode }) => (
-  <Editor.Provider value={true}>
-    <Own.Provider value={false}>{children}</Own.Provider>
-  </Editor.Provider>
-);
-
-/** The editor's own screens (App.tsx), in the editor: a Link in them is a link. */
-export const EditorOwn = ({ children }: { children: ReactNode }) => <Own.Provider value={true}>{children}</Own.Provider>;
-
-/** Whether the block is drawn on the site (as HTML, when it is built), not in the editor. */
-export const useOnSite = () => !useContext(Editor);
-
-/** The classes of a block's outermost element on the site: out of the text's style (not-prose), with the space a
- * block has in the text (.block-in-text); in the editor, where it is drawn on its own, none. With the block's own
- * classes after them. */
-export function useInText(...classes: (string | false | undefined)[]): string {
-  return [useOnSite() && 'not-prose block-in-text', ...classes].filter(Boolean).join(' ');
-}
-
-/** Something in the text's style (prose): on the site it is in the text already; in the editor it is drawn in a box of
- * that style. */
-export function InProse({ children }: { children: ReactNode }) {
-  return useOnSite() ? children : <div className="prose max-w-none">{children}</div>;
-}
-
-/** A link on the site and on the editor's own screens (EditorOwn); in what the editor draws of the site only drawn (its
- * text, with the same classes and the attributes that say its state, aria-current and data-…, which the theme styles),
- * so nothing leads away from it. */
-export function Link({
-  href,
-  className,
-  children,
-  ...rest
-}: { href: string; className?: string; children: ReactNode } & Record<string, unknown>) {
-  const state = Object.fromEntries(Object.entries(rest).filter(([k]) => k === 'aria-current' || k.startsWith('data-')));
-  const own = useContext(Own);
-  return useOnSite() || own ? (
-    <a href={href} className={className} {...rest}>
-      {children}
-    </a>
-  ) : (
-    <span className={className} {...state}>
-      {children}
-    </span>
-  );
-}
-
-/** A picture with the sizes the site has made of it (srcset, width and height), for the browser to pick the one that
- * fits (pictureOf, load.ts); in the editor only the picture. */
-export type Picture = { src: string; srcset?: string; width?: number; height?: number };
-
-/** A picture in the editor: as it is shown there (shownAt: one made ready in this visit, from the browser). */
-export const shownPicture = (src: string): Picture => ({ src: shownAt(src) });
-
-/** What a block's contract makes its view from in the editor (view.ts): its fields and the site's data. Null: nothing
- * is shown. */
-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 };
-
-/** 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>;
-
-/** A block's load.ts: its view on the site, and what is put right after it there (`after`: HTML, e.g. a script that
- * runs as the page is read, or structured data). */
-export type Contract<V> = {
-  load: Load<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;
-};
-
-/** The kinds of a button, as Material 3 names them (m3.material.io/components/buttons): what a block's or an app's
- * button is (a button's `kind` in its view), which the theme's Button (ui/Button.tsx) draws in its look. */
-export const buttonKinds = ['filled', 'tonal', 'elevated', 'outlined', 'text'] as const;
-export type ButtonKind = (typeof buttonKinds)[number];
-
-/** The kinds of an icon button, as Material 3 names them (m3.material.io/components/icon-buttons), drawn by the
- * theme's IconButton (ui/IconButton.tsx). */
-export const iconButtonKinds = ['standard', 'filled', 'tonal', 'outlined'] as const;
-export type IconButtonKind = (typeof iconButtonKinds)[number];
-
-/** A theme's drawing of a block (View.tsx). */
-export type View<V> = ComponentType<{ view: V }>;
+// One drawing of a standard block, for the site and the editor alike. A standard block's contract says what it shows
+// (view.ts in its folder here: the type of its view, and viewOf, which makes it from the block's fields and the
+// site's data in the editor; load.ts: the same view on the site, when it is built), and the theme draws that view
+// (View.tsx in the theme's blocks/<type>/, a React component given `view`). On the site BlockSite.astro loads the view
+// and has React draw it as HTML, without sending any JavaScript; in the editor registry.tsx draws it as the block's
+// `draw`. The parts a theme's drawings are made of (Buttons, LinkCards …) are React components too, which the site's
+// Astro components show the same way. What differs between the two is said here, so the drawing is the same: a link
+// is a link only on the site (Link), and only there does a block stand in the text (useInText). A drawing is on the
+// site unless the editor says otherwise (InEditor, around the editor and its pictures of the blocks).
+import { createContext, useContext, type ComponentType, type ReactNode } from 'react';
+import type { BlockData } from '../blocks';
+import { shownAt } from '../images';
+
+const Editor = createContext(false);
+// The editor's own screens, which are drawn with the theme's UI parts too (packages/editor/src/ui.tsx): their links lead
+// somewhere. What the editor draws of the site in them (a preview, a picture of a block) is InEditor again.
+const Own = createContext(false);
+
+/** What is drawn in it is in the editor: the editor (App.tsx) and its pictures of the blocks (registry.tsx, Preview). */
+export const InEditor = ({ children }: { children: ReactNode }) => (
+  <Editor.Provider value={true}>
+    <Own.Provider value={false}>{children}</Own.Provider>
+  </Editor.Provider>
+);
+
+/** The editor's own screens (App.tsx), in the editor: a Link in them is a link. */
+export const EditorOwn = ({ children }: { children: ReactNode }) => <Own.Provider value={true}>{children}</Own.Provider>;
+
+/** Whether the block is drawn on the site (as HTML, when it is built), not in the editor. */
+export const useOnSite = () => !useContext(Editor);
+
+/** The classes of a block's outermost element on the site: out of the text's style (not-prose), with the space a
+ * block has in the text (.block-in-text); in the editor, where it is drawn on its own, none. With the block's own
+ * classes after them. */
+export function useInText(...classes: (string | false | undefined)[]): string {
+  return [useOnSite() && 'not-prose block-in-text', ...classes].filter(Boolean).join(' ');
+}
+
+/** Something in the text's style (prose): on the site it is in the text already; in the editor it is drawn in a box of
+ * that style. */
+export function InProse({ children }: { children: ReactNode }) {
+  return useOnSite() ? children : <div className="prose max-w-none">{children}</div>;
+}
+
+/** A link on the site and on the editor's own screens (EditorOwn); in what the editor draws of the site only drawn (its
+ * text, with the same classes and the attributes that say its state, aria-current and data-…, which the theme styles),
+ * so nothing leads away from it. */
+export function Link({
+  href,
+  className,
+  children,
+  ...rest
+}: { href: string; className?: string; children: ReactNode } & Record<string, unknown>) {
+  const state = Object.fromEntries(Object.entries(rest).filter(([k]) => k === 'aria-current' || k.startsWith('data-')));
+  const own = useContext(Own);
+  return useOnSite() || own ? (
+    <a href={href} className={className} {...rest}>
+      {children}
+    </a>
+  ) : (
+    <span className={className} {...state}>
+      {children}
+    </span>
+  );
+}
+
+/** A picture with the sizes the site has made of it (srcset, width and height), for the browser to pick the one that
+ * fits (pictureOf, load.ts); in the editor only the picture. */
+export type Picture = { src: string; srcset?: string; width?: number; height?: number };
+
+/** A picture in the editor: as it is shown there (shownAt: one made ready in this visit, from the browser). */
+export const shownPicture = (src: string): Picture => ({ src: shownAt(src) });
+
+/** What a block's contract makes its view from in the editor (view.ts): its fields and the site's data. Null: nothing
+ * is shown. */
+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 };
+
+/** 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>;
+
+/** A block's load.ts: its view on the site, and what is put right after it there (`after`: HTML, e.g. a script that
+ * runs as the page is read, or structured data). */
+export type Contract<V> = {
+  load: Load<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;
+};
+
+/** The kinds of a button, as Material 3 names them (m3.material.io/components/buttons): what a block's or an app's
+ * button is (a button's `kind` in its view), which the theme's Button (ui/Button.tsx) draws in its look. */
+export const buttonKinds = ['filled', 'tonal', 'elevated', 'outlined', 'text'] as const;
+export type ButtonKind = (typeof buttonKinds)[number];
+
+/** The kinds of an icon button, as Material 3 names them (m3.material.io/components/icon-buttons), drawn by the
+ * theme's IconButton (ui/IconButton.tsx). */
+export const iconButtonKinds = ['standard', 'filled', 'tonal', 'outlined'] as const;
+export type IconButtonKind = (typeof iconButtonKinds)[number];
+
+/** A theme's drawing of a block (View.tsx). */
+export type View<V> = ComponentType<{ view: V }>;

package/src/standard/views.ts

@@ -1,37 +1,37 @@
-// Every block on the site drawn from its view (view.tsx): its drawing and its contract's load.ts, by type. A standard
-// block's drawing is the theme in use's View.tsx, else the standard theme's; an app's block is its own
-// (src/apps/<app>/blocks/), and is used instead of a standard one by its name.
-import { appLooks, themeViews } from './siteLooks';
-import type { Contract, View } from './view';
-import { parseBlock } from '../../lib/blocks.mjs';
-
-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 }>) =>
-  Object.fromEntries(Object.entries(byType(found)).map(([type, m]) => [type, m.default]));
-
-/** The drawing of each block, by its type (BlockSite.astro). */
-export const blockViews: Record<string, View<any>> = {
-  ...defaults(themeViews.standard),
-  ...defaults(themeViews.own),
-  ...defaults(appLooks.views),
-};
-
-/** Each block's view on the site, by its type: the standard blocks' contracts (load.ts here), and the apps'. */
-export const blockLoads: Record<string, Contract<any>> = {
-  ...byType(import.meta.glob<Contract<any>>('./*/load.ts', { eager: true })),
-  ...byType(appLooks.loads),
-};
-
-// 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*$/;
-
-/** The block that ends a page's text, when its type is drawn across the page (`across` in its load.ts, e.g. an app's
- * booking block): its type and props, and the text without it, for the theme's page layout to draw it below the
- * text (EndBlock.astro). Null when the text ends otherwise, or the block is hidden. */
-export function endBlock(html: string): { type: string; props: Record<string, unknown>; html: string } | null {
-  const end = html.match(END);
-  if (!end || !blockLoads[end[1]]?.across) return null;
-  const block = parseBlock(end[0]);
-  if (!block || block.props.hidden) return null;
-  return { type: end[1], props: block.props, html: html.replace(END, '') };
-}
+// Every block on the site drawn from its view (view.tsx): its drawing and its contract's load.ts, by type. A standard
+// block's drawing is the theme in use's View.tsx, else the standard theme's; an app's block is its own
+// (src/apps/<app>/blocks/), and is used instead of a standard one by its name.
+import { appLooks, themeViews } from './siteLooks';
+import type { Contract, View } from './view';
+import { parseBlock } from '../../lib/blocks.mjs';
+
+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 }>) =>
+  Object.fromEntries(Object.entries(byType(found)).map(([type, m]) => [type, m.default]));
+
+/** The drawing of each block, by its type (BlockSite.astro). */
+export const blockViews: Record<string, View<any>> = {
+  ...defaults(themeViews.standard),
+  ...defaults(themeViews.own),
+  ...defaults(appLooks.views),
+};
+
+/** Each block's view on the site, by its type: the standard blocks' contracts (load.ts here), and the apps'. */
+export const blockLoads: Record<string, Contract<any>> = {
+  ...byType(import.meta.glob<Contract<any>>('./*/load.ts', { eager: true })),
+  ...byType(appLooks.loads),
+};
+
+// 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*$/;
+
+/** The block that ends a page's text, when its type is drawn across the page (`across` in its load.ts, e.g. an app's
+ * booking block): its type and props, and the text without it, for the theme's page layout to draw it below the
+ * text (EndBlock.astro). Null when the text ends otherwise, or the block is hidden. */
+export function endBlock(html: string): { type: string; props: Record<string, unknown>; html: string } | null {
+  const end = html.match(END);
+  if (!end || !blockLoads[end[1]]?.across) return null;
+  const block = parseBlock(end[0]);
+  if (!block || block.props.hidden) return null;
+  return { type: end[1], props: block.props, html: html.replace(END, '') };
+}