@morphemecms/cms 0.0.0-stage → 0.1.0

package/src/countries.ts

@@ -0,0 +1,59 @@
+// The countries a phone number can be in, by their code (ISO 3166, "DK") and their country code
+// ("+45"), for the sheet the code is picked in (PhoneField in ui.tsx) and for reading a number typed
+// with its code (phoneParts in check.ts). Their names are the browser's own, in the editor's language
+// (Intl.DisplayNames). Countries that share a code (+1: the USA, Canada and the islands with an area
+// code of their own) have it each; the first with a code is the one shown for it until another is picked.
+import { locale } from './i18n';
+
+const list =
+  'US1 CA1 AG1 AI1 AS1 BB1 BM1 BS1 DM1 DO1 GD1 GU1 JM1 KN1 KY1 LC1 MP1 MS1 PR1 SX1 TC1 TT1 VC1 VG1 VI1 RU7 KZ7 ' +
+  'EG20 ZA27 GR30 NL31 BE32 FR33 ES34 HU36 IT39 VA39 RO40 CH41 AT43 GB44 GG44 IM44 JE44 DK45 SE46 NO47 SJ47 PL48 ' +
+  'DE49 PE51 MX52 CU53 AR54 BR55 CL56 CO57 VE58 MY60 AU61 CX61 CC61 ID62 PH63 NZ64 SG65 TH66 JP81 KR82 VN84 CN86 ' +
+  'TR90 IN91 PK92 AF93 LK94 MM95 IR98 SS211 MA212 EH212 DZ213 TN216 LY218 GM220 SN221 MR222 ML223 GN224 CI225 ' +
+  'BF226 NE227 TG228 BJ229 MU230 LR231 SL232 GH233 NG234 TD235 CF236 CM237 CV238 ST239 GQ240 GA241 CG242 CD243 ' +
+  'AO244 GW245 IO246 SC248 SD249 RW250 ET251 SO252 DJ253 KE254 TZ255 UG256 BI257 MZ258 ZM260 MG261 RE262 YT262 ' +
+  'ZW263 NA264 MW265 LS266 BW267 SZ268 KM269 SH290 ER291 AW297 FO298 GL299 GI350 PT351 LU352 IE353 IS354 AL355 ' +
+  'MT356 CY357 FI358 AX358 BG359 LT370 LV371 EE372 MD373 AM374 BY375 AD376 MC377 SM378 UA380 RS381 ME382 XK383 ' +
+  'HR385 SI386 BA387 MK389 CZ420 SK421 LI423 FK500 BZ501 GT502 SV503 HN504 NI505 CR506 PA507 PM508 HT509 GP590 ' +
+  'BL590 MF590 BO591 GY592 EC593 GF594 PY595 MQ596 SR597 UY598 CW599 BQ599 TL670 NF672 BN673 NR674 PG675 TO676 ' +
+  'SB677 VU678 FJ679 PW680 WF681 CK682 NU683 WS685 KI686 NC687 TV688 PF689 TK690 FM691 MH692 KP850 HK852 MO853 ' +
+  'KH855 LA856 BD880 TW886 MV960 LB961 JO962 SY963 IQ964 KW965 SA966 YE967 OM968 PS970 AE971 IL972 BH973 QA974 ' +
+  'BT975 MN976 NP977 TJ992 TM993 AZ994 GE995 KG996 UZ998';
+
+/** Each country's code and its country code, "+45". */
+export const dialCodes: Record<string, string> = Object.fromEntries(list.split(' ').map((c) => [c.slice(0, 2), `+${c.slice(2)}`]));
+
+/** The country shown for a country code: the first with it, or undefined when no country has it. */
+export const regionOf = (code: string) => Object.keys(dialCodes).find((r) => dialCodes[r] === code);
+
+const codes = new Set(Object.values(dialCodes));
+
+/** The country code at the start of a number's digits, with digits after it (the longest that is one:
+ * +358 before +35), or undefined. */
+export const codeAt = (digits: string) =>
+  [3, 2, 1]
+    .filter((n) => digits.length > n)
+    .map((n) => `+${digits.slice(0, n)}`)
+    .find((c) => codes.has(c));
+
+/** A country's flag, of the two letters of its code. */
+export const flagOf = (region: string) => String.fromCodePoint(...[...region].map((c) => 0x1f1e6 + c.charCodeAt(0) - 65));
+
+const names = typeof Intl.DisplayNames === 'function' ? new Intl.DisplayNames([locale], { type: 'region' }) : null;
+const english = typeof Intl.DisplayNames === 'function' ? new Intl.DisplayNames(['en'], { type: 'region' }) : null;
+
+/** A country's name in the editor's language. */
+export const countryName = (region: string) => names?.of(region) ?? region;
+
+/** The countries in the order of their names, each with its name, its code and the words it is also
+ * found by in a search (its country code, its code, its name in English). */
+export function countries() {
+  return Object.keys(dialCodes)
+    .map((region) => ({
+      region,
+      name: countryName(region),
+      code: dialCodes[region],
+      words: `${dialCodes[region]} ${region} ${english?.of(region) ?? ''}`,
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name, locale));
+}

package/src/deploy.ts

@@ -0,0 +1,155 @@
+// After a save: tells when the site has been rebuilt with it. Each build writes the commit it was
+// made from to /editor/version.json (packages/editor/pages/editor/version.json.js), and the editor asks for that
+// until it is the saved commit or a later one. The message is a notification of the type `site` (notifications.ts),
+// which also comes on the phone or computer when the editor is not on screen.
+// Each save says what it changed ("farver ændret", "side “Om” ændret", t.app.changes): right after it (savedText),
+// and, with the other saves since, when the website has been updated with them (changesText, App.tsx save).
+import { graphql, REPO } from './github';
+import { entryName, type Collection } from './schema';
+import { readFields, splitFrontmatter } from './frontmatter.mjs';
+import { locale, t } from './i18n';
+
+const fileName = (path: string) => path.split('/').pop() ?? path;
+
+/** What a file of a list is called: a page's or post's title, an entry's name as its list shows it, else (a picture)
+ * its file name. */
+export function nameOf(collection: Collection | undefined, file: { path: string; text: string }): string {
+  try {
+    if (collection?.kind === 'markdown') return String(readFields(splitFrontmatter(file.text).yaml).title ?? fileName(file.path));
+    if (collection?.kind === 'folder') return entryName(collection, JSON.parse(file.text)) || fileName(file.path);
+  } catch {}
+  return fileName(file.path);
+}
+
+/** A kind or a label inside a sentence: "Side" as "side", but "SEO" as it is. */
+export const lower = (s: string) => (/^\p{Lu}\p{Lu}/u.test(s) ? s : s.charAt(0).toLocaleLowerCase(locale) + s.slice(1));
+const capital = (s: string) => s.charAt(0).toLocaleUpperCase(locale) + s.slice(1);
+
+/** A thing by its kind and name, as a change says it: side “Om”. */
+export const kindAndName = (kind: string, name: string) => t.app.changes.named(lower(kind), name);
+
+/** The message right after a save, with what it changed; the site is rebuilt in 1-2 minutes. */
+export const savedText = (change: string) => t.common.saved(capital(change));
+
+/** What the saves since the last update changed, as a list: the first three and how many more. */
+export function changesText(changes: string[]): string {
+  const shown = changes.slice(0, 3);
+  const rest = changes.length - shown.length;
+  return new Intl.ListFormat(locale, { type: 'conjunction' }).format(rest ? [...shown, t.app.changes.more(rest)] : shown);
+}
+
+const EVERY = 10_000;
+const GIVE_UP = 10 * 60_000;
+
+// What the site was last built from: the commit, the fingerprint of the editor's code and when.
+type Version = { commit?: string; editor?: string; builtAt?: string };
+async function version(): Promise<Version> {
+  try {
+    const res = await fetch('/editor/version.json', { cache: 'no-store' });
+    return res.ok ? await res.json() : {};
+  } catch {
+    return {};
+  }
+}
+
+const built = async () => (await version()).commit ?? null;
+
+// Whether `commit` is among the last commits up to `build` (the site may be built from a later one).
+async function includes(build: string, commit: string): Promise<boolean> {
+  const data = await graphql<{ repository: { object: { history?: { nodes: { oid: string }[] } } | null } }>(
+    `
+      query ($owner: String!, $name: String!, $oid: GitObjectID!) {
+        repository(owner: $owner, name: $name) {
+          object(oid: $oid) {
+            ... on Commit {
+              history(first: 50) {
+                nodes {
+                  oid
+                }
+              }
+            }
+          }
+        }
+      }
+    `,
+    { owner: REPO.owner, name: REPO.name, oid: build },
+  );
+  return data.repository.object?.history?.nodes.some((n) => n.oid === commit) ?? false;
+}
+
+// Waits for `commit` to be on the site: done(true) when it is, done(false) when it is not after
+// 10 minutes. Returns a function that stops waiting (a newer save takes over).
+export function waitForSite(commit: string, done: (online: boolean) => void): () => void {
+  const until = Date.now() + GIVE_UP;
+  // The build last looked at, so GitHub is asked about each build once.
+  let seen: string | null = null;
+  let stopped = false;
+  let timer: ReturnType<typeof setTimeout>;
+
+  async function check() {
+    const build = await built();
+    if (stopped) return;
+    if (build && build !== seen) {
+      seen = build;
+      const online = build === commit || (await includes(build, commit).catch(() => false));
+      if (stopped) return;
+      if (online) return done(true);
+    }
+    if (Date.now() > until) {
+      // Without any version file (a build from before it existed) there is nothing to tell.
+      if (seen) done(false);
+      return;
+    }
+    timer = setTimeout(check, EVERY);
+  }
+
+  timer = setTimeout(check, EVERY);
+  return () => {
+    stopped = true;
+    clearTimeout(timer);
+  };
+}
+
+// Whether a form has changes that are not saved (set by FormFrame).
+let unsaved = false;
+export const setUnsaved = (yes: boolean) => void (unsaved = yes);
+export const hasUnsaved = () => unsaved;
+
+// Keeps an open editor up to date. The installed app can stay open for days, and it reads the files
+// straight from GitHub, so after a change to the editor and its files (like the front page becoming
+// sections) an old editor would show them as empty forms. When the site has an editor with other
+// code (the fingerprint in /editor/version.json is not the one in this page,
+// packages/editor/site/editor-version.mjs), the page reloads, as soon as nothing is unsaved: checked when the
+// editor opens, when it comes back on screen, and every minute while it is on screen. onSite: what the
+// site was last built from, at each check (when it was updated, on the start screen).
+export function keepCurrent(onSite?: (v: Version) => void) {
+  const own = document.querySelector<HTMLMetaElement>('meta[name="editor-version"]')?.content;
+  async function check() {
+    if (document.visibilityState !== 'visible') return;
+    const v = await version();
+    onSite?.(v);
+    const { editor } = v;
+    if (!own || unsaved || !editor || editor === own) return;
+    // Once for each newer editor, so a page that comes back old (from a cache) does not reload again
+    // and again.
+    try {
+      if (sessionStorage.getItem('editor-reloaded-for') === editor) return;
+      sessionStorage.setItem('editor-reloaded-for', editor);
+    } catch {
+      return;
+    }
+    location.reload();
+  }
+  check();
+  const timer = setInterval(check, 60_000);
+  document.addEventListener('visibilitychange', check);
+  return () => {
+    clearInterval(timer);
+    document.removeEventListener('visibilitychange', check);
+  };
+}
+
+// Notifications go through the service worker (packages/editor/pages/editor/sw.js); registered when the editor opens.
+export function registerWorker() {
+  navigator.serviceWorker?.register('/editor/sw.js').catch(() => {});
+}