From dbab735eeb627bc9dfedf79e7f00ce2c523d7acf Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sun, 9 Apr 2023 15:57:25 +0200 Subject: [PATCH] wip(shared): Work on modal menu --- sites/dev/package.json | 1 - sites/org/components/header/index.mjs | 50 ++++++++++++++----- .../org/components/navigation/modal-menu.mjs | 22 ++++++++ .../components/navigation/sections-menu.mjs | 44 ++++++++++++++++ sites/org/hooks/use-navigation.mjs | 31 +++++++++++- sites/org/pages/blog/index.mjs | 35 +++++++++++++ sites/org/pages/community/index.mjs | 35 +++++++++++++ sites/org/pages/designs/index.mjs | 35 +++++++++++++ sites/org/pages/docs/index.mjs | 10 ++-- sites/org/pages/showcase/index.mjs | 35 +++++++++++++ sites/shared/components/navigation/aside.mjs | 4 +- .../shared/components/navigation/primary.mjs | 22 ++++---- .../components/navigation/sections.en.yaml | 10 ++++ sites/shared/components/v3-wip.mjs | 11 ++++ sites/shared/components/wrappers/page.mjs | 2 +- sites/shared/config/tailwind-force.html | 12 +++++ 16 files changed, 327 insertions(+), 32 deletions(-) create mode 100644 sites/org/components/navigation/modal-menu.mjs create mode 100644 sites/org/components/navigation/sections-menu.mjs create mode 100644 sites/org/pages/blog/index.mjs create mode 100644 sites/org/pages/community/index.mjs create mode 100644 sites/org/pages/designs/index.mjs create mode 100644 sites/org/pages/showcase/index.mjs create mode 100644 sites/shared/components/v3-wip.mjs diff --git a/sites/dev/package.json b/sites/dev/package.json index 7f52370fc84..b45fc67184a 100644 --- a/sites/dev/package.json +++ b/sites/dev/package.json @@ -19,7 +19,6 @@ "dev": "next dev -p 8000", "develop": "next dev -p 8000", "lint": "next lint", - "i18n": "SITE=dev node ../shared/prebuild/i18n-only.mjs", "prebuild": "SITE=dev node --experimental-json-modules ../shared/prebuild/index.mjs", "serve": "pm2 start npm --name 'dev' -- run start", "start": "yarn prebuild && yarn dev" diff --git a/sites/org/components/header/index.mjs b/sites/org/components/header/index.mjs index abbb3171d3d..22d9c744335 100644 --- a/sites/org/components/header/index.mjs +++ b/sites/org/components/header/index.mjs @@ -26,11 +26,10 @@ import { useTranslation } from 'next-i18next' import { ModalThemePicker } from 'shared/components/modal/theme-picker.mjs' import { ModalLocalePicker } from 'shared/components/modal/locale-picker.mjs' import { Search, ns as searchNs } from 'site/components/search.mjs' +import { ModalMenu } from 'site/components/navigation/modal-menu.mjs' export const ns = [...new Set(['header', ...themeNs, ...localeNs])] -const MainMenu = () =>

Main menu here

