blog routing and about page

astro.config.mjs

@@ -1,4 +1,4 @@
 import { defineConfig } from 'astro/config';
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({ output: 'server' });

src/pages/about.md

@@ -5,6 +5,8 @@ title: 'About'
 
 ## Hello World!
 
+![](/portrait.png)
+
 My name is Graham Hall, a web developer from Rhode Island.
 
 When I'm not writing code, I'm usually enjoying one of my other hobbies; video games, music, hiking, photography, art, the list goes on...

src/pages/index.astro

@@ -4,7 +4,8 @@ import { Markup } from 'astro-remote';
 
 import Layout from '../layouts/Layout.astro';
 
-const response = await fetch(`https://api.cosmicjs.com/v2/buckets/${import.meta.env.BUCKET_SLUG}/objects?pretty=true&query=%7B%22type%22%3A%22blog-posts%22%7D&read_key=${import.meta.env.BUCKET_READ_KEY}&limit=20&props=slug,title,content`)
+const response = await fetch(`https://api.cosmicjs.com/v2/buckets/${import.meta.env.BUCKET_SLUG}/objects?pretty=true&query=%7B%22type%22%3A%22blog-posts%22%7D&read_key=${import.meta.env.BUCKET_READ_KEY}&limit=10`)
+
 const posts = await response.json();
 
 ---
@@ -12,11 +13,13 @@ const posts = await response.json();
 <Layout title="Blog">
 	<div>
 		{posts.objects.map(post => (
-			<article >
-				<div style={{ display: 'flex', justifyContent: 'space-between' }}>
+			<article>
+				<div style={{display: 'flex', justifyContent: 'space-between'}}>
 					<h4>{post.title}</h4>
+					<h5>{`🗓️ ${format(new Date(post.published_at), 'MMM do, y')}`}</h5>
 				</div>
-				<Markup content={post.content} />
+				<Markup content={`<p>${post.content.split('</p>')[0]}`} />
+				<a href={`/posts/${post.slug}`}>Read More</a>
 			</article>
 		))}
 	</div>

src/pages/posts/[slug].astro

@@ -0,0 +1,23 @@
+---
+import { format } from 'date-fns';
+import { Markup } from 'astro-remote';
+
+import Layout from '../../layouts/Layout.astro';
+
+const { slug } = Astro.params;
+
+const response = await fetch(`https://api.cosmicjs.com/v2/buckets/${import.meta.env.BUCKET_SLUG}/objects?pretty=true&query=%7B%22type%22%3A%22blog-posts%22%7D&read_key=${import.meta.env.BUCKET_READ_KEY}&limit=20&slug=${slug}`)
+
+const posts = await response.json();
+const post = posts.objects[0];
+
+---
+<Layout title="Blog">
+	<article>
+		<div style={{display: 'flex', justifyContent: 'space-between'}}>
+			<h4>{post.title}</h4>
+			<h5>{`🗓️ ${format(new Date(post.published_at), 'MMM do, y')}`}</h5>
+		</div>
+		<Markup content={post.content} />
+	</article>
+</Layout>