mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-24 22:46:57 +02:00
refactor(v2): toggle data-theme with vanilla js instead of react helmet (#2127)
* refactor(v2): toggle data-theme with vanilla js instead of react helmet * use document documentElement
This commit is contained in:
Endi
Yangshun Tay
parent
ee00ecf569
commit
33622c5347
4 changed files with 114 additions and 116 deletions
|
|
@ -12,7 +12,7 @@ const path = require('path');
|
|||
const storageKey = 'theme';
|
||||
const noFlash = `(function() {
|
||||
function setDataThemeAttribute(theme) {
|
||||
document.querySelector('html').setAttribute('data-theme', theme);
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
}
|
||||
|
||||
function getPreferredTheme() {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
|
||||
import React, {useCallback, useState} from 'react';
|
||||
import Link from '@docusaurus/Link';
|
||||
import Head from '@docusaurus/Head';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
|
||||
|
|
@ -68,122 +67,116 @@ function Navbar() {
|
|||
|
||||
const logoUrl = useBaseUrl(logo.src);
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
{/* TODO: Do not assume that it is in english language */}
|
||||
<html lang="en" data-theme={theme} />
|
||||
</Head>
|
||||
<nav
|
||||
ref={navbarRef}
|
||||
className={classnames('navbar', 'navbar--light', 'navbar--fixed-top', {
|
||||
'navbar-sidebar--show': sidebarShown,
|
||||
[styles.navbarHideable]: hideOnScroll,
|
||||
[styles.navbarHidden]: !isNavbarVisible,
|
||||
})}>
|
||||
<div className="navbar__inner">
|
||||
<div className="navbar__items">
|
||||
<div
|
||||
aria-label="Navigation bar toggle"
|
||||
className="navbar__toggle"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={showSidebar}
|
||||
onKeyDown={showSidebar}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="30"
|
||||
height="30"
|
||||
viewBox="0 0 30 30"
|
||||
role="img"
|
||||
focusable="false">
|
||||
<title>Menu</title>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeMiterlimit="10"
|
||||
strokeWidth="2"
|
||||
d="M4 7h22M4 15h22M4 23h22"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<Link className="navbar__brand" to={baseUrl}>
|
||||
{logo != null && (
|
||||
<img className="navbar__logo" src={logoUrl} alt={logo.alt} />
|
||||
)}
|
||||
{title != null && (
|
||||
<strong
|
||||
className={isSearchBarExpanded ? styles.hideLogoText : ''}>
|
||||
{title}
|
||||
</strong>
|
||||
)}
|
||||
</Link>
|
||||
{links
|
||||
.filter(linkItem => linkItem.position !== 'right')
|
||||
.map((linkItem, i) => (
|
||||
<NavLink {...linkItem} key={i} />
|
||||
))}
|
||||
</div>
|
||||
<div className="navbar__items navbar__items--right">
|
||||
{links
|
||||
.filter(linkItem => linkItem.position === 'right')
|
||||
.map((linkItem, i) => (
|
||||
<NavLink {...linkItem} key={i} />
|
||||
))}
|
||||
{!disableDarkMode && (
|
||||
<Toggle
|
||||
className={styles.displayOnlyInLargeViewport}
|
||||
aria-label="Dark mode toggle"
|
||||
checked={theme === 'dark'}
|
||||
onChange={onToggleChange}
|
||||
<nav
|
||||
ref={navbarRef}
|
||||
className={classnames('navbar', 'navbar--light', 'navbar--fixed-top', {
|
||||
'navbar-sidebar--show': sidebarShown,
|
||||
[styles.navbarHideable]: hideOnScroll,
|
||||
[styles.navbarHidden]: !isNavbarVisible,
|
||||
})}>
|
||||
<div className="navbar__inner">
|
||||
<div className="navbar__items">
|
||||
<div
|
||||
aria-label="Navigation bar toggle"
|
||||
className="navbar__toggle"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={showSidebar}
|
||||
onKeyDown={showSidebar}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="30"
|
||||
height="30"
|
||||
viewBox="0 0 30 30"
|
||||
role="img"
|
||||
focusable="false">
|
||||
<title>Menu</title>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeMiterlimit="10"
|
||||
strokeWidth="2"
|
||||
d="M4 7h22M4 15h22M4 23h22"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<Link className="navbar__brand" to={baseUrl}>
|
||||
{logo != null && (
|
||||
<img className="navbar__logo" src={logoUrl} alt={logo.alt} />
|
||||
)}
|
||||
<SearchBar
|
||||
handleSearchBarToggle={setIsSearchBarExpanded}
|
||||
isSearchBarExpanded={isSearchBarExpanded}
|
||||
{title != null && (
|
||||
<strong
|
||||
className={isSearchBarExpanded ? styles.hideLogoText : ''}>
|
||||
{title}
|
||||
</strong>
|
||||
)}
|
||||
</Link>
|
||||
{links
|
||||
.filter(linkItem => linkItem.position !== 'right')
|
||||
.map((linkItem, i) => (
|
||||
<NavLink {...linkItem} key={i} />
|
||||
))}
|
||||
</div>
|
||||
<div className="navbar__items navbar__items--right">
|
||||
{links
|
||||
.filter(linkItem => linkItem.position === 'right')
|
||||
.map((linkItem, i) => (
|
||||
<NavLink {...linkItem} key={i} />
|
||||
))}
|
||||
{!disableDarkMode && (
|
||||
<Toggle
|
||||
className={styles.displayOnlyInLargeViewport}
|
||||
aria-label="Dark mode toggle"
|
||||
checked={theme === 'dark'}
|
||||
onChange={onToggleChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<SearchBar
|
||||
handleSearchBarToggle={setIsSearchBarExpanded}
|
||||
isSearchBarExpanded={isSearchBarExpanded}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
role="presentation"
|
||||
className="navbar-sidebar__backdrop"
|
||||
onClick={() => {
|
||||
setSidebarShown(false);
|
||||
}}
|
||||
/>
|
||||
<div className="navbar-sidebar">
|
||||
<div className="navbar-sidebar__brand">
|
||||
<Link className="navbar__brand" onClick={hideSidebar} to={baseUrl}>
|
||||
{logo != null && (
|
||||
<img className="navbar__logo" src={logoUrl} alt={logo.alt} />
|
||||
)}
|
||||
{title != null && <strong>{title}</strong>}
|
||||
</Link>
|
||||
{!disableDarkMode && sidebarShown && (
|
||||
<Toggle
|
||||
aria-label="Dark mode toggle in sidebar"
|
||||
checked={theme === 'dark'}
|
||||
onChange={onToggleChange}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
role="presentation"
|
||||
className="navbar-sidebar__backdrop"
|
||||
onClick={() => {
|
||||
setSidebarShown(false);
|
||||
}}
|
||||
/>
|
||||
<div className="navbar-sidebar">
|
||||
<div className="navbar-sidebar__brand">
|
||||
<Link className="navbar__brand" onClick={hideSidebar} to={baseUrl}>
|
||||
{logo != null && (
|
||||
<img className="navbar__logo" src={logoUrl} alt={logo.alt} />
|
||||
)}
|
||||
</div>
|
||||
<div className="navbar-sidebar__items">
|
||||
<div className="menu">
|
||||
<ul className="menu__list">
|
||||
{links.map((linkItem, i) => (
|
||||
<li className="menu__list-item" key={i}>
|
||||
<NavLink
|
||||
className="menu__link"
|
||||
{...linkItem}
|
||||
onClick={hideSidebar}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{title != null && <strong>{title}</strong>}
|
||||
</Link>
|
||||
{!disableDarkMode && sidebarShown && (
|
||||
<Toggle
|
||||
aria-label="Dark mode toggle in sidebar"
|
||||
checked={theme === 'dark'}
|
||||
onChange={onToggleChange}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="navbar-sidebar__items">
|
||||
<div className="menu">
|
||||
<ul className="menu__list">
|
||||
{links.map((linkItem, i) => (
|
||||
<li className="menu__list-item" key={i}>
|
||||
<NavLink
|
||||
className="menu__link"
|
||||
{...linkItem}
|
||||
onClick={hideSidebar}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,9 +9,14 @@ import * as React from 'react';
|
|||
const useTheme = () => {
|
||||
const [theme, setTheme] = React.useState(
|
||||
typeof document !== 'undefined'
|
||||
? document.querySelector('html').getAttribute('data-theme')
|
||||
? document.documentElement.getAttribute('data-theme')
|
||||
: '',
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
}, [theme]);
|
||||
|
||||
React.useEffect(() => {
|
||||
try {
|
||||
const localStorageTheme = localStorage.getItem('theme');
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React, {useEffect} from 'react';
|
||||
import React, {useEffect, useRef} from 'react';
|
||||
import {NavLink} from 'react-router-dom';
|
||||
|
||||
const internalRegex = /^\/(?!\/)/;
|
||||
|
|
@ -14,7 +14,7 @@ function Link(props) {
|
|||
const {to, href} = props;
|
||||
const targetLink = to || href;
|
||||
const isInternal = internalRegex.test(targetLink);
|
||||
let preloaded = false;
|
||||
const preloaded = useRef(false);
|
||||
|
||||
const IOSupported =
|
||||
typeof window !== 'undefined' && 'IntersectionObserver' in window;
|
||||
|
|
@ -48,9 +48,9 @@ function Link(props) {
|
|||
};
|
||||
|
||||
const onMouseEnter = () => {
|
||||
if (!preloaded) {
|
||||
if (!preloaded.current) {
|
||||
window.docusaurus.preload(targetLink);
|
||||
preloaded = true;
|
||||
preloaded.current = true;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue