Merge pull request #51 from ty-coud/fix-pagefind-links

Ensure pagefind links conform to trailingSlashes setting

Author: stelcodes

astro.config.mjs

@@ -25,7 +25,7 @@ import rehypePixelated from './src/plugins/rehype-pixelated' /* Custom plugin to
 // https://astro.build/config
 export default defineConfig({
   site: siteConfig.site,
-  trailingSlash: 'never',
+  trailingSlash: siteConfig.trailingSlashes ? 'always' : 'never',
   prefetch: true,
   markdown: {
     remarkPlugins: [

src/components/Header.astro

@@ -20,7 +20,7 @@ const selectTheme =
       {siteConfig.title}
     </a>
     <div class="flex items-center gap-3 sm:mr-3">
-      <Search />
+      <Search trailingSlashes={siteConfig.trailingSlashes} />
       {lightDarkAutoTheme && <LightDarkAutoButton />}
       {selectTheme && <SelectTheme />}
       <nav id="nav-mobile" aria-label="Menu" class="p-0 text-accent sm:hidden">

src/components/Search.astro

@@ -2,9 +2,11 @@
 import '@pagefind/default-ui/css/ui.css'
 import IconCircleX from '~/icons/circle-x.svg'
 import IconSearch from '~/icons/search.svg'
+
+const { trailingSlashes = false } = Astro.props
 ---
 
-<site-search class="ms-auto" id="search">
+<site-search class="ms-auto" id="search" data-trailing-slashes={trailingSlashes}>
   <button
     class="hover:text-accent flex cursor-pointer items-center justify-center rounded-md"
     aria-keyshortcuts="Control+K Meta+K"
@@ -85,6 +87,7 @@ import IconSearch from '~/icons/search.svg'
     #dialogFrame: HTMLDivElement | null
     #openBtn: HTMLButtonElement | null
     #controller: AbortController
+    trailingSlashes: boolean
 
     constructor() {
       super()
@@ -94,6 +97,12 @@ import IconSearch from '~/icons/search.svg'
       this.#dialogFrame = this.querySelector('.dialog-frame')
       this.#controller = new AbortController()
 
+      this.trailingSlashes = this.dataset.trailingSlashes === 'true' ? true : false
+      this.stripTrailingSlash = (path: string) => path.replace(/(.)\/(#.*)?$/, '$1$2')
+      this.formatURL = !this.trailingSlashes
+        ? this.stripTrailingSlash
+        : (path: string) => path
+
       // Set up events
       if (this.#openBtn) {
         this.#openBtn.addEventListener('click', this.openModal)
@@ -121,12 +130,27 @@ import IconSearch from '~/icons/search.svg'
       const onIdle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1))
       onIdle(async () => {
         const { PagefindUI } = await import('@pagefind/default-ui')
+
         new PagefindUI({
           baseUrl: import.meta.env.BASE_URL,
           bundlePath: import.meta.env.BASE_URL.replace(/\/$/, '') + '/pagefind/',
           element: '#pagefind-search',
           showImages: false,
           showSubResults: true,
+          processResult: (result: {
+            url: string
+            sub_results: Array<{ url: string }>
+          }) => {
+            // Ensure links in search results match the trailing slashes setting
+            result.url = this.formatURL(result.url)
+
+            result.sub_results = result.sub_results.map((res) => {
+              res.url = this.formatURL(res.url)
+              return res
+            })
+
+            return result
+          },
         })
       })
     }

src/pages/about.md

@@ -3,4 +3,4 @@ layout: '~/layouts/MarkdownLayout.astro'
 title: About Me
 ---
 
-The laughing kookaburra (Dacelo novaeguineae) is a bird in the kingfisher subfamily Halcyoninae. It is a large robust kingfisher with a whitish head and a brown eye-stripe. The upperparts are mostly dark brown but there is a mottled light-blue patch on the wing coverts. The underparts are cream-white and the tail is barred with rufous and black. The plumage of the male and female birds is similar. The territorial call is a distinctive laugh that is often delivered by several birds at the same time, and is widely used as a stock sound effect in situations that involve a jungle setting.
+The laughing kookaburra (Dacelo novaeguineae) is a bird in the kingfisher subfamily Halcyoninae. It is a large robust kingfisher with a whitish head and a brown eye-stripe. The upperparts are mostly dark brown but there is a mottled light-blue patch on the wing coverts. The underparts are cream-white and the tail is barred with rufous and black. The plumage of the male and female birds is similar. The territorial call is a distinctive laugh that is often delivered by several birds at the same time, and is widely used as a stock sound effect in situations that involve a jungle setting.

src/pages/social-cards/[slug].png.ts

@@ -31,7 +31,10 @@ const defaultTheme =
     ? siteConfig.themes.include[0]
     : siteConfig.themes.default
 
-const themeStyles = await resolveThemeColorStyles([defaultTheme], siteConfig.themes.overrides)
+const themeStyles = await resolveThemeColorStyles(
+  [defaultTheme],
+  siteConfig.themes.overrides,
+)
 const bg = themeStyles[defaultTheme]?.background
 const fg = themeStyles[defaultTheme]?.foreground
 const accent = themeStyles[defaultTheme]?.accent

src/site.config.ts

@@ -22,6 +22,10 @@ const config: SiteConfig = {
   // For pagination, the number of posts to display per page.
   // The homepage will display half this number in the "Latest Posts" section.
   pageSize: 6,
+  // Whether Astro should resolve trailing slashes in URLs or not.
+  // This value is used in the astro.config.mjs file and in the "Search" component to make sure pagefind links match this setting.
+  // It is not recommended to change this, since most links existing in the site currently do not have trailing slashes.
+  trailingSlashes: false,
   // The navigation links to display in the header.
   navLinks: [
     {

src/types.ts

@@ -173,6 +173,7 @@ export interface SiteConfig {
   socialCardAvatarImage: string
   tags: string[]
   pageSize: number
+  trailingSlashes: boolean
   themes: ThemesConfig
   socialLinks: SocialLinks
   navLinks: NavLink[]