Since interactive CodePen embedded workspaces are sometimes better, and more accessible ways to blog about code, I thought I'd extract the patterns in the HTML and practice making a little Astro component!
2021-09-16
Read moreI'd been using a lot of components in my Astro blog, but I realized that they were almost all *React* components, because that's what I know. So, I wanted to try reproducing some functionality by replacing a React component with a corresponding Astro component.
2021-09-09
Read moreA misleading error message that might steer you down the wrong path...
2021-09-04
Read moreThis is src/pages/blog.astro which is generated from markdown files located in src/pages/posts/ using:
---
let allPosts = Astro.fetchContent('./posts/*.md');
allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
Astro.fetchContent('src/pages/posts/*.md')
---
<div>
{allPosts.slice(0, 3).map((post) => (
<article>
<h1>{post.title}</h1>
<p>{post.url}</p>
<p>{post.description}</p>
<p>{new Date(post.date).toISOString().slice(0, 10)}</p>
<a href={post.url}>Read more</a>
</article>
))}
</div>