Merge remote-tracking branch 'origin/develop'

apps/site/keystatic.config.ts

@@ -18,7 +18,7 @@ export default config({
   singletons: {
     url: singleton({
       label: 'URLs',
-      path: 'content/urls/',
+      path: 'src/content/urls/',
       schema: {
         guidelines: fields.url({
           label: 'Master Brand Guidelines',
@@ -30,7 +30,7 @@ export default config({
     }),
     westpacUIInfo: singleton({
       label: 'Westpac UI Info',
-      path: 'content/westpac-ui-info/',
+      path: 'src/content/westpac-ui-info/',
       schema: {
         changelog: fields.url({
           label: 'Changelog link',
@@ -44,7 +44,7 @@ export default config({
   collections: {
     designSystem: collection({
       label: 'Design System',
-      path: 'content/design-system/**/',
+      path: 'src/content/design-system/**/',
       slugField: 'name',
       schema: {
         name: fields.slug({
@@ -130,7 +130,7 @@ export default config({
     }),
     authors: collection({
       label: 'Authors',
-      path: 'content/authors/*',
+      path: 'src/content/authors/*',
       slugField: 'name',
       schema: {
         name: fields.slug({
@@ -147,7 +147,7 @@ export default config({
     }),
     articles: collection({
       label: 'Articles',
-      path: 'content/articles/*',
+      path: 'src/content/articles/*',
       slugField: 'name',
       schema: {
         name: fields.slug({

apps/site/src/app/articles/[...article]/error.tsx

@@ -0,0 +1,24 @@
+'use client'; // Error components must be Client Components
+
+import { useEffect } from 'react';
+
+export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button
+        onClick={
+          // Attempt to recover by trying to re-render the segment
+          () => reset()
+        }
+      >
+        Try again
+      </button>
+    </div>
+  );
+}

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

@@ -10,8 +10,8 @@ export function generateMetadata({ params }: { params: { article: string } }) {
 
 export default async function ArticleServerPage({ params }: { params: { article: string[] } }) {
   const { article: articleParam } = params;
-  const article = await reader.collections.articles.read(articleParam.join('/'));
-  if (!article) return <div>Article not found!</div>;
+  console.log(`articleParam.join('/')`, articleParam.join('/'));
+  const article = await reader.collections.articles.readOrThrow(articleParam.join('/'));
 
   const [articleContent, author] = await Promise.all([
     article.content(),

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

@@ -1,6 +1,5 @@
 import { type ComponentProps } from '@westpac/ui';
 import json from '@westpac/ui/component-type.json';
-import { useMemo } from 'react';
 
 import { reader } from '@/app/reader';
 import { formatComponentSlug } from '@/utils/format';
@@ -17,16 +16,14 @@ export function generateMetadata({ params }: { params: { component: string } })
 export default async function ComponentPage({ params }: { params: { component: string[] } }) {
   const { component } = params;
   const [content, westpacInfo] = await Promise.all([
-    reader.collections.designSystem.read(component.join('/')),
+    reader.collections.designSystem.readOrThrow(component.join('/')),
     reader.singletons.westpacUIInfo.readOrThrow(),
   ]);
   const componentName = component[1]
     .split('-')
     .map(name => `${name[0].toUpperCase()}${name.slice(1)}`)
     .join('');
 
-  if (!content) return <div>Component not found!</div>;
-
   const [designSections, accessibilitySections, accessibilityDemo, code] = await Promise.all([
     Promise.all(
       content.design.map(section => {

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

@@ -0,0 +1,24 @@
+'use client'; // Error components must be Client Components
+
+import { useEffect } from 'react';
+
+export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button
+        onClick={
+          // Attempt to recover by trying to re-render the segment
+          () => reset()
+        }
+      >
+        Try again
+      </button>
+    </div>
+  );
+}