docs: add minimal quick-start section to Getting Started guide

.github/dependabot.yml

@@ -1,26 +1,27 @@
 version: 2
 updates:
-  - package-ecosystem: "npm"
+  - package-ecosystem: npm
     directory: "/"
-    open-pull-requests-limit: 10
     schedule:
       interval: "weekly"
+    open-pull-requests-limit: 20
     labels:
-      - "dependencies"
-    ignore:
-      - dependency-name: "react"
-      - dependency-name: "react-dom"
-      - dependency-name: "react-router-dom"
-      - dependency-name: "@docsearch/react"
-      - dependency-name: "tailwindcss"
+      - dependencies
+    versioning-strategy: widen
     groups:
       dependencies:
         patterns:
           - "*"
+        update-types:
+          - "minor"
+          - "patch"
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:
       interval: "weekly"
+    open-pull-requests-limit: 20
+    labels:
+      - dependencies
     groups:
       dependencies:
         patterns:

.github/workflows/dependabot.yml

@@ -0,0 +1,38 @@
+name: Dependabot
+
+on: pull_request
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  dependabot-auto-merge:
+    runs-on: ubuntu-latest
+    if: github.actor == 'dependabot[bot]'
+    steps:
+      - name: Generate Token
+        uses: actions/create-github-app-token@29824e69f54612133e76f7eaac726eef6c875baf # v2.2.1
+        id: app-token
+        with:
+          app-id: ${{ secrets.BOT_APP_ID }}
+          private-key: ${{ secrets.BOT_PRIVATE_KEY }}
+
+      - name: Dependabot metadata
+        id: dependabot-metadata
+        uses: dependabot/fetch-metadata@21025c705c08248db411dc16f3619e6b5f9ea21a # v2.5.0
+        with:
+          github-token: "${{ steps.app-token.outputs.token }}"
+
+      - name: Enable auto-merge for Dependabot PRs
+        if: steps.dependabot-metadata.outputs.update-type != 'version-update:semver-major'
+        run: |
+          if [ "$(gh pr status --json reviewDecision -q .currentBranch.reviewDecision)" != "APPROVED" ];
+          then gh pr review --approve "$PR_URL"
+          else echo "PR already approved, skipping additional approvals to minimize emails/notification noise.";
+          fi
+
+          gh pr merge --auto --squash "$PR_URL"
+        env:
+          PR_URL: ${{ github.event.pull_request.html_url }}
+          GH_TOKEN: ${{ steps.app-token.outputs.token }}

.github/workflows/dependency-review.yml

@@ -11,4 +11,4 @@ jobs:
       - name: "Checkout Repository"
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: "Dependency Review"
-        uses: actions/dependency-review-action@05fe4576374b728f0c523d6a13d64c25081e0803 # v4.8.3
+        uses: actions/dependency-review-action@2031cfc080254a8a887f58cffee85186f0e49e48 # v4.9.0

.github/workflows/deploy.yml

@@ -18,7 +18,7 @@ jobs:
       - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version: ${{ matrix.node-version }}
           cache: yarn

.github/workflows/testing.yml

@@ -19,7 +19,7 @@ jobs:
       - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version: ${{ matrix.node-version }}
           cache: yarn
@@ -38,7 +38,7 @@ jobs:
       - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version: ${{ matrix.node-version }}
           cache: yarn
@@ -58,7 +58,7 @@ jobs:
       - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version: ${{ matrix.node-version }}
           cache: yarn
@@ -84,7 +84,7 @@ jobs:
       - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version: ${{ matrix.node-version }}
           cache: yarn
@@ -95,7 +95,7 @@ jobs:
         uses: ./.github/actions/webpack-persistent-cache
 
       - name: Cypress run
-        uses: cypress-io/github-action@e44ee0fa67251ab7e2d854d85b3a466577f47d14 # v7.1.3
+        uses: cypress-io/github-action@bc22e01685c56e89e7813fd8e26f33dc47f87e15 # v7.1.5
         with:
           browser: chrome
           config-file: cypress.config.js

