mirror of https://github.com/lukechilds/docs.git
Thomas Osmonson
4 years ago
15 changed files with 203 additions and 111 deletions
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,69 @@ |
|||
import React from 'react'; |
|||
import { useMediaQuery } from '@common/hooks/use-media-query'; |
|||
import { THEME_STORAGE_KEY } from '@common/constants'; |
|||
|
|||
export const useColorMode = (): [string, () => void, (mode: 'dark' | 'light') => void] => { |
|||
const [darkmode] = useMediaQuery('(prefers-color-scheme: dark)'); |
|||
const [lightmode] = useMediaQuery('(prefers-color-scheme: light)'); |
|||
const setMode = typeof localStorage !== 'undefined' && localStorage.getItem(THEME_STORAGE_KEY); |
|||
|
|||
const [colorMode, setColorMode] = React.useState<'dark' | 'light' | undefined>(undefined); |
|||
|
|||
const setHtmlBackgroundColor = React.useCallback(() => { |
|||
document.documentElement.style.background = getComputedStyle( |
|||
document.documentElement |
|||
).getPropertyValue('--colors-bg'); |
|||
}, []); |
|||
|
|||
const setDarkMode = React.useCallback(() => { |
|||
localStorage.setItem(THEME_STORAGE_KEY, 'dark'); |
|||
setColorMode('dark'); |
|||
document.documentElement.classList.add('dark'); |
|||
document.documentElement.classList.remove('light'); |
|||
setHtmlBackgroundColor(); |
|||
}, []); |
|||
|
|||
const setLightMode = React.useCallback(() => { |
|||
localStorage.setItem(THEME_STORAGE_KEY, 'light'); |
|||
setColorMode('light'); |
|||
document.documentElement.classList.add('light'); |
|||
document.documentElement.classList.remove('dark'); |
|||
setHtmlBackgroundColor(); |
|||
}, []); |
|||
|
|||
React.useEffect(() => { |
|||
if (setMode) { |
|||
if (setMode === 'dark') { |
|||
setColorMode('dark'); |
|||
} |
|||
if (setMode === 'light') { |
|||
setColorMode('light'); |
|||
} |
|||
} else { |
|||
if (darkmode) { |
|||
setDarkMode(); |
|||
} |
|||
if (lightmode) { |
|||
setLightMode(); |
|||
} |
|||
} |
|||
}, [setMode, lightmode, darkmode]); |
|||
|
|||
const toggleColorMode = React.useCallback(() => { |
|||
if (typeof document !== 'undefined') { |
|||
if (setMode) { |
|||
if (setMode === 'light') { |
|||
setDarkMode(); |
|||
} else { |
|||
setLightMode(); |
|||
} |
|||
} else if (darkmode) { |
|||
setLightMode(); |
|||
} else { |
|||
setDarkMode(); |
|||
} |
|||
} |
|||
}, [darkmode, lightmode, setMode, colorMode]); |
|||
|
|||
return [colorMode, toggleColorMode, setColorMode]; |
|||
}; |
|||
@ -0,0 +1,7 @@ |
|||
import { useColorMode } from '@common/hooks/use-color-mode'; |
|||
|
|||
export const useFaviconName = () => { |
|||
const [mode] = useColorMode(); |
|||
const darkmode = mode === 'dark'; |
|||
return `favicon-${darkmode ? 'light' : 'dark'}.svg`; |
|||
}; |
|||
@ -0,0 +1,23 @@ |
|||
import React from 'react'; |
|||
import { MDXProvider } from '@mdx-js/react'; |
|||
import { MDXComponents } from '@components/mdx'; |
|||
import { AppStateProvider } from '@components/app-state'; |
|||
import { MdxOverrides } from '@components/mdx/overrides'; |
|||
import { ProgressBar } from '@components/progress-bar'; |
|||
import { BaseLayout } from '@components/layouts/base-layout'; |
|||
import { ColorModes } from '@components/color-modes/styles'; |
|||
import { Meta } from '@components/meta-head'; |
|||
|
|||
export const AppWrapper: React.FC<any> = ({ children, isHome }) => ( |
|||
<> |
|||
<Meta /> |
|||
<MdxOverrides /> |
|||
<ColorModes /> |
|||
<ProgressBar /> |
|||
<MDXProvider components={MDXComponents}> |
|||
<AppStateProvider> |
|||
<BaseLayout isHome={isHome}>{children}</BaseLayout> |
|||
</AppStateProvider> |
|||
</MDXProvider> |
|||
</> |
|||
); |
|||
@ -0,0 +1,10 @@ |
|||
import React from 'react'; |
|||
import { BaseSvg, SvgProps } from '@components/icons/_base'; |
|||
|
|||
export const ClockIcon: SvgProps = props => ( |
|||
<BaseSvg {...props}> |
|||
<path stroke="none" d="M0 0h24v24H0z" /> |
|||
<circle cx="12" cy="12" r="9" /> |
|||
<polyline points="12 7 12 12 15 15" /> |
|||
</BaseSvg> |
|||
); |
|||
@ -0,0 +1,12 @@ |
|||
import React from 'react'; |
|||
import { BaseSvg, SvgProps } from '@components/icons/_base'; |
|||
|
|||
export const GaugeIcon: SvgProps = props => ( |
|||
<BaseSvg {...props}> |
|||
<path stroke="none" d="M0 0h24v24H0z" /> |
|||
<circle cx="12" cy="12" r="9" /> |
|||
<circle cx="12" cy="12" r="1" /> |
|||
<line x1="13.41" y1="10.59" x2="16" y2="8" /> |
|||
<path d="M7 12a5 5 0 0 1 5 -5" /> |
|||
</BaseSvg> |
|||
); |
|||
@ -0,0 +1,14 @@ |
|||
import React from 'react'; |
|||
import { BaseSvg, SvgProps } from '@components/icons/_base'; |
|||
|
|||
export const ToolsIcon: SvgProps = props => ( |
|||
<BaseSvg {...props}> |
|||
<path stroke="none" d="M0 0h24v24H0z" /> |
|||
<path d="M3 21h4l13 -13a1.5 1.5 0 0 0 -4 -4l-13 13v4" /> |
|||
<line x1="14.5" y1="5.5" x2="18.5" y2="9.5" /> |
|||
<polyline points="12 8 7 3 3 7 8 12" /> |
|||
<line x1="7" y1="8" x2="5.5" y2="9.5" /> |
|||
<polyline points="16 12 21 17 17 21 12 16" /> |
|||
<line x1="16" y1="17" x2="14.5" y2="18.5" /> |
|||
</BaseSvg> |
|||
); |
|||
@ -0,0 +1,13 @@ |
|||
import React from 'react'; |
|||
|
|||
import Head from 'next/head'; |
|||
import { useFaviconName } from '@common/hooks/use-favicon'; |
|||
|
|||
export const Meta: React.FC<any> = props => { |
|||
const filename = useFaviconName(); |
|||
return ( |
|||
<Head> |
|||
<link rel="icon" type="image/svg+xml" href={`/${filename}`} /> |
|||
</Head> |
|||
); |
|||
}; |
|||
@ -1,107 +1,18 @@ |
|||
import React from 'react'; |
|||
import { CSSReset, ThemeProvider } from '@blockstack/ui'; |
|||
import { useMediaQuery } from '@common/hooks/use-media-query'; |
|||
import { MDXProvider } from '@mdx-js/react'; |
|||
import { MDXComponents } from '@components/mdx'; |
|||
import { AppStateProvider } from '@components/app-state'; |
|||
import { MdxOverrides } from '@components/mdx/overrides'; |
|||
import { ProgressBar } from '@components/progress-bar'; |
|||
import '@docsearch/css'; |
|||
import { BaseLayout } from '@components/layouts/base-layout'; |
|||
import { THEME_STORAGE_KEY } from '@common/constants'; |
|||
import { ColorModes } from '@components/color-modes/styles'; |
|||
|
|||
const setHtmlBackgroundColor = () => { |
|||
const bgValue = getComputedStyle(document.documentElement).getPropertyValue('--colors-bg'); |
|||
document.documentElement.style.background = bgValue; |
|||
}; |
|||
|
|||
const setDarkMode = setColorMode => { |
|||
localStorage.setItem(THEME_STORAGE_KEY, 'dark'); |
|||
setColorMode('dark'); |
|||
document.documentElement.classList.add('dark'); |
|||
document.documentElement.classList.remove('light'); |
|||
setHtmlBackgroundColor(); |
|||
}; |
|||
const setLightMode = setColorMode => { |
|||
localStorage.setItem(THEME_STORAGE_KEY, 'light'); |
|||
setColorMode('light'); |
|||
document.documentElement.classList.add('light'); |
|||
document.documentElement.classList.remove('dark'); |
|||
setHtmlBackgroundColor(); |
|||
}; |
|||
|
|||
export const useColorMode = () => { |
|||
const [darkmode] = useMediaQuery('(prefers-color-scheme: dark)'); |
|||
const [lightmode] = useMediaQuery('(prefers-color-scheme: light)'); |
|||
const setMode = typeof localStorage !== 'undefined' && localStorage.getItem(THEME_STORAGE_KEY); |
|||
import type { AppProps } from 'next/app'; |
|||
|
|||
const [colorMode, setColorMode] = React.useState(undefined); |
|||
|
|||
React.useEffect(() => { |
|||
if (setMode) { |
|||
if (setMode === 'dark') { |
|||
setColorMode('dark'); |
|||
} |
|||
if (setMode === 'light') { |
|||
setColorMode('light'); |
|||
} |
|||
} else { |
|||
if (darkmode) { |
|||
setDarkMode(setColorMode); |
|||
} |
|||
if (lightmode) { |
|||
setLightMode(setColorMode); |
|||
} |
|||
} |
|||
}, [setMode, lightmode, darkmode]); |
|||
|
|||
const toggleColorMode = () => { |
|||
if (typeof document !== 'undefined') { |
|||
if (setMode) { |
|||
if (setMode === 'light') { |
|||
setDarkMode(setColorMode); |
|||
} else { |
|||
setLightMode(setColorMode); |
|||
} |
|||
} else if (darkmode) { |
|||
setLightMode(setColorMode); |
|||
} else { |
|||
setDarkMode(setColorMode); |
|||
} |
|||
} |
|||
}; |
|||
|
|||
return [colorMode, toggleColorMode, setColorMode]; |
|||
}; |
|||
import { CSSReset, ThemeProvider } from '@blockstack/ui'; |
|||
import { AppWrapper } from '@components/app-wrapper'; |
|||
|
|||
const AppWrapper = ({ children, isHome }: any) => { |
|||
return ( |
|||
<> |
|||
<MdxOverrides /> |
|||
<ColorModes /> |
|||
<ProgressBar /> |
|||
<MDXProvider components={MDXComponents}> |
|||
<AppStateProvider> |
|||
<BaseLayout isHome={isHome}>{children}</BaseLayout> |
|||
</AppStateProvider> |
|||
</MDXProvider> |
|||
</> |
|||
); |
|||
}; |
|||
import '@docsearch/css'; |
|||
|
|||
const MyApp = ({ Component, pageProps, colorMode, ...rest }: any) => { |
|||
const { isHome } = pageProps; |
|||
return ( |
|||
<> |
|||
const MyApp: React.FC<AppProps> = ({ Component, pageProps, ...rest }) => ( |
|||
<ThemeProvider> |
|||
<CSSReset /> |
|||
<AppWrapper isHome={isHome} {...rest}> |
|||
<AppWrapper {...rest}> |
|||
<Component {...pageProps} /> |
|||
</AppWrapper> |
|||
</ThemeProvider> |
|||
</> |
|||
); |
|||
}; |
|||
); |
|||
|
|||
export default MyApp; |
|||
|
|||
Loading…
Reference in new issue