3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-25 15:07:17 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
* refactor(v2): toggle data-theme with vanilla js instead of react helmet

* use document documentElement
This commit is contained in:
Endi 2019-12-16 07:57:24 +07:00 • committed by Yangshun Tay
parent ee00ecf569
commit 33622c5347
4 changed files with 114 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/docusaurus-theme-classic/src/index.js
View file

@ -12,7 +12,7 @@ const path = require('path');
const storageKey = 'theme'; const storageKey = 'theme';
const noFlash = `(function() { const noFlash = `(function() {
function setDataThemeAttribute(theme) { function setDataThemeAttribute(theme) {
document.querySelector('html').setAttribute('data-theme', theme); document.documentElement.setAttribute('data-theme', theme);
} }
function getPreferredTheme() { function getPreferredTheme() {

7
packages/docusaurus-theme-classic/src/theme/Navbar/index.js
View file

@ -7,7 +7,6 @@
import React, {useCallback, useState} from 'react'; import React, {useCallback, useState} from 'react';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import Head from '@docusaurus/Head';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl'; import useBaseUrl from '@docusaurus/useBaseUrl';
@ -68,11 +67,6 @@ function Navbar() {
const logoUrl = useBaseUrl(logo.src); const logoUrl = useBaseUrl(logo.src);
return ( return (
<>
<Head>
{/* TODO: Do not assume that it is in english language */}
<html lang="en" data-theme={theme} />
</Head>
<nav <nav
ref={navbarRef} ref={navbarRef}
className={classnames('navbar', 'navbar--light', 'navbar--fixed-top', { className={classnames('navbar', 'navbar--light', 'navbar--fixed-top', {
@ -183,7 +177,6 @@ function Navbar() {
</div> </div>
</div> </div>
</nav> </nav>
</>
); );
} }

7
packages/docusaurus-theme-classic/src/theme/hooks/useTheme.js
View file

@ -9,9 +9,14 @@ import * as React from 'react';
const useTheme = () => { const useTheme = () => {
const [theme, setTheme] = React.useState( const [theme, setTheme] = React.useState(
typeof document !== 'undefined' 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(() => { React.useEffect(() => {
try { try {
const localStorageTheme = localStorage.getItem('theme'); const localStorageTheme = localStorage.getItem('theme');

8
packages/docusaurus/src/client/exports/Link.js
View file

@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree. * 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'; import {NavLink} from 'react-router-dom';
const internalRegex = /^\/(?!\/)/; const internalRegex = /^\/(?!\/)/;
@ -14,7 +14,7 @@ function Link(props) {
const {to, href} = props; const {to, href} = props;
const targetLink = to || href; const targetLink = to || href;
const isInternal = internalRegex.test(targetLink); const isInternal = internalRegex.test(targetLink);
let preloaded = false; const preloaded = useRef(false);
const IOSupported = const IOSupported =
typeof window !== 'undefined' && 'IntersectionObserver' in window; typeof window !== 'undefined' && 'IntersectionObserver' in window;
@ -48,9 +48,9 @@ function Link(props) {
}; };
const onMouseEnter = () => { const onMouseEnter = () => {
if (!preloaded) { if (!preloaded.current) {
window.docusaurus.preload(targetLink); window.docusaurus.preload(targetLink);
preloaded = true; preloaded.current = true;
} }
}; };