Merge pull request #207 from WestpacGEL/fix/gel-docs-contents

Fix/gel docs contents

apps/site/keystatic.config.ts

@@ -45,7 +45,7 @@ export default config({
   collections: {
     designSystem: collection({
       label: 'Design System',
-      path: 'src/content/design-system/**/',
+      path: 'src/content/design-system/*',
       slugField: 'name',
       schema: {
         name: fields.slug({

apps/site/src/app/articles/[...article]/page.tsx → apps/site/src/app/articles/[slug]/page.tsx

@@ -3,14 +3,14 @@ import { formatComponentSlug } from '@/utils/format';
 
 import { ArticlePage } from './components/article-page/article-page.component';
 
-export function generateMetadata({ params }: { params: { article: string } }) {
-  const { article } = params;
-  return { title: formatComponentSlug(article[article.length - 1]) };
+export function generateMetadata({ params }: { params: { slug: string } }) {
+  const { slug } = params;
+  return { title: formatComponentSlug(slug) };
 }
 
-export default async function ArticleServerPage({ params }: { params: { article: string } }) {
-  const { article: articleParam } = params;
-  const article = await reader.collections.articles.readOrThrow(articleParam);
+export default async function ArticleServerPage({ params }: { params: { slug: string } }) {
+  const { slug } = params;
+  const article = await reader.collections.articles.readOrThrow(slug);
 
   const [articleContent, author] = await Promise.all([
     article.content(),

apps/site/src/app/design-system/[...component]/components/header/header.component.tsx → apps/site/src/app/design-system/components/[slug]/components/header/header.component.tsx

@@ -4,11 +4,10 @@ import { HamburgerMenuIcon } from '@westpac/ui/icon';
 import { useParams, useSearchParams } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 
+import { useSidebar } from '@/app/design-system/my-components';
 import { BrandKey } from '@/app/types/brand.types';
 import { formatComponentSlug } from '@/utils/format';
 
-import { useSidebar } from '../../../components/sidebar/sidebar.context';
-
 import { styles as headerStyles } from './header.styles';
 
 const FIXED_HEADER = 162; // 228 - 66 = height to stick
@@ -18,7 +17,7 @@ export function Header({ className }: { className?: string }) {
   const searchParams = useSearchParams();
   const brand = searchParams.get('brand')?.toLowerCase();
   const params = useParams();
-  const component = formatComponentSlug(params?.component.at(-1) ?? '');
+  const component = formatComponentSlug(params?.slug.toString() || '');
   const styles = headerStyles({ brand: brand as BrandKey, fixed, className });
   const { setOpen } = useSidebar();
 

apps/site/src/app/design-system/[...component]/page.tsx → apps/site/src/app/design-system/components/[slug]/page.tsx

@@ -8,18 +8,18 @@ import { ContentTabs } from './components';
 import { AccessibilitySectionProps } from './components/content-tabs/components/accessibility-content/accessibility-content.types';
 import { DesignSectionProps } from './components/content-tabs/components/design-content/design-content.types';
 
-export function generateMetadata({ params }: { params: { component: string } }) {
-  const { component } = params;
-  return { title: formatComponentSlug(component[component.length - 1]) };
+export function generateMetadata({ params }: { params: { slug: string } }) {
+  const { slug } = params;
+  return { title: formatComponentSlug(slug) };
 }
 
-export default async function ComponentPage({ params }: { params: { component: string[] } }) {
-  const { component } = params;
+export default async function ComponentPage({ params }: { params: { slug: string } }) {
+  const { slug } = params;
   const [content, westpacInfo] = await Promise.all([
-    reader.collections.designSystem.readOrThrow(component.join('/')),
+    reader.collections.designSystem.readOrThrow(slug),
     reader.singletons.westpacUIInfo.readOrThrow(),
   ]);
-  const componentName = component[1]
+  const componentName = slug
     .split('-')
     .map(name => `${name[0].toUpperCase()}${name.slice(1)}`)
     .join('');

apps/site/src/app/design-system/layout.tsx

@@ -1,7 +1,7 @@
 import { reader } from '@/app/reader';
 import { formatNavItems } from '@/utils/format';
 
-import { Sidebar, SidebarContextProvider } from './components';
+import { Sidebar, SidebarContextProvider } from './my-components';
 
 export default async function DesignSystemLayout({ children }: { children: React.ReactNode }) {
   const items = await reader.collections.designSystem.list();

apps/site/src/app/design-system/page.tsx

@@ -17,7 +17,7 @@ import {
   TwitterLogo,
 } from '@/components/logos';
 
-import { Hero, Section, SectionHeading, SectionItem } from './components';
+import { Hero, Section, SectionHeading, SectionItem } from './my-components';
 
 export default function DesignSystemHomePage() {
   return (

apps/site/src/content/design-system/breadcrumb/index.yaml

@@ -0,0 +1 @@
+name: Breadcrumb

apps/site/src/content/design-system/button-dropdown/index.yaml

@@ -0,0 +1 @@
+name: Button-Dropdown

apps/site/src/content/design-system/button-group/index.yaml

@@ -0,0 +1 @@
+name: button-group

apps/site/src/content/design-system/button/index.yaml

@@ -0,0 +1 @@
+name: Button

apps/site/src/content/design-system/checkbox-group/index.yaml

@@ -0,0 +1 @@
+name: checkbox-group

apps/site/src/content/design-system/collapsible/index.yaml

@@ -0,0 +1 @@
+name: Collapsible

apps/site/src/content/design-system/colors/index.yaml

@@ -0,0 +1 @@
+name: Colors

apps/site/src/content/design-system/date-picker/index.yaml

@@ -0,0 +1 @@
+name: Date-Picker

apps/site/src/content/design-system/flexi-cell/index.yaml

@@ -0,0 +1 @@
+name: Flexi-Cell

apps/site/src/content/design-system/icon/index.yaml

@@ -0,0 +1 @@
+name: Icons

apps/site/src/content/design-system/input-field/index.yaml

@@ -0,0 +1 @@
+name: Input-Field

apps/site/src/content/design-system/input/index.yaml

@@ -0,0 +1 @@
+name: Input

apps/site/src/content/design-system/link/index.yaml

@@ -0,0 +1 @@
+name: Link

apps/site/src/content/design-system/list/index.yaml

@@ -0,0 +1 @@
+name: List

apps/site/src/content/design-system/modal/index.yaml

@@ -0,0 +1 @@
+name: Modal

apps/site/src/content/design-system/panel/index.yaml

@@ -0,0 +1 @@
+name: Panel

apps/site/src/content/design-system/progress-bar/index.yaml

@@ -0,0 +1 @@
+name: Progress-Bar

apps/site/src/content/design-system/progress-rope/index.yaml

@@ -0,0 +1 @@
+name: Progress-Rope

apps/site/src/content/design-system/radio-group/index.yaml

@@ -0,0 +1 @@
+name: radio-group

apps/site/src/content/design-system/select/index.yaml

@@ -0,0 +1 @@
+name: Select

apps/site/src/content/design-system/switch/index.yaml

@@ -0,0 +1 @@
+name: Switch

apps/site/src/content/design-system/table/index.yaml

@@ -0,0 +1 @@
+name: Table

apps/site/src/content/design-system/tabs/index.yaml

@@ -0,0 +1 @@
+name: Tabs

apps/site/src/content/design-system/textarea/index.yaml

@@ -0,0 +1 @@
+name: Textarea

apps/site/src/content/design-system/typography/index.yaml

@@ -0,0 +1 @@
+name: Typography

apps/site/src/utils/format.ts

@@ -4,29 +4,10 @@ export function formatComponentSlug(component: string) {
 }
 
 export function formatNavItems(navList: string[]) {
-  const navItems: any[] = [];
-  navList.forEach(path => {
-    const params = path.split('/');
-    let curr = navItems;
-    params.forEach((param, i) => {
-      if (i === params.length - 1) {
-        curr.push({ label: param, path });
-      } else {
-        let exists = false;
-        curr.forEach(item => {
-          if (item.label === param) {
-            exists = true;
-            curr = item.children;
-          }
-        });
-
-        if (!exists) {
-          const newNode = { label: param, children: [] };
-          curr.push(newNode);
-          curr = newNode.children;
-        }
-      }
-    });
+  return navList.map(component => {
+    return {
+      label: component,
+      path: `components/${component}`,
+    };
   });
-  return navItems;
 }