@morphemecms/cms 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Lars Adolfsen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,51 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# Morpheme CMS
+
+An editor for websites built with [Astro](https://astro.build) and run on [Cloudflare](https://www.cloudflare.com): the
+site's owner edits pages, posts, pictures and settings in the browser at `/editor/`, and every save is one commit on
+GitHub. MIT licensed, see [LICENSE](LICENSE).
+
+`@morphemecms/cms` is the editor, the site's pages and its Astro setup (`siteConfig()` in `astro.mjs`), the
+standard theme *Material* (`theme/`, id `saturn`), the site's Worker (`worker/`) and the `morpheme` command (`bin/`). A site
+gives it its settings (`src/site/`, over the standard ones in `defaults/`), its content (`src/content/`, `src/data/`), its themes (`src/themes/`) and its
+apps (`src/apps/`).
+
+A new site starts from the starter (`starter/`, also in the npm package, since the demo is built from it): a site with only its own settings, the
+standard pages and the standard theme, ready for Cloudflare.
+
+[![Deploy to Cloudflare](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/larsadolfsen/morpheme-cms/tree/main/starter)
+
+Releases are published to npm from GitHub Actions (`.github/workflows/publish.yml`, with npm's trusted publishing)
+when a release is made on GitHub with the tag `v<version>`.
+
+The rest of this file is in Danish, the language the CMS is made in.
+
+## Editoren
+
+Editoren til et site bygget med Astro, på `/editor/`, uden noget bestemt site skrevet ind. Et site giver den sine samlinger og felter, sine regler og sine egne blokke; kunden retter indholdet, og hvert gem er ét commit på GitHub.
+
+Hele vejledningen står i `docs/editor.md` i sitets repo. Her er kun det, et site skal have for at bruge pakken.
+
+## Indhold
+
+- `src/`: skærmene, felterne, gem, blokkenes ramme (`blocks.ts`) og registret (`registry.tsx`), reglerne (`check.ts`, `checkSite.ts`) og standardblokkenes kontrakt (`standard/<type>/`: felter, regler, faste tekster, lister og det, de viser: `view.ts` og `load.ts`; deres udseende og CSS er temaets, se nedenfor), og `standard/view.tsx`, `BlockSite.astro` og `sites.ts`, der tegner alle blokke på sitet med deres `View.tsx`.
+- `lib/`: det, både editoren og sitet bruger: blokkenes format i teksten (`blocks.mjs`), beskæringen af billeder (`crop.mjs`), en kort tekst med fed og links (`inline.ts`), beskedens *Vis indtil* (`notice.mjs`), en sides og et indlægs status og de planlagte (`status.mjs`, `scheduled.mjs`) og videoerne fra YouTube og Vimeo (`video.mjs`, `video-id.mjs`).
+- `site/`: det, sitets sider og temaerne læser sitet med (indholdet, dataenes læsere, billederne, de strukturerede data, temaerne og ikonpakkerne), med sitet som `@site/…` og dets data som `@data/…`.
+- `defaults/`: sitets standarddele, det et site har, når dets `src/site/` ikke har en fil af samme navn: samlingerne og felterne, startskærmen, reglerne, *Virksomheden*, farverne, teksterne m.m.
+- `worker/`: sitets Worker, den samme for alle sites (`index.js` er dens `main`): login, det, editoren spørger GitHub om, kopien i R2, samtykkerne, adresserne, der ikke findes, de planlagte, notifikationerne og appenes del.
+
+## Det, sitet skal have
+
+- **`src/site/`**, som pakken tager som `@site`, og kun derfra; en fil, sitet ikke har, er pakkens i `defaults/`:
+  - `config.ts` og `worker.js` skal sitet selv have (`config.ts` med `defineSite` fra `@morphemecms/cms/site/defineSite.mjs`: kun det, der er sitets eget); resten kan det have for at give mere end standarden (som standardens fra `@morphemecms/cms/defaults/<fil>` med sit eget lagt til).
+  - `@site/editor`: `collections`, `groups`, `lists`, `icons`, `siteName`, `companyParts`, `blockParts`, `relationsOf`, `usedBy`, `usesOf`, `countsOf`, `whatIsAt`, `testimonialsOf`, `siteOf`, `fixedPages`, `everyFixedPage`, `Texts`, `sectionLooks`, `headingLooks` og `config`, og typerne `Props` og `SiteData`.
+  - `@site/config`: sitets navn, domæne, GitHub-repo og mapper.
+  - `@site/worker` (til Workeren): `apps`, `contact`, `moved`, `standard`, `oldAddresses` (sitets videresendelser fra gamle adresser, `{ ids, paths }`) og appenes del af Workeren (`appWorkers`, `appTexts`).
+- **`@site`** for `src/site/`, ellers `defaults/`: i Vite (`siteFile` i `themePlugin`, `site/theme.mjs`, brugt af `astro.mjs` og `scripts/check-content.mjs`, der indlæser reglerne med Vite) og i TypeScript (`paths` i `tsconfig.json`: `"@site/*": ["./src/site/*", "./node_modules/@morphemecms/cms/defaults/*"]`); til Workeren `@site/config` og `@site/worker` i `alias` i `wrangler.jsonc`, med `main` sat til pakkens `worker/index.js`.
+- **Sitets egne blokke** i appenes `blocks/<type>/` (`src/apps/<app>/blocks/<type>/`), hver med `index.tsx` (`defineBlock` fra `@morphemecms/cms/src/blocks`), `view.ts` og `load.ts` (det, blokken viser, i editoren og på sitet) og `View.tsx` (tegningen, begge steder). Pakken finder dem selv.
+- **Et standardtema**, som alle sitets temaer bygger på, med standardblokkenes udseende (`blocks/<type>/View.tsx`, én tegning til sitet og editoren), som pakken selv finder (dette site: `packages/editor/theme/`, `packages/editor/src/standard/siteLooks.ts` og `packages/editor/src/standard/themeBlocks.ts`).
+- **Siderne** er pakkens (`pages/`, sat ind af `siteConfig()` i `astro.mjs`): sitets sider, bloggen, 404, `/ny/` og editoren (siden, der viser `src/App.tsx`, manifestet, `version.json` og billederne, sitets egen kode bruger). Sitets `astro.config.mjs` er kun `export default await siteConfig()`, og `src/content.config.ts` henter samlingerne fra `site/content.config`.
+- **Standardblokkenes stil:** `blocks.css` i standardtemaet (dette site: `packages/editor/theme/styles/blocks.css`), importeret i hvert temas CSS, og variablerne `--block-*` sat til temaets farver og former.
+- **Kommandoen `morpheme`** (`bin/morpheme.mjs`, pakkens `scripts/`), kørt fra sitets rod i dets `package.json`: `images` (billedernes mindre størrelser og videoernes stillbilleder, før `dev` og `build`), `after-build` (det, Workeren og editoren læser i `dist/`), `check:content` (indholdet efter editorens regler), `check:editor` (siderne kommer tilbage uændret), `check:worker`, `check:screens`, `check:themes`, `check:demo` (CMS'ets demo, `demo/`, virker med CMS'et), `compare-html`, `app-workers`, `app-screenshots`, `theme-screenshots` (billederne af hvert tema, taget af demoen) og `editor-icons`.
+- **Layoutene til sider og blogindlæg** markerer med `data-editor`, hvad *Forhåndsvis* sætter ind (`src/pagePreview.tsx`): `heading`, `image`, `text` og evt. `end` med `data-editor-block` (en blok, der slutter teksten, står dér).
+- **Afhængighederne** i `peerDependencies`: alt, pakkens kode henter (Astro og dens integrationer, React, Milkdown, Phosphor, Tailwind, motion, standardtemaets skrift, yaml og det, der laver Markdown i *Forhåndsvis*: unified, remark og rehype), og det, kommandoerne bruger (Vite, esbuild, sharp, Wrangler, og til tjekkene i en browser Playwright og jsdom). Starterens `package.json` har dem alle (`scripts/starter.mjs`).
+- **Starteren** (`starter/`): det, et nyt site begynder med, tjekket som et site med pakken fra `npm pack` (`scripts/check-starter.mjs`).

package/astro.d.mts

@@ -0,0 +1,2 @@
+/** The site's Astro config. */
+export function siteConfig(): Promise<import("astro").AstroUserConfig<never, never, never>>;

package/astro.mjs

@@ -0,0 +1,162 @@
+// The Astro config of a site with the CMS: `export default await siteConfig()` in the site's astro.config.mjs. Everything
+// a site is built with: its address and language (src/site/config.ts), Markdown with responsive pictures, internal links
+// and videos, React, the sitemap, each page's Content-Security-Policy, what the apps make after the build, the licences,
+// the CMS's pages (pages/, added as routes) and the Vite plugins and aliases (@site, @data, @saturn, @theme). The site is
+// its root, the working directory; this package is where this file is.
+import { defineConfig } from 'astro/config';
+import sitemap from '@astrojs/sitemap';
+import react from '@astrojs/react';
+import tailwindcss from '@tailwindcss/vite';
+import { unified } from '@astrojs/markdown-remark';
+import rehypeRaw from 'rehype-raw';
+import fs from 'node:fs';
+import { join } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { config } from './site/siteConfig.mjs';
+import { withSiteModules } from './site/siteModules.mjs';
+import { rehypeResponsiveImages } from './site/images.mjs';
+import { linksDigest, rehypeAutoLinks } from './site/autolinks.mjs';
+import { rehypeVideo } from './lib/video.mjs';
+import { csp, joined } from './lib/csp.mjs';
+import { appBuilds, appFoldersPlugin } from './lib/apps.mjs';
+import { isNoindex } from './site/noindex.mjs';
+import { activeTheme, aliases, iconPackLicenses, STANDARD_THEME, themeIcon, themePlugin } from './site/theme.mjs';
+import { licensesIntegration, siteOwners } from './lib/licenses.mjs';
+
+const ROOT = `${process.cwd()}/`;
+
+/** The CMS's pages, by their address (pages/ in this package), added to the site as routes. */
+const PAGES = {
+  '/': 'index.astro',
+  '/[...slug]': '[...slug].astro',
+  '/404': '404.astro',
+  '/blog': 'blog/index.astro',
+  '/blog/kategori/[category]': 'blog/kategori/[category].astro',
+  '/ny': 'ny.astro',
+  '/rss.xml': 'rss.xml.js',
+  '/robots.txt': 'robots.txt.js',
+  '/_headers': 'headers.js',
+  '/editor': 'editor/index.astro',
+  '/editor/code-images.json': 'editor/code-images.json.js',
+  '/editor/manifest.webmanifest': 'editor/manifest.webmanifest.js',
+  '/editor/sw.js': 'editor/sw.js.js',
+  '/editor/thumbnails.json': 'editor/thumbnails.json.js',
+  '/editor/version.json': 'editor/version.json.js',
+};
+
+/** @returns {import('astro').AstroIntegration} */
+const pagesIntegration = () => ({
+  name: 'morpheme-pages',
+  hooks: {
+    'astro:config:setup': ({ injectRoute }) => {
+      for (const [pattern, file] of Object.entries(PAGES))
+        injectRoute({ pattern, entrypoint: fileURLToPath(new URL(`pages/${file}`, import.meta.url)) });
+    },
+  },
+});
+
+/** The themes the site is built with: the one in use, and the standard theme it builds on. */
+const themesBuilt = () => [...new Set([activeTheme(), STANDARD_THEME])];
+
+/** @param {string} file */
+const frontMatter = (file) => fs.readFileSync(file, 'utf8').match(/^---\r?\n([\s\S]*?)\r?\n---/)?.[1] ?? '';
+
+// Pages and posts that name another page as the original (`canonical`), are not for search engines
+// (`noindex: true`) or only open on their address (Skjult, `status: "unlisted"`, packages/editor/lib/status.mjs):
+// not in the sitemap. Drafts are not built, so not in it either.
+/** @param {string} fm @param {string} name */
+const field = (fm, name) => fm.match(new RegExp(`^${name}: *"?(.*?)"?\\s*$`, 'm'))?.[1] ?? '';
+/** The .md files in a folder (none when the site has no folder of them yet). @param {string} dir */
+const markdown = (dir) =>
+  fs.existsSync(dir) ? fs.readdirSync(dir, { recursive: true, encoding: 'utf8' }).filter((f) => f.endsWith('.md')) : [];
+const elsewhere = [
+  ...markdown('src/content/pages').map((f) => {
+    const fm = frontMatter(`src/content/pages/${f}`);
+    return [field(fm, 'path') || `/${f.slice(0, -3)}/`, fm];
+  }),
+  ...markdown('src/content/blog').map((f) => [`/${f.slice(0, -3)}/`, frontMatter(`src/content/blog/${f}`)]),
+]
+  .filter(
+    ([own, fm]) =>
+      (field(fm, 'canonical') && field(fm, 'canonical') !== own) || field(fm, 'noindex') === 'true' || field(fm, 'status') === 'unlisted',
+  )
+  .map(([own]) => own);
+// The blog page (src/data/standard-pages.json) is shown at /blog/, so its canonical URL (another than /blog/) or noindex
+// is /blog/'s.
+const blogPath = JSON.parse(fs.readFileSync('src/data/standard-pages.json', 'utf8')).blog;
+const blogFile = markdown('src/content/pages').find(
+  (f) => (field(frontMatter(`src/content/pages/${f}`), 'path') || `/${f.slice(0, -3)}/`) === blogPath,
+);
+const blogPage = blogFile ? frontMatter(`src/content/pages/${blogFile}`) : '';
+if ((field(blogPage, 'canonical') && ![blogPath, '/blog/'].includes(field(blogPage, 'canonical'))) || field(blogPage, 'noindex') === 'true')
+  elsewhere.push('/blog/');
+
+/** The site's Astro config. */
+export async function siteConfig() {
+  // What the site's apps load from elsewhere (site/siteCsp.mjs).
+  const { siteSources } = await import('./site/siteCsp.mjs');
+  return defineConfig({
+    site: `https://${config.domain}`,
+    // Every address ends in a slash (imported ones too); keep them identical.
+    trailingSlash: 'always',
+    // Inline the (small) stylesheet so it does not block the first render.
+    build: { format: 'directory', inlineStylesheets: 'always' },
+    markdown: {
+      // Images inside pages and posts: responsive srcset, width/height, lazy loading.
+      // Words from src/data/internal-links.json become internal links.
+      // Videos from YouTube and Vimeo are links until played (packages/editor/lib/video.mjs).
+      // The prose column is at most ~720px wide.
+      processor: unified({
+        rehypePlugins: [
+          // HTML written in the Markdown (tables, iframes, links) as elements before the plugins below,
+          // so they see it too (Astro would parse it only after them).
+          rehypeRaw,
+          [rehypeResponsiveImages, { sizes: '(min-width: 800px) 720px, calc(100vw - 40px)' }],
+          // Internal links from the keywords (src/data/internal-links.json); with what they are made from, so the pages
+          // rendered before (node_modules/.astro) are rendered again when it changes (linksDigest).
+          [rehypeAutoLinks, { digest: linksDigest() }],
+          // Videos load only when played (nothing from Google or Vimeo before that), with the theme's play button.
+          [rehypeVideo, { play: themeIcon('play-fill') }],
+        ],
+      }),
+    },
+    integrations: [
+      // The CMS's pages (pages/): the standard pages, the posts and pages, the blog, RSS and the editor.
+      pagesIntegration(),
+      // client:interact: hydrate an island on first touch/hover/focus (site/directives/interact.mjs).
+      {
+        name: 'client-interact-directive',
+        hooks: {
+          'astro:config:setup': ({ addClientDirective }) =>
+            addClientDirective({ name: 'interact', entrypoint: fileURLToPath(new URL('site/directives/interact.mjs', import.meta.url)) }),
+        },
+      },
+      // React is only used for interactive islands (Motion), per design-taste-frontend.
+      react(),
+      sitemap({
+        filter: (page) => !isNoindex(new URL(page).pathname) && !elsewhere.includes(new URL(page).pathname),
+      }),
+      // Each page's Content-Security-Policy, after it is built: only its own scripts run (packages/editor/lib/csp.mjs),
+      // with what the site's measuring and its apps load from elsewhere (packages/editor/site/siteCsp.mjs).
+      csp({ site: joined(...siteSources()) }),
+      // What each installed app makes after the build (its build.mjs, in dist/_apps/<app>/: Cookiescanner's scan.json).
+      appBuilds(ROOT),
+      // The licences of the third-party work in what is downloaded (the browser's bundle, the pages' styles and fonts), of
+      // the icon sets the system offers (packages/editor/site/icons.mjs), and of the apps and the themes with what they bring, in
+      // dist/editor/licenses.json for "Licenser" under "Indstillinger" (packages/editor/lib/licenses.mjs).
+      licensesIntegration({
+        root: ROOT,
+        iconPacks: iconPackLicenses,
+        owners: () =>
+          withSiteModules((load) => siteOwners(ROOT, async (id) => (await load(`/src/apps/${id}/index.ts`)).default, themesBuilt())),
+      }),
+    ],
+    vite: {
+      // The editor (packages/editor/) takes this site from src/site/ as @site (packages/editor/defaults/editor.ts), and the
+      // site and the editor take the theme in use (src/data/theme.json) as @theme: its file, else the standard
+      // theme's (themePlugin, packages/editor/site/theme.mjs); and what is in each app's folder (appFoldersPlugin).
+      plugins: [themePlugin(), appFoldersPlugin(ROOT), tailwindcss()],
+      resolve: { alias: aliases() },
+    },
+  });
+}

package/bin/morpheme.mjs

@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+// The CMS's commands for a site, run from the site's root (its package.json's scripts): `morpheme <command> [args]`.
+// Each runs this package's scripts (scripts/) in turn, on the site in the working directory, and stops at the first that
+// fails.
+import { spawnSync } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+
+const COMMANDS = {
+  /** Before the site is built or served: the pictures' smaller sizes and the videos' stills. */
+  images: ['responsive-images', 'video-thumbnails'],
+  /** After the site is built: what the Worker and the editor read from dist/. */
+  'after-build': ['scheduled-list', 'link-counts', 'page-colors'],
+  'check:content': ['check-content'],
+  'check:editor': ['editor-roundtrip'],
+  'check:worker': ['check-worker', 'check-consent'],
+  'check:screens': ['editor-screens'],
+  'check:themes': ['check-themes'],
+  'check:demo': ['check-demo'],
+  'compare-html': ['compare-html'],
+  'app-workers': ['app-workers'],
+  'app-screenshots': ['app-screenshots'],
+  'theme-screenshots': ['theme-screenshots'],
+  'editor-icons': ['editor-icons'],
+};
+
+// Node warns that node:sqlite is experimental, which the consent log's check uses as D1.
+const QUIET = new Set(['check-consent']);
+
+const [command, ...args] = process.argv.slice(2);
+if (!COMMANDS[command]) {
+  console.error(`Brug: morpheme <kommando> […], hvor kommandoen er en af: ${Object.keys(COMMANDS).join(', ')}.`);
+  process.exit(1);
+}
+for (const script of COMMANDS[command]) {
+  const file = fileURLToPath(new URL(`../scripts/${script}.mjs`, import.meta.url));
+  const { status } = spawnSync(process.execPath, [...(QUIET.has(script) ? ['--no-warnings'] : []), file, ...args], { stdio: 'inherit' });
+  if (status !== 0) process.exit(status ?? 1);
+}

package/client.d.ts

@@ -0,0 +1,10 @@
+// The types a site with the CMS has besides its own (`/// <reference types="@morphemecms/cms/client" />` in its
+// src/env.d.ts): the modules the build makes and the directive it adds (astro.mjs).
+/// <reference path="./src/virtual.d.ts" />
+
+declare module 'astro' {
+  interface AstroClientDirectives {
+    'client:interact'?: boolean;
+  }
+}
+export {};

package/defaults/blockTexts.ts

@@ -0,0 +1,33 @@
+// "Standardblokke" on the start screen: the texts every copy of a block has, a screen for each block
+// (CompanyForm.tsx). The blocks' own are in their folders (shared.ts in src/apps/<app>/blocks/<type>/, saved in
+// src/data/blocks.json), and the editor makes their screens itself (sharedParts in
+// packages/editor/src/site.ts). Here only what is the site's: "Book en tid", whose texts are the
+// site's buttons too, in src/data/booking.json.
+import { CalendarCheck } from '@phosphor-icons/react';
+import type { Part } from '../src/schema';
+
+const back = { href: '#blokke', label: 'Standardblokke' };
+
+export const blockParts: Part[] = (
+  [
+    {
+      id: 'booking',
+      label: 'Book en tid',
+      icon: CalendarCheck,
+      file: 'src/data/booking.json',
+      fields: [
+        { name: 'heading', label: 'Overskrift', type: 'string', required: true },
+        { name: 'text', label: 'Tekst', type: 'text', required: true },
+        { name: 'book', label: 'Knaptekst (book)', type: 'string', required: true, max: 30 },
+        {
+          name: 'call',
+          label: 'Knaptekst (ring)',
+          type: 'string',
+          required: true,
+          max: 20,
+          hint: 'Telefonnummeret vises efter teksten.',
+        },
+      ],
+    },
+  ] as Part[]
+).map((p) => ({ ...p, back }));