Get collection slugs for sitemap

[nocturne marlin]

Hi @nimble snow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The issue you're encountering is related to how and where you're trying to use the getCollection function from astro:content. The astro:content module is not available in the astro.config.mjs file, which is why you're seeing the error.

To solve this problem and generate a sitemap for your SSR-rendered blog posts, you can use the customPages option in the sitemap integration configuration. However, you'll need to handle this differently since you can't directly use getCollection in the config file.

Here's an approach you can take:

1. Create a separate file to generate your blog post URLs.
2. Use this file in your sitemap configuration.

First, create a file called getBlogUrls.js (or any name you prefer) in your project:

import { getCollection } from 'astro:content';

export async function getBlogUrls(siteUrl) {
  const blogPosts = await getCollection('blog');
  return blogPosts.map(post => `${siteUrl}/blog/${post.slug}`);
}

Then, in your astro.config.mjs, you can use this function like this:

import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
import react from '@astrojs/react';
import sitemap from '@astrojs/sitemap';
import { getBlogUrls } from './getBlogUrls.js';

const SITE_URL = '<https://your-site-url.com';>

export default defineConfig({
  site: SITE_URL,
  integrations: [
    tailwind({
      applyBaseStyles: true,
    }),
    react(),
    sitemap({
      filter: (page) => !page.includes('/app'),
      customPages: async () => {
        const blogUrls = await getBlogUrls(SITE_URL);
        return [...blogUrls];
      },
    }),
  ],
});

This approach allows you to generate the blog post URLs using the getCollection function, which is then used in the sitemap configuration.

Note that this solution assumes that your blog post slugs correspond directly to their URLs. If you have any additional processing or routing logic for your blog posts, you might need to adjust the URL generation accordingly.

For more information on configuring the sitemap integration, you can refer to the Astro Sitemap documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@nimble snow Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[nimble snow]

@nocturne marlin That just gives me the same error

Cannot find module 'astro:content' imported from '/Users/wouter/Desktop/floorplanai.com/www/src/lib/astro-helpers.ts'

[nocturne marlin]

Let me check the knowledge base for you again. One moment! :books:

---

I apologize for the confusion in my previous answer. You're right, and I should have realized that the astro:content module is not available outside of Astro components or pages. Let me provide a more accurate solution for your SSR setup.

For server-side rendered (SSR) Astro sites, you need to handle dynamic routes differently, including for sitemaps. The @astrojs/sitemap integration is primarily designed for static sites and won't work as expected in SSR mode.

Instead, you can create a custom endpoint to generate your sitemap dynamically. Here's how you can do it:

1. Create a new file src/pages/sitemap.xml.js (or .ts if you're using TypeScript):

import { getCollection } from 'astro:content';

export async function GET({ site }) {
  const blogPosts = await getCollection('blog');
  
  const pages = [
    '',
    'about',
    'contact',
    // Add other static pages here
  ];

  const sitemap = `
    <?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="<http://www.sitemaps.org/schemas/sitemap/0.9">>
      ${pages
        .map((page) => `
          <url>
            <loc>${site}${page}</loc>
            <changefreq>monthly</changefreq>
          </url>
        `)
        .join('')}
      ${blogPosts
        .map((post) => `
          <url>
            <loc>${site}blog/${post.slug}</loc>
            <changefreq>weekly</changefreq>
          </url>
        `)
        .join('')}
    </urlset>
  `.trim();

  return new Response(sitemap, {
    headers: {
      'Content-Type': 'application/xml',
    },
  });
}

2. Update your astro.config.mjs to remove the sitemap integration:

import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
import react from '@astrojs/react';

export default defineConfig({
site: 'https://your-site-url.com',
output: 'server',
integrations: [
tailwind({
applyBaseStyles: true,
}),
react(),
],
});

This approach creates a dynamic `/sitemap.xml` endpoint that generates the sitemap on-demand, including both your static pages and blog posts from your content collection.

The `getCollection` function is used within the context of an Astro page (even though it's a `.js` file), so it will work correctly here.

Remember to add your sitemap URL to your `robots.txt` file:

Sitemap: https://your-site-url.com/sitemap.xml

This solution should work for your SSR setup and avoid the module import errors you were encountering.

For more information on SSR in Astro, you can refer to the [Server-side Rendering guide](<https://docs.astro.build/en/guides/server-side-rendering/>).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------