cypress/e2e/code-block-with-copy.cy.js

@@ -64,6 +64,9 @@ describe("CodeBlockWithCopy", () => {
   it("copies non-diff code blocks without altering content", () => {
     visitWithClipboardSpy("/concepts/");
 
+    // Wait for Suspense content to load before querying code blocks
+    cy.get("button.copy-button").should("exist");
+
     // Select the first webpack.config.js example and its copy wrapper.
     getFirstWebpackConfigBlock("standardCodeBlock");
 
@@ -73,6 +76,7 @@ describe("CodeBlockWithCopy", () => {
       .find("code")
       .invoke("text")
       .as("expectedCopiedText");
+    cy.get("@standardCodeBlock").find("button.copy-button").should("exist");
     cy.get("@standardCodeBlock").find("button.copy-button").click();
 
     // Assert copied output is unchanged for regular code blocks.
@@ -82,7 +86,7 @@ describe("CodeBlockWithCopy", () => {
 
       cy.get("@expectedCopiedText").then((expectedCopiedText) => {
         expect(copiedText).to.eq(expectedCopiedText);
-        expect(copiedText).to.include("module.exports = {");
+        expect(copiedText).to.include("export default {");
         expect(copiedText).to.include('entry: "./path/to/my/entry/file.js",');
       });
     });

cypress/e2e/pr_4435.cy.js

@@ -9,16 +9,18 @@ describe("Open page in new tab", { scrollBehavior: false }, () => {
         cy.stub(win, "scrollTo");
       },
     });
+    // wait for page content to load before asserting scroll
+    cy.get('.sidebar-item__title[href="/concepts/plugins/"]').should("exist");
     // there's one call in Page.jsx when componentDidMount
-    cy.window().then((win) => {
+    cy.window().should((win) => {
       expect(win.scrollTo).to.be.calledOnce;
     });
 
     const selector = '.sidebar-item__title[href="/concepts/plugins/"]';
 
     // we click the menu
     cy.get(selector).click();
-    cy.window().then((win) => {
+    cy.window().should((win) => {
       // we don't know whether user has scrolled the page or not although no pathname changed
       expect(win.scrollTo).to.be.calledTwice;
     });
@@ -28,7 +30,7 @@ describe("Open page in new tab", { scrollBehavior: false }, () => {
         metaKey: true,
       });
       // no scrollTo should be called
-      cy.window().then((win) => {
+      cy.window().should((win) => {
         expect(win.scrollTo).to.be.calledTwice;
       });
     } else if (Cypress.platform === "win32" || Cypress.platform === "linux") {
@@ -37,14 +39,14 @@ describe("Open page in new tab", { scrollBehavior: false }, () => {
         ctrlKey: true,
       });
       // no scrollTo should be called
-      cy.window().then((win) => {
+      cy.window().should((win) => {
         expect(win.scrollTo).to.be.calledTwice;
       });
     }
 
     // we click the menu again, scroll to top again
     cy.get(selector).click();
-    cy.window().then((win) => {
+    cy.window().should((win) => {
       expect(win.scrollTo).to.be.calledThrice;
     });
   });

eslint.config.mjs

@@ -15,6 +15,7 @@ export default defineConfig([
     ".github/**/*.md",
     "**/README.md",
     "src/mdx-components.mjs",
+    "**/setupTests.js",
   ]),
   {
     extends: [configs.recommended],

jest.config.mjs

@@ -1,6 +1,7 @@
 export default {
   verbose: true,
   testEnvironment: "node",
+  setupFiles: ["./src/setupTests.js"],
   transform: {
     "^.+\\.jsx?$": "babel-jest",
   },

package.json

@@ -73,43 +73,46 @@
     "eval": "^0.1.5"
   },
   "dependencies": {
-    "@docsearch/react": "^3.9.0",
+    "@docsearch/react": "^4.6.0",
     "@react-spring/web": "^10.0.3",
     "path-browserify": "^1.0.1",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-helmet-async": "^2.0.5",
-    "react-router-dom": "^6.28.0",
-    "react-tiny-popover": "5",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-helmet-async": "^3.0.0",
+    "react-router": "^7.13.1",
+    "react-router-dom": "^7.13.1",
+    "react-tiny-popover": "^8.1.6",
     "react-use": "^17.6.0",
-    "react-visibility-sensor": "^5.0.2",
     "webpack-pwa-manifest": "^4.3.0",
     "workbox-window": "^7.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
     "@babel/preset-env": "^7.29.0",
-    "@babel/preset-react": "^7.27.6",
+    "@babel/preset-react": "^7.28.5",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
     "@octokit/auth-action": "^6.0.2",
     "@octokit/rest": "^22.0.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
     "@svgr/webpack": "^8.1.0",
-    "autoprefixer": "^10.4.24",
-    "babel-loader": "^10.0.0",
-    "copy-webpack-plugin": "^13.0.1",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "autoprefixer": "^10.4.27",
+    "babel-loader": "^10.1.1",
+    "copy-webpack-plugin": "^14.0.0",
     "css-loader": "^7.1.3",
-    "css-minimizer-webpack-plugin": "^7.0.4",
+    "css-minimizer-webpack-plugin": "^8.0.0",
     "cypress": "^15.9.0",
     "directory-tree": "^3.6.0",
     "directory-tree-webpack-plugin": "^1.0.3",
     "duplexer": "^0.1.1",
     "eslint": "^9.39.2",
     "eslint-config-webpack": "^4.9.3",
-    "eslint-plugin-cypress": "^5.2.1",
+    "eslint-plugin-cypress": "^6.1.0",
     "eslint-plugin-mdx": "^3.6.2",
     "feed": "^5.0.0",
     "front-matter": "^4.0.2",
@@ -119,22 +122,21 @@
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "hyperlink": "^5.0.4",
-    "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0",
-    "lightningcss": "^1.31.1",
-    "lint-staged": "^16.2.7",
+    "jest": "^30.3.0",
+    "jest-environment-jsdom": "^30.3.0",
+    "lightningcss": "^1.32.0",
+    "lint-staged": "^16.3.3",
     "lodash": "^4.17.23",
-    "markdownlint-cli": "^0.47.0",
+    "markdownlint-cli": "^0.48.0",
     "mdast-util-to-string": "^4.0.0",
-    "mini-css-extract-plugin": "^2.10.0",
+    "mini-css-extract-plugin": "^2.10.1",
     "mkdirp": "^3.0.1",
     "modularscale-sass": "^3.0.3",
     "npm-run-all": "^4.1.1",
-    "postcss": "^8.5.6",
+    "postcss": "^8.5.8",
     "postcss-loader": "^8.2.0",
     "prettier": "^3.8.1",
     "react-refresh": "^0.18.0",
-    "react-test-renderer": "^17.0.2",
     "redirect-webpack-plugin": "^1.0.0",
     "remark": "^15.0.1",
     "remark-autolink-headings": "7.0.1",
@@ -143,15 +145,15 @@
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.1",
     "remark-html": "^16.0.1",
-    "remark-refractor": "montogeek/remark-refractor",
+    "remark-refractor": "^1.0.0",
     "rimraf": "^6.1.2",
-    "sass": "^1.97.2",
+    "sass": "^1.97.3",
     "sass-loader": "^16.0.6",
     "sirv-cli": "^3.0.1",
     "sitemap-static": "^0.4.2",
     "static-site-generator-webpack-plugin": "^3.4.1",
     "style-loader": "^4.0.0",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^4.2.1",
     "tap-spot": "^1.1.2",
     "unist-util-visit": "^5.1.0",
     "webpack": "^5.105.0",

postcss.config.js

@@ -1,5 +1,5 @@
 "use strict";
 
 module.exports = {
-  plugins: [require("tailwindcss"), require("autoprefixer")],
+  plugins: ["@tailwindcss/postcss", "autoprefixer"],
 };