hidden sand
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 😦 (including trailingSlash: 'always',).
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).
coral apex
Hi @hidden sand, I thought trailingSlash: 'always' should do this. Could you share your astro.config.mjs?
hidden sand
@coral apex my understanding is that trailingSlash: 'always' forces the URLs to have a trailing slash, doesn't add it - this is what is happening when I test it (below).
Check my code below, any sidebar link gives now a 404:
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
import starlightBlog from 'starlight-blog';
import sitemap from '@astrojs/sitemap';
import tailwind from "@astrojs/tailwind";
export default defineConfig({
site: 'https://docs.getaiblogarticles.com',
trailingSlash: 'always', // Ensure all URLs end with a trailing slash
integrations: [
sitemap(),
starlightBlog({
title: 'Blog',
customCss: ['./src/styles/tailwind.css'],
authors: {
ric: {
name: 'AI Blog Articles',
title: 'Founder',
picture: '/logo.webp',
url: 'https://getaiblogarticles.com',
},
},
}),
starlight({
title: 'AI Blog Articles',
customCss: ['./src/styles/tailwind.css'],
description: 'Documentation for AI Blog Articles.',
logo: {
src: '/src/assets/logo.webp',
alt: 'AI Blog Articles',
},
head: [
{
tag: 'script',
attrs: {
src: 'https://www.googletagmanager.com/ns.html?id=GTM-5LTSJ89R',
},
},
{
tag: 'script',
content: `
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});
var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-5LTSJ89R');
`,
},
],
// continue the rest
});
Thanks, for the code — could you also share the sidebar part from the Starlight options?
You are right that in general trailingSlash doesn’t modify links, but Starlight’s sidebar is a bit of a special case where we use that setting also for the link output. Curious what your sidebar config looks like because we use trailingSlash: 'always' in the Starlight docs and do get links that end in /.
hidden sand
@coral apex Sure, here is the sidebar part:
sidebar: [
{
label: 'Documentation',
items: [
{
label: 'Introduction',
link: '/',
},
{
label: 'Privacy Policy',
link: '/privacy-policy/',
},
{
label: 'Terms and Conditions',
link: '/terms-and-conditions/',
},
],
},
{
label: 'Guides',
items: [],
},
],
}),
tailwind({ applyBaseStyles: false }),
],
});
@coral apex did you have a chance to look at this?
light zealot
Do you see this problem on any page or just on the blogs page? (if you don't have a non-blog page can you add an empty one just to check?)
hidden sand
Only on the blog page @light zealot. Have a look here: https://docs.getaiblogarticles.com/
light zealot
Yeah, the problem is probably on starlight-blog, not on Starlight itself. But it should be an easy fix
It doesn't share the sidebar generation with Starlight
light zealot
I checked on starlight-blog and it does handle trailing slash. Tried on a fresh insteall and it is all working fine.
I noticed one thing weird though, you have starlightBlog added as an integration, but it should be a plugin inside of starlight (see here, it should be nested, not above it).
That should be doing nothing. Do you have it twice in your config?
Is the repo for that site public?
hidden sand
@light zealot Interesting!
Yes, the repo is OpenSaaS, which is open-source. I will give a try at nesting it today.
hidden sand
@light zealot
I tried nesting starlight-blog inside starlight :
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
import starlightBlog from 'starlight-blog';
import sitemap from '@astrojs/sitemap';
import tailwind from "@astrojs/tailwind";
// https://astro.build/config
export default defineConfig({
site: 'https://docs.getaiblogarticles.com',
integrations: [
sitemap(),
starlight({
plugins: [
starlightBlog({
title: 'Blog',
customCss: ['./src/styles/tailwind.css'],
authors: {
ric: {
name: 'AI Blog Articles',
title: 'Founder',
picture: '/logo.webp',
url: 'https://getaiblogarticles.com/',
},
},
}),
],
title: 'AI Blog Articles',
(...)
And got the following error when building:
Error: Invalid config passed to starlight integration
Unrecognized key(s) in object: 'plugins'
at Module.StarlightIntegration [as default] (/Users/rbatista19/aiblogarticles1/blog/node_modules/@astrojs/starlight/index.ts:19:9)
at /Users/rbatista19/aiblogarticles1/blog/astro.config.mjs:12:14
at async instantiateModule (file:///Users/rbatista19/aiblogarticles1/blog/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:56052:9)
Oh, I see.
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
hidden sand
gotcha, thanks @light zealot
hidden sand
Hey @light zealot I just updated it and it still has the missing trailing slash - is there any config I need to do?
Here is my current package.json:
{
"name": "docs",
"type": "module",
"version": "0.0.1",
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro check && astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@astrojs/check": "^0.6.0",
"@astrojs/starlight": "^0.22.2",
"@astrojs/starlight-tailwind": "^2.0.2",
"@astrojs/tailwind": "^5.1.0",
"astro": "^4.3.5",
"sharp": "^0.32.5",
"starlight-blog": "^0.7.1",
"tailwindcss": "^3.4.1",
"typescript": "^5.3.2"
}
}
<@&1129102257422610512> can I have someone look into this please? 🙏
rigid sundial
OK, it took a minute, but it looks like this is indeed a bug in starlight-blog (cc @brazen shadow). The sidebar override that creates the URLs doesn't seem to calculate them with the trailing slash.
Replicated the issue locally, but the demo blog serves as a good repro (https://starlight-blog-docs.vercel.app/blog/).
It's late where I am, so I'll leave this here for now, but I'll create an issue in the morning (unless someone beats me too it)
hidden sand
Super, @rigid sundial !
hidden sand
Any news @rigid sundial ?
rigid sundial
opened an issue to track. I'll try to create a PR later
https://github.com/HiDeoo/starlight-blog/issues/48
sorry it took so long, had a busy last couple of days 😅
but I will create the fix today
rigid sundial
oh wait @hidden sand. looks like trailingSlash is respected. using your config I'm unable to replicate the 404 error you were talking about above. can you share what URL(s) was generated that lead to the 404?
brazen shadow
Thanks for pointing out this thread to me Reuben, totally missed it.
Assuming https://github.com/wasp-lang/open-saas/tree/main/blog is the correct theme repo, it looks like adding trailingSlash: 'always' properly generates sidebar blog links with a trailing slash. The header blog link is missing a trailing slash in this case altho this one is not generated by the blog plugin but the override in src/components/MyHeader.astro which is hardcoded to <a href="/blog"> so this one would need to be updated manually.
hidden sand
Yup, after updating and adding trailingSlash: 'always' (and updating src/components/MyHeader.astrowith <a href="/blog/">, it works brilliantly now 😄