gatsby-attainlabs-cms 1.0.10 → 1.0.13

package/README.md

@@ -81,6 +81,7 @@ module.exports = {
   - `LendDirect`
   - `Cash Money`
   - `Heights Finance`
+  - `Attain Finance`
 
 ---
 

package/dist/map.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const CMS_COMPONENTS: Record<string, React.ComponentType<any>>;
+export type CMSComponentName = keyof typeof CMS_COMPONENTS;

package/dist/map.js

@@ -0,0 +1,9 @@
+// This requires Webpack to include all .tsx files in the folder
+// @ts-ignore
+const context = require.context("./", true, /\.tsx$/);
+export const CMS_COMPONENTS = {};
+context.keys().forEach((key) => {
+    // Remove "./" and ".tsx" from the path to get the component name
+    const name = key.replace(/^.\//, "").replace(/\.tsx$/, "");
+    CMS_COMPONENTS[name] = context(key).default;
+});

package/dist/sliceWrapper.d.ts

@@ -0,0 +1,8 @@
+interface SliceWrapperProps {
+    sliceContext: {
+        componentPath: string;
+        [key: string]: any;
+    };
+}
+export default function SliceWrapper({ sliceContext }: SliceWrapperProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/sliceWrapper.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CMS_COMPONENTS } from "./map";
+export default function SliceWrapper({ sliceContext }) {
+    const { componentPath, ...props } = sliceContext;
+    const pathFormatted = componentPath
+        .replace("src/cms/components//", "")
+        .replace(/^.\//, "")
+        .replace(/\.tsx$/, "");
+    const Component = CMS_COMPONENTS[pathFormatted];
+    if (!Component) {
+        console.warn(`Component "${pathFormatted}" not found in CMS_COMPONENTS`);
+        return null;
+    }
+    return _jsx(Component, { ...props });
+}

package/gatsby-node.js

@@ -1,11 +1,64 @@
 const fs = require("fs");
 const https = require("https");
 const path = require("path");
+const prettier = require("prettier");
+const fse = require("fs-extra");
+
+const brands = {
+  LendDirect: "lenddirect",
+  "Cash Money": "cashmoney",
+  "Heights Finance": "heightsfinance",
+  "Attain Finance": "attainfinance",
+};
+
+const createPage = async (blocks, slug, id) => {
+  // Validate input parameters
+  if (!Array.isArray(blocks) || !slug || !id) {
+    throw new Error("Invalid parameters passed to createPage.");
+  }
+
+  // Helper function to generate Slice components
+  const generateSlices = (blocks, slug, id) => {
+    return blocks
+      .map(
+        (b) =>
+          `<Slice alias="block--${slug}--${b.props.component.name}--${id}" />`
+      )
+      .join("\n");
+  };
+
+  // Generate the page content
+  const pageContent = `
+  /* This is a generated file by the gatsby-attainlabs-cms plugin. Any changes will be overwritten on the next build. */
+    import { Slice } from "gatsby";
+    import { SEO } from "../components/SEO";
+    import { DefaultLayout as Layout } from "../layouts/Default/";
+
+    const metaTitle = "{page.root.props.title}";
+    const metaDescription = "{page.root.props.description}";
+
+    export const Head = () => (
+      <SEO title={metaTitle} description={metaDescription} noIndex={true} />
+    );
+
+    const Page = () => {
+      return (
+        <Layout>
+          ${generateSlices(blocks, slug, id)}
+        </Layout>
+      );
+    };
+
+    export default Page;
+  `;
+
+  // Format the generated code using Prettier (must await!)
+  return await prettier.format(pageContent, { parser: "babel-ts" });
+};
 
 require("dotenv").config();
 // Load PAT from env instead of hardcoding (fallback to old const for now but warn)
-
-export const onPreInit = async (_, pluginOptions) => {
+exports.onPreInit = async (_, pluginOptions) => {
   const { brand, azureBranch, personalAccessToken: patOption } = pluginOptions;
 
   // Try env first, then plugin option fallback
@@ -13,7 +66,7 @@ export const onPreInit = async (_, pluginOptions) => {
 
   if (!pat) {
     console.warn(
-      "⚠️ [gatsby-plugin-your-plugin] No PERSONAL_ACCESS_TOKEN found. " +
+      "⚠️ [gatsby-attainlabs-cms] No PERSONAL_ACCESS_TOKEN found. " +
         "Set it in your project's .env file (recommended) or pass via plugin options.\n" +
         "Example .env:\n" +
         "PERSONAL_ACCESS_TOKEN=xxxxxxx\n"
@@ -21,20 +74,14 @@ export const onPreInit = async (_, pluginOptions) => {
     return; // stop execution early
   }
 
-  const brands = {
-    LendDirect: "lenddirect",
-    "Cash Money": "cashmoney",
-    "Heights Finance": "heightsfinance",
-  };
-
   // 🚨 Validate brand option
   if (!brand || !brands[brand]) {
     throw new Error(
-      `[gatsby-plugin-your-plugin] Invalid or missing "brand" option.\n` +
+      `[gatsby-attainlabs-cms] Invalid or missing "brand" option.\n` +
         `You must specify one of: ${Object.keys(brands).join(", ")}\n` +
         `Example:\n` +
         `{\n` +
-        `  resolve: "gatsby-plugin-your-plugin",\n` +
+        `  resolve: "gatsby-attainlabs-cms",\n` +
         `  options: { brand: "Cash Money" }\n` +
         `}`
     );
@@ -45,6 +92,17 @@ export const onPreInit = async (_, pluginOptions) => {
   const repo = "Attain Labs";
   const branch = azureBranch || "feature/adding-puck-for-visual-code-editing";
 
+  const localTargets = [
+    {
+      localPath: path.resolve(__dirname, "src/sliceWrapper.tsx"),
+      targetPath: path.resolve("./src/cms/components/"),
+    },
+    {
+      localPath: path.resolve(__dirname, "src/map.ts"),
+      targetPath: path.resolve("./src/cms/components/"),
+    },
+  ];
+
   // List of folders to download from
   const targets = [
     {
@@ -69,6 +127,18 @@ export const onPreInit = async (_, pluginOptions) => {
     },
   };
 
+  // Copy local files first
+  localTargets.forEach(({ localPath, targetPath }) => {
+    if (!fs.existsSync(targetPath)) {
+      fs.mkdirSync(targetPath, { recursive: true });
+      console.log(`📂 Created directory: ${targetPath}`);
+    }
+    const fileName = path.basename(localPath);
+    const destFile = path.join(targetPath, fileName);
+    fs.copyFileSync(localPath, destFile);
+    console.log(`✅ Copied ${destFile}`);
+  });
+
   // Loop through targets
   targets.forEach(({ repoPath, localBasePath }) => {
     const listUrl = `https://dev.azure.com/${org}/${project}/_apis/git/repositories/${encodeURIComponent(
@@ -105,9 +175,18 @@ export const onPreInit = async (_, pluginOptions) => {
           );
 
           console.log(`Found ${items.length} files in ${repoPath}`);
-          items.forEach((item) =>
-            downloadFile(item.path, repoPath, localBasePath)
-          );
+          let completedDownloads = 0;
+
+          items.forEach((item) => {
+            downloadFile(item.path, repoPath, localBasePath, () => {
+              completedDownloads++;
+              if (completedDownloads === items.length) {
+                console.log(
+                  `✅ Completed downloading all files for target: ${repoPath}`
+                );
+              }
+            });
+          });
         });
       })
       .on("error", (err) => {
@@ -116,7 +195,7 @@ export const onPreInit = async (_, pluginOptions) => {
   });
 
   // Download a single file preserving folder structure under localBasePath
-  function downloadFile(filePath, repoPath, localBasePath) {
+  function downloadFile(filePath, repoPath, localBasePath, callback) {
     const fileUrl = `https://dev.azure.com/${org}/${project}/_apis/git/repositories/${encodeURIComponent(
       repo
     )}/items?path=${encodeURIComponent(
@@ -161,8 +240,14 @@ export const onPreInit = async (_, pluginOptions) => {
           res.pipe(fileStream);
           fileStream.on("finish", () => {
             fileStream.close(() => {
-              fs.renameSync(tmpFile, destFile);
-              console.log(`✅ Downloaded ${destFile}`);
+              const generatedComment =
+                "// GENERATED FILE // This file is automatically generated by the AttainLabs CMS plugin. Do not edit this file directly.\n";
+              const fileContent = fs.readFileSync(tmpFile, "utf8");
+              fs.writeFileSync(destFile, generatedComment + fileContent);
+
+              // Remove the temporary file
+              fs.unlinkSync(tmpFile);
+              if (callback) callback();
             });
           });
         })
@@ -174,3 +259,67 @@ export const onPreInit = async (_, pluginOptions) => {
     doRequest(fileUrl);
   }
 };
+
+exports.createPages = async ({ actions, store }, pluginOptions) => {
+  const { brand } = pluginOptions;
+  const { createSlice } = actions;
+  const siteRoot = store.getState().program.directory;
+  // 🚨 Validate brand option
+  if (!brand || !brands[brand]) {
+    throw new Error(
+      `[gatsby-attainlabs-cms] Invalid or missing "brand" option.\n` +
+        `You must specify one of: ${Object.keys(brands).join(", ")}\n` +
+        `Example:\n` +
+        `{\n` +
+        `  resolve: "gatsby-attainlabs-cms",\n` +
+        `  options: { brand: "Cash Money" }\n` +
+        `}`
+    );
+  }
+  const firebaseData = await fetch(
+    `https://attain-finance-cms-default-rtdb.firebaseio.com/cms/brands/${brands[brand]}/pages.json`
+  );
+  const firebaseJson = await firebaseData.json();
+  for (const page of Object.values(firebaseJson)) {
+    if (page.template === "visual-editor") {
+      const {
+        draft: {
+          blocks: {
+            content,
+            root: {
+              props: { slug },
+            },
+          },
+        },
+        id,
+      } = page;
+
+      //Generate page's blocks slices
+      await Promise.all(
+        content.map(async (b) => {
+          const name = b.props.component.name;
+          const blockId = `block--${slug}--${name}--${id}`;
+          console.log(`Creating slice: ${blockId}`);
+          // here we could await something per slice if needed later
+          createSlice({
+            id: blockId,
+            component: path.resolve(
+              siteRoot,
+              "src/cms/components/sliceWrapper.tsx"
+            ),
+            context: {
+              componentPath: `./src/cms/components/${b.props.component.path}/index.tsx`,
+              ...b.props,
+            },
+          });
+        })
+      );
+
+      const pageSource = await createPage(content, slug, id);
+      const outPath = path.join(siteRoot, "src/pages", `${slug}.tsx`);
+      // Generate the page itself
+      await fse.outputFile(outPath, pageSource);
+      console.log(`✅ Wrote page to ${outPath}`);
+    }
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-attainlabs-cms",
-  "version": "1.0.10",
+  "version": "1.0.13",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "dotenv": "^17.2.1",
+    "prettier": "^3.6.2",
     "react-slick": "^0.31.0"
   },
   "devDependencies": {

package/src/map.ts

@@ -0,0 +1,16 @@
+// GENERATED FILE // This file is automatically generated by the AttainLabs CMS plugin. Do not edit this file directly.
+import React from "react";
+
+// This requires Webpack to include all .tsx files in the folder
+// @ts-ignore
+const context = require.context("./", true, /\.tsx$/);
+
+export const CMS_COMPONENTS: Record<string, React.ComponentType<any>> = {};
+
+context.keys().forEach((key: string) => {
+  // Remove "./" and ".tsx" from the path to get the component name
+  const name = key.replace(/^.\//, "").replace(/\.tsx$/, "");
+  CMS_COMPONENTS[name] = context(key).default;
+});
+
+export type CMSComponentName = keyof typeof CMS_COMPONENTS;

package/src/sliceWrapper.tsx

@@ -0,0 +1,28 @@
+// GENERATED FILE // This file is automatically generated by the AttainLabs CMS plugin. Do not edit this file directly.
+
+import React from "react";
+import type { SliceComponentProps } from "gatsby";
+import { CMS_COMPONENTS } from "./map";
+
+interface SliceWrapperProps {
+  sliceContext: {
+    componentPath: string;
+    [key: string]: any;
+  };
+}
+
+export default function SliceWrapper({ sliceContext }: SliceWrapperProps) {
+  const { componentPath, ...props } = sliceContext;
+
+  const pathFormatted = componentPath
+    .replace("src/cms/components//", "")
+    .replace(/^.\//, "")
+    .replace(/\.tsx$/, "");
+  const Component = CMS_COMPONENTS[pathFormatted];
+  if (!Component) {
+    console.warn(`Component "${pathFormatted}" not found in CMS_COMPONENTS`);
+    return null;
+  }
+
+  return <Component {...props} />;
+}

package/tsconfig.json

@@ -5,6 +5,7 @@
     "declaration": true,
     "outDir": "./dist",
     "strict": true,
+    "jsx": "react-jsx",
     "esModuleInterop": true,
     "moduleResolution": "node",
     "skipLibCheck": true