Wasp-lang•4mo ago

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•4mo 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•4mo 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•4mo 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).

Ricardo Batista•4mo 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•4mo ago

Great! I'll keep track there as well 😄

Ricardo Batista•4mo 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.

Ricardo Batista•4mo ago

@miho point solved here: https://discord.com/channels/830184174198718474/1232933525049704510/1233786499800109136

MEE6•4mo ago

Wohooo @Ricardo Batista, you just became a Waspeteer level 3!

Ricardo Batista•4mo 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•3mo 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•3mo 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•3mo 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•3mo 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•3mo 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•3mo ago

Wohooo @Ricardo Batista, you just became a Waspeteer level 4!

miho•3mo 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•3mo 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.

miho•3mo ago

Ok, let me try upgrading myself and I'll comment what happens 🙂

Ricardo Batista•3mo ago

Thanks @miho , do you have any news so far?

miho•3mo ago

I'll try this today, I'll report back 👍

Ricardo Batista•3mo ago

Any news @miho ?

miho•3mo 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•3mo 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•3mo ago

Thank you for tracking down the bug 🙏

Ricardo Batista•3mo 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•3mo ago

@miho do you have the capacity to take this one on, or should somebody else take it over?

miho•3mo ago

@martinsos please let's transfer it to someone else 👍

martinsos•3mo ago

@Vinny (@Wasp) you probably know the most about this, maybe you could take it over?

Vinny (@Wasp)•3mo 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•3mo ago

All users will benefit from this, as it is causing a redirect right now. It's only on the blog, yes.

Vinny (@Wasp)•3mo ago

yep. now i get it. Nice catch! Updating it now 🙂

Vinny (@Wasp)•3mo 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 🙂

GitHub

remove duplicate blog link from astro header · wasp-lang/open-saas@...

Ricardo Batista•3mo ago

Well spotted, hadn't noticed it 😉

Gaming

Programming

Starlight missing trailing slash