fix(deps): update docusaurus dependencies to v3.6.3 (#1312)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>

.github/renovate.json5

@@ -32,7 +32,7 @@
       "matchCurrentVersion": "!/^0/",
       "matchPackagePatterns": ["@grafana/*", "grafana/grafana-enterprise"],
       "excludePackageNames": ["@grafana/e2e-selectors"],
-      "matchUpdateTypes": ["patch"],
+      "matchUpdateTypes": ["patch"]
     },
     {
       "automerge": true,
@@ -42,7 +42,7 @@
       "matchPackageNames": ["@grafana/e2e-selectors"],
       "followTag": "modified",
       "rangeStrategy": "bump",
-      "matchFileNames": ["packages/plugin-e2e/package.json", "package-lock.json"],
+      "matchFileNames": ["packages/plugin-e2e/package.json", "package-lock.json"]
     },
     {
       "groupName": "grafana dependencies",
@@ -56,7 +56,8 @@
     {
       "groupName": "docusaurus dependencies",
       "labels": ["dependencies", "javascript", "no-changelog"],
-      "matchPackagePatterns": ["@?docusaurus"]
+      "matchPackagePatterns": ["@?docusaurus"],
+      "rangeStrategy": "bump"
     },
     // Auto dependencies should be grouped together to avoid issues
     {
@@ -72,7 +73,7 @@
       "labels": ["dependencies", "javascript", "no-changelog"],
       "matchCurrentVersion": "!/^0/",
       "matchDepTypes": ["devDependencies"],
-      "excludePackageNames": ["@grafana/e2e-selectors"],
+      "excludePackageNames": ["@grafana/e2e-selectors"]
     },
     // patches will only touch the repo lock file so we apply no-changelog to prevent entries in the changelog
     // which would be misleading to consumers.

.github/workflows/deploy-to-developer-portal-dev.yml

@@ -30,7 +30,7 @@ jobs:
         run: npm ci
 
       - name: Build documentation website
-        run: npm run docs:build -- --config docusaurus.config.dev.js
+        run: npm run docs:build -- --config docusaurus.config.dev.ts
 
       - id: 'auth'
         uses: 'google-github-actions/auth@v2'

CONTRIBUTING.md

@@ -128,7 +128,7 @@ Once you've filed the PR:
 
 Redirects:
 
-- In case you have to add a redirect - you can add a new entry to the config section of the following plugin `@docusaurus/plugin-client-redirects` in [docusaurus configuration file](./docusaurus/website/docusaurus.config.base.js).
+- In case you have to add a redirect - you can add a new entry to the config section of the following plugin `@docusaurus/plugin-client-redirects` in [docusaurus configuration file](./docusaurus/website/docusaurus.config.base.ts).
 
 ## Contribute Code
 

docusaurus/website/CONTRIBUTING.md

@@ -46,7 +46,9 @@ docusaurus/
     ├── static/ // folder for static assets
     │   ├── font
     │   └── img
-    ├── docusaurus.config.js
+    ├── docusaurus.config.base.ts // base config dev and prod share settings from
+    ├── docusaurus.config.dev.ts
+    ├── docusaurus.config.prod.ts
     └── package.json
 ```
 

docusaurus/website/README.md

@@ -37,7 +37,7 @@ $ npm run serve
 
 When moving a file, create a client-side redirect so as not to break links from the old location. It is a best practice to also manually update old links to the new location whenever possible.
 
-Insert the client-side redirect here: /plugin-tools/docusaurus/website/docusaurus.config.base.js into the [configuration section](https://github.com/grafana/plugin-tools/blob/0d436bb669a5f3ca37ea267d97e88cfa8508a25e/docusaurus/website/docusaurus.config.base.js#L63) of `@docusaurus/plugin-client-redirects`. The format is:
+Insert the client-side redirect here: /plugin-tools/docusaurus/website/docusaurus.config.base.ts into the [configuration section](https://github.com/grafana/plugin-tools/blob/main/docusaurus/website/docusaurus.config.base.js#L41) of `@docusaurus/plugin-client-redirects`. The format is:
 
 ```
 {

docusaurus/website/docusaurus.config.base.js → docusaurus/website/docusaurus.config.base.ts

@@ -1,28 +1,25 @@
-const path = require('path');
-const remarkFigureCaption = require('gridsome-remark-figure-caption');
-const prism = require('prism-react-renderer');
-
-const {
-  themes: { oneDark },
-} = prism;
+import type { Config } from '@docusaurus/types';
+import path from 'path';
+import remarkFigureCaption from 'gridsome-remark-figure-caption';
+import { themes } from 'prism-react-renderer';
 
 // Replace background and color to better match Grafana theme.
 const grafanaPrismTheme = {
-  ...oneDark,
+  ...themes.oneDark,
   plain: {
     color: 'rgb(204, 204, 220)',
     backgroundColor: '#181b1f',
   },
 };
 
-const customFields = {
+export const customFields = {
   nodeEnv: process.env.NODE_ENV,
 };
 
-/** @type {import('@docusaurus/types').Config} */
-const generalConfig = {
+export const generalConfig: Config = {
   title: 'Grafana Plugin Tools',
   tagline: 'Scaffold a Grafana plugin with one command',
+  url: '',
   baseUrl: 'plugin-tools/',
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
@@ -41,7 +38,7 @@ const generalConfig = {
   },
 };
 
-const plugins = [
+export const plugins = [
   [
     './plugins/docusaurus-custom-webpack-plugin',
     {
@@ -210,7 +207,7 @@ const plugins = [
   ],
 ];
 
-const presetsDocs = {
+export const presetsDocs = {
   path: '../docs',
   exclude: ['**/snippets/**', '**/shared/**', '**/drafts/**'],
   sidebarPath: require.resolve('./sidebars.js'),
@@ -229,11 +226,11 @@ const presetsDocs = {
   ],
 };
 
-const presetsTheme = {
+export const presetsTheme = {
   customCss: require.resolve('./src/css/custom.css'),
 };
 
-const themeConfigNavbar = {
+export const themeConfigNavbar = {
   title: 'Grafana Plugin Tools',
   logo: {
     alt: 'Grafana Logo',
@@ -249,7 +246,7 @@ const themeConfigNavbar = {
   ],
 };
 
-const themeConfigFooter = {
+export const themeConfigFooter = {
   style: 'dark',
   links: [
     {
@@ -291,7 +288,7 @@ const themeConfigFooter = {
   copyright: `Copyright © ${new Date().getFullYear()} Grafana Labs. Built with Docusaurus.`,
 };
 
-const themeConfigPrism = {
+export const themeConfigPrism = {
   theme: grafanaPrismTheme,
   additionalLanguages: ['bash', 'diff', 'json'],
   magicComments: [
@@ -303,20 +300,8 @@ const themeConfigPrism = {
   ],
 };
 
-const themeConfigColorMode = {
+export const themeConfigColorMode = {
   defaultMode: 'dark',
   disableSwitch: true,
   respectPrefersColorScheme: false,
 };
-
-module.exports = {
-  customFields,
-  generalConfig,
-  plugins,
-  presetsDocs,
-  presetsTheme,
-  themeConfigNavbar,
-  themeConfigFooter,
-  themeConfigPrism,
-  themeConfigColorMode,
-};

docusaurus/website/docusaurus.config.dev.js → docusaurus/website/docusaurus.config.dev.ts

@@ -1,6 +1,6 @@
-// @ts-check
-// Note: type annotations allow type checking and IDEs autocompletion
-const {
+import type { Config } from '@docusaurus/types';
+import type * as Preset from '@docusaurus/preset-classic';
+import {
   customFields,
   generalConfig,
   plugins,
@@ -10,14 +10,13 @@ const {
   themeConfigFooter,
   themeConfigPrism,
   themeConfigColorMode,
-} = require('./docusaurus.config.base');
+} from './docusaurus.config.base';
 
 const devPortalHome = 'https://grafana-dev.com/developers';
 const [docsFooterLinks, ...otherFooterLinks] = themeConfigFooter.links;
 const gitHash = process.env.GITHUB_SHA || 'local';
 
-/** @type {import('@docusaurus/types').Config} */
-const config = {
+const config: Config = {
   ...generalConfig,
   url: 'https://grafana-dev.com/',
   baseUrl: 'developers/plugin-tools/',
@@ -32,7 +31,7 @@ const config = {
         },
         theme: presetsTheme,
         blog: false,
-      },
+      } satisfies Preset.Options,
     ],
   ],
 
@@ -88,4 +87,4 @@ const config = {
   ],
 };
 
-module.exports = config;
+export default config;

docusaurus/website/docusaurus.config.js → docusaurus/website/docusaurus.config.ts

@@ -1,6 +1,6 @@
-// @ts-check
-// Note: type annotations allow type checking and IDEs autocompletion
-const {
+import type { Config } from '@docusaurus/types';
+import type * as Preset from '@docusaurus/preset-classic';
+import {
   customFields,
   generalConfig,
   plugins,
@@ -10,14 +10,13 @@ const {
   themeConfigFooter,
   themeConfigPrism,
   themeConfigColorMode,
-} = require('./docusaurus.config.base');
+} from './docusaurus.config.base';
 
 const devPortalHome = 'https://grafana.com/developers';
 const [docsFooterLinks, ...otherFooterLinks] = themeConfigFooter.links;
 const gitHash = process.env.GITHUB_SHA || 'local';
 
-/** @type {import('@docusaurus/types').Config} */
-const config = {
+const config: Config = {
   ...generalConfig,
   url: 'https://grafana.com/',
   baseUrl: 'developers/plugin-tools/',
@@ -32,7 +31,7 @@ const config = {
         },
         theme: presetsTheme,
         blog: false,
-      },
+      } satisfies Preset.Options,
     ],
   ],
 
@@ -95,4 +94,4 @@ const config = {
   ],
 };
 
-module.exports = config;
+export default config;

docusaurus/website/package.json

@@ -15,9 +15,9 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.6.0",
-    "@docusaurus/plugin-client-redirects": "^3.6.0",
-    "@docusaurus/preset-classic": "^3.6.0",
+    "@docusaurus/core": "^3.6.3",
+    "@docusaurus/plugin-client-redirects": "^3.6.3",
+    "@docusaurus/preset-classic": "^3.6.3",
     "@grafana/faro-web-sdk": "^1.9.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
@@ -29,8 +29,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^3.6.0",
-    "@docusaurus/tsconfig": "^3.6.0",
+    "@docusaurus/module-type-aliases": "^3.6.3",
+    "@docusaurus/tsconfig": "^3.6.3",
     "raw-loader": "^4.0.2",
     "typescript": "^5.2.2"
   },

docusaurus/website/tsconfig.json

@@ -3,5 +3,6 @@
   "extends": "@docusaurus/tsconfig",
   "compilerOptions": {
     "baseUrl": "."
-  }
+  },
+  "exclude": [".docusaurus", "build"]
 }