/posts/flex-responsive-footer
Using flex-grow to create a "spacer" div to solve the problem of a footer displaying halfway down a page when you don't have enough content to fill the entire height of the screen.
2021-07-31
Read more/posts/global-css-in-astro
A comparison of what happened (spoiler alert -- it got weird!) when I tried to import styles/global.css into my layout.astro file.
2021-07-30
Read more/posts/react-context-post
An example of React context in Astro, using a currency example
2021-07-18
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>