feat(shared): Moved breadcrumbs to shared component
This commit is contained in:
Joost De Cock
parent
963e61ab28
commit
2f7d6e4505
6 changed files with 77 additions and 162 deletions
|
|
@ -1,59 +1,7 @@
|
|||
import React from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import Link from 'next/link'
|
||||
// Shared components
|
||||
import Logo from 'shared/components/logos/freesewing.js'
|
||||
import Aside from 'shared/components/navigation/aside'
|
||||
import get from 'lodash.get'
|
||||
import ThemePicker from 'shared/components/theme-picker'
|
||||
|
||||
const PageTitle = ({ app, slug, title }) => {
|
||||
if (title) return <h1>{title}</h1>
|
||||
if (slug) return <h1>{get(app.navigation, slug.split('/')).__title}</h1>
|
||||
|
||||
return <h1>FIXME: This page has no title</h1>
|
||||
}
|
||||
|
||||
const Breadcrumbs = ({ app, slug=false, title }) => {
|
||||
if (!slug) return null
|
||||
const crumbs = []
|
||||
const chunks = slug.split('/')
|
||||
for (const i in chunks) {
|
||||
const j = parseInt(i)+parseInt(1)
|
||||
const page = get(app.navigation, chunks.slice(0,j))
|
||||
if (page) crumbs.push([page.__linktitle, '/'+chunks.slice(0,j).join('/'), (j < chunks.length)])
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="flex flex-row flex-wrap gap-2 font-bold">
|
||||
<li>
|
||||
<Link href="/">
|
||||
<a title="To the homepage" className="text-base-content">
|
||||
<Logo size={24} fill="currentColor" stroke={false}/>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
{crumbs.map(crumb => (
|
||||
<React.Fragment key={crumb[1]}>
|
||||
<li className="text-base-content">»</li>
|
||||
<li>
|
||||
{crumb[2]
|
||||
? (
|
||||
<Link href={crumb[1]}>
|
||||
<a title={crumb[0]} className="text-secondary hover:text-secondary-focus">
|
||||
{crumb[0]}
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
: <span className="text-base-content">{crumb[0]}</span>
|
||||
}
|
||||
</li>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
const DefaultLayout = ({ app, title=false, children=[] }) => {
|
||||
const router = useRouter()
|
||||
const slug = router.asPath.slice(1)
|
||||
|
|
|
|||
|
|
@ -1,62 +1,17 @@
|
|||
import React from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import Link from 'next/link'
|
||||
// Shared components
|
||||
import Logo from 'shared/components/logos/freesewing.js'
|
||||
import Aside from 'shared/components/navigation/aside'
|
||||
import get from 'lodash.get'
|
||||
import ThemePicker from 'shared/components/theme-picker'
|
||||
import Breadcrumbs from 'shared/components/breadcrumbs.js'
|
||||
import { getCrumbs } from 'shared/utils.js'
|
||||
|
||||
const PageTitle = ({ app, slug, title }) => {
|
||||
if (title) return <h1>{title}</h1>
|
||||
if (slug) return <h1>{get(app.navigation, slug.split('/')).__title}</h1>
|
||||
|
||||
return <h1>FIXME: This page has no title</h1>
|
||||
}
|
||||
|
||||
const Breadcrumbs = ({ app, slug=false, title }) => {
|
||||
if (!slug) return null
|
||||
const crumbs = []
|
||||
const chunks = slug.split('/')
|
||||
for (const i in chunks) {
|
||||
const j = parseInt(i)+parseInt(1)
|
||||
const page = get(app.navigation, chunks.slice(0,j))
|
||||
if (page) crumbs.push([page.__linktitle, '/'+chunks.slice(0,j).join('/'), (j < chunks.length)])
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="flex flex-row flex-wrap gap-2 font-bold">
|
||||
<li>
|
||||
<Link href="/">
|
||||
<a title="To the homepage" className="text-base-content">
|
||||
<Logo size={24} fill="currentColor" stroke={false}/>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
{crumbs.map(crumb => (
|
||||
<React.Fragment key={crumb[1]}>
|
||||
<li className="text-base-content">»</li>
|
||||
<li>
|
||||
{crumb[2]
|
||||
? (
|
||||
<Link href={crumb[1]}>
|
||||
<a title={crumb[0]} className="text-secondary hover:text-secondary-focus">
|
||||
{crumb[0]}
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
: <span className="text-base-content">{crumb[0]}</span>
|
||||
}
|
||||
</li>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
const DefaultLayout = ({ app, title=false, children=[] }) => {
|
||||
const DefaultLayout = ({ app, title=false, crumbs=false, children=[] }) => {
|
||||
const router = useRouter()
|
||||
const slug = router.asPath.slice(1)
|
||||
const breadcrumbs = crumbs
|
||||
? crumbs
|
||||
: getCrumbs(app, slug, title)
|
||||
|
||||
return (
|
||||
<div className="m-auto flex flex-row justify-center">
|
||||
|
|
@ -65,8 +20,11 @@ const DefaultLayout = ({ app, title=false, children=[] }) => {
|
|||
<div>
|
||||
{title && (
|
||||
<div className="px-8 xl:pl-8 2xl:pl-16">
|
||||
<Breadcrumbs app={app} slug={slug} title={title} />
|
||||
<PageTitle app={app} slug={slug} title={title} />
|
||||
<Breadcrumbs title={title} crumbs={breadcrumbs} />
|
||||
{title
|
||||
? <h1>{title}</h1>
|
||||
: <h1>{app.getTitle(slug)}</h1>
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -1,65 +1,9 @@
|
|||
import React from 'react'
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import Link from 'next/link'
|
||||
// Shared components
|
||||
import Logo from 'shared/components/logos/freesewing.js'
|
||||
import PrimaryNavigation from 'shared/components/navigation/primary'
|
||||
import get from 'lodash.get'
|
||||
import Right from 'shared/components/icons/right.js'
|
||||
import Left from 'shared/components/icons/left.js'
|
||||
// Site components
|
||||
import Header from 'site/components/header'
|
||||
import Footer from 'site/components/footer'
|
||||
import Search from 'site/components/search'
|
||||
|
||||
const PageTitle = ({ app, slug, title }) => {
|
||||
if (title) return <h1>{title}</h1>
|
||||
if (slug) return <h1>{get(app.navigation, slug.split('/')).__title}</h1>
|
||||
|
||||
return <h1>FIXME: This page has no title</h1>
|
||||
}
|
||||
|
||||
const Breadcrumbs = ({ app, slug=false, title }) => {
|
||||
if (!slug) return null
|
||||
const crumbs = []
|
||||
const chunks = slug.split('/')
|
||||
for (const i in chunks) {
|
||||
const j = parseInt(i)+parseInt(1)
|
||||
const page = get(app.navigation, chunks.slice(0,j))
|
||||
if (page) crumbs.push([page.__linktitle, '/'+chunks.slice(0,j).join('/'), (j < chunks.length)])
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="flex flex-row flex-wrap gap-2 font-bold">
|
||||
<li>
|
||||
<Link href="/">
|
||||
<a title="To the homepage" className="text-base-content">
|
||||
<Logo size={24} fill="currentColor" stroke={false}/>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
{crumbs.map(crumb => (
|
||||
<React.Fragment key={crumb[1]}>
|
||||
<li className="text-base-content">»</li>
|
||||
<li>
|
||||
{crumb[2]
|
||||
? (
|
||||
<Link href={crumb[1]}>
|
||||
<a title={crumb[0]} className="text-secondary hover:text-secondary-focus">
|
||||
{crumb[0]}
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
: <span className="text-base-content">{crumb[0]}</span>
|
||||
}
|
||||
</li>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
const LayoutWrapper = ({
|
||||
app,
|
||||
title=false,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { useState } from 'react'
|
||||
import get from 'lodash.get'
|
||||
import set from 'lodash.set'
|
||||
// Stores state in local storage
|
||||
import useLocalStorage from 'shared/hooks/useLocalStorage.js'
|
||||
|
|
@ -97,6 +98,16 @@ function useApp(full = true) {
|
|||
setNavigation(set(navigation, path, content))
|
||||
}
|
||||
|
||||
/*
|
||||
* Helper method to get title from navigation structure
|
||||
*/
|
||||
const getTitle = slug => get(navigation, slug).__title
|
||||
|
||||
/*
|
||||
* Helper method to construct breadcrumb from navigation structure
|
||||
*/
|
||||
const getBreadcrumb = slug => ({ title: get(navigation, slug).__title, slug })
|
||||
|
||||
return {
|
||||
// Static vars
|
||||
site: 'org',
|
||||
|
|
@ -123,6 +134,10 @@ function useApp(full = true) {
|
|||
|
||||
// State handlers
|
||||
togglePrimaryMenu,
|
||||
|
||||
// Navigation
|
||||
getTitle,
|
||||
getBreadcrumb,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
34
packages/freesewing.shared/components/breadcrumbs.js
Normal file
34
packages/freesewing.shared/components/breadcrumbs.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
import Logo from 'shared/components/logos/freesewing.js'
|
||||
|
||||
const Breadcrumbs = ({ crumbs=[], title }) => (
|
||||
<ul className="flex flex-row flex-wrap gap-2 font-bold">
|
||||
<li>
|
||||
<Link href="/">
|
||||
<a title="FreeSewing" className="text-base-content">
|
||||
<Logo size={24} fill="currentColor" stroke={false}/>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
{crumbs.map(crumb => (
|
||||
<React.Fragment key={crumb[1]}>
|
||||
<li className="text-base-content px-2">»</li>
|
||||
<li>
|
||||
{crumb[2]
|
||||
? (
|
||||
<Link href={crumb[1]}>
|
||||
<a title={crumb[0]} className="text-secondary hover:text-secondary-focus">
|
||||
{crumb[0]}
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
: <span className="text-base-content">{crumb[0]}</span>
|
||||
}
|
||||
</li>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
|
||||
export default Breadcrumbs
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
import get from 'lodash.get'
|
||||
|
||||
// Generic rounding method
|
||||
export const round = (val, decimals=1) => Math.round(val*Math.pow(10, decimals))/Math.pow(10, decimals)
|
||||
|
||||
|
|
@ -106,3 +108,17 @@ export const strapiImage = (img, sizes=['thumbnail', 'xlarge', 'large', 'medium'
|
|||
|
||||
return image
|
||||
}
|
||||
|
||||
export const getCrumbs = (app, slug=false, title) => {
|
||||
if (!slug) return null
|
||||
const crumbs = []
|
||||
const chunks = slug.split('/')
|
||||
for (const i in chunks) {
|
||||
const j = parseInt(i)+parseInt(1)
|
||||
const page = get(app.navigation, chunks.slice(0,j))
|
||||
if (page) crumbs.push([page.__linktitle, '/'+chunks.slice(0,j).join('/'), (j < chunks.length)])
|
||||
}
|
||||
|
||||
return crumbs
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue