From b4789c852df94b05c908596570b9bc134d0902d6 Mon Sep 17 00:00:00 2001 From: windmillcode0 Date: Wed, 21 Aug 2024 18:23:19 -0400 Subject: [PATCH 01/20] [UPDATE] additional work --- packages/starlight-view-modes/.npmignore | 1 - packages/starlight-view-modes/README.md | 25 -- .../components/HeaderButtons.astro | 31 +- .../components/MobileViewModes.astro | 35 +- .../components/SidebarToggle.astro | 135 ++++++ .../components/ViewModes.astro | 2 +- packages/starlight-view-modes/index.ts | 401 +++++++++--------- .../PresentationModePositionStateMachine.js | 136 +++--- .../libs/SharedMethods.js | 124 +++--- .../libs/ZenModePositionStateMachine.js | 177 ++++---- .../starlight-view-modes/libs/integration.ts | 34 +- packages/starlight-view-modes/libs/vite.ts | 34 +- .../overrides/PageSidebar.astro | 15 +- .../overrides/Sidebar.astro | 17 + packages/starlight-view-modes/package.json | 44 -- packages/starlight-view-modes/tsconfig.json | 3 - packages/starlight-view-modes/virtual.d.ts | 4 - 17 files changed, 673 insertions(+), 545 deletions(-) delete mode 100644 packages/starlight-view-modes/.npmignore delete mode 100644 packages/starlight-view-modes/README.md create mode 100644 packages/starlight-view-modes/components/SidebarToggle.astro create mode 100644 packages/starlight-view-modes/overrides/Sidebar.astro delete mode 100644 packages/starlight-view-modes/package.json delete mode 100644 packages/starlight-view-modes/tsconfig.json delete mode 100644 packages/starlight-view-modes/virtual.d.ts diff --git a/packages/starlight-view-modes/.npmignore b/packages/starlight-view-modes/.npmignore deleted file mode 100644 index 15231cf..0000000 --- a/packages/starlight-view-modes/.npmignore +++ /dev/null @@ -1 +0,0 @@ -tsconfig.json diff --git a/packages/starlight-view-modes/README.md b/packages/starlight-view-modes/README.md deleted file mode 100644 index c494c5e..0000000 --- a/packages/starlight-view-modes/README.md +++ /dev/null @@ -1,25 +0,0 @@ -
-

starlight-view-modes 🧘

-

Starlight plugin adding view mode capabilities to your documentation website.

-
- -
- - License - -
-
- -## Getting Started - -Want to get started immediately? Check out the [getting started guide](https://starlight-view-modes.trueberryless.org/getting-started/). - -## Features - -A [Starlight](https://starlight.astro.build) plugin adding view mode capabilities to your documentation website. - -## License - -Licensed under the MIT License, Copyright © trueberryless. - -See [LICENSE](https://github.com/trueberryless/starlight-view-modes/blob/main/LICENSE) for more information. diff --git a/packages/starlight-view-modes/components/HeaderButtons.astro b/packages/starlight-view-modes/components/HeaderButtons.astro index 4ba12c7..112549b 100644 --- a/packages/starlight-view-modes/components/HeaderButtons.astro +++ b/packages/starlight-view-modes/components/HeaderButtons.astro @@ -9,7 +9,7 @@ justify-content: center; align-items: center; gap: 1rem; - + } #view-modes-header-div::before { content: ""; @@ -53,7 +53,7 @@ body.view-modes-zen-mode-header-disabled #view-modes-zen-mode-off-header > svg:h } - + - \ No newline at end of file diff --git a/packages/starlight-view-modes/components/MobileViewModes.astro b/packages/starlight-view-modes/components/MobileViewModes.astro index 6e3ef22..7633061 100644 --- a/packages/starlight-view-modes/components/MobileViewModes.astro +++ b/packages/starlight-view-modes/components/MobileViewModes.astro @@ -9,7 +9,7 @@ justify-content: center; align-items: center; gap: 1rem; - + } #view-modes-header-div-mobile::before { content: ""; @@ -49,7 +49,7 @@ body.view-modes-presentation-mode #view-modes-presentation-mode-off-header-mobil } - + - \ No newline at end of file diff --git a/packages/starlight-view-modes/components/SidebarToggle.astro b/packages/starlight-view-modes/components/SidebarToggle.astro new file mode 100644 index 0000000..7ef801d --- /dev/null +++ b/packages/starlight-view-modes/components/SidebarToggle.astro @@ -0,0 +1,135 @@ + + + diff --git a/packages/starlight-view-modes/components/ViewModes.astro b/packages/starlight-view-modes/components/ViewModes.astro index 4fbad85..fb8434a 100644 --- a/packages/starlight-view-modes/components/ViewModes.astro +++ b/packages/starlight-view-modes/components/ViewModes.astro @@ -257,4 +257,4 @@ body.view-modes-presentation-mode.view-modes-zen-mode-table-of-contents-enabled document.body.classList.add("view-modes-zen-mode-template-doc"); } }); - + \ No newline at end of file diff --git a/packages/starlight-view-modes/index.ts b/packages/starlight-view-modes/index.ts index 54417d4..fee1f37 100644 --- a/packages/starlight-view-modes/index.ts +++ b/packages/starlight-view-modes/index.ts @@ -1,199 +1,218 @@ -import type { StarlightPlugin, StarlightUserConfig } from "@astrojs/starlight/types"; -import { AstroError } from "astro/errors"; -import { z } from "astro/zod"; +import type { + StarlightPlugin, + StarlightUserConfig, +} from '@astrojs/starlight/types'; +import { AstroError } from 'astro/errors'; +import { z } from 'astro/zod'; -import { starlightViewModesIntegration } from "./libs/integration"; +import { starlightViewModesIntegration } from './libs/integration'; const starlightViewModesConfigSchema = z - .object({ - /** - * Indicates if Zen mode is enabled. When enabled, the user is able to active Zen mode which - * provides a distraction-free interface by hiding everything except the main content. - * - * @type {boolean} - * @default true - */ - zenModeEnabled: z.boolean().default(true), - - /** - * Choose the position of the close button for the Zen mode. It is only visible when the Zen mode - * is active and can be in one of four corners: top left, top right, bottom left, or bottom right. - * - * @type {enum} - * @default "top-right" - */ - zenModeCloseButtonPosition: z - .enum(["top-left", "top-right", "bottom-left", "bottom-right"]) - .default("top-right"), - - /** - * Indicates if the header should be shown if the user is actively in Zen mode. - * - * @type {boolean} - * @default false - */ - zenModeShowHeader: z.boolean().default(false), - - /** - * Indicates if the sidebar should be shown if the user is actively in Zen mode. - * - * @type {boolean} - * @default false - */ - zenModeShowSidebar: z.boolean().default(false), - - /** - * Indicates if the table of contents should be shown if the user is actively in Zen mode. - * - * @type {boolean} - * @default false - */ - zenModeShowTableOfContents: z.boolean().default(true), - - /** - * Indicates if the footer should be shown if the user is actively in Zen mode. - * - * @type {boolean} - * @default true - */ - zenModeShowFooter: z.boolean().default(true), - - /** - * This option can enable or disable a button in the table of contents sidebar that will switch into Zen Mode or back from Zen Mode. - * - * @type {boolean} - * @default true - */ - zenModeShowSwitchInTableOfContents: z.boolean().default(true), - - /** - * This option can enable or disable a button in the header that will switch into Zen Mode or back from Zen Mode. - * - * @type {boolean} - * @default true - */ - zenModeShowSwitchInHeader: z.boolean().default(true), - - /** - * This option can enable or disable a button in the header of mobile devices that will switch into Zen Mode or back from Zen Mode. - * - * @type {boolean} - * @default true - */ - zenModeShowSwitchInHeaderMobile: z.boolean().default(true), - - /** - * Indicates if Presentation Mode is enabled. When enabled, the user is able to active Presentation Mode which - * converts the main content into a presentation-like view intended for teaching or presentation purposes. - * - * @type {boolean} - * @default false - */ - presentationModeEnabled: z.boolean().default(false), - - /** - * Choose the position of the close button for the Presentation mode. It is only visible when the Presentation mode - * is active and can be in one of four corners: top left, top right, bottom left, or bottom right. - * - * @type {enum} - * @default "top-right" - */ - presentationModeCloseButtonPosition: z - .enum(["top-left", "top-right", "bottom-left", "bottom-right"]) - .default("top-right"), - - // /** - // * Choose the position of the control button for the Presentation Mode. It is only visible when the Presentation Mode - // * is active and can be in one of eight corners: top left, top middle, top right, middle right, bottom left, bottom middle, bottom right, or middle left. - // * - // * @type {enum} - // * @default "middle-right" - // */ - // presentationModeControlButtonPosition: z - // .enum([ - // "top-left", - // "top-middle", - // "top-right", - // "middle-right", - // "bottom-left", - // "bottom-middle", - // "bottom-right", - // "middle-left", - // ]) - // .default("middle-right"), - - /** - * This option can enable or disable a button in the header that will switch into Presentation Mode or back from Presentation Mode. - * - * @type {boolean} - * @default true - */ - presentationModeShowSwitchInHeader: z.boolean().default(true), - - /** - * This option can enable or disable a button in the header of mobile devices that will switch into Presentation Mode or back from Presentation Mode. - * - * @type {boolean} - * @default true - */ - presentationModeShowSwitchInHeaderMobile: z.boolean().default(true), - - /** - * This option can enable or disable a button in the table of contents sidebar that will switch into Presentation Mode or back from Presentation Mode. - * - * @type {boolean} - * @default true - */ - presentationModeShowSwitchInTableOfContents: z.boolean().default(true), - }) - .default({}); + .object({ + /** + * Indicates if Zen mode is enabled. When enabled, the user is able to active Zen mode which + * provides a distraction-free interface by hiding everything except the main content. + * + * @type {boolean} + * @default true + */ + zenModeEnabled: z.boolean().default(true), + + /** + * Choose the position of the close button for the Zen mode. It is only visible when the Zen mode + * is active and can be in one of four corners: top left, top right, bottom left, or bottom right. + * + * @type {enum} + * @default "top-right" + */ + zenModeCloseButtonPosition: z + .enum(['top-left', 'top-right', 'bottom-left', 'bottom-right']) + .default('top-right'), + + /** + * Indicates if the header should be shown if the user is actively in Zen mode. + * + * @type {boolean} + * @default false + */ + zenModeShowHeader: z.boolean().default(false), + + /** + * Indicates if the sidebar should be shown if the user is actively in Zen mode. + * + * @type {boolean} + * @default false + */ + zenModeShowSidebar: z.boolean().default(false), + + /** + * Indicates if the table of contents should be shown if the user is actively in Zen mode. + * + * @type {boolean} + * @default false + */ + zenModeShowTableOfContents: z.boolean().default(true), + + /** + * Indicates if the footer should be shown if the user is actively in Zen mode. + * + * @type {boolean} + * @default true + */ + zenModeShowFooter: z.boolean().default(true), + + /** + * This option can enable or disable a button in the table of contents sidebar that will switch into Zen Mode or back from Zen Mode. + * + * @type {boolean} + * @default true + */ + zenModeShowSwitchInTableOfContents: z.boolean().default(true), + + /** + * This option can enable or disable a button in the header that will switch into Zen Mode or back from Zen Mode. + * + * @type {boolean} + * @default true + */ + zenModeShowSwitchInHeader: z.boolean().default(true), + + /** + * This option can enable or disable a button in the header of mobile devices that will switch into Zen Mode or back from Zen Mode. + * + * @type {boolean} + * @default true + */ + zenModeShowSwitchInHeaderMobile: z.boolean().default(true), + + /** + * Indicates if Presentation Mode is enabled. When enabled, the user is able to active Presentation Mode which + * converts the main content into a presentation-like view intended for teaching or presentation purposes. + * + * @type {boolean} + * @default false + */ + presentationModeEnabled: z.boolean().default(false), + + /** + * Choose the position of the close button for the Presentation mode. It is only visible when the Presentation mode + * is active and can be in one of four corners: top left, top right, bottom left, or bottom right. + * + * @type {enum} + * @default "top-right" + */ + presentationModeCloseButtonPosition: z + .enum(['top-left', 'top-right', 'bottom-left', 'bottom-right']) + .default('top-right'), + + // /** + // * Choose the position of the control button for the Presentation Mode. It is only visible when the Presentation Mode + // * is active and can be in one of eight corners: top left, top middle, top right, middle right, bottom left, bottom middle, bottom right, or middle left. + // * + // * @type {enum} + // * @default "middle-right" + // */ + // presentationModeControlButtonPosition: z + // .enum([ + // "top-left", + // "top-middle", + // "top-right", + // "middle-right", + // "bottom-left", + // "bottom-middle", + // "bottom-right", + // "middle-left", + // ]) + // .default("middle-right"), + + /** + * This option can enable or disable a button in the header that will switch into Presentation Mode or back from Presentation Mode. + * + * @type {boolean} + * @default true + */ + presentationModeShowSwitchInHeader: z.boolean().default(true), + + /** + * This option can enable or disable a button in the header of mobile devices that will switch into Presentation Mode or back from Presentation Mode. + * + * @type {boolean} + * @default true + */ + presentationModeShowSwitchInHeaderMobile: z.boolean().default(true), + + /** + * This option can enable or disable a button in the table of contents sidebar that will switch into Presentation Mode or back from Presentation Mode. + * + * @type {boolean} + * @default true + */ + presentationModeShowSwitchInTableOfContents: z.boolean().default(true), + }) + .default({}); export default function starlightViewModes( - userConfig?: StarlightViewModesUserConfig + userConfig?: StarlightViewModesUserConfig ): StarlightPlugin { - const parsedConfig = starlightViewModesConfigSchema.safeParse(userConfig); - - if (!parsedConfig.success) { - throw new AstroError( - `The provided plugin configuration is invalid.\n${parsedConfig.error.issues - .map((issue) => issue.message) - .join("\n")}`, - `See the error report above for more informations.\n\nIf you believe this is a bug, please file an issue at https://github.com/trueberryless/starlight-view-modes/issues` - ); - } - - return { - name: "starlight-view-modes", - hooks: { - setup({ addIntegration, config, logger, updateConfig }) { - const updatedConfig: Partial = { - components: { ...config.components }, - }; - - if (!updatedConfig.components) { - updatedConfig.components = {}; - } - - // If the user has already has a custom override for the PageSidebar component, don't override it. - if (config.components?.PageSidebar) { - logger.warn( - "It looks like you already have a `PageSidebar` component override in your Starlight configuration." - ); - logger.warn( - "To render `@astrojs/starlight-view-modes`, remove the override for the `PageSidebar` component.\n" - ); - } else { - // Otherwise, add the PageSidebar component override to the user's configuration. - updatedConfig.components.PageSidebar = - "starlight-view-modes/overrides/PageSidebar.astro"; - } - - addIntegration(starlightViewModesIntegration(parsedConfig.data)); - updateConfig(updatedConfig); - }, - }, - }; + const parsedConfig = starlightViewModesConfigSchema.safeParse(userConfig); + + if (!parsedConfig.success) { + throw new AstroError( + `The provided plugin configuration is invalid.\n${parsedConfig.error.issues + .map((issue) => issue.message) + .join('\n')}`, + `See the error report above for more informations.\n\nIf you believe this is a bug, please file an issue at https://github.com/trueberryless/starlight-view-modes/issues` + ); + } + + return { + name: 'starlight-view-modes', + hooks: { + setup({ addIntegration, config, logger, updateConfig }) { + const updatedConfig: Partial = { + components: { ...config.components }, + }; + + if (!updatedConfig.components) { + updatedConfig.components = {}; + } + + // If the user has already has a custom override for the PageSidebar component, don't override it. + if (config.components?.PageSidebar) { + logger.warn( + 'It looks like you already have a `PageSidebar` component override in your Starlight configuration.' + ); + logger.warn( + 'To render `@astrojs/starlight-view-modes`, remove the override for the `PageSidebar` component.\n' + ); + } else { + // Otherwise, add the PageSidebar component override to the user's configuration. + updatedConfig.components.PageSidebar = + './src/plugins/view-modes/overrides/PageSidebar.astro'; + } + if (config.components?.Sidebar) { + logger.warn( + 'It looks like you already have a `Sidebar` component override in your Starlight configuration.' + ); + logger.warn( + 'To render `@astrojs/starlight-view-modes`, remove the override for the `Sidebar` component.\n' + ); + } else { + // Otherwise, add the Sidebar component override to the user's configuration. + updatedConfig.components.Sidebar = + './src/plugins/view-modes/overrides/Sidebar.astro'; + } + + addIntegration(starlightViewModesIntegration(parsedConfig.data)); + updateConfig(updatedConfig); + }, + }, + }; } -export type StarlightViewModesUserConfig = z.input; -export type StarlightViewModesConfig = z.output; +export type StarlightViewModesUserConfig = z.input< + typeof starlightViewModesConfigSchema +>; +export type StarlightViewModesConfig = z.output< + typeof starlightViewModesConfigSchema +>; diff --git a/packages/starlight-view-modes/libs/PresentationModePositionStateMachine.js b/packages/starlight-view-modes/libs/PresentationModePositionStateMachine.js index ff77b3d..a8427f6 100644 --- a/packages/starlight-view-modes/libs/PresentationModePositionStateMachine.js +++ b/packages/starlight-view-modes/libs/PresentationModePositionStateMachine.js @@ -1,84 +1,84 @@ export class PresentationModePositionStateMachine { - constructor(config, presentationModeOff) { - this.config = config; - this.presentationModeOff = presentationModeOff; - } + constructor(config, presentationModeOff) { + this.config = config; + this.presentationModeOff = presentationModeOff; + } - updatePosition() { - this.setDynamicPosition(); + updatePosition() { + this.setDynamicPosition(); - if (!window.matchMedia("(min-width: 50rem)").matches) { - this.setBottomPosition(); - } + if (!window.matchMedia('(min-width: 50rem)').matches) { + this.setBottomPosition(); } + } - setDynamicPosition() { - if ( - this.config.presentationModeCloseButtonPosition === "top-right" || - this.config.presentationModeCloseButtonPosition === "bottom-right" - ) { - this.presentationModeOff?.style.setProperty("right", "1rem"); - this.presentationModeOff?.style.removeProperty("left"); - } else { - this.presentationModeOff?.style.setProperty("left", "1rem"); - this.presentationModeOff?.style.removeProperty("right"); - } + setDynamicPosition() { + if ( + this.config.presentationModeCloseButtonPosition === 'top-right' || + this.config.presentationModeCloseButtonPosition === 'bottom-right' + ) { + this.presentationModeOff?.style.setProperty('right', '1rem'); + this.presentationModeOff?.style.removeProperty('left'); + } else { + this.presentationModeOff?.style.setProperty('left', '1rem'); + this.presentationModeOff?.style.removeProperty('right'); + } - if ( - this.config.presentationModeCloseButtonPosition === "top-right" || - this.config.presentationModeCloseButtonPosition === "top-left" - ) { - this.presentationModeOff?.style.setProperty("top", "1rem"); - this.presentationModeOff?.style.removeProperty("bottom"); - } else { - this.presentationModeOff?.style.setProperty("bottom", "1rem"); - this.presentationModeOff?.style.removeProperty("top"); - } + if ( + this.config.presentationModeCloseButtonPosition === 'top-right' || + this.config.presentationModeCloseButtonPosition === 'top-left' + ) { + this.presentationModeOff?.style.setProperty('top', '1rem'); + this.presentationModeOff?.style.removeProperty('bottom'); + } else { + this.presentationModeOff?.style.setProperty('bottom', '1rem'); + this.presentationModeOff?.style.removeProperty('top'); } + } - setBottomPosition() { - // Hier wird der Button immer unten fixiert, unabhÀngig von der top/bottom-Einstellung - this.presentationModeOff?.style.setProperty("bottom", "1rem"); - this.presentationModeOff?.style.removeProperty("top"); // Entferne die top-Position, falls vorhanden + setBottomPosition() { + // Hier wird der Button immer unten fixiert, unabhÀngig von der top/bottom-Einstellung + this.presentationModeOff?.style.setProperty('bottom', '1rem'); + this.presentationModeOff?.style.removeProperty('top'); // Entferne die top-Position, falls vorhanden - // Position links oder rechts wird weiterhin basierend auf der config gesetzt - if ( - this.config.presentationModeCloseButtonPosition === "top-right" || - this.config.presentationModeCloseButtonPosition === "bottom-right" - ) { - this.presentationModeOff?.style.setProperty("right", "1rem"); - this.presentationModeOff?.style.removeProperty("left"); // Entferne die left-Position, falls vorhanden - } else { - this.presentationModeOff?.style.setProperty("left", "1rem"); - this.presentationModeOff?.style.removeProperty("right"); // Entferne die right-Position, falls vorhanden - } + // Position links oder rechts wird weiterhin basierend auf der config gesetzt + if ( + this.config.presentationModeCloseButtonPosition === 'top-right' || + this.config.presentationModeCloseButtonPosition === 'bottom-right' + ) { + this.presentationModeOff?.style.setProperty('right', '1rem'); + this.presentationModeOff?.style.removeProperty('left'); // Entferne die left-Position, falls vorhanden + } else { + this.presentationModeOff?.style.setProperty('left', '1rem'); + this.presentationModeOff?.style.removeProperty('right'); // Entferne die right-Position, falls vorhanden } + } - setRightPosition() { - // Hier wird der Button immer rechts fixiert, unabhÀngig von der left/right-Einstellung - this.presentationModeOff?.style.setProperty("right", "1rem"); - this.presentationModeOff?.style.removeProperty("left"); // Entferne die left-Position, falls vorhanden + setRightPosition() { + // Hier wird der Button immer rechts fixiert, unabhÀngig von der left/right-Einstellung + this.presentationModeOff?.style.setProperty('right', '1rem'); + this.presentationModeOff?.style.removeProperty('left'); // Entferne die left-Position, falls vorhanden - // Position oben oder unten wird weiterhin basierend auf der config gesetzt - if ( - this.config.presentationModeCloseButtonPosition === "top-right" || - this.config.presentationModeCloseButtonPosition === "top-left" - ) { - this.presentationModeOff?.style.setProperty("top", "1rem"); - this.presentationModeOff?.style.removeProperty("bottom"); // Entferne die bottom-Position, falls vorhanden - } else { - this.presentationModeOff?.style.setProperty("bottom", "1rem"); - this.presentationModeOff?.style.removeProperty("top"); // Entferne die top-Position, falls vorhanden - } + // Position oben oder unten wird weiterhin basierend auf der config gesetzt + if ( + this.config.presentationModeCloseButtonPosition === 'top-right' || + this.config.presentationModeCloseButtonPosition === 'top-left' + ) { + this.presentationModeOff?.style.setProperty('top', '1rem'); + this.presentationModeOff?.style.removeProperty('bottom'); // Entferne die bottom-Position, falls vorhanden + } else { + this.presentationModeOff?.style.setProperty('bottom', '1rem'); + this.presentationModeOff?.style.removeProperty('top'); // Entferne die top-Position, falls vorhanden } + } - setBottomRightPosition() { - // Hier wird der Button immer unten fixiert, unabhÀngig von der top/bottom-Einstellung - this.presentationModeOff?.style.setProperty("bottom", "1rem"); - this.presentationModeOff?.style.removeProperty("top"); // Entferne die top-Position, falls vorhanden + setBottomRightPosition() { + // Hier wird der Button immer unten fixiert, unabhÀngig von der top/bottom-Einstellung + this.presentationModeOff?.style.setProperty('bottom', '1rem'); + this.presentationModeOff?.style.removeProperty('top'); // Entferne die top-Position, falls vorhanden - // Hier wird der Button immer rechts fixiert, unabhÀngig von der left/right-Einstellung - this.presentationModeOff?.style.setProperty("right", "1rem"); - this.presentationModeOff?.style.removeProperty("left"); // Entferne die left-Position, falls vorhanden - } + // Hier wird der Button immer rechts fixiert, unabhÀngig von der left/right-Einstellung + this.presentationModeOff?.style.setProperty('right', '1rem'); + this.presentationModeOff?.style.removeProperty('left'); // Entferne die left-Position, falls vorhanden + } } diff --git a/packages/starlight-view-modes/libs/SharedMethods.js b/packages/starlight-view-modes/libs/SharedMethods.js index 7da4e6d..7767115 100644 --- a/packages/starlight-view-modes/libs/SharedMethods.js +++ b/packages/starlight-view-modes/libs/SharedMethods.js @@ -1,76 +1,94 @@ -import config from "virtual:starlight-view-modes-config"; +import config from 'virtual:starlight-view-modes-config'; export function activateZenMode() { - document.body.classList.add("view-modes-zen-mode"); + document.body.classList.add('view-modes-zen-mode'); - const zenModeOnText = document.getElementById("view-modes-zen-mode-on-text"); - if (zenModeOnText) zenModeOnText.innerText = "Deactivate Zen Mode"; + const zenModeOnText = document.getElementById('view-modes-zen-mode-on-text'); + if (zenModeOnText) zenModeOnText.innerText = 'Deactivate Zen Mode'; - const zenModeOffHeader = document.getElementById("view-modes-zen-mode-off-header"); - if (zenModeOffHeader) zenModeOffHeader.title = "Deactivate Zen Mode"; + const zenModeOffHeader = document.getElementById( + 'view-modes-zen-mode-off-header' + ); + if (zenModeOffHeader) zenModeOffHeader.title = 'Deactivate Zen Mode'; - const zenModeOffHeaderMobile = document.getElementById("view-modes-zen-mode-off-header-mobile"); - if (zenModeOffHeaderMobile) zenModeOffHeaderMobile.title = "Deactivate Zen Mode"; + const zenModeOffHeaderMobile = document.getElementById( + 'view-modes-zen-mode-off-header-mobile' + ); + if (zenModeOffHeaderMobile) + zenModeOffHeaderMobile.title = 'Deactivate Zen Mode'; - sessionStorage.setItem("viewModesZenMode", "true"); + sessionStorage.setItem('viewModesZenMode', 'true'); } export function deactivateZenMode() { - document.body.classList.remove("view-modes-zen-mode"); + document.body.classList.remove('view-modes-zen-mode'); - const zenModeOnText = document.getElementById("view-modes-zen-mode-on-text"); - if (zenModeOnText) zenModeOnText.innerText = "Activate Zen Mode"; + const zenModeOnText = document.getElementById('view-modes-zen-mode-on-text'); + if (zenModeOnText) zenModeOnText.innerText = 'Activate Zen Mode'; - const zenModeOffHeader = document.getElementById("view-modes-zen-mode-off-header"); - if (zenModeOffHeader) zenModeOffHeader.title = "Activate Zen Mode"; + const zenModeOffHeader = document.getElementById( + 'view-modes-zen-mode-off-header' + ); + if (zenModeOffHeader) zenModeOffHeader.title = 'Activate Zen Mode'; - const zenModeOffHeaderMobile = document.getElementById("view-modes-zen-mode-off-header-mobile"); - if (zenModeOffHeaderMobile) zenModeOffHeaderMobile.title = "Activate Zen Mode"; + const zenModeOffHeaderMobile = document.getElementById( + 'view-modes-zen-mode-off-header-mobile' + ); + if (zenModeOffHeaderMobile) + zenModeOffHeaderMobile.title = 'Activate Zen Mode'; - sessionStorage.removeItem("viewModesZenMode"); + sessionStorage.removeItem('viewModesZenMode'); } export function activatePresentationMode() { - document.body.classList.add("view-modes-presentation-mode"); - - const presentationModeOnText = document.getElementById("view-modes-presentation-mode-on-text"); - if (presentationModeOnText) presentationModeOnText.innerText = "Deactivate Presentation Mode"; - - const presentationModeOffHeader = document.getElementById( - "view-modes-presentation-mode-off-header" - ); - if (presentationModeOffHeader) presentationModeOffHeader.title = "Deactivate Presentation Mode"; - - const presentationModeOffHeaderMobile = document.getElementById( - "view-modes-presentation-mode-off-header-mobile" - ); - if (presentationModeOffHeaderMobile) - presentationModeOffHeaderMobile.title = "Deactivate Presentation Mode"; - - sessionStorage.setItem("viewModesPresentationMode", "true"); + document.body.classList.add('view-modes-presentation-mode'); + + const presentationModeOnText = document.getElementById( + 'view-modes-presentation-mode-on-text' + ); + if (presentationModeOnText) + presentationModeOnText.innerText = 'Deactivate Presentation Mode'; + + const presentationModeOffHeader = document.getElementById( + 'view-modes-presentation-mode-off-header' + ); + if (presentationModeOffHeader) + presentationModeOffHeader.title = 'Deactivate Presentation Mode'; + + const presentationModeOffHeaderMobile = document.getElementById( + 'view-modes-presentation-mode-off-header-mobile' + ); + if (presentationModeOffHeaderMobile) + presentationModeOffHeaderMobile.title = 'Deactivate Presentation Mode'; + + sessionStorage.setItem('viewModesPresentationMode', 'true'); } export function deactivatePresentationMode() { - document.body.classList.remove("view-modes-presentation-mode"); - - const presentationModeOnText = document.getElementById("view-modes-presentation-mode-on-text"); - if (presentationModeOnText) presentationModeOnText.innerText = "Activate Presentation Mode"; - - const presentationModeOffHeader = document.getElementById( - "view-modes-presentation-mode-off-header" - ); - if (presentationModeOffHeader) presentationModeOffHeader.title = "Activate Presentation Mode"; - - const presentationModeOffHeaderMobile = document.getElementById( - "view-modes-presentation-mode-off-header-mobile" - ); - if (presentationModeOffHeaderMobile) - presentationModeOffHeaderMobile.title = "Activate Presentation Mode"; - - sessionStorage.removeItem("viewModesPresentationMode"); + document.body.classList.remove('view-modes-presentation-mode'); + + const presentationModeOnText = document.getElementById( + 'view-modes-presentation-mode-on-text' + ); + if (presentationModeOnText) + presentationModeOnText.innerText = 'Activate Presentation Mode'; + + const presentationModeOffHeader = document.getElementById( + 'view-modes-presentation-mode-off-header' + ); + if (presentationModeOffHeader) + presentationModeOffHeader.title = 'Activate Presentation Mode'; + + const presentationModeOffHeaderMobile = document.getElementById( + 'view-modes-presentation-mode-off-header-mobile' + ); + if (presentationModeOffHeaderMobile) + presentationModeOffHeaderMobile.title = 'Activate Presentation Mode'; + + sessionStorage.removeItem('viewModesPresentationMode'); } export function deactivateAllModes() { - deactivateZenMode(); - deactivatePresentationMode(); + deactivateZenMode(); + deactivatePresentationMode(); } diff --git a/packages/starlight-view-modes/libs/ZenModePositionStateMachine.js b/packages/starlight-view-modes/libs/ZenModePositionStateMachine.js index fb78cca..f13aca3 100644 --- a/packages/starlight-view-modes/libs/ZenModePositionStateMachine.js +++ b/packages/starlight-view-modes/libs/ZenModePositionStateMachine.js @@ -1,103 +1,106 @@ export class ZenModePositionStateMachine { - constructor(config, zenModeOff) { - this.config = config; - this.zenModeOff = zenModeOff; - } + constructor(config, zenModeOff) { + this.config = config; + this.zenModeOff = zenModeOff; + } - updatePosition() { - if (this.config.zenModeShowHeader === true && this.config.zenModeShowSidebar === false) { - // Wenn Header angezeigt wird, soll der Button immer unten fixiert sein - this.setBottomPosition(); - } else if ( - this.config.zenModeShowHeader === false && - this.config.zenModeShowSidebar === true - ) { - // Wenn Sidebar angezeigt wird, soll der Button immer rechts fixiert sein - this.setRightPosition(); - } else if ( - this.config.zenModeShowHeader === true && - this.config.zenModeShowSidebar === true - ) { - // Wenn Header angezeigt wird, soll der Button immer unten fixiert sein - // Wenn Sidebar angezeigt wird, soll der Button immer rechts fixiert sein - this.setBottomRightPosition(); - } else { - // Ansonsten normale Positionierungslogik basierend auf der SchaltflÀche - this.setDynamicPosition(); - } + updatePosition() { + if ( + this.config.zenModeShowHeader === true && + this.config.zenModeShowSidebar === false + ) { + // Wenn Header angezeigt wird, soll der Button immer unten fixiert sein + this.setBottomPosition(); + } else if ( + this.config.zenModeShowHeader === false && + this.config.zenModeShowSidebar === true + ) { + // Wenn Sidebar angezeigt wird, soll der Button immer rechts fixiert sein + this.setRightPosition(); + } else if ( + this.config.zenModeShowHeader === true && + this.config.zenModeShowSidebar === true + ) { + // Wenn Header angezeigt wird, soll der Button immer unten fixiert sein + // Wenn Sidebar angezeigt wird, soll der Button immer rechts fixiert sein + this.setBottomRightPosition(); + } else { + // Ansonsten normale Positionierungslogik basierend auf der SchaltflÀche + this.setDynamicPosition(); + } - if (!window.matchMedia("(min-width: 50rem)").matches) { - this.setBottomPosition(); - } + if (!window.matchMedia('(min-width: 50rem)').matches) { + this.setBottomPosition(); } + } - setDynamicPosition() { - if ( - this.config.zenModeCloseButtonPosition === "top-right" || - this.config.zenModeCloseButtonPosition === "bottom-right" - ) { - this.zenModeOff?.style.setProperty("right", "1rem"); - this.zenModeOff?.style.removeProperty("left"); - } else { - this.zenModeOff?.style.setProperty("left", "1rem"); - this.zenModeOff?.style.removeProperty("right"); - } + setDynamicPosition() { + if ( + this.config.zenModeCloseButtonPosition === 'top-right' || + this.config.zenModeCloseButtonPosition === 'bottom-right' + ) { + this.zenModeOff?.style.setProperty('right', '1rem'); + this.zenModeOff?.style.removeProperty('left'); + } else { + this.zenModeOff?.style.setProperty('left', '1rem'); + this.zenModeOff?.style.removeProperty('right'); + } - if ( - this.config.zenModeCloseButtonPosition === "top-right" || - this.config.zenModeCloseButtonPosition === "top-left" - ) { - this.zenModeOff?.style.setProperty("top", "1rem"); - this.zenModeOff?.style.removeProperty("bottom"); - } else { - this.zenModeOff?.style.setProperty("bottom", "1rem"); - this.zenModeOff?.style.removeProperty("top"); - } + if ( + this.config.zenModeCloseButtonPosition === 'top-right' || + this.config.zenModeCloseButtonPosition === 'top-left' + ) { + this.zenModeOff?.style.setProperty('top', '1rem'); + this.zenModeOff?.style.removeProperty('bottom'); + } else { + this.zenModeOff?.style.setProperty('bottom', '1rem'); + this.zenModeOff?.style.removeProperty('top'); } + } - setBottomPosition() { - // Hier wird der Button immer unten fixiert, unabhÀngig von der top/bottom-Einstellung - this.zenModeOff?.style.setProperty("bottom", "1rem"); - this.zenModeOff?.style.removeProperty("top"); // Entferne die top-Position, falls vorhanden + setBottomPosition() { + // Hier wird der Button immer unten fixiert, unabhÀngig von der top/bottom-Einstellung + this.zenModeOff?.style.setProperty('bottom', '1rem'); + this.zenModeOff?.style.removeProperty('top'); // Entferne die top-Position, falls vorhanden - // Position links oder rechts wird weiterhin basierend auf der config gesetzt - if ( - this.config.zenModeCloseButtonPosition === "top-right" || - this.config.zenModeCloseButtonPosition === "bottom-right" - ) { - this.zenModeOff?.style.setProperty("right", "1rem"); - this.zenModeOff?.style.removeProperty("left"); // Entferne die left-Position, falls vorhanden - } else { - this.zenModeOff?.style.setProperty("left", "1rem"); - this.zenModeOff?.style.removeProperty("right"); // Entferne die right-Position, falls vorhanden - } + // Position links oder rechts wird weiterhin basierend auf der config gesetzt + if ( + this.config.zenModeCloseButtonPosition === 'top-right' || + this.config.zenModeCloseButtonPosition === 'bottom-right' + ) { + this.zenModeOff?.style.setProperty('right', '1rem'); + this.zenModeOff?.style.removeProperty('left'); // Entferne die left-Position, falls vorhanden + } else { + this.zenModeOff?.style.setProperty('left', '1rem'); + this.zenModeOff?.style.removeProperty('right'); // Entferne die right-Position, falls vorhanden } + } - setRightPosition() { - // Hier wird der Button immer rechts fixiert, unabhÀngig von der left/right-Einstellung - this.zenModeOff?.style.setProperty("right", "1rem"); - this.zenModeOff?.style.removeProperty("left"); // Entferne die left-Position, falls vorhanden + setRightPosition() { + // Hier wird der Button immer rechts fixiert, unabhÀngig von der left/right-Einstellung + this.zenModeOff?.style.setProperty('right', '1rem'); + this.zenModeOff?.style.removeProperty('left'); // Entferne die left-Position, falls vorhanden - // Position oben oder unten wird weiterhin basierend auf der config gesetzt - if ( - this.config.zenModeCloseButtonPosition === "top-right" || - this.config.zenModeCloseButtonPosition === "top-left" - ) { - this.zenModeOff?.style.setProperty("top", "1rem"); - this.zenModeOff?.style.removeProperty("bottom"); // Entferne die bottom-Position, falls vorhanden - } else { - this.zenModeOff?.style.setProperty("bottom", "1rem"); - this.zenModeOff?.style.removeProperty("top"); // Entferne die top-Position, falls vorhanden - } + // Position oben oder unten wird weiterhin basierend auf der config gesetzt + if ( + this.config.zenModeCloseButtonPosition === 'top-right' || + this.config.zenModeCloseButtonPosition === 'top-left' + ) { + this.zenModeOff?.style.setProperty('top', '1rem'); + this.zenModeOff?.style.removeProperty('bottom'); // Entferne die bottom-Position, falls vorhanden + } else { + this.zenModeOff?.style.setProperty('bottom', '1rem'); + this.zenModeOff?.style.removeProperty('top'); // Entferne die top-Position, falls vorhanden } + } - setBottomRightPosition() { - // Hier wird der Button immer unten fixiert, unabhÀngig von der top/bottom-Einstellung - this.zenModeOff?.style.setProperty("bottom", "1rem"); - this.zenModeOff?.style.removeProperty("top"); // Entferne die top-Position, falls vorhanden + setBottomRightPosition() { + // Hier wird der Button immer unten fixiert, unabhÀngig von der top/bottom-Einstellung + this.zenModeOff?.style.setProperty('bottom', '1rem'); + this.zenModeOff?.style.removeProperty('top'); // Entferne die top-Position, falls vorhanden - // Hier wird der Button immer rechts fixiert, unabhÀngig von der left/right-Einstellung - this.zenModeOff?.style.setProperty("right", "1rem"); - this.zenModeOff?.style.removeProperty("left"); // Entferne die left-Position, falls vorhanden - } + // Hier wird der Button immer rechts fixiert, unabhÀngig von der left/right-Einstellung + this.zenModeOff?.style.setProperty('right', '1rem'); + this.zenModeOff?.style.removeProperty('left'); // Entferne die left-Position, falls vorhanden + } } diff --git a/packages/starlight-view-modes/libs/integration.ts b/packages/starlight-view-modes/libs/integration.ts index 5eada6a..8cd7d15 100644 --- a/packages/starlight-view-modes/libs/integration.ts +++ b/packages/starlight-view-modes/libs/integration.ts @@ -1,19 +1,21 @@ -import type { AstroIntegration } from "astro"; +import type { AstroIntegration } from 'astro'; -import type { StarlightViewModesConfig } from ".."; -import { vitePluginStarlightViewModesConfig } from "./vite"; +import type { StarlightViewModesConfig } from '..'; +import { vitePluginStarlightViewModesConfig } from './vite'; -export function starlightViewModesIntegration(config: StarlightViewModesConfig): AstroIntegration { - return { - name: "starlight-view-modes-integration", - hooks: { - "astro:config:setup": ({ updateConfig }) => { - updateConfig({ - vite: { - plugins: [vitePluginStarlightViewModesConfig(config)], - }, - }); - }, - }, - }; +export function starlightViewModesIntegration( + config: StarlightViewModesConfig +): AstroIntegration { + return { + name: 'starlight-view-modes-integration', + hooks: { + 'astro:config:setup': ({ updateConfig }) => { + updateConfig({ + vite: { + plugins: [vitePluginStarlightViewModesConfig(config)], + }, + }); + }, + }, + }; } diff --git a/packages/starlight-view-modes/libs/vite.ts b/packages/starlight-view-modes/libs/vite.ts index 306cf46..5bc964f 100644 --- a/packages/starlight-view-modes/libs/vite.ts +++ b/packages/starlight-view-modes/libs/vite.ts @@ -1,21 +1,23 @@ -import type { ViteUserConfig } from "astro"; +import type { ViteUserConfig } from 'astro'; -import type { StarlightViewModesConfig } from ".."; +import type { StarlightViewModesConfig } from '..'; -export function vitePluginStarlightViewModesConfig(config: StarlightViewModesConfig): VitePlugin { - const moduleId = "virtual:starlight-view-modes-config"; - const resolvedModuleId = `\0${moduleId}`; - const moduleContent = `export default ${JSON.stringify(config)}`; +export function vitePluginStarlightViewModesConfig( + config: StarlightViewModesConfig +): VitePlugin { + const moduleId = 'virtual:starlight-view-modes-config'; + const resolvedModuleId = `\0${moduleId}`; + const moduleContent = `export default ${JSON.stringify(config)}`; - return { - name: "vite-plugin-starlight-view-modes-config", - load(id) { - return id === resolvedModuleId ? moduleContent : undefined; - }, - resolveId(id) { - return id === moduleId ? resolvedModuleId : undefined; - }, - }; + return { + name: 'vite-plugin-starlight-view-modes-config', + load(id) { + return id === resolvedModuleId ? moduleContent : undefined; + }, + resolveId(id) { + return id === moduleId ? resolvedModuleId : undefined; + }, + }; } -type VitePlugin = NonNullable[number]; +type VitePlugin = NonNullable[number]; diff --git a/packages/starlight-view-modes/overrides/PageSidebar.astro b/packages/starlight-view-modes/overrides/PageSidebar.astro index 110d0d7..3eb52bf 100644 --- a/packages/starlight-view-modes/overrides/PageSidebar.astro +++ b/packages/starlight-view-modes/overrides/PageSidebar.astro @@ -1,12 +1,15 @@ --- import type { Props } from '../props'; - import MobileTableOfContents from 'virtual:starlight/components/MobileTableOfContents'; import TableOfContents from 'virtual:starlight/components/TableOfContents'; import ViewModes from '../components/ViewModes.astro'; import DeactivationButtons from '../components/DeactivationButtons.astro'; import HeaderButtons from '../components/HeaderButtons.astro'; import MobileViewModes from '../components/MobileViewModes.astro'; +import SidebarToggle from '../components/SidebarToggle.astro'; +import { Icon } from 'astro-icon/components' + + --- { @@ -17,8 +20,12 @@ import MobileViewModes from '../components/MobileViewModes.astro';