SLB-188: Decap integration

.gitpod.yml

@@ -28,15 +28,12 @@ tasks:
   - name: Codegen
     init: gp sync-await setup
     command: pnpm --filter @custom/schema run watch
-  - name: Decap Dev
-    init: gp sync-await setup
-    command: pnpm run --filter @custom/decap dev
   - name: Decap Proxy
     init: gp sync-await setup
-    command: pnpm run --filter @custom/decap start:proxy
-  - name: Decap
+    command: pnpm run --filter @custom/decap start
+  - name: Decap Dev
     init: gp sync-await setup
-    command: pnpm run --filter @custom/decap start:decap
+    command: pnpm run --filter @custom/decap dev
 
 image:
   file: .gitpod.Dockerfile
@@ -74,9 +71,6 @@ ports:
   - port: 5173
     name: Decap Dev
     onOpen: notify
-  - port: 8889
-    name: Decap
-    onOpen: notify
   - port: 8081
     name: Decap Proxy
     onOpen: notify

apps/cms/turbo.json

@@ -8,7 +8,7 @@
       "dependsOn": ["prep:database"]
     },
     "prep:database": {
-      "dependsOn": ["prep:composer"],
+      "dependsOn": ["prep:composer", "^prep"],
       "inputs": [
         "turbo-seed.txt",
         "prep-database.sh",

apps/decap/data/page/decap-example.yml

@@ -14,5 +14,4 @@ en:
       caption: Here is an ***image***, for good measure.
       alt: Some architecture.
       image: /apps/decap/media/portrait.jpg
-de:
-  id: LFdYu4b6OsjTROxTsYep7
+de: {}

apps/decap/data/site.yml

@@ -1,2 +1 @@
-homePage: /decap-home
-notFoundPage: /decap-404
+email: [email protected]

apps/decap/package.json

@@ -3,44 +3,47 @@
   "private": true,
   "version": "0.0.0",
   "main": "build/index.js",
+  "types": "build/index.d.ts",
   "type": "module",
   "scripts": {
     "dev": "vite --host",
-    "prep": "pnpm prep:vite",
+    "prep": "pnpm prep:vite && pnpm prep:scripts",
     "prep:vite": "vite build",
-    "start:proxy": "GIT_REPO_DIRECTORY=../../ pnpm netlify-cms-proxy-server",
-    "start:decap": "pnpm serve -p 8889",
+    "prep:scripts": "tsup",
+    "start": "GIT_REPO_DIRECTORY=../../ pnpm netlify-cms-proxy-server",
     "test:static": "tsc --noEmit && eslint \"**/*.{ts,tsx,js,jsx}\" --ignore-path=\"./.eslintignore\"",
     "test:unit": "vitest run --passWithNoTests"
   },
   "dependencies": {
     "@amazeelabs/cloudinary-responsive-image": "^1.3.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "@amazeelabs/graphql-directives": "^1.2.2",
     "@custom/schema": "workspace:*",
     "@custom/ui": "workspace:*",
-    "netlify-cms-app": "^2.15.72",
-    "nanoid": "^4.0.2",
-    "zod": "^3.21.4",
     "graphql": "^16.7.1",
-    "unified": "^10.1.2",
-    "remark-parse": "^10.0.2",
-    "remark-rehype": "^10.1.0",
+    "nanoid": "^4.0.2",
+    "netlify-cms-app": "^2.15.72",
+    "netlify-cms-core": "^2.55.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rehype-sanitize": "^5.0.1",
     "rehype-stringify": "^9.0.3",
-    "yaml": "^2.3.1"
+    "remark-parse": "^10.0.2",
+    "remark-rehype": "^10.1.0",
+    "unified": "^10.1.2",
+    "yaml": "^2.3.1",
+    "zod": "^3.21.4"
   },
   "devDependencies": {
-    "tsup": "^7.2.0",
-    "serve": "^14.2.0",
-    "netlify-cms-proxy-server": "^1.3.24",
+    "@amazeelabs/gatsby-source-silverback": "^1.13.2",
+    "@types/node": "^20.4.9",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
+    "netlify-cms-proxy-server": "^1.3.24",
+    "tsup": "^7.2.0",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5",
-    "@types/node": "^20.4.9"
+    "vite": "^4.4.5"
   }
 }

apps/decap/src/collections/page.test.ts

@@ -0,0 +1,12 @@
+import { dirname, resolve } from 'path';
+import { expect, test } from 'vitest';
+
+import { getPages } from '..';
+
+test('getPages', () => {
+  const dir = resolve(
+    dirname(new URL(import.meta.url).pathname),
+    '../../data/page',
+  );
+  expect(() => getPages(dir)).not.toThrow();
+});

apps/decap/src/collections/page.tsx → apps/decap/src/collections/page.ts

@@ -1,22 +1,17 @@
-import { ImageSource, PreviewPageQuery, Url } from '@custom/schema';
+import { SilverbackSource } from '@amazeelabs/gatsby-source-silverback';
 import {
   BlockMarkupSource,
   BlockMediaSource,
+  DecapPageSource,
   LocaleSource,
   MediaImageSource,
-  PageSource,
 } from '@custom/schema/source';
-import { Page } from '@custom/ui/routes/Page';
-import {
-  CmsCollection,
-  CmsField,
-  PreviewTemplateComponentProps,
-} from 'netlify-cms-core';
-import { z, ZodType, ZodTypeDef } from 'zod';
+import fs from 'fs';
+import type { CmsCollection, CmsField } from 'netlify-cms-core';
+import yaml from 'yaml';
+import { z } from 'zod';
 
-import { PreviewFrame } from '../helpers/frame';
 import { transformMarkdown } from '../helpers/markdown';
-import { useQuery } from '../helpers/query';
 
 // =============================================================================
 // Decap CMS collection definition.
@@ -139,112 +134,87 @@ export const PageCollection: CmsCollection = {
 // Transformation schema definitions.
 // =============================================================================
 
-const BlockMarkupSchema: ZodType<BlockMarkupSource, ZodTypeDef, unknown> = z
+const BlockMarkupSchema = z
   .object({
     type: z.literal('text'),
     text: transformMarkdown,
   })
-  .transform(({ text }) => {
+  .transform(({ text }): BlockMarkupSource => {
     return {
       __typename: 'BlockMarkup',
       markup: text,
     };
   });
 
-const BlockMediaImageSchema: ZodType<BlockMediaSource, ZodTypeDef, unknown> = z
+const BlockMediaImageSchema = z
   .object({
     type: z.literal('image'),
     alt: z.string(),
     image: z.string(),
     caption: transformMarkdown,
   })
-  .transform(({ image, alt, caption }) => {
+  .transform(({ image, alt, caption }): BlockMediaSource => {
     return {
       __typename: 'BlockMedia',
       media: {
         __typename: 'MediaImage',
-        source: image as ImageSource,
+        source: image,
         alt,
       },
       caption: caption,
     };
   });
 
-export const pageSchema: ZodType<PageSource, ZodTypeDef, unknown> = z
-  .object({
-    __typename: z.literal('Page').optional().default('Page'),
-    id: z.string(),
-    title: z.string(),
-    locale: z.string().transform((l) => l as LocaleSource),
-    path: z.string().transform((p) => p as Url),
-    hero: z.object({
-      __typename: z.literal('Hero').optional().default('Hero'),
-      headline: z.string(),
-      lead: z.string().optional(),
-      image: z
-        .string()
-        .optional()
-        .transform((s) => s as ImageSource)
-        .transform(
-          (source) =>
-            ({
+export const pageSchema = z.object({
+  __typename: z.literal('DecapPage').optional().default('DecapPage'),
+  id: z.string(),
+  title: z.string(),
+  locale: z.string().transform((l) => l as LocaleSource),
+  path: z.string(),
+  hero: z.object({
+    __typename: z.literal('Hero').optional().default('Hero'),
+    headline: z.string(),
+    lead: z.string().optional(),
+    image: z
+      .string()
+      .optional()
+      .transform((source): MediaImageSource | undefined =>
+        source
+          ? {
               __typename: 'MediaImage',
               source,
               alt: '',
-            } satisfies MediaImageSource),
-        ),
-    }),
-    content: z.array(z.union([BlockMarkupSchema, BlockMediaImageSchema])),
-  })
-  .transform((page) => ({
-    ...page,
-    id: `${page.id}:${page.locale}`,
-  }));
-
-// =============================================================================
-// Decap CMS preview component.
-// =============================================================================
-export function PagePreview({
-  entry,
-  getAsset,
-}: PreviewTemplateComponentProps) {
-  // Extract data from Decap input.
-  const input = entry.toJS().data;
-
-  // Parse that input and transform it to a GraphQL Source input.
-  const parsed = pageSchema.safeParse({ ...input, locale: 'en' });
-  if (!parsed.success) {
-    console.error(parsed.error);
-  }
-
-  const previewSourceData = parsed.success
-    ? parsed.data
-    : ({
-        __typename: 'Page',
-        title: '[Missing title]',
-        path: '/preview' as Url,
-        locale: 'en',
-      } satisfies PageSource);
-
-  // Execute the "Preview" query on that source input to transform
-  // data into the exact shape of the query result expected by the
-  // route.
-  const data = useQuery(
-    PreviewPageQuery,
-    {
-      previewPage: previewSourceData,
-    } satisfies PreviewPageQuery,
-    {
-      id: '',
-      rid: '',
-      locale: '',
-    },
-    (src) => getAsset(src).url,
-  );
+            }
+          : undefined,
+      ),
+  }),
+  content: z.array(z.union([BlockMarkupSchema, BlockMediaImageSchema])),
+});
 
-  return (
-    <PreviewFrame>
-      {data?.previewPage ? <Page page={data.previewPage} /> : null}
-    </PreviewFrame>
-  );
-}
+export const getPages: (dir: string) => SilverbackSource<DecapPageSource> =
+  (dir: string) => () => {
+    const pages: Array<[string, DecapPageSource]> = [];
+    fs.readdirSync(dir)
+      .filter((file) => file.endsWith('.yml'))
+      .forEach((file) => {
+        const content = yaml.parse(fs.readFileSync(`${dir}/${file}`, 'utf-8'));
+        Object.keys(content).forEach((lang) => {
+          if (Object.keys(content[lang]).length < 2) {
+            return;
+          }
+          const input = {
+            ...content[lang],
+            locale: lang,
+          };
+          const page = pageSchema.safeParse(input);
+          if (page.success) {
+            pages.push([page.data.id, page.data]);
+          } else {
+            console.warn(`Error parsing ${file} (${lang}):`);
+            console.warn(page.error.message);
+            console.warn('Input:', content[lang]);
+          }
+        });
+      });
+    return pages;
+  };

apps/decap/src/helpers/markdown.ts

@@ -1,4 +1,3 @@
-import { Markup } from '@custom/schema';
 import rehypeSanitize from 'rehype-sanitize';
 import rehypeStringify from 'rehype-stringify';
 import remarkParse from 'remark-parse';
@@ -9,13 +8,12 @@ import { z } from 'zod';
 export const transformMarkdown = z
   .string()
   .optional()
-  .transform(
-    (t) =>
-      unified()
-        .use(remarkParse)
-        .use(remarkRehype)
-        .use(rehypeSanitize)
-        .use(rehypeStringify)
-        .processSync(t)
-        .toString() as Markup,
+  .transform((t) =>
+    unified()
+      .use(remarkParse)
+      .use(remarkRehype)
+      .use(rehypeSanitize)
+      .use(rehypeStringify)
+      .processSync(t)
+      .toString(),
   );