Merge pull request #880 from CodeForAfrica/fix/commons_ui_core_client

Mark @/commons-ui/core components as client only for now

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

@@ -1,12 +1,11 @@
-import { ArticleContent } from "@/engineeringblog/components/Article";
 import { Box } from "@mui/material";
-import { getContent } from "@/engineeringblog/utils";
+
+import Article from "@/engineeringblog/components/Article";
+import { ArticleProps, getContent } from "@/engineeringblog/utils";
 
 export default async function Page({ params }: { params: { slug: string } }) {
-  const post = await getContent(params.slug);
-  return (
-    <Box component="article">
-      <ArticleContent article={post} />
-    </Box>
-  );
+  const post: ArticleProps = await getContent(params.slug);
+
+  // TODO: Check that the post does exist, return 404 otherwise
+  return <Article {...post} />;
 }

apps/engineeringblog/app/layout.tsx

@@ -5,7 +5,6 @@ import type { Metadata } from "next";
 import NavBar from "@/engineeringblog/components/NavBar";
 import theme from "@/engineeringblog/theme";
 
-// TODO: blurWidth/blueHeight https://github.com/vercel/next.js/issues/56511
 import logoLight from "@/engineeringblog/assets/images/logo-light.png";
 
 export const metadata: Metadata = {
@@ -19,8 +18,10 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  // TODO: blurWidth/blurHeight https://github.com/vercel/next.js/issues/56511
+  const { blurWidth, blurHeight, ...logoProps } = logoLight;
   const logo = {
-    ...logoLight,
+    ...logoProps,
     alt: "Technology | Code for Africa",
     title: "Technology",
   };

apps/engineeringblog/app/page.tsx

@@ -1,23 +1,19 @@
-import { Container } from "@mui/material";
-import { ArticleList } from "@/engineeringblog/components/Article";
+import { Section } from "@commons-ui/core";
+
+import ArticleList from "@/engineeringblog/components/ArticleList";
 import { getAllContents } from "@/engineeringblog/utils";
-import NoPosts from "@/engineeringblog/components/NoPosts";
 
 export default async function index() {
   const posts = await getAllContents();
 
-  if (!posts.length) {
-    return <NoPosts />;
-  }
-
   return (
-    <Container
+    <Section
       sx={{
         px: { xs: 2.5, sm: 0 },
         py: { xs: 2.5, sm: 5 },
       }}
     >
       <ArticleList articles={posts} />
-    </Container>
+    </Section>
   );
 }

apps/engineeringblog/components/Article/Article.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Section } from "@commons-ui/core";
+import React from "react";
+
+import Markdown from "@/engineeringblog/components/Markdown";
+import type { ArticleSxProps } from "./ArticleSxProps";
+import ArticleHeader from "./ArticleHeader";
+
+const Article = React.forwardRef(function Article(
+  props: ArticleSxProps,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const { content, excerpt, publishedDate, sx, title } = props;
+
+  return (
+    <Section
+      component="article"
+      sx={{
+        px: { xs: 2.5, sm: 0 },
+        py: 2.5,
+        maxWidth: {
+          sm: "648px",
+          md: "912px",
+        },
+        ...sx,
+      }}
+      ref={ref}
+    >
+      <ArticleHeader
+        excerpt={excerpt}
+        publishedDate={publishedDate}
+        title={title}
+      />
+      <Markdown markdown={content} />
+    </Section>
+  );
+});
+
+export default Article;

apps/engineeringblog/components/Article/ArticleHeader.tsx

@@ -1,37 +1,32 @@
 "use client";
 
