Recent Blog Posts

Thinking in Astro, Coming from React

Astro sites allow you to *use* React, but they *aren't* React, themselves. Understanding the differences between React and Astro can help you get started more quickly, so here are some thoughts on how to think like an Astro-naut!

2021-11-12

Read more

Local environment variables -- without the local environment

I make use of APIs for accessing both my eBird and Flickr data, but each of these require authenticated access with a secret key. Here's how I can use environment variables while developing on my Chromebook in Gitpod, and deploying to production in Netlify without a local environment in which to store them!

2021-10-19

Read more

Getting started with React components in Astro? Check these things!

Yes, you can write and render your React components in your Astro page. But remember, Astro *isn't* React, and you might be getting error messages when you *totally know* your React component should work. It's not complicated to establish the Astro-React relationship, but you might not be used to doing these things. . .

2021-10-13

Read more

Astro is a learner's paradise!

One of Astro's selling points has been that you can bring your own mix-and-match components... but I didn't really get the power of that as a *learner* until just now, listening to Fred K. Schott interviewed on devtools.fm

2021-09-30

Read more

See full post archive ...


The Code For This Page:

This 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>
      <a href={post.url}><h3>{post.title}</h3></a>
      <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>