Upgrading CodeStitch Astro kits to v5

https://docs.astro.build/en/guides/upgrade-to/v5/

Hello everyone! All three CodeStitch kits have been updated to v5. If you’d like to upgrade your own forks, follow the steps below!

<aside> 📢

These guides are only concerned with the code and packages contained in the kits. If you’ve added extra packages and content, make sure these are updated as well. As always when making big changes, create a feature branch to work from and merge when ready.

</aside>

Beginner Kit

Upgrade Astro and its dependencies
1. Run npx @astrojs/upgrade in your terminal
2. At the yellow warning, choose “Yes” to continue

Intermediate Kit

Upgrade Astro and its dependencies
1. Run npx @astrojs/upgrade in your terminal
2. At the yellow warning, choose “Yes” to continue
Breaking change: Renamed: <ViewTransitions /> component
1. In BaseLayout.astro, replace all occurrences of the ViewTransitions import and component with ClientRouter
```
// BaseLayout.astro
- import { ViewTransitions } from 'astro:transitions';
+ import { ClientRouter } from 'astro:transitions';

<html>
  <head>
    ...
   - <ViewTransitions />
   + <ClientRouter />
  </head>
</html>
```
2. Reference: https://docs.astro.build/en/guides/upgrade-to/v5/#renamed-viewtransitions--component
Breaking Change: Content Collections
1. Move the content config file. This file no longer lives within the src/content/ folder. This file should now exist at src/content.config.ts.
2. Edit the collection definition. Your updated collection requires a loader which indicates both a folder for the location of your collection (base) and a pattern defining the collection entry filenames and extensions to match.
```
// src/content.config.ts

 + import { glob } from 'astro/loaders';
---
- type: 'content',

+ loader: glob({ pattern: '**/[^_]*.{md,mdx}', base: "./src/content/blog" }),
```
3. Change references from slug to id. Content layer collections do not have a reserved slug field. Instead, all updated collections will have an id.
  
  For example:
```
// src/pages/blog/[...post].astro

export async function getStaticPaths() {
  const posts = await getCollection("blog");
  return posts.map((entry) => ({
    params: { post: entry.slug },
    params: { post: entry.id },
    props: { post: entry },
  }));
}
```
  <aside> 📢
  
  CTRL+SHIFT+F and check for any traces of .slug. There shouldn’t be any more.
  
  </aside>
4. Switch to the new render() function. Entries no longer have a render() method. Instead, import the render() function from astro:content.
```
// src/pages/blog/[...post].astro

import { getCollection, render } from 'astro:content';

const { Content } = await page.render();
const { Content } = await render(post);
```
  <aside> 📢
  
  Running into Module '"astro:content"' has no exported member 'render'? => Restart the dev server
  
  </aside>
5. Repeat for every content collection you may have added.
6. Reference: https://docs.astro.build/en/guides/upgrade-to/v5/#updating-existing-collections
Breaking change: TypeScript configuration
1. Add the following include and exclude properties to your existing tsconfig.json:
```
{
  "extends": "astro/tsconfigs/base",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"]
}
```

Advanced Kit

Uninstall and reinstall @astrolicious/i18n. To prevent dependency conflicts, it’s best to uninstall this package and dependencies first.
1. Run npm uninstall @astrolicious/i18n i18next in your terminal
2. Install again with npm install @astrolicious/i18n i18next --legacy-peer-deps
Upgrade Astro and its dependencies
1. Run npx @astrojs/upgrade
2. At the yellow warning, choose “Yes” to continue
Breaking change: Renamed: <ViewTransitions /> component
1. In BaseLayout.astro, replace all occurrences of the ViewTransitions import and component with ClientRouter
```
// BaseLayout.astro
- import { ViewTransitions } from 'astro:transitions';
+ import { ClientRouter } from 'astro:transitions';

<html>
  <head>
    ...
   - <ViewTransitions />
   + <ClientRouter />
  </head>
</html>
```
2. Reference: https://docs.astro.build/en/guides/upgrade-to/v5/#renamed-viewtransitions--component