Thanks to visit codestin.com
Credit goes to github.com

Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 16, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
feac4f8
chore: bump docusaurus, use preset-classic
Josh-Cena May 11, 2022
240d3cf
refactor: add important
Josh-Cena May 11, 2022
1d5b555
Merge branch 'main' into upgrade-docusaurus
JoshuaKGoldberg May 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 30 additions & 34 deletions packages/website/docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} */
({
Comment on lines +27 to +28
Copy link
Member Author

@Josh-Cena Josh-Cena May 11, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

JSDoc only works if you wrap the object literal with brackets. In the latest version, we've added actual JSDoc documentation to all APIs, so it's good if we can do it properly.

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',
Expand All @@ -67,7 +63,7 @@ const config = {
beforeDefaultRemarkPlugins,
remarkPlugins,
breadcrumbs: false,
},
}),
],
],
themeConfig:
Expand Down
12 changes: 4 additions & 8 deletions packages/website/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 3 additions & 1 deletion packages/website/src/clientModules.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
if (typeof window !== 'undefined') {
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';

if (ExecutionEnvironment.canUseDOM) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ha, I remember bumping into this discussion! Glad it's resolved 🙂

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Except that ExecutionEnvironment.canUseDOM does exactly the same thing as typeof window !== 'undefined' (except doing a few more checks) 🤦‍♂️

It's now officially made its way to the docs, now that client modules are finalized and published: https://docusaurus.io/docs/advanced/client#:~:text=remember%20to%20check%20the%20execution%20environment

require('konamimojisplosion').initializeKonamimojisplosion();
}
13 changes: 2 additions & 11 deletions packages/website/src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -60,17 +61,7 @@ html[data-theme='dark']:root {
scrollbar-color: #454a4d #202324;

--docsearch-muted-color: #aaa;
}

.docusaurus-highlight-code-line {
Copy link
Member Author

@Josh-Cena Josh-Cena May 11, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a breaking change: the class name has been removed in Docusaurus. We are using CSS vars instead. But AFAIK it won't impact us because it seems we are not using code line highlighting.

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 {
Expand Down
8 changes: 4 additions & 4 deletions packages/website/src/css/prism.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a more stable class name and is recommended.

.theme-code-block pre {
color: var(--token-color) !important;
Copy link
Member Author

@Josh-Cena Josh-Cena May 11, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is to work around a Docusaurus bug: facebook/docusaurus#3678

I'd still recommend to use the theme-code-block class name, even if it means using !important...

background-color: var(--token-background) !important;
--ifm-color-emphasis-300: var(--token-border);
}

Expand Down
35 changes: 12 additions & 23 deletions packages/website/src/theme/prism-include-languages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Comment on lines +3 to +16
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Backporting changes from upstream. By using globalThis, we can now support server-side rendering of custom languages as well.

Loading