SSWConsulting · BrookJeynes · Jan 2, 2024 · Jan 2, 2024 · Jan 2, 2024 · Jan 2, 2024
diff --git a/src/components/breadcrumb/breadcrumb.js b/src/components/breadcrumb/breadcrumb.js
@@ -47,9 +47,10 @@ const Breadcrumbs = ({
 
   return (
     <div className="m-4 md:mx-2 md:ml-4 h-full flex">
-      <Link to={parentSiteUrl} className="mx-2 h-full">
+      {/* `parentSiteUrl` is absolute, `Link` only supports relative urls */}
+      <a href={parentSiteUrl} className="mx-2 h-full">
         <img alt="SSW Foursquare" src={Icon} className="w-4 mt-1" />
-      </Link>
+      </a>
       <div className="w-full">
         <ul className="flex flex-col md:flex-row align-middle breadcrumb">
           <li className="w-auto flex">

diff --git a/src/components/head/head.js b/src/components/head/head.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
-import { StaticQuery, graphql } from 'gatsby';
+import { useStaticQuery, graphql } from 'gatsby';
 import { Location } from '@reach/router';
 import schemaGenerator from '../../helpers/schemaGenerator';
 import { pathPrefix } from '../../../site-config';
@@ -195,34 +195,33 @@ Head.propTypes = {
   location: PropTypes.object.isRequired,
 };
 
-const HeadWithQuery = (props) => (
-  <StaticQuery
-    query={graphql`
-      query {
-        site {
-          siteMetadata {
-            siteTitle
-            siteTitleShort
-            siteDescription
-            siteUrl
-            parentSiteUrl
-            themeColor
-            social {
-              twitter
-              fbAppId
-            }
+function HeadWithQuery(props) {
+  const data = useStaticQuery(graphql`
+    query {
+      site {
+        siteMetadata {
+          siteTitle
+          siteTitleShort
+          siteDescription
+          siteUrl
+          parentSiteUrl
+          themeColor
+          social {
+            twitter
+            fbAppId
           }
         }
       }
-    `}
-    render={(data) => (
-      <Location>
-        {({ location }) => (
-          <Head {...data.site.siteMetadata} {...props} location={location} />
-        )}
-      </Location>
-    )}
-  />
-);
+    }
+  `);
+
+  return (
+    <Location>
+      {({ location }) => (
+        <Head {...data.site.siteMetadata} {...props} location={location} />
+      )}
+    </Location>
+  );
+}
 
 export default HeadWithQuery;
diff --git a/src/components/layout/layout.js b/src/components/layout/layout.js
@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { StaticQuery, graphql, navigate } from 'gatsby';
+import { useStaticQuery, graphql, navigate } from 'gatsby';
 import Head from '../head/head';
 import Header from '../header/header';
 import Footer from '../footer/footer';
@@ -74,20 +74,19 @@ Layout.propTypes = {
   crumbLabel: PropTypes.string,
 };
 
-const LayoutWithQuery = (props) => (
-  <StaticQuery
-    query={graphql`
-      query LayoutQuery {
-        site {
-          siteMetadata {
-            siteTitle
-          }
+function LayoutWithQuery(props) {
+  const data = useStaticQuery(graphql`
+    query LayoutQuery {
+      site {
+        siteMetadata {
+          siteTitle
         }
       }
-    `}
-    render={(data) => <Layout data={data} {...props} />}
-  />
-);
+    }
+  `);
+
+  return <Layout data={data} {...props} />;
+}
 
 LayoutWithQuery.propTypes = {
   children: PropTypes.node.isRequired,

diff --git a/src/components/tooltip/tooltip.js b/src/components/tooltip/tooltip.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-const Tooltip = ({ children, text, showDelay, hideDelay }) => {
+const Tooltip = ({ children, text, showDelay, hideDelay, className = '' }) => {
   const [showTooltip, setShowTooltip] = useState(false);
 
   useEffect(() => {
@@ -23,7 +23,7 @@ const Tooltip = ({ children, text, showDelay, hideDelay }) => {
 
   return (
     <button
-      className="group relative flex h-10 items-center justify-center"
+      className={`group relative flex h-10 items-center justify-center ${className}`}
       onMouseEnter={() => setShowTooltip(true)}
       onMouseLeave={() => setShowTooltip(false)}
     >
@@ -50,6 +50,7 @@ Tooltip.propTypes = {
   text: PropTypes.string.isRequired,
   showDelay: PropTypes.number,
   hideDelay: PropTypes.number,
+  className: PropTypes.string,
 };
 
 export default Tooltip;
diff --git a/src/pages/archived.js b/src/pages/archived.js
@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { StaticQuery, graphql } from 'gatsby';
+import { useStaticQuery, graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import { config } from '@fortawesome/fontawesome-svg-core';
 import Breadcrumb from '../components/breadcrumb/breadcrumb';
@@ -160,88 +160,87 @@ Archived.propTypes = {
   location: PropTypes.object.isRequired,
 };
 
-const ArchivedWithQuery = (props) => (
-  <StaticQuery
-    query={graphql`
-      query ArchiveQuery {
-        main: allMarkdownRemark(
-          filter: {
-            fileAbsolutePath: { regex: "/(categories)/" }
-            frontmatter: { type: { eq: "main" } }
+function ArchivedWithQuery(props) {
+  const data = useStaticQuery(graphql`
+    query ArchiveQuery {
+      main: allMarkdownRemark(
+        filter: {
+          fileAbsolutePath: { regex: "/(categories)/" }
+          frontmatter: { type: { eq: "main" } }
+        }
+      ) {
+        nodes {
+          html
+          frontmatter {
+            type
+            title
+            index
           }
-        ) {
-          nodes {
-            html
-            frontmatter {
-              type
-              title
-              index
-            }
-            parent {
-              ... on File {
-                name
-              }
+          parent {
+            ... on File {
+              name
             }
           }
         }
-        topCategories: allMarkdownRemark(
-          filter: {
-            fileAbsolutePath: { regex: "/(categories)/" }
-            frontmatter: { type: { eq: "top-category" } }
+      }
+      topCategories: allMarkdownRemark(
+        filter: {
+          fileAbsolutePath: { regex: "/(categories)/" }
+          frontmatter: { type: { eq: "top-category" } }
+        }
+      ) {
+        nodes {
+          html
+          frontmatter {
+            type
+            title
+            index
           }
-        ) {
-          nodes {
-            html
-            frontmatter {
-              type
-              title
-              index
-            }
-            parent {
-              ... on File {
-                name
-                relativeDirectory
-              }
+          parent {
+            ... on File {
+              name
+              relativeDirectory
             }
           }
         }
-        categories: allMarkdownRemark(
-          filter: {
-            fileAbsolutePath: { regex: "/(categories)/" }
-            frontmatter: { type: { eq: "category" } }
+      }
+      categories: allMarkdownRemark(
+        filter: {
+          fileAbsolutePath: { regex: "/(categories)/" }
+          frontmatter: { type: { eq: "category" } }
+        }
+      ) {
+        nodes {
+          html
+          frontmatter {
+            type
+            title
+            archivedreason
+            index
           }
-        ) {
-          nodes {
-            html
-            frontmatter {
-              type
-              title
-              archivedreason
-              index
-            }
-            parent {
-              ... on File {
-                name
-                relativeDirectory
-              }
+          parent {
+            ... on File {
+              name
+              relativeDirectory
             }
           }
         }
-        rules: allMarkdownRemark(
-          filter: { frontmatter: { type: { eq: "rule" } } }
-        ) {
-          nodes {
-            frontmatter {
-              uri
-              archivedreason
-              title
-            }
+      }
+      rules: allMarkdownRemark(
+        filter: { frontmatter: { type: { eq: "rule" } } }
+      ) {
+        nodes {
+          frontmatter {
+            uri
+            archivedreason
+            title
           }
         }
       }
-    `}
-    render={(data) => <Archived data={data} {...props} />}
-  />
-);
+    }
+  `);
+
+  return <Archived data={data} {...props} />;
+}
 
 export default ArchivedWithQuery;