From 5a9f2f8d40bf4f6a558c09b8b521bdb5b4a39ad6 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 15 Jul 2023 16:55:22 +0200 Subject: [PATCH] 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. --- sites/org/components/header/index.mjs | 44 +++++---- sites/org/components/layouts/bare.mjs | 9 +- sites/org/components/layouts/default.mjs | 41 ++++++--- sites/org/components/layouts/docs.mjs | 69 ++++++++++++++ sites/org/components/layouts/none.mjs | 4 - sites/org/components/sanity/page-wrapper.mjs | 4 +- sites/org/hooks/use-navigation.mjs | 89 ++++++++++++------- sites/org/pages/docs/[...slug].mjs | 7 +- sites/org/pages/translation/index.mjs | 80 +++++++++-------- sites/org/pages/translation/join.mjs | 31 ++----- .../pages/translation/suggest-language.mjs | 15 +--- sites/org/pages/welcome/bio.mjs | 2 +- sites/org/pages/welcome/compare.mjs | 2 +- sites/org/pages/welcome/img.mjs | 2 +- sites/org/pages/welcome/index.mjs | 2 +- sites/org/pages/welcome/newsletter.mjs | 2 +- sites/org/pages/welcome/units.mjs | 2 +- sites/org/pages/welcome/username.mjs | 2 +- sites/shared/components/base-layout.mjs | 36 ++++++++ .../shared/components/mdx/tabbed-example.mjs | 10 ++- .../shared/components/navigation/primary.mjs | 2 + .../components/navigation/sections.en.yaml | 8 +- .../shared/components/navigation/sitenav.mjs | 6 +- sites/shared/components/prev-next.mjs | 8 +- sites/shared/components/wrappers/layout.mjs | 3 +- sites/shared/components/wrappers/page.mjs | 10 ++- 26 files changed, 318 insertions(+), 172 deletions(-) create mode 100644 sites/org/components/layouts/docs.mjs delete mode 100644 sites/org/components/layouts/none.mjs create mode 100644 sites/shared/components/base-layout.mjs diff --git a/sites/org/components/header/index.mjs b/sites/org/components/header/index.mjs index 5e4772a6deb..22638aae905 100644 --- a/sites/org/components/header/index.mjs +++ b/sites/org/components/header/index.mjs @@ -16,6 +16,7 @@ import { MeasieIcon, PageIcon, PlusIcon, + RssIcon, } from 'shared/components/icons.mjs' import { HeaderWrapper } from 'shared/components/wrappers/header.mjs' import { ModalThemePicker, ns as themeNs } from 'shared/components/modal/theme-picker.mjs' @@ -40,20 +41,20 @@ const NavIcons = ({ setModal, setSearch }) => { - + - + { > + - + + + + + + + setModal()} label={t('header:theme')} - color={colors[6]} + color={colors[8]} > setModal()} label={t('header:language')} - color={colors[7]} + color={colors[9]} > - setSearch(true)} label={t('header:search')} color={colors[8]}> + setSearch(true)} label={t('header:search')} color={colors[10]}> - - - - - - - ) } diff --git a/sites/org/components/layouts/bare.mjs b/sites/org/components/layouts/bare.mjs index 2ca4dc76693..8e24baf0d36 100644 --- a/sites/org/components/layouts/bare.mjs +++ b/sites/org/components/layouts/bare.mjs @@ -1,10 +1,3 @@ -import { AsideNavigation } from 'shared/components/navigation/aside.mjs' - export const ns = [] -export const BareLayout = (props) => ( - <> - - {props.children} - -) +export const BareLayout = (props) => props.children diff --git a/sites/org/components/layouts/default.mjs b/sites/org/components/layouts/default.mjs index 14baac87c2a..117aa757ff3 100644 --- a/sites/org/components/layouts/default.mjs +++ b/sites/org/components/layouts/default.mjs @@ -1,26 +1,43 @@ +// Hooks import { useContext } from 'react' -// Components -import { AsideNavigation, ns as navNs } from 'shared/components/navigation/aside.mjs' -import { Breadcrumbs } from 'shared/components/breadcrumbs.mjs' +import { useNavigation } from 'site/hooks/use-navigation.mjs' +// Context import { NavigationContext } from 'shared/context/navigation-context.mjs' +// Components +//import { AsideNavigation, ns as navNs } from 'shared/components/navigation/aside.mjs' +//import { Breadcrumbs } from 'shared/components/breadcrumbs.mjs' +//import { NavigationContext } from 'shared/context/navigation-context.mjs' -export const ns = navNs +import { BaseLayout, BaseLayoutLeft, BaseLayoutWide } from 'shared/components/base-layout.mjs' +import { NavLinks, Breadcrumbs, MainSections } from 'shared/components/navigation/sitenav.mjs' -export const DefaultLayout = ({ children = [], pageTitle = false }) => { - const { crumbs } = useContext(NavigationContext) +export const ns = [] //navNs + +export const DefaultLayout = ({ children = [], slug, pageTitle = false }) => { + const { siteNav } = useNavigation({ ignoreControl: true }) return ( -
- -
+ + + {slug ? ( + <> + + + + ) : ( +

Slug not passed to layout

+ )} + + + {pageTitle && (
- + {slug && }

{pageTitle}

)}
{children}
-
-
+ + ) } diff --git a/sites/org/components/layouts/docs.mjs b/sites/org/components/layouts/docs.mjs new file mode 100644 index 00000000000..3d7e0f38bbf --- /dev/null +++ b/sites/org/components/layouts/docs.mjs @@ -0,0 +1,69 @@ +// Hooks +import { useNavigation } from 'site/hooks/use-navigation.mjs' +// Components +import Head from 'next/head' +import { + BaseLayout, + BaseLayoutLeft, + BaseLayoutProse, + BaseLayoutRight, +} from 'shared/components/base-layout.mjs' +import { NavLinks, Breadcrumbs, MainSections } from 'shared/components/navigation/sitenav.mjs' +import { Toc } from 'shared/components/mdx/toc.mjs' +import { MdxMetaData } from 'shared/components/mdx/meta.mjs' +import { PrevNext } from 'shared/components/prev-next.mjs' + +export const ns = [] //navNs + +export const DocsLayout = ({ children = [], slug, frontmatter }) => { + const { siteNav } = useNavigation({ ignoreControl: true }) + + return ( + <> + + + + + + + + + + + + + {frontmatter.title} - FreeSewing.org + + + + + + + + + +
+ +

