Building MDX GitHub Embeds with Astro
Learn how to easily create MDX GitHub embeds using Astro in this step-by-step tutorial. Enhance your blog posts with dynamic GitHub content for a seamless and interactive reading experience. Here’s how to build an MDX GitHub embed with Astro!
Here’s an outline of the steps needed to build an MDX GitHub embed with Astro:
- Create a
<GhRepo />Astro component
- Use the component in an MDX file
- Cache data to sqlite with Prisma and sqlite
- Deploy to Netlify
1. Create a
<GhRepo /> Astro component
Astro components are a great way to create reusable components and share them across your application. In this case, we’ll create a
<GhRepo /> component that uses Ocotokit to pull repo datat from the GitHub API and display it in a card.
It will look something like this:
The all-batteries-included GitHub SDK for Browsers, Node.js, and Deno.
Note, I’m using TailwindCSS, and emoji, and an SVG icon component that I created. You can use whatever you want to style your component.
2. Use the component in an MDX file
To use the
<GhRepo /> component in a MDX file, we will define it as a reusable component in the blog post layout’s Astro file.
Thanks to Stefan Imhoff (@kogakure) for the tip on twitter!
I highly recommend you check out Astro’s content collections guide to learn more about how to build type-safe markdown content.
Now, you can call the
<GhRepo /> component in your markdown file, making sure to include the repo prop we defined.
3. Cache data to sqlite with Prisma and sqlite
Next, we’ll want to create a Prisma model and service to cache the data from the GitHub API to sqlite. This will allow us to make fewer API calls and speed up our application.
You can learn more about how to use Prisma with sqlite in this guide.
Then, we’ll update the
GhRepo component logic to handle the API calls and caching.
A couple of things to notice here:
- Using an
upsertallows us to update the repo if it already exists, or create it if it doesn’t.
- A simple conditional check allows us to only call the GitHub API if the repo doesn’t exist in the database, or if it hasn’t been updated in the last week.
4. Deploy to Netlify
Finally, we can deploy the application to Netlify. It’s important to configure your Netlify configuration to run prisma’s migrate command before building the Astro app.
That’s how you can build an MDX GitHub Embed with Astro, Prisma, and sqlite! We created a
<GhRepo /> Astro component and styled it with TailwindCSS, pulled the data from the GitHu API using Octokit, cached it to local sqlite with Prisma, and deployed it to Netlify.
All the code can be found on the pull request from the live stream.
Thanks for reading! There are more Astro posts on the way, so make sure to subscribe to the newsletter to get notified when they’re published.
Sign-Up for New Posts
Stay in the loop and get the latest blog posts about development sent to your inbox.