From 1659b950a2ab76bd02ec486a87ad3640397786a2 Mon Sep 17 00:00:00 2001 From: ozakione <29860391+OzakIOne@users.noreply.github.com> Date: Thu, 7 Dec 2023 17:17:13 +0100 Subject: [PATCH 01/13] create branch From 4f70bf305cdfd16c4b54c8bbde448e2ed1f9395a Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Thu, 7 Dec 2023 17:54:07 +0100 Subject: [PATCH 02/13] add themeConfig.tsx test file --- website/themeConfig.tsx | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 website/themeConfig.tsx diff --git a/website/themeConfig.tsx b/website/themeConfig.tsx new file mode 100644 index 000000000000..8114cf6cbfd7 --- /dev/null +++ b/website/themeConfig.tsx @@ -0,0 +1,33 @@ +/** + * 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 type {ReactNode} from 'react'; +import Link from '@docusaurus/Link'; +import Translate from '@docusaurus/Translate'; + +export default { + announcementBar: { + id: 'announcementBar-3', // Increment on change + // content: `🎉️ Docusaurus v3.0 is now out! 🥳️`, + content: function AnnoncementBarComponent(): ReactNode { + return ( + + + TEST IT WORKS Docusaurus v3.0 + + ), + }}> + {'🎉 {{link}}, is now out! 🥳'} + + + ); + }, + }, +}; From 9bc8675cd0e06d84cc26b9d3a96bab20db090bfb Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Thu, 7 Dec 2023 18:53:07 +0100 Subject: [PATCH 03/13] POC of browser themeConfig file --- .../src/index.d.ts | 7 +++++ .../theme/AnnouncementBar/Content/index.tsx | 30 ++++++++++++------- .../src/utils/useThemeConfig.ts | 13 ++++++-- packages/docusaurus-types/src/config.d.ts | 1 + packages/docusaurus-types/src/context.d.ts | 3 +- packages/docusaurus-utils/src/constants.ts | 2 ++ packages/docusaurus-utils/src/index.ts | 1 + .../__tests__/docusaurusContext.test.tsx | 1 + .../src/client/docusaurusContext.tsx | 2 ++ packages/docusaurus/src/server/index.ts | 14 +++++++++ .../{themeConfig.tsx => docusaurus.theme.tsx} | 4 +-- 11 files changed, 63 insertions(+), 15 deletions(-) rename website/{themeConfig.tsx => docusaurus.theme.tsx} (89%) diff --git a/packages/docusaurus-module-type-aliases/src/index.d.ts b/packages/docusaurus-module-type-aliases/src/index.d.ts index 1f0e7679420a..b24f992ef920 100644 --- a/packages/docusaurus-module-type-aliases/src/index.d.ts +++ b/packages/docusaurus-module-type-aliases/src/index.d.ts @@ -19,6 +19,13 @@ declare module '@generated/docusaurus.config' { export default config; } +declare module '@generated/docusaurus.theme' { + import type {ThemeConfig} from '@docusaurus/types'; + + const themeConfig: ThemeConfig; + export default themeConfig; +} + declare module '@generated/site-metadata' { import type {SiteMetadata} from '@docusaurus/types'; diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/Content/index.tsx b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/Content/index.tsx index 4feb2bc2b7d7..4fcec6d13150 100644 --- a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/Content/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/Content/index.tsx @@ -15,14 +15,24 @@ export default function AnnouncementBarContent( props: Props, ): JSX.Element | null { const {announcementBar} = useThemeConfig(); - const {content} = announcementBar!; - return ( -
- ); + const {content: Content} = announcementBar!; + + // TODO Docusaurus v4: remove legacy annoncement bar html string form? + if (typeof Content === 'string') { + return ( +
+ ); + } + return ( +
+ +
+ ); + } diff --git a/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts b/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts index 17b4fbda6b81..e3c5f3b46fed 100644 --- a/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts +++ b/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts @@ -5,6 +5,7 @@ * LICENSE file in the root directory of this source tree. */ +import type {ComponentType} from 'react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import type {PrismTheme} from 'prism-react-renderer'; import type {DeepPartial} from 'utility-types'; @@ -51,7 +52,7 @@ export type ColorModeConfig = { export type AnnouncementBarConfig = { id: string; - content: string; + content: string | ComponentType; backgroundColor: string; textColor: string; isCloseable: boolean; @@ -99,6 +100,7 @@ export type TableOfContents = { maxHeadingLevel: number; }; +// TODO use TS interface declaration merging? // Theme config after validation/normalization export type ThemeConfig = { docs: { @@ -129,7 +131,14 @@ export type UserThemeConfig = DeepPartial; /** * A convenient/more semantic way to get theme config from context. + * TODO remove old themeConfig in Docusaurus v4? + * TODO remove this hook in v4 in favor of a core hook? */ export function useThemeConfig(): ThemeConfig { - return useDocusaurusContext().siteConfig.themeConfig as ThemeConfig; + const oldThemeConfig = useDocusaurusContext().siteConfig + .themeConfig as ThemeConfig; + const newThemeConfig = useDocusaurusContext().themeConfig as ThemeConfig; + + // TODO emit errors on duplicate keys + return {...oldThemeConfig, ...newThemeConfig}; } diff --git a/packages/docusaurus-types/src/config.d.ts b/packages/docusaurus-types/src/config.d.ts index 3a7bb99ae743..355855387f80 100644 --- a/packages/docusaurus-types/src/config.d.ts +++ b/packages/docusaurus-types/src/config.d.ts @@ -12,6 +12,7 @@ import type {PluginConfig, PresetConfig, HtmlTagObject} from './plugin'; export type ReportingSeverity = 'ignore' | 'log' | 'warn' | 'throw'; +// TODO use TypeScript interface declaration merging export type ThemeConfig = { [key: string]: unknown; }; diff --git a/packages/docusaurus-types/src/context.d.ts b/packages/docusaurus-types/src/context.d.ts index e05f8a9a3256..c1f07335d8d8 100644 --- a/packages/docusaurus-types/src/context.d.ts +++ b/packages/docusaurus-types/src/context.d.ts @@ -4,7 +4,7 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ -import type {DocusaurusConfig} from './config'; +import type {DocusaurusConfig, ThemeConfig} from './config'; import type {CodeTranslations, I18n} from './i18n'; import type {LoadedPlugin, PluginVersionInformation} from './plugin'; import type {RouteConfig} from './routing'; @@ -12,6 +12,7 @@ import type {RouteConfig} from './routing'; export type DocusaurusContext = { siteConfig: DocusaurusConfig; siteMetadata: SiteMetadata; + themeConfig: ThemeConfig; globalData: GlobalData; i18n: I18n; codeTranslations: CodeTranslations; diff --git a/packages/docusaurus-utils/src/constants.ts b/packages/docusaurus-utils/src/constants.ts index 5039d6989b00..e3ff22713882 100644 --- a/packages/docusaurus-utils/src/constants.ts +++ b/packages/docusaurus-utils/src/constants.ts @@ -36,6 +36,8 @@ export const DEFAULT_BUILD_DIR_NAME = 'build'; */ export const DEFAULT_CONFIG_FILE_NAME = 'docusaurus.config'; +export const DEFAULT_THEME_FILE_NAME = 'docusaurus.theme'; + /** Can be absolute or relative to site directory. */ export const BABEL_CONFIG_FILE_NAME = process.env.DOCUSAURUS_BABEL_CONFIG_FILE_NAME ?? 'babel.config.js'; diff --git a/packages/docusaurus-utils/src/index.ts b/packages/docusaurus-utils/src/index.ts index 5bb77a0c054f..352cc92ba3af 100644 --- a/packages/docusaurus-utils/src/index.ts +++ b/packages/docusaurus-utils/src/index.ts @@ -11,6 +11,7 @@ export { DOCUSAURUS_VERSION, DEFAULT_BUILD_DIR_NAME, DEFAULT_CONFIG_FILE_NAME, + DEFAULT_THEME_FILE_NAME, BABEL_CONFIG_FILE_NAME, GENERATED_FILES_DIR_NAME, SRC_DIR_NAME, diff --git a/packages/docusaurus/src/client/__tests__/docusaurusContext.test.tsx b/packages/docusaurus/src/client/__tests__/docusaurusContext.test.tsx index 24713c596f5c..c7566ae7198e 100644 --- a/packages/docusaurus/src/client/__tests__/docusaurusContext.test.tsx +++ b/packages/docusaurus/src/client/__tests__/docusaurusContext.test.tsx @@ -33,6 +33,7 @@ describe('DocusaurusContextProvider', () => { "i18n": {}, "siteConfig": {}, "siteMetadata": {}, + "themeConfig": {}, } `); }); diff --git a/packages/docusaurus/src/client/docusaurusContext.tsx b/packages/docusaurus/src/client/docusaurusContext.tsx index 5bed42737f37..40c4510484a9 100644 --- a/packages/docusaurus/src/client/docusaurusContext.tsx +++ b/packages/docusaurus/src/client/docusaurusContext.tsx @@ -7,6 +7,7 @@ import React, {type ReactNode} from 'react'; import siteConfig from '@generated/docusaurus.config'; +import themeConfig from '@generated/docusaurus.theme'; import globalData from '@generated/globalData'; import i18n from '@generated/i18n'; import codeTranslations from '@generated/codeTranslations'; @@ -18,6 +19,7 @@ import type {DocusaurusContext} from '@docusaurus/types'; const contextValue: DocusaurusContext = { siteConfig, siteMetadata, + themeConfig, globalData, i18n, codeTranslations, diff --git a/packages/docusaurus/src/server/index.ts b/packages/docusaurus/src/server/index.ts index ab50c1883d31..1208b85c19cf 100644 --- a/packages/docusaurus/src/server/index.ts +++ b/packages/docusaurus/src/server/index.ts @@ -13,6 +13,7 @@ import { localizePath, DEFAULT_BUILD_DIR_NAME, DEFAULT_CONFIG_FILE_NAME, + DEFAULT_THEME_FILE_NAME, GENERATED_FILES_DIR_NAME, } from '@docusaurus/utils'; import {loadSiteConfig} from './config'; @@ -172,6 +173,18 @@ export default ${JSON.stringify(siteConfig, null, 2)}; `, ); + const genThemeConfig = generate( + generatedFilesDir, + `${DEFAULT_THEME_FILE_NAME}.js`, + `/* + * AUTOGENERATED - DON'T EDIT + * Your edits in this file will be overwritten in the next build! + * Modify the docusaurus.config.js file at your site's root instead. + */ +export {default} from '@site/${DEFAULT_THEME_FILE_NAME}'; +`, + ); + const genClientModules = generate( generatedFilesDir, 'client-modules.js', @@ -236,6 +249,7 @@ ${Object.entries(registry) genWarning, genClientModules, genSiteConfig, + genThemeConfig, genRegistry, genRoutesChunkNames, genRoutes, diff --git a/website/themeConfig.tsx b/website/docusaurus.theme.tsx similarity index 89% rename from website/themeConfig.tsx rename to website/docusaurus.theme.tsx index 8114cf6cbfd7..786317da915c 100644 --- a/website/themeConfig.tsx +++ b/website/docusaurus.theme.tsx @@ -12,7 +12,7 @@ export default { announcementBar: { id: 'announcementBar-3', // Increment on change // content: `🎉️ Docusaurus v3.0 is now out! 🥳️`, - content: function AnnoncementBarComponent(): ReactNode { + content: function AnnoncementBarContent(): ReactNode { return ( ), }}> - {'🎉 {{link}}, is now out! 🥳'} + {'🎉 {link}, is now out! 🥳'} ); From e24135485ce3bd0aea13df15f282cf99d5cdb4d9 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Thu, 7 Dec 2023 19:59:39 +0100 Subject: [PATCH 04/13] retrocompatible read of conventional theme config --- packages/docusaurus-types/src/context.d.ts | 1 + .../__snapshots__/index.test.ts.snap | 1 + packages/docusaurus/src/server/config.ts | 63 +++++++++++++++++-- packages/docusaurus/src/server/index.ts | 16 ++++- 4 files changed, 73 insertions(+), 8 deletions(-) diff --git a/packages/docusaurus-types/src/context.d.ts b/packages/docusaurus-types/src/context.d.ts index c1f07335d8d8..e7aac7f10b9d 100644 --- a/packages/docusaurus-types/src/context.d.ts +++ b/packages/docusaurus-types/src/context.d.ts @@ -35,6 +35,7 @@ export type LoadContext = { generatedFilesDir: string; siteConfig: DocusaurusConfig; siteConfigPath: string; + themeConfigPath: string | undefined; // TODO Docusaurus v4: make it required outDir: string; /** * Directory where all source translations for the current locale can be found diff --git a/packages/docusaurus/src/server/__tests__/__snapshots__/index.test.ts.snap b/packages/docusaurus/src/server/__tests__/__snapshots__/index.test.ts.snap index 45b94b869406..d8c37243b745 100644 --- a/packages/docusaurus/src/server/__tests__/__snapshots__/index.test.ts.snap +++ b/packages/docusaurus/src/server/__tests__/__snapshots__/index.test.ts.snap @@ -125,5 +125,6 @@ exports[`load loads props for site with custom i18n path 1`] = ` "pluginVersions": {}, "siteVersion": undefined, }, + "themeConfigPath": undefined, } `; diff --git a/packages/docusaurus/src/server/config.ts b/packages/docusaurus/src/server/config.ts index 59b30b133e24..9ceefcf2e3b5 100644 --- a/packages/docusaurus/src/server/config.ts +++ b/packages/docusaurus/src/server/config.ts @@ -10,13 +10,14 @@ import fs from 'fs-extra'; import logger from '@docusaurus/logger'; import { DEFAULT_CONFIG_FILE_NAME, + DEFAULT_THEME_FILE_NAME, findAsyncSequential, loadFreshModule, } from '@docusaurus/utils'; import {validateConfig} from './configValidation'; -import type {LoadContext} from '@docusaurus/types'; +import type {DocusaurusConfig, LoadContext} from '@docusaurus/types'; -async function findConfig(siteDir: string) { +async function getConventionalSiteConfigPath(siteDir: string) { // We could support .mjs, .ts, etc. in the future const candidates = ['.ts', '.mts', '.cts', '.js', '.mjs', '.cjs'].map( (ext) => DEFAULT_CONFIG_FILE_NAME + ext, @@ -26,10 +27,10 @@ async function findConfig(siteDir: string) { fs.pathExists, ); if (!configPath) { - logger.error('No config file found.'); - logger.info`Expected one of:${candidates} + const errorMessage = logger.interpolate`No config file found. +Expected one of:${candidates} You can provide a custom config path with the code=${'--config'} option.`; - throw new Error(); + throw new Error(errorMessage); } return configPath; } @@ -43,7 +44,7 @@ export async function loadSiteConfig({ }): Promise> { const siteConfigPath = customConfigFilePath ? path.resolve(siteDir, customConfigFilePath) - : await findConfig(siteDir); + : await getConventionalSiteConfigPath(siteDir); if (!(await fs.pathExists(siteConfigPath))) { throw new Error(`Config file at "${siteConfigPath}" not found.`); @@ -62,3 +63,53 @@ export async function loadSiteConfig({ ); return {siteConfig, siteConfigPath}; } + +async function findConventionalThemeConfigPath( + siteDir: string, +): Promise { + // We could support .mjs, .ts, etc. in the future + const candidates = ['.tsx', '.ts', '.jsx', '.js'].map( + (ext) => DEFAULT_THEME_FILE_NAME + ext, + ); + const themeConfigPath = await findAsyncSequential( + candidates.map((file) => path.join(siteDir, file)), + fs.pathExists, + ); + + return themeConfigPath; +} + +// TODO add tests for this +export async function findThemeConfigPath( + siteDir: string, + siteConfig: DocusaurusConfig, +): Promise { + // TODO add support for custom themeConfig file path + // EX: siteConfig.themeConfig: './theme.tsx' + // Note: maybe it would be simpler to provide this path through the CLI? + if (typeof siteConfig.themeConfig === 'string') { + const customThemeConfigPath = siteConfig.themeConfig; + if (!(await fs.pathExists(customThemeConfigPath))) { + throw new Error( + `Theme config file at "${customThemeConfigPath}" not found.`, + ); + } + return customThemeConfigPath; + } + const conventionalThemeConfigPath = await findConventionalThemeConfigPath( + siteDir, + ); + // In Docusaurus v3 we require users to provide either the theme config + // through the conventional path, or through the legacy siteConfig attribute + // To avoid issues we prevent users to not provide any theme config at all + if ( + !conventionalThemeConfigPath && + Object.keys(siteConfig.themeConfig ?? {}).length + ) { + throw new Error( + `Theme config file couldn't be found at ${DEFAULT_THEME_FILE_NAME}.js or ${DEFAULT_THEME_FILE_NAME}.tsx`, + ); + } + return conventionalThemeConfigPath; + +} diff --git a/packages/docusaurus/src/server/index.ts b/packages/docusaurus/src/server/index.ts index 1208b85c19cf..450e6945202f 100644 --- a/packages/docusaurus/src/server/index.ts +++ b/packages/docusaurus/src/server/index.ts @@ -16,7 +16,7 @@ import { DEFAULT_THEME_FILE_NAME, GENERATED_FILES_DIR_NAME, } from '@docusaurus/utils'; -import {loadSiteConfig} from './config'; +import {findThemeConfigPath, loadSiteConfig} from './config'; import {loadClientModules} from './clientModules'; import {loadPlugins} from './plugins'; import {loadRoutes} from './routes'; @@ -69,6 +69,8 @@ export async function loadContext( customConfigFilePath, }); + const themeConfigPath = await findThemeConfigPath(siteDir, initialSiteConfig); + const i18n = await loadI18n(initialSiteConfig, {locale}); const baseUrl = localizePath({ @@ -107,6 +109,7 @@ export async function loadContext( localizationDir, siteConfig, siteConfigPath, + themeConfigPath, outDir, baseUrl, i18n, @@ -127,6 +130,7 @@ export async function load(options: LoadContextOptions): Promise { generatedFilesDir, siteConfig, siteConfigPath, + themeConfigPath, outDir, baseUrl, i18n, @@ -173,6 +177,13 @@ export default ${JSON.stringify(siteConfig, null, 2)}; `, ); + const themeConfigContent = themeConfigPath + ? `export {default} from '@site/${path.relative( + siteDir, + themeConfigPath, + )}';` + : // TODO Docusaurus v4: require theme config file, remove this fallback + `export default {};`; const genThemeConfig = generate( generatedFilesDir, `${DEFAULT_THEME_FILE_NAME}.js`, @@ -181,7 +192,7 @@ export default ${JSON.stringify(siteConfig, null, 2)}; * Your edits in this file will be overwritten in the next build! * Modify the docusaurus.config.js file at your site's root instead. */ -export {default} from '@site/${DEFAULT_THEME_FILE_NAME}'; +${themeConfigContent} `, ); @@ -262,6 +273,7 @@ ${Object.entries(registry) return { siteConfig, siteConfigPath, + themeConfigPath, siteMetadata, siteDir, outDir, From 4924cd75579fb147c87c039cc7284a2ebc29f001 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Thu, 7 Dec 2023 20:28:35 +0100 Subject: [PATCH 05/13] lint --- .../src/theme/AnnouncementBar/Content/index.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/Content/index.tsx b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/Content/index.tsx index 4fcec6d13150..8fd04be5ed9e 100644 --- a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/Content/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/Content/index.tsx @@ -17,7 +17,7 @@ export default function AnnouncementBarContent( const {announcementBar} = useThemeConfig(); const {content: Content} = announcementBar!; - // TODO Docusaurus v4: remove legacy annoncement bar html string form? + // TODO Docusaurus v4: remove legacy announcement bar html string form? if (typeof Content === 'string') { return (
); - } - return ( -
- -
- ); - + } + return ( +
+ +
+ ); } From 60a04cf44530f53e6ab91013d08d39211009fa24 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Thu, 7 Dec 2023 20:28:45 +0100 Subject: [PATCH 06/13] typo --- packages/docusaurus/src/server/config.ts | 31 ++++++++++++------------ 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/packages/docusaurus/src/server/config.ts b/packages/docusaurus/src/server/config.ts index 9ceefcf2e3b5..b229cc5cf94b 100644 --- a/packages/docusaurus/src/server/config.ts +++ b/packages/docusaurus/src/server/config.ts @@ -95,21 +95,20 @@ export async function findThemeConfigPath( ); } return customThemeConfigPath; - } - const conventionalThemeConfigPath = await findConventionalThemeConfigPath( - siteDir, + } + const conventionalThemeConfigPath = await findConventionalThemeConfigPath( + siteDir, + ); + // In Docusaurus v3 we require users to provide either the theme config + // through the conventional path, or through the legacy siteConfig attribute + // To avoid issues we prevent users to not provide any theme config at all + if ( + !conventionalThemeConfigPath && + Object.keys(siteConfig.themeConfig ?? {}).length === 0 + ) { + throw new Error( + `Theme config file couldn't be found at ${DEFAULT_THEME_FILE_NAME}.js or ${DEFAULT_THEME_FILE_NAME}.tsx`, ); - // In Docusaurus v3 we require users to provide either the theme config - // through the conventional path, or through the legacy siteConfig attribute - // To avoid issues we prevent users to not provide any theme config at all - if ( - !conventionalThemeConfigPath && - Object.keys(siteConfig.themeConfig ?? {}).length - ) { - throw new Error( - `Theme config file couldn't be found at ${DEFAULT_THEME_FILE_NAME}.js or ${DEFAULT_THEME_FILE_NAME}.tsx`, - ); - } - return conventionalThemeConfigPath; - + } + return conventionalThemeConfigPath; } From 7ee136cf9af5aa63d0a3f62ce2c92435bb57d128 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Thu, 7 Dec 2023 22:57:34 +0100 Subject: [PATCH 07/13] warn when no theme config found --- packages/docusaurus/src/server/config.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/docusaurus/src/server/config.ts b/packages/docusaurus/src/server/config.ts index b229cc5cf94b..43502b255b01 100644 --- a/packages/docusaurus/src/server/config.ts +++ b/packages/docusaurus/src/server/config.ts @@ -101,14 +101,12 @@ export async function findThemeConfigPath( ); // In Docusaurus v3 we require users to provide either the theme config // through the conventional path, or through the legacy siteConfig attribute - // To avoid issues we prevent users to not provide any theme config at all + // To avoid issues we warn users when no theme config is provided at all if ( !conventionalThemeConfigPath && Object.keys(siteConfig.themeConfig ?? {}).length === 0 ) { - throw new Error( - `Theme config file couldn't be found at ${DEFAULT_THEME_FILE_NAME}.js or ${DEFAULT_THEME_FILE_NAME}.tsx`, - ); + logger.warn`Theme config file couldn't be found at ${DEFAULT_THEME_FILE_NAME}.js or ${DEFAULT_THEME_FILE_NAME}.tsx`; } return conventionalThemeConfigPath; } From ebcec4b1e33fc969ff34af0137f86287ec12b82c Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 8 Dec 2023 13:37:15 +0100 Subject: [PATCH 08/13] spell typo --- website/docusaurus.theme.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docusaurus.theme.tsx b/website/docusaurus.theme.tsx index 786317da915c..6c0d3131402c 100644 --- a/website/docusaurus.theme.tsx +++ b/website/docusaurus.theme.tsx @@ -12,7 +12,7 @@ export default { announcementBar: { id: 'announcementBar-3', // Increment on change // content: `🎉️ Docusaurus v3.0 is now out! 🥳️`, - content: function AnnoncementBarContent(): ReactNode { + content: function AnnouncementBarContent(): ReactNode { return ( Date: Wed, 20 Dec 2023 15:51:09 +0100 Subject: [PATCH 09/13] wip: theme config --- .../src/theme/Footer/LinkItem/index.tsx | 7 +- .../src/theme/Footer/Links/Simple/index.tsx | 3 +- .../src/utils/useThemeConfig.ts | 14 +- website/docusaurus.config.ts | 167 ++---------------- website/docusaurus.theme.tsx | 166 ++++++++++++++++- 5 files changed, 198 insertions(+), 159 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/Footer/LinkItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/Footer/LinkItem/index.tsx index 44e1517d3957..bd2cb2c8cf7c 100644 --- a/packages/docusaurus-theme-classic/src/theme/Footer/LinkItem/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Footer/LinkItem/index.tsx @@ -14,10 +14,15 @@ import IconExternalLink from '@theme/Icon/ExternalLink'; import type {Props} from '@theme/Footer/LinkItem'; export default function FooterLinkItem({item}: Props): JSX.Element { - const {to, href, label, prependBaseUrlToHref, ...props} = item; + const {to, href, label, prependBaseUrlToHref, node, ...props} = item; const toUrl = useBaseUrl(to); const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true}); + if (node) { + const NodeElement = node as React.ElementType; + return ; + } + return (
- {links.map((item, i) => ( + {links.map((item: FooterLinkItem, i: number) => ( {links.length !== i + 1 && } diff --git a/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts b/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts index e3c5f3b46fed..a4f6b4c3fa12 100644 --- a/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts +++ b/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts @@ -139,6 +139,18 @@ export function useThemeConfig(): ThemeConfig { .themeConfig as ThemeConfig; const newThemeConfig = useDocusaurusContext().themeConfig as ThemeConfig; - // TODO emit errors on duplicate keys + console.log('oldThemeConfig', oldThemeConfig); + console.log('newThemeConfig:', newThemeConfig); + + const duplicateKeys = Object.keys(oldThemeConfig).filter((key) => + Object.prototype.hasOwnProperty.call(newThemeConfig, key), + ); + + if (duplicateKeys.length > 0) { + throw new Error( + `Duplicate keys found in siteConfig.themeConfig and themeConfig: ${duplicateKeys}`, + ); + } + return {...oldThemeConfig, ...newThemeConfig}; } diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts index b3dca14db3ba..79f54a66d7e5 100644 --- a/website/docusaurus.config.ts +++ b/website/docusaurus.config.ts @@ -21,10 +21,6 @@ import { import ConfigLocalized from './docusaurus.config.localized.json'; -import PrismLight from './src/utils/prismLight'; -import PrismDark from './src/utils/prismDark'; - -import type {Config} from '@docusaurus/types'; import type * as Preset from '@docusaurus/preset-classic'; import type {Options as DocsOptions} from '@docusaurus/plugin-content-docs'; import type {Options as BlogOptions} from '@docusaurus/plugin-content-blog'; @@ -149,7 +145,7 @@ export default async function createConfigAsync() { [defaultLocale, 'fr', 'pt-BR', 'ko', 'zh-CN'], }, webpack: { - jsLoader: (isServer) => ({ + jsLoader: (isServer: boolean) => ({ loader: require.resolve('swc-loader'), options: { jsc: { @@ -176,7 +172,13 @@ export default async function createConfigAsync() { mdx1Compat: { // comments: false, }, - preprocessor: ({filePath, fileContent}) => { + preprocessor: ({ + filePath, + fileContent, + }: { + filePath: string; + fileContent: string; + }) => { let result = fileContent; result = result.replaceAll('{/_', '{/*'); @@ -263,7 +265,7 @@ export default async function createConfigAsync() { 'client-redirects', { fromExtensions: ['html'], - createRedirects(routePath) { + createRedirects(routePath: string) { // Redirect to /docs from /docs/introduction (now docs root doc) if (routePath === '/docs' || routePath === '/docs/') { return [`${routePath}/introduction`]; @@ -375,7 +377,7 @@ export default async function createConfigAsync() { sidebarPath: 'sidebars.ts', // sidebarCollapsible: false, // sidebarCollapsed: true, - editUrl: ({locale, docPath}) => { + editUrl: ({locale, docPath}: {locale: string; docPath: string}) => { if (locale !== defaultLocale) { return `https://crowdin.com/project/docusaurus-v2/${locale}`; } @@ -458,55 +460,8 @@ export default async function createConfigAsync() { } satisfies Preset.Options, ], ], - themeConfig: { - liveCodeBlock: { - playgroundPosition: 'bottom', - }, - docs: { - sidebar: { - hideable: true, - autoCollapseCategories: true, - }, - }, - colorMode: { - defaultMode: 'light', - disableSwitch: false, - respectPrefersColorScheme: true, - }, - announcementBar: { - id: 'announcementBar-3', // Increment on change - // content: `⭐️ If you like Docusaurus, give it a star on GitHub and follow us on Twitter ${TwitterSvg}`, - content: `🎉️ Docusaurus v3.0 is now out! 🥳️`, - }, - prism: { - additionalLanguages: [ - 'java', - 'latex', - 'haskell', - 'matlab', - 'PHp', - 'bash', - 'diff', - 'json', - 'scss', - ], - magicComments: [ - { - className: 'theme-code-block-highlighted-line', - line: 'highlight-next-line', - block: {start: 'highlight-start', end: 'highlight-end'}, - }, - { - className: 'code-block-error-line', - line: 'This will error', - }, - ], - theme: PrismLight, - darkTheme: PrismDark, - }, - image: 'img/docusaurus-social-card.jpg', - // metadata: [{name: 'twitter:card', content: 'summary'}], + metadata: [{name: 'twitter:card', content: 'summary'}], algolia: { appId: 'X1Z85QJPUV', apiKey: 'bf7211c161e8205da2f933a02534105a', @@ -624,102 +579,6 @@ export default async function createConfigAsync() { Preset.ThemeConfig['navbar'] >['items'], }, - footer: { - style: 'dark', - links: [ - { - title: 'Learn', - items: [ - { - label: 'Introduction', - to: 'docs', - }, - { - label: 'Installation', - to: 'docs/installation', - }, - { - label: 'Migration from v1 to v2', - to: 'docs/migration', - }, - ], - }, - { - title: 'Community', - items: [ - { - label: 'Stack Overflow', - href: 'https://stackoverflow.com/questions/tagged/docusaurus', - }, - { - label: 'Feature Requests', - to: '/feature-requests', - }, - { - label: 'Discord', - href: 'https://discordapp.com/invite/docusaurus', - }, - { - label: 'Help', - to: '/community/support', - }, - ], - }, - { - title: 'More', - items: [ - { - label: 'Blog', - to: 'blog', - }, - { - label: 'Changelog', - to: '/changelog', - }, - { - label: 'GitHub', - href: 'https://github.com/facebook/docusaurus', - }, - { - label: 'Twitter', - href: 'https://twitter.com/docusaurus', - }, - { - html: ` - - Deploys by Netlify - - `, - }, - ], - }, - { - title: 'Legal', - // Please don't remove the privacy and terms, it's a legal - // requirement. - items: [ - { - label: 'Privacy', - href: 'https://opensource.facebook.com/legal/privacy/', - }, - { - label: 'Terms', - href: 'https://opensource.facebook.com/legal/terms/', - }, - { - label: 'Cookie Policy', - href: 'https://opensource.facebook.com/legal/cookie-policy/', - }, - ], - }, - ], - logo: { - alt: 'Meta Open Source Logo', - src: '/img/meta_opensource_logo_negative.svg', - href: 'https://opensource.fb.com', - }, - copyright: `Copyright © ${new Date().getFullYear()} Meta Platforms, Inc. Built with Docusaurus.`, - }, - } satisfies Preset.ThemeConfig, - } satisfies Config; + }, + }; } diff --git a/website/docusaurus.theme.tsx b/website/docusaurus.theme.tsx index 6c0d3131402c..c4b2f24eacd8 100644 --- a/website/docusaurus.theme.tsx +++ b/website/docusaurus.theme.tsx @@ -5,20 +5,23 @@ * LICENSE file in the root directory of this source tree. */ import type {ReactNode} from 'react'; +import React from 'react'; import Link from '@docusaurus/Link'; import Translate from '@docusaurus/Translate'; +import PrismLight from './src/utils/prismLight'; +import PrismDark from './src/utils/prismDark'; +/* eslint-disable @docusaurus/no-untranslated-text */ export default { announcementBar: { id: 'announcementBar-3', // Increment on change - // content: `🎉️ Docusaurus v3.0 is now out! 🥳️`, + // content: `🎉️ prout v3.0 is now out! 🥳️`, content: function AnnouncementBarContent(): ReactNode { return ( TEST IT WORKS Docusaurus v3.0 @@ -30,4 +33,163 @@ export default { ); }, }, + prism: { + additionalLanguages: [ + 'java', + 'latex', + 'haskell', + 'matlab', + 'PHp', + 'bash', + 'diff', + 'json', + 'scss', + ], + magicComments: [ + { + className: 'theme-code-block-highlighted-line', + line: 'highlight-next-line', + block: {start: 'highlight-start', end: 'highlight-end'}, + }, + { + className: 'code-block-error-line', + line: 'This will error', + }, + ], + theme: PrismLight, + darkTheme: PrismDark, + }, + liveCodeBlock: { + playgroundPosition: 'top', + }, + image: 'img/docusaurus-social-card.jpg', + docs: { + sidebar: { + hideable: true, + autoCollapseCategories: true, + }, + }, + colorMode: { + defaultMode: 'light', + disableSwitch: false, + respectPrefersColorScheme: true, + }, + + footer: { + style: 'dark', + links: [ + { + title: 'Learn', + items: [ + { + node: (): ReactNode => ( + + Introduction + + ), + }, + { + node: (): ReactNode => ( + + Installation + + ), + }, + { + node: (): ReactNode => ( + + Migration from v1 to v2 + + ), + }, + ], + }, + { + title: 'Community', + items: [ + { + label: 'Stack Overflow', + href: 'https://stackoverflow.com/questions/tagged/docusaurus', + }, + { + node: (): ReactNode => ( + + Feature Requests + + ), + }, + { + label: 'Discord', + href: 'https://discordapp.com/invite/docusaurus', + }, + { + node: (): ReactNode => ( + + Help + + ), + }, + ], + }, + { + title: 'More', + items: [ + { + node: (): ReactNode => ( + + Blog + + ), + }, + { + node: (): ReactNode => ( + + Changelog + + ), + }, + { + label: 'GitHub', + href: 'https://github.com/facebook/docusaurus', + }, + { + label: 'Twitter', + href: 'https://twitter.com/docusaurus', + }, + { + html: ` + + Deploys by Netlify + + `, + }, + ], + }, + { + title: 'Legal', + // Please don't remove the privacy and terms, it's a legal + // requirement. + items: [ + { + label: 'Privacy', + href: 'https://opensource.facebook.com/legal/privacy/', + }, + { + label: 'Terms', + href: 'https://opensource.facebook.com/legal/terms/', + }, + { + label: 'Cookie Policy', + href: 'https://opensource.facebook.com/legal/cookie-policy/', + }, + ], + }, + ], + logo: { + alt: 'Meta Open Source Logo', + src: '/img/meta_opensource_logo_negative.svg', + href: 'https://opensource.fb.com', + }, + copyright: `prout © ${new Date().getFullYear()} Meta Platforms, Inc. Built with Docusaurus.`, + }, }; From fe7916bce33fba6e9cc4c1a9df2b9646d400e79b Mon Sep 17 00:00:00 2001 From: ozakione <29860391+OzakIOne@users.noreply.github.com> Date: Thu, 21 Dec 2023 14:28:20 +0100 Subject: [PATCH 10/13] wip: navbar --- .../src/utils/useThemeConfig.ts | 7 +- website/docusaurus.config.ts | 111 ---------------- website/docusaurus.theme.tsx | 118 +++++++++++++++++- 3 files changed, 119 insertions(+), 117 deletions(-) diff --git a/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts b/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts index a4f6b4c3fa12..2903b2d9e00c 100644 --- a/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts +++ b/packages/docusaurus-theme-common/src/utils/useThemeConfig.ts @@ -139,15 +139,14 @@ export function useThemeConfig(): ThemeConfig { .themeConfig as ThemeConfig; const newThemeConfig = useDocusaurusContext().themeConfig as ThemeConfig; - console.log('oldThemeConfig', oldThemeConfig); - console.log('newThemeConfig:', newThemeConfig); - + // TODO docusaurus-theme-classic/src/options.ts + // assigns default values in oldThemeConfig (navbar, footer...) const duplicateKeys = Object.keys(oldThemeConfig).filter((key) => Object.prototype.hasOwnProperty.call(newThemeConfig, key), ); if (duplicateKeys.length > 0) { - throw new Error( + console.warn( `Duplicate keys found in siteConfig.themeConfig and themeConfig: ${duplicateKeys}`, ); } diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts index 79f54a66d7e5..9abffb4c6228 100644 --- a/website/docusaurus.config.ts +++ b/website/docusaurus.config.ts @@ -12,7 +12,6 @@ import rehypeKatex from 'rehype-katex'; import configTabs from './src/remark/configTabs'; import versions from './versions.json'; -import VersionsArchived from './versionsArchived.json'; import { dogfoodingPluginInstances, dogfoodingThemeInstances, @@ -28,11 +27,6 @@ import type {Options as PageOptions} from '@docusaurus/plugin-content-pages'; import type {Options as IdealImageOptions} from '@docusaurus/plugin-ideal-image'; import type {Options as ClientRedirectsOptions} from '@docusaurus/plugin-client-redirects'; -const ArchivedVersionsDropdownItems = Object.entries(VersionsArchived).splice( - 0, - 5, -); - function isPrerelease(version: string) { return ( version.includes('alpha') || @@ -474,111 +468,6 @@ export default async function createConfigAsync() { } : undefined, }, - navbar: { - hideOnScroll: true, - title: 'Docusaurus', - logo: { - alt: '', - src: 'img/docusaurus.svg', - srcDark: 'img/docusaurus_keytar.svg', - width: 32, - height: 32, - }, - items: [ - { - type: 'doc', - position: 'left', - docId: 'introduction', - label: 'Docs', - }, - { - type: 'docSidebar', - position: 'left', - sidebarId: 'api', - label: 'API', - }, - {to: 'blog', label: 'Blog', position: 'left'}, - {to: 'showcase', label: 'Showcase', position: 'left'}, - { - to: '/community/support', - label: 'Community', - position: 'left', - activeBaseRegex: `/community/`, - }, - // This item links to a draft doc: only displayed in dev - { - type: 'doc', - docId: 'index', - label: 'Tests', - docsPluginId: 'docs-tests', - }, - isDev && {to: '/__docusaurus/debug', label: 'Debug'}, - // Custom item for dogfooding: only displayed in /tests/ routes - { - type: 'custom-dogfood-navbar-item', - content: '😉', - }, - // Right - { - type: 'docsVersionDropdown', - position: 'right', - dropdownActiveClassDisabled: true, - dropdownItemsAfter: [ - { - type: 'html', - value: '
', - }, - { - type: 'html', - className: 'dropdown-archived-versions', - value: 'Archived versions', - }, - ...ArchivedVersionsDropdownItems.map( - ([versionName, versionUrl]) => ({ - label: versionName, - href: versionUrl, - }), - ), - { - href: 'https://v1.docusaurus.io', - label: '1.x.x', - }, - { - type: 'html', - value: '
', - }, - { - to: '/versions', - label: 'All versions', - }, - ], - }, - { - type: 'localeDropdown', - position: 'right', - dropdownItemsAfter: [ - { - type: 'html', - value: '
', - }, - { - href: 'https://github.com/facebook/docusaurus/issues/3526', - label: 'Help Us Translate', - }, - ], - }, - { - href: 'https://github.com/facebook/docusaurus', - position: 'right', - className: 'header-github-link', - 'aria-label': 'GitHub repository', - }, - ] - // TODO fix type - .filter(Boolean) as NonNullable< - Preset.ThemeConfig['navbar'] - >['items'], - }, }, }; } diff --git a/website/docusaurus.theme.tsx b/website/docusaurus.theme.tsx index c4b2f24eacd8..2c85f25aa852 100644 --- a/website/docusaurus.theme.tsx +++ b/website/docusaurus.theme.tsx @@ -8,14 +8,24 @@ import type {ReactNode} from 'react'; import React from 'react'; import Link from '@docusaurus/Link'; import Translate from '@docusaurus/Translate'; +import VersionsArchived from './versionsArchived.json'; import PrismLight from './src/utils/prismLight'; import PrismDark from './src/utils/prismDark'; +import type * as Preset from '@docusaurus/preset-classic'; +// TODO remove this eslint ruse +// TODO PrismDark and PrismLight types +// TODO `satisfies Preset.ThemeConfig` `satisfies Config` +// results Expected ';', got 'satisfies' /* eslint-disable @docusaurus/no-untranslated-text */ +const ArchivedVersionsDropdownItems = Object.entries(VersionsArchived).splice( + 0, + 5, +); +const isDev = process.env.NODE_ENV === 'development'; export default { announcementBar: { id: 'announcementBar-3', // Increment on change - // content: `🎉️ prout v3.0 is now out! 🥳️`, content: function AnnouncementBarContent(): ReactNode { return ( @@ -190,6 +200,110 @@ export default { src: '/img/meta_opensource_logo_negative.svg', href: 'https://opensource.fb.com', }, - copyright: `prout © ${new Date().getFullYear()} Meta Platforms, Inc. Built with Docusaurus.`, + copyright: `Copyright © ${new Date().getFullYear()} Meta Platforms, Inc. Built with Docusaurus.`, + }, + navbar: { + hideOnScroll: true, + title: 'Docusaurus', + logo: { + alt: '', + src: 'img/docusaurus.svg', + srcDark: 'img/docusaurus_keytar.svg', + width: 32, + height: 32, + }, + items: [ + { + type: 'doc', + position: 'left', + docId: 'introduction', + label: 'Docs', + }, + { + type: 'docSidebar', + position: 'left', + sidebarId: 'api', + label: 'API', + }, + {to: 'blog', label: 'Blog', position: 'left'}, + {to: 'showcase', label: 'Showcase', position: 'left'}, + { + to: '/community/support', + label: 'Community', + position: 'left', + activeBaseRegex: `/community/`, + }, + // This item links to a draft doc: only displayed in dev + { + type: 'doc', + docId: 'index', + label: 'Tests', + docsPluginId: 'docs-tests', + }, + isDev && {to: '/__docusaurus/debug', label: 'Debug'}, + // Custom item for dogfooding: only displayed in /tests/ routes + { + type: 'custom-dogfood-navbar-item', + content: '😉', + }, + // Right + { + type: 'docsVersionDropdown', + position: 'right', + dropdownActiveClassDisabled: true, + dropdownItemsAfter: [ + { + type: 'html', + value: '
', + }, + { + type: 'html', + className: 'dropdown-archived-versions', + value: 'Archived versions', + }, + ...ArchivedVersionsDropdownItems.map(([versionName, versionUrl]) => ({ + label: versionName, + href: versionUrl, + })), + { + href: 'https://v1.docusaurus.io', + label: '1.x.x', + }, + { + type: 'html', + value: '
', + }, + { + to: '/versions', + label: 'All versions', + }, + ], + dropdownItemsBefore: [], + }, + { + type: 'localeDropdown', + position: 'right', + dropdownItemsAfter: [ + { + type: 'html', + value: '
', + }, + { + href: 'https://github.com/facebook/docusaurus/issues/3526', + label: 'Help Us Translate', + }, + ], + dropdownItemsBefore: [], + }, + { + href: 'https://github.com/facebook/docusaurus', + position: 'right', + className: 'header-github-link', + 'aria-label': 'GitHub repository', + }, + ] + // TODO fix type + .filter(Boolean) as NonNullable['items'], }, }; +// satisfies Preset.ThemeConfig; From 9e8768c434d604ea0a2082bc4ebfb1b6ed5e1cde Mon Sep 17 00:00:00 2001 From: ozakione <29860391+OzakIOne@users.noreply.github.com> Date: Thu, 21 Dec 2023 21:53:56 +0100 Subject: [PATCH 11/13] wip: satisfies as causes build error --- website/src/utils/prismDark.ts | 6 ++++-- website/src/utils/prismLight.ts | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/website/src/utils/prismDark.ts b/website/src/utils/prismDark.ts index 5bbfdfb0af84..fdcc7fd1ead9 100644 --- a/website/src/utils/prismDark.ts +++ b/website/src/utils/prismDark.ts @@ -5,7 +5,9 @@ * LICENSE file in the root directory of this source tree. */ -import {themes, type PrismTheme} from 'prism-react-renderer'; +import {themes} from 'prism-react-renderer'; + +// TODO satisfies cause an error const baseTheme = themes.vsDark; @@ -78,4 +80,4 @@ export default { }, }, ], -} satisfies PrismTheme; +}; diff --git a/website/src/utils/prismLight.ts b/website/src/utils/prismLight.ts index 76bf2caa372c..ad1acea61d38 100644 --- a/website/src/utils/prismLight.ts +++ b/website/src/utils/prismLight.ts @@ -5,7 +5,9 @@ * LICENSE file in the root directory of this source tree. */ -import {themes, type PrismTheme} from 'prism-react-renderer'; +import {themes} from 'prism-react-renderer'; + +// TODO satisfies cause an error const baseTheme = themes.github; @@ -99,4 +101,4 @@ export default { }, }, ], -} satisfies PrismTheme; +}; From 67056e9b6b544ae8e7c139dcbf114a2f7c24ab10 Mon Sep 17 00:00:00 2001 From: ozakione <29860391+OzakIOne@users.noreply.github.com> Date: Thu, 21 Dec 2023 21:54:51 +0100 Subject: [PATCH 12/13] wip: move old theme config to new --- .../src/theme/Footer/LinkItem/index.tsx | 7 +- website/docusaurus.config.ts | 1 - website/docusaurus.theme.tsx | 79 ++++++++----------- 3 files changed, 35 insertions(+), 52 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/Footer/LinkItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/Footer/LinkItem/index.tsx index bd2cb2c8cf7c..44e1517d3957 100644 --- a/packages/docusaurus-theme-classic/src/theme/Footer/LinkItem/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Footer/LinkItem/index.tsx @@ -14,15 +14,10 @@ import IconExternalLink from '@theme/Icon/ExternalLink'; import type {Props} from '@theme/Footer/LinkItem'; export default function FooterLinkItem({item}: Props): JSX.Element { - const {to, href, label, prependBaseUrlToHref, node, ...props} = item; + const {to, href, label, prependBaseUrlToHref, ...props} = item; const toUrl = useBaseUrl(to); const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true}); - if (node) { - const NodeElement = node as React.ElementType; - return ; - } - return ( ( - - Introduction - - ), + label: 'Introduction', + to: 'docs', }, { - node: (): ReactNode => ( - - Installation - - ), + label: 'Installation', + to: 'docs/installation', }, { - node: (): ReactNode => ( - - Migration from v1 to v2 - - ), + label: 'Migration from v1 to v2', + to: 'docs/migration', }, ], }, @@ -122,22 +124,16 @@ export default { href: 'https://stackoverflow.com/questions/tagged/docusaurus', }, { - node: (): ReactNode => ( - - Feature Requests - - ), + label: 'Feature Requests', + to: '/feature-requests', }, { label: 'Discord', href: 'https://discordapp.com/invite/docusaurus', }, { - node: (): ReactNode => ( - - Help - - ), + label: 'Help', + to: '/community/support', }, ], }, @@ -145,18 +141,12 @@ export default { title: 'More', items: [ { - node: (): ReactNode => ( - - Blog - - ), + label: 'Blog', + to: 'blog', }, { - node: (): ReactNode => ( - - Changelog - - ), + label: 'Changelog', + to: '/changelog', }, { label: 'GitHub', @@ -168,10 +158,10 @@ export default { }, { html: ` - - Deploys by Netlify - - `, + + Deploys by Netlify + + `, }, ], }, @@ -306,4 +296,3 @@ export default { .filter(Boolean) as NonNullable['items'], }, }; -// satisfies Preset.ThemeConfig; From 161c72729ef3151a0a50fd34f23e3b32a7c938b8 Mon Sep 17 00:00:00 2001 From: ozakione <29860391+OzakIOne@users.noreply.github.com> Date: Fri, 22 Dec 2023 14:17:04 +0100 Subject: [PATCH 13/13] wip: update examples with theme config --- .../classic-typescript/docusaurus.config.ts | 76 ------------------ .../classic-typescript/docusaurus.theme.tsx | 78 ++++++++++++++++++ examples/classic/docusaurus.config.js | 79 ------------------- examples/classic/docusaurus.theme.jsx | 74 +++++++++++++++++ 4 files changed, 152 insertions(+), 155 deletions(-) create mode 100644 examples/classic-typescript/docusaurus.theme.tsx create mode 100644 examples/classic/docusaurus.theme.jsx diff --git a/examples/classic-typescript/docusaurus.config.ts b/examples/classic-typescript/docusaurus.config.ts index 4058eac59e23..09e075ac4f21 100644 --- a/examples/classic-typescript/docusaurus.config.ts +++ b/examples/classic-typescript/docusaurus.config.ts @@ -1,4 +1,3 @@ -import {themes as prismThemes} from 'prism-react-renderer'; import type {Config} from '@docusaurus/types'; import type * as Preset from '@docusaurus/preset-classic'; @@ -53,81 +52,6 @@ const config: Config = { } satisfies Preset.Options, ], ], - - themeConfig: { - // Replace with your project's social card - image: 'img/docusaurus-social-card.jpg', - navbar: { - title: 'My Site', - logo: { - alt: 'My Site Logo', - src: 'img/logo.svg', - }, - items: [ - { - type: 'docSidebar', - sidebarId: 'tutorialSidebar', - position: 'left', - label: 'Tutorial', - }, - {to: '/blog', label: 'Blog', position: 'left'}, - { - href: 'https://github.com/facebook/docusaurus', - label: 'GitHub', - position: 'right', - }, - ], - }, - footer: { - style: 'dark', - links: [ - { - title: 'Docs', - items: [ - { - label: 'Tutorial', - to: '/docs/intro', - }, - ], - }, - { - title: 'Community', - items: [ - { - label: 'Stack Overflow', - href: 'https://stackoverflow.com/questions/tagged/docusaurus', - }, - { - label: 'Discord', - href: 'https://discordapp.com/invite/docusaurus', - }, - { - label: 'Twitter', - href: 'https://twitter.com/docusaurus', - }, - ], - }, - { - title: 'More', - items: [ - { - label: 'Blog', - to: '/blog', - }, - { - label: 'GitHub', - href: 'https://github.com/facebook/docusaurus', - }, - ], - }, - ], - copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`, - }, - prism: { - theme: prismThemes.github, - darkTheme: prismThemes.dracula, - }, - } satisfies Preset.ThemeConfig, }; export default config; diff --git a/examples/classic-typescript/docusaurus.theme.tsx b/examples/classic-typescript/docusaurus.theme.tsx new file mode 100644 index 000000000000..7799f867a932 --- /dev/null +++ b/examples/classic-typescript/docusaurus.theme.tsx @@ -0,0 +1,78 @@ +import { themes as prismThemes } from 'prism-react-renderer'; +import type * as Preset from '@docusaurus/preset-classic'; + +export default { + // Replace with your project's social card + image: 'img/docusaurus-social-card.jpg', + navbar: { + title: 'My Site', + logo: { + alt: 'My Site Logo', + src: 'img/logo.svg', + }, + items: [ + { + type: 'docSidebar', + sidebarId: 'tutorialSidebar', + position: 'left', + label: 'Tutorial', + }, + { to: '/blog', label: 'Blog', position: 'left' }, + { + href: 'https://github.com/facebook/docusaurus', + label: 'GitHub', + position: 'right', + }, + ], + }, + footer: { + style: 'dark', + links: [ + { + title: 'Docs', + items: [ + { + label: 'Tutorial', + to: '/docs/intro', + }, + ], + }, + { + title: 'Community', + items: [ + { + label: 'Stack Overflow', + href: 'https://stackoverflow.com/questions/tagged/docusaurus', + }, + { + label: 'Discord', + href: 'https://discordapp.com/invite/docusaurus', + }, + { + label: 'Twitter', + href: 'https://twitter.com/docusaurus', + }, + ], + }, + { + title: 'More', + items: [ + { + label: 'Blog', + to: '/blog', + }, + { + label: 'GitHub', + href: 'https://github.com/facebook/docusaurus', + }, + ], + }, + ], + copyright: `Copyright © ${ new Date().getFullYear() } My Project, Inc. Built with Docusaurus.`, + }, + prism: { + theme: prismThemes.github, + darkTheme: prismThemes.dracula, + }, + +} satisfies Preset.ThemeConfig diff --git a/examples/classic/docusaurus.config.js b/examples/classic/docusaurus.config.js index 7b8d5b1c7f11..99c74ccd430a 100644 --- a/examples/classic/docusaurus.config.js +++ b/examples/classic/docusaurus.config.js @@ -4,8 +4,6 @@ // There are various equivalent ways to declare your Docusaurus config. // See: https://docusaurus.io/docs/api/docusaurus-config -import {themes as prismThemes} from 'prism-react-renderer'; - /** @type {import('@docusaurus/types').Config} */ const config = { title: 'My Site', @@ -59,83 +57,6 @@ const config = { }), ], ], - - themeConfig: - /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ - ({ - // Replace with your project's social card - image: 'img/docusaurus-social-card.jpg', - navbar: { - title: 'My Site', - logo: { - alt: 'My Site Logo', - src: 'img/logo.svg', - }, - items: [ - { - type: 'docSidebar', - sidebarId: 'tutorialSidebar', - position: 'left', - label: 'Tutorial', - }, - {to: '/blog', label: 'Blog', position: 'left'}, - { - href: 'https://github.com/facebook/docusaurus', - label: 'GitHub', - position: 'right', - }, - ], - }, - footer: { - style: 'dark', - links: [ - { - title: 'Docs', - items: [ - { - label: 'Tutorial', - to: '/docs/intro', - }, - ], - }, - { - title: 'Community', - items: [ - { - label: 'Stack Overflow', - href: 'https://stackoverflow.com/questions/tagged/docusaurus', - }, - { - label: 'Discord', - href: 'https://discordapp.com/invite/docusaurus', - }, - { - label: 'Twitter', - href: 'https://twitter.com/docusaurus', - }, - ], - }, - { - title: 'More', - items: [ - { - label: 'Blog', - to: '/blog', - }, - { - label: 'GitHub', - href: 'https://github.com/facebook/docusaurus', - }, - ], - }, - ], - copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`, - }, - prism: { - theme: prismThemes.github, - darkTheme: prismThemes.dracula, - }, - }), }; export default config; diff --git a/examples/classic/docusaurus.theme.jsx b/examples/classic/docusaurus.theme.jsx new file mode 100644 index 000000000000..abc2ef643386 --- /dev/null +++ b/examples/classic/docusaurus.theme.jsx @@ -0,0 +1,74 @@ +export default { + // Replace with your project's social card + image: 'img/docusaurus-social-card.jpg', + navbar: { + title: 'My Site', + logo: { + alt: 'My Site Logo', + src: 'img/logo.svg', + }, + items: [ + { + type: 'docSidebar', + sidebarId: 'tutorialSidebar', + position: 'left', + label: 'Tutorial', + }, + { to: '/blog', label: 'Blog', position: 'left' }, + { + href: 'https://github.com/facebook/docusaurus', + label: 'GitHub', + position: 'right', + }, + ], + }, + footer: { + style: 'dark', + links: [ + { + title: 'Docs', + items: [ + { + label: 'Tutorial', + to: '/docs/intro', + }, + ], + }, + { + title: 'Community', + items: [ + { + label: 'Stack Overflow', + href: 'https://stackoverflow.com/questions/tagged/docusaurus', + }, + { + label: 'Discord', + href: 'https://discordapp.com/invite/docusaurus', + }, + { + label: 'Twitter', + href: 'https://twitter.com/docusaurus', + }, + ], + }, + { + title: 'More', + items: [ + { + label: 'Blog', + to: '/blog', + }, + { + label: 'GitHub', + href: 'https://github.com/facebook/docusaurus', + }, + ], + }, + ], + copyright: `Copyright © ${ new Date().getFullYear() } My Project, Inc. Built with Docusaurus.`, + }, + prism: { + theme: prismThemes.github, + darkTheme: prismThemes.dracula, + }, +}