-import { Section } from "@commons-ui/core";
 import { Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
 import React from "react";
 
+import type { ArticleSxProps } from "./ArticleSxProps";
+
+type ArticleHeaderSxProps = Omit<
+  ArticleSxProps,
+  "content" | "featuredImage" | "slug"
+>;
+
+const ArticleHeaderRoot = styled("header")({});
+
 const ArticleHeader = React.forwardRef(function ArticleHeader(
-  {
-    date,
-    excerpt,
-    sx,
-    title,
-  }: { date: string; excerpt: string; sx: any; title: string },
-  ref,
+  props: ArticleHeaderSxProps,
+  ref: React.Ref<HTMLDivElement>,
 ) {
+  const { publishedDate, excerpt, sx, title } = props;
+
   return (
-    <Section
-      component="header"
-      sx={{
-        px: { xs: 2.5, sm: 0 },
-        maxWidth: {
-          sm: "648px",
-          md: "912px",
-        },
-        ...sx,
-      }}
-      ref={ref}
-    >
+    <ArticleHeaderRoot sx={sx} ref={ref}>
       <Typography
         component="div"
         variant="body2"
         sx={{ mt: { xs: 2.5, md: 7.5 } }}
       >
-        {date}
+        {publishedDate}
       </Typography>
       <Typography component="div" variant="h1" sx={{ mt: { xs: 2.5, md: 5 } }}>
         {title}
@@ -47,7 +42,7 @@ const ArticleHeader = React.forwardRef(function ArticleHeader(
       >
         {excerpt}
       </Typography>
-    </Section>
+    </ArticleHeaderRoot>
   );
 });
 

apps/engineeringblog/components/Article/ArticleSxProps.tsx

@@ -0,0 +1,9 @@
+import { SxProps } from "@mui/material/styles";
+
+import { ArticleProps } from "@/engineeringblog/utils";
+
+interface ArticleSxProps extends ArticleProps {
+  sx?: SxProps;
+}
+
+export type { ArticleSxProps };

apps/engineeringblog/components/Article/index.ts

@@ -1,5 +1,5 @@
-import ArticleList from "./ArticleList";
-import ArticleCard from "./ArticleCard";
-import ArticleContent from "./ArticleContent";
+import Article from "./Article";
+import ArticleHeader from "./ArticleHeader";
 
-export { ArticleList, ArticleCard, ArticleContent };
+export { ArticleHeader };
+export default Article;

apps/engineeringblog/components/Article/ArticleCard.tsx → apps/engineeringblog/components/ArticleList/ArticleCard.tsx

@@ -1,6 +1,6 @@
 "use client";
+
 import { StyledLink } from "@/commons-ui/next/Link";
-import { ArticleWithoutContent } from "@/engineeringblog/utils";
 import {
   Card,
   CardActionArea,
@@ -10,8 +10,10 @@ import {
 } from "@mui/material";
 import React from "react";
 
+import { ArticleWithoutContentProps } from "@/engineeringblog/utils";
+
 const ArticleCard = React.forwardRef(function ArticleCard(
-  { title, publishDate, featuredImage, slug }: ArticleWithoutContent,
+  { title, publishedDate, featuredImage, slug }: ArticleWithoutContentProps,
   ref: React.Ref<HTMLDivElement>,
 ) {
   return (
@@ -29,6 +31,7 @@ const ArticleCard = React.forwardRef(function ArticleCard(
         border: "1px solid #DAD5D5",
         filter: "drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.1))",
       }}
+      ref={ref}
     >
       <CardActionArea component={slug ? StyledLink : "div"} href={slug}>
         <CardMedia
@@ -46,7 +49,7 @@ const ArticleCard = React.forwardRef(function ArticleCard(
             sx={{ color: "#9F9494", display: "block", mt: 2 }}
             variant="caption"
           >
-            {publishDate}
+            {publishedDate}
           </Typography>
         </CardContent>
       </CardActionArea>

apps/engineeringblog/components/Article/ArticleList.tsx → apps/engineeringblog/components/ArticleList/ArticleList.tsx

@@ -3,17 +3,21 @@
 import { Section } from "@commons-ui/core";
 import { Grid } from "@mui/material";
 import React from "react";
+
+import { ArticleWithoutContentProps } from "@/engineeringblog/utils";
 import ArticleCard from "./ArticleCard";
-import { ArticleWithoutContent } from "@/engineeringblog/utils";
 
 const ArticleList = React.forwardRef(function ArtilceList(
   {
     articles,
   }: {
-    articles: ArticleWithoutContent[];
+    articles: ArticleWithoutContentProps[];
   },
   ref: React.Ref<HTMLDivElement>,
 ) {
+  if (!articles?.length) {
+    return null;
+  }
   return (
     <Section ref={ref}>
       <Grid
@@ -22,7 +26,7 @@ const ArticleList = React.forwardRef(function ArtilceList(
         columnSpacing={{ xs: 0, sm: "18px", lg: "28px" }}
       >
         {articles?.map((article) => (
-          <Grid item xs={12} sm={4} key={article.slug}>
+          <Grid item xs={12} sm={6} md={4} key={article.slug}>
             <ArticleCard {...article} />
           </Grid>
         ))}

apps/engineeringblog/components/ArticleList/index.ts

@@ -0,0 +1,5 @@
+import ArticleCard from "./ArticleCard";
+import ArticleList from "./ArticleList";
+
+export { ArticleCard };
+export default ArticleList;

apps/engineeringblog/content/exploring-next-js.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Exploring Next.js: The React Framework for Production"
-publishDate: "2020-01-01"
-description: "Next.js has rapidly become one of the most popular frameworks for building modern web applications. Created by Vercel, it extends the capabilities of React, providing developers with a powerful toolkit to build fast, scalable, and SEO-friendly websites with ease."
+publishedDate: "2020-01-01"
+excerpt: "Next.js has rapidly become one of the most popular frameworks for building modern web applications. Created by Vercel, it extends the capabilities of React, providing developers with a powerful toolkit to build fast, scalable, and SEO-friendly websites with ease."
 featuredImage: "/blog/exploring-next-js.png"
 ---
 

apps/engineeringblog/content/javascript-generators.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Understanding JavaScript Generators: A Deep Dive"
-publishDate: "2020-02-02"
-description: "JavaScript is a versatile language, and one of its lesser-known yet powerful features is Generators. Introduced in ECMAScript 6 (ES6), Generators provide a unique way to handle functions, offering more control over the execution flow. In this blog, we'll explore what generators are, how they work, and practical use cases."
+publishedDate: "2020-02-02"
+excerpt: "JavaScript is a versatile language, and one of its lesser-known yet powerful features is Generators. Introduced in ECMAScript 6 (ES6), Generators provide a unique way to handle functions, offering more control over the execution flow. In this blog, we'll explore what generators are, how they work, and practical use cases."
 featuredImage: "/blog/javascript-generators.jpeg"
 ---
 
@@ -11,7 +11,7 @@ Generators are a special type of function in JavaScript that can be paused and r
 
 ### Syntax
 
-A generator function is defined using the `function* `syntax, where the asterisk (\*) distinguishes it from a regular function. Inside the function body, the yield keyword is used to pause the function and return a value.
+A generator function is defined using the `function*`syntax, where the asterisk (\*) distinguishes it from a regular function. Inside the function body, the yield keyword is used to pause the function and return a value.
 
 ```javascript
 function* myGenerator() {

apps/engineeringblog/content/mastering-docker.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Mastering Docker: A Comprehensive Guide for Developers"
-publishDate: "2020-03-03"
-description: "Docker has revolutionized the way we build, ship, and run applications. It simplifies software development by creating isolated environments, known as containers, that bundle an application and its dependencies together. This ensures consistency across multiple environments and reduces the 'it works on my machine' problem. In this article, we'll dive deep into Docker, exploring its architecture, benefits, common use cases, and best practices."
+publishedDate: "2020-03-03"
+excerpt: "Docker has revolutionized the way we build, ship, and run applications. It simplifies software development by creating isolated environments, known as containers, that bundle an application and its dependencies together. This ensures consistency across multiple environments and reduces the 'it works on my machine' problem. In this article, we'll dive deep into Docker, exploring its architecture, benefits, common use cases, and best practices."
 featuredImage: "/blog/mastering-docker.png"
 ---