ElianCodes

← Back to blog

Published on 04/26/2022 21:52 by Elian Van Cutsem

Upgrading my website to Astro v1.0

So, Astro came out with some beta versions of their v1.0 release of the framework. I upgraded my website to use that version, since I was still running on v0.24 (2 or 3 months behind). The following are the changes I had to do to get it working.

New Markdown API

Astro.glob() vs. Astro.fetchContent()

Astro has replaced the ‘old’ Astro.fetchContent() with a newer version called Astro.glob().

This is what the older API looked like:

---
const blogposts = Astro.fetchContent("*.md");
---

<body>
  <ul>
    {
      blogposts.map((blogpost) => {
        return <li>{blogpost.title}</li>;
      })
    }
  </ul>
</body>

In my eyes the new API looks way better and is more developer friendly since it uses await, which also means, you can use .then() & .catch().

Here is what it looks like:

---
const blogposts = await Astro.glob("*.md");
---

<body>
  <ul>
    {
      blogposts.map((blogpost) => {
        return <li>{blogpost.frontmatter.title}</li>;
      })
    }
  </ul>
</body>

An example of what the .then() use, could look like:

---
const blogposts = await Astro.glob("./**/*.md").then((posts) =>
  posts.sort(
    (a, b) =>
      new Date(b.frontmatter.createdAt) - new Date(a.frontmatter.createdAt),
  ),
);
---

Frontmatter and variables

Did you notice in the above example that I used blogpost.frontmatter.title?

Yup, that’s an example of the new Markdown API.

The new API gives you access to the frontmatter as a whole with variables as an object.

Check out the official docs about this here.

Default script behaviour

The default <script> behaviour has changed to default hoist, which means that Astro will process the scripts by default. This behaviour can be changed by using <script is:inline> to tell the Astro compiler to leave your script unchanged and unprocessed.

More about that here.

New configuration API

Some changes also ocurred in the astro.config.mjs file.

Here’s an example of the new API:

import { defineConfig } from "astro/config";
import sitemap from "@astrojs/sitemap";

// https://astro.build/config
export default defineConfig({
  trailingSlash: "ignore",
  site: "https://www.elian.codes",
  server: {
    port: 3000,
  },
  integrations: [
    sitemap({
      canonicalURL: "https://www.elian.codes",
    }),
  ],
});

Note that the integrations object is a new thing, which basically contains the renderers and other Astro packages. Here I’ve used it to load in the sitemap configuration, since the sitemap: true is depricated.

Keep in mind that the @astrojs/sitemap is a new and seperate package, so should be installed too.

That’s basically all I had to do. If you’re interested to upgrade your Astro website to v1.0-beta and need some more guidance, here’s the Official upgrade & migration guide

Written by Elian Van Cutsem

← Back to blog

Recent Blogposts

  • So, I'm leaving vBridge

    So, I'm leaving vBridge

    After spending a couple of years at vBridge Cloud, I'm leaving the company. I've worked at vBridge eversince I graduated. Now, It's time for a new adventure! I'm joining the DX-team at Astro full-time!

  • Becoming an Astro maintainer

    Becoming an Astro maintainer

    Since a week, I'm an Astro maintainer, in this post, I describe the process and my start in open source. I also give some insight in what I'm planning to work on.

  • 🍱 Brutal: A theme for Astro

    🍱 Brutal: A theme for Astro

    Brutal is a minimal neobrutalist theme for Astro. It's based on Neobrutalist Web Design, a movement that aims to create websites with a minimalistic and functional design. It has some integrations like Image Optimization, RSS, Sitemap, ready to get your SEO done right.

  • 🎤 Am I an international public speaker now?

    🎤 Am I an international public speaker now?

    A few weeks ago, I gave my first international keynote talk at JSWorld in Amsterdam. In this blogpost, I wanted to share some insights about the conference and my talk.

  • ✨ Building Blog tag index pages in Astro

    ✨ Building Blog tag index pages in Astro

    I wanted to add blog tag collection pages to my website. This way, people could filter on tags I used in my blog posts. Here is a guide on how I implemented it.

  • 🎉 I started from scratch (again)

    🎉 I started from scratch (again)

    I started rebuilding my personal website from scratch in Astro again, no dependencies, no frameworks, no nothing. This to decrease technical debt and make full use of the newer Astro features.