Merge pull request #1727 from slumbering/docusaurus-bump-up-to-2.0.0-beta.17
Bump up docusaurus to the latest version
This commit is contained in:
Jffarge
GitHub
commit
17c45ea36c
@ -1,5 +1,5 @@
|
||||
const path = require("path");
|
||||
const remarkCodeImport = require('remark-code-import');
|
||||
const remarkCodeImport = require("remark-code-import");
|
||||
|
||||
/** @type {import('@docusaurus/types').DocusaurusConfig} */
|
||||
module.exports = {
|
||||
@ -51,24 +51,18 @@ module.exports = {
|
||||
className: "button",
|
||||
},
|
||||
],
|
||||
hideOnScroll: true
|
||||
hideOnScroll: true,
|
||||
},
|
||||
algolia: {
|
||||
apiKey: "559dcddb4378b889baa48352394616ec",
|
||||
indexName: "Dagger_docs",
|
||||
appId: 'XSSC1LRN4S',
|
||||
appId: "XSSC1LRN4S",
|
||||
},
|
||||
hotjar: {
|
||||
siteId: "2541514",
|
||||
},
|
||||
colorMode: {
|
||||
// "light" | "dark"
|
||||
defaultMode: "light",
|
||||
|
||||
switchConfig: {
|
||||
darkIcon: "img/Icon_Night-mode.svg",
|
||||
lightIcon: "img/Icon_Day-mode.svg",
|
||||
},
|
||||
},
|
||||
},
|
||||
presets: [
|
||||
@ -76,6 +70,7 @@ module.exports = {
|
||||
"@docusaurus/preset-classic",
|
||||
{
|
||||
docs: {
|
||||
breadcrumbs: false,
|
||||
path: "../docs",
|
||||
sidebarPath: require.resolve("./sidebars.js"),
|
||||
editUrl: "https://github.com/dagger/dagger/edit/main/website",
|
||||
|
||||
@ -18,8 +18,8 @@
|
||||
"ci": "start-server-and-test 'yarn start-server' '3000|3001' 'yarn run cypress run'"
|
||||
},
|
||||
"dependencies": {
|
||||
"@docusaurus/core": "^2.0.0-beta.15",
|
||||
"@docusaurus/preset-classic": "^2.0.0-beta.15",
|
||||
"@docusaurus/core": "^2.0.0-beta.17",
|
||||
"@docusaurus/preset-classic": "^2.0.0-beta.17",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@svgr/webpack": "^6.2.1",
|
||||
"amplitude-js": "^8.17.0",
|
||||
|
||||
@ -268,9 +268,6 @@ h1[class^="h1Heading"] {
|
||||
.navbar__item {
|
||||
margin: 0 0.75rem;
|
||||
}
|
||||
.navbar__items--right > :last-child {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.react-toggle {
|
||||
margin: 0 0.75rem;
|
||||
|
||||
17
website/src/theme/IconDarkMode/index.js
Normal file
17
website/src/theme/IconDarkMode/index.js
Normal file
@ -0,0 +1,17 @@
|
||||
/**
|
||||
* 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 React from "react";
|
||||
export default function IconDarkMode(props) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" width={24} height={24} {...props}>
|
||||
<path
|
||||
fill="var(--ifm-color-primary-light)"
|
||||
d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
17
website/src/theme/IconLightMode/index.js
Normal file
17
website/src/theme/IconLightMode/index.js
Normal file
@ -0,0 +1,17 @@
|
||||
/**
|
||||
* 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 React from "react";
|
||||
export default function IconLightMode(props) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" width={24} height={24} {...props}>
|
||||
<path
|
||||
fill="var(--ifm-color-primary-light)"
|
||||
d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@ -1,291 +0,0 @@
|
||||
/**
|
||||
* 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 React, {useCallback, useState, useEffect} from 'react';
|
||||
import clsx from 'clsx';
|
||||
import Translate from '@docusaurus/Translate';
|
||||
import SearchBar from '@theme/SearchBar';
|
||||
import Toggle from '@theme/Toggle';
|
||||
import {
|
||||
useThemeConfig,
|
||||
useMobileSecondaryMenuRenderer,
|
||||
usePrevious,
|
||||
useHistoryPopHandler,
|
||||
useHideableNavbar,
|
||||
useLockBodyScroll,
|
||||
useWindowSize,
|
||||
useColorMode,
|
||||
} from '@docusaurus/theme-common';
|
||||
import {useActivePlugin} from '@docusaurus/plugin-content-docs/client';
|
||||
import NavbarItem from '@theme/NavbarItem';
|
||||
import Logo from '@theme/Logo';
|
||||
import IconMenu from '@theme/IconMenu';
|
||||
import IconClose from '@theme/IconClose';
|
||||
import styles from './styles.module.css'; // retrocompatible with v1
|
||||
|
||||
const DefaultNavItemPosition = 'right';
|
||||
|
||||
function useNavbarItems() {
|
||||
// TODO temporary casting until ThemeConfig type is improved
|
||||
return useThemeConfig().navbar.items;
|
||||
} // If split links by left/right
|
||||
// if position is unspecified, fallback to right (as v1)
|
||||
|
||||
function splitNavItemsByPosition(items) {
|
||||
const leftItems = items.filter(
|
||||
(item) => (item.position ?? DefaultNavItemPosition) === 'left',
|
||||
);
|
||||
const rightItems = items.filter(
|
||||
(item) => (item.position ?? DefaultNavItemPosition) === 'right',
|
||||
);
|
||||
return {
|
||||
leftItems,
|
||||
rightItems,
|
||||
};
|
||||
}
|
||||
|
||||
function useMobileSidebar() {
|
||||
const windowSize = useWindowSize(); // Mobile sidebar not visible on hydration: can avoid SSR rendering
|
||||
|
||||
const shouldRender = windowSize === 'mobile'; // || windowSize === 'ssr';
|
||||
|
||||
const [shown, setShown] = useState(false); // Close mobile sidebar on navigation pop
|
||||
// Most likely firing when using the Android back button (but not only)
|
||||
|
||||
useHistoryPopHandler(() => {
|
||||
if (shown) {
|
||||
setShown(false); // Should we prevent the navigation here?
|
||||
// See https://github.com/facebook/docusaurus/pull/5462#issuecomment-911699846
|
||||
|
||||
return false; // prevent pop navigation
|
||||
}
|
||||
|
||||
return undefined;
|
||||
});
|
||||
const toggle = useCallback(() => {
|
||||
setShown((s) => !s);
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
if (windowSize === 'desktop') {
|
||||
setShown(false);
|
||||
}
|
||||
}, [windowSize]);
|
||||
return {
|
||||
shouldRender,
|
||||
toggle,
|
||||
shown,
|
||||
};
|
||||
}
|
||||
|
||||
function useColorModeToggle() {
|
||||
const {
|
||||
colorMode: {disableSwitch},
|
||||
} = useThemeConfig();
|
||||
const {isDarkTheme, setLightTheme, setDarkTheme} = useColorMode();
|
||||
const toggle = useCallback(
|
||||
(e) => (e.target.checked ? setDarkTheme() : setLightTheme()),
|
||||
[setLightTheme, setDarkTheme],
|
||||
);
|
||||
return {
|
||||
isDarkTheme,
|
||||
toggle,
|
||||
disabled: disableSwitch,
|
||||
};
|
||||
}
|
||||
|
||||
function useSecondaryMenu({sidebarShown, toggleSidebar}) {
|
||||
const content = useMobileSecondaryMenuRenderer()?.({
|
||||
toggleSidebar,
|
||||
});
|
||||
const previousContent = usePrevious(content);
|
||||
const [shown, setShown] = useState(
|
||||
() =>
|
||||
// /!\ content is set with useEffect,
|
||||
// so it's not available on mount anyway
|
||||
// "return !!content" => always returns false
|
||||
false,
|
||||
); // When content is become available for the first time (set in useEffect)
|
||||
// we set this content to be shown!
|
||||
|
||||
useEffect(() => {
|
||||
const contentBecameAvailable = content && !previousContent;
|
||||
|
||||
if (contentBecameAvailable) {
|
||||
setShown(true);
|
||||
}
|
||||
}, [content, previousContent]);
|
||||
const hasContent = !!content; // On sidebar close, secondary menu is set to be shown on next re-opening
|
||||
// (if any secondary menu content available)
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasContent) {
|
||||
setShown(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!sidebarShown) {
|
||||
setShown(true);
|
||||
}
|
||||
}, [sidebarShown, hasContent]);
|
||||
const hide = useCallback(() => {
|
||||
setShown(false);
|
||||
}, []);
|
||||
return {
|
||||
shown,
|
||||
hide,
|
||||
content,
|
||||
};
|
||||
}
|
||||
|
||||
function NavbarMobileSidebar({sidebarShown, toggleSidebar}) {
|
||||
useLockBodyScroll(sidebarShown);
|
||||
const items = useNavbarItems();
|
||||
const colorModeToggle = useColorModeToggle();
|
||||
const secondaryMenu = useSecondaryMenu({
|
||||
sidebarShown,
|
||||
toggleSidebar,
|
||||
});
|
||||
return (
|
||||
<div className="navbar-sidebar">
|
||||
<div className="navbar-sidebar__brand">
|
||||
<Logo
|
||||
className="navbar__brand"
|
||||
imageClassName="navbar__logo"
|
||||
titleClassName="navbar__title"
|
||||
/>
|
||||
{!colorModeToggle.disabled && (
|
||||
<Toggle
|
||||
className={styles.navbarSidebarToggle}
|
||||
checked={colorModeToggle.isDarkTheme}
|
||||
onChange={colorModeToggle.toggle}
|
||||
/>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="clean-btn navbar-sidebar__close"
|
||||
onClick={toggleSidebar}>
|
||||
<IconClose
|
||||
color="var(--ifm-color-emphasis-600)"
|
||||
className={styles.navbarSidebarCloseSvg}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={clsx('navbar-sidebar__items', {
|
||||
'navbar-sidebar__items--show-secondary': secondaryMenu.shown,
|
||||
})}>
|
||||
<div className="navbar-sidebar__item menu">
|
||||
<ul className="menu__list">
|
||||
{items.map((item, i) => (
|
||||
<NavbarItem mobile {...item} onClick={toggleSidebar} key={i} />
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="navbar-sidebar__item menu">
|
||||
{items.length > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
className="clean-btn navbar-sidebar__back"
|
||||
onClick={secondaryMenu.hide}>
|
||||
<Translate
|
||||
id="theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel"
|
||||
description="The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)">
|
||||
← Back to main menu
|
||||
</Translate>
|
||||
</button>
|
||||
)}
|
||||
{secondaryMenu.content}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Navbar() {
|
||||
const {
|
||||
navbar: {hideOnScroll, style},
|
||||
} = useThemeConfig();
|
||||
const mobileSidebar = useMobileSidebar();
|
||||
const colorModeToggle = useColorModeToggle();
|
||||
const activeDocPlugin = useActivePlugin();
|
||||
const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll);
|
||||
const items = useNavbarItems();
|
||||
const hasSearchNavbarItem = items.some((item) => item.type === 'search');
|
||||
const {leftItems, rightItems} = splitNavItemsByPosition(items);
|
||||
return (
|
||||
<nav
|
||||
ref={navbarRef}
|
||||
className={clsx('navbar', 'navbar--fixed-top', {
|
||||
'navbar--dark': style === 'dark',
|
||||
'navbar--primary': style === 'primary',
|
||||
'navbar-sidebar--show': mobileSidebar.shown,
|
||||
[styles.navbarHideable]: hideOnScroll,
|
||||
[styles.navbarHidden]: hideOnScroll && !isNavbarVisible,
|
||||
})}>
|
||||
<div className="navbar__inner">
|
||||
<div className="navbar__items">
|
||||
{(items?.length > 0 || activeDocPlugin) && (
|
||||
<button
|
||||
aria-label="Navigation bar toggle"
|
||||
className="navbar__toggle clean-btn"
|
||||
type="button"
|
||||
tabIndex={0}
|
||||
onClick={mobileSidebar.toggle}
|
||||
onKeyDown={mobileSidebar.toggle}>
|
||||
<IconMenu />
|
||||
</button>
|
||||
)}
|
||||
<Logo
|
||||
className="navbar__brand"
|
||||
imageClassName="navbar__logo"
|
||||
titleClassName="navbar__title"
|
||||
/>
|
||||
{leftItems.map((item, i) => (
|
||||
<NavbarItem {...item} key={i} />
|
||||
))}
|
||||
</div>
|
||||
<div className="navbar__items navbar__items--right">
|
||||
{!hasSearchNavbarItem && <SearchBar />}
|
||||
{rightItems.map((item, i) => {
|
||||
if(item.type === "search") {
|
||||
return (
|
||||
<React.Fragment key={i}>
|
||||
<NavbarItem {...item} />
|
||||
{!colorModeToggle.disabled && (
|
||||
<Toggle
|
||||
className={styles.toggle}
|
||||
checked={colorModeToggle.isDarkTheme}
|
||||
onChange={colorModeToggle.toggle}
|
||||
/>
|
||||
)}
|
||||
</React.Fragment>
|
||||
)
|
||||
} else {
|
||||
return <NavbarItem {...item} key={i} />
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
role="presentation"
|
||||
className="navbar-sidebar__backdrop"
|
||||
onClick={mobileSidebar.toggle}
|
||||
/>
|
||||
|
||||
{mobileSidebar.shouldRender && (
|
||||
<NavbarMobileSidebar
|
||||
sidebarShown={mobileSidebar.shown}
|
||||
toggleSidebar={mobileSidebar.toggle}
|
||||
/>
|
||||
)}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export default Navbar;
|
||||
@ -1,27 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
/*
|
||||
Hide toggle in small viewports
|
||||
*/
|
||||
@media (max-width: 996px) {
|
||||
.toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbarHideable {
|
||||
transition: transform var(--ifm-transition-fast) ease;
|
||||
}
|
||||
|
||||
.navbarHidden {
|
||||
transform: translate3d(0, calc(-100% - 2px), 0);
|
||||
}
|
||||
|
||||
.navbarSidebarToggle {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
<svg class="mode" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 21"><defs><style>.cls-2{fill:#131226}</style></defs><path d="M8.09 7.93a2.824 2.824 0 012.61 2.54 4.082 4.082 0 01-.52 1.86c-.47.71-.93.54-1.63.52-.85-.02-1.65-.04-2.17-.83a3.249 3.249 0 01-.46-1.51c.05-.76-.02-1.67.69-2.15a2.879 2.879 0 011.48-.43z" fill="#fcc016"/><path class="cls-2" d="M14.85 7.64c.63-.58 1.56.35.95.93a5.671 5.671 0 01-1.97.97c-.81.25-1.17-1.02-.35-1.29.25-.09.49-.2.73-.31.15-.06.32-.15.49-.23a1 1 0 01.19-.11zM15.43 13.07c.78.35.1 1.49-.66 1.15-.5-.22-.99-.71-1.41-.88-.78-.32-.44-1.6.35-1.29.63.25 1.11.75 1.72 1.02zM11.29 17.43a7.45 7.45 0 01-.87-1.85c-.29-.82 1-1.15 1.29-.36a6.523 6.523 0 00.73 1.53c.49.71-.66 1.37-1.15.68zM12.88 4.67c-.29.54-.66 1.03-.96 1.58a.673.673 0 01-1.16-.68c.31-.55.68-1.04.97-1.58.41-.76 1.56-.09 1.15.68zM7.05 5.08a6.818 6.818 0 01-.41-2.23c-.04-.86 1.29-.85 1.32 0a6.263 6.263 0 00.36 1.87c.27.81-1 1.15-1.27.36zM6.54 15.43c.32-.78 1.61-.44 1.29.35a16.9 16.9 0 00-.72 2.07.669.669 0 01-1.29-.35 16.332 16.332 0 01.72-2.07zM8.57 14.34a3.979 3.979 0 01-3.14-1.1 4.554 4.554 0 01-1-2.68 4.53 4.53 0 01.07-1.22 3.541 3.541 0 01.87-2.05 3.935 3.935 0 012.66-.91c2.09.23 4.24 1.82 4.2 4.09a5.512 5.512 0 01-1.09 3.13 2.693 2.693 0 01-2.57.74zm-.48-6.41a2.879 2.879 0 00-1.48.43c-.71.48-.64 1.39-.69 2.15a3.249 3.249 0 00.46 1.51c.52.79 1.32.81 2.17.83.7.02 1.16.19 1.63-.52a4.082 4.082 0 00.52-1.86 2.824 2.824 0 00-2.61-2.54zM3.96 7.21a9.267 9.267 0 01-1.72-1.22c-.66-.51 0-1.66.68-1.15a8.946 8.946 0 001.72 1.22c.78.34.1 1.48-.68 1.15zM2.48 13.78a4.587 4.587 0 01.71-.54c.77-.36 1.45.8.67 1.13a4.394 4.394 0 00-1.35 1.19c-.54.66-1.47-.27-.93-.93a6.568 6.568 0 01.9-.85zM2.67 9.35c.85-.08.85 1.24 0 1.33a10.022 10.022 0 01-2.19-.09.666.666 0 01-.46-.81.687.687 0 01.81-.48 6.656 6.656 0 001.84.05z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB |
@ -1 +0,0 @@
|
||||
<svg class="mode" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 21"><path d="M5.85 12.4a4.044 4.044 0 002.92 2.59 6 6 0 001.68.11 6.481 6.481 0 01-3.31.63c-1.91-.14-4.05-1.19-4.42-3.26a6.213 6.213 0 011.71-5.41 4.414 4.414 0 013.55-1.2 4.928 4.928 0 00-1.65 1.97 6.471 6.471 0 00-.48 4.57z" fill="#fcfad8"/><path d="M10.45 15.1a6 6 0 01-1.68-.11 4.044 4.044 0 01-2.92-2.59 6.471 6.471 0 01.48-4.57 4.928 4.928 0 011.65-1.97 4.414 4.414 0 00-3.55 1.2 6.213 6.213 0 00-1.71 5.41c.37 2.07 2.51 3.12 4.42 3.26a6.481 6.481 0 003.31-.63zm.35-9.07a.685.685 0 01-.25.42.724.724 0 01-.52.2c-2.13.6-3.06 2.98-2.69 5.05.46 2.66 4.05 1.72 5.69 1.11.89-.34 1.32.95.63 1.44a.757.757 0 01-.22.67 8.26 8.26 0 01-6.53 2.41 6.145 6.145 0 01-5.74-4.43 7.8 7.8 0 012.3-7.15 5.76 5.76 0 017-.64.817.817 0 01.33.92z" fill="#131226"/></svg>
|
||||
|
Before Width: | Height: | Size: 843 B |
@ -1,88 +0,0 @@
|
||||
/**
|
||||
* 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 React, {useState, useRef, memo} from 'react';
|
||||
import {useThemeConfig} from '@docusaurus/theme-common';
|
||||
import useIsBrowser from '@docusaurus/useIsBrowser';
|
||||
import clsx from 'clsx';
|
||||
import './styles.css';
|
||||
import styles from './styles.module.css';
|
||||
import DarkIcon from "./icon_night.svg"
|
||||
import LightIcon from "./icon_day.svg"
|
||||
|
||||
const Dark = ({icon, style}) => (
|
||||
<span className={clsx(styles.toggle, styles.dark)} style={style}>
|
||||
<DarkIcon />
|
||||
</span>
|
||||
);
|
||||
|
||||
const Light = ({icon, style}) => (
|
||||
<span className={clsx(styles.toggle, styles.light)} style={style}>
|
||||
<LightIcon />
|
||||
</span>
|
||||
); // Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
|
||||
|
||||
const Toggle = memo(
|
||||
({className, icons, checked: defaultChecked, disabled, onChange}) => {
|
||||
const [checked, setChecked] = useState(defaultChecked);
|
||||
const [focused, setFocused] = useState(false);
|
||||
const inputRef = useRef(null);
|
||||
return (
|
||||
<div
|
||||
className={clsx('react-toggle', className, {
|
||||
'react-toggle--checked': checked,
|
||||
'react-toggle--focus': focused,
|
||||
'react-toggle--disabled': disabled,
|
||||
})}>
|
||||
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
onClick={() => inputRef.current?.click()}>
|
||||
<div className="react-toggle-track-check">{icons.checked}</div>
|
||||
<div className="react-toggle-track-x">{icons.unchecked}</div>
|
||||
<div className="react-toggle-thumb" />
|
||||
</div>
|
||||
|
||||
<input
|
||||
ref={inputRef}
|
||||
checked={checked}
|
||||
type="checkbox"
|
||||
className="react-toggle-screenreader-only"
|
||||
aria-label="Switch between dark and light mode"
|
||||
onChange={onChange}
|
||||
onClick={() => setChecked(!checked)}
|
||||
onFocus={() => setFocused(true)}
|
||||
onBlur={() => setFocused(false)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
inputRef.current?.click();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
export default function (props) {
|
||||
const {
|
||||
colorMode: {
|
||||
switchConfig: {darkIcon, darkIconStyle, lightIcon, lightIconStyle},
|
||||
},
|
||||
} = useThemeConfig();
|
||||
const isBrowser = useIsBrowser();
|
||||
return (
|
||||
<Toggle
|
||||
disabled={!isBrowser}
|
||||
icons={{
|
||||
checked: <Dark icon={darkIcon} style={darkIconStyle} />,
|
||||
unchecked: <Light icon={lightIcon} style={lightIconStyle} />,
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -1,100 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Styles for React Toggle
|
||||
* copied over because we want to allow user to swizzle it and modify the css
|
||||
* and also to make sure its compatible with our dark mode
|
||||
* https://github.com/aaronshaf/react-toggle/blob/master/style.css
|
||||
*/
|
||||
.react-toggle {
|
||||
touch-action: pan-x;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.react-toggle-screenreader-only {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.react-toggle--disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.react-toggle-track {
|
||||
width: 55px;
|
||||
height: 24px;
|
||||
border-radius: 30px;
|
||||
background-color: #40b8bb;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.react-toggle-track-check {
|
||||
position: absolute;
|
||||
width: 21px;
|
||||
height: 16px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
margin: auto 0;
|
||||
left: 6px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .react-toggle .react-toggle-track-check,
|
||||
.react-toggle--checked .react-toggle-track-check {
|
||||
opacity: 1;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle-track-x {
|
||||
position: absolute;
|
||||
width: 21px;
|
||||
height: 16px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
margin: auto 0;
|
||||
right: 6px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .react-toggle .react-toggle-track-x,
|
||||
.react-toggle--checked .react-toggle-track-x {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.react-toggle-thumb {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 3px solid var(--ifm-color-primary-dark);
|
||||
border-radius: 50%;
|
||||
background-color: #fafafa;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .react-toggle .react-toggle-thumb,
|
||||
.react-toggle--checked .react-toggle-thumb {
|
||||
left: 31px;
|
||||
}
|
||||
|
||||
.icon_day_svg__mode,
|
||||
.icon_night_svg__mode {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
.toggle {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 16px;
|
||||
justify-content: center;
|
||||
width: 21px;
|
||||
}
|
||||
.toggle::before {
|
||||
position: absolute;
|
||||
}
|
||||
1765
website/yarn.lock
1765
website/yarn.lock
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user