Fix 404 errors due to trailing slash issues on many pages

Author: webstackdev

src/components/Carousel/index.astro

@@ -98,7 +98,7 @@ if (limit) {
               <div class="embla__slide flex-[0_0_100%] md:flex-[0_0_50%] lg:flex-[0_0_33.333%] min-w-0">
                 <article class="group h-full">
                   <a
-                    href={`/${type}/${item.id}/`}
+                    href={`/${type}/${item.id}`}
                     class="block h-full bg-[color:var(--color-bg)] rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-[color:var(--color-border)] hover:border-[color:var(--color-primary)] transform hover:-translate-y-2"
                   >
                     {'icon' in item.data && item.data.icon && (

src/pages/articles/[...slug].astro

@@ -16,7 +16,7 @@ export async function getStaticPaths() {
 
 const { article } = Astro.props
 const renderedContent = article.rendered?.html || article.body || 'Content not available'
-const path = `/articles/${article.id}/`
+const path = `/articles/${article.id}`
 const pageTitle = article.data.title
 const cover = article.data.image
 const authorId =

src/pages/articles/index.astro

@@ -24,7 +24,7 @@ const sortedArticles = allArticles.sort(
     {
       sortedArticles.map(article => (
         <article class="bg-[var(--color-theme-bg)] rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 overflow-hidden group">
-          <a href={`/articles/${article.id}/`} class="block">
+          <a href={`/articles/${article.id}`} class="block">
             {article.data.image && (
               <div class="aspect-video overflow-hidden">
                 <img

src/pages/case-studies/[slug].astro

@@ -13,7 +13,7 @@ export async function getStaticPaths() {
 }
 
 const { caseStudy } = Astro.props
-const path = `/case-studies/${caseStudy.id}/`
+const path = `/case-studies/${caseStudy.id}`
 const pageTitle = caseStudy.data.title
 const cover = caseStudy.data.image
   ? typeof caseStudy.data.image === 'string'

src/pages/case-studies/index.astro

@@ -20,7 +20,7 @@ const sortedCaseStudies = allCaseStudies.sort(
     {
       sortedCaseStudies.map(caseStudy => (
         <article class="bg-[var(--color-theme-bg)] rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 overflow-hidden group">
-          <a href={`/case-studies/${caseStudy.id}/`} class="block h-full">
+          <a href={`/case-studies/${caseStudy.id}`} class="block h-full">
             {caseStudy.data.image && (
               <div class="aspect-video overflow-hidden">
                 <img

src/pages/downloads/[...slug].astro

@@ -21,7 +21,7 @@ export async function getStaticPaths() {
 
 const { download } = Astro.props
 const renderedContent = download.rendered?.html || download.body || 'Content not available'
-const path = `/downloads/${download.id}/`
+const path = `/downloads/${download.id}`
 const pageTitle = download.data.title
 const cover = download.data.image
 const authorId =

src/pages/services/[slug].astro

@@ -13,7 +13,7 @@ export async function getStaticPaths() {
 }
 
 const { service } = Astro.props
-const path = `/services/${service.id}/`
+const path = `/services/${service.id}`
 const pageTitle = service.data.title
 const icon = service.data.icon ? { src: service.data.icon, alt: service.data.title } : undefined
 ---

src/pages/services/index.astro

@@ -30,7 +30,7 @@ const services = allServices.sort(
           {services.map(service => (
             <li class="service-item">
               <a
-                href={`/services/${service.id}/`}
+                href={`/services/${service.id}`}
                 class="block group hover:bg-[var(--color-theme-bg-offset)] rounded-lg p-6 transition-colors duration-200 border border-transparent hover:border-[var(--color-theme-border)]"
               >
                 <div class="flex items-start space-x-6">

src/pages/tags/[tag].astro

@@ -80,7 +80,7 @@ const path = `/tags/${tag}/`
             {paginatedContent.map(item => (
               <article class="bg-[var(--color-theme-bg)] rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 overflow-hidden group">
                 <a
-                  href={`/${item.type === 'case-study' ? 'case-studies' : item.type === 'service' ? 'services' : 'articles'}/${item.id}/`}
+                  href={`/${item.type === 'case-study' ? 'case-studies' : item.type === 'service' ? 'services' : 'articles'}/${item.id}`}
                   class="block h-full"
                 >
                   {'image' in item.data && item.data.image && (

src/pages/tags/index.astro

@@ -85,7 +85,7 @@ const path = '/tags/'
                 {contentPreview.map(item => (
                   <article class="bg-[var(--color-theme-bg)] rounded-xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 overflow-hidden group">
                     <a
-                      href={`/${item.type === 'case-study' ? 'case-studies' : item.type === 'service' ? 'services' : 'articles'}/${item.id}/`}
+                      href={`/${item.type === 'case-study' ? 'case-studies' : item.type === 'service' ? 'services' : 'articles'}/${item.id}`}
                       class="block h-full"
                     >
                       {'image' in item.data && item.data.image && (
@@ -150,7 +150,7 @@ const path = '/tags/'
                 {contentPreview.slice(0, 1).map(item => (
                   <article class="bg-[var(--color-theme-bg)] rounded-xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 overflow-hidden group">
                     <a
-                      href={`/${item.type === 'case-study' ? 'case-studies' : item.type === 'service' ? 'services' : 'articles'}/${item.id}/`}
+                      href={`/${item.type === 'case-study' ? 'case-studies' : item.type === 'service' ? 'services' : 'articles'}/${item.id}`}
                       class="block"
                     >
                       {'image' in item.data && item.data.image && (