Fix Gatsby config bugs, deprecated deps, Node version, and defensive rehypeMathjax

[Copilot]

Several build-breaking misconfigurations and deprecated packages on the Yu-2025-granulites branch were preventing successful Netlify deployment.

gatsby-config.js

• gatsby-plugin-sass: moved sassOptions inside options (was ignored/erroring at wrong nesting level)
• react-copy-to-clipboard: removed from plugins array — it's a React component library, not a Gatsby plugin
• gatsby-plugin-google-gtag: moved from inside gatsby-transformer-remark.plugins (invalid there) to the top-level plugins array

package.json

• Added @citation-js/plugin-doi — require()d in gatsby-node.js but absent, causing a runtime crash
• Added sass (Dart Sass); removed node-sass (abandoned, fails on modern Node)
• Removed gatsby-image — fully deprecated since Gatsby v4; gatsby-plugin-image already present
• Upgraded prettier ^2.8.7 → ^3.0.0

netlify.toml

• NODE_VERSION "18" → "20" (Node 18 hit EOL April 2025)

src/templates/model.js

Extracted a shared module-level constant with a defensive null guard to replace five repeated inline plugin arrays:

// Before (×5 across the file):
rehypePlugins={[[rehypeMathjax, { svg: { scale: 1.0 } }]]}

// After — single constant, degrades gracefully if import fails:
const rehypeMathjaxPlugins = rehypeMathjax ? [[rehypeMathjax, { svg: { scale: 1.0 } }]] : []
// ...
rehypePlugins={rehypeMathjaxPlugins}

Original prompt

Overview

Apply a set of fixes to the Yu-2025-granulites branch targeting broken Gatsby config, deprecated packages, Node version, and a defensive fix to rehypeMathjax usage in src/templates/model.js. Create all changes on a new branch called julesghub/fixes26.

---

1. gatsby-config.js — Three bugs to fix

a) Remove react-copy-to-clipboard from the plugins array (line 25)

react-copy-to-clipboard is a React component library, not a Gatsby plugin. It must be removed from the plugins array entirely. It can still be imported directly in React components.

// REMOVE this line from the plugins array:
"react-copy-to-clipboard",

b) Move gatsby-plugin-google-gtag out of gatsby-transformer-remark

Currently gatsby-plugin-google-gtag is nested inside the plugins array of gatsby-transformer-remark (lines 34–45). Remark plugins are only for Markdown transformation — Gatsby lifecycle plugins are invalid there. Move it to the top-level plugins array:

// Add as a top-level plugin:
{
  resolve: "gatsby-plugin-google-gtag",
  options: {
    trackingIds: ["G-SW2X6STFYY"],
    pluginConfig: { head: true },
  },
},

c) Fix gatsby-plugin-sass options nesting (lines 8–10)

sassOptions must be inside an options object:

// WRONG:
{ resolve: "gatsby-plugin-sass", sassOptions: { indentedSyntax: true } }

// CORRECT:
{ resolve: "gatsby-plugin-sass", options: { sassOptions: { indentedSyntax: true } } }

---

2. package.json — Dependency fixes

• Add @citation-js/plugin-doi to dependencies — it is require()d in gatsby-node.js line 6 but missing from package.json, causing a runtime crash.
• Remove gatsby-image — fully deprecated since Gatsby v4; gatsby-plugin-image is already present.
• Remove node-sass — abandoned package; replace with sass (Dart Sass, drop-in replacement for gatsby-plugin-sass).
• Add sass to dependencies.
• Upgrade prettier in devDependencies from ^2.8.7 to ^3.0.0.

---

3. netlify.toml — Node version

Upgrade NODE_VERSION from "18" (EOL since April 2025) to "20":

NODE_VERSION = "20"

---

4. src/templates/model.js — Defensive rehypeMathjax rendering

Every <Markdown> component in this file currently has:

rehypePlugins={[[rehypeMathjax, { svg: { scale: 1.0 } }]]}

Replace all occurrences with a conditional guard so it degrades gracefully if rehypeMathjax is falsy:

rehypePlugins={rehypeMathjax ? [[rehypeMathjax, { svg: { scale: 1.0 } }]] : []}

There are multiple occurrences across the file (lines ~166, ~220, ~310, ~371, ~389). Update all of them.

---

Summary of files to change

File	Changes
gatsby-config.js	Remove react-copy-to-clipboard from plugins; move gatsby-plugin-google-gtag to top-level; fix gatsby-plugin-sass options nesting
package.json	Add @citation-js/plugin-doi and sass; remove gatsby-image and node-sass; upgrade prettier to v3
netlify.toml	NODE_VERSION = "20"
src/templates/model.js	Replace all hardcoded rehypePlugins={[[rehypeMathjax, ...]]} with conditional rehypePlugins={rehypeMathjax ? [[rehypeMathjax, { svg: { scale: 1.0 } }]] : []}

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: What is a good strategy to take an out of date website repository (https://github.com/ModelAtlasofTheEarth/website/tree/Yu-2025-granulites), for gatsby, deployment via Netlify, and get it up to date.

I want to:

1. Fix any errors with the current deployment of the website.
2. Remove obsolete, out of date packages / definitions.

Assistant: Now I have a clear picture. Let me analyze everything I found.

Assistant: Now I have a comprehensive view of the repo. Here's a thorough breakdown of every issue found and the strategy to fix them.

---

Analysis & Fix Strategy

🔴 Critical Bugs (Will Break the Build)

---

1. react-copy-to-clipboard listed as a Gatsby plugin — gatsby-config.js line 25

This is a React component library, not a Gatsby plugin. Listing it in the plugins array causes Gatsby to try to resolve its lifecycle hooks and fail.

// ❌ REMOVE this line entirely from the plugins array:
"react-copy-to-clipboard",

Simply delete it. The component itself is still importable in your React code from the package — it doesn't need to be registered as a plugin.

---

2. gatsby-plugin-google-gtag nested inside gatsby-transformer-remark — gatsby-config.js lines 34–45

Remark plugins only handle Markdown transformation — Gatsby lifecycle plugins like gatsby-plugin-google-gtag are invalid there. Gatsby silently ignores or throws on this.

</details>



<!-- START COPILOT CODING AGENT SUFFIX -->

*This pull request was created from Copilot chat.*
>