Astro claims variable is not declared before use here:

[teal crater]

import { getCollection } from "astro:content";
import BaseService from "@/layout/BaseService.astro";

const TOPIC = 'webudvikling';

export async function getStaticPaths() {
    const posts = await getCollection('services');
    const filtered = posts.filter(post => Array.isArray(post.data.categoryName) && post.data.categoryName.includes(TOPIC));
    const paths = filtered.map((post) => ({
        params: { id: post.id },
        props: { post },
    }));
    return paths;
}```

What's going on and how can I fix this? I tried to move the declaration about with no luck and AI have no real answer, only work arounds.

Thanks for reading

Edit: It works by replacing by string of course, but I'd like to know what the issue could be.

[languid summit]

The variable must be declared within the getStaticPaths function

import { getCollection } from "astro:content";
import BaseService from "@/layout/BaseService.astro";

- const TOPIC = 'webudvikling';

export async function getStaticPaths() {
+ const TOPIC = 'webudvikling';
    const posts = await getCollection('services');
    const filtered = posts.filter(post => Array.isArray(post.data.categoryName) && post.data.categoryName.includes(TOPIC));
    const paths = filtered.map((post) => ({
        params: { id: post.id },
        props: { post },
    }));
    return paths;
}

[teal crater]

Oh, because of the export function?

If so, how would I go about accessing this variable both from within the export function, but also in other parts of the front matter and markup, if that is even possible?

[languid summit]

Yes, that's special to this function. The docs say

The getStaticPaths() function executes in its own isolated scope once, before any page loads. Therefore you can’t reference anything from its parent scope, other than file imports. The compiler will warn you if you break this requirement.

This topic variable that you need should probably be part of the front-matter of the files you're fetching with await getCollection('services');

In other words, each file in that services collection should have a topic key in the frontmatter, similarly to what you're doing with categoryname

I'm not sure that this fully answers your question though. What are you trying to build?

[teal crater]

Ah, it's because the "services" content collection holds 3 categories of services content, which is rendered in individual parent routes. For instance /webudvikling/such-udvikling and /websikkerhed/post-yo . So for each route/directory I have an [id].astro file with the posted function and a different TOPIC variable represnting the relevant category from the services content collection.

I feel there should be a better way to do it. If so I am not well versed enough in Astro to see it. Apart from creating individual content collections of course, but that's not very DRY.

[languid summit]

OK, then I think you need nested dynamic routes

What I don't understand in your case is the difference between category and topic. But let's set that aside for now.

You already have the [id] parameter that will generate the final slug. Let's add a [category] parameter (or params) too, something like this src/pages/[category]/[id], which will have a getStaticPaths somethinglike this

---
// src/pages/[category]/[id]
import { getCollection } from "astro:content";
import BaseService from "@/layout/BaseService.astro";

export async function getStaticPaths() {

    const posts = await getCollection('services');
    return posts.map((post) => ({
        params: { 
          category: post.data.categoryName
          id: post.id 
        },
        props: { post },
    }));
}

const post = Astro.props
---

// pass the props to your layout etc.

This should generate routes like /webudvikling/such-udvikling, assuming that webudvikling is a categoryName key in the frontmatter of your such-udvikling.md file.

Makes sense?

[teal crater]

What I don't understand in your case is the difference between category and topic. But let's set that aside for now.

It's pretty messy. My content collection definition sort of evolved with project requirements. I need to go back and clear it all up before it becomes unreadable.

I had no idea you could do this. However, I did not mention before, I use the parent dir "/webudvikling/" wtih index.astro page for the child pages. I read the link and am not sure how to achieve this, unless I just keep them the static route as I have now and combine with the dynamic routing for content collection posts. Is this the way?

[languid summit]

Let me know how it goes.

[teal crater]

Sorry, I edited my first reply just now. Thought I should at least read the doc you linked 🙂

[languid summit]

isn't webudvikling one of the categories?

[teal crater]

It's both a category within the services collection and an index page for the posts that have the category of 'webudvikling'. Don't waste more of your time until I have time to test the question I posed earlier. I'll ping you tomorrow and let you know! Thanks a bunch for your time so far 🙂

[languid summit]

Ok then, happy coding!

[teal crater]

Hey @languid summit Sorry I forgot to ping back. It works with dynamic routing for "/category/such-thing" while using static directory routing for index of "/category/", which also probably should be a content collection itself, along with categories/taxonomy system. But I wanted to say thank you for solving more than I bargained and teaching me a better way 😄

[languid summit]

Great! happy you got it to work.