react-helmet#Helmet TypeScript Examples

useHeadTags = (title?: string | null, metaTagsMapping: MetaTags = {}) => {
  return useMemo(() => {
    const pageTitle = title ? `${title} - Joystream` : 'Joystream'
    const metaTags = Object.entries(metaTagsMapping).map(([name, content]) => (
      <meta name={name} content={content.toString()} key={name} />
    ))
    return (
      <Helmet>
        <title>{pageTitle}</title>
        {metaTags}
      </Helmet>
    )
  }, [title, metaTagsMapping])
}

Layout = ({
  children,
  pageName,
}: {
  children?: ReactElement[] | ReactElement;
  pageName?: string;
}) => {
  let className = '';

  if (pageName) {
    className = `${className} page-${pageName}`;
  }

  return (
    <>
      <Helmet bodyAttributes={{ class: className }}>
        <title>MLH Fellows</title>
      </Helmet>
      <div className="wrapper">
        <main>{children}</main>
      </div>
    </>
  );
}

export function RoutedTabs(props: { routes: SubRoute[] }) {
  const { routes } = props;
  const navigate = useNavigate();
  const { index, route, element } = useSelectedSubRoute(routes);
  const headerTabs = useMemo(
    () =>
      routes.map(t => ({
        id: t.path,
        label: t.title,
        tabProps: t.tabProps,
      })),
    [routes],
  );

  const onTabChange = (tabIndex: number) =>
    // Remove trailing /*
    // And remove leading / for relative navigation
    // Note! route resolves relative to the position in the React tree,
    // not relative to current location
    navigate(routes[tabIndex].path.replace(/\/\*$/, '').replace(/^\//, ''));

  return (
    <>
      <HeaderTabs
        tabs={headerTabs}
        selectedIndex={index}
        onChange={onTabChange}
      />
      <Content>
        <Helmet title={route.title} />
        {element}
      </Content>
    </>
  );
}

AdminResourceCompatible: FC<AdminResourceCompatibleProps> = ({
  navTitle,
  path,
  children,
  onMount,
  onUnmount,
}) => {
  const handleMount = useCallback(() => {
    onMount?.(navTitle)
  }, [navTitle, onMount])

  return (
    <Switch>
      <Route exact strict path={path}>
        <Helmet>
          <title>{navTitle}</title>
        </Helmet>
        <ErrorBoundary>
          {children}
          <MountObeserver onMount={handleMount} onUnmount={onUnmount} />
        </ErrorBoundary>
      </Route>
    </Switch>
  )
}

App = () => {
  return (
    <ThemeProvider theme={Theme}>
      {/* Dynamically load metadata for HTML header */}
      <Helmet>
        <meta charSet="utf-8" />
        <title>{Configuration[METADATA]['title']}</title>
        <meta name="description" content={Configuration[METADATA]['description']} />
        <link rel="icon" href={`/${Configuration[METADATA]['favicon']}`} />
      </Helmet>
      <Router>
        <AppContainer>
          <Navbar />
          <Switch>
            <Route exact path={HOME_ROUTE}>
              <HomePage />
            </Route>
            <Route path={`${RELATED_ROUTE}/:articleId`}>
              <RelatedPage />
            </Route>
            <Route>
              <NotFoundPage />
            </Route>
          </Switch>
          <Footer />
        </AppContainer>
      </Router>
    </ThemeProvider>
  );
}

export default function IOSViewportFix() {
  const { pendingActionCount, connectionCallback } = useCeloInternal();
  const isOpen = pendingActionCount > 0 || Boolean(connectionCallback);

  const tags = useMemo(
    () =>
      isMobile &&
      isOpen && (
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1"
        />
      ),
    [isOpen]
  );
  return <Helmet>{tags}</Helmet>;
}

public render(): React.ReactElement {
    const { pageName, brandingStore: { data: { title } } } = this.props;

    return (
      <Helmet>
        <title>{pageName ? `${title} | ${pageName}` : title}</title>
      </Helmet>
    );
  }

export default function Meta({
	title,
	description,
	image,
	url,
	children,
}: PropType) {
	const { pathname } = useLocation()
	return (
		<Helmet>
			<title>{title} - Nos Gestes Climat</title>
			<meta name="description" content={description} />
			<meta property="og:type" content="website" />
			<meta property="og:title" content={title} />
			<meta property="og:description" content={description} />
			<meta property="twitter:card" content="summary_large_image" />
			{/* Attention : og:image does not accept SVG; It must be an absolute URL (https://xxx.png/jpg);  */}
			{image && <meta property="og:image" content={image} />}
			{url && <meta property="og:url" content={url} />}
			{children}
		</Helmet>
	)
}

render() {
    return (
      <nav className='top-nav'>
        <Helmet>
          <title>DataJoint LabBook{this.props.hostname ? " | " + this.props.hostname : ""}</title>
        </Helmet>
        <div className='nav-logo'>
          <NavLink to='/'><img src={logo} alt='Logo' /></NavLink>
        </div>
        
        <ul className='right-nav'>
          {this.props.isLoggedIn ?
            (
              <li className='right-nav-li hostname'>
                <label>Currently connected</label>
                <h5>{this.props.hostname}</h5>
              </li>
            ) : ''
          }
          {this.props.isLoggedIn ?
            (
              <li className='right-nav-li'>
                <a href="/login">Log Out</a>
              </li>
            ) : <li className='right-nav-li'><a href="/login">Log In</a></li>
          }
        </ul>
      </nav>
    );
  }

Login: React.FC<RouteComponentProps> = (props) => {
  if (localStorage.getItem('user')) {
    return <Redirect to={'/'} />;
  }

  return (
    <div style={{ display: 'flex', justifyContent: 'center' }}>
      <Helmet>
        <title>Log in</title>
      </Helmet>
      <div style={{ maxWidth: pageMaxWidth, flex: 1, padding: 16 }}>
        <div
          style={{
            justifyContent: 'center',
            display: 'flex',
            flexDirection: 'row',
          }}
          className="card p-3"
        >
          <LoginForm
            onLogin={() => {
              props.history.push('/');
            }}
          />
        </div>
      </div>
    </div>
  );
}

EpiserverWebsite : React.FunctionComponent<CmsSiteProps> = (props) => {
    const SiteLayout = getLayout(props.context);
    const ssr = props.context.serviceContainer.getService<IServerContextAccessor>(DefaultServices.ServerContext);
    const location = (props.context.isServerSideRendering() ? ssr.Path : window.location.pathname) || undefined;
    return <ReduxProvider store={ props.context.getStore() }>
        <EpiserverContext.Provider value={ props.context }>
            <Helmet/>
            <CmsCommunicator />
            <EpiRouter location={ location } context={ props.staticContext }>
                <SiteLayout context={ props.context } >
                    <RoutedContent config={ props.context.config().routes || [] } keyPrefix="CmsSite-RoutedContent" />
                    { props.children }  
                </SiteLayout>
            </EpiRouter>
        </EpiserverContext.Provider>
    </ReduxProvider>
}

function Layout(props: Props): JSX.Element {
  const { children, noFooter, wrapperClassName } = props
  return (
    <LayoutProviders>
      <LayoutHead {...props} />

      <Helmet>
        <script>
          {`
        var _hmt = _hmt || []
        ;(function () {
          var hm = document.createElement('script')
          hm.src = "https://hm.baidu.com/hm.js?ad5205df993dc46e352a6c13c9dbb254";
          var s = document.getElementsByTagName('script')[0]
          s.parentNode.insertBefore(hm, s)
        })()
      `}
        </script>
      </Helmet>

      <AnnouncementBar />
      <Navbar />
      <Box
        w-1360--md
        className={clsx('main-wrapper', wrapperClassName)}
        style={{
          // maxWidth: '1360px',
          // width: '1360px',
          margin: '0 auto',
        }}
      >
        {children}
      </Box>

      {!noFooter && <Footer />}
    </LayoutProviders>
  )
}

ReactDOM.render(
  <React.StrictMode>
    <Helmet>
      <meta name="description" content={description} />
      <title>{title}</title>
    </Helmet>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

Layout: React.FC<LayoutProps> = function (props) {
  const { children } = props;
  const auth0Context = React.useContext(Auth0Context);
  const location = useLocation<{ pathname: string }>().pathname;
  const isActive = location.match(/\/(talents|jobs)\/[a-f0-9-]{36}/);
  const { setIsDetailView } = useMobileViewContext();
  setIsDetailView(Boolean(isActive));
  const profileContext = useProfile();
  if (!profileContext?.profile) {
    auth0Context?.state?.context?.client?.isAuthenticated().then((res) => {
      if (res) profileContext?.refresh();
    });
  }
  return (
    <Container>
      <Helmet
        defaultTitle={process.env.REACT_APP_WEBSITE_NAME}
        titleTemplate={`%s | ${process.env.REACT_APP_WEBSITE_NAME}`}
      />
      <Header />
      {children}
      <Footer />
      <ToastContainer />
      <MessageDialogContainer />
    </Container>
  );
}

Seo: React.FC<Props> = ({ description, lang = "no", title }) => {
  const siteMetadata = useSiteMetadata();

  const metaDescription = description ?? siteMetadata.description;
  const image = `${siteMetadata.siteUrl}/icons/icon-96x96.png`;

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={`%s | ${siteMetadata.title}`}
      meta={[
        { name: "name", content: title || siteMetadata.title },
        { name: `description`, content: metaDescription },
        { name: "image", content: image },

        { name: `twitter:card`, content: `summary` },
        { name: "twitter:site", content: `Lesesalen` },
        { name: `twitter:title`, content: title },
        { name: `twitter:description`, content: metaDescription },
        { name: `twitter:creator`, content: siteMetadata.author.name },
        { name: "twitter:image", content: image },

        { property: "og:type", content: "website" },
        { property: "og:title", content: title },
        { property: "og:url", content: siteMetadata.siteUrl },
        { property: "og:image", content: image },
        { property: "og:description", content: metaDescription },
        { property: "og:site_name", content: `Lesesalen` },
      ]}
    />
  );
}

Header: React.FC<IProps> = ({ title }) => {
  const { history } = useRouter();
  const { width } = useViewport();
  const { TABLET } = BREAKPOINTS;

  return (
    <>
      <Helmet>
        <meta charSet="utf-8" />
        <title>{title}</title>
        <link rel="canonical" href={history.location.pathname} />
        <meta name="viewport" content={"width=device-width, initial-scale=1"} />
        <meta name="description" content={TAGLINE} />
        <meta name="og:title" property="og:title" content={title} />
        <meta property="og:url" content={WEBSITE_URL} />
        <meta property="og:type" content="article" />
        <meta property="og:description" content={TAGLINE} />
        <meta property="og:image" content={WEBSITE_URL + "/static/logo.png"} />
        <meta property="og:site_name" content={WEBSITE_NAME} />
        <meta property="og:type" content="website" />
        <meta property="og:updated_time" content={`${+new Date()}`} />
        <meta name="twitter:title" content={title} />
        <meta name="twitter:description" content={TAGLINE} />
        <meta name="twitter:card" content="summary" />
        <meta name="twitter:site" content={WEBSITE_URL} />
        <meta name="twitter:image" content={WEBSITE_URL + "/static/logo.png"} />
      </Helmet>
      <Nav pinned={width < TABLET} />
    </>
  );
}

AppHeader: React.FC = React.memo(() => {
  const { language } = useLanguage();

  return (
    <Helmet>
      <meta httpEquiv="Content-Language" content={language} />
    </Helmet>
  );
})

NotFoundPage = ({ location }: any) => {
    const classes = usePageStyles()
    const path: string = location.pathname

    let historyReference = undefined
    let m
    if ((m = path.match(/^(?:\/tl|\/)((?:class|union|method)\/.+?)$/))) {
        historyReference = (
            <Typography variant="body1" className={classes.paragraph}>
                This type might no longer exist, but you could check{' '}
                <MuiLink component={Link} to={`/history/${m[1]}`}>
                    History section
                </MuiLink>
            </Typography>
        )
    }

    return (
        <Page>
            <Helmet>
                <title>404 Not found</title>
                <meta name="robots" content="noindex" />
            </Helmet>
            <div className={classes.heading1}>
                <Typography variant="h3" id="tl-reference">
                    404
                </Typography>
            </div>
            <Typography variant="body1" className={classes.paragraph}>
                This page does not exist
            </Typography>
            {historyReference}
        </Page>
    )
}

export function SEO() {
  const locale = useRecoilValue(localeAtom)
  const htmlAttributes = useMemo(() => ({ lang: locale.full }), [locale])
  return (
    <>
      <Helmet htmlAttributes={htmlAttributes} />
      <Head>
        <title>{PROJECT_NAME}</title>

        <meta name="description" content={PROJECT_DESCRIPTION} />
        <meta name="application-name" content={PROJECT_NAME} />

        <meta itemProp="description" content={PROJECT_DESCRIPTION} />
        <meta itemProp="image" content={URL_SOCIAL_IMAGE} />
        <meta itemProp="name" content={PROJECT_NAME} />
        <meta property="og:description" content={PROJECT_DESCRIPTION} />
        <meta property="og:image" content={URL_SOCIAL_IMAGE} />
        <meta property="og:image:secure_url" content={URL_SOCIAL_IMAGE} />
        <meta property="og:image:type" content="image/png" />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="600" />
        <meta property="og:locale" content={locale.full} />
        <meta property="og:title" content={PROJECT_NAME} />
        <meta property="og:type" content="website" />
        <meta property="og:url" content={DOMAIN} />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:description" content={PROJECT_DESCRIPTION} />
        <meta name="twitter:image" content={URL_SOCIAL_IMAGE} />
        <meta name="twitter:image:alt" content={PROJECT_DESCRIPTION} />
        <meta name="twitter:title" content={PROJECT_NAME} />
        <meta name="twitter:url" content={DOMAIN} />
        <meta name="twitter:site" content={TWITTER_USERNAME_FRIENDLY} />
      </Head>
    </>
  )
}

AppMeta = () => (
  <Helmet>
    <title>Learn to write Tezos Smart Contracts the fun way | TezosAcademy</title>
    <meta name="title" content="Learn to write Tezos Smart Contracts the fun way | TezosAcademy" />
    <meta
      name="description"
      content="TezosAcademy is a fun interactive tutorial about learning to writte Tezos smart contract in LIGO"
    />

    <meta property="og:title" content="Learn to write Tezos Smart Contracts the fun way | TezosAcademy" />
    <meta
      property="og:description"
      content="TezosAcademy is a fun interactive tutorial about learning to writte Tezos smart contract in LIGO"
    />
    <meta property="og:url" content="//tezosacademy.io" />
    <meta property="og:site_name" content="TezosAcademy" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="//tezosacademy.io/ogimage.png" />
  </Helmet>
)

Layout: FC<LayoutProps> = ({
    children,
    pageTitle,
    data: {
        title,
        description,
        meta = {}
    }
}) =>
    <>
        <Helmet defer={false}>
            <title>
                {title + (pageTitle ? "-" + pageTitle : "")}
            </title>
            <link
                rel="stylesheet"
                href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
                integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
                crossOrigin="anonymous"
            />
            <meta name="description" content={description} />
            {
                Object.keys(meta).map(name =>
                    meta[name] instanceof Array
                        ? (meta[name] as string[]).map(content =>
                            <meta name={name} content={content} key={content} />
                        )
                        : <meta name={name} content={meta[name] as string} />
                )
            }
        </Helmet>
        <Nav />
        {children}
        <Footer />
    </>

Home: VFC = () => (
  <>
    <Helmet>
      <title>作品紹介 | SLAM DUNK</title>
    </Helmet>
    <header>
      <h1>『SLAM DUNK』作品紹介</h1>
    </header>
    <Container className="summary">
      <p>
        神奈川県立湘北高校に入学した赤い髪の不良少年である桜木花道は、中学時代に50人の女性から振られ続けたうえに、最後に振られた女性が「バスケ部の小田君」に好意を持っていたため、バスケットボールが大嫌いになっていた。
      </p>
      <p>
        しかし、廊下で自身に声をかけてきた赤木晴子に自身の長身と筋肉、身体能力の高さを見出された花道は、彼女にバスケット部への入部を薦められる。花道は晴子に一目惚れし、バスケットボールは全くの初心者であるにもかかわらず、彼女目当てに入部。その後、地道な練習や試合を通じて徐々にバスケットの面白さに目覚め、その才能の芽を急速に開花させる。湘北バスケ部には、監督である安西光義のもと、晴子の兄でもある主将の赤木剛憲と副主将の木暮公延らに加え、スーパールーキーといわれる流川楓らが加入。さらに、前年度のインターハイ県予選ベスト4である陵南高校との練習試合後には、暴力事件を起こして入院をしていた宮城リョータや、バスケ部から離れていた三井寿も復帰する。
      </p>
      <p>
        夏のインターハイ制覇を目指す湘北は緒戦で前年度のインターハイ県予選ベスト8である三浦台高校を破ると、その後も神奈川県予選を順調に勝ち進み、決勝リーグへの進出を懸けてインターハイ常連校の翔陽高校と対戦し勝利する。続く決勝リーグの初戦で前年度までに過去16年連続インターハイ出場を果たしている強豪校の海南大附属高校と激戦を繰り広げるも、惜敗。しかし、2戦目で前年度のインターハイ県予選ベスト4である武里高校に勝利すると、3戦目では宿敵の陵南を破り準優勝。優勝した海南大附属とともにインターハイ出場を果たす。
      </p>
      <p>
        広島県で行われるインターハイのトーナメント1回戦で、湘北は大阪府代表校の豊玉高校と対戦し、勝利。2回戦では、前年度までのインターハイで3連覇を果たした秋田県代表校の山王工業高校と対戦する。一時は20点以上の差をつけられるが、驚異的な粘りで反撃する。花道は負傷した背中の痛みに耐えながらプレーを続け、試合終了間際のジャンプシュートによる決勝点で湘北を逆転勝利に導く。しかし、全てを出し切った湘北は、続く3回戦で愛知県代表校の愛和学院高校との対戦で、ウソのようにボロ負けした。
        インターハイ後、3年生は赤木と木暮が引退し、三井のみ残留。新キャプテンにリョータが就任し、晴子を新たにマネージャーとして迎えるなど、チームは冬の選抜に向けて、新体制となる。流川は全日本ジュニアの代表に選ばれ、花道はリハビリを続けながら再びコートに立てる時を待つ。
      </p>
    </Container>
    <SchoolList />
  </>
)

BlockPage: React.FC = () => {
  const { t } = useTranslation();
  const { block = "" } = useParams<PageParams>();
  const { setBlocks } = React.useContext(BlocksInfoContext);

  const isValid = isValidBlockHash(block);

  React.useEffect(() => {
    document.body.scrollTop = 0; // For Safari
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
    setBlocks([block]);

    return () => setBlocks([]);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [block]);

  return (
    <>
      <Helmet>
        <title>
          {t("common.block")} {block}
        </title>
      </Helmet>
      <Title level={3}>{t("common.block")}</Title>
      {isValid ? <BlockDetails /> : null}
      {!isValid || !block ? (
        <Card bordered={false}>
          <Title level={3}>{t("pages.block.missingBlock")}</Title>
          <Text>{t("pages.block.missingBlockInfo")}</Text>
        </Card>
      ) : null}
    </>
  );
}

export default function GlobalStyles() {
  return (
    <>
      <Global styles={globalStyles} />
      <Helmet>
        <meta name="viewport" content="initial-scale=1, viewport-fit=cover" />
      </Helmet>
    </>
  );
}

render() {
		const { title, narrowLayout } = this.props;
		return (
			<React.Fragment>

				<StaticQuery
					query={query}
					render={(data) => (
						<Helmet titleTemplate={data.site.siteMetadata.titleTemplate} defaultTitle={data.site.siteMetadata.defaultTitle}>
							{title && <title>{title}</title>}
							<meta property='og:type' content='website' />
							<meta property='og:title' content={`${title ? `${title} - ` : ''}${data.site.siteMetadata.defaultTitle}`} />
							<meta property='og:site_name' content='DataCore' />
							<meta property='og:image' content={`${data.site.siteMetadata.baseUrl}/media/logo.png`} />
							<meta property='og:description' content={data.site.siteMetadata.defaultDescription} />
							<link id='defaultThemeCSS' rel='stylesheet' type='text/css' href={withPrefix('styles/semantic.slate.css')} />
							<link rel='stylesheet' type='text/css' href={withPrefix('styles/easymde.min.css')} />
							<script src={withPrefix('styles/theming.js')} type='text/javascript' />
							<script src={withPrefix('polyfills.js')} type='text/javascript' />
						</Helmet>
					)}
				/>
				<TopMenu narrowLayout={narrowLayout}>
					{this.props.children}
				</TopMenu>
			</React.Fragment>
		);
	}

export default function NoMatchPage(): ReactElement {
  return (
    <form tabIndex={-1}>
      <Helmet>
        <title>404 Page not found | UsTaxes.org</title>
      </Helmet>
      <h2>Page not found</h2>
      <p>
        We can&apos;t find the page you&apos;re looking for! Don&apos;t worry,
        your progress has been saved
      </p>
      <SingleButtons text={'Go Back Home'} url={'/'} />
    </form>
  )
}

Title = (props: { title: string }) => (
  <Helmet>
    <title>CasperLabs Clarity - {props.title}</title>
  </Helmet>
)

Panel = () => {
    const isMobile = useMediaQuery('(max-width: 1200px)')

    let dispatch = useDispatch();
    let sidebarToggled = useSelector(selectSidebarToggled);
    let clientFlowData = useSelector(selectClientFlowData);
    let steps = ["Subject", "Class", "Tutor", "Time", "Notes"];
    let params : string = useLocation().pathname;
    params = params.split('/')[2];

    let body = <FormParent />;
    if (params === 'meetings') {
        body = <Meetings mode="Client" />;
    } else if (params === 'history') {
        body = <ClientHistory />;
    } else if (params === 'settings') {
        body = <ClientSettings />
    }

    const renderSteps = () => {
       let flow = [];

       if(!isMobile)
        flow.push(<FlowText>Schedule a tutoring session {"→"} &nbsp;</FlowText>);

       steps.forEach((step, index) => {
           if(clientFlowData.currentStep === index)
               if(isMobile)
                   flow.push(<FlowText><b style={{color: 'black'}}> {index + 1} </b></FlowText>)
               else
                   flow.push(<FlowText><b style={{color: 'black'}}> {step} </b></FlowText>)
           else
               if(isMobile)
                   flow.push(<FlowText>{index + 1}</FlowText>)
               else
                   flow.push(<FlowText> {step} </FlowText>)

           if(index != 4)
               flow.push(<FlowText> &nbsp; {"→"} &nbsp;</FlowText>)
       })

        return flow;
    }

    return (
        <div id="panel-wrapper" style={{width:'100vw'}}>
            <Helmet>
                <meta charSet="utf-8" />
                <title>TutorBase - Dashboard</title>
            </Helmet>

            <Navbar className={classNames("navbar-expand-lg", "navbar-light", "bg-light", "border-bottom", "shadow")}>
                <Button className="btn-red" id="menu-toggle" onClick={() => {
                    dispatch(actions.toggleSidebar());
                }} style={{marginLeft: '0.5em'}}>
                    ☰
                </Button>

                
            </Navbar>

            <div className="container-fluid" style={{maxWidth:'100vw'}}>
            {params === "schedule" && (
                    <Container >
                        {renderSteps().map((component, index) => (
                            <React.Fragment key={index}>
                                { component }
                            </React.Fragment>
                        ))}
                    </Container>
                )}
                {body}</div>
        </div>
    );
}

MainLayout: FC<Props> = ({ side, title, children}) => {
  const [showSearchDrawer, setShowSearchDrawer] = useState(false)
  const [showNav, setShowNav] = useState(false)  // only works in mobile
  const history = useHistory()

  useEffect(() => {
    // 페이지 이동시 초기화
    history.listen(() => setShowNav(false))
  }, [history])

  useSubscribe(ShowSearchDrawer, (isOpened: boolean) => setShowSearchDrawer(isOpened))

  const customTokens = getTokens({})

  return (
    <ThemeProvider theme={{orbit: customTokens}}>
      <Parent>
        <Helmet>
          <title>{getTitle(title)}</title>
        </Helmet>
        <Header>
          <Logo>PA</Logo>
          <Menu onClick={() => history.push(`/tags/all`)}>
            <FaRegNewspaper size="21px" />
          </Menu>
          <Menu onClick={() => history.push(`/notes`)}>
            <FaRegStickyNote size="21px" />
          </Menu>
          <Menu onClick={() => setShowSearchDrawer(true)}>
            <FaSearch size="21px" />
          </Menu>
          <Menu onClick={() => history.push(`/settings`)}>
            <FaRegSun size="21px" />
          </Menu>
          <DarkModeSwitch />
        </Header>
        <Middle>
          <Mobile>
            <When condition={side != null}>
              <Menu onClick={() => setShowNav(true)}>
                <MenuHamburger/>
              </Menu>
            </When>
          </Mobile>
        </Middle>
        <Body>
          <Desktop>
            <When condition={side != null}>
              <Nav>
                {side}
              </Nav>
            </When>
          </Desktop>
          <Main>
            {children}
            <SearchDrawer
              show={showSearchDrawer}
              onClose={() => setShowSearchDrawer(false)}
            />
          </Main>
        </Body>
        <Drawer
          shown={showNav}
          onClose={() => setShowNav(false)}
        >
          <Stack>
            {side}
          </Stack>
        </Drawer>
      </Parent>
    </ThemeProvider>
  )
}