- const NavButton = ({ href, label, color, children, onClick = false, extraClasses = '' }) => { const className = 'border-0 px-1 lg:px-4 text-base py-3 lg:py-4 text-center flex flex-col items-center 2xl:w-36 ' + @@ -54,37 +53,64 @@ const NavSpacer = () => (
|
) +export const colors = { + menu: 'red', + designs: 'orange', + showcase: 'yellow', + docs: 'lime', + blog: 'green', + community: 'cyan', + theme: 'blue', + language: 'indigo', + search: 'violet', + account: 'purple', +} + const NavIcons = ({ app, setSearch }) => { const { t } = useTranslation(['header']) const iconSize = 'h-6 w-6 lg:h-12 lg:w-12' return ( <> - app.setModal()} label={t('header:menu')} color="red"> + app.setModal()} + label={t('header:menu')} + color={colors.menu} + > - + - + - + @@ -93,22 +119,22 @@ const NavIcons = ({ app, setSearch }) => { app.setModal()} label={t('header:theme')} - color="blue" + color={colors.theme} > app.setModal()} label={t('header:language')} - color="indigo" + color={colors.language} > - setSearch(true)} label={t('header:search')} color="violet"> + setSearch(true)} label={t('header:search')} color={colors.search}> - + diff --git a/sites/org/components/navigation/modal-menu.mjs b/sites/org/components/navigation/modal-menu.mjs new file mode 100644 index 00000000000..9b74c8c2cfa --- /dev/null +++ b/sites/org/components/navigation/modal-menu.mjs @@ -0,0 +1,22 @@ +import { SectionsMenu } from 'site/components/navigation/sections-menu.mjs' +import { useTranslation } from 'next-i18next' +import { ActiveSection, ns as primaryNs } from 'shared/components/navigation/primary.mjs' + +export const ns = primaryNs + +export const ModalMenu = ({ app }) => { + const { t } = useTranslation(ns) + + return ( +
+
+

{t('mainSections')}

+ +
+
+

{t('currentSection')}

+ +
+
+ ) +} diff --git a/sites/org/components/navigation/sections-menu.mjs b/sites/org/components/navigation/sections-menu.mjs new file mode 100644 index 00000000000..163927c005a --- /dev/null +++ b/sites/org/components/navigation/sections-menu.mjs @@ -0,0 +1,44 @@ +import Link from 'next/link' +import { icons, isActive, ns as sectionsNs } from 'shared/components/navigation/primary.mjs' +import { useTranslation } from 'next-i18next' +import orderBy from 'lodash.orderby' +import { colors } from 'site/components/header/index.mjs' + +export const ns = sectionsNs + +export const SectionsMenu = ({ app }) => { + const { t } = useTranslation(ns) + if (!app.state.sections) return null + + // Ensure each page as an `o` key so we can put them in order + const sortableSections = app.state.sections.map((s) => ({ ...s, o: s.o ? s.o : s.t })) + const output = [] + for (const page of orderBy(sortableSections, ['o', 't'])) { + const act = isActive(page.s, app.state.slug) + + const item = ( + +
+
+

{page.t}

+ {icons[page.s] ? icons[page.s]('w-10 h-10') : } +
+
+ {t(page.s + 'About')} +
+
+ + ) + output.push(item) + } + + return
{output}
+} diff --git a/sites/org/hooks/use-navigation.mjs b/sites/org/hooks/use-navigation.mjs index c36438be060..ecd19e5366d 100644 --- a/sites/org/hooks/use-navigation.mjs +++ b/sites/org/hooks/use-navigation.mjs @@ -21,17 +21,46 @@ const sitePages = (locale, t = false) => { // Handle t not being present if (!t) t = (string) => string const pages = { + // Top-level pages that are the sections menu + designs: { + t: t('sections:designs'), + s: 'designs', + o: 10, + }, + showcase: { + t: t('sections:showcase'), + s: 'showcase', + o: 20, + }, + docs: { + t: t('sections:docs'), + s: 'docs', + o: 30, + }, + blog: { + t: t('sections:blog'), + s: 'blog', + o: 40, + }, + community: { + t: t('sections:community'), + s: 'community', + o: 50, + }, account: { t: t('sections:account'), s: 'account', + o: 60, }, + // Top-level pages that are not in the sections menu profile: { t: t('yourProfile'), s: 'profile', h: 1, }, + // Not translated, this is a developer page typography: { - t: 'Typography', // Not translated, this is a developer page + t: 'Typography', s: 'typography', h: 1, }, diff --git a/sites/org/pages/blog/index.mjs b/sites/org/pages/blog/index.mjs new file mode 100644 index 00000000000..7ab3c0120dd --- /dev/null +++ b/sites/org/pages/blog/index.mjs @@ -0,0 +1,35 @@ +// Hooks +import { useApp } from 'shared/hooks/use-app.mjs' +// Dependencies +import { serverSideTranslations } from 'next-i18next/serverSideTranslations' +// Components +import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs' +import { V3Wip } from 'shared/components/v3-wip.mjs' + +// Translation namespaces used on this page +const namespaces = [...new Set(['designs', ...pageNs])] + +const DesignsPage = (props) => { + const app = useApp(props) + + return ( + +
+ +
+ + ) +} + +export default DesignsPage + +export async function getStaticProps({ locale }) { + return { + props: { + ...(await serverSideTranslations(locale, namespaces)), + page: { + path: ['blog'], + }, + }, + } +} diff --git a/sites/org/pages/community/index.mjs b/sites/org/pages/community/index.mjs new file mode 100644 index 00000000000..fd927071d9a --- /dev/null +++ b/sites/org/pages/community/index.mjs @@ -0,0 +1,35 @@ +// Hooks +import { useApp } from 'shared/hooks/use-app.mjs' +// Dependencies +import { serverSideTranslations } from 'next-i18next/serverSideTranslations' +// Components +import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs' +import { V3Wip } from 'shared/components/v3-wip.mjs' + +// Translation namespaces used on this page +const namespaces = [...new Set(['community', ...pageNs])] + +const CommunityPage = (props) => { + const app = useApp(props) + + return ( + +
+ +
+ + ) +} + +export default CommunityPage + +export async function getStaticProps({ locale }) { + return { + props: { + ...(await serverSideTranslations(locale, namespaces)), + page: { + path: ['community'], + }, + }, + } +} diff --git a/sites/org/pages/designs/index.mjs b/sites/org/pages/designs/index.mjs new file mode 100644 index 00000000000..aa8c6b51c21 --- /dev/null +++ b/sites/org/pages/designs/index.mjs @@ -0,0 +1,35 @@ +// Hooks +import { useApp } from 'shared/hooks/use-app.mjs' +// Dependencies +import { serverSideTranslations } from 'next-i18next/serverSideTranslations' +// Components +import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs' +import { V3Wip } from 'shared/components/v3-wip.mjs' + +// Translation namespaces used on this page +const namespaces = [...new Set(['designs', ...pageNs])] + +const DesignsPage = (props) => { + const app = useApp(props) + + return ( + +
+ +
+ + ) +} + +export default DesignsPage + +export async function getStaticProps({ locale }) { + return { + props: { + ...(await serverSideTranslations(locale, namespaces)), + page: { + path: ['designs'], + }, + }, + } +} diff --git a/sites/org/pages/docs/index.mjs b/sites/org/pages/docs/index.mjs index 478de5660f2..e98e406b9ac 100644 --- a/sites/org/pages/docs/index.mjs +++ b/sites/org/pages/docs/index.mjs @@ -8,6 +8,7 @@ import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs' import { MdxWrapper } from 'shared/components/wrappers/mdx.mjs' import { ReadMore } from 'shared/components/mdx/read-more.mjs' import { jargon } from 'site/jargon.mjs' +import { V3Wip } from 'shared/components/v3-wip.mjs' // Translation namespaces used on this page const namespaces = [...new Set(['docs', ...pageNs])] @@ -15,14 +16,11 @@ const namespaces = [...new Set(['docs', ...pageNs])] const DocsPage = (props) => { const app = useApp(props) - // We don't need all MDX components here, just ReadMore - const components = { - //ReadMore: (props) => , - } - return ( -
+
+ +
) } diff --git a/sites/org/pages/showcase/index.mjs b/sites/org/pages/showcase/index.mjs new file mode 100644 index 00000000000..b1d89cd4a07 --- /dev/null +++ b/sites/org/pages/showcase/index.mjs @@ -0,0 +1,35 @@ +// Hooks +import { useApp } from 'shared/hooks/use-app.mjs' +// Dependencies +import { serverSideTranslations } from 'next-i18next/serverSideTranslations' +// Components +import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs' +import { V3Wip } from 'shared/components/v3-wip.mjs' + +// Translation namespaces used on this page +const namespaces = [...new Set(['designs', ...pageNs])] + +const DesignsPage = (props) => { + const app = useApp(props) + + return ( + +
+ +
+ + ) +} + +export default DesignsPage + +export async function getStaticProps({ locale }) { + return { + props: { + ...(await serverSideTranslations(locale, namespaces)), + page: { + path: ['showcase'], + }, + }, + } +} diff --git a/sites/shared/components/navigation/aside.mjs b/sites/shared/components/navigation/aside.mjs index 6b68c3bb42f..ba82b10e35c 100644 --- a/sites/shared/components/navigation/aside.mjs +++ b/sites/shared/components/navigation/aside.mjs @@ -24,7 +24,9 @@ export const AsideNavigation = ({ app, mobileOnly = false, before = [], after =
{before} - +
+ +
{after}
diff --git a/sites/shared/components/navigation/primary.mjs b/sites/shared/components/navigation/primary.mjs index 2154cbf8c3f..bf5e18ce1c8 100644 --- a/sites/shared/components/navigation/primary.mjs +++ b/sites/shared/components/navigation/primary.mjs @@ -1,12 +1,14 @@ import Link from 'next/link' import orderBy from 'lodash.orderby' import { - TutorialIcon, + CommunityIcon, + DesignIcon, + DocsIcon, GuideIcon, HelpIcon, - DocsIcon, RssIcon, ShowcaseIcon, + TutorialIcon, UserIcon, } from 'shared/components/icons.mjs' import { Breadcrumbs } from 'shared/components/breadcrumbs.mjs' @@ -14,18 +16,19 @@ import { Breadcrumbs } from 'shared/components/breadcrumbs.mjs' export const ns = ['sections'] // List of icons matched to top-level slug -const icons = { +export const icons = { // FreeSewing.dev guides: (className = '') => , howtos: (className = '') => , reference: (className = '') => , tutorials: (className = '') => , // FreeSewing.org - blog: (className = '') => , - showcase: (className = '') => , - docs: (className = '') => , account: (className = '') => , - Account: (className = '') => , + blog: (className = '') => , + designs: (className = '') => , + docs: (className = '') => , + showcase: (className = '') => , + community: (className = '') => , } /* helper method to order nav entries */ @@ -60,8 +63,7 @@ export const linkClasses = ` ` // Figure out whether a page is on the path to the active page -const isActive = (slug, active) => { - console.log({ slug, active }) +export const isActive = (slug, active) => { if (!slug) return false if (slug === active) return true let result = true @@ -251,7 +253,7 @@ export const MainSections = ({ app }) => { } export const ActiveSection = ({ app }) => ( -
+
{app.state.crumbs ? (
diff --git a/sites/shared/components/navigation/sections.en.yaml b/sites/shared/components/navigation/sections.en.yaml index 15ba196a9c8..feed073b08d 100644 --- a/sites/shared/components/navigation/sections.en.yaml +++ b/sites/shared/components/navigation/sections.en.yaml @@ -1,4 +1,14 @@ blog: Blog +blogAbout: News and updates from the FreeSewing community 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 +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 +community: Community +communityAbout: More information about the peope behind FreeSewing and where to fine like-minded makers +mainSections: Main sections +currentSection: Current section diff --git a/sites/shared/components/v3-wip.mjs b/sites/shared/components/v3-wip.mjs new file mode 100644 index 00000000000..77326501508 --- /dev/null +++ b/sites/shared/components/v3-wip.mjs @@ -0,0 +1,11 @@ +import { Popout } from 'shared/components/popout.mjs' + +export const V3Wip = () => ( + +
This is not yet implemented
+

+ This is a work-in-progress to build a new FreeSewing.org website for version 3 of FreeSewing. +

+

This warning indicates that something that should be here is not yet implemented.

+ +) diff --git a/sites/shared/components/wrappers/page.mjs b/sites/shared/components/wrappers/page.mjs index e426e143f5f..681e390e7d4 100644 --- a/sites/shared/components/wrappers/page.mjs +++ b/sites/shared/components/wrappers/page.mjs @@ -85,7 +85,7 @@ export const PageWrapper = ({
app.updateState('modal', false)} > diff --git a/sites/shared/config/tailwind-force.html b/sites/shared/config/tailwind-force.html index 25f0346814f..1a8761f445c 100644 --- a/sites/shared/config/tailwind-force.html +++ b/sites/shared/config/tailwind-force.html @@ -31,4 +31,16 @@
+ +
+
+
+
+
+
+
+
+
+
+