Merge pull request #2157 from ing-bank/feature/concatenate-top-level-…

…pages

Feature/concatenate top level pages

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

config.mjs

@@ -0,0 +1,10 @@
+export const maxDepthForNonComponentsNavigation = 2;
+export 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;
+}

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,
 );

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,
 );

docs/fundamentals/tools/helpers/index.md

@@ -1,3 +1,3 @@
-# Tools >> Helpers
+# Tools >> Helpers ||5
 
 -> go to Overview

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);

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>
 

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);

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>
 

docs/fundamentals/tools/singleton-manager/index.md

@@ -1,3 +1,3 @@
-# Tools >> Singleton Manager ||20
+# Tools >> Singleton Manager ||30
 
 -> go to Overview

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 });
+     });

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.