{frontmatter.title}

+
+ +
+
+ {children} + + + + + +
+ +
+ + + + ) +} diff --git a/sites/org/components/layouts/none.mjs b/sites/org/components/layouts/none.mjs deleted file mode 100644 index e2f0b504142..00000000000 --- a/sites/org/components/layouts/none.mjs +++ /dev/null @@ -1,4 +0,0 @@ -export const ns = [] - -// This layout adds nothing -export const NoLayout = ({ children = [] }) => children diff --git a/sites/org/components/sanity/page-wrapper.mjs b/sites/org/components/sanity/page-wrapper.mjs index b91a0b586d9..07f057f38f3 100644 --- a/sites/org/components/sanity/page-wrapper.mjs +++ b/sites/org/components/sanity/page-wrapper.mjs @@ -17,10 +17,12 @@ export const SanityPageWrapper = ({ author = {}, page = {}, namespaces = ['common'], + slug, }) => { const { t } = useTranslation(namespaces) + console.log({ slug }) return ( - + diff --git a/sites/org/hooks/use-navigation.mjs b/sites/org/hooks/use-navigation.mjs index 09dd266d31a..e1f22275e69 100644 --- a/sites/org/hooks/use-navigation.mjs +++ b/sites/org/hooks/use-navigation.mjs @@ -14,8 +14,17 @@ import { useRouter } from 'next/router' * - home page => no navvigation shown * - /contact => Added below * - * Note: Set 'h' to truthy to not show a top-level entry as a section - * Note: Set 'c' to set the control level to hide things from users + * Remember Mc_Shifton: + * Note: Set 'm' to truthy to show this as a main section in the side-navigation (optional) + * Note: Set 'c' to set the control level to hide things from users (optional) + * Note: Set 's' to the slug (optional insofar as it's not a real page (a spacer for the header)) + * Note: Set '_' to never show the page in the site navigation (like the tags pages) + * Note: Set 'h' to indicate this is a top-level page that should be hidden from the side-nav (like search) + * Note: Set 'i' when something should be included as top-level in the collapse side-navigation (optional) + * Note: Set 'f' to add the page to the footer + * Note: Set 't' to the title + * Note: Set 'o' to set the order (optional) + * Note: Set 'n' to mark this as a noisy entry that should always be closed unless active (like blog) */ export const ns = ['account', 'sections', 'design', 'tags', 'designs'] @@ -26,55 +35,59 @@ const sitePages = (t = false, control = 99) => { const pages = { // Top-level pages that are the sections menu designs: { - t: t('sections:designs'), + m: 1, s: 'designs', - o: 10, + t: t('sections:designs'), + n: 1, tags: { - t: t('design:tags'), + _: 1, s: 'designs/tags', - h: 1, + t: t('design:tags'), o: 'aaa', }, }, patterns: { - t: t('sections:patterns'), + m: 1, s: 'patterns', - o: 14, + t: t('sections:patterns'), }, sets: { - t: t('sections:sets'), + m: 1, s: 'sets', - o: 16, + t: t('sections:sets'), }, community: { - t: t('sections:community'), + m: 1, s: 'community', - o: 40, + t: t('sections:community'), }, account: { - t: t('sections:account'), + m: 1, s: 'account', - o: 99, + t: t('sections:account'), + n: 1, }, // Top-level pages that are not in the sections menu apikeys: { - t: t('apikeys'), + _: 1, s: 'apikeys', h: 1, + t: t('apikeys'), }, curate: { - t: t('curate'), s: 'curate', h: 1, + t: t('curate'), sets: { t: t('curateSets'), s: 'curate/sets', }, }, new: { - t: t('new'), + m: 1, s: 'new', h: 1, + t: t('new'), pattern: { t: t('patternNew'), s: 'new/pattern', @@ -87,56 +100,54 @@ const sitePages = (t = false, control = 99) => { }, }, profile: { - t: t('yourProfile'), s: 'profile', h: 1, + t: t('yourProfile'), }, translation: { - t: t('translation'), s: 'translation', h: 1, + t: t('translation'), join: { t: t('translation:joinATranslationTeam'), s: 'translation', - h: 1, }, 'suggest-language': { t: t('translation:suggestLanguage'), s: 'translation', - h: 1, }, }, sitemap: { - t: t('sitemap'), s: 'sitemap', h: 1, + t: t('sitemap'), }, // Not translated, this is a developer page typography: { - t: 'Typography', s: 'typography', h: 1, + t: 'Typography', }, } for (const section in conf.account.fields) { for (const [field, controlScore] of Object.entries(conf.account.fields[section])) { if (Number(control) >= controlScore) pages.account[field] = { - t: t(`account:${field}`), s: `account/${field}`, + t: t(`account:${field}`), } } } if (Number(control) >= conf.account.fields.developer.apikeys) pages.new.apikey = { - t: t('newApikey'), s: 'new/apikey', + t: t('newApikey'), o: 30, } pages.account.reload = { - t: t(`account:reload`), s: `account/reload`, + t: t(`account:reload`), } for (const design in designs) { // pages.designs[design] = { @@ -144,21 +155,22 @@ const sitePages = (t = false, control = 99) => { // s: `designs/${design}`, // } pages.new.pattern[design] = { - t: t(`account:generateANewThing`, { thing: t(`designs:${design}.t`) }), s: `new/${design}`, + t: t(`account:generateANewThing`, { thing: t(`designs:${design}.t`) }), } } for (const tag of tags) { pages.designs.tags[tag] = { - t: t(`tags:${tag}`), s: `designs/tags/${tag}`, + t: t(`tags:${tag}`), } } return pages } -export const useNavigation = ({ ignoreControl = false }, extra = []) => { +export const useNavigation = (param = {}, extra = []) => { + const { ignoreControl = false } = param // Passing in the locale is not very DRY so let's just grab it from the router const { locale } = useRouter() // We need translation @@ -174,8 +186,23 @@ export const useNavigation = ({ ignoreControl = false }, extra = []) => { objUpdate(siteNav, _path, _data) } - // Set order on docs key (from from prebuild siteNav) - siteNav.docs.o = 30 + // Apply some tweaks + siteNav.blog.m = 1 + siteNav.blog.n = 1 + siteNav.showcase.m = 1 + siteNav.showcase.n = 1 + siteNav.docs.m = 1 + + // Set order on main sections + siteNav.designs.o = 10 + siteNav.docs.o = 20 + siteNav.blog.o = 30 + siteNav.showcase.o = 40 + siteNav.community.o = 50 + siteNav.patterns.o = 60 + siteNav.sets.o = 70 + siteNav.account.o = 80 + siteNav.new.o = 90 return { siteNav, // Site navigation diff --git a/sites/org/pages/docs/[...slug].mjs b/sites/org/pages/docs/[...slug].mjs index 164055b37b5..e4b149ad1f5 100644 --- a/sites/org/pages/docs/[...slug].mjs +++ b/sites/org/pages/docs/[...slug].mjs @@ -11,6 +11,7 @@ import { Spinner } from 'shared/components/spinner.mjs' import { components } from 'shared/components/mdx/index.mjs' import { MdxWrapper } from 'shared/components/wrappers/mdx.mjs' import { Toc } from 'shared/components/mdx/toc.mjs' +import { DocsLayout } from 'site/components/layouts/docs.mjs' /* * PLEASE READ THIS BEFORE YOU TRY TO REFACTOR THIS PAGE @@ -61,7 +62,11 @@ const HeadInfo = ({ frontmatter, locale, slug }) => ( ) export const Page = ({ page, frontmatter, slug, locale, MDX }) => ( - + } + >
{frontmatter.toc && frontmatter.toc.length > 0 && ( diff --git a/sites/org/pages/translation/index.mjs b/sites/org/pages/translation/index.mjs index 4dc9c061cc6..8addf490a5a 100644 --- a/sites/org/pages/translation/index.mjs +++ b/sites/org/pages/translation/index.mjs @@ -4,7 +4,6 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { useTranslation } from 'next-i18next' // Components import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs' -import { BareLayout as Layout } from 'site/components/layouts/bare.mjs' import { TranslationStatus } from 'site/components/crowdin/status.mjs' import { Translators } from 'site/components/crowdin/translators.mjs' import { Popout } from 'shared/components/popout.mjs' @@ -20,26 +19,29 @@ const TranslationPage = ({ page }) => { const title = t('translation:translation') return ( - -
- - -

{title}

+ +

{t('translation:proudlyMultilingual')}

- -
{t('translation:getInvolved')}
-

{t('translation:teamEffort')}

- - {t('translation:joinTheTeam')} - - - {t('translation:seeTranslationGuide')} - - +
+ +
{t('translation:getInvolved')}
+

{t('translation:teamEffort')}

+

+ + {t('translation:joinTheTeam')} + +

+

+ + {t('translation:seeTranslationGuide')} + +

+ +

Translation Status

@@ -91,23 +93,29 @@ const TranslationPage = ({ page }) => { {t('locales:uk')} - -
{t('translation:addLanguage1')}
-

- {t('translation:addLanguage2')} -
- {t('translation:addLanguage3')} -

- - {t('translation:suggestLanguage')} - - - {t('translation:seeTranslationGuide')} - - +
+ +
{t('translation:addLanguage1')}
+

+ {t('translation:addLanguage2')} +
+ {t('translation:addLanguage3')} +

+

+ + {t('translation:suggestLanguage')} + +

+

+ + {t('translation:seeTranslationGuide')} + +

+ +
) diff --git a/sites/org/pages/translation/join.mjs b/sites/org/pages/translation/join.mjs index 69dfb124762..e8c7882b783 100644 --- a/sites/org/pages/translation/join.mjs +++ b/sites/org/pages/translation/join.mjs @@ -5,8 +5,6 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { useTranslation } from 'next-i18next' // Components import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs' -import { BareLayout as Layout } from 'site/components/layouts/bare.mjs' -import { Breadcrumbs } from 'shared/components/breadcrumbs.mjs' // Translation namespaces used on this page const namespaces = [...new Set(pageNs), 'translation', 'locales'] @@ -31,26 +29,15 @@ const TranslationJoinPage = ({ page }) => { const title = t('translation:joinATranslationTeam') return ( - -
- - -

{title}

-

- {t('translation:joinIntro')} -
- {t('translation:thatIsAwesome')} {t('translation:thanksSoMuch')} -

- - - -
+ +

+ {t('translation:joinIntro')} +
+ {t('translation:thatIsAwesome')} {t('translation:thanksSoMuch')} +

+ + + ) } diff --git a/sites/org/pages/translation/suggest-language.mjs b/sites/org/pages/translation/suggest-language.mjs index 5093b8e1ddc..d50e37bc51b 100644 --- a/sites/org/pages/translation/suggest-language.mjs +++ b/sites/org/pages/translation/suggest-language.mjs @@ -5,8 +5,6 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { useTranslation } from 'next-i18next' // Components import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs' -import { BareLayout as Layout } from 'site/components/layouts/bare.mjs' -import { Breadcrumbs } from 'shared/components/breadcrumbs.mjs' // Translation namespaces used on this page const namespaces = [...new Set(pageNs), 'translation', 'locales'] @@ -32,17 +30,8 @@ const SuggestLanguagePage = ({ page }) => { const title = t('translation:suggestLanguage') return ( - -
- - -

