fix: add trailing slash to links to avoid extra redirects (#246)

Add trailing slash to links for improved consistency with RSS links and to avoid unnecessary redirects.

---------

Co-authored-by: satnaing <satnaingdev@gmail.com>

src/components/Breadcrumbs.astro

@@ -44,7 +44,7 @@ breadcrumbList[0] === "tags" &&
           </li>
         ) : (
           <li>
-            <a href={`/${breadcrumb}`}>{breadcrumb}</a>
+            <a href={`/${breadcrumb}/`}>{breadcrumb}</a>
             <span aria-hidden="true">&raquo;</span>
           </li>
         )

src/components/Header.astro

@@ -56,23 +56,23 @@ const { activeNav } = Astro.props;
         </button>
         <ul id="menu-items" class="display-none sm:flex">
           <li>
-            <a href="/posts" class={activeNav === "posts" ? "active" : ""}>
+            <a href="/posts/" class={activeNav === "posts" ? "active" : ""}>
               Posts
             </a>
           </li>
           <li>
-            <a href="/tags" class={activeNav === "tags" ? "active" : ""}>
+            <a href="/tags/" class={activeNav === "tags" ? "active" : ""}>
               Tags
             </a>
           </li>
           <li>
-            <a href="/about" class={activeNav === "about" ? "active" : ""}>
+            <a href="/about/" class={activeNav === "about" ? "active" : ""}>
               About
             </a>
           </li>
           <li>
             <LinkButton
-              href="/search"
+              href="/search/"
               className={`focus-outline p-3 sm:p-1 ${
                 activeNav === "search" ? "active" : ""
               } flex`}

src/components/Search.tsx

@@ -112,7 +112,7 @@ export default function SearchBar({ searchList }: Props) {
         {searchResults &&
           searchResults.map(({ item, refIndex }) => (
             <Card
-              href={`/posts/${item.slug}`}
+              href={`/posts/${item.slug}/`}
               frontmatter={item.data}
               key={`${refIndex}-${item.slug}`}
             />

src/components/Tag.astro

@@ -13,7 +13,7 @@ const { tag, size = "sm" } = Astro.props;
   }`}
 >
   <a
-    href={`/tags/${tag}`}
+    href={`/tags/${tag}/`}
     transition:name={tag}
     class={`${size === "sm" ? "text-sm" : "text-lg"} pr-2 group`}
   >

src/layouts/Posts.astro

@@ -23,7 +23,7 @@ const { currentPage, totalPages, paginatedPosts } = Astro.props;
     <ul>
       {
         paginatedPosts.map(({ data, slug }) => (
-          <Card href={`/posts/${slug}`} frontmatter={data} />
+          <Card href={`/posts/${slug}/`} frontmatter={data} />
         ))
       }
     </ul>
@@ -32,8 +32,8 @@ const { currentPage, totalPages, paginatedPosts } = Astro.props;
   <Pagination
     {currentPage}
     {totalPages}
-    prevUrl={`/posts${currentPage - 1 !== 1 ? "/" + (currentPage - 1) : ""}`}
-    nextUrl={`/posts/${currentPage + 1}`}
+    prevUrl={`/posts${currentPage - 1 !== 1 ? "/" + (currentPage - 1) : ""}/`}
+    nextUrl={`/posts/${currentPage + 1}/`}
   />
 
   <Footer noMarginTop={totalPages > 1} />

src/layouts/TagPosts.astro

@@ -30,7 +30,7 @@ const { currentPage, totalPages, paginatedPosts, tag, tagName } = Astro.props;
     <ul>
       {
         paginatedPosts.map(({ data, slug }) => (
-          <Card href={`/posts/${slug}`} frontmatter={data} />
+          <Card href={`/posts/${slug}/`} frontmatter={data} />
         ))
       }
     </ul>
@@ -41,8 +41,8 @@ const { currentPage, totalPages, paginatedPosts, tag, tagName } = Astro.props;
     {totalPages}
     prevUrl={`/tags/${tag}${
       currentPage - 1 !== 1 ? "/" + (currentPage - 1) : ""
-    }`}
-    nextUrl={`/tags/${tag}/${currentPage + 1}`}
+    }/`}
+    nextUrl={`/tags/${tag}/${currentPage + 1}/`}
   />
 
   <Footer noMarginTop={totalPages > 1} />

src/pages/index.astro

@@ -77,7 +77,7 @@ const socialCount = SOCIALS.filter(social => social.active).length;
             <ul>
               {featuredPosts.map(({ data, slug }) => (
                 <Card
-                  href={`/posts/${slug}`}
+                  href={`/posts/${slug}/`}
                   frontmatter={data}
                   secHeading={false}
                 />
@@ -98,7 +98,7 @@ const socialCount = SOCIALS.filter(social => social.active).length;
               ({ data, slug }, index) =>
                 index < 4 && (
                   <Card
-                    href={`/posts/${slug}`}
+                    href={`/posts/${slug}/`}
                     frontmatter={data}
                     secHeading={false}
                   />
@@ -110,7 +110,7 @@ const socialCount = SOCIALS.filter(social => social.active).length;
     }
 
     <div class="all-posts-btn-wrapper">
-      <LinkButton href="/posts">
+      <LinkButton href="/posts/">
         All Posts
         <svg xmlns="http://www.w3.org/2000/svg"
           ><path

src/pages/rss.xml.ts

@@ -11,7 +11,7 @@ export async function GET() {
     description: SITE.desc,
     site: SITE.website,
     items: sortedPosts.map(({ data, slug }) => ({
-      link: `posts/${slug}`,
+      link: `posts/${slug}/`,
       title: data.title,
       description: data.description,
       pubDate: new Date(data.modDatetime ?? data.pubDatetime),