✨ Posts

app/posts/[id]/page.tsx

@@ -0,0 +1,39 @@
+import { Box, Card, CardContent, CardMedia, Divider, Typography } from "@mui/material";
+import { getSinglePost } from "@/content/posts";
+import Image from "next/image";
+import PostContent from "@/components/posts/PostContent";
+
+export default function PostDetailPage({ params }: { params: { id: string } }) {
+  const post = getSinglePost(params.id);
+
+  return (
+    <Card>
+      {
+        post.thumbnail &&
+        <CardMedia sx={{ height: 360, position: "relative" }} title={post.title}>
+          <Image
+            fill
+            src={post.thumbnail}
+            alt={post.title}
+            style={{ objectFit: "cover" }}
+          />
+        </CardMedia>
+      }
+
+      <CardContent sx={{ paddingX: 5, paddingY: 3 }}>
+        <Box>
+          <Typography gutterBottom variant="h5" component="h1">
+            {post.title}
+          </Typography>
+          <Typography color="text.secondary" variant="body2">
+            {post.description ?? "No description yet."}
+          </Typography>
+        </Box>
+        <Divider sx={{ my: 5 }} />
+        <Box component="article" sx={{ minWidth: 0 }}>
+          <PostContent content={post.content ?? ""} />
+        </Box>
+      </CardContent>
+    </Card>
+  );
+}

app/posts/layout.tsx

@@ -0,0 +1,14 @@
+import { Box, Container } from "@mui/material";
+import { ReactNode } from "react";
+
+export default function PostLayout({children}: Readonly<{
+  children: ReactNode;
+}>) {
+  return (
+    <Container sx={{ display: "flex", justifyContent: "center", gap: 4, py: 4 }}>
+      <Box sx={{ flexGrow: 1, maxWidth: 720 }}>
+        {children}
+      </Box>
+    </Container>
+  )
+}

app/posts/page.tsx

@@ -0,0 +1,40 @@
+import { Button, Card, CardActions, CardContent, CardMedia, Typography } from "@mui/material";
+import { getSortedPosts } from "@/content/posts";
+import Image from "next/image";
+import Link from "next/link";
+
+export default function PostList() {
+  const posts = getSortedPosts();
+
+  return (
+    posts.map((post) => (
+      <Card key={post.id} sx={{ width: "100%" }}>
+        {
+          post.thumbnail &&
+          <CardMedia sx={{ height: 160, position: "relative" }} title={post.title}>
+            <Image
+              fill
+              src={post.thumbnail}
+              alt={post.title}
+              style={{ objectFit: "cover" }}
+            />
+          </CardMedia>
+        }
+
+        <CardContent sx={{ paddingX: 5, paddingY: 3 }}>
+          <Typography gutterBottom variant="h5" component="h2">
+            {post.title}
+          </Typography>
+          <Typography variant="body2" color="text.secondary">
+            {post.description ?? "No description yet."}
+          </Typography>
+        </CardContent>
+        <CardActions sx={{ paddingX: 4, paddingBottom: 2 }}>
+          <Link href={`/posts/${post.id}`} passHref>
+            <Button>Read more</Button>
+          </Link>
+        </CardActions>
+      </Card>
+    ))
+  );
+}