Merge pull request #58 from nodecg/docusaurus-v3

chore: update to docusaurus v3

docs/nodecg-configuration.md

@@ -69,7 +69,7 @@ NodeCG is configured via a `cfg/nodecg.js`, `cfg/nodecg.yaml`, or `cfg/nodecg.js
   - `enabled` _Boolean_ Whether to enable Sentry error reporting. [DEFAULT: `false`]
   - `dsn` _String_ Your Sentry API key for error reporting. This option is required when `sentry.enabled = true`! [NO DEFAULT!]
 
-### Example {#example} Config {#example}
+### Example Config {#example}
 
 ```js title="cfg/nodecg.js"
 module.exports = {

docs/security.md

@@ -257,7 +257,7 @@ To get a Discord role ID, enable Discord developer mode and then right click on
 
 1. [Create/copy your Steam Web API Key](https://steamcommunity.com/dev/apikey)
 2. Obtain the SteamID64 string for each of the accounts you wish to allow.
-   - <https://steamid.io/> is one tool for looking these up.
+   - [steamid.io](https://steamid.io/) is one tool for looking these up.
 3. Configure your `nodecg/cfg/nodecg.json` as such:
 
 ```json

docusaurus.config.js → docusaurus.config.ts

@@ -1,9 +1,9 @@
-// @ts-check
+import type { Config } from '@docusaurus/types';
+import type * as Preset from '@docusaurus/preset-classic';
 
-const latestVersion = "2.1.0"
+const latestVersion = "2.1.11";
 
-/** @type {import('@docusaurus/types').Config} */
-module.exports = {
+const config: Config = {
   title: 'NodeCG',
   tagline: 'Create broadcast graphics using Node.js and a browser',
   url: 'https://nodecg.dev/',
@@ -12,7 +12,6 @@ module.exports = {
   organizationName: 'nodecg',
   projectName: 'docs',
   themeConfig: {
-    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     prism: {
       theme: require('./src/css/nodecg-light'),
       darkTheme: require('./src/css/nodecg-dark'),
@@ -96,11 +95,10 @@ module.exports = {
       copyright: 'Copyright (c) 2023 Alex Van Camp, Matthew McNamara, and contributors',
     },
     image: 'img/splash.png'
-  },
+  } satisfies Preset.ThemeConfig,
   presets: [
     [
       '@docusaurus/preset-classic',
-      /** @type {import('@docusaurus/preset-classic').Options} */
       {
         docs: {
           sidebarPath: require.resolve('./sidebars.js'),
@@ -112,7 +110,7 @@ module.exports = {
         theme: {
           customCss: require.resolve('./src/css/custom.css'),
         },
-      },
+      } satisfies Preset.Options,
     ],
   ],
   plugins: [require.resolve('./force-theme.js'), require.resolve('docusaurus-lunr-search')],
@@ -128,4 +126,6 @@ module.exports = {
     }
   },
   clientModules: [require.resolve("./clientModule.js")]
-};
+};
+
+export default config;

package.json

@@ -25,16 +25,17 @@
     ]
   },
   "dependencies": {
-    "@docusaurus/core": "^2.4.1",
-    "@docusaurus/preset-classic": "^2.4.1",
-    "classnames": "2.3.2",
-    "docusaurus-lunr-search": "^2.4.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@docusaurus/core": "^3.0.0",
+    "@docusaurus/preset-classic": "^3.0.0",
+    "clsx": "^2.0.0",
+    "docusaurus-lunr-search": "^3.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^2.4.1",
-    "@tsconfig/docusaurus": "^2.0.0",
-    "typescript": "^5.1.6"
+    "@docusaurus/module-type-aliases": "^3.0.0",
+    "@docusaurus/tsconfig": "^3.0.0",
+    "@docusaurus/types": "^3.0.0",
+    "typescript": "^5.2.2"
   }
 }

sidebars.js → sidebars.ts

@@ -1,4 +1,6 @@
-module.exports = {
+import type { SidebarsConfig } from '@docusaurus/plugin-content-docs';
+
+const sidebars: SidebarsConfig = {
 	mainSidebar: {
 		'Quick Start': ['what-is-nodecg', 'installing', 'creating-bundles'],
 		Guides: [
@@ -59,3 +61,5 @@ module.exports = {
 		]
 	}
 };
+
+export default sidebars;

src/css/custom.css

@@ -57,6 +57,7 @@ html[data-theme="dark"] {
 	--ifm-blockquote-color: #b7b7b7;
 	--ifm-color-info: #ffffff;
 	--ifm-table-border-color: #dadde1;
+	--ifm-breadcrumb-color-active: var(--nodecg-light-primary);
 }
 
 /* Info admonition colour */

src/pages/index.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import classnames from "classnames";
+import clsx from 'clsx';
 import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
@@ -30,14 +29,14 @@ const features = [
 					HTML such as:
 				</Translate>
 				<div
-					className={classnames(
+					className={clsx(
 						"container-small",
 						styles.environments
 					)}
 				>
 					<div className="row">
 						<a
-							className={classnames(
+							className={clsx(
 								"col",
 								styles.environmentItem,
 								styles.shadow2
@@ -47,7 +46,7 @@ const features = [
 							OBS Studio
 						</a>
 						<a
-							className={classnames(
+							className={clsx(
 								"col",
 								styles.environmentItem,
 								styles.shadow2
@@ -59,7 +58,7 @@ const features = [
 					</div>
 					<div className="row">
 						<a
-							className={classnames(
+							className={clsx(
 								"col",
 								styles.environmentItem,
 								styles.shadow2
@@ -69,7 +68,7 @@ const features = [
 							xSplit
 						</a>
 						<a
-							className={classnames(
+							className={clsx(
 								"col",
 								styles.environmentItem,
 								styles.shadow2
@@ -107,7 +106,7 @@ const features = [
 function Feature({ imageUrl, title, description }) {
 	const imgUrl = useBaseUrl(imageUrl);
 	return (
-		<div className={classnames("col col--4", styles.feature)}>
+		<div className={clsx("col col--4", styles.feature)}>
 			{imgUrl && (
 				<div className="text--center">
 					<img
@@ -131,7 +130,7 @@ function Home() {
 			description="Browser-based broadcast graphics and controls"
 		>
 			<header
-				className={classnames("hero hero--primary", styles.heroBanner)}
+				className={clsx("hero hero--primary", styles.heroBanner)}
 			>
 				<div className="container">
 					<img alt="Splash" src="img/splash.png" />
@@ -143,7 +142,7 @@ function Home() {
 					</p>
 					<div className={styles.buttons}>
 						<Link
-							className={classnames(
+							className={clsx(
 								"button button--contained button--secondary button--lg",
 								styles.getStarted
 							)}

src/theme/SearchBar/index.js

@@ -1,5 +1,5 @@
 import React, { useRef, useCallback, useState } from "react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { useHistory } from "@docusaurus/router";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { usePluginData } from '@docusaurus/useGlobalData';
@@ -83,7 +83,7 @@ const Search = props => {
       <span
         aria-label="expand searchbar"
         role="button"
-        className={classnames("search-icon", {
+        className={clsx("search-icon", {
           "search-icon-hidden": props.isSearchBarExpanded
         })}
         onClick={toggleSearchIconClick}
@@ -95,7 +95,7 @@ const Search = props => {
         type="search"
         placeholder={indexReady ? 'Search' : 'Loading...'}
         aria-label="Search"
-        className={classnames(
+        className={clsx(
           "navbar__search-input",
           { "search-bar-expanded": props.isSearchBarExpanded },
           { "search-bar": !props.isSearchBarExpanded }

tsconfig.json

@@ -1,6 +1,6 @@
 {
   // This file is not used in compilation. It is here just for a nice editor experience.
-  "extends": "@tsconfig/docusaurus/tsconfig.json",
+  "extends": "@docusaurus/tsconfig",
   "compilerOptions": {
     "baseUrl": "."
   }