From 91c0627cdde4ab8c3385b61fac619a397dd5eee5 Mon Sep 17 00:00:00 2001 From: Joost De Cock Date: Sun, 26 Mar 2023 09:18:51 +0200 Subject: [PATCH] chore(shared): Shared navigation and wordmark tweaks --- sites/dev/components/layouts/docs.mjs | 2 +- sites/dev/components/navigation/aside.mjs | 28 -- sites/dev/components/navigation/primary.mjs | 244 --------------- sites/dev/pages/index.mjs | 2 +- sites/shared/components/navigation/aside.mjs | 36 +-- .../shared/components/navigation/primary.mjs | 280 ++++++++---------- sites/shared/components/wordmark.mjs | 20 +- sites/shared/config/tailwind-force.html | 3 + 8 files changed, 163 insertions(+), 452 deletions(-) delete mode 100644 sites/dev/components/navigation/aside.mjs delete mode 100644 sites/dev/components/navigation/primary.mjs diff --git a/sites/dev/components/layouts/docs.mjs b/sites/dev/components/layouts/docs.mjs index a51eecff970..69f0ce18855 100644 --- a/sites/dev/components/layouts/docs.mjs +++ b/sites/dev/components/layouts/docs.mjs @@ -2,7 +2,7 @@ import { useRouter } from 'next/router' // Components import Link from 'next/link' -import { AsideNavigation } from 'site/components/navigation/aside.mjs' +import { AsideNavigation } from 'shared/components/navigation/aside.mjs' import { ThemePicker } from 'shared/components/theme-picker/index.mjs' import { Breadcrumbs } from 'shared/components/breadcrumbs.mjs' import { HomeIcon } from 'shared/components/icons.mjs' diff --git a/sites/dev/components/navigation/aside.mjs b/sites/dev/components/navigation/aside.mjs deleted file mode 100644 index 47b7923556e..00000000000 --- a/sites/dev/components/navigation/aside.mjs +++ /dev/null @@ -1,28 +0,0 @@ -import { MainSections, ActiveSection } from './primary.mjs' -import Link from 'next/link' - -export const AsideNavigation = ({ app, mobileOnly = false, before = [], after = [] }) => ( - -) diff --git a/sites/dev/components/navigation/primary.mjs b/sites/dev/components/navigation/primary.mjs deleted file mode 100644 index 42ddd463d59..00000000000 --- a/sites/dev/components/navigation/primary.mjs +++ /dev/null @@ -1,244 +0,0 @@ -import Link from 'next/link' -import orderBy from 'lodash.orderby' -import { TutorialIcon, GuideIcon, HelpIcon, DocsIcon } from 'shared/components/icons.mjs' -import { Breadcrumbs } from 'shared/components/breadcrumbs.mjs' - -// List of icons matched to top-level slug -const icons = { - guides: (className = '') => , - howtos: (className = '') => , - reference: (className = '') => , - tutorials: (className = '') => , -} - -/* helper method to order nav entries */ -const order = (obj) => orderBy(obj, ['o', 't'], ['asc', 'asc']) - -// Component for the collapse toggle -// Exported for re-use -export const Chevron = ({ w = 8, m = 2 }) => ( - - - -) - -// Helper method to filter out the real children -const currentChildren = (current) => - Object.values(order(current)).filter((entry) => typeof entry === 'object') - -// Shared classes for links -// Exported for re-use -export const linkClasses = ` - py-1 - text-base text-base-content sm:text-base-content - hover:text-secondary - sm:hover:text-secondary -` - -// Figure out whether a page is on the path to the active page -const isActive = (slug, active) => { - if (slug === active) return true - let result = true - const slugParts = slug.split('/') - const activeParts = active.split('/') - for (const i in slugParts) { - if (slugParts[i] !== activeParts[i]) result = false - } - - return result -} - -// Component that renders a sublevel of navigation -const SubLevel = ({ nodes = {}, active = '' }) => ( -
    - {currentChildren(nodes).map((child) => - Object.keys(child).length > 4 ? ( -
  • -
    - - - - - {child.s === active ? <>• : <>°} - - {child.t} - - - - - -
    -
  • - ) : ( -
  • - - - - {child.s === active ? <>• : <>°} - - {child.t} - - -
  • - ) - )} -
