Merge pull request #112 from AirWalk-Digital/fix_externalcontent

fix: context loading
AirWalk-Digital · Aug 3, 2023 · 4116b20 · 4116b20
2 parents 4c4d3b4 + 6976b96
commit 4116b20
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 46 deletions.
diff --git a/components/content/ContentPage.jsx b/components/content/ContentPage.jsx
@@ -79,7 +79,7 @@ export function ContentPage({
   const Content = () => {
     if (context && context.file && context.file.endsWith('.etherpad')) {
       return <Etherpad file={context.file} frontMatterCallback={frontMatterCallback} editMode={editMode} />
-    } else if (pageContent.content && pageContent.frontmatter) {
+    } else if (context && pageContent.content && pageContent.frontmatter) {
       const Page = pageContent.content;
       return <Page />;
     } else {
@@ -163,12 +163,13 @@ export function ContentPage({
             }
 
             <AsideAndMainContainer>
-              <Main sx={{}}>
+              {/* <Main sx={{}}> */}
+              <Main>
                 <MDXProvider components={mdComponents(context)}>
                   <><Content /></>
                 </MDXProvider>
               </Main>
-              <Aside sx={{ mt: '1%', displayPrint: 'none', display: print ? 'none' : '' }}>
+              <Aside sx={{ displayPrint: 'none', display: print ? 'none' : '' }}>
 
                 <ContentMenu
                   content={relatedContent}

diff --git a/constants/mdxProvider.js b/constants/mdxProvider.js
@@ -46,6 +46,8 @@ import CloseIcon from '@mui/icons-material/Close';
 
 
 function MdxImage({ props, baseContext }) {
+  // console.debug('mdxProvider:MdxImage:baseContext: ', baseContext)
+
   let src = props.src;
 
   if (isSharePointUrl(src)) {
@@ -73,7 +75,7 @@ function MdxImage({ props, baseContext }) {
       }
 
       src = '/api/content/github/' + baseContext.owner + '/' + baseContext.repo + '?path=' + src + '&branch=' + baseContext.branch;
-      console.debug('mdxProvider:MdxImage:src: ', src)
+      // console.debug('mdxProvider:MdxImage:src: ', src)
 
     } else {
       src = '/image-not-found.png';

diff --git a/lib/content/index.js b/lib/content/index.js
@@ -1,6 +1,6 @@
 // helper for content and page contexts
 
 export { useMDX } from './mdx';
-export { getContent, getMenuStructure } from './menuContent';
+export { getContent, getMenuStructure, getFrontMatter } from './menuContent';
 export { groupMenu } from './menu'
 export { githubExternal } from './loader'
diff --git a/lib/content/loader.js b/lib/content/loader.js
@@ -6,8 +6,8 @@ export async function githubExternal(frontmatter, context) {
     let branch = null;
     let path = null;
 
-    console.log('githubExternal:frontmatter: ', frontmatter)
-    console.log('githubExternal:context: ', context)
+    // console.log('githubExternal:frontmatter: ', frontmatter)
+    // console.log('githubExternal:context: ', context)
 
     try {
         if (frontmatter.external) {
@@ -37,13 +37,13 @@ export async function githubExternal(frontmatter, context) {
             collections: context.collections
           }
 
-        console.log('githubExternal:api: ', `/api/content/github/${owner}/${repo}?branch=${branch}&path=${path}`)
+        // console.log('githubExternal:api: ', `/api/content/github/${owner}/${repo}?branch=${branch}&path=${path}`)
 
         const response = await fetch(
             `/api/content/github/${owner}/${repo}?branch=${branch}&path=${path}`
         );
 
-        console.log('githubExternal:response: ', response)
+        // console.log('githubExternal:response: ', response)
 
         if (response.ok) {
 

diff --git a/lib/content/menuContent.js b/lib/content/menuContent.js
@@ -2,6 +2,66 @@ import { getBranchSha, getAllFiles, getFileContent } from '@/lib/github'
 import * as matter from 'gray-matter';
 import { cacheWrite, cacheRead } from '@/lib/redis';
 
+export async function getFrontMatter(config) {
+    const files = await getAllFiles(
+        config.owner,
+        config.repo,
+        config.branch,
+        config.path,
+        true,
+        ".md*"
+    );
+
+    const branchSha = await getBranchSha(config.owner, config.repo, config.branch)
+    const cacheKey = `frontmatter:${config.path}:${branchSha}`;
+
+
+    const filesPromises = files.map((file) => {
+        return getFileContent(config.owner, config.repo, config.branch, file)
+            .then((content) => {
+                const matterData = matter(content, { excerpt: false }).data || null;
+                if (matterData) {
+                    for (let key in matterData) {
+                        if (matterData[key] instanceof Date) {
+                            matterData[key] = matterData[key].toISOString();
+                        }
+                    }
+                }
+                return { file: file, frontmatter: matterData };
+            })
+            .catch((error) => {
+                // console.error(`Error processing file ${file}: ${error}`);
+                return { file: null, frontmatter: null };
+            });
+    });
+
+    let cachedContent;
+    try {
+        cachedContent = JSON.parse(await cacheRead(cacheKey));
+    } catch (error) {
+        // Handle the error when JSON parsing fails (invalid data).
+        console.error('Error parsing cached content:', error);
+        cachedContent = null; // Or use a default value if required.
+    }
+    if (cachedContent) {
+        console.info('[GitHub][Cache][HIT]:', cacheKey)
+        // If the content was found in the cache, return it
+        return cachedContent;
+    } else {
+        console.info('[GitHub][Cache][MISS]:', cacheKey)
+    }
+
+    cachedContent = await Promise.all(filesPromises);
+    try {
+        await cacheWrite(cacheKey, JSON.stringify(cachedContent), 60 * 60 * 24); // cache for 24 hours
+    } catch (error) {
+        console.error('[GitHub][Cache][FAIL]:', cacheKey, ' : ', error)
+
+    }
+    return await Promise.all(cachedContent);
+}
+
+
 export async function getContent(siteConfig) {
     const branchSha = await getBranchSha(siteConfig.owner, siteConfig.repo, siteConfig.branch)
     const cacheKey = `files:${siteConfig.path}:${branchSha}`;
@@ -95,7 +155,7 @@ async function getSolutions(siteConfig) {
     });
     const content = await Promise.all(solutionsContentPromises);
     try {
-    await cacheWrite(cacheKey, JSON.stringify(content), 60 * 60 * 24); // cache for 24 hours
+        await cacheWrite(cacheKey, JSON.stringify(content), 60 * 60 * 24); // cache for 24 hours
     } catch (error) {
 
     }
@@ -480,7 +540,7 @@ export async function getMenuStructure(siteConfig, collection) {
 
 
     const content = { primary: primaryMenu, relatedContent };
-    // await cacheWrite(cacheKey, JSON.stringify(content), 60 * 60 * 24); // cache for 24 hours
+    await cacheWrite(cacheKey, JSON.stringify(content), 60 * 60 * 24); // cache for 24 hours
     return content
 }
 
diff --git a/lib/hooks/usePageContent.js b/lib/hooks/usePageContent.js
@@ -109,7 +109,7 @@ export function usePageContent(initialContent, initialFile, initialMenuStructure
       const cacheKey = 'etherpad:/' + url;
       const { frontmatter } = await fetchPadDetails(cacheKey);
       setContent({ content: null, frontmatter: frontmatter});
-      setContext({ file: url, ...frontmatter?.context })
+      setContext({ file: url, ...collection, ...frontmatter?.context })
       setContentSource('etherpad:' + frontmatter.padID);
     } else if (url) {
       setContentSource('api');
@@ -120,8 +120,7 @@ export function usePageContent(initialContent, initialFile, initialMenuStructure
         if (response.ok) {
           const data = await response.text();
           setContent(data);
-          setContext(context); 
-          setContext({ file: url }) // force a refresh of the page
+          setContext({ file: url, ...context, ...collection }) // force a refresh of the page
 
         } else {
           throw new Error("Error fetching files");

diff --git a/pages/products/index.jsx b/pages/products/index.jsx
@@ -1,45 +1,14 @@
 import React from "react";
 import { siteConfig } from "../../site.config.js";
-import * as matter from "gray-matter";
-import { getAllFiles, getFileContent } from "@/lib/github";
 import { IndexView } from "@/components/content";
-import { getMenuStructure, groupMenu } from "@/lib/content";
+import { getMenuStructure, groupMenu, getFrontMatter } from "@/lib/content";
 
 export default function Page({ tiles, menuStructure }) {
   return (
     <IndexView menuStructure={menuStructure} title="Products" tiles={tiles} />
   );
 }
 
-async function getFrontMatter(config) {
-  const files = await getAllFiles(
-    config.owner,
-    config.repo,
-    config.branch,
-    config.path,
-    true,
-    ".md*"
-  );
-  const filesPromises = files.map((file) => {
-    return getFileContent(config.owner, config.repo, config.branch, file)
-      .then((content) => {
-        const matterData = matter(content, { excerpt: false }).data || null;
-        if (matterData) {
-          for (let key in matterData) {
-            if (matterData[key] instanceof Date) {
-              matterData[key] = matterData[key].toISOString();
-            }
-          }
-        }
-        return { file: file, frontmatter: matterData };
-      })
-      .catch((error) => {
-        // console.error(`Error processing file ${file}: ${error}`);
-        return { file: null, frontmatter: null };
-      });
-  });
-  return await Promise.all(filesPromises);
-}
 
 export async function getServerSideProps(context) {
   // export async function getServerSideProps(context) {