Implement option 3

docs/pages/experiments/docs/custom-components.md

@@ -25,3 +25,13 @@ Easier to write and read, and potentially easier to violate the styles?
  <li>It properly manages focus; moving to the modal content, and keeping it there until the modal is closed.</li>
  <li>Adds the appropriate ARIA roles automatically.</li>
 </ul>
+
+### Approach 3: Custom markdown
+
+<featureList>
+- Manages modal stacking when one-at-a-time just isn't enough.
+- Creates a backdrop, for disabling interaction below the modal.est
+- It disables scrolling of the page content while open.
+- It properly manages focus; moving to the modal content, and keeping it there until the modal is closed.
+- Adds the appropriate ARIA roles automatically.
+</featureList>

packages/markdown/parseMarkdown.js

@@ -188,6 +188,7 @@ function getContents(markdown) {
     .replace(headerRegExp, '') // Remove header information
     .split(/^{{("(?:demo|component)":.*)}}$/gm) // Split markdown into an array, separating demos
     .flatMap((text) => text.split(/^(<codeblock.*?<\/codeblock>)$/gmsu))
+    .flatMap((text) => text.split(/^(<featureList.*?<\/featureList>)$/gmsu))
     .filter((content) => !emptyRegExp.test(content)); // Remove empty lines
   return rep;
 }
@@ -212,23 +213,37 @@ function getDescription(markdown) {
 }
 
 function getCodeblock(content) {
-  if (content.startsWith('<codeblock')) {
-    const storageKey = content.match(/^<codeblock [^>]*storageKey=["|'](\S*)["|'].*>/m)?.[1];
-    const blocks = [...content.matchAll(/^```(\S*) (\S*)\n(.*?)\n```/gmsu)].map(
-      ([, language, tab, code]) => ({ language, tab, code }),
-    );
-
-    const blocksData = blocks.filter(
-      (block) => block.tab !== undefined && !emptyRegExp.test(block.code),
-    );
+  if (!content.startsWith('<codeblock')) {
+    return undefined;
+  }
+  const storageKey = content.match(/^<codeblock [^>]*storageKey=["|'](\S*)["|'].*>/m)?.[1];
+  const blocks = [...content.matchAll(/^```(\S*) (\S*)\n(.*?)\n```/gmsu)].map(
+    ([, language, tab, code]) => ({ language, tab, code }),
+  );
+
+  const blocksData = blocks.filter(
+    (block) => block.tab !== undefined && !emptyRegExp.test(block.code),
+  );
+
+  return {
+    type: 'codeblock',
+    data: blocksData,
+    storageKey,
+  };
+}
 
-    return {
-      type: 'codeblock',
-      data: blocksData,
-      storageKey,
-    };
+function getFeatureList(content) {
+  if (!content.startsWith('<featureList')) {
+    return undefined;
   }
-  return undefined;
+  const lines = content
+    .split('\n')
+    .filter((line) => line.startsWith('- '))
+    .map((line) => line.slice(2));
+
+  return ['<ul class="feature-list">', ...lines.map((line) => `<li>${line}</li>`), '</ul>'].join(
+    '',
+  );
 }
 
 /**
@@ -475,6 +490,7 @@ module.exports = {
   getContents,
   getDescription,
   getCodeblock,
+  getFeatureList,
   getHeaders,
   getTitle,
   renderMarkdown,

packages/markdown/prepareMarkdown.js

@@ -7,6 +7,7 @@ const {
   getContents,
   getDescription,
   getCodeblock,
+  getFeatureList,
   getHeaders,
   getTitle,
 } = require('./parseMarkdown');
@@ -155,13 +156,18 @@ ${headers.hooks
             return null;
           }
         }
-
         const codeblock = getCodeblock(content);
 
         if (codeblock) {
           return codeblock;
         }
 
+        const featureList = getFeatureList(content);
+
+        if (featureList) {
+          return featureList;
+        }
+
         return render(content);
       });