Merge pull request #129 from BadIdeaFactory/louh/updates

Gardening

.github/workflows/build.yml

@@ -8,12 +8,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v2.3.1
+        uses: actions/checkout@v4
 
       - name: Install Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: '16.x'
+          node-version: '22.x'
 
       - name: Install Project Dependencies
         run: yarn install

.github/workflows/publish.yml

@@ -10,12 +10,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v2.3.1
+        uses: actions/checkout@v4
 
       - name: Install Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: '16.x'
+          node-version: '22.x'
 
       - name: Install Project Dependencies
         run: yarn install

eslint.config.mjs

@@ -0,0 +1,46 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  ...compat.extends("airbnb", "prettier"),
+  {
+    settings: {
+      "import/external-module-folders": ["assets", "config", "ui", "lib"],
+    },
+
+    rules: {
+      camelcase: ["off"],
+      "import/no-extraneous-dependencies": ["off"],
+      "import/prefer-default-export": ["off"],
+      "import/no-unresolved": ["off"],
+      "jsx-a11y/anchor-is-valid": ["off"],
+      "no-undef": ["off"],
+      "react/destructuring-assignment": ["off"],
+      "react/forbid-prop-types": ["off"],
+
+      "react/jsx-filename-extension": [
+        1,
+        {
+          extensions: [".js", ".jsx"],
+        },
+      ],
+
+      "react/jsx-one-expression-per-line": ["off"],
+      "react/jsx-props-no-spreading": ["off"],
+      "react/no-array-index-key": ["off"],
+      "react/no-danger": ["off"],
+      "react/no-typos": ["off"],
+      "react/require-default-props": ["off"],
+    },
+  },
+];

gatsby-config.js

