Add trailing slashes for internal link redirect fix

Author: shovanch

astro.config.mjs

@@ -16,6 +16,7 @@ import {
 // https://astro.build/config
 export default defineConfig({
   site: 'https://shovanch.com',
+  trailingSlash: 'always',
   build: {
     format: 'directory',
     // Inline all styles to eliminate render-blocking CSS

src/components/base-head.astro

@@ -205,7 +205,7 @@ const canonicalURL = canonical
     "prerender": [
       {
         "where": { "href_matches": "/*" },
-        "eagerness": "moderate"
+        "eagerness": "eager"
       }
     ]
   }
@@ -220,19 +220,27 @@ const canonicalURL = canonical
 <script>
   // Only track page views when page is actually visible (not prerendered)
   if (document.prerendering) {
-    document.addEventListener('prerenderingchange', () => {
-      if (window.umami) umami.track();
-    }, { once: true });
+    document.addEventListener(
+      'prerenderingchange',
+      () => {
+        if (window.umami) umami.track();
+      },
+      { once: true },
+    );
   } else if (document.visibilityState === 'visible') {
     document.addEventListener('DOMContentLoaded', () => {
       if (window.umami) umami.track();
     });
   } else {
-    document.addEventListener('visibilitychange', () => {
-      if (document.visibilityState === 'visible' && window.umami) {
-        umami.track();
-      }
-    }, { once: true });
+    document.addEventListener(
+      'visibilitychange',
+      () => {
+        if (document.visibilityState === 'visible' && window.umami) {
+          umami.track();
+        }
+      },
+      { once: true },
+    );
   }
 </script>
 

src/components/nav-desktop.astro

@@ -21,7 +21,7 @@ import { menuItems } from '~/config/site';
   </div>
   <div class="flex items-center gap-3" role="group" aria-label="Search options">
     <a
-      href="/search"
+      href="/search/"
       class="focus:ring-theme-text px-2 py-1 font-sans text-xl font-medium"
       aria-label="Search posts and pages"
     >

src/config/plugins.ts

@@ -12,6 +12,7 @@ import { rehypeExternalLinks } from '../libs/rehype-external-links';
 import { rehypeImageCaptions } from '../libs/rehype-image-captions';
 import { rehypeRawHtmlInCode } from '../libs/rehype-raw-html-in-code';
 import { rehypeToc } from '../libs/rehype-toc';
+import { rehypeTrailingSlash } from '../libs/rehype-trailing-slash';
 import { remarkCallouts } from '../libs/remark-callouts';
 import { remarkSidenotes } from '../libs/remark-sidenotes';
 import { remarkWikilinksSimple } from '../libs/remark-wikilinks-simple.js';
@@ -25,6 +26,7 @@ export const remarkPlugins = [
 ];
 
 export const rehypePlugins: any[] = [
+  rehypeTrailingSlash,
   rehypeToc,
   rehypeHeadingIds,
   [

src/config/site.ts

@@ -50,11 +50,11 @@ export const defaultMeta: SiteMeta = {
 export const navigationConfig = {
   mainMenu: [
     { label: 'home', url: '/' },
-    { label: 'posts', url: '/posts' },
-    { label: 'notes', url: '/notes' },
-    { label: 'fragments', url: '/fragments' },
-    { label: 'about', url: '/about' },
-    { label: 'search', url: '/search' },
+    { label: 'posts', url: '/posts/' },
+    { label: 'notes', url: '/notes/' },
+    { label: 'fragments', url: '/fragments/' },
+    { label: 'about', url: '/about/' },
+    { label: 'search', url: '/search/' },
   ],
   socialLinks: [
     { label: 'email', url: `mailto:${siteConfig.email}` },
@@ -87,19 +87,19 @@ export const exploreLinks: ExploreLink[] = [
   {
     title: 'Posts',
     description: "Essays I've taken time to finish",
-    url: '/posts',
+    url: '/posts/',
   },
   {
     title: 'Notes',
     description: "Stuff I'm learning, mostly for myself",
-    url: '/notes',
+    url: '/notes/',
   },
   {
     title: 'Fragments',
     description: 'Stray thoughts, links, tiny updates',
-    url: '/fragments',
+    url: '/fragments/',
   },
-  { title: 'Search', description: 'Everything I’ve written', url: '/search' },
+  { title: 'Search', description: "Everything I've written", url: '/search/' },
 ];
 
 // Re-export for backward compatibility (from the old data/index.ts)

src/libs/rehype-trailing-slash.ts

@@ -0,0 +1,34 @@
+/**
+ * Rehype plugin to add trailing slashes to internal links
+ * Ensures consistency with Astro's trailingSlash: 'always' config
+ */
+import type { Root } from 'hast';
+import { visit } from 'unist-util-visit';
+
+export function rehypeTrailingSlash() {
+  return (tree: Root) => {
+    visit(tree, 'element', (node) => {
+      if (node.tagName !== 'a') return;
+
+      const href = node.properties?.href;
+      if (typeof href !== 'string') return;
+
+      // Skip external links, anchors, mailto, tel, and already-slashed paths
+      if (
+        href.startsWith('http') ||
+        href.startsWith('#') ||
+        href.startsWith('mailto:') ||
+        href.startsWith('tel:') ||
+        href.endsWith('/') ||
+        href.includes('.')  // Skip files like /file.pdf, /image.png
+      ) {
+        return;
+      }
+
+      // Add trailing slash to internal links
+      // Handle links with anchors: /about#section -> /about/#section
+      const [path, hash] = href.split('#');
+      node.properties.href = hash ? `${path}/#${hash}` : `${path}/`;
+    });
+  };
+}