Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(v2): toggle data-theme with vanilla js instead of react helmet #2127

Merged
merged 2 commits into from
Dec 16, 2019
Merged

refactor(v2): toggle data-theme with vanilla js instead of react helmet #2127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a100056
refactor(v2): toggle data-theme with vanilla js instead of react helmet
endiliey Dec 15, 2019
eb937aa
use document documentElement
endiliey Dec 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/docusaurus-theme-classic/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For sure this is faster, it's direct access. But fewer people have heard about this lol. It's fine since it's internal.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think it is fine because relevant people can simply google and learn what this is

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes I agree it's fine :)

}

function getPreferredTheme() {
Expand Down
213 changes: 103 additions & 110 deletions packages/docusaurus-theme-classic/src/theme/Navbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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} />
Copy link
Contributor Author

@endiliey endiliey Dec 15, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If previously
image

Now
image

</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} />
)}
{title != null && (
<strong
className={isSearchBarExpanded ? styles.hideLogoText : ''}>
{title}
</strong>
)}
<SearchBar
handleSearchBarToggle={setIsSearchBarExpanded}
isSearchBarExpanded={isSearchBarExpanded}
</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>
);
}

Expand Down
7 changes: 6 additions & 1 deletion packages/docusaurus-theme-classic/src/theme/hooks/useTheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
8 changes: 4 additions & 4 deletions packages/docusaurus/src/client/exports/Link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = /^\/(?!\/)/;
Expand All @@ -14,7 +14,7 @@ function Link(props) {
const {to, href} = props;
const targetLink = to || href;
const isInternal = internalRegex.test(targetLink);
let preloaded = false;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whoa this is such a bad bug, wonder how we didn't catch it earlier :|

const preloaded = useRef(false);

const IOSupported =
typeof window !== 'undefined' && 'IntersectionObserver' in window;
Expand Down Expand Up @@ -48,9 +48,9 @@ function Link(props) {
};

const onMouseEnter = () => {
if (!preloaded) {
if (!preloaded.current) {
window.docusaurus.preload(targetLink);
preloaded = true;
preloaded.current = true;
}
};

Expand Down