@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/src/standard/points/view.ts

@@ -1,12 +1,12 @@
-// What "Punkter med ikon" shows (its view, drawn by the theme's View.tsx and PointList.tsx): its heading, and each
-// point's icon, heading, text and, with a page and a link's text, the link after the text. The same in the editor
-// (viewOf) and on the site (load.ts): only its fields.
-import type { ViewOf } from '../view';
-import { headOf, type HeadView } from '../head';
-
-export type Point = { icon: string; title: string; text: string; more?: string; href?: string };
-export type PointsView = HeadView & { items: Point[] };
-
-export const pointsOf = (props: Record<string, any>): PointsView => ({ ...headOf(props), items: props.items ?? [] });
-
-export const viewOf: ViewOf<PointsView> = pointsOf;
+// What "Punkter med ikon" shows (its view, drawn by the theme's View.tsx and PointList.tsx): its heading, and each
+// point's icon, heading, text and, with a page and a link's text, the link after the text. The same in the editor
+// (viewOf) and on the site (load.ts): only its fields.
+import type { ViewOf } from '../view';
+import { headOf, type HeadView } from '../head';
+
+export type Point = { icon: string; title: string; text: string; more?: string; href?: string };
+export type PointsView = HeadView & { items: Point[] };
+
+export const pointsOf = (props: Record<string, any>): PointsView => ({ ...headOf(props), items: props.items ?? [] });
+
+export const viewOf: ViewOf<PointsView> = pointsOf;

package/src/standard/posts/index.tsx

