summaryrefslogtreecommitdiff
path: root/src/pages
diff options
context:
space:
mode:
Diffstat (limited to 'src/pages')
-rw-r--r--src/pages/blog/[slug].astro67
-rw-r--r--src/pages/blog/index.astro48
-rw-r--r--src/pages/index.astro83
3 files changed, 190 insertions, 8 deletions
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'
+});
+---
+
+<StandardLayout title={entry.data.title} description={entry.data.description}>
+ <article class="max-w-3xl mx-auto">
+ <div class="mb-8">
+ <a href="/blog" class="text-blue-600 hover:text-blue-800 flex items-center">
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
+ <path fill-rule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
+ </svg>
+ Back to Blog
+ </a>
+ </div>
+
+ {entry.data.image && (
+ <img
+ src={entry.data.image}
+ alt={entry.data.title}
+ class="w-full h-64 md:h-96 object-cover rounded-lg shadow-md mb-8"
+ />
+ )}
+
+ <h1 class="text-4xl font-bold text-gray-900 mb-4">{entry.data.title}</h1>
+
+ <div class="flex items-center text-gray-600 mb-8">
+ <span>By {entry.data.author}</span>
+ <span class="mx-2">•</span>
+ <time datetime={entry.data.pubDate.toISOString()}>{formattedDate}</time>
+ </div>
+
+ {entry.data.tags && entry.data.tags.length > 0 && (
+ <div class="flex flex-wrap gap-2 mb-8">
+ {entry.data.tags.map(tag => (
+ <span class="bg-gray-100 text-gray-800 text-sm font-medium px-3 py-1 rounded-full">
+ {tag}
+ </span>
+ ))}
+ </div>
+ )}
+
+ <div class="prose prose-lg max-w-none">
+ <Content />
+ </div>
+ </article>
+</StandardLayout>
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());
+---
+
+<StandardLayout title="Blog | Astro Site" description="Read our latest blog posts">
+ <div class="space-y-8">
+ <h1 class="text-3xl font-bold text-gray-900">Blog</h1>
+
+ <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+ {posts.map((post) => (
+ <article class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
+ <a href={`/blog/${post.slug}`} class="block">
+ {post.data.image && (
+ <img
+ src={post.data.image}
+ alt={post.data.title}
+ class="w-full h-48 object-cover"
+ />
+ )}
+ <div class="p-6">
+ <h2 class="text-xl font-semibold text-gray-900 mb-2">{post.data.title}</h2>
+ <p class="text-sm text-gray-500 mb-3">
+ {new Date(post.data.pubDate).toLocaleDateString('en-US', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric'
+ })}
+ </p>
+ <p class="text-gray-700">{post.data.description}</p>
+ <p class="mt-4 text-blue-600 font-medium">Read more →</p>
+ </div>
+ </a>
+ </article>
+ ))}
+ </div>
+
+ {posts.length === 0 && (
+ <div class="bg-white rounded-lg shadow p-6 text-center">
+ <p class="text-gray-700">No blog posts found. Check back soon!</p>
+ </div>
+ )}
+ </div>
+</StandardLayout>
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);
---
-<CenteredLayout title="Astro">
- <div class="text-center">
- <h1 class="text-4xl font-bold mb-6">Astro</h1>
- <Counter client:load />
- </div>
-</CenteredLayout>
+<StandardLayout title="Astro - Home">
+ <section class="py-12">
+ <div class="text-center mb-12">
+ <h1 class="text-5xl font-bold text-gray-900 mb-4">
+ Welcome to Astro
+ </h1>
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
+ A modern framework for building fast, content-focused websites.
+ </p>
+ <div class="mt-8">
+ <Counter client:load />
+ </div>
+ </div>
+ </section>
+
+ <section
+ class="py-12 bg-gray-50 -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8"
+ >
+ <div class="max-w-7xl mx-auto">
+ <div class="flex justify-between items-center mb-8">
+ <h2 class="text-3xl font-bold text-gray-900">
+ Latest Blog Posts
+ </h2>
+ <a
+ href="/blog"
+ class="text-blue-600 hover:text-blue-800 font-medium"
+ >View all posts →</a
+ >
+ </div>
+
+ <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+ {
+ featuredPosts.map((post) => (
+ <article class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
+ <a href={`/blog/${post.slug}`} class="block">
+ {post.data.image && (
+ <img
+ src={post.data.image}
+ alt={post.data.title}
+ class="w-full h-48 object-cover"
+ />
+ )}
+ <div class="p-6">
+ <h3 class="text-xl font-semibold text-gray-900 mb-2">
+ {post.data.title}
+ </h3>
+ <p class="text-sm text-gray-500 mb-3">
+ {new Date(
+ post.data.pubDate,
+ ).toLocaleDateString("en-US", {
+ year: "numeric",
+ month: "long",
+ day: "numeric",
+ })}
+ </p>
+ <p class="text-gray-700">
+ {post.data.description}
+ </p>
+ </div>
+ </a>
+ </article>
+ ))
+ }
+ </div>
+ </div>
+ </section>
+</StandardLayout>
generated by cgit v1.3.1 (git 2.54.0) at 2026-08-15 13:27:59 +0000