[tutorial] new tutorial extensions

src/content/docs/en/guides/content-collections.mdx

@@ -536,205 +536,11 @@ const { Content } = await entry.render();
 ---
 ```
 
-## Migrating from File-Based Routing 
-This guide shows you how to convert an existing Astro project with Markdown files in the `src/pages/` folder to content collections. It uses the [Build a Blog tutorial's finished project](https://github.com/withastro/blog-tutorial-demo) as an example.
-
-1. [Upgrade](/en/guides/upgrade-to/v3/) to Astro v3.0 or later, and upgrade all integrations to their latest versions. 
-
-2. [Set up TypeScript](/en/guides/content-collections/#setting-up-typescript) for content collections.
-3. Create at least one collection (folder in `src/content/`) and move your Markdown and MDX pages from `src/pages/` into these subdirectories of `src/content/`. Collections work best when all files in the same collection have similar frontmatter properties. So, choose your new folder structure to reflect similar types of pages.
-
-    For example, to migrate the [blog posts in the tutorial](/en/tutorial/2-pages/2/), move the contents of `src/pages/posts/` to `src/content/posts/`. 
-
-4. Create a `src/content/config.ts` file and [define a schema](/en/guides/content-collections/#defining-a-collection-schema) for each content type. For the blog, we only have one content type, `posts`:
-
-    ```ts title="src/content/config.ts"
-    // Import utilities from `astro:content`
-    import { z, defineCollection } from "astro:content";
-    // Define a `type` and `schema` for each collection
-    const postsCollection = defineCollection({
-        type: 'content',
-        schema: z.object({
-          title: z.string(),
-          pubDate: z.date(),
-          description: z.string(),
-          author: z.string(),
-          image: z.object({
-            url: z.string(),
-            alt: z.string()
-          }),
-          tags: z.array(z.string())
-        })
-    });
-    // Export a single `collections` object to register your collection(s)
-    export const collections = {
-      posts: postsCollection,
-    };
-    ```
-
-    :::tip
-    If your editor doesn't recognize `astro:content`, make sure you're on the latest version of Astro and try restarting the dev server. 
-    :::
-
-
-5. [Generate routes from your collections](/en/guides/content-collections/#generating-routes-from-content). Inside a collection, Markdown and MDX files no longer automatically become pages using Astro's [file-based routing](/en/guides/markdown-content/#file-based-routing), so you must generate the pages yourself.
-
-    For the tutorial, create a `src/pages/posts/[...slug].astro`. This page will use [dynamic routing](/en/core-concepts/routing/#dynamic-routes) to generate a page for each collection entry. 
-
-    This page will also need to [query your collection](#querying-collections) to fetch page slugs and make the page content available to each route.
-
-    Render your post `<Content />` within the layout for your Markdown or MDX pages. This allows you to specify a common layout for all of your posts.
-
-    ```astro title="src/pages/posts/[...slug].astro"
-    ---
-    import { getCollection } from 'astro:content';
-    import MarkdownPostLayout from '../../layouts/MarkdownPostLayout.astro';
-
-    export async function getStaticPaths() {
-      const blogEntries = await getCollection('posts');
-      return blogEntries.map(entry => ({
-        params: { slug: entry.slug }, props: { entry },
-      }));
-    }
-
-    const { entry } = Astro.props;
-    const { Content } = await entry.render();
-    ---
-    <MarkdownPostLayout frontmatter={entry.data}>
-      <Content />
-    </MarkdownPostLayout>
-    ```
-
-6. Remove the `layout` definition in each individual post's frontmatter. Your content is now wrapped in a layout when rendered, and this property is no longer needed.
-
-    ```md title="src/content/post-1.md" del={2}
-    ---
-    layout: ../../layouts/MarkdownPostLayout.astro
-    title: 'My First Blog Post'
-    pubDate: 2022-07-01
-    ...
-    ---
-    ```
-
-7. Replace `Astro.glob()` with [`getCollection()`](/en/reference/api-reference/#getcollection) to fetch content and metadata from your Markdown files. You will also need to update references to the returned post object, since you will now find your frontmatter values on the `data` property.
-
-    The blog index page in the tutorial lists a card for each post. This becomes:
-
-    ```astro title="src/pages/blog.astro" "post.data" "getCollection(\"posts\")" "'/posts/' + post.slug"
-    ---
-    import { getCollection } from "astro:content";
-    import BaseLayout from "../layouts/BaseLayout.astro";
-    import BlogPost from "../components/BlogPost.astro";
-
-    const pageTitle = "My Astro Learning Blog";
-    const allPosts = await getCollection("posts");
-    ---
-
-    <BaseLayout pageTitle={pageTitle}>
-      <p>This is where I will post about my journey learning Astro.</p>
-      <ul>
-        {
-          allPosts.map((post) => (
-            <BlogPost url={'/posts/' + post.slug} title={post.data.title} />
-          ))
-        }
-      </ul>
-    </BaseLayout> 
-    ```
-
-    The tutorial blog project also dynamically generates a page for each tag. This page now becomes:
-
-    ```astro title="src/pages/tags/[tag].astro" "post.data" "getCollection(\"posts\")" "post.data.title" "'/posts/' + post.slug"
-    ---
-    import { getCollection } from "astro:content";
-    import BaseLayout from "../../layouts/BaseLayout.astro";
-    import BlogPost from "../../components/BlogPost.astro";
-
-    export async function getStaticPaths() {
-      const allPosts = await getCollection("posts");
-      const uniqueTags = [...new Set(allPosts.map((post) => post.data.tags).flat())];
-
-      return uniqueTags.map((tag) => {
-        const filteredPosts = allPosts.filter((post) =>
-          post.data.tags.includes(tag)
-        );
-        return {
-          params: { tag },
-          props: { posts: filteredPosts },
-        };
-      });
-    }
-
-    const { tag } = Astro.params;
-    const { posts } = Astro.props;
-    ---
-
-    <BaseLayout pageTitle={tag}>
-        <p>Posts tagged with {tag}</p>
-        <ul>
-            { posts.map((post) => <BlogPost url={'/posts/' + post.slug} title={post.data.title} />) }
-        </ul>
-    </BaseLayout>
-    ```
-
-    The same logic appears in the tag index page, which becomes:
-
-    ```astro title="src/pages/tags/index.astro" "post.data" "getCollection(\"posts\")"
-    ---
-    import { getCollection } from "astro:content";
-    import BaseLayout from "../../layouts/BaseLayout.astro";
-    const allPosts = await getCollection("posts");
-    const tags = [...new Set(allPosts.map((post) => post.data.tags).flat())];
-    const pageTitle = "Tag Index";
-    ---
-    ...
-    ```
-
-    :::note
-    Any individual Markdown or MDX file imports should be replaced by [`getEntry()`](/en/reference/api-reference/#getentry).
-    :::
-
-8. Update the code that uses the publish date in the `layouts/MarkdownPostLayout.astro` file.
-
-    Previously, `pubDate` was a string. Now, after introducing types for your posts' frontmatter, `pubDate` is a `Date`.
-    To render the date, convert it to a string:
-
-    ```astro title="src/layouts/MarkdownPostLayout.astro" "frontmatter.pubDate.toDateString()"
-    ...
-    <BaseLayout pageTitle={frontmatter.title}>
-      <p>{frontmatter.pubDate.toDateString()}</p>
-      <p><em>{frontmatter.description}</em></p>
-      <p>Written by: {frontmatter.author}</p>
-      <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
-    ...
-    ```
-
-
-    Lastly, the tutorial blog project includes an RSS feed. This function must also use `getCollection` and the `data` object, and be converted to an async function to do so:
-
-    ```js title="src/pages/rss.xml.js" {4-5, 10-15} 
-    import rss from "@astrojs/rss";
-    import { getCollection } from "astro:content";
-
-    export async function GET() {
-      const posts = await getCollection('posts');
-      return rss({
-        title: 'Astro Learner | Blog',
-        description: 'My journey learning Astro',
-        site: 'https://my-blog-site.netlify.app',
-        items: posts.map((post) => ({
-          title: post.data.title,
-          pubDate: post.data.pubDate,
-          description: post.data.description,
-          link: `/posts/${post.slug}/`,
-        })),
-        customData: `<language>en-us</language>`,
-      });
-    }
-    ```
-
-For the full example of the blog tutorial using content collections, see the [Content Collections branch](https://github.com/withastro/blog-tutorial-demo/tree/content-collections) of the tutorial repo.
+## Migrating from File-Based Routing
 
+If you have an existing Astro project, such as a blog, that uses Markdown or MDX files in subfolders inside `src/pages/`, consider migrating related content or data files to content collections. 
+
+See how to convert a basic blog example from `src/pages/posts/` to `src/content/posts` in our [step-by-step tutorial](/en/tutorials/add-content-collections/) that uses the codebase from [the Build a Blog tutorial's finished project](https://github.com/withastro/blog-tutorial-demo).
 
 ## Modifying Frontmatter with Remark
 
@@ -755,5 +561,4 @@ const { remarkPluginFrontmatter } = await blogPost.render();
 
 <RecipeLinks slugs={["en/recipes/reading-time" ]}/>
 
-The remark and rehype pipelines only run when your content is rendered, which explains why `remarkPluginFrontmatter` is only available after you call `render()` on your content entry. In contrast, `getCollection()` and `getEntry()` cannot return these values directly because they do not render your content.
-
+The remark and rehype pipelines only run when your content is rendered, which explains why `remarkPluginFrontmatter` is only available after you call `render()` on your content entry. In contrast, `getCollection()` and `getEntry()` cannot return these values directly because they do not render your content.

src/content/docs/en/tutorial/6-islands/3.mdx

@@ -59,7 +59,7 @@ Welcome to the universe, astronaut. 👩🏼‍🚀👨🏿‍🚀🧑‍🚀
 
 ## Next Steps
 
-Continue with our [guide to migrate this project to content collections](/en/guides/content-collections/#migrating-from-file-based-routing)
+Continue with either of our tutorial extensions to [add view transitions to this project](/en/tutorials/add-view-transitions/) or to [add a content collection to manage your plog posts](/en/tutorials/add-content-collections/)
 
 [Start a new Astro project](/en/getting-started/)