docs
docs copied to clipboard
withastro
How to create an index.html at root level via getStaticPaths()
See issue here: https://github.com/withastro/astro/issues/3990
What kind of changes does this PR include?
- New or updated content
Description
- What does this PR change? Give us a brief description.
Issue is discussed here: https://github.com/withastro/astro/issues/3990
Deploy Preview for astro-docs-2 ready!
Built without sensitive environment variables
| Name | Link |
|---|---|
| Latest commit | 4168d27ee599f76821de71cfd1ff8685c9ac61e9 |
| Latest deploy log | https://app.netlify.com/sites/astro-docs-2/deploys/62f4131e00cbd1000864a4cf |
| Deploy Preview | https://deploy-preview-1256--astro-docs-2.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site settings.
![netlify[bot] avatar](https://avatars.githubusercontent.com/in/13473?v=4 "Published by a pub.dev verified publisher"){kind=small}
Thanks for this @jablonski. Was there a reason you closed this PR? I'm seeing it documented the recommended technique from https://github.com/withastro/astro/issues/3990
I've closed #3990, because I'm totally fine with undefined as value instead of an empty string to create a top level index.html route, so nothing needs to be fixed. It was just a lack of documentation.
Now I understand the problem. This PR got closed automagically by Github because I've closed #3990. I cannot reopen it, but IMHO it should be merged to the docs.
Thanks so much for this @jablonski! I followed your thread in Discord, and the Issue you created at withastro/astro for this. I think this is a great addtion to the docs, but maybe this could be expanded to be a bit more than a "tip" to really make sense in context. (And, it means we don't need two "tips" right next to each other.
I like how you presented your discovery of "undefined" in https://github.com/withastro/astro/issues/3990 . Would you be prepared to change this content from a tip to an actual, simple, small code example to illustrate creating the index.html route? I think that would be more clear for the reader of Docs. I think just the export default getStaticPaths() function that shows setting a parameter to "undefined" alongside some other params?
Let me know what you think! Don't be afraid to just write and suggest something, and we can all discuss further from there!
@sarah11918 I totally agree.
Just a general thought: maybe it would help people to see self-contained examples in the docs which they can copy/paste to StackBlitz to try out things?
I've created an example, which should show how it should work in general. I'm not so sure about the wording (or the best place to put this example in the docs, because the example shows how to create the index.html at root level, but demonstrates also how to render content with dynamic paths (e.g. from a headless CMS).
Maybe this kind of content should be stored under a "recipes category" and linked from the docs?
[...slug].astro
---
export async function getStaticPaths() {
const pages = [
{
slug: undefined,
title: "Astro Store",
text: "Welcome to the Astro store!",
},
{
slug: "products",
title: "Astro products",
text: "We have lots of products for you",
},
{
slug: "products/astro-handbook",
title: "The ultimative Astro handbook",
text: "If you want to learn Astro, you must read this book.",
},
];
return pages.map(({ slug, title, text }) => {
return {
params: { slug },
props: { title, text },
};
});
}
const { title, text } = Astro.props;
---
<html>
<head>
<title>{title}</title>
</head>
<body>
<h1>{title}</h1>
<p>{text}</p>
</body>
</html>
Thanks for this @jablonski! On first glance it looks like exactly the kind of clear example I was looking for! I think this illustrates really nicely how to use "undefined" properly.
What would you think about maybe using this as an example right after the tip in Rest parameters? You'd need to add the note about undefined/index there, and then this example? I think this example shows nicely both the pattern you originally intended to describe, as well as a more complex (realistic!) use-case.
I agree with the advantages of a full, working example, and we DO want to include something like that. As you've noticed, we don't yet have the perfect place for that. We are actively working on some better structure to showcase guide/walk-through/how-to content a little better, and let reference be a place where people can "look up" or "quick check" content. We are already making plans like this behind the scenes!
In the mean time, while I don't really want this full, including-all-the-html example here, I think it's helpful. And, when we DO move content around to reorganize, at least it will be ready to slot into a better place, leaving this area as more reference material. So, what do you think about trying to slot something in after the tip?
I've created a new PR because I've deleted my fork already, so couldn't update it anymore:
https://github.com/withastro/docs/pull/1389
Sorry for the mess...