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

71 lines
2.3 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'
fix(org): Homepage tweaks on mobile
2023-08-28 14:28:07 +02:00
import { nsMerge } from 'shared/utils.mjs'
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'
dry up headers and layout wrappers. use sticky side navs
2023-06-20 16:52:00 -05:00
import { LayoutWrapper, ns as layoutNs } from 'shared/components/wrappers/layout.mjs'
chore(shared): Made it more clear that there's a default layout
2023-07-15 10:45:44 +02:00
import { DefaultLayout, ns as defaultLayoutNs } from 'site/components/layouts/default.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'
wip(dev): Refactoring navigation
2023-03-26 06:50:59 +02:00
fix(org): Homepage tweaks on mobile
2023-08-28 14:28:07 +02:00
export const ns = nsMerge(layoutNs, defaultLayoutNs, 'common')
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
*/
chore: Fixed linter issues
2023-07-21 10:16:32 +02:00
const { layout = DefaultLayout, footer = true, header = false, children = [], path = [] } = 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
wip(shared): Changes to layouts This will break the org build, but we need to rip out sanity anyway so I don't think it's worth obsessing over it now. I've essentially changes the default layout and added a new navigation component.
2023-07-15 16:55:22 +02:00
/*
* Slug should come from page props.path not from context
* which won't be available in SSR
*/
const slug = path.join('/')
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
*/
shared component for views that have patterns and side menus
2023-06-23 17:45:50 -05:00
const { modalContent } = useContext(ModalContext)
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
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
*/
feat(org): Ported themes to ESM and made more things themeable
2023-07-29 14:21:59 +02:00
const { theme } = useTheme()
wip(dev): Refactoring navigation
2023-03-26 06:50:59 +02:00
const [currentTheme, setCurrentTheme] = useState()
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
// Helper object to pass props down (keeps things DRY)
wip(shared): Changes to layouts This will break the org build, but we need to rip out sanity anyway so I don't think it's worth obsessing over it now. I've essentially changes the default layout and added a new navigation component.
2023-07-15 16:55:22 +02:00
const childProps = { footer, header, pageTitle, slug }
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>
shared component for views that have patterns and side menus
2023-06-23 17:45:50 -05:00
{typeof modalContent === 'function' ? modalContent() : modalContent}
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>
</SwipeWrapper>
wip(dev): Refactoring navigation
2023-03-26 06:50:59 +02:00
)
}
Copy permalink