Starlight missing trailing slash

Starlight's sidebar doesn't include a trailing slash ("/") at the end of the URL, leading to a 301 redirect to the page. It is a minor thing, but SEO-wise it is not great. I tried to look it up online but couldn't find any solution 😦
33 Replies
kapa.ai
kapa.aiβ€’2mo ago
Hi @Ricardo Batista. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The knowledge sources provided do not contain specific information on how to add a trailing slash to URLs in Starlight's sidebar. However, there are discussions about handling trailing slashes in Wasp and its associated projects. For instance, in Wasp, a script was added to remove any redundant trailing slashes from the end of the URL to fix a similar issue source (https://github.com/wasp-lang/wasp/issues/297). For your specific issue with Starlight, I would recommend reaching out to the Starlight or Astro community for more targeted advice. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Ricardo Batista, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
miho
mihoβ€’2mo ago
Hmm that's interesting! Do you have experience with Astro in general and maybe some advice for us? πŸ™‚ We'll have to research this a bit to see what we can do
Ricardo Batista
Ricardo Batistaβ€’2mo ago
To be honest, a little experience with Astro, but not particularly with Starlight. I have attached proof of what I am saying: the URL bar shows the trailing slash, but if you hover over the sidebar link it doesn't have (see bottom of the page).
No description
Ricardo Batista
Ricardo Batistaβ€’2mo ago
@miho by mistake marked it as solved but it isn't. I have contacted the Starlight support here.
Discord
Discord - A New Way to Chat with Friends & Communities
Discord is the easiest way to communicate over voice, video, and text. Chat, hang out, and stay close with your friends and communities.
miho
mihoβ€’2mo ago
Great! I'll keep track there as well πŸ˜„
Ricardo Batista
Ricardo Batistaβ€’5w ago
@miho interesting finding in the Starlight thread, have a look
Discord
Discord - A New Way to Chat with Friends & Communities
Discord is the easiest way to communicate over voice, video, and text. Chat, hang out, and stay close with your friends and communities.
MEE6
MEE6β€’5w ago
Wohooo @Ricardo Batista, you just became a Waspeteer level 3!
Ricardo Batista
Ricardo Batistaβ€’5w ago
You are on an older version
Quite an old version of the 3 libraries
starlight-blog fixed the trailing slash on 0.6.0, but your project is on 0.4.0
It requires Astro 4 and Starlight 0.19 since 0.5.0, but your project is using Astro 3 and Starlight 0.13

You might want to upgrade them
You are on an older version
Quite an old version of the 3 libraries
starlight-blog fixed the trailing slash on 0.6.0, but your project is on 0.4.0
It requires Astro 4 and Starlight 0.19 since 0.5.0, but your project is using Astro 3 and Starlight 0.13

You might want to upgrade them
Do you think there is a risk of conflicts/dependencies if I upgrade them?
miho
mihoβ€’5w ago
I think it's perfectly fine if you upgrade them, but make sure to check out the migration guide of the Astro team πŸ™‚ But this means we have to upgrade Astro in Open SaaS as well, I'll create a Github issue πŸ™‚ Thank you for investigating this and helping others!
miho
mihoβ€’5w ago
I'm not sure if you are up for upgrading it in the Open SaaS repo? πŸ™ˆ https://github.com/wasp-lang/open-saas/issues/111
GitHub
Upgrade Astro and Starlight versions Β· Issue #111 Β· wasp-lang/open-...
Reported by user: Starlight's sidebar doesn't include a trailing slash ("/") at the end of the URL, leading to a 301 redirect to the page. It is a minor thing, but SEO-wise it is ...
Ricardo Batista
Ricardo Batistaβ€’4w ago
Hey @miho happy to help! I have taken so much value out of your work that the minimum is to pay it back in making it better. What do you mean? Want me to try upgrading it myself in my repo and report back?
miho
mihoβ€’4w ago
That would be amazing! It would help us to know what to do with Open Saas and how to upgrade it more easily πŸ™‚
Ricardo Batista
Ricardo Batistaβ€’4w ago
My first try at it @miho:
Ricardos-MacBook-Pro:aiblogarticles1 rbatista19$ cd blog
Ricardos-MacBook-Pro:blog rbatista19$ npx @astrojs/upgrade

astro Integration upgrade in progress.

β—Ό @astrojs/tailwind is up to date on v5.1.0
● @astrojs/check will be updated to v0.5.10
● @astrojs/starlight will be updated to v0.21.5
● @astrojs/starlight-tailwind will be updated to v2.0.2
β–² astro will be updated to v4.7.0

