Update deps 17 jul 2025 (#1188)

Author: karianna

.github/copilot-instructions.md

@@ -0,0 +1,66 @@
+## Copilot instructions for this repo (AdoptOpenJDK Blog)
+
+Purpose: Help AI coding agents work productively in this Gatsby (v5) + MDX (v2) blog.
+
+Big picture
+- Static site built with Gatsby 5.x, content in `content/blog/**/index.md` (MDX). Images live next to posts.
+- Programmatic pages are created in `gatsby-node.ts` using GraphQL over MDX nodes; custom fields `fields.slug` and `fields.postPath` are added in `onCreateNode` and used across templates.
+- Main templates live in `src/templates/` (blog-post, blog-page, tag-page, author-page). Shared UI in `src/components/`.
+- Site config and plugin wiring in `gatsby-config.js`. Two filesystem sources (`content/blog`, `content/assets`). MDX is configured with remark plugins (images, prism, etc.).
+
+Key workflows
+- Install deps: `npm ci` (use Node 18+).
+- Dev server: `npm run develop` (hot-reload preview while editing content/components).
+- Build: `npm run build` then preview: `npm run serve` (site at http://localhost:9000).
+- Test script: `npm run test` runs lint then build. Lint uses ESLint 8 with `.eslintrc` (flat config is NOT used here).
+
+Project-specific conventions
+- Posts are MDX files at `content/blog/<slug>/index.md` with frontmatter: `title`, `date` (ISO8601), `author`, optional `featuredImage`, `description` for home excerpts. See README for examples.
+- Author metadata in `content/authors.json`; author images resolved to `content/assets/authors/<key>.jpg`. If missing, `gatsby-node.ts` downloads GitHub avatar at build time using global `fetch` and writes to that path.
+- GraphQL usage relies on custom `fields` on `Mdx` nodes (set in `gatsby-node.ts`). Templates query `fields { slug, postPath }` and `frontmatter { ... }`. When creating new templates/queries, ensure those fields exist or add similar fields in `onCreateNode`.
+- Pagination: `gatsby-node.ts` creates `/page/1..N`; index shows up to 10 posts, template queries use `$skip`/`$limit`.
+- RSS: only generated in production (`gatsby build && gatsby serve`).
+
+Important files
+- `gatsby-node.ts`: page creation, tag pages, author pages, MDX fields. Uses Node 18 global `fetch` and `fs.promises.writeFile(new Uint8Array(...))` when downloading author avatars.
+- `gatsby-config.js`: plugins & site metadata; MDX/remark configuration; Google Analytics; feed; typography.
+- `src/templates/*.js`: GraphQL queries + rendering logic per page type.
+- `src/components/*`: Layout, SEO, ArticlePreview, Byline, Tags, Comments, etc.
+- `content/`: blog posts and assets; authors.json.
+
+Patterns to follow
+- When adding GraphQL fields to `Mdx`, define them in `onCreateNode` (slug, postPath). All templates assume these fields are present.
+- Use `internal.contentFilePath` when creating pages for MDX (`?__contentFilePath=`) to enable MDX rendering.
+- For author pages, ensure each author key in `authors.json` maps to a `.jpg` in `content/assets/authors/` or the avatar fetch will run at build time.
+- Keep queries in templates in sync with the schema defined by the plugins and the fields created in `gatsby-node.ts`.
+
+Common pitfalls
+- If you see GraphQL errors like “Cannot query field 'fields' on type 'Mdx'”, check `onCreateNode` in `gatsby-node.ts` is creating those fields and that Gatsby is picking up the TS node file (it is, via `gatsby-node.ts`). Run `npm run clean` before `npm run build` after changes.
+- Do not upgrade React to v19 or MDX to v3 without coordinating upgrades to Gatsby v6+ and `gatsby-plugin-mdx` v6+. This repo is pinned to Gatsby 5.x with MDX v2.
+- ESLint 8 with `.eslintrc` is the current setup; ESLint 9 flat config caused parsing issues. Update only if necessary, and migrate carefully.
+
+Examples
+- Creating a new blog post: add `content/blog/hello-world/index.md` with frontmatter, optional images; run `npm run develop`, verify at `/` and `/page/2`.
+- Linking to posts: use `node.fields.postPath` provided by `gatsby-node.ts` when building lists (see `src/templates/blog-page.js`).
+
+Local commands (copy/paste)
+- Install: `npm ci`
+- Dev: `npm run develop`
+- Clean + build: `npm run clean && npm run build`
+- Preview build: `npm run serve` (http://localhost:9000)
+
+Maintainer notes for agents
+- Prefer minimal, surgical changes. Avoid upgrading major versions unless explicitly requested.
+- When changing GraphQL, run a clean build to regenerate `.cache/schema.gql` and catch schema issues early.
+
+Azure note
+- If asked to generate Azure code or commands, follow the Azure best-practices tool guidance available in your environment.
+
+Contribution flow
+- Create feature branches from `master` (or the working update branch if collaborating).
+- Validate locally before PR:
+	- `npm ci`
+	- `npm run test` (runs lint + build)
+	- Optional: `npm run serve` and verify key pages (/, /page/2, a post, /tags/<tag>, /author/<key>).
+- Keep changes minimal; avoid dependency major bumps unless the PR is dedicated to that effort.
+- In PRs, call out changes to GraphQL queries/templates and any content structure updates.

.github/workflows/ci.yml

@@ -0,0 +1,39 @@
+name: CI
+
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Restore Gatsby cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+            public
+          key: ${{ runner.os }}-gatsby-20-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-gatsby-20-
+
+      - name: Lint
+        run: npm run lint --silent
+
+      - name: Build
+        run: npm run build --silent

.gitignore

@@ -73,6 +73,3 @@ yarn-error.log
 
 # VS Code Config
 .vscode/
-
-# GH Copilot Instructions
-.github/copilot-instructions.md

README.md

@@ -1,32 +1,34 @@
+# AdoptOpenJDK Blog
+
 [![Deploy to GitHub Pages](https://github.com/AdoptOpenJDK/blog/actions/workflows/deploy-to-gh-pages.yml/badge.svg)](https://github.com/AdoptOpenJDK/blog/actions/workflows/deploy-to-gh-pages.yml)
 
-# AdoptOpenJDK Blog
+This is the source of the AdoptOpenJDK blog: <https://blog.adoptopenjdk.net/>
 
-This is the source of the [AdoptOpenJDK blog](https://blog.adoptopenjdk.net/).
+React 19 upgrade plan: see docs/react19-plan.md for the phased plan and current blocker status.
 
 ## Prerequisites
 
 1. Install dependencies, run `npm install` in the root directory of the repository.
 
 ## Adding Content
 
-1. Create a folder in `blog` that is named after your post's title. [Slugify](https://blog.tersmitten.nl/slugify/) the title if it's more than a single word. Example: `hello-world`.
+1. Create a folder in `blog` that is named after your post's title. Slugify the title if it's more than a single word. Example: `hello-world`.
 2. Create a file called `index.md` in the directory you just created (`blog/hello-world`).
 3. Add the required metadata at the beginning of the file
-    ```
-    ---
-    title: Hello World
-    date: "2020-04-21T12:20:00+00:00"
-    author: janedoe
-    featuredImage: "./featured_image.png" (optional)
-    ---
-    ```
-    `title` is the title of your post as it appears on the website. `date` is the ISO 8601 timestamp of the publication date (`date -u +"%Y-%m-%dT%H:%M:%SZ"` generates that for you on the command line) and `author` the identifier of the author as specified in the `authors.json`. `featuredImage` (optional) the relative path to the featured image.
+
+       ---
+       title: Hello World
+       date: "2020-04-21T12:20:00+00:00"
+       author: janedoe
+       featuredImage: "./featured_image.png" (optional)
+       ---
+
+   `title` is the title of your post as it appears on the website. `date` is the ISO 8601 timestamp of the publication date (`date -u +"%Y-%m-%dT%H:%M:%SZ"` generates that for you on the command line) and `author` the identifier of the author as specified in the `authors.json`. `featuredImage` (optional) the relative path to the featured image.
 4. Write your post in Markdown. Save any images in the folder of your post alongside the `index.md`. Put the biggest resolution in there that you have. Responsive images will automatically be generated for you.
 
 To preview your post, start the local development server by running `gatsby develop` in the root directory of the repository.
 
-**WARNING**: The RSS feed is only generated in production mode: `gatsby build && gatsby serve`.
+WARNING: The RSS feed is only generated in production mode: `gatsby build && gatsby serve`.
 
 ## Editing Conventions
 
@@ -38,75 +40,61 @@ On the front page, we only display excerpts and not full posts. By default, Gats
 
 To add captions to your images, use the following structure:
 
-```markdown
-![Alt text](./image.jpg)
-*Your caption here* 
-```
+       ![Alt text](./image.jpg)
+       *Your caption here*
 
 Our CSS will take care of rendering it correctly by looking for `img + em`.
 
 Example:
 
-```markdown
-![Photo depiciting a drop of water](./clean-drop-of-water-liquid.jpg)
-*AQA v1.0  is a first drop in an on-going series of improvements.* 
-```
+       ![Photo depiciting a drop of water](./clean-drop-of-water-liquid.jpg)
+       *AQA v1.0  is a first drop in an on-going series of improvements.*
 
 ### Quotes
 
-```markdown
-> Quote
-> 
-> <cite>Name of the person</cite>
-```
+       > Quote
+       >
+       > <cite>Name of the person</cite>
 
 Example:
 
-```markdown
-> When the Well is Dry, We’ll Know the Worth of Water.
-> 
-> <cite>Benjamin Franklin</cite>
-```
+       > When the Well is Dry, We’ll Know the Worth of Water.
+       >
+       > <cite>Benjamin Franklin</cite>
 
 ### Guest Posts
 
 Right after the front matter, add the following snippet to introduce the person that wrote the post:
 
-```markdown
-<GuestPost>
-    Some introductory text
-</GuestPost>
-```
+       <GuestPost>
+           Some introductory text
+       </GuestPost>
 
 This is going to render as:
 
-```
-<p className="guestpost">
-    <em>Some introductory text – AdoptOpenJDK Team</em>
-</p>
-```
+       <p className="guestpost">
+           <em>Some introductory text – AdoptOpenJDK Team</em>
+       </p>
 
 Example:
 
-```markdown
-<GuestPost>
-    This a guest post by <a href="https://www.linkedin.com/in/weitzelm/">Mark Weitzel</a>, General Manager, New Relic One at New Relic.
-</GuestPost>
-```
+       <GuestPost>
+           This a guest post by <a href="https://www.linkedin.com/in/weitzelm/">Mark Weitzel</a>, General Manager, New Relic One at New Relic.
+       </GuestPost>
 
-**Note:** Markdown is not supported within `<GuestPost/>`. This is a limitation of MDX v1 and fixed in [MDX v2](https://github.com/mdx-js/mdx/issues/1041) which is currently being developed.
+Note: Markdown is not supported within `<GuestPost/>`. This is a limitation of MDX v1 and fixed in MDX v2 (<https://github.com/mdx-js/mdx/issues/1041>) which is currently being developed.
 
 ## Adding Authors
 
 1. Create an entry in `content/authors.json`. Structure:
-    ```json
-    {
-        "janedoe": {
-            "name": "Jane Doe",
-            "summary": "Some info about Jane",
-            "twitter": "Jane's Twitter handle",
-            "github": "Jane's GitHub username"
-        }
-    }
-    ```
+
+       {
+           "janedoe": {
+               "name": "Jane Doe",
+               "summary": "Some info about Jane",
+               "twitter": "Jane's Twitter handle",
+               "github": "Jane's GitHub username"
+           }
+       }
+
 2. Your profile picture comes from github but this can be changed by adding a profile picture in `content/assets/authors`. If the key in the `authors.json` is `janedoe`, name the image file `janedoe.jpg`.

content/blog/bundling-adoptopenjdk-into-a-notarized-macos-application/index.md

@@ -15,7 +15,7 @@ Some changes have been made to the way we codesign our macOS binaries.
 
 ## Summary
 
-Apple has recently changed the requirements for applications to install on macOS 10.15 and above. The change requires developers to notarize the application before it gets shipped. Notarization involves submitting the application to Apple to be scanned and generates a JSON report with any issues. More information about notarization can be found [here](https://developer.apple.com/documentation/security/notarizing_your_app_before_distribution).
+Apple has recently changed the requirements for applications to install on macOS 10.15 and above. The change requires developers to notarize the application before it gets shipped. Notarization involves submitting the application to Apple to be scanned and generates a JSON report with any issues. More information about notarization can be found in [Apple’s docs on notarization](https://developer.apple.com/documentation/security/notarizing_your_app_before_distribution).
 
 ## What’s changed?
 
@@ -25,8 +25,10 @@ We have enabled hardened runtime on our macOS binaries which will allow them to
 
 We had multiple bug reports from users saying that when they bundle AdoptOpenJDK binaries into their applications, the notarization fails with multiple errors such as the ones below:
 
-    “message”: “The signature algorithm used is too weak.”,
-    “message”: “The executable does not have the hardened runtime enabled.”,
+```text
+“message”: “The signature algorithm used is too weak.”,
+“message”: “The executable does not have the hardened runtime enabled.”,
+```
 
 In order to work around this, we have had to enable hardened runtime on our binaries when we codesign them.
 
@@ -51,7 +53,7 @@ This requires us to add --options runtime to the codesign command. It also requi
 
 If you try and bundle our OpenJDK8 binaries you will receive the following notarization failure:
 
-```output
+```text
 "message": "The binary uses an SDK older than the 10.9 SDK.",
 ```
 

docs/react19-plan.md

@@ -0,0 +1,25 @@
+# React 19 upgrade plan (tracking)
+
+Status: [Blocked by Gatsby 5 peer dependency on React ^18](https://github.com/gatsbyjs/gatsby/issues/39180)
+
+Phases
+
+1) Upgrade Gatsby to the first React 19–compatible major and bump all official plugins to matching majors.
+
+2) Align MDX ecosystem: gatsby-plugin-mdx to matching major, @mdx-js/react v3, gatsby-remark-* majors.
+
+3) Upgrade react/react-dom to 19.1.1+. Validate SSR/hydration across pages.
+
+Done
+
+- Removed defaultProps on function components (SEO) and used param defaults.
+- Switched analytics to gatsby-plugin-google-gtag.
+- Cleaned tsconfig include.
+
+To monitor
+
+- `npm view gatsby peerDependencies` should include react: ^19 once supported.
+
+Quick check
+
+- npm run check:compat

gatsby-config.js

@@ -46,15 +46,16 @@ module.exports = {
         ],
       },
     },
-    "gatsby-remark-images",
+    // Note: gatsby-remark-images is configured via
+    // gatsby-plugin-mdx's gatsbyRemarkPlugins
     "gatsby-transformer-sharp",
     "gatsby-plugin-image",
     "gatsby-plugin-sharp",
     {
-      resolve: "gatsby-plugin-google-analytics",
+      resolve: "gatsby-plugin-google-gtag",
       options: {
-        trackingId: "UA-99905649-2",
-        anonymize: true,
+        trackingIds: ["UA-99905649-2"],
+        gtagConfig: { anonymize_ip: true },
       },
     },
     {

gatsby-node.ts

@@ -1,9 +1,5 @@
 import path from 'path'
-import fetch from 'node-fetch'
 import fs from 'fs'
-
-import { pipeline } from 'stream'
-import { promisify } from 'util'
 import { createFilePath } from 'gatsby-source-filesystem'
 
 import type { GatsbyNode, Node } from 'gatsby'
@@ -30,12 +26,14 @@ export const createPages: GatsbyNode['createPages'] = async ({ graphql, actions
       await fs.promises.access(`content/assets/authors/${author}.jpg`);
     } catch (error) {
       const githubUsername = authorJson[author].github;
-      const streamPipeline = promisify(pipeline);
+      // Use Node 18+ global fetch to download the avatar without additional deps
       const response = await fetch(`https://github.com/${githubUsername}.png?size=250`);
       if (!response.ok) {
         throw new Error(`Unexpected response: ${response.statusText}`);
       }
-      await streamPipeline(response.body, fs.createWriteStream(`content/assets/authors/${author}.jpg`));
+      const arrayBuf = await response.arrayBuffer();
+      const uint8 = new Uint8Array(arrayBuf);
+      await fs.promises.writeFile(`content/assets/authors/${author}.jpg`, uint8);
     }
 
     createPage({