From f32aa30f2f0722fb659a22ddc57cdf3bd79a4ab5 Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Fri, 23 May 2025 15:07:50 +0200 Subject: Add blog pages, content and standardlayout --- src/pages/blog/[slug].astro | 67 ++++++++++++++++++++++++++++++++++++ src/pages/blog/index.astro | 48 ++++++++++++++++++++++++++ src/pages/index.astro | 83 ++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 190 insertions(+), 8 deletions(-) create mode 100644 src/pages/blog/[slug].astro create mode 100644 src/pages/blog/index.astro (limited to 'src/pages') diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro new file mode 100644 index 0000000..f42f5c9 --- /dev/null +++ b/src/pages/blog/[slug].astro @@ -0,0 +1,67 @@ +--- +import { getCollection, getEntry } from 'astro:content'; +import StandardLayout from '../../layouts/StandardLayout.astro'; + +// Define the props type +export async function getStaticPaths() { + const blogEntries = await getCollection('blog'); + return blogEntries.map(entry => ({ + params: { slug: entry.slug }, + props: { entry }, + })); +} + +// Get the blog post data +const { entry } = Astro.props; +const { Content } = await entry.render(); + +// Format the publication date +const formattedDate = new Date(entry.data.pubDate).toLocaleDateString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric' +}); +--- + + +
+
+ + + + + Back to Blog + +
+ + {entry.data.image && ( + {entry.data.title} + )} + +

{entry.data.title}

+ +
+ By {entry.data.author} + • + +
+ + {entry.data.tags && entry.data.tags.length > 0 && ( +
+ {entry.data.tags.map(tag => ( + + {tag} + + ))} +
+ )} + +
+ +
+
+ diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro new file mode 100644 index 0000000..76b9f57 --- /dev/null +++ b/src/pages/blog/index.astro @@ -0,0 +1,48 @@ +--- +import StandardLayout from '../../layouts/StandardLayout.astro'; +import { getCollection } from 'astro:content'; + +// Get all blog posts sorted by publication date +const posts = await getCollection('blog'); +posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()); +--- + + +
+

Blog

+ +
+ {posts.map((post) => ( + + ))} +
+ + {posts.length === 0 && ( +
+

No blog posts found. Check back soon!

+
+ )} +
+ diff --git a/src/pages/index.astro b/src/pages/index.astro index 22adfcf..a88712c 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,11 +1,78 @@ --- -import Counter from '../components/Counter'; -import CenteredLayout from '../layouts/CenteredLayout.astro'; +import Counter from "../components/Counter"; +import StandardLayout from "../layouts/StandardLayout.astro"; +import { getCollection } from "astro:content"; + +// Get the latest 3 blog posts +const latestPosts = await getCollection("blog"); +latestPosts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()); +const featuredPosts = latestPosts.slice(0, 3); --- - -
-

Astro

- -
- + +
+
+

+ Welcome to Astro +

+

+ A modern framework for building fast, content-focused websites. +

+
+ +
+
+
+ +
+
+
+

+ Latest Blog Posts +

+ View all posts → +
+ +
+ { + featuredPosts.map((post) => ( + + )) + } +
+
+
+ -- cgit v1.3.1