Building an Astro Blog with View Transitions

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • WorkOS - The modern API for authentication & user identity.
  • LearnThisRepo.com - Learn 300+ open source libraries for free using AI.
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • rehype

    HTML processor powered by plugins part of the @unifiedjs collective

    Astro content collection are as simple as a folder containing a bunch of Markdown (or Markdoc or MDX) files if that's the only thing you need, but they can also do relationship matching between different collections, frontmatter validation using zod and you can also customize how the markdown is parsed and translated to html using rehype and remark and their plugin ecosystem.

  • zod

    TypeScript-first schema validation with static type inference

    Astro content collection are as simple as a folder containing a bunch of Markdown (or Markdoc or MDX) files if that's the only thing you need, but they can also do relationship matching between different collections, frontmatter validation using zod and you can also customize how the markdown is parsed and translated to html using rehype and remark and their plugin ecosystem.

  • WorkOS

    The modern API for authentication & user identity. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  • remark

    markdown processor powered by plugins part of the @unifiedjs collective (by remarkjs)

    Astro content collection are as simple as a folder containing a bunch of Markdown (or Markdoc or MDX) files if that's the only thing you need, but they can also do relationship matching between different collections, frontmatter validation using zod and you can also customize how the markdown is parsed and translated to html using rehype and remark and their plugin ecosystem.

  • astro

    The web framework for content-driven websites. ⭐️ Star to support our work!

    I've recently decided to recentralize all my articles on my own blog instead of publishing them to Hashnode (nothing wrong with Hashnode, just something that I had wanted to do for a while) and since I have a wondeful brand new personal site built with astro I decided to take advantage of their collection system and the new experimental (at least at the time of writing this article) view transitions api to build something a bit more tailored to what I like. Here's how it went.

  • core

    🔗 Remark plugin to convert URLs to embed code in markdown. (by remark-embedder)

    You may also notice I have some embeds on my articles even though Markdown natively does not support embedding content. This is done by using a Remark plugin. Remark is a tool that can be used to parse and transform Markdown. In this case, I used a plugin called remark-embedder to add custom logic to replace links from specific websites (in this case, Youtube and CodeSandbox) with s containing the actual page; without the plugin, those would simply be text links and would make for a much less pleasing lecture, wouldn't you agree ?
    You can obviously do more with remark than just that, so take a look at the plugins they offer. But how do you use with Astro? You simply add the plugins in your astro.config.mjs file (documentation on how to do that is here).

    This post was a bit chaotic, but I hope I was able to share a bit of what I did on my blog section (where you are hopefully reading this right now).

  • LearnThisRepo.com

    Learn 300+ open source libraries for free using AI. LearnThisRepo lets you learn 300+ open source repos including Postgres, Langchain, VS Code, and more by chatting with them using AI!

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts