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
Lullabot · Sep 19, 2022 · eb901cc · eb901cc
1 parent 3002bac
commit eb901cc
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
         ))}