2023-01-29 17:36:15 +01:00
|
|
|
// Hooks
|
2022-05-25 18:35:20 +02:00
|
|
|
import React, { useState, useEffect } from 'react'
|
|
|
|
|
import { useSwipeable } from 'react-swipeable'
|
|
|
|
|
import { useRouter } from 'next/router'
|
|
|
|
|
import { useHotkeys } from 'react-hotkeys-hook'
|
2023-01-29 17:36:15 +01:00
|
|
|
// Components
|
2023-01-12 11:40:56 +01:00
|
|
|
import Head from 'next/head'
|
2023-01-29 17:36:15 +01:00
|
|
|
import { LayoutWrapper } from 'site/components/wrappers/layout.mjs'
|
|
|
|
|
import { DocsLayout } from 'site/components/layouts/docs.mjs'
|
|
|
|
|
import { Modal } from 'shared/components/modal.mjs'
|
|
|
|
|
import { Loader } from 'shared/components/loader.mjs'
|
2022-05-25 18:35:20 +02:00
|
|
|
|
|
|
|
|
/* This component should wrap all page content */
|
2023-01-29 17:36:15 +01:00
|
|
|
export const PageWrapper = ({
|
2022-10-02 21:58:34 +02:00
|
|
|
title = 'FIXME: No title set',
|
|
|
|
|
noSearch = false,
|
|
|
|
|
app = false,
|
2023-01-29 17:36:15 +01:00
|
|
|
layout = DocsLayout,
|
2022-10-02 21:58:34 +02:00
|
|
|
crumbs = false,
|
|
|
|
|
children = [],
|
2022-05-25 18:35:20 +02:00
|
|
|
}) => {
|
|
|
|
|
const swipeHandlers = useSwipeable({
|
2022-10-02 21:58:34 +02:00
|
|
|
onSwipedLeft: () => (app.primaryMenu ? app.setPrimaryMenu(false) : null),
|
|
|
|
|
onSwipedRight: () => (app.primaryMenu ? null : app.setPrimaryMenu(true)),
|
|
|
|
|
trackMouse: true,
|
2022-05-25 18:35:20 +02:00
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
const slug = router.asPath.slice(1)
|
|
|
|
|
|
2022-12-03 11:25:02 -06:00
|
|
|
useEffect(() => app.setSlug(slug), [slug, app])
|
2022-05-25 18:35:20 +02:00
|
|
|
|
|
|
|
|
// Trigger search with Ctrl+k
|
|
|
|
|
useHotkeys('ctrl+k', (evt) => {
|
|
|
|
|
evt.preventDefault()
|
|
|
|
|
setSearch(true)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const [search, setSearch] = useState(false)
|
|
|
|
|
|
|
|
|
|
const childProps = {
|
|
|
|
|
app: app,
|
|
|
|
|
title: title,
|
2022-05-31 14:47:34 +02:00
|
|
|
crumbs: crumbs,
|
2022-10-02 21:58:34 +02:00
|
|
|
search,
|
|
|
|
|
setSearch,
|
|
|
|
|
toggleSearch: () => setSearch(!search),
|
2022-05-25 18:35:20 +02:00
|
|
|
noSearch: noSearch,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const Layout = layout
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div
|
|
|
|
|
ref={swipeHandlers.ref}
|
|
|
|
|
onMouseDown={swipeHandlers.onMouseDown}
|
|
|
|
|
data-theme={app.theme}
|
2022-06-07 20:50:33 +02:00
|
|
|
key={app.theme} // This forces the data-theme update
|
2022-05-25 18:35:20 +02:00
|
|
|
>
|
2023-01-12 11:40:56 +01:00
|
|
|
<Head>
|
|
|
|
|
<meta property="og:title" content={`${title} - FreeSewing.dev`} key="title" />
|
|
|
|
|
<title>{title} - FreeSewing.dev</title>
|
|
|
|
|
</Head>
|
2022-05-25 18:35:20 +02:00
|
|
|
<LayoutWrapper {...childProps}>
|
2022-10-02 21:58:34 +02:00
|
|
|
{Layout ? <Layout {...childProps}>{children}</Layout> : children}
|
2022-05-25 18:35:20 +02:00
|
|
|
</LayoutWrapper>
|
2022-09-22 10:09:46 +02:00
|
|
|
{app.popup && <Modal cancel={() => app.setPopup(false)}>{app.popup}</Modal>}
|
2022-10-12 20:40:08 +02:00
|
|
|
{app.loading && <Loader />}
|
2022-05-25 18:35:20 +02:00
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
