VSinerva/freesewing
1
0
Fork 0
Code Activity
freesewing/sites/shared/components/wrappers/page.mjs

102 lines
2.8 KiB
JavaScript
Raw Normal View History

wip(dev): Refactoring navigation
2023-03-26 06:50:59 +02:00
// Dependencies
wip(shared): Removed useApp hook in favor of contexts This removes the useApp hook from all org pages in favor of various context. This means there is no longer global state that gets passed around, instead each component that requires access to something shared (like account, or navigation) can just use the context instead. This is a first step, as a lot of shared components stil rely on app not to mention the dev and lab sites.
2023-04-28 21:23:06 +02:00
import React, { useState, useEffect, useContext } from 'react'
chore: Fix linter warnings
2023-05-20 15:47:56 +02:00
//import { useHotkeys } from 'react-hotkeys-hook'
wip(dev): Refactoring navigation
2023-03-26 06:50:59 +02:00
// Hooks
import { useTheme } from 'shared/hooks/use-theme.mjs'
// Components
rudimentary implementation of blog pages
2023-06-17 16:57:17 -05:00
import Head from 'next/head'
feat(shared): Ported modal from app-wide state to context
2023-04-25 17:33:34 +02:00
import { SwipeWrapper } from 'shared/components/wrappers/swipes.mjs'
wip(dev): Refactoring navigation
2023-03-26 06:50:59 +02:00
import { LayoutWrapper, ns as layoutNs } from 'site/components/wrappers/layout.mjs'
wip(shared): Nav prebuild changes
2023-03-28 16:47:07 +02:00
import { DocsLayout, ns as docsNs } from 'site/components/layouts/docs.mjs'
wip(dev): Refactoring navigation
2023-03-26 06:50:59 +02:00
import { Feeds } from 'site/components/feeds.mjs'
wip(shared): Removed useApp hook in favor of contexts This removes the useApp hook from all org pages in favor of various context. This means there is no longer global state that gets passed around, instead each component that requires access to something shared (like account, or navigation) can just use the context instead. This is a first step, as a lot of shared components stil rely on app not to mention the dev and lab sites.
2023-04-28 21:23:06 +02:00
import { ModalContext } from 'shared/context/modal-context.mjs'
import { NavigationContext } from 'shared/context/navigation-context.mjs'
wip(dev): Refactoring navigation
2023-03-26 06:50:59 +02:00
wip(shared): Nav prebuild changes
2023-03-28 16:47:07 +02:00
export const ns = [...new Set([...layoutNs, ...docsNs])]
wip(dev): Refactoring navigation
2023-03-26 06:50:59 +02:00
/* This component should wrap all page content */
wip(shared): Removed useApp hook in favor of contexts This removes the useApp hook from all org pages in favor of various context. This means there is no longer global state that gets passed around, instead each component that requires access to something shared (like account, or navigation) can just use the context instead. This is a first step, as a lot of shared components stil rely on app not to mention the dev and lab sites.
2023-04-28 21:23:06 +02:00
export const PageWrapper = (props) => {
/*
* Deconstruct props
*/
wip(org): Started working on v3 workbench
2023-05-08 19:28:03 +02:00
const {
layout = DocsLayout,
footer = true,
header = false,
children = [],
path = [],
locale = 'en',
} = props
wip(shared): Removed useApp hook in favor of contexts This removes the useApp hook from all org pages in favor of various context. This means there is no longer global state that gets passed around, instead each component that requires access to something shared (like account, or navigation) can just use the context instead. This is a first step, as a lot of shared components stil rely on app not to mention the dev and lab sites.
2023-04-28 21:23:06 +02:00
// Title is typically set in props.t but check props.title too
const pageTitle = props.t ? props.t : props.title ? props.title : null
fix(dev): Load MDX dynamically to reduce the number of routes Prior to this commit we'd generate a page for each MDX document as that avoids having to load MDX dynamically (which can be tricky) or through static props (which causes issues with serialization). However, Vercel (which hosts for us) has an upper limit on the number of routes, and because of this extensive documentation, we blew passed it with this approach. This changes to a dynamic resolution of MDX content with an async import in the useEffect hook. This should drastically reduce the number of routes and make Vercel happy. I didn't do much digging into the effects of this on SSR. If it turns out it's causes issues, we'll deal with it at that time.
2023-05-20 13:22:36 +02:00
/*
* Contexts
*/
const { modalContent } = useContext(ModalContext)
const { setNavigation, slug } = useContext(NavigationContext)
wip(dev): Refactoring navigation
2023-03-26 06:50:59 +02:00
/*
* This forces a re-render upon initial bootstrap of the app
* This is needed to avoid hydration errors because theme can't be set reliably in SSR
*/
fix(shared): Issue with theme caused by linter fix
2023-05-20 14:47:29 +02:00
const [theme] = useTheme()
wip(dev): Refactoring navigation
2023-03-26 06:50:59 +02:00
const [currentTheme, setCurrentTheme] = useState()
wip(org): Work on curation of sets
2023-05-08 14:03:47 +02:00
const [navupdates, setNavupdates] = useState(0)
fix(shared): Issue with theme caused by linter fix
2023-05-20 14:47:29 +02:00
useEffect(() => setCurrentTheme(theme), [currentTheme, theme])
wip(dev): Refactoring navigation
2023-03-26 06:50:59 +02:00
wip(shared): Removed useApp hook in favor of contexts This removes the useApp hook from all org pages in favor of various context. This means there is no longer global state that gets passed around, instead each component that requires access to something shared (like account, or navigation) can just use the context instead. This is a first step, as a lot of shared components stil rely on app not to mention the dev and lab sites.
2023-04-28 21:23:06 +02:00
/*
* Update navigation context with title and path
*/
useEffect(() => {
fix(dev): Load MDX dynamically to reduce the number of routes Prior to this commit we'd generate a page for each MDX document as that avoids having to load MDX dynamically (which can be tricky) or through static props (which causes issues with serialization). However, Vercel (which hosts for us) has an upper limit on the number of routes, and because of this extensive documentation, we blew passed it with this approach. This changes to a dynamic resolution of MDX content with an async import in the useEffect hook. This should drastically reduce the number of routes and make Vercel happy. I didn't do much digging into the effects of this on SSR. If it turns out it's causes issues, we'll deal with it at that time.
2023-05-20 13:22:36 +02:00
// Only update if a new page was loaded
fix little errors in draft-for-curated-set flow. other cleanup
2023-05-24 08:37:29 -05:00
if (path.join('/') !== slug) {
wip(org): Work on curation of sets
2023-05-08 14:03:47 +02:00
setNavigation({
title: pageTitle,
locale,
path,
})
setNavupdates(navupdates + 1)
fix(dev): Load MDX dynamically to reduce the number of routes Prior to this commit we'd generate a page for each MDX document as that avoids having to load MDX dynamically (which can be tricky) or through static props (which causes issues with serialization). However, Vercel (which hosts for us) has an upper limit on the number of routes, and because of this extensive documentation, we blew passed it with this approach. This changes to a dynamic resolution of MDX content with an async import in the useEffect hook. This should drastically reduce the number of routes and make Vercel happy. I didn't do much digging into the effects of this on SSR. If it turns out it's causes issues, we'll deal with it at that time.
2023-05-20 13:22:36 +02:00
}
}, [path, pageTitle, slug])
wip(shared): Removed useApp hook in favor of contexts This removes the useApp hook from all org pages in favor of various context. This means there is no longer global state that gets passed around, instead each component that requires access to something shared (like account, or navigation) can just use the context instead. This is a first step, as a lot of shared components stil rely on app not to mention the dev and lab sites.
2023-04-28 21:23:06 +02:00
wip(dev): Refactoring navigation
2023-03-26 06:50:59 +02:00
/*
* Hotkeys (keyboard actions)
*/
// Trigger search with /
chore(shared): Disable search for now
2023-05-20 14:55:16 +02:00
//useHotkeys('/', (evt) => {
// evt.preventDefault()
// setSearch(true)
//})
wip(dev): Refactoring navigation
2023-03-26 06:50:59 +02:00
// Search state
chore(shared): Disable search for now
2023-05-20 14:55:16 +02:00
//const [search, setSearch] = useState(false)
wip(dev): Refactoring navigation
2023-03-26 06:50:59 +02:00
// Helper object to pass props down (keeps things DRY)
wip(org): Started working on v3 workbench
2023-05-08 19:28:03 +02:00
const childProps = { footer, header, pageTitle }
wip(dev): Refactoring navigation
2023-03-26 06:50:59 +02:00
// Make layout prop into a (uppercase) component
const Layout = layout
// Return wrapper
return (
wip(shared): Removed useApp hook in favor of contexts This removes the useApp hook from all org pages in favor of various context. This means there is no longer global state that gets passed around, instead each component that requires access to something shared (like account, or navigation) can just use the context instead. This is a first step, as a lot of shared components stil rely on app not to mention the dev and lab sites.
2023-04-28 21:23:06 +02:00
<SwipeWrapper>
rudimentary implementation of blog pages
2023-06-17 16:57:17 -05:00
{pageTitle && (
<Head>
<meta property="og:title" content={pageTitle} key="title" />
</Head>
)}
wip(shared): Removed useApp hook in favor of contexts This removes the useApp hook from all org pages in favor of various context. This means there is no longer global state that gets passed around, instead each component that requires access to something shared (like account, or navigation) can just use the context instead. This is a first step, as a lot of shared components stil rely on app not to mention the dev and lab sites.
2023-04-28 21:23:06 +02:00
<div
data-theme={currentTheme} // This facilitates CSS selectors
key={currentTheme} // This forces the data-theme update
>
<Feeds />
<LayoutWrapper {...childProps}>
{Layout ? <Layout {...childProps}>{children}</Layout> : children}
</LayoutWrapper>
{modalContent}
</div>
</SwipeWrapper>
wip(dev): Refactoring navigation
2023-03-26 06:50:59 +02:00
)
}
Copy permalink