feat: generate links for the sidebar from contentful (#2003)

packages/website/components/Sidebar.tsx

@@ -11,7 +11,8 @@ import {
 } from './SidebarSection';
 import { sortByTitle } from '../utils/sortByTitle';
 
-const sidebarLinks = require('../utils/sidebarLinks.json');
+const mdxSidebarLinks = require('../utils/sidebarLinks.json');
+const contentfulSidebarLinks = require('../utils/contentfulSidebarLinks.json');
 
 const styles = {
   nav: css({
@@ -31,56 +32,56 @@ interface Props {
 }
 
 const components: Array<SidebarSectionType | SidebarLinkType> = [
-  ...sidebarLinks.unassigned,
+  ...mdxSidebarLinks.unassigned,
 
   {
     type: 'section',
-    links: sidebarLinks.animationComponents,
+    links: mdxSidebarLinks.animationComponents,
     title: 'Animation Components',
   },
   {
     type: 'section',
-    links: sidebarLinks.layoutComponents,
+    links: mdxSidebarLinks.layoutComponents,
     title: 'Layout Components',
   },
   {
     type: 'section',
-    links: sidebarLinks.typographyComponents,
+    links: mdxSidebarLinks.typographyComponents,
     title: 'Typography Components',
   },
   {
     type: 'section',
-    links: sidebarLinks.buttonComponents,
+    links: mdxSidebarLinks.buttonComponents,
     title: 'Button Components',
   },
   {
     type: 'section',
-    links: sidebarLinks.formComponents,
+    links: mdxSidebarLinks.formComponents,
     title: 'Form Components',
   },
   {
     type: 'section',
-    links: sidebarLinks.dateComponents,
+    links: mdxSidebarLinks.dateComponents,
     title: 'Date Components',
   },
   {
     type: 'section',
-    links: sidebarLinks.modalComponents,
+    links: mdxSidebarLinks.modalComponents,
     title: 'Modal Components',
   },
   {
     type: 'section',
-    links: sidebarLinks.cardComponents,
+    links: mdxSidebarLinks.cardComponents,
     title: 'Card Components',
   },
   {
     type: 'section',
-    links: sidebarLinks.skeletonComponents,
+    links: mdxSidebarLinks.skeletonComponents,
     title: 'Skeleton Components',
   },
   {
     type: 'section',
-    links: sidebarLinks.deprecatedComponents,
+    links: mdxSidebarLinks.deprecatedComponents,
     title: 'Deprecated V3 Components',
   },
 ];
@@ -118,6 +119,11 @@ export function Sidebar({
                   'https://www.contentful.com/developers/docs/extensibility/app-framework/',
                 type: 'link',
               },
+              {
+                title: 'What’s new',
+                slug: '/whats-new',
+                type: 'link',
+              },
             ]}
             currentPage={currentPage}
           />
@@ -147,34 +153,16 @@ export function Sidebar({
 
       {activeSection === WEBSITE_SECTION.GUIDELINES && (
         <SidebarSection
-          links={[
-            {
-              title: 'Accessibility',
-              slug: '/guidelines/accessibility',
-              type: 'link',
-            },
-            {
-              title: 'Keyboard shortcuts',
-              slug: '/guidelines/keyboard-shortcuts',
-              type: 'link',
-            },
-            {
-              title: 'Grammar and rules',
-              slug: '/guidelines/grammar-and-rules',
-              type: 'link',
-            },
-            {
-              title: 'UX writing principles',
-              slug: '/guidelines/ux-writing-principles',
-              type: 'link',
-            },
-          ]}
+          links={contentfulSidebarLinks.guidelines}
           currentPage={currentPage}
         />
       )}
 
       {activeSection === WEBSITE_SECTION.TOKENS && (
-        <SidebarSection links={sidebarLinks.tokens} currentPage={currentPage} />
+        <SidebarSection
+          links={mdxSidebarLinks.tokens}
+          currentPage={currentPage}
+        />
       )}
 
       {activeSection === WEBSITE_SECTION.COMPONENTS && (
@@ -192,12 +180,12 @@ export function Sidebar({
           <SidebarSection links={componentsSorted} currentPage={currentPage} />
           <SidebarSection
             title="Utils"
-            links={sidebarLinks.utils}
+            links={mdxSidebarLinks.utils}
             currentPage={currentPage}
           />
           <SidebarSection
             title="Integrations"
-            links={sidebarLinks.integrations}
+            links={mdxSidebarLinks.integrations}
             currentPage={currentPage}
           />
         </>

packages/website/content/changelog.mdx

@@ -1,7 +1,7 @@
 ---
 title: What's new
 slug: '/whats-new'
-section: 'intro'
+section: 'introduction'
 ---
 
 The Changelog gives an overview of the changes we've made to Forma 36

packages/website/lib/api.ts

@@ -1,3 +1,5 @@
+import fs from 'fs';
+
 const ARTICLE_GRAPHQL_FIELDS = `
 sys {
   id
@@ -90,5 +92,29 @@ export async function getAllArticles(preview = false) {
     }`,
     preview,
   );
-  return extractArticleEntries(entries);
+
+  const articleEntries = extractArticleEntries(entries);
+
+  const sidebarLinks = articleEntries
+    .sort((a, b) => (a.title < b.title ? -1 : 1))
+    .reduce((acc, path) => {
+      const category = path.kbAppCategory?.slug ?? 'unassigned';
+
+      const item = {
+        title: path.title,
+        slug: `/${path.kbAppCategory.slug}/${path.slug}`,
+      };
+
+      if (acc[category]) {
+        return { ...acc, [category]: [...acc[category], item] };
+      }
+
+      return { ...acc, [category]: [item] };
+    }, {});
+
+  // create a JSON file with sidebar links for pages that come from Contentful
+  const data = JSON.stringify(sidebarLinks, null, 2);
+  fs.writeFileSync('utils/contentfulSidebarLinks.json', data);
+
+  return articleEntries;
 }

packages/website/utils/content.ts

@@ -113,7 +113,6 @@ async function getMdxPaths() {
     return {
       params: {
         slug: sanitizedSlug,
-        source: 'mdx',
       },
     };
   });

packages/website/utils/contentfulSidebarLinks.json

@@ -0,0 +1,46 @@
+{
+  "guidelines": [
+    {
+      "title": "Accessibility",
+      "slug": "/guidelines/accessibility"
+    },
+    {
+      "title": "Adding icons",
+      "slug": "/guidelines/adding-icons"
+    },
+    {
+      "title": "Grammar and rules",
+      "slug": "/guidelines/grammar-and-rules"
+    },
+    {
+      "title": "Keyboard Shortcuts",
+      "slug": "/guidelines/keyboard-shortcuts"
+    },
+    {
+      "title": "UX Writing Principles",
+      "slug": "/guidelines/ux-writing-principles"
+    }
+  ],
+  "introduction": [
+    {
+      "title": "Contributing to Forma 36",
+      "slug": "/introduction/contributing"
+    },
+    {
+      "title": "FAQ",
+      "slug": "/introduction/v3-faq"
+    },
+    {
+      "title": "Getting started",
+      "slug": "/introduction/getting-started"
+    },
+    {
+      "title": "Migration Guide",
+      "slug": "/introduction/migration-v3-to-v4"
+    },
+    {
+      "title": "Version 3 maintenance plan",
+      "slug": "/introduction/maintenance-plan"
+    }
+  ]
+}

packages/website/utils/sidebarLinks.json

@@ -282,7 +282,7 @@
       "slug": "/components/stack/"
     }
   ],
-  "intro": [
+  "introduction": [
     {
       "title": "What's new",
       "slug": "/whats-new"