From 35fd68b46049f289f3d7cfae605bda4dcc3f610c Mon Sep 17 00:00:00 2001
From: Rob Ellison <rob.ellison@r&r.org.uk>
Date: Fri, 30 Jun 2023 10:30:00 +0000
Subject: [PATCH] feat: add ToC

---
 .../navigation-drawer/navigation-drawer.js    |   5 +-
 components/content/TableOfContents.jsx        | 110 ++++++++++++
 components/content/index.js                   |   3 +-
 components/dashboard/TopBar.jsx               |   2 +-
 components/display/PresentationOutput.jsx     |   1 +
 components/etherpad/Etherpad.jsx              |  17 +-
 components/solutions/SolutionView.jsx         |  53 +++---
 constants/mdxProvider.js                      |  14 +-
 constants/theme.js                            |  10 +-
 lib/content/mdx.js                            |  90 +++-------
 pages/customers/[...customer].jsx             |   4 +-
 pages/solutions/[...solution].jsx             | 158 ++++++++++--------
 12 files changed, 277 insertions(+), 190 deletions(-)
 create mode 100644 components/content/TableOfContents.jsx

diff --git a/components/airview-ui/navigation-drawer/navigation-drawer.js b/components/airview-ui/navigation-drawer/navigation-drawer.js
index 3cfef18d..94af9711 100644
--- a/components/airview-ui/navigation-drawer/navigation-drawer.js
+++ b/components/airview-ui/navigation-drawer/navigation-drawer.js
@@ -18,7 +18,7 @@ export function NavigationDrawer({
         bottom: 0,
         left: 0,
         width: drawerWidth,
-        borderRight: 1,
+        borderRight: 0,
         borderColor: "grey.300",
         paddingY: 6,
         paddingX: 3,
@@ -26,7 +26,8 @@ export function NavigationDrawer({
         backgroundColor: "common.white",
         zIndex: 1200,
         overflowY: "auto",
-        displayPrint: 'none'
+        displayPrint: 'none',
+        borderTop: '1px solid #e0e0e0'
       }}
     >
       {children}
diff --git a/components/content/TableOfContents.jsx b/components/content/TableOfContents.jsx
new file mode 100644
index 00000000..571c864f
--- /dev/null
+++ b/components/content/TableOfContents.jsx
@@ -0,0 +1,110 @@
+import React, {useState} from 'react';
+import { Link as MuiLink, Box, Typography, List, ListItem, ListItemText, styled, Collapse, IconButton } from '@mui/material';
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+// Custom styled components
+const SmallListItemText = styled(ListItemText)(({ theme }) => ({
+    fontSize: theme.typography.body2.fontSize,
+    lineHeight: theme.typography.body2.lineHeight,
+    paddingBottom: theme.spacing(0),
+    paddingTop: theme.spacing(0),
+    marginBottom: theme.spacing(0),
+    marginTop: theme.spacing(0),
+}));
+
+const generateTableOfContents = (tableOfContents, numbering = []) => {
+    if (!tableOfContents || tableOfContents.length === 0) {
+        return null;
+    }
+
+    return (
+        <List component="nav" aria-labelledby="table-of-contents">
+            {tableOfContents.map((item, index) => {
+                const { depth, value, id, children } = item;
+                const itemNumbering = [...numbering, index + 1];
+                const numberingString = itemNumbering.join('.');
+
+                const listItemText = (
+                    <SmallListItemText
+                        primaryTypographyProps={{ variant: 'body2' }}
+                        disableTypography
+                    >
+                        <span>{`${numberingString} `}</span>
+                        {value}
+                    </SmallListItemText>
+                );
+
+                if (children && children.length > 0) {
+                    return (
+                        <List key={id} sx={{ p: 0 }}>
+                            <ListItem sx={{ p: 0 }}>{listItemText}</ListItem>
+                            <List sx={{ p: 0 }}>
+                                {generateTableOfContents(children, itemNumbering)}
+                            </List>
+                        </List>
+                    );
+                }
+
+                return (
+                    <ListItem key={id} disableGutters sx={{ p: 0 }}>
+                        <MuiLink href={`#${id}`} underline="none">
+                            {listItemText}
+                        </MuiLink>
+                    </ListItem>
+                );
+            })}
+        </List>
+    );
+};
+
+export const TableOfContents = ({ tableOfContents }) => {
+    const [collapsed, setCollapsed] = useState(false);
+    const menuTitleElement = "h3"
+    const loading = false;
+    const menuTitle = 'Page Contents'
+    return (
+        <Box sx={{ pl: 0 }}>
+            <Box
+                component="header"
+                sx={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    marginBottom: 0,
+                }}
+            >
+                <Typography
+                    component={menuTitleElement}
+                    variant="subtitle2"
+                    sx={{ display: "block", flex: "1 1 auto", fontSize: 16 }}
+                >
+                    {loading ? <Skeleton width="90%" /> : menuTitle}
+                </Typography>
+
+                <IconButton
+                    onClick={() => setCollapsed((prevState) => !prevState)}
+                    size="medium"
+                    aria-label={collapsed ? "Expand menu" : "Collapse menu"}
+                    disabled={loading}
+                    sx={{
+                        marginLeft: 1,
+                        padding: 0,
+                        color: "primary.main",
+                    }}
+                >
+                    {collapsed ? (
+                        <KeyboardArrowRightIcon fontSize="inherit" />
+                    ) : (
+                        <KeyboardArrowDownIcon fontSize="inherit" />
+                    )}
+                </IconButton>
+            </Box>
+            <Collapse in={!collapsed}>
+
+            
+                {generateTableOfContents(tableOfContents)}
+            
+            </Collapse>
+        </Box>
+    );
+};
diff --git a/components/content/index.js b/components/content/index.js
index 02e704e9..2a868b42 100644
--- a/components/content/index.js
+++ b/components/content/index.js
@@ -1,2 +1,3 @@
 export { IndexView } from './IndexView'
-export { ContentView } from './ContentView'
\ No newline at end of file
+export { ContentView } from './ContentView'
+export { TableOfContents } from './TableOfContents'
\ No newline at end of file
diff --git a/components/dashboard/TopBar.jsx b/components/dashboard/TopBar.jsx
index 8e235b47..863ecd47 100644
--- a/components/dashboard/TopBar.jsx
+++ b/components/dashboard/TopBar.jsx
@@ -43,7 +43,7 @@ export function TopBar({
 
   
     return (
-      <AppBar position="fixed" color="white" elevation={0} sx={{ displayPrint: 'none',borderBottom: '1px solid #e0e0e0' }}>
+      <AppBar position="fixed" color="white" elevation={0} sx={{ displayPrint: 'none', borderBottom: 1, borderColor: 'grey.300' }}>
         <Toolbar>
           {/* has menu */}
         {menu &&  <IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }} onClick={onNavButtonClick}>{navOpen ? <CloseIcon /> : <MenuIcon />}</IconButton>}
diff --git a/components/display/PresentationOutput.jsx b/components/display/PresentationOutput.jsx
index 51d18d64..56c7a031 100644
--- a/components/display/PresentationOutput.jsx
+++ b/components/display/PresentationOutput.jsx
@@ -14,6 +14,7 @@ export const PresentationOutput = dynamic(() => Promise.resolve(PresentationOutp
   ssr: true,
 });
 
+
 function PresentationOutputPage({ children, handlePresentation, refresh = false, content }) {
   const [pageContent, setContent] = useState({ content: undefined, frontmatter: undefined });
 
diff --git a/components/etherpad/Etherpad.jsx b/components/etherpad/Etherpad.jsx
index 9916a6be..eef8f5a8 100644
--- a/components/etherpad/Etherpad.jsx
+++ b/components/etherpad/Etherpad.jsx
@@ -7,7 +7,7 @@ import * as matter from 'gray-matter';
 import { siteConfig } from "../../site.config.js";
 
 
-export function Etherpad({ file, children }) {
+export function Etherpad({ file, frontMatterCallback }) {
 
 
   const etherpad_host = siteConfig?.etherpad?.url ?? null
@@ -38,6 +38,7 @@ export function Etherpad({ file, children }) {
   useEffect(() => { // process the rawcontent
     const { mdxContent, frontmatter } = useMDX(content, 'mdx');
     setPageContent({ content: mdxContent, frontmatter: frontmatter });
+    frontMatterCallback(frontmatter);
   }, [content])
 
   // useEffect(() => {
@@ -113,20 +114,22 @@ export function Etherpad({ file, children }) {
                 }
               })
               .catch(error => {
-                // // // console.log(error)
+                console.error('Etherpad:Error refreshing pad: ', error)
               })
           }
 
         })
         .catch(error => {
-          // // // console.log(error)
+          console.error('Etherpad:Error refreshing pad revisions: ', error)
         })
-        .finally(() => {
-          setTimeout(() => setRefreshToken(Math.random()), 5000);
-        });
+        
     }
 
-    if (padId) { fetchPadContent() } else { fetchPadMetadata() }
+    if (padId) { 
+      fetchPadContent()
+      setTimeout(() => setRefreshToken(Math.random()), 5000);
+      console.log('Etherpad:useEffect:PadRefresh')
+    } else { fetchPadMetadata() }
 
   }, [refreshToken]);
 
diff --git a/components/solutions/SolutionView.jsx b/components/solutions/SolutionView.jsx
index ae0aad94..8aa0733f 100644
--- a/components/solutions/SolutionView.jsx
+++ b/components/solutions/SolutionView.jsx
@@ -13,6 +13,7 @@ import SlideshowIcon from '@mui/icons-material/Slideshow';
 import { IconButton, Typography, MenuItem, Box, Alert, Grid, ButtonBase } from '@mui/material';
 
 import { AsideAndMainContainer, Aside, Main } from '@/components/airview-ui';
+import { TableOfContents } from '@/components/content';
 
 export function SolutionView({
   children,
@@ -24,6 +25,11 @@ export function SolutionView({
 }) {
 
 
+  let tableOfContents = [];
+  if (frontmatter && frontmatter.tableOfContents) {
+
+
+  }
   // console.log('SolutionView:menuStructure: ', menuStructure)
   const navDrawerWidth = 300;
   const topBarHeight = 64;
@@ -111,6 +117,7 @@ export function SolutionView({
               {children && children}
             </Main>
             <Aside sx={{ mt: '1%', displayPrint: 'none', display: print ? 'none' : '' }}>
+
               <ContentMenu
                 content={relatedContent}
                 // chapters={chapters}
@@ -119,6 +126,8 @@ export function SolutionView({
                 handleContentClick={handleContentClick}
                 file={file}
               />
+              {frontmatter?.tableOfContents && <TableOfContents tableOfContents={frontmatter.tableOfContents} />}
+
               {/* <ButtonMenu
                 menuTitle="Controls"
                 menuItems={createControlMenu(controls)}
@@ -188,28 +197,28 @@ function ContentMenu({ content, file, handleContentClick }) {
 
     return (
       <>
-      <ButtonBase
-                          variant="text"
-                          onClick={() => handleContentClick('/' + file, 'primary link')}
-                          sx={{
-                            textDecoration: "none",
-                            textTransform: 'none',
-                            textAlign: 'left',
-                            fontWeight: 'bold',
-                            color: 'secondary.main',
-                            mb: '5%'
-                          }}
-                        >Main Content</ButtonBase>
-
-      <ButtonMenu
-      menuTitle="Content"
-      menuItems={chaptersMenu}
-      initialCollapsed={false}
-      loading={false}
-      fetching={false}
-      handleButtonClick={handleContentClick}
-    /></>
-   
+        <ButtonBase
+          variant="text"
+          onClick={() => handleContentClick('/' + file, 'primary link')}
+          sx={{
+            textDecoration: "none",
+            textTransform: 'none',
+            textAlign: 'left',
+            fontWeight: 'bold',
+            color: 'secondary.main',
+            mb: '5%'
+          }}
+        >Main Content</ButtonBase>
+
+        <ButtonMenu
+          menuTitle="Related Content"
+          menuItems={chaptersMenu}
+          initialCollapsed={false}
+          loading={false}
+          fetching={false}
+          handleButtonClick={handleContentClick}
+        /></>
+
     )
     // return (
     //   <Menu
diff --git a/constants/mdxProvider.js b/constants/mdxProvider.js
index 4caecff3..ca037770 100644
--- a/constants/mdxProvider.js
+++ b/constants/mdxProvider.js
@@ -195,17 +195,17 @@ function MdxImage({ props, baseContext }) {
 
 // export const mdComponents = {
 export const mdComponents = (baseContext) => ({
-  h1: (props) => <Typography variant="h1">{props.children}</Typography>,
-  h2: (props) => <Typography variant="h2">{props.children}</Typography>,
-  h3: (props) => <Typography variant="h3">{props.children}</Typography>,
-  h4: (props) => <Typography variant="h4">{props.children}</Typography>,
-  h5: (props) => <Typography variant="h5">{props.children}</Typography>,
+  h1: (props) => <Typography variant="h1" id={props.id}>{props.children}</Typography>,
+  h2: (props) => <Typography variant="h2" id={props.id}>{props.children}</Typography>,
+  h3: (props) => <Typography variant="h3" id={props.id}>{props.children}</Typography>,
+  h4: (props) => <Typography variant="h4" id={props.id}>{props.children}</Typography>,
+  h5: (props) => <Typography variant="h5" id={props.id}>{props.children}</Typography>,
   p: (props) => <Typography variant="p">{props.children}</Typography>,
   img: (props) => (<MdxImage props={props} baseContext={baseContext} fill loading="lazy" />),
   strong: (props) => <Typography variant="strong">{props.children}</Typography>,
-  ul: (props) => <Typography variant="ul">{props.children}</Typography>,
+  // ul: (props) => <Typography variant="ul">{props.children}</Typography>,
   // table: (props) => <Typography variant="table">{props.children}</Typography>,
-  hr: (props) => null,
+  // hr: (props) => null,
   pre: (props) => props.children,
   code: (props) => {
     const { className } = props;
diff --git a/constants/theme.js b/constants/theme.js
index c8a1fa9d..2a146cfe 100644
--- a/constants/theme.js
+++ b/constants/theme.js
@@ -155,15 +155,19 @@ const theme = deepmerge(
         color: palette.palette.text.highlight,
       },
       ul: {
-        display: 'inline',
+        display: 'inline-block',
         breakInside: 'avoid-column',
         listStyleType: 'circle',
         li: {
           listStylePosition: 'inside',
           "::marker": {
             color: 'tertiary',
-          }
-        }
+          },
+          span: {
+            display: 'inline',
+          },
+        },
+        
       },
       table: {
         display: "inline-table",
diff --git a/lib/content/mdx.js b/lib/content/mdx.js
index ddd36258..cea5929c 100644
--- a/lib/content/mdx.js
+++ b/lib/content/mdx.js
@@ -5,16 +5,26 @@ import remarkGfm from 'remark-gfm'
 import remarkFrontmatter from 'remark-frontmatter'
 import remarkMdxFrontmatter from 'remark-mdx-frontmatter'
 import remarkUnwrapImages from 'remark-unwrap-images';
+import withSlugs from "rehype-slug"
+import withToc from "@stefanprobst/rehype-extract-toc"
+import withTocExport from "@stefanprobst/rehype-extract-toc/mdx"
 import * as matter from 'gray-matter';
 
 
 export function useMDX(source, format='mdx', wrapper=null) {
-  const remarkPlugins = []
+  const remarkPlugins = [];
   remarkPlugins.push(remarkGfm);
   remarkPlugins.push(remarkFrontmatter);
   remarkPlugins.push(remarkMdxFrontmatter);
   remarkPlugins.push(remarkUnwrapImages);
 
+  const rehypePlugins = [];
+
+  rehypePlugins.push(withSlugs);
+  rehypePlugins.push(withToc);
+  rehypePlugins.push(withTocExport)
+    
+
   if (wrapper) {
     const {data, content} = matter(source);
     const wrappedMDX = `<${wrapper}>${content}</${wrapper}>`
@@ -24,9 +34,11 @@ export function useMDX(source, format='mdx', wrapper=null) {
       useDynamicImport: true,
       format: format,
       remarkPlugins,
+      rehypePlugins
     });
-    return { mdxContent: exports.default, frontmatter: data };
-
+    let frontmatter = exports?.frontmatter || {}
+    frontmatter.tableOfContents = exports.tableOfContents
+    return { mdxContent: exports.default, frontmatter: frontmatter};
   } else {
 
   const exports = evaluateSync(source, {
@@ -35,9 +47,11 @@ export function useMDX(source, format='mdx', wrapper=null) {
     useDynamicImport: true,
     format: format,
     remarkPlugins,
+    rehypePlugins
   });
-
-  return { mdxContent: exports.default, frontmatter: exports.frontmatter };
+  let frontmatter = exports?.frontmatter || {}
+  frontmatter.tableOfContents = exports.tableOfContents
+  return { mdxContent: exports.default, frontmatter: frontmatter};
 }
 }
 
@@ -52,69 +66,3 @@ function withWrapper(WrappedComponent, Wrapper) {
   }
 }
 
-
-// export function useMdxold(defaults) {
-//     const [state, setState] = useState({ ...defaults, file: null })
-  
-//     const { run: setConfig } = useDebounceFn(
-//       async (config) => {
-//         let frontmatter = null;
-//         // process frontmatter
-//         try {
-//           if (config.pageParms && config.pageParms.parms) { delete config.pageParms.parms };
-//           const { content, data } = matter(config.value);
-//           frontmatter = { ...data, ...config.pageParms };
-//           config.value = matter.stringify(content, { ...frontmatter });
-//         } catch (error) {
-//           // // console.log(error)
-//         }
-  
-//         const file = new VFile({ basename: 'example.mdx', value: config.value })
-//         if (frontmatter) { file.frontmatter = frontmatter };
-  
-//         const capture = (name) => () => (tree) => {
-//           file.data[name] = tree
-//         }
-  
-//         const remarkPlugins = []
-  
-//         if (config.gfm) remarkPlugins.push(remarkGfm)
-//         if (config.frontmatter) {
-//           remarkPlugins.push(remarkFrontmatter);
-//           remarkPlugins.push(remarkMdxFrontmatter);
-//         }
-//         if (config.unwrapImages) remarkPlugins.push(remarkUnwrapImages)
-//         // remarkPlugins.push(capture('mdast'))
-  
-//         try {
-//           file.result = (
-//             await evaluate(file, {
-//               ...provider,
-//               ...runtime,
-//               useDynamicImport: true,
-//               remarkPlugins,
-//               // rehypePlugins: [capture('hast')],
-//               // recmaPlugins: [capture('esast')],
-  
-//             })
-//           ).default
-//         } catch (error) {
-//           // // // console.log('output:evalutate:Error: ', error)
-//           // // // console.log('output:evalutate:Error/Content: ', file)
-//           const message =
-//             error instanceof VFileMessage ? error : new VFileMessage(error)
-  
-//           if (!file.messages.includes(message)) {
-//             file.messages.push(message)
-//           }
-  
-//           message.fatal = true
-//         }
-//         // // // console.log('output:evalutate:Success/Content: ', file)
-//         setState({ ...config, file })
-//       },
-//       { leading: true, trailing: true, wait: 0 }
-//     )
-  
-//     return [state, setConfig]
-//   }
\ No newline at end of file
diff --git a/pages/customers/[...customer].jsx b/pages/customers/[...customer].jsx
index 14cf47b0..6238b6b6 100644
--- a/pages/customers/[...customer].jsx
+++ b/pages/customers/[...customer].jsx
@@ -73,8 +73,8 @@ export default function Page({
     } else {
       format = 'mdx;'
     }
-    const { mdxContent, frontmatter } = useMDX(content, format);
-    setContent({ content: mdxContent, frontmatter: frontmatter });
+    const { mdxContent, frontmatter } = useMDX(content ? content : initialContent, format);
+    setContent({ content: mdxContent, frontmatter: frontmatter});
   }, [content])
 
   useEffect(() => {
diff --git a/pages/solutions/[...solution].jsx b/pages/solutions/[...solution].jsx
index 5a4bb1dc..03c3e047 100644
--- a/pages/solutions/[...solution].jsx
+++ b/pages/solutions/[...solution].jsx
@@ -6,6 +6,7 @@ import { MDXProvider } from "@mdx-js/react";
 import { useMDX } from "@/lib/content/mdx";
 
 import { SolutionView } from "@/components/solutions";
+import { getFileContent } from "@/lib/github";
 
 import { FullScreenSpinner } from '@/components/dashboard/index.js';
 import { dirname, basename } from 'path';
@@ -26,26 +27,32 @@ export default function Page({
     frontmatter: undefined,
   });
 
+  // console.log('Solutions:Page:initialContent: ', initialContent)
+
   const [content, setRawContent] = useState(initialContent);
-    const [contentSource, setContentSource] = useState(null)
+  const [contentSource, setContentSource] = useState(null)
   const [menuStructure, setMenuStructure] = useState(null);
-  const [rev, setRev] = useState(0);
+
+  const frontMatterCallback = (frontmatter) => {
+    setContent({frontmatter: frontmatter})
+  }
 
   const handleContentClick = async (url, label) => {
     // console.log("Content Clicked: label: ", label, " url: ", url);
 
     if (url && url.endsWith(".etherpad")) { // load the pad
       const cacheKey = 'etherpad:/' + url
-      const { rev, rawContent, frontmatter } = await fetchPadDetails(cacheKey);
+      const { frontmatter } = await fetchPadDetails(cacheKey);
       setContentSource('etherpad:' + frontmatter.padID);
-      const pad = await fetchPadDetails(cacheKey);
-      // console.log("handleContentClick: ", pad);
+      // const pad = await fetchPadDetails(cacheKey);
+      // // console.log("handleContentClick: ", pad);
 
-      if (pad.rawContent && pad.frontmatter) {
-        setRev(pad.rev);
-        setRawContent(matter.stringify(pad.rawContent, pad.frontmatter));
-      }
+      // if (pad.rawContent && pad.frontmatter) {
+      //   setRev(pad.rev);
+      //   setRawContent(matter.stringify(pad.rawContent, pad.frontmatter));
+      // }
     } else if (url) {
+      setContentSource('api')
       // load from github
       try {
         const response = await fetch(
@@ -53,9 +60,6 @@ export default function Page({
         );
         if (response.ok) {
           const data = await response.text();
-          // // console.log('handleContentClick:data: ', data);
-          // const content = Buffer.from(data ?? "", "base64").toString("utf8");
-          // // console.log('handleContentClick:content: ', content);
           setRawContent(data);
         } else {
           throw new Error("Error fetching files");
@@ -67,56 +71,63 @@ export default function Page({
   };
 
   useEffect(() => {
-    // console.log("useEffect:MDX:File: ", file);
-    let format;
+    const loadPad = async (file) => {
+      const cacheKey = 'etherpad:/' + file
+      const { frontmatter } = await fetchPadDetails(cacheKey);
+      setContentSource('etherpad:' + frontmatter.padID);
+    };
+
     if (file && file.endsWith(".md")) {
-      format = "md";
+      setContentSource('api')
+      const { mdxContent, frontmatter } = useMDX(content ? content : initialContent, 'md');
+      setContent({ content: mdxContent, frontmatter: frontmatter });
     } else if (file && file.endsWith(".mdx")) {
-      format = "mdx";
+      setContentSource('api')
+      const { mdxContent, frontmatter } = useMDX(content ? content : initialContent, 'mdx');
+      setContent({ content: mdxContent, frontmatter: frontmatter });
     } else if (file && file.endsWith(".etherpad")) {
-      format = "mdx";
-    } else {
-      format = "mdx;";
+      loadPad(file)
     }
-    const { mdxContent, frontmatter } = useMDX(content, format);
-    setContent({ content: mdxContent, frontmatter: frontmatter });
-  }, [content]);
+    // const { mdxContent, frontmatter } = useMDX(content ? content : initialContent, format);
+    // setContent({ content: mdxContent, frontmatter: frontmatter});
 
-  useEffect(() => {
-    const fetchData = async () => {
-      const cacheKey = 'etherpad:/' + file;
-      try {
-        const pad = await fetchPadDetails(cacheKey);
-        return pad;
-      } catch (error) {
-        console.error("Error fetching pad details:", error);
-        return null;
-      }
-    };
+  }, [file, content]);
 
-    if (file && file.endsWith(".etherpad")) {
-      
-      const fetchDataAndSetState = async () => {
-        const padDetails = await fetchData();
-        // console.log("useEffect:fetchData1: ", padDetails);
-
-        if (padDetails && padDetails.rawContent && padDetails.frontmatter) {
-          setContentSource('etherpad:' + padDetails.frontmatter.padID);
-
-          // console.log('useEffect:fetchData2: ', padDetails);
-  
-          setRev(padDetails.rev);
-          setRawContent(
-            matter.stringify(padDetails.rawContent, padDetails.frontmatter)
-          );
-        }
-      };
+  // useEffect(() => {
+  //   const fetchData = async () => {
+  //     const cacheKey = 'etherpad:/' + file;
+  //     try {
+  //       const pad = await fetchPadDetails(cacheKey);
+  //       return pad;
+  //     } catch (error) {
+  //       console.error("Error fetching pad details:", error);
+  //       return null;
+  //     }
+  //   };
 
-      fetchDataAndSetState();
-    } else {
-      setContentSource('git')
-    }
-  }, [file]);
+  //   if (file && file.endsWith(".etherpad")) {
+
+  //     const fetchDataAndSetState = async () => {
+  //       const padDetails = await fetchData();
+  //       // console.log("useEffect:fetchData1: ", padDetails);
+
+  //       if (padDetails && padDetails.rawContent && padDetails.frontmatter) {
+  //         setContentSource('etherpad:' + padDetails.frontmatter.padID);
+
+  //         // console.log('useEffect:fetchData2: ', padDetails);
+
+  //         setRev(padDetails.rev);
+  //         setRawContent(
+  //           matter.stringify(padDetails.rawContent, padDetails.frontmatter)
+  //         );
+  //       }
+  //     };
+
+  //     fetchDataAndSetState();
+  //   } else {
+  //     setContentSource('git')
+  //   }
+  // }, [file]);
 
   const context = { file: file, ...siteConfig.content.solutions };
 
@@ -160,30 +171,25 @@ export default function Page({
     // // console.log('initialMenuStructure: ', initialMenuStructure);
     fetchDataAndUpdateState();
 
-  }, [initialMenuStructure] );
+  }, [initialMenuStructure]);
 
-  
 
-  if (pageContent.content && pageContent.frontmatter) {
 
+  if (pageContent.content && pageContent.frontmatter) {
+    console.log('pageContent has content: ', pageContent)
     const Content = pageContent.content;
-    const WrappedContent = () => {
-      // console.log('contentSource: ', contentSource)
-    
-      if (contentSource && contentSource.startsWith('etherpad')) {
-
-        return <Etherpad file={file}><Content /></Etherpad>;
-      } else {
-        // console.log('contentSource: ', contentSource)
-        return <Content />;
-      }
-    }
-    
     return <SolutionView frontmatter={pageContent.frontmatter} file={file} content={content} menuStructure={menuStructure} handleContentClick={handleContentClick}>
       <MDXProvider components={mdComponents(context)}>
-        <WrappedContent />
+        <Content />
       </MDXProvider>
     </SolutionView>
+  } else if (file && contentSource && contentSource.startsWith('etherpad')) {
+    return <SolutionView frontmatter={pageContent.frontmatter} file={file} content={content} menuStructure={menuStructure} handleContentClick={handleContentClick}>
+      <MDXProvider components={mdComponents(context)}>
+        <Etherpad file={file} frontMatterCallback={frontMatterCallback} />
+      </MDXProvider>
+    </SolutionView>
+
   } else {
     return (
       <SolutionView
@@ -225,9 +231,9 @@ export async function getStaticPaths() {
 
 export async function getStaticPaths() {
   return {
-          fallback: true,
-          paths: []
-        }
+    fallback: true,
+    paths: []
+  }
 }
 
 export async function getStaticProps(context) {
@@ -242,9 +248,13 @@ export async function getStaticProps(context) {
       file
     );
   }
+
+
   const pageContentText = pageContent
     ? Buffer.from(pageContent).toString("utf-8")
     : "";
+
+
   const menuStructure = await getMenuStructure(
     siteConfig,
     siteConfig.content.solutions