77 lines
1.9 KiB
TypeScript
77 lines
1.9 KiB
TypeScript
import { HeadingWithAnchorLink, Markdown } from '../components/markdown'
|
|
import { ScrollToTop } from '../components/Scroll'
|
|
import { Fragment, useEffect } from 'react'
|
|
import { useLocation } from 'react-router-dom'
|
|
import { HashLink as Link } from 'react-router-hash-link'
|
|
import mecanisms from '../../docs/mecanisms.yaml'
|
|
import { capitalise0 } from 'publicodes'
|
|
import { Header } from '../components/Header'
|
|
const sortedMecanisms = Object.entries(mecanisms).sort(([a], [b]) =>
|
|
a.localeCompare(b)
|
|
)
|
|
|
|
export default function Landing() {
|
|
const { pathname } = useLocation()
|
|
useEffect(() => {
|
|
const css = document.createElement('style')
|
|
css.type = 'text/css'
|
|
css.innerHTML = `
|
|
#js {
|
|
animation: appear 0.5s;
|
|
opacity: 1;
|
|
}
|
|
#loading {
|
|
display: none !important;
|
|
}`
|
|
document.body.appendChild(css)
|
|
})
|
|
return (
|
|
<>
|
|
<ScrollToTop />
|
|
|
|
<h1 id="top">Mécanismes existants</h1>
|
|
<ul>
|
|
{sortedMecanisms.map(([name]) => (
|
|
<li key={name}>
|
|
<Link to={pathname + '#' + name.replace(/ /g, '-')}>{name}</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
{sortedMecanisms.map(([name, data]) => (
|
|
<Fragment key={name}>
|
|
<Explanation {...(data as any)} name={name} />
|
|
<Link to={pathname + '#top'}>Retour à la liste</Link>
|
|
</Fragment>
|
|
))}
|
|
</>
|
|
)
|
|
}
|
|
|
|
type ExplanationProp = {
|
|
exemples: { base: string }
|
|
description: string
|
|
name: string
|
|
}
|
|
function Explanation({ name, description, exemples }: ExplanationProp) {
|
|
return (
|
|
<>
|
|
{!!name && (
|
|
<HeadingWithAnchorLink level={2}>
|
|
<pre>{name}</pre>
|
|
</HeadingWithAnchorLink>
|
|
)}
|
|
<Markdown source={description} />
|
|
{exemples && (
|
|
<>
|
|
{Object.entries(exemples).map(([name, exemple]) => (
|
|
<Fragment key={name}>
|
|
<h3>{name === 'base' ? 'Exemple' : capitalise0(name)}</h3>
|
|
<Markdown source={`\`\`\`yaml\n${exemple}\n\`\`\``} />
|
|
</Fragment>
|
|
))}{' '}
|
|
</>
|
|
)}
|
|
</>
|
|
)
|
|
}
|