chore: bump docusaurus, use docusaurus/preset-classic (#4960)

* chore: bump docusaurus, use preset-classic * refactor: add important Co-authored-by: Josh Goldberg <me@joshuakgoldberg.com>
typescript-eslint · May 16, 2022 · 03577a6 · 03577a6
1 parent f3a1aba
commit 03577a6
Show file tree

Hide file tree

Showing 7 changed files with 697 additions and 719 deletions.
diff --git a/packages/website/docusaurus.config.js b/packages/website/docusaurus.config.js
@@ -21,44 +21,40 @@ const config = {
   organizationName: 'typescript-eslint',
   projectName: 'typescript-eslint',
   clientModules: [require.resolve('./src/clientModules.js')],
-  plugins: [
-    require.resolve('./webpack.plugin'),
-    '@docusaurus/plugin-debug',
+  presets: [
     [
-      '@docusaurus/theme-classic',
-      /** @type {import('@docusaurus/theme-classic').Options} */
-      {
-        customCss: require.resolve('./src/css/custom.css'),
-      },
-    ],
-    '@docusaurus/theme-search-algolia',
-    [
-      '@docusaurus/plugin-content-pages',
-      /** @type {import('@docusaurus/theme-search-algolia').Options} */
-      {
-        beforeDefaultRemarkPlugins,
-        remarkPlugins,
-      },
-    ],
-    [
-      '@docusaurus/plugin-content-docs',
-      /** @type {import('@docusaurus/plugin-content-docs').Options} */
-      {
-        id: 'rules-docs',
-        path: '../eslint-plugin/docs/rules',
-        sidebarPath: require.resolve('./sidebars/sidebar.rules.js'),
-        routeBasePath: 'rules',
-        editUrl: `${githubUrl}/edit/main/packages/website/`,
-        beforeDefaultRemarkPlugins,
-        remarkPlugins,
-        exclude: ['TEMPLATE.md'],
-        breadcrumbs: false,
-      },
+      'classic',
+      /** @type {import('@docusaurus/preset-classic').Options} */
+      ({
+        docs: {
+          id: 'rules-docs',
+          path: '../eslint-plugin/docs/rules',
+          sidebarPath: require.resolve('./sidebars/sidebar.rules.js'),
+          routeBasePath: 'rules',
+          editUrl: `${githubUrl}/edit/main/packages/website/`,
+          beforeDefaultRemarkPlugins,
+          remarkPlugins,
+          exclude: ['TEMPLATE.md'],
+          breadcrumbs: false,
+        },
+        // TODO enable this
+        blog: false,
+        pages: {
+          beforeDefaultRemarkPlugins,
+          remarkPlugins,
+        },
+        theme: {
+          customCss: require.resolve('./src/css/custom.css'),
+        },
+      }),
     ],
+  ],
+  plugins: [
+    require.resolve('./webpack.plugin'),
     [
       '@docusaurus/plugin-content-docs',
       /** @type {import('@docusaurus/plugin-content-docs').Options} */
-      {
+      ({
         id: 'base-docs',
         path: '../../docs',
         routeBasePath: 'docs',
@@ -67,7 +63,7 @@ const config = {
         beforeDefaultRemarkPlugins,
         remarkPlugins,
         breadcrumbs: false,
-      },
+      }),
     ],
   ],
   themeConfig:

diff --git a/packages/website/package.json b/packages/website/package.json
@@ -15,14 +15,10 @@
   },
   "dependencies": {
     "@babel/runtime": "7.17.9",
-    "@docusaurus/core": "^2.0.0-beta.18",
-    "@docusaurus/plugin-content-docs": "^2.0.0-beta.18",
-    "@docusaurus/plugin-content-pages": "^2.0.0-beta.18",
-    "@docusaurus/plugin-debug": "^2.0.0-beta.18",
-    "@docusaurus/remark-plugin-npm2yarn": "^2.0.0-beta.18",
-    "@docusaurus/theme-classic": "^2.0.0-beta.18",
-    "@docusaurus/theme-common": "^2.0.0-beta.18",
-    "@docusaurus/theme-search-algolia": "^2.0.0-beta.18",
+    "@docusaurus/core": "2.0.0-beta.20",
+    "@docusaurus/preset-classic": "2.0.0-beta.20",
+    "@docusaurus/remark-plugin-npm2yarn": "2.0.0-beta.20",
+    "@docusaurus/theme-common": "2.0.0-beta.20",
     "@mdx-js/react": "1.6.22",
     "@typescript-eslint/website-eslint": "5.23.0",
     "clsx": "^1.1.1",

diff --git a/packages/website/src/clientModules.js b/packages/website/src/clientModules.js
@@ -1,3 +1,5 @@
-if (typeof window !== 'undefined') {
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
+if (ExecutionEnvironment.canUseDOM) {
   require('konamimojisplosion').initializeKonamimojisplosion();
 }
diff --git a/packages/website/src/css/custom.css b/packages/website/src/css/custom.css
@@ -24,6 +24,7 @@ html:root {
   --code-editor-bg: #ffffff;
 
   --docsearch-muted-color: #666;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 html[data-theme='dark']:root {
@@ -60,17 +61,7 @@ html[data-theme='dark']:root {
   scrollbar-color: #454a4d #202324;
 
   --docsearch-muted-color: #aaa;
-}
-
-.docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.1);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
-}
-
-html[data-theme='dark'] .docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.3);
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
 .header-github-link:hover {

diff --git a/packages/website/src/css/prism.css b/packages/website/src/css/prism.css
@@ -56,10 +56,10 @@ html[data-theme='dark'] {
   --token-color-highlight: rgba(247, 235, 198, 0.2);
 }
 
-div[class*='codeBlockContainer'],
-div[class*='codeBlockContainer'] pre {
-  color: var(--token-color);
-  background-color: var(--token-background);
+.theme-code-block,
+.theme-code-block pre {
+  color: var(--token-color) !important;
+  background-color: var(--token-background) !important;
   --ifm-color-emphasis-300: var(--token-border);
 }
 

diff --git a/packages/website/src/theme/prism-include-languages.js b/packages/website/src/theme/prism-include-languages.js
@@ -1,27 +1,16 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import siteConfig from '@generated/docusaurus.config';
 
-const prismIncludeLanguages = PrismObject => {
-  if (ExecutionEnvironment.canUseDOM) {
-    const {
-      themeConfig: { prism = {} },
-    } = siteConfig;
-    const { additionalLanguages = [] } = prism;
-    window.Prism = PrismObject;
+export default function prismIncludeLanguages(PrismObject) {
+  const {
+    themeConfig: { prism },
+  } = siteConfig;
+  const { additionalLanguages } = prism;
+  globalThis.Prism = PrismObject;
 
-    additionalLanguages.forEach(lang => {
-      require(`prismjs/components/prism-${lang}`); // eslint-disable-line
-    });
+  additionalLanguages.forEach(lang => {
+    require(`prismjs/components/prism-${lang}`); // eslint-disable-line
+  });
 
-    require(`../prism/language/jsonc`);
-    delete window.Prism;
-  }
-};
-
-export default prismIncludeLanguages;
+  require(`../prism/language/jsonc`);
+  delete globalThis.Prism;
+}