{title}

+ +

{t('translation:suggestIntro')}
diff --git a/sites/org/pages/welcome/bio.mjs b/sites/org/pages/welcome/bio.mjs index bebff4f259b..e6a23a06d44 100644 --- a/sites/org/pages/welcome/bio.mjs +++ b/sites/org/pages/welcome/bio.mjs @@ -32,7 +32,7 @@ const DynamicBio = dynamic( const WelcomeBioPage = ({ page }) => ( -

+
diff --git a/sites/org/pages/welcome/compare.mjs b/sites/org/pages/welcome/compare.mjs index 90a51a5d676..7ee01d5f3fd 100644 --- a/sites/org/pages/welcome/compare.mjs +++ b/sites/org/pages/welcome/compare.mjs @@ -32,7 +32,7 @@ const DynamicCompare = dynamic( const WelcomeComparePage = ({ page }) => ( -
+
diff --git a/sites/org/pages/welcome/img.mjs b/sites/org/pages/welcome/img.mjs index 82eaaa13a10..1938bbfcbec 100644 --- a/sites/org/pages/welcome/img.mjs +++ b/sites/org/pages/welcome/img.mjs @@ -37,7 +37,7 @@ const WelcomeImgPage = ({ page }) => { return ( -
+
diff --git a/sites/org/pages/welcome/index.mjs b/sites/org/pages/welcome/index.mjs index f27106ba26b..068e4c0c9a4 100644 --- a/sites/org/pages/welcome/index.mjs +++ b/sites/org/pages/welcome/index.mjs @@ -32,7 +32,7 @@ const DynamicControl = dynamic( const WelcomePage = ({ page }) => ( -
+
diff --git a/sites/org/pages/welcome/newsletter.mjs b/sites/org/pages/welcome/newsletter.mjs index 50f8d585df7..c84d67dc15c 100644 --- a/sites/org/pages/welcome/newsletter.mjs +++ b/sites/org/pages/welcome/newsletter.mjs @@ -38,7 +38,7 @@ const WelcomeNewsletterPage = ({ page }) => { return ( -
+
diff --git a/sites/org/pages/welcome/units.mjs b/sites/org/pages/welcome/units.mjs index 51d5d687499..53aa2c38f62 100644 --- a/sites/org/pages/welcome/units.mjs +++ b/sites/org/pages/welcome/units.mjs @@ -32,7 +32,7 @@ const DynamicImperial = dynamic( const WelcomeUnitsPage = ({ page }) => ( -
+
diff --git a/sites/org/pages/welcome/username.mjs b/sites/org/pages/welcome/username.mjs index 6325c5aeac7..10745df4fb4 100644 --- a/sites/org/pages/welcome/username.mjs +++ b/sites/org/pages/welcome/username.mjs @@ -37,7 +37,7 @@ const WelcomeUsernamePage = ({ page }) => { return ( -
+
diff --git a/sites/shared/components/base-layout.mjs b/sites/shared/components/base-layout.mjs new file mode 100644 index 00000000000..1edbea306f9 --- /dev/null +++ b/sites/shared/components/base-layout.mjs @@ -0,0 +1,36 @@ +/* + * The default full-page FreeSewing layout + */ +export const BaseLayout = ({ children = [] }) => ( +
+ {children} +
+) + +/* + * The left column of the default layout + */ +export const BaseLayoutLeft = ({ children = [] }) => ( +
{children}
+) + +/* + * The right column of the default layout + */ +export const BaseLayoutRight = ({ children = [] }) => ( +
{children}
+) + +/* + * The main column for prose (text like docs and so on) + */ +export const BaseLayoutProse = ({ children = [] }) => ( +
{children}
+) + +/* + * The central column for wide content (no max-width) + */ +export const BaseLayoutWide = ({ children = [] }) => ( +
{children}
+) diff --git a/sites/shared/components/mdx/tabbed-example.mjs b/sites/shared/components/mdx/tabbed-example.mjs index ce2dbd446c2..262ab82e425 100644 --- a/sites/shared/components/mdx/tabbed-example.mjs +++ b/sites/shared/components/mdx/tabbed-example.mjs @@ -9,11 +9,13 @@ import { Pattern, PatternXray } from '@freesewing/react-components' // Get code from children export const asText = (reactEl) => { - if (typeof reactEl.props.children === 'string') return reactEl.props.children - if (Array.isArray(reactEl.props.children)) { - return reactEl.props.children.map((el) => (typeof el === 'string' ? el : asText(el))).join('') + if (reactEl) { + if (typeof reactEl.props.children === 'string') return reactEl.props.children + if (Array.isArray(reactEl.props.children)) { + return reactEl.props.children.map((el) => (typeof el === 'string' ? el : asText(el))).join('') + } + if (typeof reactEl.props.children === 'object') return asText(reactEl.props.children) } - if (typeof reactEl.props.children === 'object') return asText(reactEl.props.children) return '' } diff --git a/sites/shared/components/navigation/primary.mjs b/sites/shared/components/navigation/primary.mjs index 875b3a04423..f7039e0c5e0 100644 --- a/sites/shared/components/navigation/primary.mjs +++ b/sites/shared/components/navigation/primary.mjs @@ -17,6 +17,7 @@ import { FreeSewingIcon, HeartIcon, BulletIcon, + PlusIcon, GitHubIcon, } from 'shared/components/icons.mjs' import { Breadcrumbs } from 'shared/components/breadcrumbs.mjs' @@ -43,6 +44,7 @@ export const icons = { community: (className = '') => , sets: (className = '') => , patterns: (className = '') => , + new: (className = '') => , // Lab code: (className = '') => , diff --git a/sites/shared/components/navigation/sections.en.yaml b/sites/shared/components/navigation/sections.en.yaml index 8bed7ea443e..3351658db24 100644 --- a/sites/shared/components/navigation/sections.en.yaml +++ b/sites/shared/components/navigation/sections.en.yaml @@ -4,7 +4,7 @@ showcase: Showcase showcaseAbout: Examples and inspiration from the FreeSewing community using our designs docs: Documentation docsAbout: In-depth documenation for all our designs, our website, and much more -account: Account +account: Your Account accountAbout: Manage your account settings and preferences, and your presonal data designs: Designs designsAbout: Our library of designs that you can turn into made-to-measure patterns with a few clicks @@ -24,12 +24,12 @@ referenceAbout: Reference holds technical descriptions of the underlying technol trainingAbout: Training materials are the most in-depth and strive to teach you a new skill. mainSections: Main sections currentSection: Current section -sets: Measurements Sets -patterns: Patterns +sets: Your Measurements Sets +patterns: Your Patterns curate: Curate curateSets: Curate Sets code: Code patternsAbout: Lists the patterns that you have stored in your FreeSewing account setsAbout: Lists the measurements sets that you have stored in your FreeSewing account codeAbout: Here you can find (links to) the Freesewing source code - +new: New... diff --git a/sites/shared/components/navigation/sitenav.mjs b/sites/shared/components/navigation/sitenav.mjs index caa5ead424f..9b1c9e950f9 100644 --- a/sites/shared/components/navigation/sitenav.mjs +++ b/sites/shared/components/navigation/sitenav.mjs @@ -22,7 +22,7 @@ import { icons } from 'shared/components/navigation/primary.mjs' */ const onlyValidChildren = (tree, hIsOk = false) => orderBy(tree, ['o', 't'], ['asc', 'asc']).filter( - (entry) => typeof entry === 'object' && entry.t !== 'spacer' && !entry.h && !entry.m + (entry) => typeof entry === 'object' && entry.t !== 'spacer' && !entry.h ) /* @@ -39,7 +39,7 @@ const onlyMainSections = (tree) => orderBy(tree, ['o', 't'], ['asc', 'asc']).filter((entry) => entry.m) const SectionLink = ({ skey, tree, slug }) => - tree[skey].s === slug ? ( + tree[skey]._ ? null : tree[skey].s === slug ? ( // Underscore means always hide <> {tree[skey].t} @@ -189,7 +189,7 @@ export const NavLinks = ({ slug, siteNav, ignoreControl = false }) => ( {onlyValidChildren(siteNav).map((page, i) => (
  • - {pageHasChildren(page) &&
    } + {pageHasChildren(page) && !page.n &&
    }
    • ))} diff --git a/sites/shared/components/prev-next.mjs b/sites/shared/components/prev-next.mjs index 44233c578e4..50139cc48fd 100644 --- a/sites/shared/components/prev-next.mjs +++ b/sites/shared/components/prev-next.mjs @@ -31,7 +31,7 @@ const NextPage = ({ t, s }) => ) -export const PrevNext = ({ slug }) => { +export const PrevNext = ({ slug, noPrev = false }) => { // Grab site navigation and slug lookup table from the useNavigatin hook const { siteNav, slugLut } = useNavigation() @@ -42,13 +42,13 @@ export const PrevNext = ({ slug }) => { const iNext = index === slugLut.length - 1 ? 0 : index + 1 // Subtract 1 for the previous page, unless it's the first page - const iPrev = index === 0 ? slugLut.length - 1 : index - 1 + const iPrev = noPrev ? false : index === 0 ? slugLut.length - 1 : index - 1 // Get the next page from the siteNav object const next = get(siteNav, slugLut[iNext].split('/')) // Get the previous page from the siteNav object - const prev = get(siteNav, slugLut[iPrev].split('/')) + const prev = noPrev ? false : get(siteNav, slugLut[iPrev].split('/')) // Return content return ( @@ -58,7 +58,7 @@ export const PrevNext = ({ slug }) => { 'items-start pt-6 mt-6 border-t-2 border-solid border-r-0 border-l-0 border-b-0' } > - + {noPrev ? : }
    ) diff --git a/sites/shared/components/wrappers/layout.mjs b/sites/shared/components/wrappers/layout.mjs index 240f351683c..cd11979c0e6 100644 --- a/sites/shared/components/wrappers/layout.mjs +++ b/sites/shared/components/wrappers/layout.mjs @@ -12,6 +12,7 @@ export const LayoutWrapper = ({ setSearch, noSearch = false, header = false, + footer = true, }) => { const ChosenHeader = header ? header : Header @@ -70,7 +71,7 @@ export const LayoutWrapper = ({
    )} -
    ) } diff --git a/sites/shared/components/wrappers/page.mjs b/sites/shared/components/wrappers/page.mjs index 2a806b60cdf..8e2db65ce37 100644 --- a/sites/shared/components/wrappers/page.mjs +++ b/sites/shared/components/wrappers/page.mjs @@ -30,11 +30,17 @@ export const PageWrapper = (props) => { // Title is typically set in props.t but check props.title too const pageTitle = props.t ? props.t : props.title ? props.title : null + /* + * Slug should come from page props.path not from context + * which won't be available in SSR + */ + const slug = path.join('/') + /* * Contexts */ const { modalContent } = useContext(ModalContext) - const { setNavigation, slug } = useContext(NavigationContext) + const { setNavigation } = useContext(NavigationContext) /* * This forces a re-render upon initial bootstrap of the app @@ -73,7 +79,7 @@ export const PageWrapper = (props) => { //const [search, setSearch] = useState(false) // Helper object to pass props down (keeps things DRY) - const childProps = { footer, header, pageTitle } + const childProps = { footer, header, pageTitle, slug } // Make layout prop into a (uppercase) component const Layout = layout