Re-add support for snapshots

packages/loaders/package.json

@@ -38,6 +38,7 @@
   "dependencies": {
     "@jpmorganchase/mosaic-store": "^0.1.0-beta.89",
     "@jpmorganchase/mosaic-schemas": "^0.1.0-beta.89",
+    "@jpmorganchase/mosaic-types": "^0.1.0-beta.89",
     "@types/node": "^18.15.3",
     "deepmerge": "^4.2.2",
     "gray-matter": "^4.0.3",

packages/loaders/src/LoadPageError.ts

@@ -0,0 +1,7 @@
+export class LoadPageError extends Error {
+  statusCode: number;
+  constructor({ message, statusCode }: { message: string; statusCode: number }) {
+    super(message);
+    this.statusCode = statusCode;
+  }
+}

packages/loaders/src/index.ts

@@ -1,54 +1,22 @@
 import path from 'path';
-import matter from 'gray-matter';
-import type { SafeParseError } from 'zod';
-import { activeEnvSchema } from '@jpmorganchase/mosaic-schemas';
 import type { SharedConfig } from '@jpmorganchase/mosaic-store';
+import type { MosaicMode } from '@jpmorganchase/mosaic-types';
 
 import type { LoaderPage } from './types/index.js';
+import { loadActiveContent, loadActiveMosaicData } from './loadActiveContent';
+import { loadSnapshotFileContent, loadSnapshotFileMosaicData } from './loadSnapshotFileContent';
 
+export { LoadPageError } from './LoadPageError';
 export * from './types/index.js';
 
-const normalizePageUrl = (url: string): string => (/\/index$/.test(url) ? `${url}.mdx` : url);
-
-type ActiveModeUrlEnv = {
-  MOSAIC_ACTIVE_MODE_URL: string;
-};
-
-export class LoadPageError extends Error {
-  statusCode: number;
-  constructor({ message, statusCode }: { message: string; statusCode: number }) {
-    super(message);
-    this.statusCode = statusCode;
-  }
-}
-
-const getFSRootUrl = (): string => {
-  const env = activeEnvSchema.safeParse(process.env);
-  if (!env.success) {
-    const { error } = env as SafeParseError<ActiveModeUrlEnv>;
-    error.issues.forEach(issue => {
-      console.error(
-        `Missing process.env.${issue.path.join()} environment variable required to load pages`
-      );
-    });
-    throw new LoadPageError({
-      message: `Environment variables missing to load pages`,
-      statusCode: 500
-    });
-  }
-  return env.data.MOSAIC_ACTIVE_MODE_URL;
-};
-
 export const loadMosaicData = async <T>(url: string): Promise<T> => {
-  const fsRootUrl = getFSRootUrl();
-  const dataUrl = new URL(url, fsRootUrl);
-  const response = await fetch(dataUrl);
+  const mode: MosaicMode = (process.env.MOSAIC_MODE || 'active') as MosaicMode;
 
-  if (!response.ok) {
-    // This will activate the closest `error.js` Error Boundary
-    throw new Error(`Failed to fetch mosaic data @ ${dataUrl}`);
+  if (mode === 'snapshot-file') {
+    return loadSnapshotFileMosaicData(url);
   }
-  return response.json();
+
+  return loadActiveMosaicData(url);
 };
 
 export const loadSharedConfig = async (route: string): Promise<SharedConfig | undefined> => {
@@ -58,20 +26,11 @@ export const loadSharedConfig = async (route: string): Promise<SharedConfig | un
 };
 
 export const loadPage = async (route: string): Promise<LoaderPage> => {
-  const fsRootUrl = getFSRootUrl();
-  const pageUrl = normalizePageUrl(`${fsRootUrl}${route}`);
-  const response = await fetch(pageUrl);
-  if (response.status === 302) {
-    const { redirect } = await response.json();
-    return loadPage(redirect);
-  }
-  if (response.ok) {
-    const source = await response.text();
-    const { content, data } = matter(source);
-    return { source: content, data };
+  const mode: MosaicMode = (process.env.MOSAIC_MODE || 'active') as MosaicMode;
+
+  if (mode === 'snapshot-file') {
+    return loadSnapshotFileContent(route);
   }
-  throw new LoadPageError({
-    message: `Could not load page : ${pageUrl} ${response.status}/${response.statusText}`,
-    statusCode: 404
-  });
+
+  return loadActiveContent(route);
 };

packages/loaders/src/loadActiveContent.ts

@@ -0,0 +1,60 @@
+import matter from 'gray-matter';
+import type { SafeParseError } from 'zod';
+import { activeEnvSchema } from '@jpmorganchase/mosaic-schemas';
+
+import { LoadPageError } from './LoadPageError';
+import type { LoaderPage } from './types/index.js';
+
+const normalizePageUrl = (url: string): string => (/\/index$/.test(url) ? `${url}.mdx` : url);
+
+type ActiveModeUrlEnv = {
+  MOSAIC_ACTIVE_MODE_URL: string;
+};
+
+const getFSRootUrl = (): string => {
+  const env = activeEnvSchema.safeParse(process.env);
+  if (!env.success) {
+    const { error } = env as SafeParseError<ActiveModeUrlEnv>;
+    error.issues.forEach(issue => {
+      console.error(
+        `Missing process.env.${issue.path.join()} environment variable required to load pages`
+      );
+    });
+    throw new LoadPageError({
+      message: `Environment variables missing to load pages`,
+      statusCode: 500
+    });
+  }
+  return env.data.MOSAIC_ACTIVE_MODE_URL;
+};
+
+export const loadActiveMosaicData = async <T>(url: string): Promise<T> => {
+  const fsRootUrl = getFSRootUrl();
+  const dataUrl = new URL(url, fsRootUrl);
+  const response = await fetch(dataUrl);
+
+  if (!response.ok) {
+    // This will activate the closest `error.js` Error Boundary
+    throw new Error(`Failed to fetch mosaic data @ ${dataUrl}`);
+  }
+  return response.json();
+};
+
+export const loadActiveContent = async (route: string): Promise<LoaderPage> => {
+  const fsRootUrl = getFSRootUrl();
+  const pageUrl = normalizePageUrl(`${fsRootUrl}${route}`);
+  const response = await fetch(pageUrl);
+  if (response.status === 302) {
+    const { redirect } = await response.json();
+    return loadActiveContent(redirect);
+  }
+  if (response.ok) {
+    const source = await response.text();
+    const { content, data } = matter(source);
+    return { source: content, data };
+  }
+  throw new LoadPageError({
+    message: `Could not load page : ${pageUrl} ${response.status}/${response.statusText}`,
+    statusCode: 404
+  });
+};

packages/loaders/src/loadSnapshotFileContent.ts

@@ -0,0 +1,62 @@
+import path from 'path';
+import fs from 'node:fs/promises';
+import matter from 'gray-matter';
+import { snapshotFileEnvSchema } from '@jpmorganchase/mosaic-schemas';
+
+import { LoadPageError } from './LoadPageError';
+import type { LoaderPage } from './types/index.js';
+
+const normalizePageUrl = (url: string): string => (/\/index$/.test(url) ? `${url}.mdx` : url);
+
+const getFSRootUrl = (): string => {
+  const env = snapshotFileEnvSchema.safeParse(process.env);
+  if (!env.success) {
+    env.error.issues.forEach(issue => {
+      console.error(
+        `Missing process.env.${issue.path.join()} environment variable required to load pages`
+      );
+    });
+    throw new LoadPageError({
+      message: `Environment variables missing to load pages`,
+      statusCode: 500
+    });
+  }
+  return env.data.MOSAIC_SNAPSHOT_DIR;
+};
+
+export const loadSnapshotFileMosaicData = async <T>(url: string): Promise<T> => {
+  const fsRootUrl = getFSRootUrl();
+  const filePath = path.join(process.cwd(), fsRootUrl, url);
+  try {
+    const realPath = await fs.realpath(filePath);
+
+    const source = await fs.readFile(realPath, 'utf-8');
+    return JSON.parse(source);
+  } catch {
+    throw new Error(`Failed to fetch mosaic data @ ${url}`);
+  }
+};
+
+export const loadSnapshotFileContent = async (route: string): Promise<LoaderPage> => {
+  const fsRootUrl = getFSRootUrl();
+  const pageUrl = normalizePageUrl(route);
+  const filePath = path.posix.join(process.cwd(), fsRootUrl, pageUrl);
+  try {
+    let localPath = filePath;
+    if ((await fs.stat(filePath)).isDirectory()) {
+      localPath = path.posix.join(localPath, 'index');
+    }
+    const realPath = await fs.realpath(localPath);
+    const source = await fs.readFile(realPath, 'utf-8');
+    const { content, data } = matter(source);
+    return { source: content, data };
+  } catch (error) {
+    if (error instanceof Error) {
+      console.error(error.message);
+    }
+    throw new LoadPageError({
+      message: `Could not read local file '${filePath}' for '${route}'`,
+      statusCode: 404
+    });
+  }
+};

packages/site-components/package.json

@@ -44,7 +44,6 @@
     "@jpmorganchase/mosaic-content-editor-plugin": "^0.1.0-beta.89",
     "@jpmorganchase/mosaic-labs-components": "^0.1.0-beta.89",
     "@jpmorganchase/mosaic-open-api-component": "^0.1.0-beta.89",
-    "@jpmorganchase/mosaic-site-middleware": "^0.1.0-beta.89",
     "@jpmorganchase/mosaic-store": "^0.1.0-beta.89",
     "@jpmorganchase/mosaic-theme": "^0.1.0-beta.89",
     "@salt-ds/core": "^1.33.0",

packages/site-components/src/Drawer/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'clsx';
 import { LayerLayout } from '@salt-ds/lab';
@@ -27,14 +27,18 @@ export function Drawer({ children, TriggerElement, side }: DrawerProps) {
   const handleNavigationToggle = () => {
     setOpen(!open);
   };
+  const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    setPortalElement(document.querySelector<HTMLElement>('[data-mosaic-id="portal-root"]'));
+  }, []);
 
-  const portalRoot = document.querySelector('[data-mosaic-id="portal-root"]');
   return (
     <>
       <div ref={triggerRef}>
         <TriggerElement open={open} onClick={handleNavigationToggle} />
       </div>
-      {portalRoot
+      {portalElement
         ? createPortal(
             <div className={styles.root}>
               <LayerLayout
@@ -62,7 +66,7 @@ export function Drawer({ children, TriggerElement, side }: DrawerProps) {
                 {children}
               </LayerLayout>
             </div>,
-            portalRoot
+            portalElement
           )
         : null}
     </>

packages/site-preset-styles/package.json

@@ -39,6 +39,7 @@
     "@jpmorganchase/mosaic-site-components": "0.1.0-beta.89",
     "@jpmorganchase/mosaic-layouts": "0.1.0-beta.89",
     "@jpmorganchase/mosaic-theme": "0.1.0-beta.89",
+    "@jpmorganchase/mosaic-mdx-components": "0.1.0-beta.89",
     "prismjs": "^1.23.0"
   },
   "peerDependencies": {}

packages/site/next.config.js

@@ -1,5 +1,3 @@
-const webpack = require('webpack');
-
 module.exports = {
   reactStrictMode: true,
   swcMinify: true,

packages/site/package.json

@@ -35,6 +35,7 @@
     "@jpmorganchase/mosaic-layouts": "^0.1.0-beta.89",
     "@jpmorganchase/mosaic-loaders": "^0.1.0-beta.89",
     "@jpmorganchase/mosaic-site-components": "^0.1.0-beta.89",
+    "@jpmorganchase/mosaic-site-components-next": "^0.1.0-beta.89",
     "@jpmorganchase/mosaic-site-preset-styles": "^0.1.0-beta.89",
     "@jpmorganchase/mosaic-sitemap-component": "^0.1.0-beta.89",
     "@jpmorganchase/mosaic-source-git-repo": "^0.1.0-beta.89",