From eb901ccec9c2e3b2676469745012e9358c952f4f Mon Sep 17 00:00:00 2001
From: Andrew Berry <andrew.berry@lullabot.com>
Date: Mon, 19 Sep 2022 04:59:57 -0400
Subject: [PATCH] fix: Support the trailingSlash option (#67)

* feat: default new sites and our dev sites to using trailing slashes

* fix: use trailing slashes if set in the TOC

* fix: use trailing slashes in breadcrumbs
---
 packages/example/gatsby-config.js                         | 1 +
 packages/gatsby-theme-adr/gatsby-config.js                | 1 +
 packages/gatsby-theme-adr/src/components/AdrToc.tsx       | 8 ++++----
 .../gatsby-theme-adr/src/components/PageBreadcrumbs.tsx   | 7 ++++---
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/example/gatsby-config.js b/packages/example/gatsby-config.js
index 5007ccc..94b6f6a 100644
--- a/packages/example/gatsby-config.js
+++ b/packages/example/gatsby-config.js
@@ -4,6 +4,7 @@ module.exports = {
       resolve: '@lullabot/gatsby-theme-adr',
       options: {
         contentPath: 'adrs',
+        trailingSlash: 'always',
         siteMetadata: {
           siteUrl: 'https://architecture.my-company.com',
           title: "My Company's Architecture Decision Records",
diff --git a/packages/gatsby-theme-adr/gatsby-config.js b/packages/gatsby-theme-adr/gatsby-config.js
index 7549f7b..15f6991 100644
--- a/packages/gatsby-theme-adr/gatsby-config.js
+++ b/packages/gatsby-theme-adr/gatsby-config.js
@@ -12,6 +12,7 @@ module.exports = ({
 }) => ({
   jsxRuntime: 'automatic',
   siteMetadata,
+  trailingSlash: 'always',
   plugins: [
     'gatsby-plugin-image',
     'gatsby-plugin-react-helmet',
diff --git a/packages/gatsby-theme-adr/src/components/AdrToc.tsx b/packages/gatsby-theme-adr/src/components/AdrToc.tsx
index 012f26d..ae54ea5 100644
--- a/packages/gatsby-theme-adr/src/components/AdrToc.tsx
+++ b/packages/gatsby-theme-adr/src/components/AdrToc.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { graphql, useStaticQuery } from 'gatsby';
+import { Link, graphql, useStaticQuery } from 'gatsby';
 
 type AdrToc = {
   id: string;
@@ -13,12 +13,12 @@ function TocLink({
 }: LinkParts & { depth: number }) {
   return (
     <li>
-      <a
-        href={url}
+      <Link
+        to={url}
         className="text-blue-500 flex items-center ml-2 mt-1 px-2 py-1 text-sm font-medium hover:text-blue-800 hover:underline"
       >
         <span className="truncate">{title}</span>
-      </a>
+      </Link>
       {items && items.length ? (
         <ul className={`ml-${depth * 2} mt-0.5`}>
           {items.map((item, index) => (
diff --git a/packages/gatsby-theme-adr/src/components/PageBreadcrumbs.tsx b/packages/gatsby-theme-adr/src/components/PageBreadcrumbs.tsx
index c5f3a8b..73fa29c 100644
--- a/packages/gatsby-theme-adr/src/components/PageBreadcrumbs.tsx
+++ b/packages/gatsby-theme-adr/src/components/PageBreadcrumbs.tsx
@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react';
 import { ChevronRightIcon, HomeIcon } from '@heroicons/react/outline';
+import { Link } from 'gatsby';
 
 type PageBreadcrumbsProps = { uri: string; title: string };
 const PageBreadcrumbs = ({
@@ -28,13 +29,13 @@ const PageBreadcrumbs = ({
                 className="flex-shrink-0 h-5 w-5 text-charcoal-700"
                 aria-hidden="true"
               />
-              <a
-                href={page.href}
+              <Link
+                to={page.href}
                 className="ml-4 text-sm font-medium text-charcoal-700 hover:text-charcoal-800"
                 aria-current={page.current ? 'page' : undefined}
               >
                 {page.name}
-              </a>
+              </Link>
             </div>
           </li>
         ))}