@@ -1,132 +1,132 @@
-// "Blogindlæg", a standard block: blog posts as a list, all of them (those with some tags, when it has any), 3–6 of
-// them (the newest or random ones with some tags) or those picked, with "Alle indlæg" under them but when it shows all; the newest large when its design is "Det nyeste stort".
-// The posts are the site's (the relation `blog`, and BlockData.site.posts), their tags the relation `categories`. How it
-// looks is the theme's (packages/editor/theme/blocks/posts/View.tsx; what it shows: view.ts, and load.ts on the site).
-import { Article, Newspaper, Rows } from '@phosphor-icons/react';
-import { defineBlock, type BlockData, type BlockProps } from '../../blocks';
-import { siteT, t } from '../../i18n';
-import type { Relation } from '../../schema';
-import { sharedIn } from '../../shared';
-import { headFields } from '../head';
-import type { PostChoice } from '../site';
-import shared, { allPostsText, postCount } from './shared';
-
-/** The posts a "Blogindlæg" block or a site's own section shows, as the site picks them: all (with `show` "all"), the
- * newest `count`, or those picked. Random: the newest stand here (the site picks anew on each visit), and the note says
- * how many it picks from. `all`: what "Alle indlæg" says (to a tag when the posts are from one blog tag, or one is
- * picked); empty when it shows all. */
-export function postsOf(choice: PostChoice, data: BlockData) {
-  const { show = 'categories', categories = [], order = 'newest', picked = [] } = choice;
-  const pool = data.site.posts.filter((p) => !categories.length || p.categories.some((c) => categories.includes(c)));
-  if (show === 'all') return { posts: pool, note: '', all: '' };
-  const n = postCount(choice.count);
-  const posts =
-    show === 'picked'
-      ? picked.map((slug) => data.site.posts.find((p) => p.slug === slug)).filter((p) => p !== undefined)
-      : pool.slice(0, n);
-  const random = show !== 'picked' && order === 'random' && pool.length > n;
-  const slug = choice.link || (show !== 'picked' && categories.length === 1 ? categories[0] : null);
-  const tag = slug && !data.site.tagsOffBlog.includes(slug) ? data.relations.categories?.find((o) => o.value === slug)?.label : undefined;
-  return {
-    posts,
-    note: random ? siteT.blocks.posts.randomNote(n, pool.length) : '',
-    all: allPostsText(sharedIn(data.site, 'posts', shared.values), tag),
-  };
-}
-
-// Which posts it shows, for its card: "Kommunikation · 12 indlæg", "De nyeste 3 fra Kommunikation", "Tilfældige 3
-// fra alle indlæg", or the titles of those picked.
-function postsLine(p: BlockProps, data: BlockData): string {
-  const label = (to: Relation, v: string) => data.relations[to]?.find((o) => o.value === v)?.label ?? v;
-  if (p.show === 'picked') return ((p.picked ?? []) as string[]).map((v) => label('blog', v)).join(' · ');
-  const tags = ((p.categories ?? []) as string[]).map((v) => label('categories', v)).join(', ');
-  if (p.show === 'all') return t.blocks.posts.allFrom(tags, postsOf(p as PostChoice, data).posts.length);
-  const from = tags || t.blocks.posts.all;
-  return (p.order === 'random' ? t.blocks.posts.randomFrom : t.blocks.posts.newestFrom)(postCount(p.count), from);
-}
-
-export default defineBlock({
-  label: t.blocks.posts.label,
-  icon: Newspaper,
-  hint: t.blocks.posts.hint,
-  edit: { to: 'blokke/posts', text: t.blocks.posts.edit },
-  fields: [
-    ...headFields,
-    // A list (the empty choice: so are the blocks from before there was a choice), or the newest large over the list
-    // (as on the blog page).
-    {
-      name: 'design',
-      label: t.blocks.posts.design,
-      type: 'select',
-      segments: true,
-      options: [
-        { label: t.blocks.posts.designList, value: '', icon: Rows },
-        { label: t.blocks.posts.designFeatured, value: 'featured', icon: Article },
-      ],
-    },
-    {
-      name: 'show',
-      label: t.blocks.posts.show,
-      type: 'select',
-      required: true,
-      default: 'categories',
-      options: [
-        { label: t.blocks.posts.every, value: 'all' },
-        { label: t.blocks.posts.some, value: 'categories' },
-        { label: t.blocks.posts.picked, value: 'picked' },
-      ],
-    },
-    {
-      name: 'categories',
-      label: t.blocks.posts.tags,
-      type: 'relation',
-      to: 'categories',
-      multiple: true,
-      add: t.blocks.posts.addTag,
-      hint: t.blocks.posts.tagsHint,
-      only: { field: 'show', is: ['all', 'categories'] },
-    },
-    {
-      name: 'count',
-      label: t.blocks.posts.count,
-      type: 'select',
-      required: true,
-      default: '3',
-      options: ['3', '4', '5', '6'].map((n) => ({ label: t.blocks.posts.countOption(n), value: n })),
-      only: { field: 'show', is: ['categories'] },
-    },
-    {
-      name: 'order',
-      label: t.blocks.posts.order,
-      type: 'select',
-      required: true,
-      default: 'newest',
-      options: [
-        { label: t.blocks.posts.newest, value: 'newest' },
-        { label: t.blocks.posts.random, value: 'random' },
-      ],
-      only: { field: 'show', is: ['categories'] },
-    },
-    {
-      name: 'picked',
-      label: t.blocks.posts.items,
-      type: 'relation',
-      to: 'blog',
-      multiple: true,
-      maxItems: 6,
-      add: t.blocks.posts.addItem,
-      required: true,
-      hint: t.blocks.posts.itemsHint,
-      only: { field: 'show', is: ['picked'] },
-    },
-    {
-      name: 'link',
-      label: t.blocks.posts.link,
-      type: 'relation',
-      to: 'categories',
-      hint: t.blocks.posts.linkHint,
-      only: { field: 'show', is: ['categories', 'picked'] },
-    },
-  ],
-  detail: (p, data) => [postsLine(p, data)],
-});
+// "Blogindlæg", a standard block: blog posts as a list, all of them (those with some tags, when it has any), 3–6 of
+// them (the newest or random ones with some tags) or those picked, with "Alle indlæg" under them but when it shows all; the newest large when its design is "Det nyeste stort".
+// The posts are the site's (the relation `blog`, and BlockData.site.posts), their tags the relation `categories`. How it
+// looks is the theme's (packages/editor/theme/blocks/posts/View.tsx; what it shows: view.ts, and load.ts on the site).
+import { Article, Newspaper, Rows } from '@phosphor-icons/react';
+import { defineBlock, type BlockData, type BlockProps } from '../../blocks';
+import { siteT, t } from '../../i18n';
+import type { Relation } from '../../schema';
+import { sharedIn } from '../../shared';
+import { headFields } from '../head';
+import type { PostChoice } from '../site';
+import shared, { allPostsText, postCount } from './shared';
+
+/** The posts a "Blogindlæg" block or a site's own section shows, as the site picks them: all (with `show` "all"), the
+ * newest `count`, or those picked. Random: the newest stand here (the site picks anew on each visit), and the note says
+ * how many it picks from. `all`: what "Alle indlæg" says (to a tag when the posts are from one blog tag, or one is
+ * picked); empty when it shows all. */
+export function postsOf(choice: PostChoice, data: BlockData) {
+  const { show = 'categories', categories = [], order = 'newest', picked = [] } = choice;
+  const pool = data.site.posts.filter((p) => !categories.length || p.categories.some((c) => categories.includes(c)));
+  if (show === 'all') return { posts: pool, note: '', all: '' };
+  const n = postCount(choice.count);
+  const posts =
+    show === 'picked'
+      ? picked.map((slug) => data.site.posts.find((p) => p.slug === slug)).filter((p) => p !== undefined)
+      : pool.slice(0, n);
+  const random = show !== 'picked' && order === 'random' && pool.length > n;
+  const slug = choice.link || (show !== 'picked' && categories.length === 1 ? categories[0] : null);
+  const tag = slug && !data.site.tagsOffBlog.includes(slug) ? data.relations.categories?.find((o) => o.value === slug)?.label : undefined;
+  return {
+    posts,
+    note: random ? siteT.blocks.posts.randomNote(n, pool.length) : '',
+    all: allPostsText(sharedIn(data.site, 'posts', shared.values), tag),
+  };
+}
+
+// Which posts it shows, for its card: "Kommunikation · 12 indlæg", "De nyeste 3 fra Kommunikation", "Tilfældige 3
+// fra alle indlæg", or the titles of those picked.
+function postsLine(p: BlockProps, data: BlockData): string {
+  const label = (to: Relation, v: string) => data.relations[to]?.find((o) => o.value === v)?.label ?? v;
+  if (p.show === 'picked') return ((p.picked ?? []) as string[]).map((v) => label('blog', v)).join(' · ');
+  const tags = ((p.categories ?? []) as string[]).map((v) => label('categories', v)).join(', ');
+  if (p.show === 'all') return t.blocks.posts.allFrom(tags, postsOf(p as PostChoice, data).posts.length);
+  const from = tags || t.blocks.posts.all;
+  return (p.order === 'random' ? t.blocks.posts.randomFrom : t.blocks.posts.newestFrom)(postCount(p.count), from);
+}
+
+export default defineBlock({
+  label: t.blocks.posts.label,
+  icon: Newspaper,
+  hint: t.blocks.posts.hint,
+  edit: { to: 'blokke/posts', text: t.blocks.posts.edit },
+  fields: [
+    ...headFields,
+    // A list (the empty choice: so are the blocks from before there was a choice), or the newest large over the list
+    // (as on the blog page).
+    {
+      name: 'design',
+      label: t.blocks.posts.design,
+      type: 'select',
+      segments: true,
+      options: [
+        { label: t.blocks.posts.designList, value: '', icon: Rows },
+        { label: t.blocks.posts.designFeatured, value: 'featured', icon: Article },
+      ],
+    },
+    {
+      name: 'show',
+      label: t.blocks.posts.show,
+      type: 'select',
+      required: true,
+      default: 'categories',
+      options: [
+        { label: t.blocks.posts.every, value: 'all' },
+        { label: t.blocks.posts.some, value: 'categories' },
+        { label: t.blocks.posts.picked, value: 'picked' },
+      ],
+    },
+    {
+      name: 'categories',
+      label: t.blocks.posts.tags,
+      type: 'relation',
+      to: 'categories',
+      multiple: true,
+      add: t.blocks.posts.addTag,
+      hint: t.blocks.posts.tagsHint,
+      only: { field: 'show', is: ['all', 'categories'] },
+    },
+    {
+      name: 'count',
+      label: t.blocks.posts.count,
+      type: 'select',
+      required: true,
+      default: '3',
+      options: ['3', '4', '5', '6'].map((n) => ({ label: t.blocks.posts.countOption(n), value: n })),
+      only: { field: 'show', is: ['categories'] },
+    },
+    {
+      name: 'order',
+      label: t.blocks.posts.order,
+      type: 'select',
+      required: true,
+      default: 'newest',
+      options: [
+        { label: t.blocks.posts.newest, value: 'newest' },
+        { label: t.blocks.posts.random, value: 'random' },
+      ],
+      only: { field: 'show', is: ['categories'] },
+    },
+    {
+      name: 'picked',
+      label: t.blocks.posts.items,
+      type: 'relation',
+      to: 'blog',
+      multiple: true,
+      maxItems: 6,
+      add: t.blocks.posts.addItem,
+      required: true,
+      hint: t.blocks.posts.itemsHint,
+      only: { field: 'show', is: ['picked'] },
+    },
+    {
+      name: 'link',
+      label: t.blocks.posts.link,
+      type: 'relation',
+      to: 'categories',
+      hint: t.blocks.posts.linkHint,
+      only: { field: 'show', is: ['categories', 'picked'] },
+    },
+  ],
+  detail: (p, data) => [postsLine(p, data)],
+});

