[WIP] Fix issues in gatsby-config.js

[Copilot]

• Fix gatsby-config.js: sass options (add includePaths, quietDeps, silenceDeprecations); remove gatsby-plugin-fontawesome-css; remove gatsby-plugin-purgecss
• Fix package.json: remove gatsby-plugin-fontawesome-css, gatsby-plugin-purgecss
• Fix src/components/atlas.sass: remove ~ prefixes from imports; remove FontAwesome import line
• Create gatsby-browser.js with FontAwesome CSS import
• Fix ESLint warnings in src/components/Animation.js
• Fix ESLint warnings in src/components/Badges.js
• Fix ESLint warnings in src/components/CarouselScroll.js
• Fix ESLint warnings in src/components/Catalog.js
• Fix ESLint warnings in src/components/Citation.js
• Fix ESLint warnings in src/components/Footer.js
• Fix ESLint warnings in src/components/Layout.js
• Fix ESLint warnings in src/components/ModelList.js
• Fix ESLint warnings in src/components/Navbar.js
• Fix ESLint warnings in src/pages/contact/index.js
• Fix ESLint warnings in src/templates/index-page.js
• Fix ESLint warnings in src/templates/model.js

Original prompt

Context

Running npm run develop on the copilot/julesghubfixes26 branch produces 0 errors but 37 warnings and several other issues. All of the below must be fixed on this same branch. The files have been inspected — fix exactly what is described.

---

1. gatsby-config.js — All 4 bugs still need fixing

a) Fix gatsby-plugin-sass options nesting (line 8–10)

sassOptions must be inside an options: object. Also add quietDeps: true and silenceDeprecations to suppress Bulma's Dart Sass deprecation noise (these come from node_modules and cannot be fixed upstream):

{
  resolve: "gatsby-plugin-sass",
  options: {
    sassOptions: {
      indentedSyntax: true,
      includePaths: ["node_modules"],
      quietDeps: true,
      silenceDeprecations: ["import", "legacy-js-api", "global-builtin", "color-functions", "if-function"],
    },
  },
},

b) Remove "react-copy-to-clipboard" from plugins array (line 25)

This is a React component library, not a Gatsby plugin. Remove it entirely from the plugins array.

c) Remove "gatsby-plugin-fontawesome-css" from plugins array (line 26)

This plugin is incompatible with Gatsby 5 (requires gatsby@^4.0.0). Remove it from the plugins array. FontAwesome CSS will be loaded via gatsby-browser.js instead (see item 4 below).

d) Move gatsby-plugin-google-gtag out of gatsby-transformer-remark to top-level

Currently gatsby-plugin-google-gtag (lines 34–45) is incorrectly nested inside the plugins array of gatsby-transformer-remark. Move it to the top-level plugins array:

{
  resolve: "gatsby-plugin-google-gtag",
  options: {
    trackingIds: ["G-SW2X6STFYY"],
    pluginConfig: { head: true },
  },
},

e) Remove gatsby-plugin-purgecss

It is causing CSS ordering conflicts with webpack ([mini-css-extract-plugin] Conflicting order warnings). Remove it entirely from the plugins array.

---

2. package.json — Dependency fixes

• Add @citation-js/plugin-doi to dependencies (required in gatsby-node.js but missing)
• Add sass to dependencies (Dart Sass, replacement for node-sass)
• Remove gatsby-image (deprecated since Gatsby v4)
• Remove gatsby-plugin-fontawesome-css (Gatsby 5 incompatible)
• Remove gatsby-plugin-purgecss (causing CSS ordering conflicts)
• Remove node-sass (abandoned, replaced by sass)
• Upgrade prettier in devDependencies from ^2.8.7 to ^3.0.0

---

3. src/components/atlas.sass — Fix ~ import prefix and remove duplicate FontAwesome import

With includePaths: ["node_modules"] set in sass options, remove the ~ prefix from all Bulma and FontAwesome imports:

• Line 1: @import "~bulma/sass/utilities/initial-variables" → @import "bulma/sass/utilities/initial-variables"
• Line 133: @import "~bulma" → @import "bulma"
• Line 152: @import "~bulma/sass/helpers/color" → @import "bulma/sass/helpers/color"
• Line 153: @import "~bulma/sass/elements/container" → @import "bulma/sass/elements/container"
• Line 154: @import "~bulma/sass/elements/button" → @import "bulma/sass/elements/button"
• Line 155: @import "~bulma/sass/form/_all" → @import "bulma/sass/form/_all"
• Line 156: @import "~@fortawesome/fontawesome-free/css/all.min.css" → REMOVE this line entirely (FontAwesome will be imported via gatsby-browser.js)

---

4. Create/update gatsby-browser.js — Import FontAwesome CSS directly

Since gatsby-plugin-fontawesome-css is being removed, add a direct import in gatsby-browser.js. If the file already exists, add to it; if not, create it:

import "@fortawesome/fontawesome-free/css/all.min.css"

---

5. ESLint warnings — Fix all 37 across source files

src/components/Animation.js

• Remove unused variables playing and loop

src/components/Badges.js

• Add rel="noreferrer" to the <a target="_blank"> element
• Add an aria-label to the control that has no associated text label

src/components/CarouselScroll.js

• Replace == with === (line ~59)

src/components/Catalog.js

• Add rel="noreferrer" to both <a target="_blank"> elements (~lines 117, 147)

src/components/Citation.js

• Remove unnecessary escape characters \:, \<, \> from the regex (~line 83)

src/components/Footer.js

• Remove unused import facebook

src/components/Layout.js

• Remove unused import useSiteMetadata
• Remove unused import withPrefix

src/components/ModelList.js

• Remove unused imports useState and useEffect
• Remove unused variables full_name (two occurrences)

src/components/Navbar.js

• Add aria-label to the control missing an associated text label (~line 63)

src/pages/contact/index.js

• Fix the invalid href attribute (~line 94) — use a valid URL or convert to a <button> if it's a non-navigating action

src/templates/index-page.js

• Remove unused imports: Content, HTMLContent, earthbyteIcon, `earthbyt...

This pull request was created from Copilot chat.

[Copilot]

Copilot wasn't able to review any files in this pull request.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.