refactor: cms

middleware.ts

@@ -2,9 +2,13 @@ import { cacheControlMiddlewareFactory } from "@lidofinance/next-cache-files-mid
 
 export const CACHE_HEADERS_HTML_PAGE = `public, max-age=300, stale-if-error=1200, stale-while-revalidate=30`;
 
-export const CACHE_ALLOWED_LIST_FILES_PATHS = [{ path: /content\/(.*)/, headers: CACHE_HEADERS_HTML_PAGE }];
+export const CACHE_ALLOWED_LIST_FILES_PATHS = [
+  { path: /content\/(.*)/, headers: CACHE_HEADERS_HTML_PAGE },
+];
 
 // use only for cache files
-export const middleware = cacheControlMiddlewareFactory(CACHE_ALLOWED_LIST_FILES_PATHS);
+export const middleware = cacheControlMiddlewareFactory(
+  CACHE_ALLOWED_LIST_FILES_PATHS
+);
 
-export default middleware;
+export default middleware;

pages/admin.tsx

@@ -1,14 +1,19 @@
 import { useEffect } from "react";
-import { initializeCMS, registerTable } from "widgets/cms";
+import { initializeCMS, registerScorecardTable } from "widgets/cms";
 
 export default function Tmp() {
   useEffect(() => {
     (async () => {
       const CMS = (await import("netlify-cms-app")).default;
       globalThis.CMS = CMS;
 
+      // initialization CMS
       initializeCMS();
-      registerTable();
+
+      // Custom widgets
+      // All custom widgets must be initialized here
+      // Scorecard:
+      registerScorecardTable();
     })();
   }, []);
 

widgets/cms/customWidgets/editorComponent/index.ts

@@ -0,0 +1,2 @@
+// scorecard
+export * from "./scorecard/table";

widgets/cms/table.ts → widgets/cms/customWidgets/editorComponent/scorecard/table.ts

@@ -1,7 +1,15 @@
-import { registerCustomDirective } from "./customDirectiveUtils";
+import { registerCustomDirective } from "widgets/cms/utils/customDirectiveUtils";
 
-export const registerTable = () =>
-  registerCustomDirective("table", {
+interface Row {
+  ["scorecard-attribute"]?: string;
+  ["categories"]?: string;
+  ["self-assessment"]?: string;
+  ["comments"]?: string;
+}
+
+export const registerScorecardTable = () =>
+  registerCustomDirective("scorecard-table", {
+    label: "Table",
     fields: [
       {
         name: "rows",
@@ -42,9 +50,9 @@ export const registerTable = () =>
         ],
       },
     ],
-    toPreview: ({ rows = [] }) => {
+    toPreview: ({ rows = [] }: { rows: Row[] }) => {
       let rowsString = "";
-      rows.forEach((row) => {
+      rows.forEach((row: Row) => {
         rowsString = `
       ${rowsString}
       ${`

widgets/cms/customWidgets/index.ts

@@ -0,0 +1,2 @@
+// Editor components
+export * from "./editorComponent";

widgets/cms/index.ts

@@ -1,3 +1,5 @@
-export * from "./customDirectiveUtils";
-export * from "./initialize";
-export * from "./table";
+// Initialization CMS
+export * from "./initialize/initialize";
+
+// Custom widgets
+export * from "./customWidgets";

widgets/cms/initialize/collections/index.ts

@@ -0,0 +1 @@
+export * from "./lidoLanding/lidoLanding";

widgets/cms/initialize/collections/lidoLanding/files/scorecard.ts

@@ -0,0 +1,20 @@
+import type { CmsCollectionFile } from "netlify-cms-core";
+
+export const scorecard: CmsCollectionFile = {
+  name: "scorecard",
+  label: "Scorecard",
+  description: "Scorecard page",
+  file: "public/content/lido-landing/scorecard.md",
+  fields: [
+    { label: "Title", name: "title", widget: "string" },
+    { label: "Description", name: "description", widget: "text" },
+    {
+      label: "Body",
+      name: "body",
+      widget: "markdown",
+      buttons: ["heading-two", "link"],
+      editor_components: ["scorecard-table"],
+      modes: ["rich_text"],
+    },
+  ],
+};

widgets/cms/initialize/collections/lidoLanding/lidoLanding.ts

@@ -0,0 +1,9 @@
+import type { CmsCollection } from "netlify-cms-core";
+
+import { scorecard } from "./files/scorecard";
+
+export const lidoLanding: CmsCollection = {
+  name: "lido-landing",
+  label: "Lido landing",
+  files: [scorecard],
+};

widgets/cms/initialize/initialize.ts

@@ -0,0 +1,23 @@
+import getConfig from "next/config";
+
+import { lidoLanding } from "./collections";
+
+const { publicRuntimeConfig } = getConfig();
+export const initializeCMS = () => {
+  CMS.init({
+    config: {
+      backend: {
+        name: "github",
+        repo: publicRuntimeConfig.githubRepo,
+        branch: publicRuntimeConfig.githubBranch,
+        base_url: publicRuntimeConfig.baseUrl,
+      },
+      local_backend: true,
+      publish_mode: "editorial_workflow",
+      show_preview_links: false,
+      media_folder: "public/img",
+      public_folder: "img",
+      collections: [lidoLanding],
+    },
+  });
+};

widgets/cms/utils/customDirectiveUtils.ts

@@ -0,0 +1,32 @@
+import jsyaml from "js-yaml";
+
+interface Options {
+  id?: string;
+  label?: string;
+  fields: any;
+  pattern?: RegExp;
+  allow_add?: boolean;
+  fromBlock?: (match: RegExpMatchArray) => any;
+  toBlock?: (data: any) => string;
+  toPreview: (data: any) => string;
+}
+
+export const renderCustomDirective = (name: string, object: object) =>
+  `:::${name}\n` + (object ? jsyaml.dump(object) : "") + ":::";
+
+export const customDirectivePattern = (name: string) =>
+  new RegExp(`^:::${name}\\n([\\s\\S]+?\\n)?:::$`, "m");
+
+export const registerCustomDirective = (name: string, options: Options) =>
+  CMS.registerEditorComponent({
+    id: name,
+    label: options.label || `${name[0].toUpperCase()}${name.slice(1)}`,
+    pattern: customDirectivePattern(name),
+    fromBlock([, string]) {
+      return {
+        ...(jsyaml.load(string) as object),
+      };
+    },
+    toBlock: (yaml) => renderCustomDirective(name, yaml),
+    ...options,
+  });