package/src/standard/posts/load.ts

@@ -1,36 +1,36 @@
-// "Blogindlæg" on the site (view.ts): the posts it shows (from the site, @site/standard), all of them or those it picks,
-// with "Alle indlæg" under those it picks (to a tag, "Alle indlæg om …", when it goes to one; its shared texts). Nothing
-// when there are none, but where the newest of all would be large (the blog page): there the theme says there are none.
-import { standard } from '@site/standard';
-import { pictureOf } from '../load';
-import type { ListedPost } from '../site';
-import type { Load } from '../view';
-import { headOf } from '../head';
-import shared, { allPostsText, postCount } from './shared';
-import { designOf, type PostView, type PostsView } from './view';
-
-/** Posts as the site lists them, with their pictures' sizes. */
-export const loadPosts = (posts: ListedPost[]): PostView[] =>
-  posts.map(({ image, ...p }) => ({ ...p, image: image ? pictureOf(image) : undefined }));
-
-export const load: Load<PostsView> = async (props, { texts }) => {
-  const design = designOf(props);
-  if (props.show === 'all') {
-    const categories = Array.isArray(props.categories) ? props.categories.map(String) : [];
-    const posts = await standard.posts.list(categories);
-    if (!posts.length && design === 'list') return null;
-    return { ...headOf(props), design, posts: loadPosts(posts), count: posts.length, random: false };
-  }
-  const count = postCount(props.count);
-  const { posts, random } = await standard.posts.choose(props, count);
-  if (!posts.length) return null;
-  const all = standard.posts.all(props);
-  return {
-    ...headOf(props),
-    design,
-    posts: loadPosts(posts),
-    count,
-    random,
-    all: { href: all.href, text: allPostsText({ ...shared.values, ...texts }, all.tag) },
-  };
-};
+// "Blogindlæg" on the site (view.ts): the posts it shows (from the site, @site/standard), all of them or those it picks,
+// with "Alle indlæg" under those it picks (to a tag, "Alle indlæg om …", when it goes to one; its shared texts). Nothing
+// when there are none, but where the newest of all would be large (the blog page): there the theme says there are none.
+import { standard } from '@site/standard';
+import { pictureOf } from '../load';
+import type { ListedPost } from '../site';
+import type { Load } from '../view';
+import { headOf } from '../head';
+import shared, { allPostsText, postCount } from './shared';
+import { designOf, type PostView, type PostsView } from './view';
+
+/** Posts as the site lists them, with their pictures' sizes. */
+export const loadPosts = (posts: ListedPost[]): PostView[] =>
+  posts.map(({ image, ...p }) => ({ ...p, image: image ? pictureOf(image) : undefined }));
+
+export const load: Load<PostsView> = async (props, { texts }) => {
+  const design = designOf(props);
+  if (props.show === 'all') {
+    const categories = Array.isArray(props.categories) ? props.categories.map(String) : [];
+    const posts = await standard.posts.list(categories);
+    if (!posts.length && design === 'list') return null;
+    return { ...headOf(props), design, posts: loadPosts(posts), count: posts.length, random: false };
+  }
+  const count = postCount(props.count);
+  const { posts, random } = await standard.posts.choose(props, count);
+  if (!posts.length) return null;
+  const all = standard.posts.all(props);
+  return {
+    ...headOf(props),
+    design,
+    posts: loadPosts(posts),
+    count,
+    random,
+    all: { href: all.href, text: allPostsText({ ...shared.values, ...texts }, all.tag) },
+  };
+};