wait One package has breaking changes. Continue?
Yes

check Be sure to follow the CHANGELOG.
astro Upgrade to Astro v4

β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ Installing dependencies with npm...

β–² error Dependencies failed to install, please run the following command manually:
npm install @astrojs/check@0.5.10 @astrojs/starlight@0.21.5 @astrojs/starlight-tailwind@2.0.2 astro@4.7.0
Ricardos-MacBook-Pro:aiblogarticles1 rbatista19$ cd blog
Ricardos-MacBook-Pro:blog rbatista19$ npx @astrojs/upgrade

astro Integration upgrade in progress.

β—Ό @astrojs/tailwind is up to date on v5.1.0
● @astrojs/check will be updated to v0.5.10
● @astrojs/starlight will be updated to v0.21.5
● @astrojs/starlight-tailwind will be updated to v2.0.2
β–² astro will be updated to v4.7.0

wait One package has breaking changes. Continue?
Yes

check Be sure to follow the CHANGELOG.
astro Upgrade to Astro v4

β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ Installing dependencies with npm...

β–² error Dependencies failed to install, please run the following command manually:
npm install @astrojs/check@0.5.10 @astrojs/starlight@0.21.5 @astrojs/starlight-tailwind@2.0.2 astro@4.7.0
Ricardos-MacBook-Pro:blog rbatista19$ npm install @astrojs/check@0.5.10 @astrojs/starlight@0.21.5 @astrojs/starlight-tailwind@2.0.2 astro@4.7.0
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: docs@0.0.1
npm ERR! Found: @astrojs/starlight@0.13.0
npm ERR! node_modules/@astrojs/starlight
npm ERR! peer @astrojs/starlight@">=0.9.0" from @astrojs/starlight-tailwind@2.0.1
npm ERR! node_modules/@astrojs/starlight-tailwind
npm ERR! @astrojs/starlight-tailwind@"2.0.2" from the root project
npm ERR! peer @astrojs/starlight@">=0.11.0" from starlight-blog@0.4.0
npm ERR! node_modules/starlight-blog
npm ERR! starlight-blog@"^0.4.0" from the root project
npm ERR! 1 more (the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @astrojs/starlight@"0.21.5" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: astro@4.7.0
npm ERR! node_modules/astro
npm ERR! peer astro@"^4.2.7" from @astrojs/starlight@0.21.5
npm ERR! node_modules/@astrojs/starlight
npm ERR! @astrojs/starlight@"0.21.5" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/rbatista19/.npm/_logs/2024-04-29T16_28_36_980Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/rbatista19/.npm/_logs/2024-04-29T16_28_36_980Z-debug-0.log
Ricardos-MacBook-Pro:blog rbatista19$ npm install @astrojs/check@0.5.10 @astrojs/starlight@0.21.5 @astrojs/starlight-tailwind@2.0.2 astro@4.7.0
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: docs@0.0.1
npm ERR! Found: @astrojs/starlight@0.13.0
npm ERR! node_modules/@astrojs/starlight
npm ERR! peer @astrojs/starlight@">=0.9.0" from @astrojs/starlight-tailwind@2.0.1
npm ERR! node_modules/@astrojs/starlight-tailwind
npm ERR! @astrojs/starlight-tailwind@"2.0.2" from the root project
npm ERR! peer @astrojs/starlight@">=0.11.0" from starlight-blog@0.4.0
npm ERR! node_modules/starlight-blog
npm ERR! starlight-blog@"^0.4.0" from the root project
npm ERR! 1 more (the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @astrojs/starlight@"0.21.5" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: astro@4.7.0
npm ERR! node_modules/astro
npm ERR! peer astro@"^4.2.7" from @astrojs/starlight@0.21.5
npm ERR! node_modules/@astrojs/starlight
npm ERR! @astrojs/starlight@"0.21.5" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /Users/rbatista19/.npm/_logs/2024-04-29T16_28_36_980Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/rbatista19/.npm/_logs/2024-04-29T16_28_36_980Z-debug-0.log
@miho let me know what you think
MEE6
MEE6β€’4w ago
Wohooo @Ricardo Batista, you just became a Waspeteer level 4!
miho
mihoβ€’4w ago
Oh, it would require you to upgrade astro as well to version 5 it seems. I'd recommend the following battle plan: - try creating a new Starlight project npm create astro@latest -- --template starlight and then see how that differs from what you have in Open SaaS - upgrade the deps to those in the new project and see if you have any issues - update any other config files to match Let me know if this makes sense to you πŸ™‚ if you get stuck we can debug again together
Ricardo Batista
Ricardo Batistaβ€’4w ago
@miho sorry, had some busy days. Let me walk you through what I did: 1. Run npx @astrojs/upgrade in the /blog folder, all dependencies updated in the package*.json files 2. When I run npm run dev I get: 2.1. Warnings:
11:38:59 [WARN] The injected route "/blog/tags/[tag]" by starlight-blog specifies the entry point with the "entryPoint" property. This property is deprecated, please use "entrypoint" instead.
11:38:59 [WARN] The injected route "/blog/[...page]" by starlight-blog specifies the entry point with the "entryPoint" property. This property is deprecated, please use "entrypoint" instead.
11:38:59 [WARN] The injected route "/blog/tags/[tag]" by starlight-blog specifies the entry point with the "entryPoint" property. This property is deprecated, please use "entrypoint" instead.
11:38:59 [WARN] The injected route "/blog/[...page]" by starlight-blog specifies the entry point with the "entryPoint" property. This property is deprecated, please use "entrypoint" instead.
2.2. [object Object] in title (see image attached) 2.3 When I click /blog, I get the error: Cannot read properties of undefined (reading 'skipLink.label') So indeed this migration needs to be probably checked. When I do a clean installation, I didn't see any fundamental change in astro.config.mjs. I am not expert enough to be changing more than this, so maybe have your help first.
No description
miho
mihoβ€’4w ago
Ok, let me try upgrading myself and I'll comment what happens πŸ™‚
Ricardo Batista
Ricardo Batistaβ€’3w ago
Thanks @miho , do you have any news so far?
miho
mihoβ€’3w ago
I'll try this today, I'll report back πŸ‘
Ricardo Batista
Ricardo Batistaβ€’3w ago
Any news @miho ?
miho
mihoβ€’3w ago
This is what worked for me, here's a PR that we still didn't merge, but you can get inspired https://github.com/wasp-lang/open-saas/pull/122
GitHub
Updates Astro, Starlight, Starlight Blog versions by infomiho Β· Pul...
Updates Astro to v4 Updates Starlight to latest version Updates Starlight Blog to latest version This was mostly done now due to users having SEO issues with trailing slashes in the blog URLs.
Ricardo Batista
Ricardo Batistaβ€’2w ago
Thanks @miho ! I just updated my code with those changes, but couldn't see the trailing slash issue fixed. Did you see yours working? @miho it seems like it was identified by the Astro Starlight team as an issue to be created: https://discord.com/channels/830184174198718474/1232933525049704510/1238992881469882399
miho
mihoβ€’2w ago
Thank you for tracking down the bug πŸ™
Ricardo Batista
Ricardo Batistaβ€’2w ago
@miho the solution is simple (see here), might be worth adding this to newest versions: - updating Astro and Starlight (there is already a PR for this) - adding trailingSlash: 'always' - updating src/components/MyHeader.astro with <a href="/blog/">
martinsos
martinsosβ€’2w ago
@miho do you have the capacity to take this one on, or should somebody else take it over?
miho
mihoβ€’2w ago
@martinsos please let's transfer it to someone else πŸ‘
martinsos
martinsosβ€’7d ago
@Vinny (@Wasp) you probably know the most about this, maybe you could take it over?
Vinny (@Wasp)
Vinny (@Wasp)β€’5d ago
ok let me get up to speed on this real quick ok nice. I merged Miho's PR but i'll make this changes ASAP Is this an issue that's specific to you @Ricardo Batista , or do you think all users would benefit from these changes? so it always causes a 301 redirect at the moment? hmm.. if I try it out on https://docs.opensaas.sh I don't see a 301 redirect in fact, it always includes a trailing slash ahh ok I see it now under blog. whoops
Ricardo Batista
Ricardo Batistaβ€’5d ago
All users will benefit from this, as it is causing a redirect right now. It's only on the blog, yes.
Vinny (@Wasp)
Vinny (@Wasp)β€’5d ago
yep. now i get it. Nice catch! Updating it now πŸ™‚
Vinny (@Wasp)
Vinny (@Wasp)β€’5d ago
btw @Ricardo Batista I removed the duplicate Blog link in the nav bar that comes with the new Astro updates. Check out the custom component here if you haven't gotten around to fixing it yourself yet πŸ™‚
Ricardo Batista
Ricardo Batistaβ€’5d ago
Well spotted, hadn't noticed it πŸ˜‰