Resolving failing pipeline

src/app/blog/[slug]/page.tsx

@@ -1,18 +1,22 @@
+import { Box, Typography } from '@mui/material';
 import { getPostBySlug, getAllSlugs } from '../../../lib/posts';
 import { notFound } from 'next/navigation';
-type Params = { slug: string };
+
+type Props = { params: Promise<{ slug: string }> };
+
 export async function generateStaticParams() {
   const slugs = getAllSlugs();
-  return slugs.map(slug => ({ slug }));
+  return slugs.map(slug => ({ slug: slug.params?.slug }));
 }
-export default async function BlogPost({ params }: { params: Params }) {
-  const post = await getPostBySlug(params.slug);
+export default async function BlogPost({ params }: Props) {
+  const { slug } = await params;
+  const post = await getPostBySlug(slug);
   if (!post) return notFound();
   return (
-    <article>
-      <h1>{post.title}</h1>
-      <p >{post.date}</p>
-      <div dangerouslySetInnerHTML={{ __html: post.contentHtml }} />
-    </article>
+    <Box component={'article'}>
+      <Typography variant='h2'>{post.title}</Typography>
+      <Typography variant='body2'>{post.date}</Typography>
+      <Box dangerouslySetInnerHTML={{ __html: post.contentHtml }} />
+    </Box>
   );
 }

src/app/blog/page.tsx

@@ -1,4 +1,3 @@
-
 import { getAllPosts } from '../../lib/posts';
 import ArticleIcon from '@mui/icons-material/Article';
 import { Avatar, Box, Link, List, ListItem, ListItemAvatar, ListItemButton, ListItemText, Typography } from '@mui/material';

src/app/not-found.tsx

@@ -1,7 +1,9 @@
+import { Box, Typography } from "@mui/material";
+
 export default function Home() {
   return (
-    <div>
-      <h1>Nothing to see here</h1>
-    </div>
+    <Box textAlign={'center'} alignContent={'center'} color='error.main'>
+      <Typography variant="body1">Nothing to see here</Typography>
+    </Box>
   );
 }

src/components/Header/Header.tsx

@@ -42,8 +42,8 @@ export default function Header() {
     </Box>
   )
   return (
-    <Box sx={{ flexGrow: 1 }}>
-      <AppBar position="fixed" sx={{ backgroundColor: 'primary.main', opacity: '80%' }}>
+    <>
+      <AppBar position="static" sx={{ backgroundColor: 'primary.main', opacity: '80%' }}>
         <Toolbar>
           <IconButton
             size='large'
@@ -57,6 +57,7 @@ export default function Header() {
           <Typography variant="h6" padding={2} color='background.paper'>
             TCG
           </Typography>
+          <Box sx={{ flexGrow: 1 }} />
           <ModeSwitch />
         </Toolbar>
       </AppBar>
@@ -68,6 +69,6 @@ export default function Header() {
       >
         {drawer}
       </Drawer>
-    </Box>
+    </>
   )
 }

src/components/ModeSwitch/ModeSwitch.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import FormControl from '@mui/material/FormControl';
 import { useColorMode } from '@/theme/ThemeContext';
-import { styled, Switch } from '@mui/material';
+import { Box, styled, Switch } from '@mui/material';
 
 const MaterialUISwitch = styled(Switch)(({ theme }) => ({
   width: 62,
@@ -63,9 +63,11 @@ export default function ModeSwitch() {
     return null;
   }
   return (
+    <Box>
       <FormControl fullWidth>
         {/*  eslint-disable-next-line @typescript-eslint/no-unused-vars */}
-      <MaterialUISwitch aria-labelledby='mode-select-label' value={mode} onChange={(_e) => toggleColorMode()} />
+        <MaterialUISwitch checked={mode === 'dark'} onChange={(_e) => toggleColorMode()} />
       </FormControl>
+    </Box>
   );
 }

src/lib/posts.ts

@@ -1,4 +1,3 @@
-// lib/posts.ts
 import fs from 'fs';
 import path from 'path';
 import matter from 'gray-matter';
@@ -30,6 +29,9 @@ export function getAllPosts() {
 
 export async function getPostBySlug(slug: string) {
   const fullPath = path.join(postsDirectory, `${slug}.md`);
+  if (!fs.existsSync(fullPath)) {
+    throw new Error(`Post not found: ${slug}`);
+  }
   const fileContents = fs.readFileSync(fullPath, 'utf8');
 
   const { data, content } = matter(fileContents);
@@ -45,7 +47,7 @@ export async function getPostBySlug(slug: string) {
   };
 }
 
-export const getAllSlugs = (): Array<{ params: { slug: string } }> => {
+export const getAllSlugs = () => {
   return fs.readdirSync(postsDirectory).map((fileName) => ({
     params: { slug: fileName.replace(/\.md$/, '') },
   }));

src/posts/first-post.md

@@ -5,6 +5,6 @@ slug: 'first-post'
 excerpt: 'This is an excerpt from the first post.'
 ---
 
-# My First Post
+# First Heading
 
 Welcome to my blog post written in **Markdown**.