package/src/standard/posts/shared.ts

@@ -1,21 +1,21 @@
-// The shared texts of "Blogindlæg" ("Blokke"): the link under the posts, with {tag} for the tag it goes
-// to, to begin with in the site's language (siteT). Also where a site shows posts itself (this site's
-// front page).
-import { siteT, t } from '../../i18n';
-import { defineShared, fill } from '../../shared';
-
-export default defineShared({
-  fields: [
-    { name: 'all', label: t.blocks.posts.allLink, type: 'string', required: true, max: 30 },
-    { name: 'allAbout', label: t.blocks.posts.allAboutLink, type: 'string', required: true, max: 40, hint: t.blocks.posts.allAboutHint },
-  ],
-  values: { all: siteT.blocks.posts.allText, allAbout: siteT.blocks.posts.allAboutText },
-});
-
-/** What its "Alle indlæg" says: "Alle indlæg om opskrifter" when it goes to a tag (by its name), else
- * "Alle indlæg". */
-export const allPostsText = (texts: Record<string, string>, tag?: string): string =>
-  tag ? fill(texts.allAbout, { tag: tag.toLowerCase() }) : texts.all;
-
-/** How many posts it shows: its `count` (3–6), else 3. */
-export const postCount = (count: unknown) => Math.min(6, Math.max(3, Number(count) || 3));
+// The shared texts of "Blogindlæg" ("Blokke"): the link under the posts, with {tag} for the tag it goes
+// to, to begin with in the site's language (siteT). Also where a site shows posts itself (this site's
+// front page).
+import { siteT, t } from '../../i18n';
+import { defineShared, fill } from '../../shared';
+
+export default defineShared({
+  fields: [
+    { name: 'all', label: t.blocks.posts.allLink, type: 'string', required: true, max: 30 },
+    { name: 'allAbout', label: t.blocks.posts.allAboutLink, type: 'string', required: true, max: 40, hint: t.blocks.posts.allAboutHint },
+  ],
+  values: { all: siteT.blocks.posts.allText, allAbout: siteT.blocks.posts.allAboutText },
+});
+
+/** What its "Alle indlæg" says: "Alle indlæg om opskrifter" when it goes to a tag (by its name), else
+ * "Alle indlæg". */
+export const allPostsText = (texts: Record<string, string>, tag?: string): string =>
+  tag ? fill(texts.allAbout, { tag: tag.toLowerCase() }) : texts.all;
+
+/** How many posts it shows: its `count` (3–6), else 3. */
+export const postCount = (count: unknown) => Math.min(6, Math.max(3, Number(count) || 3));

