feature: concatenate pages

ing-bank · Oct 27, 2023 · 24d5b12 · 24d5b12
1 parent 6dcccf6
commit 24d5b12
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 41 deletions.
diff --git a/src/content.ts b/src/content.ts
@@ -16,7 +16,7 @@ export const fundamentalsEntries = allPages.filter(isFundamentalsEntry);
 export const getInfoParentSlug = entry => entry.slug.split('/info')[0];
 
 
-export const getComponentEntry = (config) => {
+export const getComponentEntries = (config) => {
   return componentPageEntries.filter(componentEntry => {
     let match = true;
     Object.keys(config).forEach(key => {
@@ -28,19 +28,5 @@ export const getComponentEntry = (config) => {
     if (match) {
       return true;
     }    
-  })[0];
-}
-export const getComponentGlob = (globArray, config) => {
-  return globArray.filter(componentGlob => {
-    let match = true;
-    Object.keys(config).forEach(key => {
-      if (componentGlob.frontmatter[key] !== config[key]) {
-        match = false;
-      }
-    });
-
-    if (match) {
-      return true;
-    }    
-  })[0];
+  });
 }
diff --git a/src/pages/components/[component].astro b/src/pages/components/[component].astro
@@ -1,5 +1,5 @@
 ---
-import { componentInfoEntries, getComponentEntry, getComponentGlob } from '../../content';
+import { componentInfoEntries, getComponentEntries } from '../../content';
 import MainLayout from "../../layouts/MainLayout.astro";
 import ComponentLayout from "../../layouts/partials/ComponentPartial.astro";
 import { UIPortalInpageNav } from "../../components/ui-portal-inpage-nav.js";
@@ -16,40 +16,53 @@ export async function getStaticPaths() {
 const { entry } = Astro.props;
 let config: any = {
   component: entry.data.component,
-  // TODO remove this and update getComponentGlob so that it returns all found entities.
-  // Then we'll be able to extract headings for each of md file for the particular component
   type: 'component-development' 
 };
 
-// TODO here we need to concatenate multiple files under the component folder, excluding info.md
-// At this moment there is only one file with such config in the "button" folder. That is why it works now
-// TODO update getComponentEntry to getComponentEntries (plural). So that it gives all md files which we can render
-// and then concatenate
-const componentEntry = getComponentEntry(config);
-const componentGlobs = await Astro.glob('/src/content/docs/components/**/*.md');
-const componentGlob = getComponentGlob(componentGlobs, config);
-const headers = componentGlob.getHeadings().filter(header => header.depth === 2);
-const { Content } = await componentEntry.render();
-const inPageNavData = headers.map(header => ({
-  name: header.text,
-  url: `/${componentEntry.slug}#${header.slug}`
-}));
-
-// docs/components/button/overview
-const componentEntrySlug =  componentEntry.slug;
-const componentEntrySlugArr = componentEntry.slug.split('/');
-// docs/components/button
-componentEntrySlugArr.pop();
-const componentDirectory = componentEntrySlugArr.join('/');
+const componentEntries = getComponentEntries(config);
+const inPageNavData = [];
+const contents = [];
 
+const convertHeadingsToInPageNavData = (headings, componentEntry) => {
+  return headings.map(header => ({
+      name: header.text,
+      url: `/${componentEntry.slug}#${header.slug}`
+    }));
+};
+
+const parseEntries = async () => {
+  for (const componentEntry of componentEntries) {
+    const { Content, headings } = await componentEntry.render();
+    contents.push({Content});
+    const headersH1 = headings.filter(header => header.depth === 1);
+    const entryInPageNavData = convertHeadingsToInPageNavData(headersH1, componentEntry)[0];
+    const headersH2 = headings.filter(header => header.depth === 2);
+    entryInPageNavData.children = convertHeadingsToInPageNavData(headersH2, componentEntry);
+    inPageNavData.push(entryInPageNavData);
+  }
+};
+
+await parseEntries();
 
+const getPathForComponentMdjsStrories = () => {
+  // components/component_name/overview
+  const componentEntrySlugArr = componentEntries[0].slug.split('/');
+  // components/component_name
+  componentEntrySlugArr.pop();
+  const componentDirectory = componentEntrySlugArr.join('/');
+  return `/public/mdjs-stories/docs/${componentDirectory}/__mdjs-stories.js`;
+} 
 ---
 
 <MainLayout title={entry.slug}>
   <ComponentLayout frontmatter={entry.data}>
     <UIPortalInpageNav nav-data={JSON.stringify(inPageNavData)} />
-    <Content/>
-    <script type="module" src={`/public/mdjs-stories/docs/${componentDirectory}/__mdjs-stories.js`} mdjs-setup></script>
+    {
+      contents.map((content) => (        
+          <content.Content />        
+      ))
+    }
+    <script type="module" src={getPathForComponentMdjsStrories()} mdjs-setup></script>
   </ComponentLayout>
 </MainLayout>