[No QA] Helpsite: create nested billing folder structure and add articles

.github/scripts/createDocsRoutes.ts

@@ -11,6 +11,7 @@ type Article = {
 type Section = {
     href: string;
     title: string;
+    order?: number;
     articles?: Article[];
     sections?: Section[];
 };
@@ -115,17 +116,39 @@ function getOrderFromArticleFrontMatter(path: string): number | undefined {
     }
 }
 
-/**
- * Build a section from a directory path, with optional parent path for nested href
- */
+function getSectionMeta(sectionPath: string): {title?: string; order?: number} {
+    try {
+        const metaPath = `${sectionPath}/_meta.yml`;
+        if (!fs.existsSync(metaPath)) {
+            return {};
+        }
+        const meta = yaml.load(fs.readFileSync(metaPath, 'utf8')) as Record<string, unknown>;
+        return {
+            title: meta.title as string | undefined,
+            order: meta.order as number | undefined,
+        };
+    } catch {
+        return {};
+    }
+}
+
+function sortSectionsByOrder(sections: Section[]) {
+    sections.sort((a, b) => (a.order ?? Number.POSITIVE_INFINITY) - (b.order ?? Number.POSITIVE_INFINITY));
+}
+
 function buildSection(platformName: string, hub: string, sectionPath: string, parentHref: string): Section {
     const sectionName = sectionPath.split('/').pop() ?? sectionPath;
     const fullPath = `${docsDir}/articles/${platformName}/${hub}/${sectionPath}`;
+    const meta = getSectionMeta(fullPath);
     const articles: Article[] = [];
     const childSections: Section[] = [];
     const href = parentHref ? `${parentHref}/${sectionName}` : sectionName;
 
     for (const entry of fs.readdirSync(fullPath)) {
+        if (entry === '_meta.yml') {
+            continue;
+        }
+
         const entryPath = `${fullPath}/${entry}`;
         if (entry.endsWith('.md')) {
             const order = getOrderFromArticleFrontMatter(entryPath);
@@ -139,9 +162,12 @@ function buildSection(platformName: string, hub: string, sectionPath: string, pa
     // The sort is stable, so articles without an `order` keep their relative position and fall after ordered ones.
     articles.sort((a, b) => (a.order ?? Number.POSITIVE_INFINITY) - (b.order ?? Number.POSITIVE_INFINITY));
 
+    sortSectionsByOrder(childSections);
+
     const section: Section = {
         href,
-        title: toTitleCase(sectionName.replaceAll('-', ' ')),
+        title: meta.title ?? toTitleCase(sectionName.replaceAll('-', ' ')),
+        ...(meta.order !== undefined && {order: meta.order}),
         ...(articles.length > 0 && {articles}),
         ...(childSections.length > 0 && {sections: childSections}),
     };
@@ -174,7 +200,9 @@ function createHubsWithArticles(hubs: string[], platformName: ValueOf<typeof pla
 
         for (const fileOrFolder of fs.readdirSync(basePath)) {
             if (fileOrFolder.endsWith('.md')) {
-                const articleObj = getArticleObj(fileOrFolder);
+                const entryPath = `${basePath}/${fileOrFolder}`;
+                const order = getOrderFromArticleFrontMatter(entryPath);
+                const articleObj = getArticleObj(fileOrFolder, order);
                 pushOrCreateEntry(routeHubs, hub, 'articles', articleObj);
                 continue;
             }
@@ -187,6 +215,7 @@ function createHubsWithArticles(hubs: string[], platformName: ValueOf<typeof pla
         // Add flat section list for nested section page lookup
         const hubObj = routeHubs.find((obj) => obj.href === hub);
         if (hubObj?.sections?.length) {
+            sortSectionsByOrder(hubObj.sections);
             (hubObj as Hub & {flatSections?: Section[]}).flatSections = flattenSections(hubObj.sections);
         }
     }

docs/_data/_routes.yml

@@ -277,7 +277,7 @@ platforms:
         description: Manage profile settings and notifications.
 
       - href: billing-and-subscriptions
-        title: Expensify Billing & Subscriptions
+        title: Billing & Subscriptions
         icon: /assets/images/subscription-annual.svg
         description: Review Expensify's subscription options, plan types, and payment methods.
 

docs/_includes/hub.html

@@ -15,15 +15,15 @@ <h1 class="title">{{ hub.title }}</h1>
 {% assign hubSections = hub.sections | default: emptyItems %}
 
 {% if hub.articles %}
-    {% assign sortedSectionsAndArticles = hubSections | concat: hubArticles | sort: 'title' %}
+    {% assign sortedSectionsAndArticles = hubSections | concat: hubArticles | sort: 'order' %}
 {% else %}
-    {% assign sortedSectionsAndArticles = hubSections | sort: 'title' %}
+    {% assign sortedSectionsAndArticles = hubSections | sort: 'order' %}
 {% endif%}
 
 <section>
     <div class="cards-group">
         {% for item in sortedSectionsAndArticles %}
-            {% if item.articles %}
+            {% if item.articles or item.sections %}
                 {% include section-card.html platform=activePlatform hub=hub.href section=item.href title=item.title %}
             {% else %}
                 {% include article-card.html hub=hub.href href=item.href title=item.title platform=activePlatform %}

docs/_includes/lhn-template.html

@@ -33,10 +33,13 @@
                             <span>{{ hub.title }}</span>
                         </div>
                         <ul class="nested-treeview">
+                            {% assign emptyItems = "" | split: "," %}
+                            {% assign hubArticles = hub.articles | default: emptyItems %}
+                            {% assign hubSections = hub.sections | default: emptyItems %}
                             {% if hub.articles %} 
-                                {% assign sortedSectionsAndArticles = hub.sections | concat: hub.articles | sort: 'title' %} 
+                                {% assign sortedSectionsAndArticles = hubSections | concat: hubArticles | sort: 'order' %}
                             {% else %} 
-                                {% assign sortedSectionsAndArticles = hub.sections | sort: 'title' %} 
+                                {% assign sortedSectionsAndArticles = hubSections | sort: 'order' %} 
                             {% endif%}
                             {% for item in sortedSectionsAndArticles %}
                                 {% if item.articles %}
@@ -151,7 +154,61 @@
                                                 {% endif %}
                                             </ul>
                                         {% else %}
-                                            <a href="{{ item.href }}" class="icon-with-link link">
+                                            <a href="/{{ activePlatform }}/hubs/{{ hub.href }}/{{ item.href }}" class="icon-with-link link">
+                                                <img src="/assets/images/arrow-right.svg" class="base-icon"></img>
+                                                {{ item.title }}
+                                            </a>
+                                        {% endif %}
+                                    </li>
+                                {% elsif item.sections %}
+                                    <li>
+                                        {% assign lhnSectionActive = false %}
+                                        {% if page.url contains item.href %}
+                                            {% assign lhnSectionActive = true %}
+                                        {% endif %}
+                                        {% if lhnSectionActive %}
+                                            <div class="icon-with-link selected">
+                                                <a href="/{{ activePlatform }}/hubs/{{ hub.href }}"><img src="/assets/images/down.svg" class="base-icon"></img></a>
+                                                <span>{{ item.title }}</span>
+                                            </div>
+                                            <ul>
+                                                {% assign lhnSortedSubsections = item.sections | sort: 'order' %}
+                                                {% for subsection in lhnSortedSubsections %}
+                                                    <li>
+                                                        <a href="/{{ activePlatform }}/hubs/{{ hub.href }}/{{ subsection.href }}" class="icon-with-link link">
+                                                            <img src="/assets/images/arrow-right.svg" class="base-icon"></img>
+                                                            {{ subsection.title }}
+                                                        </a>
+                                                        {% if subsection.articles %}
+                                                            <ul>
+                                                                {% for article in subsection.articles %}
+                                                                    {% assign article_href = subsection.href | append: '/' | append: article.href %}
+                                                                    {% include lhn-article-link.html platform=activePlatform hub=hub.href href=article_href title=article.title %}
+                                                                {% endfor %}
+                                                            </ul>
+                                                        {% endif %}
+                                                        {% if subsection.sections %}
+                                                            <ul>
+                                                                {% for subsubsection in subsection.sections %}
+                                                                    <li>
+                                                                        <span class="icon-with-link">{{ subsubsection.title }}</span>
+                                                                        {% if subsubsection.articles %}
+                                                                            <ul>
+                                                                                {% for article in subsubsection.articles %}
+                                                                                    {% assign article_href = subsubsection.href | append: '/' | append: article.href %}
+                                                                                    {% include lhn-article-link.html platform=activePlatform hub=hub.href href=article_href title=article.title %}
+                                                                                {% endfor %}
+                                                                            </ul>
+                                                                        {% endif %}
+                                                                    </li>
+                                                                {% endfor %}
+                                                            </ul>
+                                                        {% endif %}
+                                                    </li>
+                                                {% endfor %}
+                                            </ul>
+                                        {% else %}
+                                            <a href="/{{ activePlatform }}/hubs/{{ hub.href }}/{{ item.href }}" class="icon-with-link link">
                                                 <img src="/assets/images/arrow-right.svg" class="base-icon"></img>
                                                 {{ item.title }}
                                             </a>

docs/_includes/section.html

@@ -17,11 +17,13 @@ <h1 class="title">
 <section>
     <div class="cards-group">
         {% if section.sections %}
-            {% for subsection in section.sections %}
+            {% assign sortedSubsections = section.sections | sort: 'order' %}
+            {% for subsection in sortedSubsections %}
                 {% include section-card.html platform=activePlatform hub=hub.href section=subsection.href title=subsection.title %}
             {% endfor %}
         {% endif %}
-        {% assign sortedArticles = section.articles | default: empty %}
+        {% assign emptyItems = "" | split: "," %}
+        {% assign sortedArticles = section.articles | default: emptyItems %}
         {% for article in sortedArticles %}
             {% assign article_href = section.href | append: '/' | append: article.href %}
             {% include article-card.html hub=hub.href href=article_href title=article.title platform=activePlatform %}