Merge pull request #500 from processing/fix/paths

Try to fix link path issues

Author: Qianqianye

astro.config.mjs

@@ -50,7 +50,7 @@ export default defineConfig({
     defaultStrategy: "viewport",
     prefetchAll: true,
   },
-  trailingSlash: "ignore",
+  trailingSlash: "always",
   build: {
     format: "directory",
   },

src/components/GridItem/ContributorDoc.astro

@@ -11,7 +11,7 @@ const { item } = Astro.props;
 
 <a
   class="group hover:no-underline"
-  href={`/contribute/${removeLocaleAndExtension(item.slug)}`}
+  href={`/contribute/${removeLocaleAndExtension(item.slug)}/`}
 >
   <div
     class="grid place-content-center bg-accent-color text-accent-type-color aspect-photo p-4"

src/components/GridItem/Event.astro

@@ -19,7 +19,7 @@ const dayString = new Date(item.data.date).toLocaleDateString(currentLocale, {
 
 <a
   class="group hover:no-underline"
-  href={`/events/${removeLocaleAndExtension(item.slug)}`}
+  href={`/events/${removeLocaleAndExtension(item.slug)}/`}
 >
   <!-- Could potentially reduce width needed here if featured and non-featured events were distinguished -->
   <Image

src/components/GridItem/Example.astro

@@ -13,7 +13,7 @@ const { item, lazyLoad } = Astro.props;
 
 <a
   class="group hover:no-underline"
-  href={`/examples/${exampleContentSlugToLegacyWebsiteSlug(item.slug)}`}
+  href={`/examples/${exampleContentSlugToLegacyWebsiteSlug(item.slug)}/`}
 >
   <Image
     src={item.data.featuredImage}

src/components/GridItem/Reference.astro

@@ -11,7 +11,7 @@ const { item } = Astro.props;
 
 <a
   class="group hover:no-underline"
-  href={`/reference/${normalizeReferenceRoute(item.id)}`}
+  href={`/reference/${normalizeReferenceRoute(item.id)}/`}
 >
   <p
     class="text-body mt-xs text-body-mono break-words break-keep group-hover:underline"

src/components/GridItem/Sketch.astro

@@ -23,7 +23,7 @@ const height = Math.min(
 
 <a
   class="group w-full h-full block hover:no-underline"
-  href={`/sketches/${item.visualID}`}
+  href={`/sketches/${item.visualID}/`}
 >
   {
     // This isn't alt text ideal but we have no way of knowing what

src/components/GridItem/Tutorial.astro

@@ -10,7 +10,7 @@ interface Props {
 const { item, lazyLoad } = Astro.props;
 ---
 
-<a href={`/tutorials/${item.slug}`} class="group hover:no-underline">
+<a href={`/tutorials/${item.slug}/`} class="group hover:no-underline">
   {
     item.data.featuredImageAlt && item.data.featuredImage && (
       <Image

src/components/LinkWrapper/index.astro

@@ -0,0 +1,10 @@
+---
+import { rewriteRelativeLink } from "@pages/_utils";
+const rawProps = Astro.props;
+const props = { ...rawProps };
+if (props.href) {
+  props.href = rewriteRelativeLink(props.href);
+}
+---
+
+<a {...props}><slot /></a>

src/components/Nav/MainNavLinks.tsx

@@ -90,7 +90,7 @@ export const MainNavLinks = ({
             </a>
           </li>
           <li>
-            <a className={styles.buttonlink} href="/donate">
+            <a className={styles.buttonlink} href="/donate/">
               <div class="mr-xxs">
                 <Icon kind="heart" />
               </div>

src/components/Nav/index.astro

@@ -11,12 +11,12 @@ const isHomepage = pathMinusLocale === "/";
 const t = await getUiTranslator(currentLocale);
 
 const mainLinks = [
-  { url: "/reference", label: t("Reference") },
-  { url: "/tutorials", label: t("Tutorials") },
-  { url: "/examples", label: t("Examples") },
-  { url: "/contribute", label: t("Contribute") },
-  { url: "/community", label: t("Community") },
-  { url: "/about", label: t("About") },
+  { url: "/reference/", label: t("Reference") },
+  { url: "/tutorials/", label: t("Tutorials") },
+  { url: "/examples/", label: t("Examples") },
+  { url: "/contribute/", label: t("Contribute") },
+  { url: "/community/", label: t("Community") },
+  { url: "/about/", label: t("About") },
 ] as { url: string; label: string }[];
 
 const editorButtonLabel = t("Start Coding");