@@ -2,9 +2,10 @@ module.exports = {
   siteMetadata: {},
   plugins: [
     "gatsby-plugin-catch-links",
+    `gatsby-plugin-image`,
     "gatsby-plugin-react-helmet",
+    "gatsby-plugin-netlify",
     `gatsby-plugin-offline`,
-    `gatsby-plugin-netlify-cache`,
     `gatsby-plugin-sharp`,
     `gatsby-plugin-styled-components`,
     `gatsby-plugin-twitter`,

lib/assets/fonts/index.js

@@ -1 +1 @@
-export { default as iconfont } from "./bif-iconfont/style.css";
+import "./bif-iconfont/style.css";

lib/ui/components/actions/Action.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { bool, oneOfType, array, object, string } from "prop-types";
+import PropTypes from "prop-types";
 import { withTheme } from "styled-components";
 
 import Button from "./Button";
@@ -9,32 +9,23 @@ import withObfuscation from "./withObfuscation";
 const ObfButton = withObfuscation(Button);
 const ObfLink = withObfuscation(Link);
 
-const Action = props => {
-  const { obfuscated, button } = props;
+function Action(props) {
+  const { obfuscated, button, ...restProps } = props;
   if (obfuscated) {
     if (button) {
-      return <ObfButton {...props} />;
+      return <ObfButton {...restProps} />;
     }
-    return <ObfLink {...props} />;
+    return <ObfLink {...restProps} />;
   }
   if (button) {
-    return <Button {...props} />;
+    return <Button {...restProps} />;
   }
-  return <Link {...props} />;
-};
+  return <Link {...restProps} />;
+}
 
 Action.propTypes = {
-  button: bool,
-  children: oneOfType([array, object, string]),
-  href: string,
-  obfuscated: bool
-};
-
-Action.defaultProps = {
-  button: null,
-  children: null,
-  href: null,
-  obfuscated: null
+  button: PropTypes.bool,
+  obfuscated: PropTypes.bool
 };
 
 export default withTheme(Action);

lib/ui/components/actions/Button.js

@@ -1,5 +1,3 @@
-/* eslint jsx-a11y/anchor-has-content: 0 */
-/* eslint react/button-has-type: 0 */
 import { array, func, object, oneOfType, shape, string } from "prop-types";
 import { Link as GatsbyButton } from "gatsby";
 import React from "react";
@@ -11,11 +9,11 @@ import { setSpace } from "ui/mixins";
 
 const ButtonEl = styled.a`
   ${setSpace("pam")};
-  background-color: ${({ theme, primary }) =>
-    primary ? theme.actionColor : `transparent`};
+  background-color: ${({ theme, $primary }) =>
+    $primary ? theme.actionColor || defaultThm.actionColor : `transparent`};
   border: 2px solid ${({ theme }) => theme.decor};
-  color: ${({ primary, theme }) =>
-    primary ? theme.background : theme.actionColor};
+  color: ${({ $primary, theme }) =>
+    $primary ? theme.background || defaultThm.background : theme.actionColor || defaultThm.actionColor};
   cursor: pointer;
   display: inline-block;
   font-family: ${font.sans};
@@ -36,16 +34,16 @@ const ButtonEl = styled.a`
   }
 `;
 
-const Button = props => {
-  const { onClick, to } = props;
+function Button(props) {
+  const { onClick, to, primary = false, ...restProps } = props;
   if (to) {
-    return <ButtonEl as={GatsbyButton} {...props} theme={null} />;
+    return <ButtonEl as={GatsbyButton} to={to} theme={null} $primary={primary} {...restProps} />;
   }
   if (onClick) {
-    return <ButtonEl as="button" type="button" {...props} />;
+    return <ButtonEl as="button" type="button" onClick={onClick} $primary={primary} {...restProps} />;
   }
-  return <ButtonEl {...props} />;
-};
+  return <ButtonEl $primary={primary} {...restProps} />;
+}
 
 Button.propTypes = {
   children: oneOfType([array, object, string]),
@@ -57,15 +55,4 @@ Button.propTypes = {
   to: string
 };
 
-Button.defaultProps = {
-  children: null,
-  href: "",
-  onClick: null,
-  theme: {
-    background: defaultThm.background,
-    actionColor: defaultThm.actionColor
-  },
-  to: null
-};
-
 export default Button;

lib/ui/components/actions/Link.js

@@ -1,6 +1,5 @@
 /* eslint jsx-a11y/anchor-has-content: 0 */
-/* eslint react/button-has-type: 0 */
-import { array, func, object, oneOfType, shape, string } from "prop-types";
+import PropTypes from "prop-types";
 import { Link as GatsbyLink } from "gatsby";
 import React from "react";
 import styled from "styled-components";
@@ -15,7 +14,7 @@ const LinkEl = styled.a`
   border-color: ${({ theme }) => theme.actionColorLt};
   border-style: solid;
   border-width: 0 0 2px;
-  color: ${({ theme }) => theme.actionColor};
+  color: ${({ theme }) => theme.actionColor ?? defaultThm.actionColor};
   cursor: pointer;
   display: inline-block;
   font-family: ${font.sans};
@@ -28,46 +27,41 @@ const LinkEl = styled.a`
   transition: border ${time.s}, transform ${time.s};
   white-space: nowrap;
   &:hover {
-    border-color: ${({ theme }) => theme.actionColor};
+    border-color: ${({ theme }) => theme.actionColor ?? defaultThm.actionColor};
     transform: translateX(-1px) translateY(-1px);
   }
-  ${({ isActive, theme }) =>
-    isActive
+  ${({ $isActive, theme }) =>
+    $isActive
       ? `
-        border-color: ${theme.actionColor};
+        border-color: ${theme.actionColor ?? defaultThm.actionColor};
   `
       : ``};
 `;
 
-const Link = props => {
-  const { onClick, to } = props;
+function Link(props) {
+  const { onClick, to, isActive, ...restProps } = props;
   if (to) {
-    return <LinkEl as={GatsbyLink} {...props} theme={null} />;
+    return <LinkEl to={to} as={GatsbyLink} $isActive={isActive} {...restProps} theme={null} />;
   }
   if (onClick) {
-    return <LinkEl as="a" {...props} />;
+    return <LinkEl onClick={onClick} as="a" $isActive={isActive} {...restProps} />;
   }
-  return <LinkEl {...props} />;
-};
+  return <LinkEl $isActive={isActive} {...restProps} />;
+}
 
 Link.propTypes = {
-  children: oneOfType([array, object, string]),
-  href: string,
-  onClick: func,
-  theme: shape({
-    actionColor: string
+  children: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.object,
+    PropTypes.string
+  ]),
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+  theme: PropTypes.shape({
+    actionColor: PropTypes.string
   }),
-  to: string
-};
-
-Link.defaultProps = {
-  children: null,
-  href: "",
-  onClick: null,
-  theme: {
-    actionColor: defaultThm.actionColor
-  },
-  to: null
+  to: PropTypes.string,
+  isActive: PropTypes.bool
 };
 
 export default Link;