-) - -export const Icons = ({ - app, - ulClasses = '', - linkClasses = `grow text-lg lg:text-xl py-1 text-base-content sm:text-base-content - hover:text-secondary sm:hover:text-secondary hover:cursor-pointer - flex flex-col items-center`, - linkStyle = {}, -}) => { - console.log(app.state) - if (!app.state?.nav) return null - - const output = [] - for (const page of order(app.state.nav)) { - output.push( -
  • - - {icons[page.s] ? icons[page.s]('w-14 h-14') : } - {page.t} - -
  • - ) - } - - return
      {output}
    -} - -export const MainSections = ({ app }) => { - if (!app.state.sections) return null - const output = [] - for (const page of app.state.sections) { - const act = isActive(page.s, app.state.slug) - const txt = ( - <> - {icons[page.s] ? ( - icons[page.s](`w-6 h-6 ${act ? 'text-secondary-content' : ''}`) - ) : ( - - )} - {page.t} - - ) - - const item = ( -
  • - {act ? ( - - {txt} - - ) : ( - - {txt} - - )} -
  • - ) - output.push(item) - } - - return
      {output}
    -} - -export const ActiveSection = ({ app }) => ( -
    - {app.state.crumbs ? ( -
    - -
    - ) : null} -
    - -
    -
    -) diff --git a/sites/dev/pages/index.mjs b/sites/dev/pages/index.mjs index 015b4496937..190fa106700 100644 --- a/sites/dev/pages/index.mjs +++ b/sites/dev/pages/index.mjs @@ -6,7 +6,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import Head from 'next/head' import { PageWrapper } from 'shared/components/wrappers/page.mjs' import { BareLayout } from 'site/components/layouts/bare.mjs' -import { Icons } from 'site/components/navigation/primary.mjs' +import { Icons } from 'shared/components/navigation/primary.mjs' import { Highlight } from 'shared/components/mdx/highlight.mjs' import { Popout } from 'shared/components/popout.mjs' import { WebLink } from 'shared/components/web-link.mjs' diff --git a/sites/shared/components/navigation/aside.mjs b/sites/shared/components/navigation/aside.mjs index b090086d07b..47b7923556e 100644 --- a/sites/shared/components/navigation/aside.mjs +++ b/sites/shared/components/navigation/aside.mjs @@ -1,26 +1,28 @@ -import { PrimaryNavigation } from './primary.mjs' +import { MainSections, ActiveSection } from './primary.mjs' +import Link from 'next/link' -export const AsideNavigation = ({ app, slug, mobileOnly = false, before = [], after = [] }) => ( +export const AsideNavigation = ({ app, mobileOnly = false, before = [], after = [] }) => ( ) diff --git a/sites/shared/components/navigation/primary.mjs b/sites/shared/components/navigation/primary.mjs index ab0fd25a073..42ddd463d59 100644 --- a/sites/shared/components/navigation/primary.mjs +++ b/sites/shared/components/navigation/primary.mjs @@ -1,42 +1,18 @@ import Link from 'next/link' import orderBy from 'lodash.orderby' -import { - RssIcon, - TutorialIcon, - GuideIcon, - HelpIcon, - DocsIcon, - DesignIcon, - BoxIcon, - CogIcon, - UserIcon, - CommunityIcon, - ShowcaseIcon, -} from 'shared/components/icons.mjs' - -// Don't show children for blog and showcase posts -const keepClosed = ['blog', 'showcase'] +import { TutorialIcon, GuideIcon, HelpIcon, DocsIcon } from 'shared/components/icons.mjs' +import { Breadcrumbs } from 'shared/components/breadcrumbs.mjs' // List of icons matched to top-level slug const icons = { - accessories: (className = '') => , - account: (className = '') => , - blocks: (className = '') => , - blog: (className = '') => , - community: (className = '') => , - designs: (className = '') => , - docs: (className = '') => , - garments: (className = '') => , guides: (className = '') => , howtos: (className = '') => , reference: (className = '') => , - showcase: (className = '') => , tutorials: (className = '') => , - utilities: (className = '') => , } /* helper method to order nav entries */ -const order = (obj) => orderBy(obj, ['__order', '__title'], ['asc', 'asc']) +const order = (obj) => orderBy(obj, ['o', 't'], ['asc', 'asc']) // Component for the collapse toggle // Exported for re-use @@ -59,9 +35,9 @@ const currentChildren = (current) => // Shared classes for links // Exported for re-use -export const linkClasses = `text-lg lg:text-xl +export const linkClasses = ` py-1 - text-base-content sm:text-base-content + text-base text-base-content sm:text-base-content hover:text-secondary sm:hover:text-secondary ` @@ -80,12 +56,12 @@ const isActive = (slug, active) => { } // Component that renders a sublevel of navigation -const SubLevel = ({ nodes = {}, active }) => ( +const SubLevel = ({ nodes = {}, active = '' }) => (
      {currentChildren(nodes).map((child) => Object.keys(child).length > 4 ? ( -
    • -
      +
    • +
      ( `} > - + - {child.__slug === active ? <>• : <>°} - - - {child.__linktitle || child.__title} + {child.s === active ? <>• : <>°} + {child.t} @@ -135,38 +110,37 @@ const SubLevel = ({ nodes = {}, active }) => (
    • ) : ( -
    • +
    • - + - {child.__slug === active ? <>• : <>°} - - - {child.__linktitle || child.__title} + {child.s === active ? <>• : <>°} + {child.t}
    • @@ -175,79 +149,24 @@ const SubLevel = ({ nodes = {}, active }) => (
    ) -// Component that renders a toplevel of navigation -const TopLevel = ({ icon, title, current, slug, hasChildren = false, active }) => ( -
    - - {icon} - - {title} - - {hasChildren && } - - {hasChildren && } -
    -) - -const Navigation = ({ app, active, className = '' }) => { - if (!app.navigation) return null - const output = [] - for (const page of order(app.navigation)) - output.push( - ° - ) - } - title={page.__title} - slug={page.__slug} - hasChildren={keepClosed.indexOf(page.__slug) === -1} - nav={app.navigation} - current={order(app.navigation[page.__slug])} - active={active} - /> - ) - - return
    {output}
    -} - export const Icons = ({ app, ulClasses = '', - liClasses = '', linkClasses = `grow text-lg lg:text-xl py-1 text-base-content sm:text-base-content hover:text-secondary sm:hover:text-secondary hover:cursor-pointer flex flex-col items-center`, linkStyle = {}, }) => { - if (!app.navigation) return null + console.log(app.state) + if (!app.state?.nav) return null + const output = [] - for (const page of order(app.navigation)) { + for (const page of order(app.state.nav)) { output.push( -
  • - - - {icons[page.__slug] ? icons[page.__slug]('w-14 h-14') : } - {page.__title} - +
  • + + {icons[page.s] ? icons[page.s]('w-14 h-14') : } + {page.t}
  • ) @@ -256,11 +175,70 @@ export const Icons = ({ return
      {output}
    } -export const PrimaryNavigation = ({ app, active, before = [], after = [] }) => ( - +export const MainSections = ({ app }) => { + if (!app.state.sections) return null + const output = [] + for (const page of app.state.sections) { + const act = isActive(page.s, app.state.slug) + const txt = ( + <> + {icons[page.s] ? ( + icons[page.s](`w-6 h-6 ${act ? 'text-secondary-content' : ''}`) + ) : ( + + )} + {page.t} + + ) + + const item = ( +
  • + {act ? ( + + {txt} + + ) : ( + + {txt} + + )} +
  • + ) + output.push(item) + } + + return
      {output}
    +} + +export const ActiveSection = ({ app }) => ( +
    + {app.state.crumbs ? ( +
    + +
    + ) : null} +
    + +
    +
    ) diff --git a/sites/shared/components/wordmark.mjs b/sites/shared/components/wordmark.mjs index 2bb48593e57..67de81d6473 100644 --- a/sites/shared/components/wordmark.mjs +++ b/sites/shared/components/wordmark.mjs @@ -2,16 +2,16 @@ import Link from 'next/link' export const InnerWordMark = () => ( - F - r - e - e - S - e - w - i - n - g + F + r + e + e + S + e + w + i + n + g ) diff --git a/sites/shared/config/tailwind-force.html b/sites/shared/config/tailwind-force.html index b8834598b90..6cae19ceebe 100644 --- a/sites/shared/config/tailwind-force.html +++ b/sites/shared/config/tailwind-force.html @@ -19,3 +19,6 @@ + + +