From 2b8245bdcf51f2280dc6d2f83c9c6e5f83dcf606 Mon Sep 17 00:00:00 2001 From: Narin Luangrath Date: Sun, 31 Jul 2022 22:40:02 -0700 Subject: [PATCH 1/6] chore(docusaurus-theme-classic): update theme validation --- packages/docusaurus-theme-classic/src/options.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/docusaurus-theme-classic/src/options.ts b/packages/docusaurus-theme-classic/src/options.ts index a298f10760e6..8cf4fe3a8d3d 100644 --- a/packages/docusaurus-theme-classic/src/options.ts +++ b/packages/docusaurus-theme-classic/src/options.ts @@ -377,10 +377,12 @@ export const ThemeConfigSchema = Joi.object({ }).optional(), prism: Joi.object({ theme: Joi.object({ + id: Joi.string(), plain: Joi.alternatives().try(Joi.array(), Joi.object()).required(), styles: Joi.alternatives().try(Joi.array(), Joi.object()).required(), }).default(DEFAULT_CONFIG.prism.theme), darkTheme: Joi.object({ + id: Joi.string(), plain: Joi.alternatives().try(Joi.array(), Joi.object()).required(), styles: Joi.alternatives().try(Joi.array(), Joi.object()).required(), }), From 6d274003773cf1bf3757a3848b759649bbc7189c Mon Sep 17 00:00:00 2001 From: Narin Luangrath Date: Sun, 31 Jul 2022 22:58:08 -0700 Subject: [PATCH 2/6] chore(docusaurus-theme-classic/common): copy over applicable code from lex111/prism-styles-fouc --- .../src/theme/CodeBlock/Container/index.tsx | 6 +----- .../src/theme/CodeBlock/index.tsx | 12 +----------- .../docusaurus-theme-common/src/internal.ts | 1 - .../src/utils/codeBlockUtils.ts | 18 ------------------ .../src/utils/useThemeConfig.ts | 2 +- 5 files changed, 3 insertions(+), 36 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Container/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Container/index.tsx index d4814add5a76..db3af0210677 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Container/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Container/index.tsx @@ -7,21 +7,17 @@ import React, {type ComponentProps} from 'react'; import clsx from 'clsx'; -import {ThemeClassNames, usePrismTheme} from '@docusaurus/theme-common'; -import {getPrismCssVariables} from '@docusaurus/theme-common/internal'; +import {ThemeClassNames} from '@docusaurus/theme-common'; import styles from './styles.module.css'; export default function CodeBlockContainer({ as: As, ...props }: {as: T} & ComponentProps): JSX.Element { - const prismTheme = usePrismTheme(); - const prismCssVariables = getPrismCssVariables(prismTheme); return ( - {children as string} - - ); + return {children as string}; } diff --git a/packages/docusaurus-theme-common/src/internal.ts b/packages/docusaurus-theme-common/src/internal.ts index 79812c968634..88d026d62076 100644 --- a/packages/docusaurus-theme-common/src/internal.ts +++ b/packages/docusaurus-theme-common/src/internal.ts @@ -118,5 +118,4 @@ export {useLockBodyScroll} from './hooks/useLockBodyScroll'; export {useSearchPage} from './hooks/useSearchPage'; export {useCodeWordWrap} from './hooks/useCodeWordWrap'; export {useSkipToContent} from './hooks/useSkipToContent'; -export {getPrismCssVariables} from './utils/codeBlockUtils'; export {useBackToTopButton} from './hooks/useBackToTopButton'; diff --git a/packages/docusaurus-theme-common/src/utils/codeBlockUtils.ts b/packages/docusaurus-theme-common/src/utils/codeBlockUtils.ts index 5acef72cf38a..bb837201112c 100644 --- a/packages/docusaurus-theme-common/src/utils/codeBlockUtils.ts +++ b/packages/docusaurus-theme-common/src/utils/codeBlockUtils.ts @@ -5,9 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import type {CSSProperties} from 'react'; import rangeParser from 'parse-numeric-range'; -import type {PrismTheme} from 'prism-react-renderer'; const codeBlockTitleRegex = /title=(?["'])(?.*?)\1/; const metastringLinesRangeRegex = /\{(?<range>[\d,-]+)\}/; @@ -233,19 +231,3 @@ export function parseLines( }); return {lineClassNames, code}; } - -export function getPrismCssVariables(prismTheme: PrismTheme): CSSProperties { - const mapping: {[name: keyof PrismTheme['plain']]: string} = { - color: '--prism-color', - backgroundColor: '--prism-background-color', - }; - - const properties: {[key: string]: string} = {}; - Object.entries(prismTheme.plain).forEach(([key, value]) => { - const varName = mapping[key]; - if (varName && typeof value === 'string') { - properties[varName] = value; - } - }); - return properties; -} diff --git a/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts b/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts index 17b4fbda6b81..1416e650727c 100644 --- a/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts +++ b/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts @@ -59,7 +59,7 @@ export type AnnouncementBarConfig = { export type PrismConfig = { theme: PrismTheme; - darkTheme?: PrismTheme; + darkTheme: PrismTheme; defaultLanguage?: string; additionalLanguages: string[]; magicComments: MagicCommentConfig[]; From de4568179618ec04414a702790d160a4999c67f6 Mon Sep 17 00:00:00 2001 From: Narin Luangrath <nluangrath@godaddy.com> Date: Sun, 31 Jul 2022 23:30:01 -0700 Subject: [PATCH 3/6] improv(docusaurus-theme-classic): fix FOUC Context: https://github.com/FormidableLabs/prism-react-renderer/pull/160 --- packages/docusaurus-theme-classic/src/index.ts | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/docusaurus-theme-classic/src/index.ts b/packages/docusaurus-theme-classic/src/index.ts index b85fddbbf2c3..74648dd17147 100644 --- a/packages/docusaurus-theme-classic/src/index.ts +++ b/packages/docusaurus-theme-classic/src/index.ts @@ -9,6 +9,7 @@ import path from 'path'; import {createRequire} from 'module'; import rtlcss from 'rtlcss'; import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations'; +import {generateScriptForSSR} from 'prism-react-renderer'; import {getTranslationFiles, translateThemeConfig} from './translations'; import type {LoadContext, Plugin} from '@docusaurus/types'; import type {ThemeConfig} from '@docusaurus/theme-common'; @@ -107,7 +108,7 @@ export default function themeClassic( const { announcementBar, colorMode, - prism: {additionalLanguages}, + prism: {additionalLanguages, theme, darkTheme}, } = themeConfig; const {customCss} = options; const {direction} = localeConfigs[currentLocale]!; @@ -198,6 +199,17 @@ ${noFlashColorMode(colorMode)} ${announcementBar ? AnnouncementBarInlineJavaScript : ''} `, }, + { + tagName: 'script', + innerHTML: generateScriptForSSR( + [theme, darkTheme], + `() => ( + document.documentElement.getAttribute('data-theme') === 'dark' + ? ${darkTheme.id} + : ${theme.id} + )`, + ), + }, ], }; }, From 10f07d22874baf7aa1a45333fe80794c0a083e3b Mon Sep 17 00:00:00 2001 From: Narin Luangrath <nluangrath@godaddy.com> Date: Mon, 1 Aug 2022 09:39:57 -0700 Subject: [PATCH 4/6] fix(docusaurus-theme-classic): misc fixes --- packages/docusaurus-theme-classic/src/options.ts | 1 + .../src/theme/CodeBlock/Content/String.tsx | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/docusaurus-theme-classic/src/options.ts b/packages/docusaurus-theme-classic/src/options.ts index 8cf4fe3a8d3d..cac90add97c0 100644 --- a/packages/docusaurus-theme-classic/src/options.ts +++ b/packages/docusaurus-theme-classic/src/options.ts @@ -46,6 +46,7 @@ export const DEFAULT_CONFIG: ThemeConfig = { prism: { additionalLanguages: [], theme: defaultPrismTheme, + darkTheme: defaultPrismTheme, magicComments: [ { className: 'theme-code-block-highlighted-line', diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx index e1c72d0640ba..482ebcb72825 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx @@ -69,11 +69,12 @@ export default function CodeBlockString({ theme={prismTheme} code={code} language={(language ?? 'text') as Language}> - {({className, tokens, getLineProps, getTokenProps}) => ( + {({className, tokens, getLineProps, getTokenProps, style}) => ( <pre /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */ tabIndex={0} ref={wordWrap.codeBlockRef} + style={style} className={clsx(className, styles.codeBlock, 'thin-scrollbar')}> <code className={clsx( From 1fa33534a9a358fb0107a549898ff2f83f6c1282 Mon Sep 17 00:00:00 2001 From: Narin Luangrath <nluangrath@godaddy.com> Date: Mon, 1 Aug 2022 09:48:12 -0700 Subject: [PATCH 5/6] fix(docusaurus-theme-classic): quote strings in stringified js --- packages/docusaurus-theme-classic/src/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/index.ts b/packages/docusaurus-theme-classic/src/index.ts index 74648dd17147..30184aff57e5 100644 --- a/packages/docusaurus-theme-classic/src/index.ts +++ b/packages/docusaurus-theme-classic/src/index.ts @@ -205,8 +205,8 @@ ${announcementBar ? AnnouncementBarInlineJavaScript : ''} [theme, darkTheme], `() => ( document.documentElement.getAttribute('data-theme') === 'dark' - ? ${darkTheme.id} - : ${theme.id} + ? '${darkTheme.id}' + : '${theme.id}' )`, ), }, From 8401ef0a21a45347812be48137e3bb10ab048309 Mon Sep 17 00:00:00 2001 From: Narin Luangrath <nluangrath@godaddy.com> Date: Mon, 1 Aug 2022 10:58:19 -0700 Subject: [PATCH 6/6] chore(website/src/utils/prismDark.mjs): add id to theme --- website/src/utils/prismDark.mjs | 1 + 1 file changed, 1 insertion(+) diff --git a/website/src/utils/prismDark.mjs b/website/src/utils/prismDark.mjs index b5c9099190e9..6e659fcef3d2 100644 --- a/website/src/utils/prismDark.mjs +++ b/website/src/utils/prismDark.mjs @@ -8,6 +8,7 @@ import darkTheme from 'prism-react-renderer/themes/vsDark/index.cjs.js'; export default { + id: 'prismDark', plain: { color: '#D4D4D4', backgroundColor: '#212121',