Merge pull request #903 from CodeForAfrica/chore/techlogblog_mdxjs

@/techlabblog mdxjs

apps/charterafrica/src/components/Articles/Articles.snap.js

@@ -64,7 +64,7 @@ exports[`<Articles /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-auto css-11ydr13-MuiGrid-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary  css-a46zki-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary css-a46zki-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
             >
               <div
                 aria-controls=":r0:"

apps/civicsignalblog/package.json

@@ -60,7 +60,6 @@
     "dotenv": "catalog:",
     "express": "catalog:",
     "fast-equals": "catalog:",
-    "gray-matter": "catalog:",
     "js-yaml": "catalog:",
     "jsdom": "catalog:",
     "next": "catalog:",

apps/codeforafrica/package.json

@@ -57,7 +57,6 @@
     "dotenv": "catalog:",
     "express": "catalog:",
     "fast-equals": "catalog:",
-    "gray-matter": "catalog:",
     "js-yaml": "catalog:",
     "jsdom": "catalog:",
     "next": "catalog:",

apps/techlabblog/app/[slug]/page.tsx

@@ -1,11 +1,25 @@
-import { Box } from "@mui/material";
+import { Section } from "@commons-ui/core";
 
-import Article from "@/techlabblog/components/Article";
-import { ArticleProps, getContent } from "@/techlabblog/lib/data";
+import PostHeader from "@/techlabblog/components/PostHeader";
+import { getPost } from "@/techlabblog/lib/data";
 
 export default async function Page({ params }: { params: { slug: string } }) {
-  const post: ArticleProps = await getContent(params.slug);
+  const postModule = await getPost(params.slug);
 
-  // TODO: Check that the post does exist, return 404 otherwise
-  return <Article {...post} />;
+  if (!(postModule && postModule.frontmatter)) {
+    // TODO(kilemensi): 404
+    return null;
+  }
+  const { default: PostContent, frontmatter } = postModule;
+  return (
+    <Section
+      sx={{
+        px: { xs: 2.5, sm: 0 },
+        py: { xs: 2.5, sm: 5 },
+      }}
+    >
+      <PostHeader {...frontmatter} />
+      <PostContent />
+    </Section>
+  );
 }

apps/techlabblog/app/layout.tsx

@@ -20,9 +20,14 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const settings = await getSettings();
+  if (!settings) {
+    // TODO(kilemensi): log to sentry
+    return null;
+  }
   const { analytics, connect, primaryNavigation, secondaryNavigation } =
-    await getSettings();
-  // TODO: blurWidth/blurHeight https://github.com/vercel/next.js/issues/56511
+    settings;
+  // TODO(kilemensi): blurWidth/blurHeight https://github.com/vercel/next.js/issues/56511
   const { blurWidth, blurHeight, ...logoProps } = logoLight;
   const logo = {
     ...logoProps,
@@ -39,9 +44,9 @@ export default async function RootLayout({
             <NavBar {...primaryNavigation} logo={logo} />
             {children}
             <Footer
-              copyright={secondaryNavigation.copyright}
               connect={connect}
-              secondaryMenus={secondaryNavigation.menus}
+              copyright={secondaryNavigation?.copyright}
+              secondaryMenus={secondaryNavigation?.menus}
             />
           </ThemeProvider>
         </AppRouterCacheProvider>

apps/techlabblog/app/page.tsx

@@ -1,10 +1,10 @@
 import { Section } from "@commons-ui/core";
 
-import ArticleList from "@/techlabblog/components/ArticleList";
-import { getAllContents } from "@/techlabblog/lib/data";
+import PostList from "@/techlabblog/components/PostList";
+import { getPosts } from "@/techlabblog/lib/data";
 
-export default async function index() {
-  const posts = await getAllContents();
+async function Page() {
+  const posts = await getPosts();
 
   return (
     <Section
@@ -13,7 +13,9 @@ export default async function index() {
         py: { xs: 2.5, sm: 5 },
       }}
     >
-      <ArticleList articles={posts} />
+      <PostList posts={posts} />
     </Section>
   );
 }
+
+export default Page;