Links: trailing-slash internal URLs (no dir-redirect → kills the :8080/cached-301 issue)

src/components/Nav.astro

@@ -5,8 +5,8 @@ import { site } from "../data/site";
 const links = [
   { label: "About", href: "/#about" },
   { label: "Skills", href: "/#skills" },
-  { label: "Projects", href: "/projects" },
-  { label: "Blog", href: "/blog" },
+  { label: "Projects", href: "/projects/" },
+  { label: "Blog", href: "/blog/" },
   { label: "Contact", href: "/#contact" },
 ];
 ---

src/components/PostList.astro

@@ -13,7 +13,7 @@ const { posts } = Astro.props;
   {
     posts.map((post) => (
       <li class="post" data-reveal>
-        <a class="post__link" href={`/blog/${post.id}`}>
+        <a class="post__link" href={`/blog/${post.id}/`}>
           <div class="post__meta mono">
             <time datetime={post.data.date.toISOString()}>{formatDate(post.data.date)}</time>
             <span class="post__sep">·</span>

src/components/ProjectCard.astro

@@ -5,7 +5,7 @@ interface Props {
 }
 const { entry } = Astro.props;
 const p = entry.data;
-const href = `/projects/${entry.id}`;
+const href = `/projects/${entry.id}/`;
 ---
 
 <a class="project card" href={href} data-reveal>

src/pages/blog/[slug].astro

@@ -14,10 +14,10 @@ const { entry } = Astro.props;
 const { Content } = await render(entry);
 ---
 
-<Layout title={entry.data.title} path={`/blog/${entry.id}`} description={entry.data.summary}>
+<Layout title={entry.data.title} path={`/blog/${entry.id}/`} description={entry.data.summary}>
   <article class="post">
     <div class="container post__inner">
-      <a class="post__back mono" href="/blog">← All posts</a>
+      <a class="post__back mono" href="/blog/">← All posts</a>
 
       <header class="post__head" data-reveal>
         <div class="post__meta mono">
@@ -28,7 +28,7 @@ const { Content } = await render(entry);
         <h1 class="post__title">{entry.data.title}</h1>
         <ul class="post__tags">
           {entry.data.tags.map((t) => (
-            <li><a class="tag" href={`/blog/tags/${t}`}>{t}</a></li>
+            <li><a class="tag" href={`/blog/tags/${t}/`}>{t}</a></li>
           ))}
         </ul>
       </header>

src/pages/blog/index.astro

@@ -18,7 +18,7 @@ const tags = allTags(posts);
       <nav class="blog__tags" aria-label="Filter by tag" data-reveal>
         <span class="mono blog__tags-label">tags:</span>
         {tags.map((t) => (
-          <a class="tag blog__tag" href={`/blog/tags/${t}`}>{t}</a>
+          <a class="tag blog__tag" href={`/blog/tags/${t}/`}>{t}</a>
         ))}
       </nav>
     )}

src/pages/blog/tags/[tag].astro

@@ -17,10 +17,10 @@ export const getStaticPaths = (async () => {
 const { tag, posts } = Astro.props;
 ---
 
-<Layout title={`#${tag}`} path={`/blog/tags/${tag}`} description={`Posts tagged ${tag}.`}>
+<Layout title={`#${tag}`} path={`/blog/tags/${tag}/`} description={`Posts tagged ${tag}.`}>
   <Section id="tag" eyebrow="Tag" index="#" title={`Posts tagged “${tag}”`}>
     <p class="tag-page__back" data-reveal>
-      <a class="btn" href="/blog">← All posts</a>
+      <a class="btn" href="/blog/">← All posts</a>
     </p>
     <PostList posts={posts} />
   </Section>

src/pages/index.astro

@@ -32,7 +32,7 @@ const featuredProjects = (await getCollection("projects", (p) => p.data.featured
       {featuredProjects.map((entry) => <ProjectCard entry={entry} />)}
     </div>
     <p class="projects__more" data-reveal>
-      <a class="btn" href="/projects">All projects →</a>
+      <a class="btn" href="/projects/">All projects →</a>
     </p>
   </Section>
 

src/pages/projects/[slug].astro

@@ -14,10 +14,10 @@ const p = entry.data;
 const { Content } = await render(entry);
 ---
 
-<Layout title={p.title} path={`/projects/${entry.id}`} description={p.summary}>
+<Layout title={p.title} path={`/projects/${entry.id}/`} description={p.summary}>
   <article class="case">
     <div class="container case__inner">
-      <a class="case__back mono" href="/projects">← All projects</a>
+      <a class="case__back mono" href="/projects/">← All projects</a>
 
       <header class="case__head" data-reveal>
         <p class="eyebrow">Case study</p>