ft/Engineering Blog: Render a blog

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

@@ -0,0 +1,12 @@
+import { ArticleContent } from "@/engineeringblog/components/Article";
+import { Box } from "@mui/material";
+import { getBlogPost } from "@/engineeringblog/utils";
+
+export default async function Page({ params }: { params: { slug: string } }) {
+  const post = await getBlogPost(params.slug);
+  return (
+    <Box component="article">
+      <ArticleContent article={post} />
+    </Box>
+  );
+}

apps/engineeringblog/app/page.tsx

@@ -1,9 +1,23 @@
-import { Box, Container } from "@mui/material";
+import { Container } from "@mui/material";
+import { ArticleList } from "@/engineeringblog/components/Article";
+import { getAllPosts } from "@/engineeringblog/utils";
+import Empty from "@/engineeringblog/components/Empty";
+
+export default async function index() {
+  const posts = await getAllPosts();
+
+  if (!posts.length) {
+    return <Empty />;
+  }
 
-export default function index() {
   return (
-    <Container>
-      <Box minHeight="1000px">Homepage</Box>
+    <Container
+      sx={{
+        px: { xs: 2.5, sm: 0 },
+        py: { xs: 2.5, sm: 5 },
+      }}
+    >
+      <ArticleList articles={posts} />
     </Container>
   );
 }

apps/engineeringblog/components/Article/ArticleCard.tsx

@@ -0,0 +1,62 @@
+import { ArticleWithoutContent } from "@/engineeringblog/utils";
+import {
+  Card,
+  CardActionArea,
+  CardContent,
+  CardMedia,
+  Typography,
+} from "@mui/material";
+import React from "react";
+
+const ArticleCard = React.forwardRef(function ArticleCard(
+  {
+    article,
+  }: {
+    article: ArticleWithoutContent;
+  },
+  ref: React.Ref<HTMLDivElement>,
+) {
+  return (
+    <Card
+      elevation={0}
+      square={true}
+      variant="outlined"
+      sx={{
+        "&:hover": {
+          border: `1px solid "#ED1C24"`,
+          img: {
+            filter: "none",
+          },
+        },
+        border: "1px solid #DAD5D5",
+        filter: "drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.1))",
+      }}
+    >
+      <CardActionArea
+        component={article.slug ? "a" : "div"}
+        href={article.slug}
+      >
+        <CardMedia
+          component="img"
+          src={article.featuredImage}
+          sx={{
+            height: "217.64px",
+            filter:
+              "contrast(60%) sepia(100%) hue-rotate(190deg) saturate(500%)",
+          }}
+        />
+        <CardContent>
+          <Typography variant="subtitle1">{article.title}</Typography>
+          <Typography
+            sx={{ color: "#9F9494", display: "block", mt: 2 }}
+            variant="caption"
+          >
+            {article.date}
+          </Typography>
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  );
+});
+
+export default ArticleCard;

apps/engineeringblog/components/Article/ArticleContent.tsx

@@ -0,0 +1,51 @@
+"use client";
+import { Section } from "@commons-ui/core";
+import React from "react";
+import { Figure } from "@commons-ui/next";
+import { Box } from "@mui/material";
+import ArticleHeader from "./ArticleHeader";
+import { Article } from "@/engineeringblog/utils";
+import Markdown from "@/engineeringblog/components/Markdown";
+const ArticleContent = React.forwardRef(function ArticleContent(
+  {
+    article,
+  }: {
+    article: Article;
+  },
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const { title, description, featuredImage, date, content } = article;
+
+  return (
+    <Box ref={ref}>
+      <Figure
+        ImageProps={{
+          alt: title,
+          sx: { objectFit: "cover" },
+          src: featuredImage,
+        }}
+        sx={{
+          width: "100%",
+          height: { xs: "163px", md: "600px" },
+        }}
+      />
+      <ArticleHeader date={date} excerpt={description} title={title} sx={{}} />
+      <Section
+        component="header"
+        sx={{
+          px: { xs: 2.5, sm: 0 },
+          py: 2.5,
+          maxWidth: {
+            sm: "648px",
+            md: "912px",
+          },
+        }}
+        ref={ref}
+      >
+        <Markdown markdown={content} />
+      </Section>
+    </Box>
+  );
+});
+
+export default ArticleContent;

apps/engineeringblog/components/Article/ArticleHeader.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { Section } from "@commons-ui/core";
+import { Typography } from "@mui/material";
+import React from "react";
+
+const ArticleHeader = React.forwardRef(function ArticleHeader(
+  {
+    date,
+    excerpt,
+    sx,
+    title,
+  }: { date: string; excerpt: string; sx: any; title: string },
+  ref,
+) {
+  return (
+    <Section
+      component="header"
+      sx={{
+        px: { xs: 2.5, sm: 0 },
+        maxWidth: {
+          sm: "648px",
+          md: "912px",
+        },
+        ...sx,
+      }}
+      ref={ref}
+    >
+      <Typography
+        component="div"
+        variant="body2"
+        sx={{ mt: { xs: 2.5, md: 7.5 } }}
+      >
+        {date}
+      </Typography>
+      <Typography component="div" variant="h1" sx={{ mt: { xs: 2.5, md: 5 } }}>
+        {title}
+      </Typography>
+      <Typography
+        component="div"
+        variant="body1"
+        sx={{
+          color: "primary.main",
+          mt: { xs: 2.5, md: 5 },
+          typography: { md: "subheading" },
+        }}
+      >
+        {excerpt}
+      </Typography>
+    </Section>
+  );
+});
+
+export default ArticleHeader;

apps/engineeringblog/components/Article/ArticleList.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { Section } from "@commons-ui/core";
+import { Grid } from "@mui/material";
+import React from "react";
+import ArticleCard from "./ArticleCard";
+import { ArticleWithoutContent } from "@/engineeringblog/utils";
+
+const ArticleList = React.forwardRef(function ArtilceList(
+  {
+    articles,
+  }: {
+    articles: ArticleWithoutContent[];
+  },
+  ref: React.Ref<HTMLDivElement>,
+) {
+  return (
+    <Section ref={ref}>
+      <Grid
+        container
+        rowSpacing={{ xs: "28px", md: 5 }}
+        columnSpacing={{ xs: 0, sm: "18px", lg: "28px" }}
+      >
+        {articles?.map((article) => (
+          <Grid item xs={12} sm={4} key={article.slug}>
+            <ArticleCard article={article} />
+          </Grid>
+        ))}
+      </Grid>
+    </Section>
+  );
+});
+
+export default ArticleList;

apps/engineeringblog/components/Article/index.ts

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

apps/engineeringblog/components/Empty/Empty.tsx

@@ -0,0 +1,73 @@
+"use client";
+import { Section } from "@commons-ui/core";
+import React from "react";
+import bg from "@/engineeringblog/assets/images/1920x668px bg - 2 2.png";
+import { alpha, Box, Typography } from "@mui/material";
+
+const Empty = React.forwardRef(function Empty() {
+  return (
+    <Box
+      sx={(theme) => ({
+        py: { xs: 7.5, md: 10, lg: 12.5 },
+        display: "flex",
+        justifyContent: "center",
+        width: "100%",
+        position: "relative",
+        backgroundColor: "palette.background.main",
+        backgroundImage: `url('${bg.src}')`,
+        backgroundPosition: "top left",
+        "&:before": {
+          content: '""',
+          top: 0,
+          left: 0,
+          position: "absolute",
+          height: "100%",
+          width: "100%",
+          background: `linear-gradient(to right, 'palette.background.main', transparent 30%)`,
+          [theme.breakpoints.up("sm")]: {
+            background: `linear-gradient(to right, 'palette.background.main' 20%, transparent 30%)`,
+          },
+          [theme.breakpoints.up("md")]: {
+            background: `linear-gradient(to right, ${
+              theme.palette.background.default
+            } 30%, transparent 40%, transparent 95%, ${alpha(
+              theme.palette.background.default,
+              0.7,
+            )} 98%)`,
+          },
+          [theme.breakpoints.up("lg")]: {
+            background: `linear-gradient(to right, ${theme.palette.background.default} 30%, transparent 40%, transparent 95%, ${theme.palette.background.default} 99%)`,
+          },
+          [theme.breakpoints.up("xl")]: {
+            background: `linear-gradient(to right, ${theme.palette.background.default} 35%, transparent 45%, transparent 80%, ${theme.palette.background.default} 90%)`,
+          },
+        },
+      })}
+    >
+      <Section
+        sx={{
+          maxWidth: {
+            sm: "648px",
+            md: "912px",
+          },
+          px: { xs: 2.5, sm: 0 },
+          zIndex: 1,
+        }}
+      >
+        <Typography
+          sx={{
+            paddingBottom: 2.5,
+          }}
+          variant="h1"
+        >
+          Whoops! No articles found.
+        </Typography>
+        <Typography variant="body2">
+          We are working on creating more content for you. Stay tuned!
+        </Typography>
+      </Section>
+    </Box>
+  );
+});
+
+export default Empty;

apps/engineeringblog/components/Empty/index.ts

@@ -0,0 +1,3 @@
+import Empty from "./Empty";
+
+export default Empty;