From 1c989aa78cc7d0b0fcc35ab6dc60152e1f20d123 Mon Sep 17 00:00:00 2001 From: Thomas Osmonson Date: Wed, 5 Aug 2020 17:11:42 -0500 Subject: [PATCH] fix: some clean up --- public/app-icon.png | Bin 0 -> 2150 bytes public/favicon-dark.svg | 3 + public/favicon-light.svg | 3 + public/favicon.ico | Bin 0 -> 1150 bytes src/common/hooks/use-color-mode.ts | 69 ++++++++++++ src/common/hooks/use-favicon.ts | 7 ++ src/components/app-wrapper.tsx | 23 ++++ src/components/color-mode-button.tsx | 2 +- src/components/icons/clock.tsx | 10 ++ src/components/icons/gauge.tsx | 12 +++ src/components/icons/tools.tsx | 14 +++ src/components/layouts/markdown-wrapper.tsx | 32 +++++- src/components/meta-head.tsx | 13 +++ src/pages/_app.tsx | 113 +++----------------- src/pages/_document.tsx | 13 ++- 15 files changed, 203 insertions(+), 111 deletions(-) create mode 100644 public/app-icon.png create mode 100755 public/favicon-dark.svg create mode 100755 public/favicon-light.svg create mode 100644 public/favicon.ico create mode 100644 src/common/hooks/use-color-mode.ts create mode 100644 src/common/hooks/use-favicon.ts create mode 100644 src/components/app-wrapper.tsx create mode 100644 src/components/icons/clock.tsx create mode 100644 src/components/icons/gauge.tsx create mode 100644 src/components/icons/tools.tsx create mode 100644 src/components/meta-head.tsx diff --git a/public/app-icon.png b/public/app-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..85f3a33778aaff322099b77e5ca3511f1259a1b4 GIT binary patch literal 2150 zcmai0c~H|?68;5&a10OyBr1k*jLe7v0xrS;63(y#5lI9=kV`=k0l{#|A%r^!$eC~m zjLMO4LpV&LlITDXITO?Lxmol*93G6!V< z0FZM)+PH{x-Vc$I6rBrp)7>H^9fov|0D%2J{}7Oai`J?L1Vy;mTLDc&s-H!Mcp$#Ioll`t?6Z66nwEv zwH?ASHj?zvr3)q=jz3k`nxM-#r;&-G9n&Dxe&t!`5FZ}bNc^N-$$ynge;-b^eOFUR z2)JaWn3k@PnT$PLXxc0Gp+=s8a!YLvltWJg#1ELGbo-rz!~!Bo9FG(__YP4*x-0mn zwPZ$uHmjP9x0Cf%y_8QVhSJeRCF2*Nj<Z*&L(*2CUUfN?W4BNtI}-FJ`<9eK`OjEG zHH&YPXzSM=(Jj@6f@DA!J{C$_@w%2%St&j8QJYbFyxX$@GdC1%anmeCE?qYTT$6RQ zXlVW`s|rjSMJT16n%I*`!RmGR#a1H}l+rNTDd2o^F_S5`;RAtJk6DWmKxD>0Lf|dQB3oRl0dDCd0TR=Zf}BU(ekvm- z?)q<6k%4k{hLPY&sDK&JZw&G>pO4FLy-p(y=?jxT&tl zGt6rrtDQmF?{6;^2rqm8*+8yR>VbcKTUd&)LI+T(a-ScZvI|s-Tv6gW-}v`jmzd<4>1w`)#l%< zJ?fs)2Mw_{A5lOzr$Jeum+a~1(swc0;9D=LIls_-i59oZ@MU39$viU71@4*Ar zyCQ36KSPeZG^f0SgI$@+hax+|>Xzdpr-a3@ygj;auQOl3kcr_pgeuzhL!Dl_LbU=N zc@f$NQ1TOIotVKFGRg`~t_GOgte9(>jHJot!B%RUazdJgr3N(%AY$moHY(?Re&9AQ z$;P1Uls8RbC_yczsrpt`A;4Vd@RcS5~kbt<)fCzA`{>HPM^F^HL0ELoV@1yif{2LDc?ue={SYp z3LV>TGTk=Gm=1pX53?Ppo| z=px6Q)zWIRr@Y0ia~rJ@^Bsk6Gx=2FPere7TK=({%F@}8)%txV$i{>&eXhMZm`nG5 z(K=cGH9?C@TT@$3n`ASS54a3^>(5aOz3rCd>3Y5A2ybI=qN55;xhPYkpF(p_6mVm_ zpS!Umwb50;9U`8zMb%gzEeEMpK2t3^n#&(fU?1i^N({9;`!>EuOj0T?S@dZCjkf=T z(f{fCHJAdsTcw<~Gx30AJcy&7(OgI72bo)R-YQLPnwYWX9K!I3?SHt^5fqrhCC^6f zVUqC)k{}vB6J*|lp&#Iz9Z2c3q`+itncQ}CIR8N6&az3ybrUmS46g@D5@?Aos8~~AE#aZ=1hW~h+gTohKe5y< zz7c(VZKW_R3N&zE!)Y&BV5EuRIf&wqn0_sBZq$|*mDiA17loLs>^H2NC^!(cw7dCR zJfV#obV{WdLK2k!C9JFwn#9_`);m3N$t2?@vLMde)U);{&J*RWvCqNX*P~)Dy77L! z!YLc%dTB>sJpygJzD0@hdZnEU&2noDRE5zSz0Wpk({|b-} z{$Z&bjzB%~H~8LAH$dXaiSdQoJ>Q9d3uLt5O0}o!M6!ey?u;)(3i3d6OlJLjsoeeo z7RqN?e)Y!Y`PB*|r%1cLq}b(>y3|yL(icKA4iKuEWw$Cm|pCTDh`EKXw$I7<9ac%NTz znfwvT4(c3=V?gWk-;@iln$zz%oF+oyhH5UP zF?hw*4(eJto^)$|(V&>27EEtCzJ59aPZ+dNh9U&lLp2U4_z!$;{W(v3(`WvbN zTzW$M=gVUsvfVkA2EN>>6*ghBGvSd2ql8G-{SJfeI8=3stv#()FZ+yIC k(6r!D*VUH?OAB_vVdO7bvBf!yqO|~UutnK4S@|UY4RRm}TL1t6 literal 0 HcmV?d00001 diff --git a/public/favicon-dark.svg b/public/favicon-dark.svg new file mode 100755 index 00000000..4ef18550 --- /dev/null +++ b/public/favicon-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/favicon-light.svg b/public/favicon-light.svg new file mode 100755 index 00000000..8f2ddea6 --- /dev/null +++ b/public/favicon-light.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..ddeeb6cd041c01c240f3e695a95ec4b413e61eba GIT binary patch literal 1150 zcmbW1O-=$q5QWPG_pDg6F>#M#ybPclIEOCuBmxFKg(k2;F9HcfH~!)G0!1p58lphH zsqRA%ntZgtH!l%y^2}Q%#HyGWvvs;$Q_Xs{#n`CA++HY-r*Zo2|t_M8&S3L z$lHM#WS(7`JS}+H!|Ur#@#=YeuJ{QHh`&Q)X&(@4<&AY;%x~ZX2H>?18|{jy^<9r% zX-hZ<1NB8climYq4VZ)bvp6Du0neds!uS&U;A>`H*Rq;S^ZH`UYBR0q)BGOV@C2S8 zGgd$DVAncj{p;c@>tB2adVjZY3PbSwKQeB@H5A|9U-yrmEqb-KyxN0)pZ`Yf{TA$d ge$>-=etkce^;o^q8Q-2?{~w64QjfFsIMbB*1#Y$$!~g&Q literal 0 HcmV?d00001 diff --git a/src/common/hooks/use-color-mode.ts b/src/common/hooks/use-color-mode.ts new file mode 100644 index 00000000..5f324f49 --- /dev/null +++ b/src/common/hooks/use-color-mode.ts @@ -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]; +}; diff --git a/src/common/hooks/use-favicon.ts b/src/common/hooks/use-favicon.ts new file mode 100644 index 00000000..a8d733f3 --- /dev/null +++ b/src/common/hooks/use-favicon.ts @@ -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`; +}; diff --git a/src/components/app-wrapper.tsx b/src/components/app-wrapper.tsx new file mode 100644 index 00000000..52468b62 --- /dev/null +++ b/src/components/app-wrapper.tsx @@ -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 = ({ children, isHome }) => ( + <> + + + + + + + {children} + + + +); diff --git a/src/components/color-mode-button.tsx b/src/components/color-mode-button.tsx index 0e22488d..bdc7cff2 100644 --- a/src/components/color-mode-button.tsx +++ b/src/components/color-mode-button.tsx @@ -3,7 +3,7 @@ import { LinkProps } from '@components/typography'; import { DarkModeIcon } from '@components/icons/dark-mode'; import { LightModeIcon } from '@components/icons/light-mode'; import { IconButton } from '@components/icon-button'; -import { useColorMode } from '@pages/_app'; +import { useColorMode } from '@common/hooks/use-color-mode'; export const ColorModeButton = forwardRef((props: LinkProps, ref: Ref) => { const [colorMode, toggleColorMode] = useColorMode(); diff --git a/src/components/icons/clock.tsx b/src/components/icons/clock.tsx new file mode 100644 index 00000000..20df493a --- /dev/null +++ b/src/components/icons/clock.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { BaseSvg, SvgProps } from '@components/icons/_base'; + +export const ClockIcon: SvgProps = props => ( + + + + + +); diff --git a/src/components/icons/gauge.tsx b/src/components/icons/gauge.tsx new file mode 100644 index 00000000..80ab8afe --- /dev/null +++ b/src/components/icons/gauge.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { BaseSvg, SvgProps } from '@components/icons/_base'; + +export const GaugeIcon: SvgProps = props => ( + + + + + + + +); diff --git a/src/components/icons/tools.tsx b/src/components/icons/tools.tsx new file mode 100644 index 00000000..b608c185 --- /dev/null +++ b/src/components/icons/tools.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { BaseSvg, SvgProps } from '@components/icons/_base'; + +export const ToolsIcon: SvgProps = props => ( + + + + + + + + + +); diff --git a/src/components/layouts/markdown-wrapper.tsx b/src/components/layouts/markdown-wrapper.tsx index c1510898..2c12a2ce 100644 --- a/src/components/layouts/markdown-wrapper.tsx +++ b/src/components/layouts/markdown-wrapper.tsx @@ -1,17 +1,39 @@ import React from 'react'; -import { Box, Flex, Stack, space } from '@blockstack/ui'; +import { Box, Flex, Stack, space, BoxProps, color } from '@blockstack/ui'; import { MDContents } from '@components/mdx/md-contents'; import { H1 } from '@components/mdx'; import Head from 'next/head'; -import { Caption, Text } from '@components/typography'; +import { Text } from '@components/typography'; import { useRouter } from 'next/router'; import dynamic from 'next/dynamic'; import { getTitle } from '@common/utils'; import { css } from '@styled-system/css'; import { getHeadingStyles } from '@components/mdx/typography'; +import { ToolsIcon } from '@components/icons/tools'; +import { ClockIcon } from '@components/icons/clock'; const Search = dynamic(() => import('@components/search')); -const PageTop = props => { +const Experience: React.FC = ({ + level, + ...rest +}) => ( + + + + + {level} + +); +const Duration: React.FC = ({ value, ...rest }) => ( + + + + + {value} + +); + +const PageTop: React.FC = props => { const router = useRouter(); const isHome = router?.pathname === '/'; return ( @@ -40,8 +62,8 @@ const PageTop = props => { ) : null} - {props.experience ? {props.experience} : null} - {!isHome && props.duration ? {props.duration} : null} + {props.experience ? : null} + {!isHome && props.duration ? : null} ); diff --git a/src/components/meta-head.tsx b/src/components/meta-head.tsx new file mode 100644 index 00000000..df572ed9 --- /dev/null +++ b/src/components/meta-head.tsx @@ -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 = props => { + const filename = useFaviconName(); + return ( + + + + ); +}; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 54109685..bbad388b 100755 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -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 ( - <> - - - - - - {children} - - - - ); -}; +import '@docsearch/css'; -const MyApp = ({ Component, pageProps, colorMode, ...rest }: any) => { - const { isHome } = pageProps; - return ( - <> - - - - - - - - ); -}; +const MyApp: React.FC = ({ Component, pageProps, ...rest }) => ( + + + + + + +); export default MyApp; diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 66a0da9a..a806be00 100755 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -1,8 +1,15 @@ -import Document, { DocumentContext, Html, Head, Main, NextScript } from 'next/document'; +import Document, { + DocumentContext, + DocumentProps, + Html, + Head, + Main, + NextScript, +} from 'next/document'; import { THEME_STORAGE_KEY } from '@common/constants'; import { ServerStyleSheet } from 'styled-components'; -export default class MyDocument extends Document { +export default class MyDocument extends Document { static async getInitialProps(ctx: DocumentContext) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; @@ -84,8 +91,6 @@ export default class MyDocument extends Document { /> - -