package/src/standard/posts/view.ts

@@ -1,63 +1,63 @@
-// What "Blogindlæg" shows (its view, drawn by the theme's View.tsx): its heading, its design (a list, or the newest
-// large over the list), its posts (each one's page, title, description, picture, date and reading time), how many it
-// shows and whether they are picked at random on each visit (then all it picks from are there), and "Alle indlæg"
-// (where it goes and what it says; none when it shows all). In the editor (viewOf) the posts as the site picks them
-// (postsOf: random ones are the newest, and `note` says how many it picks from; of all, the first ones, and `more` says
-// how many more there are, so the card stays short); on the site: load.ts.
-import type { BlockData } from '../../blocks';
-import { siteT } from '../../i18n';
-import { shownPicture, type Picture, type ViewOf } from '../view';
-import { postsOf } from '.';
-import type { PostChoice } from '../site';
-import { headOf, type HeadView } from '../head';
-
-export type PostView = {
-  href: string;
-  title: string;
-  description?: string;
-  image?: Picture;
-  imageAlt?: string;
-  date: string;
-  minutes: number;
-};
-export type PostsView = HeadView & {
-  design: 'list' | 'featured';
-  posts: PostView[];
-  count: number;
-  random: boolean;
-  all?: { href: string; text: string };
-  note?: string;
-  more?: string;
-};
-
-/** Its design: the newest large, or a list (also one from before there was a choice). */
-export const designOf = (props: Record<string, unknown>): PostsView['design'] => (props.design === 'featured' ? 'featured' : 'list');
-
-/** A post as the editor has it, only drawn. */
-export const shownPost = (p: BlockData['site']['posts'][number]): PostView => ({
-  href: '',
-  title: p.title,
-  description: p.description,
-  image: p.image ? shownPicture(p.image) : undefined,
-  imageAlt: p.imageAlt,
-  date: p.date.toISOString(),
-  minutes: p.minutes,
-});
-
-/** How many of all the posts the editor draws. */
-const SHOWN = 5;
-
-export const viewOf: ViewOf<PostsView> = (props, data) => {
-  const { posts, note, all } = postsOf(props as PostChoice, data);
-  const shown = props.show === 'all' ? posts.slice(0, SHOWN) : posts;
-  return {
-    ...headOf(props),
-    design: designOf(props),
-    posts: shown.map(shownPost),
-    count: shown.length,
-    random: false,
-    all: all ? { href: '', text: all } : undefined,
-    note: note || undefined,
-    more: posts.length > shown.length ? siteT.blocks.posts.more(posts.length - shown.length) : undefined,
-  };
-};
+// What "Blogindlæg" shows (its view, drawn by the theme's View.tsx): its heading, its design (a list, or the newest
+// large over the list), its posts (each one's page, title, description, picture, date and reading time), how many it
+// shows and whether they are picked at random on each visit (then all it picks from are there), and "Alle indlæg"
+// (where it goes and what it says; none when it shows all). In the editor (viewOf) the posts as the site picks them
+// (postsOf: random ones are the newest, and `note` says how many it picks from; of all, the first ones, and `more` says
+// how many more there are, so the card stays short); on the site: load.ts.
+import type { BlockData } from '../../blocks';
+import { siteT } from '../../i18n';
+import { shownPicture, type Picture, type ViewOf } from '../view';
+import { postsOf } from '.';
+import type { PostChoice } from '../site';
+import { headOf, type HeadView } from '../head';
+
+export type PostView = {
+  href: string;
+  title: string;
+  description?: string;
+  image?: Picture;
+  imageAlt?: string;
+  date: string;
+  minutes: number;
+};
+export type PostsView = HeadView & {
+  design: 'list' | 'featured';
+  posts: PostView[];
+  count: number;
+  random: boolean;
+  all?: { href: string; text: string };
+  note?: string;
+  more?: string;
+};
+
+/** Its design: the newest large, or a list (also one from before there was a choice). */
+export const designOf = (props: Record<string, unknown>): PostsView['design'] => (props.design === 'featured' ? 'featured' : 'list');
+
+/** A post as the editor has it, only drawn. */
+export const shownPost = (p: BlockData['site']['posts'][number]): PostView => ({
+  href: '',
+  title: p.title,
+  description: p.description,
+  image: p.image ? shownPicture(p.image) : undefined,
+  imageAlt: p.imageAlt,
+  date: p.date.toISOString(),
+  minutes: p.minutes,
+});
+
+/** How many of all the posts the editor draws. */
+const SHOWN = 5;
+
+export const viewOf: ViewOf<PostsView> = (props, data) => {
+  const { posts, note, all } = postsOf(props as PostChoice, data);
+  const shown = props.show === 'all' ? posts.slice(0, SHOWN) : posts;
+  return {
+    ...headOf(props),
+    design: designOf(props),
+    posts: shown.map(shownPost),
+    count: shown.length,
+    random: false,
+    all: all ? { href: '', text: all } : undefined,
+    note: note || undefined,
+    more: posts.length > shown.length ? siteT.blocks.posts.more(posts.length - shown.length) : undefined,
+  };
+};