Improve sidebar subheadings, add more pages

.metalsmith/markdownRenderer.js

@@ -24,7 +24,11 @@ markdownRenderer.heading = function (text, level) {
       break;
   }
   const slug = slugify(text);
-  return `
+  return level === 1
+    ? `<h${level} class="tna-heading ${headingSize}">
+  ${text}
+</h${level}>`
+    : `
   <h${level} id="${slug}" class="tna-heading ${headingSize} tna-heading--no-link-arrow">
     ${text} <a href="#${slug}" aria-hidden="true"><i class="fa-solid fa-link"></i></a>
   </h${level}>`;

.metalsmith/nunjucksOptions.js

@@ -182,14 +182,47 @@ const nunjucksOptions = {
     jsonDump: function (data) {
       return JSON.stringify(data, null, 2);
     },
+    camelToSpace: function (data) {
+      return data.replace(/([a-z]+)([A-Z])/, "$1 $2").toLowerCase();
+    },
     headingsList: function (content) {
-      const regex = /<h[1-6] id="([\w\-]+)"[^>]+>[\s\n]*([\w\s]+)[\s\n]*</gm;
+      const regex = /<h([1-6]) id="([\w\-]+)"[^>]+>[\s\n]*([\w\s]+)[\s\n]*</gm;
       let headings = [];
       let tmp;
       while ((tmp = regex.exec(content)) !== null) {
-        headings.push({ title: tmp[2], href: tmp[1] });
+        headings.push({ title: tmp[3], href: tmp[2], level: tmp[1] });
       }
-      return headings;
+      const groupHeadings = (index, grouping) => {
+        if (index < headings.length) {
+          const nextHeading = headings[index];
+          if (grouping.length) {
+            const prevHeading = grouping.slice().pop();
+            try {
+              if (nextHeading.level > prevHeading.level) {
+                prevHeading.children = prevHeading.children || [];
+                return groupHeadings(index, prevHeading.children);
+              } else if (nextHeading.level == prevHeading.level) {
+                grouping.push({ ...nextHeading });
+                return groupHeadings(++index, grouping);
+              } else {
+                throw { index, heading: nextHeading };
+              }
+            } catch (higherHeading) {
+              if (higherHeading.heading.level == prevHeading.level) {
+                grouping.push({ ...higherHeading.heading });
+                return groupHeadings(++higherHeading.index, grouping);
+              } else {
+                throw higherHeading;
+              }
+            }
+          } else {
+            grouping.push({ ...nextHeading });
+            groupHeadings(++index, grouping);
+          }
+        }
+        return grouping;
+      };
+      return groupHeadings(0, []);
     },
   },
 };

layouts/collection-page.njk

@@ -16,13 +16,13 @@
 
   <div class="tna-container">
     <main class="tna-column tna-column--width-3-4 tna-column--width-2-3-medium tna-column--full-small tna-column--full-tiny {{ mainClasses }} tna-section" id="main-content" role="main">
-      {% if group|capitalize == title %}
+      {% if group|camelToSpace|capitalize == title|capitalize %}
       <h1 class="tna-heading tna-heading--xl">
         {{ title }}
       </h1>
       {% else %}
       <hgroup class="tna-hgroup tna-hgroup--xl">
-        <p class="tna-hgroup__supertitle">{{ group|capitalize }}</p>
+        <p class="tna-hgroup__supertitle">{{ group|camelToSpace|capitalize }}</p>
         <h1 class="tna-hgroup__title">{{ title }}</h1>
       </hgroup>
       {% endif %}
@@ -41,30 +41,53 @@
     </main>
     <nav id="{{ group }}-list" class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--full-small tna-column--full-tiny tna-section" role="navigation" aria-label="{{ title }} navigation">
       <h2 class="tna-heading tna-heading--l tna-visually-hidden tna-!--visually-hidden">All {{ group }}</h2>
-      <ul class="tna-ds-sidebar">
-      {% for component in collections[group] %}
-        {% if component.path == path %}
+      <ol class="tna-ds-sidebar">
+      {% for item in collections[group] %}
+        {% if item.path == path %}
         <li class="tna-ds-sidebar__item tna-ds-sidebar__item--current">
-          <a href="/design-system/{{ component.path }}" class="tna-ds-sidebar__link">{{ component.title }}</a>
+          <a href="/design-system/{{ item.path }}" class="tna-ds-sidebar__link">{{ item.title }}</a>
           {% if headings %}
-          <ul class="tna-ds-sidebar__sections">
+          {# TODO: Make a marco for this recursion #}
+          <ol class="tna-ds-sidebar__sections">
             {%- for heading in headings %}
             <li class="tna-ds-sidebar__section">
               <a href="#{{ heading.href }}" class="tna-ds-sidebar__section-link">
                 {{ heading.title }}
               </a>
+              {# {%- if heading.children %}
+              <ol class="tna-ds-sidebar__sections">
+                {%- for child in heading.children %}
+                <li class="tna-ds-sidebar__section">
+                  <a href="#{{ child.href }}" class="tna-ds-sidebar__section-link">
+                    {{ child.title }}
+                  </a>
+                  {%- if child.children %}
+                  <ol class="tna-ds-sidebar__sections">
+                    {%- for childChild in child.children %}
+                    <li class="tna-ds-sidebar__section">
+                      <a href="#{{ childChild.href }}" class="tna-ds-sidebar__section-link">
+                        {{ childChild.title }}
+                      </a>
+                    </li>
+                  {%- endfor %}
+                  </ol>
+                  {%- endif %}
+                </li>
+              {%- endfor %}
+              </ol>
+              {%- endif %} #}
             </li>
             {%- endfor %}
-          </ul>
+          </ol>
           {% endif %}
         </li>
         {% else %}
         <li class="tna-ds-sidebar__item">
-          <a href="/design-system/{{ component.path }}" class="tna-ds-sidebar__link">{{ component.title }}</a>
+          <a href="/design-system/{{ item.path }}" class="tna-ds-sidebar__link">{{ item.title }}</a>
         </li>
         {% endif %}
       {% endfor %}
-      </ul>
+      </ol>
     </nav>
   </div>
 {% endblock %}

lib/index.scss

@@ -28,11 +28,13 @@ $code-background: #f1ece9;
 
 .tna-ds {
   &-sidebar {
+    // max-height: 100vh;
     margin: 0;
     padding: 0;
 
     position: sticky;
-    top: 0;
+    top: 1rem;
+    // overflow: auto;
 
     list-style: none;
 
@@ -69,7 +71,7 @@ $code-background: #f1ece9;
     }
 
     &__sections {
-      padding-left: 1.5rem;
+      padding-left: 1.25rem;
 
       @include typography.relative-font-size(16);
       @include typography.main-font-weight;
@@ -191,7 +193,8 @@ $code-background: #f1ece9;
   }
 }
 
-p {
+p,
+li {
   code {
     color: colour.brand-colour("maroon");
 

src/components/footer/index.md

@@ -8,5 +8,5 @@ The footer component is for...
 
 {% from "_example.njk" import example %}
 
-{{ example({ group: "components", item: "footer", example: "default", html: true, nunjucks: true, open: false }) }}
+{{ example({ group: "components", item: "footer", example: "default", html: true, nunjucks: true, open: false, size: "xl" }) }}
 

src/content/dates/index.md

@@ -0,0 +1,18 @@
+---
+layout: collection-page.njk
+title: Dates
+group: content
+---
+
+## Formats in text
+
+- Monday, 16th October 2023
+- 16th October 2023
+- October 2023
+- 2023
+
+## Formats in data
+
+- `2023-10-16`
+- `2023-10`
+- `2023`

src/get-started/index.md

@@ -1,7 +1,8 @@
 ---
-layout: simple.njk
+layout: collection-page.njk
 title: Get started
+group: getStarted
 order: 2
 ---
 
-# Welcome
+## Welcome

src/get-started/prototyping/index.md

@@ -0,0 +1,7 @@
+---
+layout: collection-page.njk
+title: Prototyping
+group: getStarted
+---
+
+## Start