From e5a003dbaf37faf8a859385a8dea36afd42ff308 Mon Sep 17 00:00:00 2001
From: jbranchaud <jbranchaud@gmail.com>
Date: Sun, 13 Oct 2024 11:46:36 -0500
Subject: [PATCH] Add Markdown Files Are Of Type MarkdownInstance as an Astro
 TIL

---
 README.md                                     |  7 ++-
 ...own-files-are-of-type-markdown-instance.md | 53 +++++++++++++++++++
 2 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 astro/markdown-files-are-of-type-markdown-instance.md

diff --git a/README.md b/README.md
index a7f6f07..2741c82 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186).
 
-_1463 TILs and counting..._
+_1464 TILs and counting..._
 
 ---
 
@@ -19,6 +19,7 @@ _1463 TILs and counting..._
 * [Ack](#ack)
 * [Amplify](#amplify)
 * [Ansible](#ansible)
+* [Astro](#astro)
 * [Brew](#brew)
 * [Chrome](#chrome)
 * [Clojure](#clojure)
@@ -98,6 +99,10 @@ _1463 TILs and counting..._
 
 - [Loop Over A List Of Dictionaries](ansible/loop-over-a-list-of-dictionaries.md)
 
+### Astro
+
+- [Markdown Files Are Of Type MarkdownInstance](astro/markdown-files-are-of-type-markdown-instance.md)
+
 ### Brew
 
 - [Configure Brew Environment Variables](brew/configure-brew-environment-variables.md)
diff --git a/astro/markdown-files-are-of-type-markdown-instance.md b/astro/markdown-files-are-of-type-markdown-instance.md
new file mode 100644
index 0000000..8671441
--- /dev/null
+++ b/astro/markdown-files-are-of-type-markdown-instance.md
@@ -0,0 +1,53 @@
+# Markdown Files Are Of Type MarkdownInstance
+
+One of the things Astro excels at is rendering markdown files as HTML pages in
+your site. And at some point we'll want to access a listing of those markdown
+files in order to do something like display a list of them on an index page.
+For that, we'll use
+[`Astro.glob()`](https://docs.astro.build/en/reference/api-reference/#astroglob).
+
+```typescript
+---
+const allPosts = await Astro.glob("../posts/*.md");
+---
+
+<ul>
+  {allPosts.map(post => {
+    return <Post title={post.frontmatter.title} slug={post.frontmatter.slug} />
+  })}
+</ul>
+```
+
+This looks great, but we'll run into a type error on that first line:
+`'allPosts' implicitly has type 'any'`. We need to declare the type
+of these post instances that are being read-in by Astro.
+
+These are of [type
+`MarkdownInstance`](https://docs.astro.build/en/reference/api-reference/#markdown-files).
+That's a generic though, so we need to tell it a bit more about the shape of a
+post.
+
+```typescript
+import type { MarkdownInstance } from "astro";
+
+export type BarePost = {
+  layout: string;
+  title: string;
+  slug: string;
+  tags: string[];
+};
+
+export type Post = MarkdownInstance<BarePost>;
+```
+
+We can then update that first line:
+
+```typescript
+const allPosts: Post[] = await Astro.glob("../posts/*.md");
+```
+
+Alternatively, you can specify the generic on `glob`:
+
+```typescript
+const allPosts = await Astro.glob<BarePost>("../posts/*.md");
+```