feat: add styles for code block and clean up code (#7)

app/TemplateFrame.tsx

@@ -30,17 +30,11 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
 }));
 
 interface TemplateFrameProps {
-  // showCustomTheme: boolean;
-  // toggleCustomTheme: (theme: boolean) => void;
-  // mode: PaletteMode;
-  // toggleColorMode: () => void;
   supportedCategory: string[];
   children: React.ReactNode;
 }
 
 export default function TemplateFrame({
-  // mode,
-  // toggleColorMode,
   supportedCategory,
   children,
 }: TemplateFrameProps) {
@@ -100,7 +94,7 @@ export default function TemplateFrame({
                   variant="text"
                   color="info"
                   size="small"
-                  href={`/${category}`}
+                  href={`/blogs/${category}`}
                   component="a"
                   key={`${index}-${category}`}
                 >

app/blogs/[category]/[slug]/page.tsx

@@ -6,8 +6,15 @@ import {
   getPostTitle,
 } from "../../../../lib/posts";
 import { PostData } from "../../../../lib/type";
-import './styles.css';
-
+import "./styles.css";
+import * as React from "react";
+import Typography from "@mui/material/Typography";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Link from "@mui/material/Link";
+import Box from "@mui/material/Box";
+import ShowBlogContent from "@/components/ShowBlogContent";
+import GithubIcon from "@mui/icons-material/GitHub";
+import Button from "@mui/material/Button";
 interface Params {
   params: {
     category: string;
@@ -27,9 +34,10 @@ export async function generateStaticParams(): Promise<Params[]> {
 }
 
 export async function generateMetadata({ params }: Params): Promise<Metadata> {
-  const data: string = getPostTitle(params.category, params.slug);
+  const data: string[] = getPostTitle(params.category, params.slug);
   return {
-    title: data,
+    title: data[0],
+    keywords: data[1],
   };
 }
 
@@ -41,10 +49,57 @@ export default async function Post({ params }: Params) {
   );
 
   return (
-    <article>
-      <p>{postData.date}</p>
-      {/* <Typography variant="body2">{postData.title}</Typography> */}
-      <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
-    </article>
+    <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <Box sx={{ display: "flex", justifyContent: "left" }}>
+        <Breadcrumbs aria-label="breadcrumb">
+          <Link underline="hover" color="inherit" href="/">
+            Blogs
+          </Link>
+          <Link
+            underline="hover"
+            color="inherit"
+            href={`/blogs/${params.category}`}
+          >
+            {params.category.charAt(0).toUpperCase() + params.category.slice(1)}
+          </Link>
+          <Typography sx={{ color: "text.primary" }}>
+            {postData.title}
+          </Typography>
+        </Breadcrumbs>
+      </Box>
+
+      <Box sx={{ display: "flex", justifyContent: "center" }}>
+        <Typography
+          variant="h2"
+          sx={{ fontStyle: "oblique", marginTop: "2rem" }}
+        >
+          {postData.title}
+        </Typography>
+      </Box>
+
+      <Box sx={{ display: "flex", justifyContent: "right" }}>
+        <Typography variant="subtitle2" sx={{ fontStyle: "italic" }}>
+          {postData.author} - {postData.date}
+        </Typography>
+      </Box>
+
+      <ShowBlogContent content={postData.contentHtml} />
+
+      <Box
+        sx={{ display: "flex", justifyContent: "left", padding: "1rem 0 0 0" }}
+      >
+        <Button
+          variant="text"
+          size="small"
+          aria-label="There is something wrong with this page?"
+          startIcon={<GithubIcon />}
+          component="a"
+          href={`https://github.com/halng/hi-there/blob/main/posts/${params.category}/${params.slug}.md`}
+          sx={{ display: { xs: "none", sm: "flex" } }}
+        >
+          Edit this page
+        </Button>
+      </Box>
+    </Box>
   );
 }

app/blogs/[category]/[slug]/styles.css

@@ -0,0 +1,4 @@
+
+pre code.hljs {
+    border-radius: 1rem !important ;
+}

app/blogs/[category]/page.tsx

@@ -3,6 +3,31 @@
  * This page only return the blogs category
  */
 
-export default function CategoryPage() {
-  return <h1>GHello</h1>;
+import { getMetadata, getSupportedCategory } from "@/lib/posts";
+import Latest from "@components/Latest";
+import { Metadata } from "next";
+
+interface Params {
+  params: {
+    category: string;
+  };
+}
+export async function generateMetadata({ params }: Params): Promise<Metadata> {
+  return {
+    title: params.category.toUpperCase(),
+  };
+}
+// Generates static paths for each post at build time
+export async function generateStaticParams(): Promise<Params[]> {
+  const paths = getSupportedCategory();
+  return paths.map((path) => ({
+    params: {
+      category: path
+    },
+  }));
+}
+
+export default function CategoryPage({ params }: Params) {
+  const blogMetaData = getMetadata(params.category);
+  return <Latest blogMetaData={blogMetaData} />;
 }

app/layout.tsx

@@ -5,6 +5,7 @@ import Container from "@mui/material/Container";
 import Footer from "@components/Footer";
 import TemplateFrame from "./TemplateFrame";
 import { getSupportedCategory } from "@/lib/posts";
+import "./styles.css";
 
 const inter = localFont({
   src: "./fonts/Inter_28pt-Thin.ttf",

app/page.tsx

@@ -2,6 +2,6 @@ import { getMetadata } from "@/lib/posts";
 import Latest from "@components/Latest";
 
 export default function Home() {
-  const blogMetaData = getMetadata();
+  const blogMetaData = getMetadata(null);
   return <Latest blogMetaData={blogMetaData} />;
 }

app/styles.css

@@ -0,0 +1,3 @@
+a {
+    text-decoration: none !important;
+}

components/Footer.tsx

@@ -6,7 +6,7 @@ import Divider from "@mui/material/Divider";
 import IconButton from "@mui/material/IconButton";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import FacebookIcon from "@mui/icons-material/GitHub";
+import GithubIcon from "@mui/icons-material/GitHub";
 import LinkedInIcon from "@mui/icons-material/LinkedIn";
 
 export default function Footer() {
@@ -72,7 +72,7 @@ export default function Footer() {
               aria-label="GitHub"
               sx={{ alignSelf: "center" }}
             >
-              <FacebookIcon />
+              <GithubIcon />
             </IconButton>
             <IconButton
               color="inherit"

components/Latest.tsx

@@ -4,7 +4,6 @@ import Avatar from '@mui/material/Avatar';
 import AvatarGroup from '@mui/material/AvatarGroup';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid2';
-// import Pagination from '@mui/material/Pagination';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded';