From 9f90240c7e82e3bbc2c9c952dd9526d4bd421c58 Mon Sep 17 00:00:00 2001 From: Janessa Garrow Date: Fri, 25 Aug 2023 10:26:09 -0400 Subject: [PATCH 1/6] feat(theme-common): Get desktopThresholdWidth from docusaurus config, fall back to 996 --- .../src/hooks/useWindowSize.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/docusaurus-theme-common/src/hooks/useWindowSize.ts b/packages/docusaurus-theme-common/src/hooks/useWindowSize.ts index a9583b199eb0..3ffcd4231fbe 100644 --- a/packages/docusaurus-theme-common/src/hooks/useWindowSize.ts +++ b/packages/docusaurus-theme-common/src/hooks/useWindowSize.ts @@ -8,6 +8,7 @@ import {useEffect, useState} from 'react'; import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; const windowSizes = { desktop: 'desktop', @@ -17,13 +18,12 @@ const windowSizes = { type WindowSize = keyof typeof windowSizes; -const DesktopThresholdWidth = 996; - -function getWindowSize() { +function getWindowSize(desktopThresholdWidth = 996): WindowSize { if (!ExecutionEnvironment.canUseDOM) { return windowSizes.ssr; } - return window.innerWidth > DesktopThresholdWidth + + return window.innerWidth > desktopThresholdWidth ? windowSizes.desktop : windowSizes.mobile; } @@ -44,16 +44,18 @@ const DevSimulateSSR = process.env.NODE_ENV === 'development' && true; * catch potential layout shifts, similar to strict mode calling effects twice. */ export function useWindowSize(): WindowSize { + const {siteConfig} = useDocusaurusContext(); + const desktopThresholdWidth = siteConfig?.themeConfig?.breakpoints?.desktop; const [windowSize, setWindowSize] = useState(() => { if (DevSimulateSSR) { return 'ssr'; } - return getWindowSize(); + return getWindowSize(desktopThresholdWidth); }); useEffect(() => { function updateWindowSize() { - setWindowSize(getWindowSize()); + setWindowSize(getWindowSize(desktopThresholdWidth)); } const timeout = DevSimulateSSR From c629834740d0c18f7f04196e1b8919df7823ca53 Mon Sep 17 00:00:00 2001 From: Janessa Garrow Date: Fri, 25 Aug 2023 10:31:38 -0400 Subject: [PATCH 2/6] Update example to dogfood custom desktopThresholdWidth --- examples/classic/docusaurus.config.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/examples/classic/docusaurus.config.js b/examples/classic/docusaurus.config.js index a8561d1a6b13..aeb89ddd915f 100644 --- a/examples/classic/docusaurus.config.js +++ b/examples/classic/docusaurus.config.js @@ -133,6 +133,9 @@ const config = { theme: lightCodeTheme, darkTheme: darkCodeTheme, }, + breakpoints: { + desktop: 744, + } }), }; From d3feed9f29cb9fcc07588da945410338bd0b715e Mon Sep 17 00:00:00 2001 From: Janessa Garrow Date: Fri, 25 Aug 2023 10:41:04 -0400 Subject: [PATCH 3/6] Revert "Update example to dogfood custom desktopThresholdWidth" This reverts commit c629834740d0c18f7f04196e1b8919df7823ca53. --- examples/classic/docusaurus.config.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/examples/classic/docusaurus.config.js b/examples/classic/docusaurus.config.js index aeb89ddd915f..a8561d1a6b13 100644 --- a/examples/classic/docusaurus.config.js +++ b/examples/classic/docusaurus.config.js @@ -133,9 +133,6 @@ const config = { theme: lightCodeTheme, darkTheme: darkCodeTheme, }, - breakpoints: { - desktop: 744, - } }), }; From 7bb3c9c533700f1fd61443b1052e656f8d3f94de Mon Sep 17 00:00:00 2001 From: Janessa Garrow Date: Fri, 25 Aug 2023 10:47:36 -0400 Subject: [PATCH 4/6] dogfooding: Add custom desktop breakpoint to theme config --- website/_dogfooding/dogfooding.config.js | 8 ++++++++ website/docusaurus.config.js | 2 ++ 2 files changed, 10 insertions(+) diff --git a/website/_dogfooding/dogfooding.config.js b/website/_dogfooding/dogfooding.config.js index a6e2bcde9592..5545c398869d 100644 --- a/website/_dogfooding/dogfooding.config.js +++ b/website/_dogfooding/dogfooding.config.js @@ -5,6 +5,14 @@ * LICENSE file in the root directory of this source tree. */ +/** @type {import('@docusaurus/types').ThemeConfig} */ +const dogFoodingThemeConfig = { + breakpoints: { + desktop: 744, + } +} +exports.dogFoodingThemeConfig = dogFoodingThemeConfig; + /** @type {import('@docusaurus/types').PluginConfig[]} */ const dogfoodingThemeInstances = [ /** @type {import('@docusaurus/types').PluginModule} */ diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 087e9716cd3c..31904e42037b 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -14,6 +14,7 @@ const versions = require('./versions.json'); const VersionsArchived = require('./versionsArchived.json'); const { dogfoodingPluginInstances, + dogFoodingThemeConfig, dogfoodingThemeInstances, dogfoodingRedirects, } = require('./_dogfooding/dogfooding.config'); @@ -450,6 +451,7 @@ module.exports = async function createConfigAsync() { themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ ({ + ...dogFoodingThemeConfig, liveCodeBlock: { playgroundPosition: 'bottom', }, From 6535c04c183d60ebb882622c4c8bbff6bf0ca02a Mon Sep 17 00:00:00 2001 From: Janessa Garrow Date: Fri, 25 Aug 2023 10:59:26 -0400 Subject: [PATCH 5/6] Handle falsey value --- packages/docusaurus-theme-common/src/hooks/useWindowSize.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docusaurus-theme-common/src/hooks/useWindowSize.ts b/packages/docusaurus-theme-common/src/hooks/useWindowSize.ts index 3ffcd4231fbe..2fe7c753f54c 100644 --- a/packages/docusaurus-theme-common/src/hooks/useWindowSize.ts +++ b/packages/docusaurus-theme-common/src/hooks/useWindowSize.ts @@ -45,7 +45,7 @@ const DevSimulateSSR = process.env.NODE_ENV === 'development' && true; */ export function useWindowSize(): WindowSize { const {siteConfig} = useDocusaurusContext(); - const desktopThresholdWidth = siteConfig?.themeConfig?.breakpoints?.desktop; + const desktopThresholdWidth = siteConfig?.themeConfig?.breakpoints?.desktop ?? 996; const [windowSize, setWindowSize] = useState(() => { if (DevSimulateSSR) { return 'ssr'; From 480684c5e1950c9cc90af6126eb4b3bbe69ed1ba Mon Sep 17 00:00:00 2001 From: Janessa Garrow Date: Fri, 25 Aug 2023 11:05:27 -0400 Subject: [PATCH 6/6] Update ThemeConfig type --- packages/docusaurus-types/src/config.d.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/docusaurus-types/src/config.d.ts b/packages/docusaurus-types/src/config.d.ts index 3a7bb99ae743..0825b41c3e2c 100644 --- a/packages/docusaurus-types/src/config.d.ts +++ b/packages/docusaurus-types/src/config.d.ts @@ -14,6 +14,10 @@ export type ReportingSeverity = 'ignore' | 'log' | 'warn' | 'throw'; export type ThemeConfig = { [key: string]: unknown; + breakpoints?: { + desktop?: number; + [key: string]: unknown; + } }; export type MarkdownPreprocessor = (args: {