From 2b04b55741df5b7a2213efdec2ef22356c4a3591 Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Thu, 1 Jun 2023 23:04:04 +0330 Subject: [PATCH] feat: add a theme option for hiding doc plugin sidebar --- .../docusaurus.config.js | 11 +++++++--- .../src/client/css/custom.scss | 6 ++++++ .../src/client/lib/useThemeOptions.ts | 17 +++++++++++++++ .../src/client/theme/Root.tsx | 9 +++++++- .../src/client/types/theme.types.ts | 9 ++++++++ packages/logos-docusaurus-theme/src/index.ts | 21 +++++++++++++++---- 6 files changed, 65 insertions(+), 8 deletions(-) create mode 100644 packages/logos-docusaurus-theme/src/client/lib/useThemeOptions.ts create mode 100644 packages/logos-docusaurus-theme/src/client/types/theme.types.ts diff --git a/packages/docusaurus-playground/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js index b606251..cae3be7 100644 --- a/packages/docusaurus-playground/docusaurus.config.js +++ b/packages/docusaurus-playground/docusaurus.config.js @@ -8,9 +8,7 @@ const config = { url: 'https://url', baseUrl: '/', - customFields: { - ghostAPiKey: process.env.GHOST_API_KEY, - }, + customFields: {}, markdown: { mermaid: true, }, @@ -33,6 +31,13 @@ const config = { name: 'default', options: { customCss: [require.resolve('./src/css/custom.scss')], + docs: { + default: { + sidebar: { + hide: true, + }, + }, + }, }, }, docs: { diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index 51145f4..481123e 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -871,3 +871,9 @@ small { padding-inline: 0; } } + +[data-hidden-doc-sidebar='true'] { + .theme-doc-sidebar-container { + display: none; + } +} diff --git a/packages/logos-docusaurus-theme/src/client/lib/useThemeOptions.ts b/packages/logos-docusaurus-theme/src/client/lib/useThemeOptions.ts new file mode 100644 index 0000000..df9bbcf --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/lib/useThemeOptions.ts @@ -0,0 +1,17 @@ +import { useActivePlugin } from '@docusaurus/plugin-content-docs/lib/client/index.js' +import useDocusaurusContext from '@docusaurus/useDocusaurusContext' +import { DocConfig, ThemeOptions } from '../types/theme.types' + +export const useThemeOptions = (): ThemeOptions => { + const { + siteConfig: { customFields = {} }, + } = useDocusaurusContext() + + return (customFields['logos-docusaurus-theme'] ?? {}) as ThemeOptions +} + +export const useDocThemeOptions = (): DocConfig => { + const activePlugin = useActivePlugin() + const themeOptions = useThemeOptions() + return activePlugin ? themeOptions?.docs?.[activePlugin?.pluginId] ?? {} : {} +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Root.tsx b/packages/logos-docusaurus-theme/src/client/theme/Root.tsx index c2fdb2a..8108e4e 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/Root.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/Root.tsx @@ -4,10 +4,15 @@ import { useColorMode, } from '@docusaurus/theme-common/internal' import React from 'react' +import { useDocThemeOptions } from '../lib/useThemeOptions' import styles from './style.module.css' const Content = ({ children }) => { const colorMode = useColorMode() + + const options = useDocThemeOptions() + const hideDocSidebar = options?.sidebar?.hide + return ( { : defaultThemes.light } > -
{children}
+
+ {children} +
) } diff --git a/packages/logos-docusaurus-theme/src/client/types/theme.types.ts b/packages/logos-docusaurus-theme/src/client/types/theme.types.ts new file mode 100644 index 0000000..bccac9d --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/types/theme.types.ts @@ -0,0 +1,9 @@ +export type DocConfig = { + sidebar?: { + hide?: boolean + } +} + +export type ThemeOptions = { + docs?: Record +} diff --git a/packages/logos-docusaurus-theme/src/index.ts b/packages/logos-docusaurus-theme/src/index.ts index 68e75d8..44d7b85 100644 --- a/packages/logos-docusaurus-theme/src/index.ts +++ b/packages/logos-docusaurus-theme/src/index.ts @@ -1,6 +1,10 @@ -import type { PluginOptions } from '@docusaurus/theme-classic' +import type { PluginOptions as DefaultPluginOptions } from '@docusaurus/theme-classic' import type { LoadContext, Plugin } from '@docusaurus/types' +import _ from 'lodash' import path from 'path' +import type { ThemeOptions } from './client/types/theme.types' + +export type PluginOptions = DefaultPluginOptions & ThemeOptions export default function logosTheme( context: LoadContext, @@ -9,13 +13,24 @@ export default function logosTheme( const clientModules: string[] = [ path.resolve(__dirname, './client/css/custom.scss'), ] - if (options.customCss) { if (typeof options.customCss === 'string') clientModules.push(options.customCss) else clientModules.push(...options.customCss) } + context.siteConfig.customFields = { + ...(context.siteConfig.customFields ?? {}), + 'logos-docusaurus-theme': { + ...options, + ...(_.get( + context, + 'siteConfig.customFields.logos-docusaurus-theme', + {}, + ) as object), + }, + } + return { name: 'logos-docusaurus-theme', @@ -27,5 +42,3 @@ export default function logosTheme( getClientModules: () => clientModules, } } - -export { PluginOptions }