CM-795: Add gatsby-plugin-anchor-links

bcgov · Jul 19, 2023 · 2c2a29f · 2c2a29f
1 parent 08f540b
commit 2c2a29f
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 7 deletions.
diff --git a/src/gatsby/gatsby-config.js b/src/gatsby/gatsby-config.js
@@ -169,5 +169,11 @@ module.exports = {
         },
       },
     },
+    {
+      resolve: "gatsby-plugin-anchor-links",
+      options: {
+        offset: -100,
+      }
+    }
   ],
 }
diff --git a/src/gatsby/package-lock.json b/src/gatsby/package-lock.json
diff --git a/src/gatsby/package.json b/src/gatsby/package.json
@@ -20,6 +20,7 @@
     "cheerio": "^1.0.0-rc.12",
     "date-fns": "^2.28.0",
     "gatsby": "^5.11.0",
+    "gatsby-plugin-anchor-links": "^1.2.1",
     "gatsby-plugin-canonical-urls": "^5.11.0",
     "gatsby-plugin-emotion": "^8.11.0",
     "gatsby-plugin-image": "^3.11.0",

diff --git a/src/gatsby/src/components/park/parkAccessStatus.js b/src/gatsby/src/components/park/parkAccessStatus.js
@@ -1,8 +1,9 @@
 import React from "react"
 import PropTypes from "prop-types"
-import { graphql, useStaticQuery, Link } from "gatsby"
+import { graphql, useStaticQuery } from "gatsby"
 import { Card, CardHeader, Avatar } from "@mui/material"
 import { styled } from '@mui/material/styles';
+import { AnchorLink } from "gatsby-plugin-anchor-links";
 
 import blueStatusIcon from "../../images/park/blue-status-64.png"
 import redStatusIcon from "../../images/park/red-status-64.png"
@@ -119,7 +120,7 @@ export default function ParkAccessStatus({ advisories, slug }) {
             title={parkStatusText}
           />
       ) : (
-        <Link to={`/${slug}/#park-advisory-details-container`}>
+        <AnchorLink to={`/${slug}/#park-advisory-details-container`}>
           <CardHeader
             className="access-icon"
             avatar={
@@ -133,7 +134,7 @@ export default function ParkAccessStatus({ advisories, slug }) {
             }
             title={parkStatusText}
           />
-        </Link>
+        </AnchorLink>
       )}
     </StyledCard>
   )

diff --git a/src/gatsby/src/pages/find-a-park.js b/src/gatsby/src/pages/find-a-park.js
@@ -43,6 +43,7 @@ import campfireBanIcon from "../../static/icons/campfire-ban.svg"
 
 import "../styles/search.scss"
 import { addSmallImagePrefix, handleImgError } from "../utils/helpers";
+import { AnchorLink } from "gatsby-plugin-anchor-links";
 
 export const query = graphql`
   {
@@ -1001,9 +1002,9 @@ export default function FindAPark({ location, data }) {
                                                 <Icon src={petsIcon} label="Pets on leash" size={iconSize} />
                                               }
                                               {(r.parkActivities.length > 0 || r.parkFacilities.length > 0) &&
-                                                <Link href={`/${r.slug}/#park-camping-details-container`}>
+                                                <AnchorLink to={`/${r.slug}/#park-camping-details-container`}>
                                                   <p aria-label="See all facilities and activities">see all</p>
-                                                </Link>
+                                                </AnchorLink>
                                               }
                                             </div>
                                             <div className="park-content-bottom--right text-blue">
@@ -1129,9 +1130,9 @@ export default function FindAPark({ location, data }) {
                                               <Icon src={petsIcon} label="Pets on leash" size={iconSize} />
                                             }
                                             {(r.parkActivities.length > 0 || r.parkFacilities.length > 0) &&
-                                              <Link href={`/${r.slug}/#park-camping-details-container`}>
+                                              <AnchorLink to={`/${r.slug}/#park-camping-details-container`}>
                                                 <p aria-label="See all facilities and activities">see all</p>
-                                              </Link>
+                                              </AnchorLink>
                                             }
                                           </div>
                                           <div className="text-blue">