52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import { allPosts } from "content-collections";
|
|
import Image from "next/image";
|
|
import { IconRss } from "@tabler/icons-react";
|
|
import { Metadata } from "next";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Techaro Blog",
|
|
description: "What have we been up to?",
|
|
};
|
|
|
|
export default function Posts() {
|
|
return (
|
|
<>
|
|
<div className="bg-gray-100 min-h-screen">
|
|
<header className="bg-white shadow">
|
|
<div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
|
<h1 className="text-3xl font-bold text-gray-900">Blog</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="max-w-7xl sm:px-6 lg:px-8 mx-auto mt-4">
|
|
<h2 className="text-3xl font-medium">All posts</h2>
|
|
<a href="/blog.rss">
|
|
<IconRss size={16} className="inline-block" /> Follow on RSS!
|
|
</a>
|
|
</div>
|
|
|
|
<div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8 grid grid-cols-1 4xl:grid-cols-3">
|
|
{allPosts.map((post) => (
|
|
<div key={post._meta.path}>
|
|
<a href={`/blog/${post._meta.path}`}>
|
|
<h3 className="text-xl font-bold">{post.title}</h3>
|
|
{" -- "}
|
|
<p>{post.summary}</p>
|
|
{post.image && (
|
|
<Image
|
|
alt={post.imageDesc!}
|
|
src={post.imageURL!}
|
|
width={1280}
|
|
height={720}
|
|
className="max-w-md"
|
|
/>
|
|
)}
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|