From d6fe73fb856a36630b8bd430b9133da53c6be4f6 Mon Sep 17 00:00:00 2001
From: okadurin <ovkadurin@gmail.com>
Date: Thu, 23 Nov 2023 16:02:45 +0100
Subject: [PATCH 01/19] udpate

---
 src/pages/[top]/[...slug].astro               | 85 ++++++++++++++++++-
 src/pages/components/[component].astro        | 22 +++--
 .../copyMdjsStories/copyMdjsStories.js        |  7 +-
 3 files changed, 96 insertions(+), 18 deletions(-)

diff --git a/src/pages/[top]/[...slug].astro b/src/pages/[top]/[...slug].astro
index 92fdc96013..d2e802ee4e 100644
--- a/src/pages/[top]/[...slug].astro
+++ b/src/pages/[top]/[...slug].astro
@@ -1,9 +1,14 @@
 ---
 import MainLayout from '../../layouts/MainLayout.astro';
 import * as path from 'path';
-import { fundamentalsEntries } from '../../content';
+import { fundamentalsEntries, componentPageEntries } from '../../content';
 import { blogEntries } from '../../content';
 import { guideEntries } from '../../content';
+import * as fs from 'fs';
+
+const maxDepthForNonComponentsNavigation = 3;
+let entries = [];
+let pages = [];
 
 
 export async function getStaticPaths() {
@@ -36,13 +41,81 @@ export async function getStaticPaths() {
 
 const { entry } = Astro.props;
 const { Content } = await entry.render();
-
 const blogData = Astro.props.entry.data;
 
+const inPageNavData = [];
+
+const convertHeadingsToInPageNavData = (headings, componentSlug) => {
+  return headings.map(header => ({
+      name: header.text,
+      url: `/${path.dirname(componentSlug)}#${header.slug}`
+    }));
+};
+
+const getEntryMetaInfo = async (entry) => {
+  const result = {};
+  const { Content, headings, remarkPluginFrontmatter } = await entry.render();
+  const order = remarkPluginFrontmatter.order;
+  const slug = entry.slug;
+  const headersH2 = headings.filter(header => header.depth === 2);
+  const entryInPageNavData = convertHeadingsToInPageNavData(headersH2, slug)[0];
+  const headersH3 = headings.filter(header => header.depth === 3);
+  console.log('entryInPageNavData: ', entryInPageNavData);
+  entryInPageNavData.children = convertHeadingsToInPageNavData(headersH3, slug);
+  return {Content, entryInPageNavData}  
+};
+
+const parseEntries = async (entries) => {
+  const contents = [];
+  for (const componentEntry of entries) {
+    const { Content, headings, remarkPluginFrontmatter } = await componentEntry.render();
+    const order = remarkPluginFrontmatter.order;
+    const slug = componentEntry.slug;
+    contents.push({Content, headings, order, slug});    
+  }
+  return contents;
+};
+
+const updateHeadings = (contentItems) => {
+  for (const contentItem of contentItems) {
+    const headersH2 = contentItem.headings.filter(header => header.depth === 2);
+    const entryInPageNavData = convertHeadingsToInPageNavData(headersH2, contentItem.slug)[0];
+    const headersH3 = contentItem.headings.filter(header => header.depth === 3);
+    console.log('entryInPageNavData: ', entryInPageNavData);
+    entryInPageNavData.children = convertHeadingsToInPageNavData(headersH3, contentItem.slug);
+    inPageNavData.push(entryInPageNavData);
+  }
+};
+
+async function concatenateEntries(entries) {
+  const contents = await parseEntries(entries);
+  contents.sort((a, b) => a.order < b.order ? -1 : 1);
+  updateHeadings(contents);
+  return contents;
+}
+
+const getChildEntries = (entry) => {
+  const dirname = path.dirname(entry.slug);  
+  return componentPageEntries.filter(childEntry => childEntry.slug.startsWith(dirname));
+};
+
+
+let entryMetaInfo;
+if (entry.slug.split('/').length === maxDepthForNonComponentsNavigation) {
+  entries = getChildEntries(entry);
+  if (entries.length === 0) {
+    entryMetaInfo = await getEntryMetaInfo(entry);
+  }
+  pages = await concatenateEntries(entries);
+}
+
 const getPathMdjsStroriesFile = (entry) => {
   const mdjsStroriesFileDirectory = path.dirname(entry.slug);
   return `/docs/${mdjsStroriesFileDirectory}/__mdjs-stories.js`;
-} 
+}
+
+const filename = 'public/test.txt';
+//fs.writeFileSync(filename, 'test1', 'utf8');
 ---
 
 <MainLayout title={entry.slug}>
@@ -51,7 +124,11 @@ const getPathMdjsStroriesFile = (entry) => {
   {blogData.date}
   {blogData.tags}
   {blogData.author}
-  <Content />
+  {
+    entries.length ? pages.map((page) => (
+        <page.Content />        
+    )) : <entryMetaInfo.Content />
+  }
   <script is:inline src="/docs/_assets/scoped-custom-element-registry.min.js"></script>
   <script type="module" src={getPathMdjsStroriesFile(entry)} mdjs-setup></script>
 </MainLayout>
diff --git a/src/pages/components/[component].astro b/src/pages/components/[component].astro
index 3ea513bc25..0de97d071e 100644
--- a/src/pages/components/[component].astro
+++ b/src/pages/components/[component].astro
@@ -17,7 +17,6 @@ export async function getStaticPaths() {
 const { entry } = Astro.props;
 const componentEntries = getComponentEntries(entry.data.component);
 const inPageNavData = [];
-const contents = [];
 
 const convertHeadingsToInPageNavData = (headings, componentSlug) => {
   return headings.map(header => ({
@@ -26,13 +25,15 @@ const convertHeadingsToInPageNavData = (headings, componentSlug) => {
     }));
 };
 
-const parseEntries = async () => {
-  for (const componentEntry of componentEntries) {
+const parseEntries = async (entries) => {
+  const contents = [];
+  for (const componentEntry of entries) {
     const { Content, headings, remarkPluginFrontmatter } = await componentEntry.render();
     const order = remarkPluginFrontmatter.order;
     const slug = componentEntry.slug;
     contents.push({Content, headings, order, slug});    
   }
+  return contents;
 };
 
 const updateHeadings = (contentItems) => {
@@ -45,9 +46,14 @@ const updateHeadings = (contentItems) => {
   }
 };
 
-await parseEntries();
-contents.sort((a, b) => a.order < b.order ? -1 : 1);
-updateHeadings(contents);
+async function concatenateEntries(entries) {
+  const contents = await parseEntries(entries);
+  contents.sort((a, b) => a.order < b.order ? -1 : 1);
+  updateHeadings(contents);
+  return contents;
+}
+
+const pages = await concatenateEntries(componentEntries);
 
 
 const getPathMdjsStroriesFile = (entry) => {
@@ -60,8 +66,8 @@ const getPathMdjsStroriesFile = (entry) => {
   <ComponentLayout frontmatter={entry.data}>
     <UIPortalInpageNav nav-data={JSON.stringify(inPageNavData)} />
     {
-      contents.map((content) => (
-          <content.Content />        
+      pages.map((page) => (
+          <page.Content />        
       ))
     }
     <script is:inline src="/docs/_assets/scoped-custom-element-registry.min.js"></script>
diff --git a/src/utils/remark-plugings/copyMdjsStories/copyMdjsStories.js b/src/utils/remark-plugings/copyMdjsStories/copyMdjsStories.js
index 99a0082788..0cb373d242 100644
--- a/src/utils/remark-plugings/copyMdjsStories/copyMdjsStories.js
+++ b/src/utils/remark-plugings/copyMdjsStories/copyMdjsStories.js
@@ -85,12 +85,7 @@ function copyMdjsStories() {
           // noop. File is not yet created for the component
         }
 
-        let exportCmd;
-        if (isDistBuild) {
-          exportCmd = `import('./${currentMarkdownFileMdJsStoryName}');\n`;
-        } else {
-          exportCmd = `export * from './${currentMarkdownFileMdJsStoryName}';\n`;
-        }
+        const exportCmd = `import('./${currentMarkdownFileMdJsStoryName}');\n`;
         if (commonMdjsStoriesContent.indexOf(exportCmd) === -1) {
           fs.writeFileSync(commonMdjsStoriesFileName, commonMdjsStoriesContent + exportCmd, 'utf8');
         }

From 39ef0d4bec7cb2d4f5fb8d0b429280fd0f98eb69 Mon Sep 17 00:00:00 2001
From: okadurin <ovkadurin@gmail.com>
Date: Fri, 24 Nov 2023 13:10:51 +0100
Subject: [PATCH 02/19] chore: update slug.astro

---
 config.js                       |  1 +
 src/pages/[top]/[...slug].astro | 84 ++++++++++++++++-----------------
 2 files changed, 41 insertions(+), 44 deletions(-)
 create mode 100644 config.js

diff --git a/config.js b/config.js
new file mode 100644
index 0000000000..2a3c2c0466
--- /dev/null
+++ b/config.js
@@ -0,0 +1 @@
+export const maxDepthForNonComponentsNavigation = 2;
diff --git a/src/pages/[top]/[...slug].astro b/src/pages/[top]/[...slug].astro
index d2e802ee4e..bacabc7ca9 100644
--- a/src/pages/[top]/[...slug].astro
+++ b/src/pages/[top]/[...slug].astro
@@ -1,14 +1,15 @@
 ---
 import MainLayout from '../../layouts/MainLayout.astro';
+import { UIPortalInpageNav } from "../../components/ui-portal-inpage-nav.js";
 import * as path from 'path';
-import { fundamentalsEntries, componentPageEntries } from '../../content';
+import { fundamentalsEntries, allPages } from '../../content';
 import { blogEntries } from '../../content';
 import { guideEntries } from '../../content';
+import { maxDepthForNonComponentsNavigation } from '../../../config.js';
 import * as fs from 'fs';
 
-const maxDepthForNonComponentsNavigation = 3;
-let entries = [];
 let pages = [];
+const inPageNavData = [];
 
 
 export async function getStaticPaths() {
@@ -36,14 +37,37 @@ export async function getStaticPaths() {
     props: { entry },
   }));
 
-  return [...fundamentalsArr, ...blogArr, ...guideArr];
+  const dirArr = allPages
+    .filter(entry => {
+      const separator = '/';
+      const dirPath = path.dirname(entry.slug);
+      const dirParts = dirPath.split(separator);
+
+      return dirParts.length === maxDepthForNonComponentsNavigation && dirParts[0] !== 'components';      
+    })
+    .map(entry => {
+      const separator = '/';
+      const dirPath = path.dirname(entry.slug);
+      const dirParts = dirPath.split(separator);
+      const result = {
+        params: { 
+          top: dirParts.shift(),
+          slug: dirParts.join(separator) 
+        },
+        props: { dirPath },
+      };
+      return result;
+    });
+
+  return [...fundamentalsArr, ...blogArr, ...guideArr, ...dirArr];
 }
 
-const { entry } = Astro.props;
-const { Content } = await entry.render();
-const blogData = Astro.props.entry.data;
+const { entry, dirPath } = Astro.props;
 
-const inPageNavData = [];
+const renderDir = async (directoryPath) => {
+  const entries = getEntriesByDir(directoryPath);
+  return await concatenateEntries(entries);
+};
 
 const convertHeadingsToInPageNavData = (headings, componentSlug) => {
   return headings.map(header => ({
@@ -52,19 +76,6 @@ const convertHeadingsToInPageNavData = (headings, componentSlug) => {
     }));
 };
 
-const getEntryMetaInfo = async (entry) => {
-  const result = {};
-  const { Content, headings, remarkPluginFrontmatter } = await entry.render();
-  const order = remarkPluginFrontmatter.order;
-  const slug = entry.slug;
-  const headersH2 = headings.filter(header => header.depth === 2);
-  const entryInPageNavData = convertHeadingsToInPageNavData(headersH2, slug)[0];
-  const headersH3 = headings.filter(header => header.depth === 3);
-  console.log('entryInPageNavData: ', entryInPageNavData);
-  entryInPageNavData.children = convertHeadingsToInPageNavData(headersH3, slug);
-  return {Content, entryInPageNavData}  
-};
-
 const parseEntries = async (entries) => {
   const contents = [];
   for (const componentEntry of entries) {
@@ -81,7 +92,6 @@ const updateHeadings = (contentItems) => {
     const headersH2 = contentItem.headings.filter(header => header.depth === 2);
     const entryInPageNavData = convertHeadingsToInPageNavData(headersH2, contentItem.slug)[0];
     const headersH3 = contentItem.headings.filter(header => header.depth === 3);
-    console.log('entryInPageNavData: ', entryInPageNavData);
     entryInPageNavData.children = convertHeadingsToInPageNavData(headersH3, contentItem.slug);
     inPageNavData.push(entryInPageNavData);
   }
@@ -94,41 +104,27 @@ async function concatenateEntries(entries) {
   return contents;
 }
 
-const getChildEntries = (entry) => {
-  const dirname = path.dirname(entry.slug);  
-  return componentPageEntries.filter(childEntry => childEntry.slug.startsWith(dirname));
+const getEntriesByDir = (dirname) => {
+  return allPages.filter(childEntry => childEntry.slug.startsWith(dirname));
 };
 
+pages = entry ? await concatenateEntries([entry]) : await renderDir(dirPath);
 
-let entryMetaInfo;
-if (entry.slug.split('/').length === maxDepthForNonComponentsNavigation) {
-  entries = getChildEntries(entry);
-  if (entries.length === 0) {
-    entryMetaInfo = await getEntryMetaInfo(entry);
-  }
-  pages = await concatenateEntries(entries);
-}
 
 const getPathMdjsStroriesFile = (entry) => {
   const mdjsStroriesFileDirectory = path.dirname(entry.slug);
   return `/docs/${mdjsStroriesFileDirectory}/__mdjs-stories.js`;
 }
 
-const filename = 'public/test.txt';
-//fs.writeFileSync(filename, 'test1', 'utf8');
 ---
 
-<MainLayout title={entry.slug}>
-  {blogData.title}
-  {blogData.description}
-  {blogData.date}
-  {blogData.tags}
-  {blogData.author}
+<MainLayout title={entry?.slug}>
+  <UIPortalInpageNav nav-data={JSON.stringify(inPageNavData)} />
   {
-    entries.length ? pages.map((page) => (
+    pages.map((page) => (
         <page.Content />        
-    )) : <entryMetaInfo.Content />
+    ))
   }
   <script is:inline src="/docs/_assets/scoped-custom-element-registry.min.js"></script>
-  <script type="module" src={getPathMdjsStroriesFile(entry)} mdjs-setup></script>
+  <!-- <script type="module" src={getPathMdjsStroriesFile(entry)} mdjs-setup></script> -->
 </MainLayout>

From 65e54576b02c83f3d7a256d45aefd3f81f7424d8 Mon Sep 17 00:00:00 2001
From: okadurin <ovkadurin@gmail.com>
Date: Fri, 24 Nov 2023 13:48:50 +0100
Subject: [PATCH 03/19] chore: update slug.astro

---
 src/pages/[top]/[...slug].astro | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/pages/[top]/[...slug].astro b/src/pages/[top]/[...slug].astro
index bacabc7ca9..866125168f 100644
--- a/src/pages/[top]/[...slug].astro
+++ b/src/pages/[top]/[...slug].astro
@@ -6,7 +6,6 @@ import { fundamentalsEntries, allPages } from '../../content';
 import { blogEntries } from '../../content';
 import { guideEntries } from '../../content';
 import { maxDepthForNonComponentsNavigation } from '../../../config.js';
-import * as fs from 'fs';
 
 let pages = [];
 const inPageNavData = [];
@@ -43,22 +42,29 @@ export async function getStaticPaths() {
       const dirPath = path.dirname(entry.slug);
       const dirParts = dirPath.split(separator);
 
-      return dirParts.length === maxDepthForNonComponentsNavigation && dirParts[0] !== 'components';      
+      return dirParts.length >= maxDepthForNonComponentsNavigation && dirParts[0] !== 'components';      
     })
     .map(entry => {
       const separator = '/';
       const dirPath = path.dirname(entry.slug);
       const dirParts = dirPath.split(separator);
+      dirParts.splice(maxDepthForNonComponentsNavigation);
       const result = {
         params: { 
           top: dirParts.shift(),
           slug: dirParts.join(separator) 
         },
-        props: { dirPath },
       };
       return result;
     });
 
+    const uniqueDirArr = [];
+    dirArr.forEach(route => {
+      if (!uniqueDirArr.find(uniqueRoute => uniqueRoute.params.top === route.params.top && uniqueRoute.params.slug === route.params.slug)) {
+        uniqueDirArr.push(route);
+      }
+    });
+
   return [...fundamentalsArr, ...blogArr, ...guideArr, ...dirArr];
 }
 

From 83201cd3055a67df5ae3e11741fa3fe318d1efe4 Mon Sep 17 00:00:00 2001
From: okadurin <ovkadurin@gmail.com>
Date: Fri, 24 Nov 2023 15:46:53 +0100
Subject: [PATCH 04/19] chore: update slug.astro

---
 src/pages/[top]/[...slug].astro               | 27 ++++++++++++++++---
 .../copyMdjsStories/copyMdjsStories.js        |  2 +-
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/pages/[top]/[...slug].astro b/src/pages/[top]/[...slug].astro
index 866125168f..6a83ac2eab 100644
--- a/src/pages/[top]/[...slug].astro
+++ b/src/pages/[top]/[...slug].astro
@@ -1,4 +1,6 @@
 ---
+import { glob } from 'glob'
+import * as process from 'process';
 import MainLayout from '../../layouts/MainLayout.astro';
 import { UIPortalInpageNav } from "../../components/ui-portal-inpage-nav.js";
 import * as path from 'path';
@@ -68,7 +70,7 @@ export async function getStaticPaths() {
   return [...fundamentalsArr, ...blogArr, ...guideArr, ...dirArr];
 }
 
-const { entry, dirPath } = Astro.props;
+const { entry } = Astro.props;
 
 const renderDir = async (directoryPath) => {
   const entries = getEntriesByDir(directoryPath);
@@ -88,7 +90,8 @@ const parseEntries = async (entries) => {
     const { Content, headings, remarkPluginFrontmatter } = await componentEntry.render();
     const order = remarkPluginFrontmatter.order;
     const slug = componentEntry.slug;
-    contents.push({Content, headings, order, slug});    
+    const content = {Content, headings, order, slug};
+    contents.push(content);
   }
   return contents;
 };
@@ -105,7 +108,7 @@ const updateHeadings = (contentItems) => {
 
 async function concatenateEntries(entries) {
   const contents = await parseEntries(entries);
-  contents.sort((a, b) => a.order < b.order ? -1 : 1);
+  //contents.sort((a, b) => a.order < b.order ? -1 : 1);
   updateHeadings(contents);
   return contents;
 }
@@ -114,8 +117,24 @@ const getEntriesByDir = (dirname) => {
   return allPages.filter(childEntry => childEntry.slug.startsWith(dirname));
 };
 
-pages = entry ? await concatenateEntries([entry]) : await renderDir(dirPath);
+const getMdjsStories = (dirPath) => {
+  return new Promise((resolve, reject) => {
+    console.log('process.cwd(): ', process.cwd());
+    const fullDirPath = path.join(process.cwd(), 'public/docs', dirPath);
+    glob(fullDirPath + '/**/__mdjs-stories--*.js', {}, (err, files)=>{
+      resolve(files);
+    })
+  });  
+};
 
+if (entry) {
+  pages = await concatenateEntries([entry]);
+} else {
+  const dirPath = path.join(Astro.params.top, Astro.params.slug);
+  pages = await renderDir(dirPath);
+  const files = await getMdjsStories(dirPath);
+  console.log('files: ', files);
+}
 
 const getPathMdjsStroriesFile = (entry) => {
   const mdjsStroriesFileDirectory = path.dirname(entry.slug);
diff --git a/src/utils/remark-plugings/copyMdjsStories/copyMdjsStories.js b/src/utils/remark-plugings/copyMdjsStories/copyMdjsStories.js
index 0cb373d242..3909565c26 100644
--- a/src/utils/remark-plugings/copyMdjsStories/copyMdjsStories.js
+++ b/src/utils/remark-plugings/copyMdjsStories/copyMdjsStories.js
@@ -110,7 +110,7 @@ function copyMdjsStories() {
     }
 
     let parsedSetupJsCode;
-    // This is move out off @mdjs/core/src/mdjsSetupCode.js
+    // This is copied from @mdjs/core/src/mdjsSetupCode.js
     const initialImprorts = `
 import '@mdjs/mdjs-preview/define';
 import '@mdjs/mdjs-story/define'; \n`;

From c8132430fa8a22f02022a5be6b0d2a272f3dc997 Mon Sep 17 00:00:00 2001
From: okadurin <ovkadurin@gmail.com>
Date: Mon, 27 Nov 2023 14:15:53 +0100
Subject: [PATCH 05/19] chore: update

---
 src/pages/[top]/[...slug].astro               | 35 +++++++++++++------
 .../copyMdjsStories/copyMdjsStories.js        |  6 +++-
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/pages/[top]/[...slug].astro b/src/pages/[top]/[...slug].astro
index 6a83ac2eab..cb4c0e2500 100644
--- a/src/pages/[top]/[...slug].astro
+++ b/src/pages/[top]/[...slug].astro
@@ -1,5 +1,6 @@
 ---
 import { glob } from 'glob'
+import * as fs from 'fs';
 import * as process from 'process';
 import MainLayout from '../../layouts/MainLayout.astro';
 import { UIPortalInpageNav } from "../../components/ui-portal-inpage-nav.js";
@@ -11,6 +12,7 @@ import { maxDepthForNonComponentsNavigation } from '../../../config.js';
 
 let pages = [];
 const inPageNavData = [];
+let mdjsStoriesJsPath = ''
 
 
 export async function getStaticPaths() {
@@ -117,12 +119,13 @@ const getEntriesByDir = (dirname) => {
   return allPages.filter(childEntry => childEntry.slug.startsWith(dirname));
 };
 
-const getMdjsStories = (dirPath) => {
-  return new Promise((resolve, reject) => {
-    console.log('process.cwd(): ', process.cwd());
-    const fullDirPath = path.join(process.cwd(), 'public/docs', dirPath);
+const getMdjsStories = (fullDirPath) => {
+  return new Promise((resolve, reject) => {    
     glob(fullDirPath + '/**/__mdjs-stories--*.js', {}, (err, files)=>{
-      resolve(files);
+      const relativePaths = files.map(file => {
+        return path.relative(fullDirPath, file);
+      });
+      resolve(relativePaths);
     })
   });  
 };
@@ -132,13 +135,23 @@ if (entry) {
 } else {
   const dirPath = path.join(Astro.params.top, Astro.params.slug);
   pages = await renderDir(dirPath);
-  const files = await getMdjsStories(dirPath);
-  console.log('files: ', files);
+  const fullDirPath = path.join(process.cwd(), 'public/docs', dirPath);
+  const files = await getMdjsStories(fullDirPath);
+  let imports = '';
+  files.forEach(file => {
+    imports += `import('./${file}');\n`
+  });
+  mdjsStoriesJsPath = path.join(fullDirPath, '__mdjs-stories.js');
+  fs.writeFileSync(mdjsStoriesJsPath, imports, 'utf8');
+  console.log('imports: ', imports);
 }
 
-const getPathMdjsStroriesFile = (entry) => {
-  const mdjsStroriesFileDirectory = path.dirname(entry.slug);
-  return `/docs/${mdjsStroriesFileDirectory}/__mdjs-stories.js`;
+const getPathMdjsStroriesFile = () => {
+  if (entry) {
+    const mdjsStroriesFileDirectory = path.dirname(entry.slug);
+    return `/docs/${mdjsStroriesFileDirectory}/__mdjs-stories.js`;
+  } 
+  return '/docs' + mdjsStoriesJsPath.split('/docs')[1];
 }
 
 ---
@@ -151,5 +164,5 @@ const getPathMdjsStroriesFile = (entry) => {
     ))
   }
   <script is:inline src="/docs/_assets/scoped-custom-element-registry.min.js"></script>
-  <!-- <script type="module" src={getPathMdjsStroriesFile(entry)} mdjs-setup></script> -->
+  <script type="module" src={getPathMdjsStroriesFile()} mdjs-setup></script>
 </MainLayout>
diff --git a/src/utils/remark-plugings/copyMdjsStories/copyMdjsStories.js b/src/utils/remark-plugings/copyMdjsStories/copyMdjsStories.js
index 3909565c26..50ea208d9f 100644
--- a/src/utils/remark-plugings/copyMdjsStories/copyMdjsStories.js
+++ b/src/utils/remark-plugings/copyMdjsStories/copyMdjsStories.js
@@ -76,7 +76,11 @@ function copyMdjsStories() {
      * @param {UnistNode} _node
      */
     async function nodeCodeVisitor(_node, index, parent) {
-      if (parent.type === 'heading' && parent.depth === 1) {
+      if (
+        parent.type === 'heading' &&
+        parent.depth === 1 &&
+        currentMarkdownFile.includes('/components')
+      ) {
         const commonMdjsStoriesFileName = `${pathToMdDirectoryInPublic}/${mdJsStoriesFileName}`;
         let commonMdjsStoriesContent = '';
         try {

From 2a3142dc24665897f2437bd437c54a48270b66dd Mon Sep 17 00:00:00 2001
From: okadurin <ovkadurin@gmail.com>
Date: Thu, 30 Nov 2023 12:44:48 +0100
Subject: [PATCH 06/19] chore: update slug.astro

---
 src/pages/[top]/[...slug].astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/[top]/[...slug].astro b/src/pages/[top]/[...slug].astro
index cb4c0e2500..e602e110fb 100644
--- a/src/pages/[top]/[...slug].astro
+++ b/src/pages/[top]/[...slug].astro
@@ -149,7 +149,7 @@ if (entry) {
 const getPathMdjsStroriesFile = () => {
   if (entry) {
     const mdjsStroriesFileDirectory = path.dirname(entry.slug);
-    return `/docs/${mdjsStroriesFileDirectory}/__mdjs-stories.js`;
+    return `/docs/${mdjsStroriesFileDirectory}/__mdjs-stories--${path.basename(entry.slug)}.js`;
   } 
   return '/docs' + mdjsStoriesJsPath.split('/docs')[1];
 }

From 3fb86f8c67f3add084173ea0e4ba99fa9de957e0 Mon Sep 17 00:00:00 2001
From: okadurin <ovkadurin@gmail.com>
Date: Thu, 30 Nov 2023 14:32:39 +0100
Subject: [PATCH 07/19] chore: update config.js

---
 config.js                                                 | 1 -
 config.mjs                                                | 7 +++++++
 src/pages/[top]/[...slug].astro                           | 2 +-
 .../cleanupRocketMetadata/cleanupRocketMetadata.js        | 8 ++++++--
 4 files changed, 14 insertions(+), 4 deletions(-)
 delete mode 100644 config.js
 create mode 100644 config.mjs

diff --git a/config.js b/config.js
deleted file mode 100644
index 2a3c2c0466..0000000000
--- a/config.js
+++ /dev/null
@@ -1 +0,0 @@
-export const maxDepthForNonComponentsNavigation = 2;
diff --git a/config.mjs b/config.mjs
new file mode 100644
index 0000000000..d852a51e82
--- /dev/null
+++ b/config.mjs
@@ -0,0 +1,7 @@
+export const maxDepthForNonComponentsNavigation = 2;
+const docsDirName = 'docs/';
+export const isToBeConcatenated = (path) => {
+    const pathAfterDocs = path.split(docsDirName)[1];
+    const numberOfSections = pathAfterDocs.split('/').length;
+    return numberOfSections > maxDepthForNonComponentsNavigation;
+}
diff --git a/src/pages/[top]/[...slug].astro b/src/pages/[top]/[...slug].astro
index e602e110fb..3d845c20e0 100644
--- a/src/pages/[top]/[...slug].astro
+++ b/src/pages/[top]/[...slug].astro
@@ -8,7 +8,7 @@ import * as path from 'path';
 import { fundamentalsEntries, allPages } from '../../content';
 import { blogEntries } from '../../content';
 import { guideEntries } from '../../content';
-import { maxDepthForNonComponentsNavigation } from '../../../config.js';
+import { maxDepthForNonComponentsNavigation } from '../../../config.mjs';
 
 let pages = [];
 const inPageNavData = [];
diff --git a/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js b/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
index 3e25dfc66c..191582442c 100644
--- a/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
+++ b/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
@@ -1,23 +1,27 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 const { init } = require('es-module-lexer');
 
+let isToBeConcatenated;
 let visit;
 (async () => {
   // eslint-disable-next-line import/no-extraneous-dependencies
   const result = await import('unist-util-visit');
   visit = result.visit;
+
+  const config = await import('../../../../config.mjs');
+  isToBeConcatenated = config.isToBeConcatenated;
 })();
 
 function cleanupRocketMetadata() {
   /**
    * @param {Node} tree
    */
-  async function transformer(tree) {
+  async function transformer(tree, file) {
     /**
      * @param {UnistNode} _node
      */
     async function nodeCodeVisitor(_node, index, parent) {
-      if (parent.type === 'heading') {
+      if (parent.type === 'heading' && isToBeConcatenated(file.history[0])) {
         if (parent.depth === 1) {
           const splitByOrder = _node.value.split('||');
           if (splitByOrder.length === 1) {

From a9654c234312471e4f3cb320c672285a4bbb29cc Mon Sep 17 00:00:00 2001
From: okadurin <ovkadurin@gmail.com>
Date: Wed, 6 Dec 2023 19:07:46 +0100
Subject: [PATCH 08/19] chore: update slug.astro

---
 config.mjs                                    |  3 +
 src/pages/[top]/[...slug].astro               | 21 +++--
 src/pages/components/[component].astro        |  7 +-
 src/utils/copy-docs/copy-docs.js              | 82 +++++++++++++++----
 .../cleanupRocketMetadata.js                  | 44 +++++++---
 5 files changed, 123 insertions(+), 34 deletions(-)

diff --git a/config.mjs b/config.mjs
index d852a51e82..0a8965d014 100644
--- a/config.mjs
+++ b/config.mjs
@@ -1,6 +1,9 @@
 export const maxDepthForNonComponentsNavigation = 2;
 const docsDirName = 'docs/';
 export const isToBeConcatenated = (path) => {
+    if (path.includes('/components/')) {
+        return true;
+    }
     const pathAfterDocs = path.split(docsDirName)[1];
     const numberOfSections = pathAfterDocs.split('/').length;
     return numberOfSections > maxDepthForNonComponentsNavigation;
diff --git a/src/pages/[top]/[...slug].astro b/src/pages/[top]/[...slug].astro
index 3d845c20e0..65f9009644 100644
--- a/src/pages/[top]/[...slug].astro
+++ b/src/pages/[top]/[...slug].astro
@@ -101,9 +101,14 @@ const parseEntries = async (entries) => {
 const updateHeadings = (contentItems) => {
   for (const contentItem of contentItems) {
     const headersH2 = contentItem.headings.filter(header => header.depth === 2);
+    if (headersH2.length === 0) {
+      continue;
+    }
     const entryInPageNavData = convertHeadingsToInPageNavData(headersH2, contentItem.slug)[0];
     const headersH3 = contentItem.headings.filter(header => header.depth === 3);
-    entryInPageNavData.children = convertHeadingsToInPageNavData(headersH3, contentItem.slug);
+    if (headersH3.length !== 0) {
+      entryInPageNavData.children = convertHeadingsToInPageNavData(headersH3, contentItem.slug);
+    }
     inPageNavData.push(entryInPageNavData);
   }
 };
@@ -141,9 +146,10 @@ if (entry) {
   files.forEach(file => {
     imports += `import('./${file}');\n`
   });
-  mdjsStoriesJsPath = path.join(fullDirPath, '__mdjs-stories.js');
-  fs.writeFileSync(mdjsStoriesJsPath, imports, 'utf8');
-  console.log('imports: ', imports);
+  if (imports) {
+    mdjsStoriesJsPath = path.join(fullDirPath, '__mdjs-stories.js');
+    fs.writeFileSync(mdjsStoriesJsPath, imports, 'utf8');
+  }    
 }
 
 const getPathMdjsStroriesFile = () => {
@@ -151,7 +157,10 @@ const getPathMdjsStroriesFile = () => {
     const mdjsStroriesFileDirectory = path.dirname(entry.slug);
     return `/docs/${mdjsStroriesFileDirectory}/__mdjs-stories--${path.basename(entry.slug)}.js`;
   } 
-  return '/docs' + mdjsStoriesJsPath.split('/docs')[1];
+  if (mdjsStoriesJsPath) {
+    return '/docs' + mdjsStoriesJsPath.split('/docs')[1];
+  }
+  return null;
 }
 
 ---
@@ -164,5 +173,5 @@ const getPathMdjsStroriesFile = () => {
     ))
   }
   <script is:inline src="/docs/_assets/scoped-custom-element-registry.min.js"></script>
-  <script type="module" src={getPathMdjsStroriesFile()} mdjs-setup></script>
+  {getPathMdjsStroriesFile() && <script type="module" src={getPathMdjsStroriesFile()} mdjs-setup></script>}
 </MainLayout>
diff --git a/src/pages/components/[component].astro b/src/pages/components/[component].astro
index 0de97d071e..c3d9a0b870 100644
--- a/src/pages/components/[component].astro
+++ b/src/pages/components/[component].astro
@@ -39,9 +39,14 @@ const parseEntries = async (entries) => {
 const updateHeadings = (contentItems) => {
   for (const contentItem of contentItems) {
     const headersH2 = contentItem.headings.filter(header => header.depth === 2);
+    if (headersH2.length === 0) {
+      continue;
+    }
     const entryInPageNavData = convertHeadingsToInPageNavData(headersH2, contentItem.slug)[0];
     const headersH3 = contentItem.headings.filter(header => header.depth === 3);
-    entryInPageNavData.children = convertHeadingsToInPageNavData(headersH3, contentItem.slug);
+    if (headersH3.length !== 0) {
+      entryInPageNavData.children = convertHeadingsToInPageNavData(headersH3, contentItem.slug);
+    }    
     inPageNavData.push(entryInPageNavData);
   }
 };
diff --git a/src/utils/copy-docs/copy-docs.js b/src/utils/copy-docs/copy-docs.js
index 9a07ae0f8b..694fb62d85 100644
--- a/src/utils/copy-docs/copy-docs.js
+++ b/src/utils/copy-docs/copy-docs.js
@@ -65,13 +65,6 @@ async function processImportsForFile(filePath) {
   await fs.writeFile(filePath, newSource);
 }
 
-const createComponentMdFrontmatter = (componentName, order) => {
-  const componentFrontmatter = `---
-component: ${componentName}`;
-  const orderFrontmatter = order ? `\norder: ${order}` : '';
-  return `${componentFrontmatter + orderFrontmatter}\n---\n\n`;
-};
-
 async function createInfoMd(componentDirectoryPath) {
   const componentName = path.basename(componentDirectoryPath);
   const infoMd = `---
@@ -84,6 +77,55 @@ description: ${componentName} description
   await fs.writeFile(infoMdFilePath, infoMd);
 }
 
+function getFrontmatter(text) {
+  const result = {};
+  if (!text.startsWith('---')) {
+    return result;
+  }
+  const frontmatterRegex = /---\n(.+?)\n---/gs;
+  const match = text.matchAll(frontmatterRegex);
+  const matchResult = [...match]?.[0]?.[1] || '';
+  if (matchResult) {
+    matchResult.split('\n').forEach(pair => {
+      const pairArr = pair.split(':');
+      const key = pairArr[0].trim();
+      const value = pairArr[1].trim();
+      result[key] = value;
+    });
+  }
+  return result;
+}
+
+function getContent(text) {
+  if (Object.keys(getFrontmatter(text)).length === 0) {
+    return text;
+  }
+  const frontmatterRegex = /---\n(.+?)\n---\n(.*)/gs;
+  const match = text.matchAll(frontmatterRegex);
+  return [...match]?.[0]?.[2] || text;
+}
+
+function frontmatterToString(frontmatter) {
+  const prefix = '---\n';
+  let result = prefix;
+  Object.keys(frontmatter).forEach(key => {
+    result += `${key}: ${frontmatter[key]}\n`;
+  });
+  if (result === prefix) {
+    return '';
+  }
+  return `${result}---\n\n`;
+}
+
+function addFrontmatter(fileContent, key, value) {
+  const frontmatter = getFrontmatter(fileContent);
+  const content = getContent(fileContent);
+  if (value) {
+    frontmatter[key] = value;
+  }
+  return frontmatterToString(frontmatter) + content;
+}
+
 function getOrder(fileContent) {
   const orderRegexp = /#.+\|\|(\d+)/gm;
   const match = fileContent.matchAll(orderRegexp);
@@ -95,7 +137,10 @@ async function copyDocs(currentPath = '') {
 
   for (const file of files) {
     const sourceDocsFilePath = path.join(sourceDocsPath, currentPath, file);
-    const contentDocsFilePath = path.join(contentDocsPath, currentPath, file);
+    const contentDocsFilePath =
+      file === 'index.md'
+        ? path.join(contentDocsPath, currentPath, 'index-copy.md')
+        : path.join(contentDocsPath, currentPath, file);
     const publicDocsFilePath = path.join(publicDocsPath, currentPath, file);
     const stats = await fs.lstat(sourceDocsFilePath);
 
@@ -106,20 +151,20 @@ async function copyDocs(currentPath = '') {
       await copyDocs(path.join(currentPath, file));
     } else {
       if (
-        (path.extname(file) === '.md' && file !== 'index.md') ||
+        (path.extname(file) === '.md' && sourceDocsFilePath !== `${sourceDocsPath}/index.md`) ||
         imageExtensions.includes(path.extname(file).split('.')[1])
       ) {
         await fs.mkdir(path.join(contentDocsPath, currentPath), { recursive: true });
         await fs.copyFile(sourceDocsFilePath, contentDocsFilePath);
-
-        if (contentDocsFilePath.includes('/components') && path.extname(file) === '.md') {
+        if (path.extname(file) === '.md') {
           const fileContent = await fs.readFile(contentDocsFilePath, 'utf8');
-          const parentComponent = path.basename(currentPath);
+          let updatedFileContent = fileContent;
+          if (contentDocsFilePath.includes('/components')) {
+            const parentComponent = path.basename(currentPath);
+            updatedFileContent = addFrontmatter(fileContent, 'component', parentComponent);
+          }
           const order = getOrder(fileContent);
-          const updatedFileContent = `${createComponentMdFrontmatter(
-            parentComponent,
-            order,
-          )}${fileContent}`;
+          updatedFileContent = addFrontmatter(updatedFileContent, 'order', order);
           await fs.writeFile(contentDocsFilePath, updatedFileContent);
         }
       }
@@ -143,7 +188,10 @@ async function copyDocsByFileArray(files) {
       if (file.includes('/components')) {
         const fileContent = await fs.readFile(contentDocsFilePath, 'utf8');
         const parentComponent = path.basename(currentPath);
-        const updatedFileContent = `${createComponentMdFrontmatter(parentComponent)}${fileContent}`;
+        let updatedFileContent = fileContent;
+        updatedFileContent = addFrontmatter(fileContent, 'component', parentComponent);
+        const order = getOrder(fileContent);
+        updatedFileContent = addFrontmatter(updatedFileContent, 'order', order);
         await fs.writeFile(contentDocsFilePath, updatedFileContent);
       }
     }
diff --git a/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js b/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
index 191582442c..636ace1c39 100644
--- a/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
+++ b/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
@@ -1,5 +1,6 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 const { init } = require('es-module-lexer');
+const path = require('path');
 
 let isToBeConcatenated;
 let visit;
@@ -12,29 +13,52 @@ let visit;
   isToBeConcatenated = config.isToBeConcatenated;
 })();
 
+function addOverviewTitleToIndexMd(tree, isIndexMd) {
+  let h1Index = null;
+  tree.children.forEach((item, index) => {
+    if (item.depth === 1 && item.type === 'heading' && isIndexMd) {
+      h1Index = index;
+    }
+  });
+  if (h1Index !== null) {
+    tree.children.splice(1, 0, {
+      type: 'heading',
+      depth: 2,
+      children: [
+        {
+          type: 'text',
+          value: 'Index',
+        },
+      ],
+    });
+  }
+}
+
 function cleanupRocketMetadata() {
   /**
    * @param {Node} tree
    */
   async function transformer(tree, file) {
+    const filePath = file.history[0];
+    const isIndexMd = path.basename(filePath) === 'index-copy.md';
+
     /**
      * @param {UnistNode} _node
      */
     async function nodeCodeVisitor(_node, index, parent) {
-      if (parent.type === 'heading' && isToBeConcatenated(file.history[0])) {
+      if (parent.type === 'heading' && isToBeConcatenated(filePath)) {
         if (parent.depth === 1) {
           const splitByOrder = _node.value.split('||');
-          if (splitByOrder.length === 1) {
-            return;
+          const order = splitByOrder[1]?.trim();
+          if (order) {
+            const splitByArrows = splitByOrder[0].split('>>');
+            const title = splitByArrows[splitByArrows.length - 1].trim();
+            // eslint-disable-next-line no-param-reassign
+            _node.value = title;
           }
-          const order = splitByOrder[1].trim();
-          if (!order) {
+          if (isIndexMd) {
             return;
           }
-          const splitByArrows = splitByOrder[0].split('>>');
-          const title = splitByArrows[splitByArrows.length - 1].trim();
-          // eslint-disable-next-line no-param-reassign
-          _node.value = title;
         }
         // eslint-disable-next-line no-param-reassign
         parent.depth += 1;
@@ -44,7 +68,7 @@ function cleanupRocketMetadata() {
     // unifiedjs expects node changes to be made on the given node...
     await init;
     visit(tree, 'text', nodeCodeVisitor);
-
+    addOverviewTitleToIndexMd(tree, isIndexMd);
     return tree;
   }
 

From 3a726d1126afdbf7fe24b41e91ada06c5b5c4403 Mon Sep 17 00:00:00 2001
From: okadurin <ovkadurin@gmail.com>
Date: Thu, 7 Dec 2023 14:13:43 +0100
Subject: [PATCH 09/19] chore: update

---
 src/pages/[top]/[...slug].astro | 92 ++++++++++++++++++++++++++++++++-
 1 file changed, 90 insertions(+), 2 deletions(-)

diff --git a/src/pages/[top]/[...slug].astro b/src/pages/[top]/[...slug].astro
index 65f9009644..03af2773ae 100644
--- a/src/pages/[top]/[...slug].astro
+++ b/src/pages/[top]/[...slug].astro
@@ -113,9 +113,97 @@ const updateHeadings = (contentItems) => {
   }
 };
 
+const directoriesOrder = new Map();
+function getOrder(content, contents) {
+  const dir = path.dirname(content.slug);  
+  const dirIndex = path.join(dir, 'index-copy');
+  let dirOrder;
+  if (directoriesOrder.has(dir)) {
+    dirOrder = directoriesOrder.get(dir);    
+  } else {
+    dirOrder = contents.find(item => item.slug === dirIndex).order;
+    directoriesOrder.set(dir, dirOrder); 
+  }
+  return dirOrder;
+}
+
+function getContentsWithParentDepth(contents, parentDepth) {
+  return contents.filter(content => {
+    const dirDepth = path.dirname(content.slug).split('/').length;
+    return parentDepth === dirDepth;
+  });
+}
+
+function getUniqueParentDirs(contents) {
+  const dirs = new Set();
+  contents.forEach(content => {
+    dirs.add(path.dirname(content.slug));
+  });
+  return [...dirs];
+}
+
+function sortDirs(dirs, contents) {
+  dirs.sort((a, b) => {
+    const aDirOrder = contents.find(content => content.slug === path.join(a, 'index-copy')).order;
+    const bDirOrder = contents.find(content => content.slug === path.join(b, 'index-copy')).order;    
+    return aDirOrder < bDirOrder ? -1 : 1;
+  });
+}
+
+function sortDirectoriesForParentDepth(contents, parentDepth) {  
+  const reducedContents = getContentsWithParentDepth(contents, parentDepth);
+  const uniqueParentDirs = getUniqueParentDirs(reducedContents);
+  sortDirs(uniqueParentDirs, reducedContents);
+  contents.sort((a, b) => {
+    const aParentDir = path.dirname(a.slug);
+    const bParentDir = path.dirname(b.slug);
+    return uniqueParentDirs.indexOf(aParentDir) > uniqueParentDirs.indexOf(bParentDir) ? 1 : -1;
+  });  
+}
+
+function sortDirectories(contents) {
+  let parentDepth = maxDepthForNonComponentsNavigation + 1;
+  let hasParentWithDepth = contents.some(content => path.dirname(content.slug).split('/').length === parentDepth);
+
+  while(hasParentWithDepth) {
+    sortDirectoriesForParentDepth(contents, parentDepth);
+    parentDepth++;
+    hasParentWithDepth = contents.some(content => path.dirname(content.slug).split('/').length === parentDepth);
+  }  
+}
+
+function sort(contents) {
+  contents.sort((a, b) => {
+    // Get paths with fewer depth first
+    if (a.slug.split('/').length < b.slug.split('/').length) {
+      return -1;
+    } else if (a.slug.split('/').length > b.slug.split('/').length) {
+      return 1;
+    }
+    // same depth
+    else {
+      // same parent
+      if (path.dirname(a.slug) === path.dirname(b.slug)) {
+        if (path.basename(a.slug) === 'index-copy') {
+          return -1;
+        } else if (path.basename(b.slug) === 'index-copy') {
+          return 1;
+        } else {
+          return a.order < b.order ? -1 : 1;
+        }
+      }
+    }
+  });
+}
+
 async function concatenateEntries(entries) {
-  const contents = await parseEntries(entries);
-  //contents.sort((a, b) => a.order < b.order ? -1 : 1);
+  const contents = await parseEntries(entries);  
+  sortDirectories(contents);
+  sort(contents);
+  console.log('\n\n');
+  contents.forEach(content => {
+    console.log('content.slug: ', content.slug);
+  });
   updateHeadings(contents);
   return contents;
 }

From e54dd1573c88bf49e53b0b52340cfa8c7e6ccb69 Mon Sep 17 00:00:00 2001
From: okadurin <ovkadurin@gmail.com>
Date: Thu, 7 Dec 2023 15:08:35 +0100
Subject: [PATCH 10/19] chore: update

---
 .../cleanupRocketMetadata.js                  | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js b/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
index 636ace1c39..efecfd3b93 100644
--- a/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
+++ b/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
@@ -13,26 +13,26 @@ let visit;
   isToBeConcatenated = config.isToBeConcatenated;
 })();
 
-function addOverviewTitleToIndexMd(tree, isIndexMd) {
-  let h1Index = null;
-  tree.children.forEach((item, index) => {
-    if (item.depth === 1 && item.type === 'heading' && isIndexMd) {
-      h1Index = index;
-    }
-  });
-  if (h1Index !== null) {
-    tree.children.splice(1, 0, {
-      type: 'heading',
-      depth: 2,
-      children: [
-        {
-          type: 'text',
-          value: 'Index',
-        },
-      ],
-    });
-  }
-}
+// function addOverviewTitleToIndexMd(tree, isIndexMd) {
+//   let h1Index = null;
+//   tree.children.forEach((item, index) => {
+//     if (item.depth === 1 && item.type === 'heading' && isIndexMd) {
+//       h1Index = index;
+//     }
+//   });
+//   if (h1Index !== null) {
+//     tree.children.splice(1, 0, {
+//       type: 'heading',
+//       depth: 2,
+//       children: [
+//         {
+//           type: 'text',
+//           value: 'Index',
+//         },
+//       ],
+//     });
+//   }
+// }
 
 function cleanupRocketMetadata() {
   /**
@@ -68,7 +68,7 @@ function cleanupRocketMetadata() {
     // unifiedjs expects node changes to be made on the given node...
     await init;
     visit(tree, 'text', nodeCodeVisitor);
-    addOverviewTitleToIndexMd(tree, isIndexMd);
+    // addOverviewTitleToIndexMd(tree, isIndexMd);
     return tree;
   }
 

From a147f5d0f6c73a96389d24b61eb390addd00265b Mon Sep 17 00:00:00 2001
From: okadurin <ovkadurin@gmail.com>
Date: Thu, 7 Dec 2023 16:16:24 +0100
Subject: [PATCH 11/19] chore: update navigation

---
 config.mjs                                    |  2 +-
 src/pages/[top]/[...slug].astro               | 27 +++++++++++++------
 .../cleanupRocketMetadata.js                  | 13 ++++++++-
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/config.mjs b/config.mjs
index 0a8965d014..e0154abf15 100644
--- a/config.mjs
+++ b/config.mjs
@@ -1,5 +1,5 @@
 export const maxDepthForNonComponentsNavigation = 2;
-const docsDirName = 'docs/';
+export const docsDirName = '/docs/';
 export const isToBeConcatenated = (path) => {
     if (path.includes('/components/')) {
         return true;
diff --git a/src/pages/[top]/[...slug].astro b/src/pages/[top]/[...slug].astro
index 03af2773ae..56bc0dff45 100644
--- a/src/pages/[top]/[...slug].astro
+++ b/src/pages/[top]/[...slug].astro
@@ -99,17 +99,27 @@ const parseEntries = async (entries) => {
 };
 
 const updateHeadings = (contentItems) => {
+  const parentDirToNavDataMap = new Map();
   for (const contentItem of contentItems) {
     const headersH2 = contentItem.headings.filter(header => header.depth === 2);
-    if (headersH2.length === 0) {
-      continue;
-    }
-    const entryInPageNavData = convertHeadingsToInPageNavData(headersH2, contentItem.slug)[0];
-    const headersH3 = contentItem.headings.filter(header => header.depth === 3);
-    if (headersH3.length !== 0) {
-      entryInPageNavData.children = convertHeadingsToInPageNavData(headersH3, contentItem.slug);
+    const parentDirName = path.dirname(contentItem.slug);
+    if (headersH2.length !== 0) {
+      const entryInPageNavData = convertHeadingsToInPageNavData(headersH2, contentItem.slug)[0];
+      const headersH3 = contentItem.headings.filter(header => header.depth === 3);
+      if (headersH3.length !== 0) {
+        entryInPageNavData.children = convertHeadingsToInPageNavData(headersH3, contentItem.slug);
+      }
+      inPageNavData.push(entryInPageNavData);
+      parentDirToNavDataMap.set(parentDirName, entryInPageNavData);
+    } else {
+      const headersH3 = contentItem.headings.filter(header => header.depth === 3);
+      console.log('headersH3: ', headersH3);
+      if (headersH3.length !== 0) {
+        const entryInPageNavData = parentDirToNavDataMap.get(parentDirName);
+        console.log('entryInPageNavData: ', entryInPageNavData)
+        entryInPageNavData.children = convertHeadingsToInPageNavData(headersH3, contentItem.slug);
+      }
     }
-    inPageNavData.push(entryInPageNavData);
   }
 };
 
@@ -205,6 +215,7 @@ async function concatenateEntries(entries) {
     console.log('content.slug: ', content.slug);
   });
   updateHeadings(contents);
+  console.log('inPageNavData: ', inPageNavData);
   return contents;
 }
 
diff --git a/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js b/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
index efecfd3b93..f037a4286c 100644
--- a/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
+++ b/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
@@ -3,6 +3,8 @@ const { init } = require('es-module-lexer');
 const path = require('path');
 
 let isToBeConcatenated;
+let maxDepthForNonComponentsNavigation;
+let docsDirName;
 let visit;
 (async () => {
   // eslint-disable-next-line import/no-extraneous-dependencies
@@ -11,6 +13,8 @@ let visit;
 
   const config = await import('../../../../config.mjs');
   isToBeConcatenated = config.isToBeConcatenated;
+  maxDepthForNonComponentsNavigation = config.maxDepthForNonComponentsNavigation;
+  docsDirName = config.docsDirName;
 })();
 
 // function addOverviewTitleToIndexMd(tree, isIndexMd) {
@@ -41,6 +45,9 @@ function cleanupRocketMetadata() {
   async function transformer(tree, file) {
     const filePath = file.history[0];
     const isIndexMd = path.basename(filePath) === 'index-copy.md';
+    const filePathFromProjectRoot = filePath.split(docsDirName)[1];
+    const depthDelta =
+      path.dirname(filePathFromProjectRoot).split('/').length - maxDepthForNonComponentsNavigation;
 
     /**
      * @param {UnistNode} _node
@@ -57,11 +64,15 @@ function cleanupRocketMetadata() {
             _node.value = title;
           }
           if (isIndexMd) {
+            if (depthDelta > 0) {
+              // eslint-disable-next-line no-param-reassign
+              parent.depth += depthDelta;
+            }
             return;
           }
         }
         // eslint-disable-next-line no-param-reassign
-        parent.depth += 1;
+        parent.depth += 1 + depthDelta;
       }
     }
 

From 10b8402fa30553ac99f3decd9d86432fd137bba0 Mon Sep 17 00:00:00 2001
From: okadurin <ovkadurin@gmail.com>
Date: Mon, 11 Dec 2023 14:21:53 +0100
Subject: [PATCH 12/19] chore: update

---
 README.md                                             |  6 ------
 docs/fundamentals/tools/ajax/overview.md              |  2 +-
 docs/fundamentals/tools/ajax/use-cases.md             |  4 ++--
 .../tools/singleton-manager/example-fail/demo-app.js  |  8 ++++----
 .../tools/singleton-manager/example-fail/index.md     |  2 +-
 .../node_modules/{page-a => page-c}/package.json      |  2 +-
 .../node_modules/page-c/page-c.js}                    |  4 ++--
 .../{page-b => page-d}/node_modules/overlays/index.js |  0
 .../node_modules/overlays/instance.js                 |  0
 .../node_modules/overlays/package.json                |  0
 .../node_modules/{page-b => page-d}/package.json      |  2 +-
 .../{page-b/page-b.js => page-d/page-d.js}            |  4 ++--
 .../singleton-manager/example-success/demo-app.js     |  8 ++++----
 .../tools/singleton-manager/example-success/index.md  |  2 +-
 .../node_modules/{page-a => page-e}/package.json      |  2 +-
 .../node_modules/page-e/page-e.js}                    |  5 ++---
 .../{page-b => page-f}/node_modules/overlays/index.js |  0
 .../node_modules/overlays/instance.js                 |  0
 .../node_modules/overlays/package.json                |  0
 .../node_modules/{page-b => page-f}/package.json      |  2 +-
 .../{page-b/page-b.js => page-f/page-f.js}            |  4 ++--
 src/pages/[top]/[...slug].astro                       |  6 ++++--
 .../cleanupRocketMetadata/cleanupRocketMetadata.js    | 11 ++++-------
 23 files changed, 33 insertions(+), 41 deletions(-)
 rename docs/fundamentals/tools/singleton-manager/example-fail/node_modules/{page-a => page-c}/package.json (78%)
 rename docs/fundamentals/tools/singleton-manager/{example-success/node_modules/page-a/page-a.js => example-fail/node_modules/page-c/page-c.js} (90%)
 rename docs/fundamentals/tools/singleton-manager/example-fail/node_modules/{page-b => page-d}/node_modules/overlays/index.js (100%)
 rename docs/fundamentals/tools/singleton-manager/example-fail/node_modules/{page-b => page-d}/node_modules/overlays/instance.js (100%)
 rename docs/fundamentals/tools/singleton-manager/example-fail/node_modules/{page-b => page-d}/node_modules/overlays/package.json (100%)
 rename docs/fundamentals/tools/singleton-manager/example-fail/node_modules/{page-b => page-d}/package.json (78%)
 rename docs/fundamentals/tools/singleton-manager/example-fail/node_modules/{page-b/page-b.js => page-d/page-d.js} (90%)
 rename docs/fundamentals/tools/singleton-manager/example-success/node_modules/{page-a => page-e}/package.json (78%)
 rename docs/fundamentals/tools/singleton-manager/{example-fail/node_modules/page-a/page-a.js => example-success/node_modules/page-e/page-e.js} (90%)
 rename docs/fundamentals/tools/singleton-manager/example-success/node_modules/{page-b => page-f}/node_modules/overlays/index.js (100%)
 rename docs/fundamentals/tools/singleton-manager/example-success/node_modules/{page-b => page-f}/node_modules/overlays/instance.js (100%)
 rename docs/fundamentals/tools/singleton-manager/example-success/node_modules/{page-b => page-f}/node_modules/overlays/package.json (100%)
 rename docs/fundamentals/tools/singleton-manager/example-success/node_modules/{page-b => page-f}/package.json (78%)
 rename docs/fundamentals/tools/singleton-manager/example-success/node_modules/{page-b/page-b.js => page-f/page-f.js} (90%)

diff --git a/README.md b/README.md
index c9eea65464..c92ab3a4dc 100644
--- a/README.md
+++ b/README.md
@@ -77,12 +77,6 @@ They provide an unopinionated, white-label layer that can be extended to your ow
 
   Note. There is the same error on master. This issue is not caused by the migration
 
-- There is a browser console error when navigating to [ajax/overview](http://localhost:4321/fundamentals/tools/ajax/overview):
-
-  ```
-  __mdjs-stories--overview.js:19 Uncaught TypeError: createCacheInterceptors is not a function or its return value is not iterable
-  ```
-
 ### TODO
 
 ## How to install
diff --git a/docs/fundamentals/tools/ajax/overview.md b/docs/fundamentals/tools/ajax/overview.md
index 12cc8e17ed..ae62d3f494 100644
--- a/docs/fundamentals/tools/ajax/overview.md
+++ b/docs/fundamentals/tools/ajax/overview.md
@@ -60,7 +60,7 @@ const cacheOptions = {
   maxAge: TEN_MINUTES,
 };
 
-const [cacheRequestInterceptor, cacheResponseInterceptor] = createCacheInterceptors(
+const { cacheRequestInterceptor, cacheResponseInterceptor } = createCacheInterceptors(
   getCacheIdentifier,
   cacheOptions,
 );
diff --git a/docs/fundamentals/tools/ajax/use-cases.md b/docs/fundamentals/tools/ajax/use-cases.md
index f6a6820b52..829849ba27 100644
--- a/docs/fundamentals/tools/ajax/use-cases.md
+++ b/docs/fundamentals/tools/ajax/use-cases.md
@@ -22,7 +22,7 @@ const cacheOptions = {
   maxAge: TEN_MINUTES,
 };
 
-const [cacheRequestInterceptor, cacheResponseInterceptor] = createCacheInterceptors(
+const { cacheRequestInterceptor, cacheResponseInterceptor } = createCacheInterceptors(
   getCacheIdentifier,
   cacheOptions,
 );
@@ -191,7 +191,7 @@ const globalCacheOptions = {
 // for instance when a current user is logged out
 const getCacheIdentifier = () => getActiveProfile().profileId;
 
-const [cacheRequestInterceptor, cacheResponseInterceptor] = createCacheInterceptors(
+const { cacheRequestInterceptor, cacheResponseInterceptor } = createCacheInterceptors(
   getCacheIdentifier,
   globalCacheOptions,
 );
diff --git a/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js b/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js
index 802bb6d85c..b561088d1f 100644
--- a/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js
+++ b/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js
@@ -1,7 +1,7 @@
 import { LitElement, css, html } from 'lit';
 
-import 'page-a/page-a.js';
-import 'page-b/page-b.js';
+import 'page-c/page-c.js';
+import 'page-d/page-d.js';
 
 class DemoApp extends LitElement {
   constructor() {
@@ -83,9 +83,9 @@ class DemoApp extends LitElement {
           Page B
         </button>
       </nav>
-      ${this.page === 'A' ? html` <page-a></page-a> ` : html` <page-b></page-b> `}
+      ${this.page === 'A' ? html` <page-c></page-c> ` : html` <page-d></page-d> `}
     `;
   }
 }
 
-customElements.define('demo-app', DemoApp);
+customElements.define('demo-app-fail', DemoApp);
diff --git a/docs/fundamentals/tools/singleton-manager/example-fail/index.md b/docs/fundamentals/tools/singleton-manager/example-fail/index.md
index 82fe2a50bf..09f719e1fa 100644
--- a/docs/fundamentals/tools/singleton-manager/example-fail/index.md
+++ b/docs/fundamentals/tools/singleton-manager/example-fail/index.md
@@ -10,7 +10,7 @@ In this SPA (Single Page Application) demo you will be able to reproduce the iss
 
 In an real application this would now mean that your users can no longer interact with your application.
 
-<demo-app>Loading App...</demo-app>
+<demo-app-fail>Loading App...</demo-app-fail>
 
 <div id="overlay-target" style="margin-top: 50px;"></div>
 
diff --git a/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-a/package.json b/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-c/package.json
similarity index 78%
rename from docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-a/package.json
rename to docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-c/package.json
index 2c77c4dee3..6f1de33522 100644
--- a/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-a/package.json
+++ b/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-c/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "page-a",
+  "name": "page-c",
   "version": "1.0.0",
   "dependencies": {
     "overlays": "^1.0.0"
diff --git a/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-a/page-a.js b/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-c/page-c.js
similarity index 90%
rename from docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-a/page-a.js
rename to docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-c/page-c.js
index 21fd3dde54..7102c89e9c 100644
--- a/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-a/page-a.js
+++ b/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-c/page-c.js
@@ -1,7 +1,7 @@
 import { LitElement, html, css } from 'lit-element';
 import { overlays } from 'overlays/instance.js';
 
-export class PageA extends LitElement {
+export class PageC extends LitElement {
   static get styles() {
     return css`
       :host {
@@ -31,4 +31,4 @@ export class PageA extends LitElement {
   }
 }
 
-customElements.define('page-a', PageA);
+customElements.define('page-c', PageC);
diff --git a/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/index.js b/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-d/node_modules/overlays/index.js
similarity index 100%
rename from docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/index.js
rename to docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-d/node_modules/overlays/index.js
diff --git a/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/instance.js b/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-d/node_modules/overlays/instance.js
similarity index 100%
rename from docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/instance.js
rename to docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-d/node_modules/overlays/instance.js
diff --git a/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/package.json b/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-d/node_modules/overlays/package.json
similarity index 100%
rename from docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/package.json
rename to docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-d/node_modules/overlays/package.json
diff --git a/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/package.json b/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-d/package.json
similarity index 78%
rename from docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/package.json
rename to docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-d/package.json
index cd0fdbef4a..0bd44f847f 100644
--- a/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/package.json
+++ b/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-d/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "page-b",
+  "name": "page-d",
   "version": "1.0.0",
   "dependencies": {
     "overlays": "^2.0.0"
diff --git a/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/page-b.js b/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-d/page-d.js
similarity index 90%
rename from docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/page-b.js
rename to docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-d/page-d.js
index 94a90c0c0b..b250a5bc1c 100644
--- a/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/page-b.js
+++ b/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-d/page-d.js
@@ -1,7 +1,7 @@
 import { LitElement, html, css } from 'lit-element';
 import { overlays } from 'overlays/instance.js';
 
-export class PageB extends LitElement {
+export class PageD extends LitElement {
   static get styles() {
     return css`
       :host {
@@ -31,4 +31,4 @@ export class PageB extends LitElement {
   }
 }
 
-customElements.define('page-b', PageB);
+customElements.define('page-d', PageD);
diff --git a/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js b/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js
index 057392db9d..c0cc6598bf 100644
--- a/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js
+++ b/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js
@@ -2,8 +2,8 @@ import { LitElement, css, html } from 'lit';
 
 import './overlayCompatibility.js';
 
-import 'page-a/page-a.js';
-import 'page-b/page-b.js';
+import 'page-e/page-e.js';
+import 'page-f/page-f.js';
 
 class DemoApp extends LitElement {
   constructor() {
@@ -85,9 +85,9 @@ class DemoApp extends LitElement {
           Page B
         </button>
       </nav>
-      ${this.page === 'A' ? html` <page-a></page-a> ` : html` <page-b></page-b> `}
+      ${this.page === 'A' ? html` <page-e></page-e> ` : html` <page-f></page-f> `}
     `;
   }
 }
 
-customElements.define('demo-app', DemoApp);
+customElements.define('demo-app-success', DemoApp);
diff --git a/docs/fundamentals/tools/singleton-manager/example-success/index.md b/docs/fundamentals/tools/singleton-manager/example-success/index.md
index bd93efb9e4..f54dcf8325 100644
--- a/docs/fundamentals/tools/singleton-manager/example-success/index.md
+++ b/docs/fundamentals/tools/singleton-manager/example-success/index.md
@@ -9,7 +9,7 @@ In this SPA (Single Page Application) demo you will be able to reproduce the sol
 
 With this solutions users can not break the app anymore.
 
-<demo-app>Loading App...</demo-app>
+<demo-app-success>Loading App...</demo-app-success>
 
 <div id="overlay-target" style="margin-top: 50px;"></div>
 
diff --git a/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-a/package.json b/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-e/package.json
similarity index 78%
rename from docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-a/package.json
rename to docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-e/package.json
index 2c77c4dee3..aafc03c19e 100644
--- a/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-a/package.json
+++ b/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-e/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "page-a",
+  "name": "page-e",
   "version": "1.0.0",
   "dependencies": {
     "overlays": "^1.0.0"
diff --git a/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-a/page-a.js b/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-e/page-e.js
similarity index 90%
rename from docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-a/page-a.js
rename to docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-e/page-e.js
index 21fd3dde54..40be7b2fd8 100644
--- a/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-a/page-a.js
+++ b/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-e/page-e.js
@@ -1,7 +1,7 @@
 import { LitElement, html, css } from 'lit-element';
 import { overlays } from 'overlays/instance.js';
 
-export class PageA extends LitElement {
+export class PageE extends LitElement {
   static get styles() {
     return css`
       :host {
@@ -30,5 +30,4 @@ export class PageA extends LitElement {
     `;
   }
 }
-
-customElements.define('page-a', PageA);
+customElements.define('page-e', PageE);
diff --git a/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/index.js b/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-f/node_modules/overlays/index.js
similarity index 100%
rename from docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/index.js
rename to docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-f/node_modules/overlays/index.js
diff --git a/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/instance.js b/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-f/node_modules/overlays/instance.js
similarity index 100%
rename from docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/instance.js
rename to docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-f/node_modules/overlays/instance.js
diff --git a/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/package.json b/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-f/node_modules/overlays/package.json
similarity index 100%
rename from docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/package.json
rename to docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-f/node_modules/overlays/package.json
diff --git a/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/package.json b/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-f/package.json
similarity index 78%
rename from docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/package.json
rename to docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-f/package.json
index cd0fdbef4a..a300d09441 100644
--- a/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/package.json
+++ b/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-f/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "page-b",
+  "name": "page-f",
   "version": "1.0.0",
   "dependencies": {
     "overlays": "^2.0.0"
diff --git a/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/page-b.js b/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-f/page-f.js
similarity index 90%
rename from docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/page-b.js
rename to docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-f/page-f.js
index 41fa08ad45..ba2a7e3b8d 100644
--- a/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/page-b.js
+++ b/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-f/page-f.js
@@ -1,7 +1,7 @@
 import { LitElement, html, css } from 'lit-element';
 import { overlays } from 'overlays/instance.js';
 
-export class PageB extends LitElement {
+export class PageF extends LitElement {
   static get styles() {
     return css`
       :host {
@@ -31,4 +31,4 @@ export class PageB extends LitElement {
   }
 }
 
-customElements.define('page-b', PageB);
+customElements.define('page-f', PageF);
diff --git a/src/pages/[top]/[...slug].astro b/src/pages/[top]/[...slug].astro
index 56bc0dff45..223cbaf09c 100644
--- a/src/pages/[top]/[...slug].astro
+++ b/src/pages/[top]/[...slug].astro
@@ -103,6 +103,7 @@ const updateHeadings = (contentItems) => {
   for (const contentItem of contentItems) {
     const headersH2 = contentItem.headings.filter(header => header.depth === 2);
     const parentDirName = path.dirname(contentItem.slug);
+    console.log('contentItem.slug: ', contentItem.slug);
     if (headersH2.length !== 0) {
       const entryInPageNavData = convertHeadingsToInPageNavData(headersH2, contentItem.slug)[0];
       const headersH3 = contentItem.headings.filter(header => header.depth === 3);
@@ -116,8 +117,9 @@ const updateHeadings = (contentItems) => {
       console.log('headersH3: ', headersH3);
       if (headersH3.length !== 0) {
         const entryInPageNavData = parentDirToNavDataMap.get(parentDirName);
-        console.log('entryInPageNavData: ', entryInPageNavData)
-        entryInPageNavData.children = convertHeadingsToInPageNavData(headersH3, contentItem.slug);
+        if (entryInPageNavData) {
+          entryInPageNavData.children = convertHeadingsToInPageNavData(headersH3, contentItem.slug);
+        }
       }
     }
   }
diff --git a/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js b/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
index f037a4286c..5096cad309 100644
--- a/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
+++ b/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
@@ -56,13 +56,10 @@ function cleanupRocketMetadata() {
       if (parent.type === 'heading' && isToBeConcatenated(filePath)) {
         if (parent.depth === 1) {
           const splitByOrder = _node.value.split('||');
-          const order = splitByOrder[1]?.trim();
-          if (order) {
-            const splitByArrows = splitByOrder[0].split('>>');
-            const title = splitByArrows[splitByArrows.length - 1].trim();
-            // eslint-disable-next-line no-param-reassign
-            _node.value = title;
-          }
+          const splitByArrows = splitByOrder[0].split('>>');
+          const title = splitByArrows[splitByArrows.length - 1].trim();
+          // eslint-disable-next-line no-param-reassign
+          _node.value = title;
           if (isIndexMd) {
             if (depthDelta > 0) {
               // eslint-disable-next-line no-param-reassign

From f4a5ea32a687d8157d250c9c079b11848b2b71d3 Mon Sep 17 00:00:00 2001
From: okadurin <ovkadurin@gmail.com>
Date: Tue, 12 Dec 2023 13:55:52 +0100
Subject: [PATCH 13/19] chore: update

---
 src/pages/[top]/[...slug].astro                              | 5 ++---
 .../cleanupRocketMetadata/cleanupRocketMetadata.js           | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/pages/[top]/[...slug].astro b/src/pages/[top]/[...slug].astro
index 223cbaf09c..ad68c179ce 100644
--- a/src/pages/[top]/[...slug].astro
+++ b/src/pages/[top]/[...slug].astro
@@ -114,11 +114,11 @@ const updateHeadings = (contentItems) => {
       parentDirToNavDataMap.set(parentDirName, entryInPageNavData);
     } else {
       const headersH3 = contentItem.headings.filter(header => header.depth === 3);
-      console.log('headersH3: ', headersH3);
       if (headersH3.length !== 0) {
         const entryInPageNavData = parentDirToNavDataMap.get(parentDirName);
         if (entryInPageNavData) {
-          entryInPageNavData.children = convertHeadingsToInPageNavData(headersH3, contentItem.slug);
+          entryInPageNavData.children = entryInPageNavData.children || [];
+          entryInPageNavData.children = [...entryInPageNavData.children, ...convertHeadingsToInPageNavData(headersH3, contentItem.slug)];
         }
       }
     }
@@ -217,7 +217,6 @@ async function concatenateEntries(entries) {
     console.log('content.slug: ', content.slug);
   });
   updateHeadings(contents);
-  console.log('inPageNavData: ', inPageNavData);
   return contents;
 }
 
diff --git a/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js b/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
index 5096cad309..1d3aa8d003 100644
--- a/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
+++ b/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
@@ -75,7 +75,7 @@ function cleanupRocketMetadata() {
 
     // unifiedjs expects node changes to be made on the given node...
     await init;
-    visit(tree, 'text', nodeCodeVisitor);
+    visit(tree, ['text', 'inlineCode'], nodeCodeVisitor);
     // addOverviewTitleToIndexMd(tree, isIndexMd);
     return tree;
   }

From b850bfd85fdc97675990640a0614555a0b254e89 Mon Sep 17 00:00:00 2001
From: okadurin <ovkadurin@gmail.com>
Date: Tue, 12 Dec 2023 14:30:17 +0100
Subject: [PATCH 14/19] update in-page navigation menu

---
 src/pages/[top]/[...slug].astro | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/pages/[top]/[...slug].astro b/src/pages/[top]/[...slug].astro
index ad68c179ce..a9d9e07aaf 100644
--- a/src/pages/[top]/[...slug].astro
+++ b/src/pages/[top]/[...slug].astro
@@ -12,7 +12,8 @@ import { maxDepthForNonComponentsNavigation } from '../../../config.mjs';
 
 let pages = [];
 const inPageNavData = [];
-let mdjsStoriesJsPath = ''
+let mdjsStoriesJsPath = '';
+let dirPath;
 
 
 export async function getStaticPaths() {
@@ -79,11 +80,16 @@ const renderDir = async (directoryPath) => {
   return await concatenateEntries(entries);
 };
 
-const convertHeadingsToInPageNavData = (headings, componentSlug) => {
-  return headings.map(header => ({
+const convertHeadingsToInPageNavData = (headings, componentSlug, parentHeaderSlug) => {
+  const arePagesConcatenated = !entry;
+  let mainPathPart = arePagesConcatenated ? dirPath : componentSlug;
+  return headings.map(header => {
+    const anchor = parentHeaderSlug ? `${parentHeaderSlug}-${header.slug}` : `${header.slug}`;
+    return {
       name: header.text,
-      url: `/${path.dirname(componentSlug)}#${header.slug}`
-    }));
+      url: `/${mainPathPart}#${anchor}`
+    };
+  });
 };
 
 const parseEntries = async (entries) => {
@@ -104,11 +110,13 @@ const updateHeadings = (contentItems) => {
     const headersH2 = contentItem.headings.filter(header => header.depth === 2);
     const parentDirName = path.dirname(contentItem.slug);
     console.log('contentItem.slug: ', contentItem.slug);
-    if (headersH2.length !== 0) {
-      const entryInPageNavData = convertHeadingsToInPageNavData(headersH2, contentItem.slug)[0];
+    let parentHeaderSlug = '';
+    if (headersH2.length !== 0) {      
+      const entryInPageNavData = convertHeadingsToInPageNavData(headersH2, contentItem.slug, '')[0];
+      parentHeaderSlug = entryInPageNavData.url.split('#')[1];
       const headersH3 = contentItem.headings.filter(header => header.depth === 3);
       if (headersH3.length !== 0) {
-        entryInPageNavData.children = convertHeadingsToInPageNavData(headersH3, contentItem.slug);
+        entryInPageNavData.children = convertHeadingsToInPageNavData(headersH3, contentItem.slug, parentHeaderSlug);
       }
       inPageNavData.push(entryInPageNavData);
       parentDirToNavDataMap.set(parentDirName, entryInPageNavData);
@@ -116,9 +124,11 @@ const updateHeadings = (contentItems) => {
       const headersH3 = contentItem.headings.filter(header => header.depth === 3);
       if (headersH3.length !== 0) {
         const entryInPageNavData = parentDirToNavDataMap.get(parentDirName);
+        console.log('entryInPageNavData: ', entryInPageNavData);
         if (entryInPageNavData) {
+          parentHeaderSlug = entryInPageNavData.url.split('#')[1];
           entryInPageNavData.children = entryInPageNavData.children || [];
-          entryInPageNavData.children = [...entryInPageNavData.children, ...convertHeadingsToInPageNavData(headersH3, contentItem.slug)];
+          entryInPageNavData.children = [...entryInPageNavData.children, ...convertHeadingsToInPageNavData(headersH3, contentItem.slug, parentHeaderSlug)];
         }
       }
     }
@@ -238,7 +248,7 @@ const getMdjsStories = (fullDirPath) => {
 if (entry) {
   pages = await concatenateEntries([entry]);
 } else {
-  const dirPath = path.join(Astro.params.top, Astro.params.slug);
+  dirPath = path.join(Astro.params.top, Astro.params.slug);
   pages = await renderDir(dirPath);
   const fullDirPath = path.join(process.cwd(), 'public/docs', dirPath);
   const files = await getMdjsStories(fullDirPath);

From 982e6c867f3152f5605be8d22562dc28b4a261ea Mon Sep 17 00:00:00 2001
From: okadurin <ovkadurin@gmail.com>
Date: Wed, 13 Dec 2023 09:52:12 +0100
Subject: [PATCH 15/19] chore: update in-page-navigation menu

---
 patches/@astrojs+markdown-remark+3.3.0.patch | 27 +++++++++++
 patches/README.md                            | 48 ++++++++++++++++++++
 src/pages/[top]/[...slug].astro              | 13 ++----
 3 files changed, 80 insertions(+), 8 deletions(-)
 create mode 100644 patches/@astrojs+markdown-remark+3.3.0.patch
 create mode 100644 patches/README.md

diff --git a/patches/@astrojs+markdown-remark+3.3.0.patch b/patches/@astrojs+markdown-remark+3.3.0.patch
new file mode 100644
index 0000000000..114dced1a3
--- /dev/null
+++ b/patches/@astrojs+markdown-remark+3.3.0.patch
@@ -0,0 +1,27 @@
+diff --git a/node_modules/@astrojs/markdown-remark/dist/rehype-collect-headings.js b/node_modules/@astrojs/markdown-remark/dist/rehype-collect-headings.js
+index 2f1ee5d..6865631 100644
+--- a/node_modules/@astrojs/markdown-remark/dist/rehype-collect-headings.js
++++ b/node_modules/@astrojs/markdown-remark/dist/rehype-collect-headings.js
+@@ -1,10 +1,13 @@
+ import Slugger from "github-slugger";
+ import { visit } from "unist-util-visit";
++import * as path from 'path';
+ import { InvalidAstroDataError, safelyGetAstroData } from "./frontmatter-injection.js";
+ const rawNodeTypes = /* @__PURE__ */ new Set(["text", "raw", "mdxTextExpression"]);
+ const codeTagNames = /* @__PURE__ */ new Set(["code", "pre"]);
+ function rehypeHeadingIds() {
+   return function(tree, file) {
++    const fileName = file.history[0];
++    const parentDirectoryName = path.basename(path.dirname(fileName));
+     const headings = [];
+     const slugger = new Slugger();
+     const isMDX = isMDXFile(file);
+@@ -52,7 +55,7 @@ function rehypeHeadingIds() {
+         let slug = slugger.slug(text);
+         if (slug.endsWith("-"))
+           slug = slug.slice(0, -1);        
+-        node.properties.id = slug;
++        node.properties.id = `${parentDirectoryName}-${slug}`;        
+       }
+       headings.push({ depth, slug: node.properties.id, text });
+     });
diff --git a/patches/README.md b/patches/README.md
new file mode 100644
index 0000000000..6226b88106
--- /dev/null
+++ b/patches/README.md
@@ -0,0 +1,48 @@
+## @mdjs/core@0.20.0
+
+### mdjsStoryParse.js
+
+The original file URL is here: [URL](https://github.com/modernweb-dev/rocket/blob/%40mdjs/core%400.20.0/packages/mdjs-core/src/mdjsStoryParse.js)
+
+#### Why
+
+Astro does not call [mdjsStoryParse](https://github.com/modernweb-dev/rocket/blob/%40mdjs/core%400.20.0/packages/mdjs-core/src/mdjsStoryParse.js#L53) every time an md file is changed while `watching`. The function is called only once. However some [shared variables](https://github.com/modernweb-dev/rocket/blob/%40mdjs/core%400.20.0/packages/mdjs-core/src/mdjsStoryParse.js#L58-L59) are set on the level of the `mdjsStoryParse`. That leads to the situation that those variable are shared among all md files which is not according to the design. The orignal idea is to share those per an md file. As a result when generating `__mdjs-stories.js` files, they get polluted with the data from other files.
+
+#### About the fix
+
+- [nodeCodeVisitor](https://github.com/modernweb-dev/rocket/blob/%40mdjs/core%400.20.0/packages/mdjs-core/src/mdjsStoryParse.js#L68) function was moved under the [transformer](https://github.com/modernweb-dev/rocket/blob/%40mdjs/core%400.20.0/packages/mdjs-core/src/mdjsStoryParse.js#L182C18-L182C29) function
+- [Shared variables](https://github.com/modernweb-dev/rocket/blob/%40mdjs/core%400.20.0/packages/mdjs-core/src/mdjsStoryParse.js#L58-L59) were moved under the `transformer` function
+
+This way the shared variables instantiated on every `transformer` function call.
+
+### mdjsParse.js
+
+#### Why patching
+
+Astro does not call [mdjsParse](https://github.com/modernweb-dev/rocket/blob/%40mdjs/core%400.20.0/packages/mdjs-core/src/mdjsParse.js#L7) every time an md file is changed while `watching`. The function is called only once. However some [shared variables](https://github.com/modernweb-dev/rocket/blob/%40mdjs/core%400.20.0/packages/mdjs-core/src/mdjsParse.js#L8) are set on the level of the `mdjsParse`. That leads to the situation that those variable are shared among all md files which is not according to the design. The orignal idea is to share those per an md file. As a result when generating `__mdjs-stories.js` files, they get polluted with the data from other files.
+
+#### About the patch
+
+- [Shared variables](https://github.com/modernweb-dev/rocket/blob/%40mdjs/core%400.20.0/packages/mdjs-core/src/mdjsParse.js#L8) were moved under the `transformer` function
+
+This way the shared variables instantiated on every `transformer` function call.
+
+### mdjsSetupCode.js
+
+Dynamic `imports` for `@mdjs/mdjs-preview/define` and `@mdjs/mdjs-story/define` were removed. These imports are inlined into `__mdjs-story.js` by `copyMdjsStories.js` remark plugin. This is done to enable `dist` bundling.
+
+## @astrojs/markdown-remark
+
+The patch is done to inhance the `id` naming of <H> tag `HTML` elements.
+
+### Why updating naming
+
+In the current implementation of the portal we need to concatenate `md` pages. Astro creates unique values for the `id` attributes for `<H>` tags (`h1`, `h2`, etc. ). The problem is that the `id`'s are not longer unique after concatenation. There might be multiple `overview` `id`'s which is not correct for navigation.
+
+### What the solution is about
+
+The solution is to add the parent directory name to the each <H> id as a prefix. That is if the `md` file being parsed is called `docs/tools/my.md` and let's say there is an `h2` tag in with id called `overview`, then after applying patch, the new `id` value becomes `tools-overview`.
+
+## lit
+
+The patch is required to make `astro build` work correctly. `lit` is added as an `external` library for the build option in `astro.config.mjs`. And without the patch the build throws errors.
diff --git a/src/pages/[top]/[...slug].astro b/src/pages/[top]/[...slug].astro
index a9d9e07aaf..4cfb5f31a0 100644
--- a/src/pages/[top]/[...slug].astro
+++ b/src/pages/[top]/[...slug].astro
@@ -80,11 +80,11 @@ const renderDir = async (directoryPath) => {
   return await concatenateEntries(entries);
 };
 
-const convertHeadingsToInPageNavData = (headings, componentSlug, parentHeaderSlug) => {
+const convertHeadingsToInPageNavData = (headings, componentSlug) => {
   const arePagesConcatenated = !entry;
   let mainPathPart = arePagesConcatenated ? dirPath : componentSlug;
   return headings.map(header => {
-    const anchor = parentHeaderSlug ? `${parentHeaderSlug}-${header.slug}` : `${header.slug}`;
+    const anchor = header.slug;
     return {
       name: header.text,
       url: `/${mainPathPart}#${anchor}`
@@ -110,13 +110,11 @@ const updateHeadings = (contentItems) => {
     const headersH2 = contentItem.headings.filter(header => header.depth === 2);
     const parentDirName = path.dirname(contentItem.slug);
     console.log('contentItem.slug: ', contentItem.slug);
-    let parentHeaderSlug = '';
     if (headersH2.length !== 0) {      
-      const entryInPageNavData = convertHeadingsToInPageNavData(headersH2, contentItem.slug, '')[0];
-      parentHeaderSlug = entryInPageNavData.url.split('#')[1];
+      const entryInPageNavData = convertHeadingsToInPageNavData(headersH2, contentItem.slug)[0];
       const headersH3 = contentItem.headings.filter(header => header.depth === 3);
       if (headersH3.length !== 0) {
-        entryInPageNavData.children = convertHeadingsToInPageNavData(headersH3, contentItem.slug, parentHeaderSlug);
+        entryInPageNavData.children = convertHeadingsToInPageNavData(headersH3, contentItem.slug);
       }
       inPageNavData.push(entryInPageNavData);
       parentDirToNavDataMap.set(parentDirName, entryInPageNavData);
@@ -126,9 +124,8 @@ const updateHeadings = (contentItems) => {
         const entryInPageNavData = parentDirToNavDataMap.get(parentDirName);
         console.log('entryInPageNavData: ', entryInPageNavData);
         if (entryInPageNavData) {
-          parentHeaderSlug = entryInPageNavData.url.split('#')[1];
           entryInPageNavData.children = entryInPageNavData.children || [];
-          entryInPageNavData.children = [...entryInPageNavData.children, ...convertHeadingsToInPageNavData(headersH3, contentItem.slug, parentHeaderSlug)];
+          entryInPageNavData.children = [...entryInPageNavData.children, ...convertHeadingsToInPageNavData(headersH3, contentItem.slug)];
         }
       }
     }

From 193ed4d7e086d4a9f23022949ccfb60f0a20f45c Mon Sep 17 00:00:00 2001
From: okadurin <ovkadurin@gmail.com>
Date: Wed, 13 Dec 2023 10:41:27 +0100
Subject: [PATCH 16/19] chore: test renaming index.md

---
 docs/fundamentals/tools/helpers/index.md      |  2 +-
 .../tools/singleton-manager/index.md          |  2 +-
 src/pages/[top]/[...slug].astro               | 40 ++++++++++++++-----
 src/utils/copy-docs/copy-docs.js              |  2 +-
 .../cleanupRocketMetadata.js                  |  2 +-
 5 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/docs/fundamentals/tools/helpers/index.md b/docs/fundamentals/tools/helpers/index.md
index e8bfaf1921..1547b8ac19 100644
--- a/docs/fundamentals/tools/helpers/index.md
+++ b/docs/fundamentals/tools/helpers/index.md
@@ -1,3 +1,3 @@
-# Tools >> Helpers
+# Tools >> Helpers ||5
 
 -> go to Overview
diff --git a/docs/fundamentals/tools/singleton-manager/index.md b/docs/fundamentals/tools/singleton-manager/index.md
index 6dd7c78445..063b117991 100644
--- a/docs/fundamentals/tools/singleton-manager/index.md
+++ b/docs/fundamentals/tools/singleton-manager/index.md
@@ -1,3 +1,3 @@
-# Tools >> Singleton Manager ||20
+# Tools >> Singleton Manager ||30
 
 -> go to Overview
diff --git a/src/pages/[top]/[...slug].astro b/src/pages/[top]/[...slug].astro
index 4cfb5f31a0..52ab89defd 100644
--- a/src/pages/[top]/[...slug].astro
+++ b/src/pages/[top]/[...slug].astro
@@ -76,6 +76,7 @@ export async function getStaticPaths() {
 const { entry } = Astro.props;
 
 const renderDir = async (directoryPath) => {
+  console.log('directoryPath: ', directoryPath);
   const entries = getEntriesByDir(directoryPath);
   return await concatenateEntries(entries);
 };
@@ -109,7 +110,6 @@ const updateHeadings = (contentItems) => {
   for (const contentItem of contentItems) {
     const headersH2 = contentItem.headings.filter(header => header.depth === 2);
     const parentDirName = path.dirname(contentItem.slug);
-    console.log('contentItem.slug: ', contentItem.slug);
     if (headersH2.length !== 0) {      
       const entryInPageNavData = convertHeadingsToInPageNavData(headersH2, contentItem.slug)[0];
       const headersH3 = contentItem.headings.filter(header => header.depth === 3);
@@ -122,7 +122,6 @@ const updateHeadings = (contentItems) => {
       const headersH3 = contentItem.headings.filter(header => header.depth === 3);
       if (headersH3.length !== 0) {
         const entryInPageNavData = parentDirToNavDataMap.get(parentDirName);
-        console.log('entryInPageNavData: ', entryInPageNavData);
         if (entryInPageNavData) {
           entryInPageNavData.children = entryInPageNavData.children || [];
           entryInPageNavData.children = [...entryInPageNavData.children, ...convertHeadingsToInPageNavData(headersH3, contentItem.slug)];
@@ -135,7 +134,7 @@ const updateHeadings = (contentItems) => {
 const directoriesOrder = new Map();
 function getOrder(content, contents) {
   const dir = path.dirname(content.slug);  
-  const dirIndex = path.join(dir, 'index-copy');
+  const dirIndex = path.join(dir, 'dir-base');
   let dirOrder;
   if (directoriesOrder.has(dir)) {
     dirOrder = directoriesOrder.get(dir);    
@@ -149,7 +148,7 @@ function getOrder(content, contents) {
 function getContentsWithParentDepth(contents, parentDepth) {
   return contents.filter(content => {
     const dirDepth = path.dirname(content.slug).split('/').length;
-    return parentDepth === dirDepth;
+    return dirDepth >= parentDepth;
   });
 }
 
@@ -163,15 +162,27 @@ function getUniqueParentDirs(contents) {
 
 function sortDirs(dirs, contents) {
   dirs.sort((a, b) => {
-    const aDirOrder = contents.find(content => content.slug === path.join(a, 'index-copy')).order;
-    const bDirOrder = contents.find(content => content.slug === path.join(b, 'index-copy')).order;    
+    const aDirOrder = contents.find(content => content.slug === path.join(a, 'dir-base')).order;
+    const bDirOrder = contents.find(content => content.slug === path.join(b, 'dir-base')).order;    
     return aDirOrder < bDirOrder ? -1 : 1;
   });
 }
 
-function sortDirectoriesForParentDepth(contents, parentDepth) {  
+function sortDirectoriesForParentDepth(contents, parentDepth) {
+  console.log('\n\n contents.length: ', contents.length);
+  contents.forEach(content => {
+    console.log('content.slug 0: ', content.slug);
+  });
+
   const reducedContents = getContentsWithParentDepth(contents, parentDepth);
+
+  console.log('\n\n reducedContents.length: ', reducedContents.length);
+  reducedContents.forEach(content => {
+    console.log('content.slug 1: ', content.slug);
+  });
   const uniqueParentDirs = getUniqueParentDirs(reducedContents);
+  console.log('uniqueParentDirs: ', uniqueParentDirs);
+
   sortDirs(uniqueParentDirs, reducedContents);
   contents.sort((a, b) => {
     const aParentDir = path.dirname(a.slug);
@@ -203,9 +214,9 @@ function sort(contents) {
     else {
       // same parent
       if (path.dirname(a.slug) === path.dirname(b.slug)) {
-        if (path.basename(a.slug) === 'index-copy') {
+        if (path.basename(a.slug) === 'dir-base') {
           return -1;
-        } else if (path.basename(b.slug) === 'index-copy') {
+        } else if (path.basename(b.slug) === 'dir-base') {
           return 1;
         } else {
           return a.order < b.order ? -1 : 1;
@@ -216,6 +227,10 @@ function sort(contents) {
 }
 
 async function concatenateEntries(entries) {
+  entries.forEach(entry => {
+    console.log('entry.slug: ', entry.slug);
+  });
+
   const contents = await parseEntries(entries);  
   sortDirectories(contents);
   sort(contents);
@@ -228,7 +243,12 @@ async function concatenateEntries(entries) {
 }
 
 const getEntriesByDir = (dirname) => {
-  return allPages.filter(childEntry => childEntry.slug.startsWith(dirname));
+  //return allPages.filter(childEntry => childEntry.slug.startsWith(dirname));
+  return allPages.filter(childEntry => {
+    if (childEntry.slug === 'fundamentals/tools/helpers') {
+      console.log('childEntry: ', childEntry)
+    }
+    return childEntry.slug.startsWith(dirname)});
 };
 
 const getMdjsStories = (fullDirPath) => {
diff --git a/src/utils/copy-docs/copy-docs.js b/src/utils/copy-docs/copy-docs.js
index 694fb62d85..308a7a904f 100644
--- a/src/utils/copy-docs/copy-docs.js
+++ b/src/utils/copy-docs/copy-docs.js
@@ -139,7 +139,7 @@ async function copyDocs(currentPath = '') {
     const sourceDocsFilePath = path.join(sourceDocsPath, currentPath, file);
     const contentDocsFilePath =
       file === 'index.md'
-        ? path.join(contentDocsPath, currentPath, 'index-copy.md')
+        ? path.join(contentDocsPath, currentPath, 'dir-base.md')
         : path.join(contentDocsPath, currentPath, file);
     const publicDocsFilePath = path.join(publicDocsPath, currentPath, file);
     const stats = await fs.lstat(sourceDocsFilePath);
diff --git a/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js b/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
index 1d3aa8d003..2d1ae3b5eb 100644
--- a/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
+++ b/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
@@ -44,7 +44,7 @@ function cleanupRocketMetadata() {
    */
   async function transformer(tree, file) {
     const filePath = file.history[0];
-    const isIndexMd = path.basename(filePath) === 'index-copy.md';
+    const isIndexMd = path.basename(filePath) === 'dir-base.md';
     const filePathFromProjectRoot = filePath.split(docsDirName)[1];
     const depthDelta =
       path.dirname(filePathFromProjectRoot).split('/').length - maxDepthForNonComponentsNavigation;

From dacbc824862914e77b3cbe43191f2dd59a901318 Mon Sep 17 00:00:00 2001
From: okadurin <ovkadurin@gmail.com>
Date: Wed, 13 Dec 2023 10:44:26 +0100
Subject: [PATCH 17/19] chore: rename dir-base to dir-index

---
 src/pages/[top]/[...slug].astro                        | 10 +++++-----
 src/utils/copy-docs/copy-docs.js                       |  2 +-
 .../cleanupRocketMetadata/cleanupRocketMetadata.js     |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/[top]/[...slug].astro b/src/pages/[top]/[...slug].astro
index 52ab89defd..f02dc0953a 100644
--- a/src/pages/[top]/[...slug].astro
+++ b/src/pages/[top]/[...slug].astro
@@ -134,7 +134,7 @@ const updateHeadings = (contentItems) => {
 const directoriesOrder = new Map();
 function getOrder(content, contents) {
   const dir = path.dirname(content.slug);  
-  const dirIndex = path.join(dir, 'dir-base');
+  const dirIndex = path.join(dir, 'dir-index');
   let dirOrder;
   if (directoriesOrder.has(dir)) {
     dirOrder = directoriesOrder.get(dir);    
@@ -162,8 +162,8 @@ function getUniqueParentDirs(contents) {
 
 function sortDirs(dirs, contents) {
   dirs.sort((a, b) => {
-    const aDirOrder = contents.find(content => content.slug === path.join(a, 'dir-base')).order;
-    const bDirOrder = contents.find(content => content.slug === path.join(b, 'dir-base')).order;    
+    const aDirOrder = contents.find(content => content.slug === path.join(a, 'dir-index')).order;
+    const bDirOrder = contents.find(content => content.slug === path.join(b, 'dir-index')).order;    
     return aDirOrder < bDirOrder ? -1 : 1;
   });
 }
@@ -214,9 +214,9 @@ function sort(contents) {
     else {
       // same parent
       if (path.dirname(a.slug) === path.dirname(b.slug)) {
-        if (path.basename(a.slug) === 'dir-base') {
+        if (path.basename(a.slug) === 'dir-index') {
           return -1;
-        } else if (path.basename(b.slug) === 'dir-base') {
+        } else if (path.basename(b.slug) === 'dir-index') {
           return 1;
         } else {
           return a.order < b.order ? -1 : 1;
diff --git a/src/utils/copy-docs/copy-docs.js b/src/utils/copy-docs/copy-docs.js
index 308a7a904f..22082a48a2 100644
--- a/src/utils/copy-docs/copy-docs.js
+++ b/src/utils/copy-docs/copy-docs.js
@@ -139,7 +139,7 @@ async function copyDocs(currentPath = '') {
     const sourceDocsFilePath = path.join(sourceDocsPath, currentPath, file);
     const contentDocsFilePath =
       file === 'index.md'
-        ? path.join(contentDocsPath, currentPath, 'dir-base.md')
+        ? path.join(contentDocsPath, currentPath, 'dir-index.md')
         : path.join(contentDocsPath, currentPath, file);
     const publicDocsFilePath = path.join(publicDocsPath, currentPath, file);
     const stats = await fs.lstat(sourceDocsFilePath);
diff --git a/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js b/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
index 2d1ae3b5eb..6ab602a02a 100644
--- a/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
+++ b/src/utils/remark-plugings/cleanupRocketMetadata/cleanupRocketMetadata.js
@@ -44,7 +44,7 @@ function cleanupRocketMetadata() {
    */
   async function transformer(tree, file) {
     const filePath = file.history[0];
-    const isIndexMd = path.basename(filePath) === 'dir-base.md';
+    const isIndexMd = path.basename(filePath) === 'dir-index.md';
     const filePathFromProjectRoot = filePath.split(docsDirName)[1];
     const depthDelta =
       path.dirname(filePathFromProjectRoot).split('/').length - maxDepthForNonComponentsNavigation;

From 0618cef949cc5df53300849f6f2b3ef60c4e86a5 Mon Sep 17 00:00:00 2001
From: okadurin <ovkadurin@gmail.com>
Date: Wed, 13 Dec 2023 11:30:47 +0100
Subject: [PATCH 18/19] chore: update sorting for mds

---
 src/pages/[top]/[...slug].astro | 45 +++++++++++++--------------------
 1 file changed, 18 insertions(+), 27 deletions(-)

diff --git a/src/pages/[top]/[...slug].astro b/src/pages/[top]/[...slug].astro
index f02dc0953a..51c476799b 100644
--- a/src/pages/[top]/[...slug].astro
+++ b/src/pages/[top]/[...slug].astro
@@ -76,7 +76,6 @@ export async function getStaticPaths() {
 const { entry } = Astro.props;
 
 const renderDir = async (directoryPath) => {
-  console.log('directoryPath: ', directoryPath);
   const entries = getEntriesByDir(directoryPath);
   return await concatenateEntries(entries);
 };
@@ -152,10 +151,16 @@ function getContentsWithParentDepth(contents, parentDepth) {
   });
 }
 
-function getUniqueParentDirs(contents) {
+function getSlugForParentDepth(slug, depth) {
+  const slugParts = slug.split('/');
+  const slugPartsForParentDepth = slugParts.slice(0, depth);
+  return slugPartsForParentDepth.join('/');
+}
+
+function getUniqueParentDirs(contents, parentDepth) {
   const dirs = new Set();
   contents.forEach(content => {
-    dirs.add(path.dirname(content.slug));
+    dirs.add(getSlugForParentDepth(content.slug, parentDepth));
   });
   return [...dirs];
 }
@@ -169,25 +174,22 @@ function sortDirs(dirs, contents) {
 }
 
 function sortDirectoriesForParentDepth(contents, parentDepth) {
-  console.log('\n\n contents.length: ', contents.length);
-  contents.forEach(content => {
-    console.log('content.slug 0: ', content.slug);
-  });
 
   const reducedContents = getContentsWithParentDepth(contents, parentDepth);
 
-  console.log('\n\n reducedContents.length: ', reducedContents.length);
-  reducedContents.forEach(content => {
-    console.log('content.slug 1: ', content.slug);
-  });
-  const uniqueParentDirs = getUniqueParentDirs(reducedContents);
-  console.log('uniqueParentDirs: ', uniqueParentDirs);
+  const uniqueParentDirs = getUniqueParentDirs(reducedContents, parentDepth);
 
   sortDirs(uniqueParentDirs, reducedContents);
   contents.sort((a, b) => {
-    const aParentDir = path.dirname(a.slug);
-    const bParentDir = path.dirname(b.slug);
-    return uniqueParentDirs.indexOf(aParentDir) > uniqueParentDirs.indexOf(bParentDir) ? 1 : -1;
+    const aParentDir = getSlugForParentDepth(a.slug, parentDepth);
+    const bParentDir = getSlugForParentDepth(b.slug, parentDepth);
+    if (uniqueParentDirs.indexOf(aParentDir) > uniqueParentDirs.indexOf(bParentDir)) {
+      return 1;
+    } else if (uniqueParentDirs.indexOf(aParentDir) < uniqueParentDirs.indexOf(bParentDir)) {
+      return -1;
+    } else {
+      return 0;
+    }    
   });  
 }
 
@@ -227,17 +229,9 @@ function sort(contents) {
 }
 
 async function concatenateEntries(entries) {
-  entries.forEach(entry => {
-    console.log('entry.slug: ', entry.slug);
-  });
-
   const contents = await parseEntries(entries);  
   sortDirectories(contents);
   sort(contents);
-  console.log('\n\n');
-  contents.forEach(content => {
-    console.log('content.slug: ', content.slug);
-  });
   updateHeadings(contents);
   return contents;
 }
@@ -245,9 +239,6 @@ async function concatenateEntries(entries) {
 const getEntriesByDir = (dirname) => {
   //return allPages.filter(childEntry => childEntry.slug.startsWith(dirname));
   return allPages.filter(childEntry => {
-    if (childEntry.slug === 'fundamentals/tools/helpers') {
-      console.log('childEntry: ', childEntry)
-    }
     return childEntry.slug.startsWith(dirname)});
 };
 

From 9fb21c450c455e641ae2c0663eba3f29adafb114 Mon Sep 17 00:00:00 2001
From: okadurin <ovkadurin@gmail.com>
Date: Thu, 14 Dec 2023 09:35:34 +0100
Subject: [PATCH 19/19] chore: fix the order of rendering for components

---
 src/pages/components/[component].astro | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/pages/components/[component].astro b/src/pages/components/[component].astro
index c3d9a0b870..afdfd3f00a 100644
--- a/src/pages/components/[component].astro
+++ b/src/pages/components/[component].astro
@@ -53,7 +53,15 @@ const updateHeadings = (contentItems) => {
 
 async function concatenateEntries(entries) {
   const contents = await parseEntries(entries);
-  contents.sort((a, b) => a.order < b.order ? -1 : 1);
+  contents.sort((a, b) => {
+    if (path.basename(a.slug) === 'dir-index') {
+        return -1;
+      } else if (path.basename(b.slug) === 'dir-index') {
+        return 1;
+      } else {
+        return a.order < b.order ? -1 : 1;
+      }
+  });
   updateHeadings(contents);
   return contents;
 }