diff options
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/404.tsx | 2 | ||||
| -rw-r--r-- | src/pages/Blog.tsx | 75 | ||||
| -rw-r--r-- | src/pages/Post.tsx | 6 |
3 files changed, 64 insertions, 19 deletions
diff --git a/src/pages/404.tsx b/src/pages/404.tsx index d9eed89..8ca9968 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -14,7 +14,7 @@ export default function NotFound() { return ( <> - <h1>404 - Not found</h1> + <h1 className="text-2xl font-semibold pt-4">404 - Not found</h1> <img src="/images/404.webp" className="rounded-lg" /> </> ); diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx index c950a23..6a5c22c 100644 --- a/src/pages/Blog.tsx +++ b/src/pages/Blog.tsx @@ -1,4 +1,12 @@ -import Entry from "../components/Entry"; +import { ArrowRight } from "lucide-react"; +import { + Card, + CardContent, + CardHeader, + CardTitle, + CardDescription, +} from "@/components/ui/card"; +import Gallery from "@/components/Gallery"; interface Meta { slug: string; @@ -8,6 +16,14 @@ interface Meta { cover?: string; } +const images =[ + { src: "/images/3ds.webp", alt: "Nintendo 3DS", id: 1 }, + { src: "/images/esp32.webp", alt: "ESP 32", id: 2 }, + { src: "/images/setup.webp", alt: "Setup", id: 4 }, + { src: "/images/ocarinaoftime.webp", alt: "Ocarina of Time", id: 6 }, + { src: "/images/hellsparadise.webp", alt: "Hells paradise", id: 7 } +] + const postFiles = import.meta.glob("../blog/*.md", { eager: true }) as Record< string, { attributes: Omit<Meta, "slug"> } @@ -25,21 +41,50 @@ const posts: Meta[] = Object.entries(postFiles) export default function Blog() { return ( <> - <title>߸ projects</title> - <h1>Blog</h1> - <div className="grid grid-cols-2 gap-4 [grid-auto-rows:1fr]"> - - {posts.map((post) => ( - <Entry - title={post.title} - excerpt={post.excerpt} - cover={post.cover} - href={`/blog/${post.slug}`} - date={post.date} - /> - ))} - </div> + <title>Blog</title> + <main className="container mx-auto py-12"> + <h1 className="text-3xl font-semibold mb-4"> + Blog Posts + </h1> + <div className="grid gap-6 md:grid-cols-2 lg:gap-8"> + {posts.map((post) => ( + <Card className="bg-secondary border border-border p-0" key={post.slug}> + <CardHeader className="p-0"> + <a + href={`/blog/${post.slug}`} + className="block rounded-t-xl overflow-hidden" + > + <img + src={post.cover} + alt={post.title} + className="h-48 w-full object-cover object-center" + style={{ marginTop: 0, paddingTop: 0 }} + /> + </a> + </CardHeader> + <CardContent className="pb-4 px-6"> + <CardTitle className="text-lg font-semibold hover:underline md:text-xl mb-2"> + <a href={`/blog/${post.slug}`}>{post.title}</a> + </CardTitle> + <CardDescription className="mb-4">{post.excerpt}</CardDescription> + <a + href={`/blog/${post.slug}`} + className="inline-flex items-center text-foreground font-medium hover:underline text-sm" + > + Read more + <ArrowRight className="ml-2 size-4" /> + </a> + </CardContent> + </Card> + ))} + </div> + <section className="mt-12"> + <h2 className="text-2xl font-semibold mb-6">Some images</h2> + <Gallery images={images} /> + </section> + + </main> </> ); } diff --git a/src/pages/Post.tsx b/src/pages/Post.tsx index 76396ae..43ffe5e 100644 --- a/src/pages/Post.tsx +++ b/src/pages/Post.tsx @@ -39,9 +39,9 @@ export default function Post() { /> )} - <h1>{meta.title}</h1> - <p className="text-sm text-zinc-500 mb-8">{formDate.format(new Date(meta.date))}</p> - <div className="post"> + <h1 className="text-2xl font-bold mb-4">{meta.title}</h1> + <p className="text-sm text-muted-foreground mb-8">{formDate.format(new Date(meta.date))}</p> + <div className="prose prose-neutral prose-xl max-w-none prose-img:mx-auto prose-img:w-1/2 prose-img:rounded-lg prose-img:shadow-lg dark:prose-invert"> <Content /> </div> </> |