wip(fs.dev): Theme changes and breadcrumbs fix
This commit is contained in:
Joost De Cock
parent
b731cabf28
commit
f59d4ed9fd
11 changed files with 542 additions and 37 deletions
|
|
@ -20,8 +20,9 @@ const Breadcrumbs = ({ app, slug=false, title }) => {
|
|||
const crumbs = []
|
||||
const chunks = slug.split('/')
|
||||
for (const i in chunks) {
|
||||
const page = get(app.navigation, chunks.slice(0,i+1))
|
||||
crumbs.push([page.__linktitle, '/'+chunks.slice(0,i+1).join('/'), (i+1 < chunks.length)])
|
||||
const j = parseInt(i)+parseInt(1)
|
||||
const page = get(app.navigation, chunks.slice(0,j))
|
||||
crumbs.push([page.__linktitle, '/'+chunks.slice(0,j).join('/'), (j < chunks.length)])
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -31,9 +31,9 @@ const fill = {
|
|||
<linearGradient id="hax0r" x1="0%" y1="0%" x2="50%" y2="100%">
|
||||
{[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20].map( i => (
|
||||
<>
|
||||
<stop offset={`${i*5}%`} stopColor={colors.lime[900]} stopOpacity="1.0" />
|
||||
<stop offset={`${i*5+1}%`} stopColor={colors.lime[800]} stopOpacity="1.0" />
|
||||
<stop offset={`${i*5+2}%`} stopColor={colors.lime[900]} stopOpacity="1.0" />
|
||||
<stop key={i} offset={`${i*5}%`} stopColor={colors.lime[900]} stopOpacity="1.0" />
|
||||
<stop key={i} offset={`${i*5+1}%`} stopColor={colors.lime[800]} stopOpacity="1.0" />
|
||||
<stop key={i} offset={`${i*5+2}%`} stopColor={colors.lime[900]} stopOpacity="1.0" />
|
||||
</>
|
||||
))}
|
||||
</linearGradient>
|
||||
|
|
@ -42,7 +42,7 @@ const fill = {
|
|||
<linearGradient id="lgbtq" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
{['red', 'orange', 'yellow', 'green', 'blue', 'violet'].map(c => {
|
||||
let next = step + 100/6
|
||||
let stop = <>
|
||||
const stop = <>
|
||||
<stop offset={`${step}%`} stopColor={colors[c][500]} stopOpacity="1.0" />
|
||||
<stop offset={`${next}%`} stopColor={colors[c][500]} stopOpacity="1.0" />
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,103 @@
|
|||
const Example = props => <p>FIXME: Example still todo</p>
|
||||
import React, { useState } from 'react'
|
||||
import examples from '@freesewing/examples'
|
||||
import rendertest from '@freesewing/rendertest'
|
||||
import tutorial from '@freesewing/tutorial'
|
||||
import Draft from '@freesewing/components/Draft'
|
||||
import Icon from 'shared/components/icon'
|
||||
//import Design from '../Workbench/Design'
|
||||
|
||||
const Example = ({
|
||||
pattern = 'examples',
|
||||
design = true,
|
||||
children=null,
|
||||
options = {},
|
||||
settings,
|
||||
part = '',
|
||||
sample
|
||||
}) => {
|
||||
const [designMode, setDesignMode] = useState(false)
|
||||
const [focus, setFocus] = useState(null)
|
||||
|
||||
const raiseEvent = (type, data) => {
|
||||
if (type === 'clearFocusAll') return setFocus(null)
|
||||
let f = {}
|
||||
if (focus !== null) f = { ...focus }
|
||||
if (typeof f[data.part] === 'undefined') f[data.part] = { paths: [], points: [], coords: [] }
|
||||
if (type === 'point') f[data.part].points.push(data.name)
|
||||
else if (type === 'path') f[data.part].paths.push(data.name)
|
||||
else if (type === 'coords') f[data.part].coords.push(data.coords)
|
||||
else if (type === 'clearFocus') {
|
||||
let i = focus[data.part][data.type].indexOf(data.name)
|
||||
f[data.part][data.type].splice(i, 1)
|
||||
}
|
||||
|
||||
setFocus(f)
|
||||
}
|
||||
|
||||
let focusCount = 0
|
||||
if (focus !== null) {
|
||||
for (let p of Object.keys(focus)) {
|
||||
for (let i in focus[p].points) focusCount++
|
||||
for (let i in focus[p].paths) focusCount++
|
||||
for (let i in focus[p].coords) focusCount++
|
||||
}
|
||||
}
|
||||
|
||||
const patterns = {
|
||||
examples,
|
||||
rendertest,
|
||||
tutorial
|
||||
}
|
||||
settings = {
|
||||
options: { ...options },
|
||||
measurements: { head: 390 },
|
||||
...settings
|
||||
}
|
||||
if (part !== '') settings.only = [part]
|
||||
const patternInstance = new patterns[pattern](settings)
|
||||
if (sample) patternInstance.sample()
|
||||
else patternInstance.draft()
|
||||
const patternProps = patternInstance.getRenderProps()
|
||||
return (
|
||||
<figure className={designMode ? 'design example' : 'example'}>
|
||||
<div className="example">
|
||||
<div className="actions">
|
||||
<button
|
||||
disabled={!designMode}
|
||||
color="primary"
|
||||
onClick={() => raiseEvent('clearFocusAll', null)}
|
||||
>
|
||||
<Icon icon='settings' />
|
||||
</button>
|
||||
<div className="p-6 card bordered">
|
||||
<div className="form-control">
|
||||
<label className="cursor-pointer label">
|
||||
<span className="label-text">Design mode</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={designMode}
|
||||
className="toggle toggle-primary"
|
||||
onChange={() => setDesignMode(!designMode)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Draft {...patternProps} design={designMode} focus={focus} raiseEvent={raiseEvent} />
|
||||
</div>
|
||||
<figcaption>{children}</figcaption>
|
||||
{designMode && (
|
||||
<div className="design">
|
||||
<Design
|
||||
focus={focus}
|
||||
design={designMode}
|
||||
raiseEvent={raiseEvent}
|
||||
parts={patternProps.parts}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</figure>
|
||||
)
|
||||
}
|
||||
|
||||
export default Example
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const Highlight = ({
|
|||
|
||||
return (
|
||||
<div className="hljs my-4">
|
||||
<div className={`text-xs uppercase font-bold text-info mt-1 text-center border-b border-info border-opacity-20 py-1 mb-2 lg:text-sm`}>
|
||||
<div className={`text-xs uppercase font-bold text-neutral-content mt-1 text-center border-b border-neutral-content border-opacity-25 py-1 mb-2 lg:text-sm`}>
|
||||
{names[language] ? names[language] : language}
|
||||
</div>
|
||||
<pre className="language-js hljs text-base lg:text-lg">{children}</pre>
|
||||
|
|
|
|||
|
|
@ -34,12 +34,10 @@ const howActive = (slug) => {
|
|||
}
|
||||
|
||||
// Shared classes for links
|
||||
const linkClasses = "text-lg lg:text-xl py-1 text-base-content hover:cursor-pointer hover:text-secondary bg-opacity-50"
|
||||
|
||||
|
||||
const linkClasses = "text-lg lg:text-xl py-1 hover:cursor-pointer hover:text-secondary bg-opacity-50"
|
||||
|
||||
// Component that renders a sublevel of navigation
|
||||
const SubLevel = ({ nodes={}, level=1 }) => (
|
||||
const SubLevel = ({ nodes={}, active }) => (
|
||||
<ul className="pl-5 list-inside">
|
||||
{currentChildren(nodes).map(child => (Object.keys(child).length > 4)
|
||||
? (
|
||||
|
|
@ -53,20 +51,30 @@ const SubLevel = ({ nodes={}, level=1 }) => (
|
|||
items-center
|
||||
`}>
|
||||
<Link href={child.__slug}>
|
||||
<a title={child.__title} className={`grow pl-2 border-l-2 ${linkClasses} hover:border-secondary`}>
|
||||
<a title={child.__title} className={`
|
||||
grow pl-2 border-l-2
|
||||
hover:border-secondary
|
||||
${linkClasses}
|
||||
${child.__slug === active ? 'text-secondary border-secondary' : 'text-base-content'}
|
||||
`}>
|
||||
<Icon icon="middot" size="24" className="text-secondary inline" />
|
||||
{ child?.__linktitle || child.__title }
|
||||
</a>
|
||||
</Link>
|
||||
<Chevron w={6} m={3}/>
|
||||
</summary>
|
||||
<SubLevel nodes={child} level={level+1} />
|
||||
<SubLevel nodes={child} active={active} />
|
||||
</details>
|
||||
</li>
|
||||
) : (
|
||||
<li className='pl-2 flex flex-row items-center'>
|
||||
<Link href={child.__slug} title={child.__title}>
|
||||
<a className={`pl-2 border-l-2 ${linkClasses} grow hover:border-secondary`}>
|
||||
<a className={`
|
||||
pl-2 border-l-2
|
||||
grow hover:border-secondary
|
||||
${linkClasses}
|
||||
${child.__slug === active ? 'text-secondary border-secondary' : 'text-base-content'}
|
||||
`}>
|
||||
<Icon icon="middot" size="24" className="text-secondary inline" />
|
||||
{child.__linktitle}
|
||||
</a>
|
||||
|
|
@ -89,14 +97,14 @@ const TopLevel = ({ icon, title, nav, current, slug, hasChildren=false, active }
|
|||
items-center
|
||||
`}>
|
||||
{icon}
|
||||
<Link href={`/${current.__slug}/`}>
|
||||
<a className={`grow ${linkClasses}`}>
|
||||
{title} {active}
|
||||
<Link href={`/${slug}`}>
|
||||
<a className={`grow ${linkClasses} ${slug === active ? 'text-secondary' : ''}`}>
|
||||
{title}
|
||||
</a>
|
||||
</Link>
|
||||
{hasChildren && <Chevron />}
|
||||
</summary>
|
||||
{hasChildren && <SubLevel nodes={current} />}
|
||||
{hasChildren && <SubLevel nodes={current} active={active} />}
|
||||
</details>
|
||||
)
|
||||
|
||||
|
|
@ -157,7 +165,7 @@ const Navigation = ({ app, active }) => {
|
|||
key={key}
|
||||
hasChildren={keepClosed.indexOf(key) === -1}
|
||||
nav={app.navigation}
|
||||
current={orderBy(app.navigation[key], ['order', 'title'], ['asc', 'asc'])}
|
||||
current={orderBy(app.navigation[key], ['__order', '__title'], ['asc', 'asc'])}
|
||||
active={active}
|
||||
/>)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ const MdxWrapper = ({mdx, app, components={}}) => {
|
|||
|
||||
return (
|
||||
<div className="text-primary mdx max-w-prose text-base-content max-w-prose text-lg lg:text-xl">
|
||||
<MdxContent components={allComponents}/>
|
||||
{mdxModule && <MdxContent components={allComponents}/>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue