explosion/spaCy
1
1
Fork 0
mirror of https://github.com/explosion/spaCy.git synced 2025-06-29 09:23:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix broken CSS classes

Browse Source
This commit is contained in:
Marcus Blättermann 2022-11-14 01:18:47 +01:00
parent f6b43b6e7e
commit 6de49b9f1a
No known key found for this signature in database
GPG Key ID: A1E1F04008AC450D
13 changed files with 111 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
website/src/components/code.js
View File

@ -26,12 +26,12 @@ const CodeBlock = (props) => (
export default CodeBlock export default CodeBlock
export const Pre = (props) => { export const Pre = (props) => {
return <pre className={classes.pre}>{props.children}</pre> return <pre className={classes['pre']}>{props.children}</pre>
} }
export const InlineCode = ({ wrap = false, className, children, ...props }) => { export const InlineCode = ({ wrap = false, className, children, ...props }) => {
const codeClassNames = classNames(classes.inlineCode, className, { const codeClassNames = classNames(classes['inline-code'], className, {
[classes.wrap]: wrap || (isString(children) && children.length >= WRAP_THRESHOLD), [classes['wrap']]: wrap || (isString(children) && children.length >= WRAP_THRESHOLD),
}) })
return ( return (
<code className={codeClassNames} {...props}> <code className={codeClassNames} {...props}>
@ -78,10 +78,10 @@ export const TypeAnnotation = ({ lang = 'python', link = true, children }) => {
const annotClassNames = classNames( const annotClassNames = classNames(
'type-annotation', 'type-annotation',
`language-${lang}`, `language-${lang}`,
classes.inlineCode, classes['inline-code'],
classes.typeAnnotation, classes['type-annotation'],
{ {
[classes.wrap]: code.length >= WRAP_THRESHOLD, [classes['wrap']]: code.length >= WRAP_THRESHOLD,
} }
) )
return ( return (
@ -89,7 +89,7 @@ export const TypeAnnotation = ({ lang = 'python', link = true, children }) => {
{elements.map((el, i) => ( {elements.map((el, i) => (
<Fragment key={i}>{linkType(el, !!link)}</Fragment> <Fragment key={i}>{linkType(el, !!link)}</Fragment>
))} ))}
{meta && <span className={classes.typeAnnotationMeta}>{meta}</span>} {meta && <span className={classes['type-annotation-meta']}>{meta}</span>}
</code> </code>
) )
} }
@ -134,7 +134,7 @@ function convertLine(line, i) {
}) })
return ( return (
<Fragment key={line}> <Fragment key={line}>
<span data-prompt={i === 0 ? '$' : null} className={classes.cliArgSubtle}> <span data-prompt={i === 0 ? '$' : null} className={classes['cli-arg-subtle']}>
python -m python -m
</span>{' '} </span>{' '}
<span>spacy</span>{' '} <span>spacy</span>{' '}
@ -142,9 +142,9 @@ function convertLine(line, i) {
const isCmd = j === 0 const isCmd = j === 0
const url = isCmd ? `/api/cli#${item.replace(' ', '-')}` : null const url = isCmd ? `/api/cli#${item.replace(' ', '-')}` : null
const isAbstract = isString(item) && /^\[(.+)\]$/.test(item) const isAbstract = isString(item) && /^\[(.+)\]$/.test(item)
const itemClassNames = classNames(classes.cliArg, { const itemClassNames = classNames(classes['cli-arg'], {
[classes.cliArgHighlight]: isCmd, [classes['cli-arg-highlight']]: isCmd,
[classes.cliArgEmphasis]: isAbstract, [classes['cli-arg-emphasis']]: isAbstract,
}) })
const text = isAbstract ? item.slice(1, -1) : item const text = isAbstract ? item.slice(1, -1) : item
return ( return (
@ -238,11 +238,11 @@ export class Code extends React.Component {
render() { render() {
const { lang, title, executable, github, prompt, wrap, highlight, className, children } = const { lang, title, executable, github, prompt, wrap, highlight, className, children } =
this.props this.props
const codeClassNames = classNames(classes.code, className, `language-${lang}`, { const codeClassNames = classNames(classes['code'], className, `language-${lang}`, {
[classes.wrap]: !!highlight || !!wrap || lang === 'cli', [classes['wrap']]: !!highlight || !!wrap || lang === 'cli',
[classes.cli]: lang === 'cli', [classes['cli']]: lang === 'cli',
}) })
const ghClassNames = classNames(codeClassNames, classes.maxHeight) const ghClassNames = classNames(codeClassNames, classes['max-height'])
const { Juniper } = this.state const { Juniper } = this.state
if (github) { if (github) {
@ -264,7 +264,7 @@ export class Code extends React.Component {
const html = formatCode(rawHtml, lang, prompt) const html = formatCode(rawHtml, lang, prompt)
return ( return (
<> <>
{title && <h4 className={classes.title}>{title}</h4>} {title && <h4 className={classes['title']}>{title}</h4>}
<code className={codeClassNames}>{html}</code> <code className={codeClassNames}>{html}</code>
</> </>
) )
@ -275,10 +275,10 @@ const JuniperWrapper = ({ Juniper, title, lang, children }) => {
const { binderUrl, binderVersion } = siteMetadata const { binderUrl, binderVersion } = siteMetadata
const juniperTitle = title || 'Editable Code' const juniperTitle = title || 'Editable Code'
return ( return (
<div className={classes.juniperWrapper}> <div className={classes['juniper-wrapper']}>
<h4 className={classes.juniperTitle}> <h4 className={classes['juniper-title']}>
{juniperTitle} {juniperTitle}
<span className={classes.juniperMeta}> <span className={classes['juniper-meta']}>
spaCy v{binderVersion} &middot; Python 3 &middot; via{' '} spaCy v{binderVersion} &middot; Python 3 &middot; via{' '}
<Link to="https://mybinder.org/" hidden> <Link to="https://mybinder.org/" hidden>
Binder Binder
@ -291,10 +291,10 @@ const JuniperWrapper = ({ Juniper, title, lang, children }) => {
branch={binderBranch} branch={binderBranch}
lang={lang} lang={lang}
classNames={{ classNames={{
cell: classes.juniperCell, cell: classes['juniper-cell'],
input: classes.juniperInput, input: classes['juniper-input'],
button: classes.juniperButton, button: classes['juniper-button'],
output: classes.juniperOutput, output: classes['juniper-output'],
}} }}
> >
{children} {children}

4
website/src/components/embed.js
View File

@ -89,7 +89,7 @@ const Image = ({ src, alt, title, ...props }) => {
// This is only needed for image types that are NOT handled by // This is only needed for image types that are NOT handled by
// gatsby-remark-images, i.e. mostly SVGs. The plugin adds formatting // gatsby-remark-images, i.e. mostly SVGs. The plugin adds formatting
// and support for captions, so this normalises that behaviour. // and support for captions, so this normalises that behaviour.
const linkClassNames = classNames('gatsby-resp-image-link', classes.imageLink) const linkClassNames = classNames('gatsby-resp-image-link', classes['image-link'])
const markdownComponents = { code: InlineCode, p: Fragment, a: Link } const markdownComponents = { code: InlineCode, p: Fragment, a: Link }
return ( return (
<figure className="gatsby-resp-image-figure"> <figure className="gatsby-resp-image-figure">
@ -111,7 +111,7 @@ const GoogleSheet = ({ id, link, height, button = 'View full table' }) => {
<iframe <iframe
title={id} title={id}
scrolling="no" scrolling="no"
className={classes.googleSheet} className={classes['google-sheet']}
height={height} height={height}
src={`https://docs.google.com/spreadsheets/d/e/${id}/pubhtml?widget=true&amp;headers=false`} src={`https://docs.google.com/spreadsheets/d/e/${id}/pubhtml?widget=true&amp;headers=false`}
/> />

6
website/src/components/github.js
View File

@ -16,7 +16,7 @@ or a report on the issue tracker. Thanks!`
const GitHubCode = ({ url, lang, errorMsg = defaultErrorMsg, className }) => { const GitHubCode = ({ url, lang, errorMsg = defaultErrorMsg, className }) => {
const [initialized, setInitialized] = useState(false) const [initialized, setInitialized] = useState(false)
const [code, setCode] = useState(errorMsg) const [code, setCode] = useState(errorMsg)
const codeClassNames = classNames(classes.code, classes.maxHeight, className) const codeClassNames = classNames(classes.code, classes['max-height'], className)
const rawUrl = url const rawUrl = url
.replace('github.com', 'raw.githubusercontent.com') .replace('github.com', 'raw.githubusercontent.com')
@ -46,7 +46,9 @@ const GitHubCode = ({ url, lang, errorMsg = defaultErrorMsg, className }) => {
<header className={classes.header}> <header className={classes.header}>
<Link to={url} hidden> <Link to={url} hidden>
<Icon name="github" width={16} inline /> <Icon name="github" width={16} inline />
<code className={classNames(classes.inlineCode, classes.inlineCodeDark)}> <code
className={classNames(classes['inline-code'], classes['inline-code-dark'])}
>
{rawUrl.split('.com/')[1]} {rawUrl.split('.com/')[1]}
</code> </code>
</Link> </Link>

49
website/src/components/landing.js
View File

@ -27,9 +27,9 @@ export const LandingHeader = ({ nightly, legacy, style = {}, children }) => {
const wrapperStyle = { backgroundImage: `url(${pattern})` } const wrapperStyle = { backgroundImage: `url(${pattern})` }
const contentStyle = { backgroundImage: `url(${overlay})`, ...style } const contentStyle = { backgroundImage: `url(${overlay})`, ...style }
return ( return (
<header className={classes.header}> <header className={classes['header']}>
<div className={classes.headerWrapper} style={wrapperStyle}> <div className={classes['header-wrapper']} style={wrapperStyle}>
<div className={classes.headerContent} style={contentStyle}> <div className={classes['header-content']} style={contentStyle}>
{children} {children}
</div> </div>
</div> </div>
@ -37,17 +37,17 @@ export const LandingHeader = ({ nightly, legacy, style = {}, children }) => {
) )
} }
export const LandingTitle = ({ children }) => <h1 className={classes.title}>{children}</h1> export const LandingTitle = ({ children }) => <h1 className={classes['title']}>{children}</h1>
export const LandingSubtitle = ({ children }) => ( export const LandingSubtitle = ({ children }) => (
<h2> <h2>
<span className={classNames(classes.label, classes.subtitle)}>{children}</span> <span className={classNames(classes['label'], classes['subtitle'])}>{children}</span>
</h2> </h2>
) )
export const LandingGrid = ({ cols = 3, blocks = false, style, children }) => ( export const LandingGrid = ({ cols = 3, blocks = false, style, children }) => (
<Content className={classNames({ [classes.blocks]: blocks })}> <Content className={classNames({ [classes['blocks']]: blocks })}>
<Grid cols={cols} narrow={blocks} className={classes.grid} style={style}> <Grid cols={cols} narrow={blocks} className={classes['grid']} style={style}>
{children} {children}
</Grid> </Grid>
</Content> </Content>
@ -56,8 +56,8 @@ export const LandingGrid = ({ cols = 3, blocks = false, style, children }) => (
export const LandingCol = ({ children }) => <div>{children}</div> export const LandingCol = ({ children }) => <div>{children}</div>
export const LandingCard = ({ title, button, url, children }) => ( export const LandingCard = ({ title, button, url, children }) => (
<div className={classes.card}> <div className={classes['card']}>
<section className={classes.cardText}> <section className={classes['card-text']}>
{title && <H3>{title}</H3>} {title && <H3>{title}</H3>}
<p>{children}</p> <p>{children}</p>
</section> </section>
@ -70,14 +70,14 @@ export const LandingCard = ({ title, button, url, children }) => (
) )
export const LandingButton = ({ to, children }) => ( export const LandingButton = ({ to, children }) => (
<Button to={to} variant="primary" large className={classes.button}> <Button to={to} variant="primary" large className={classes['button']}>
{children} {children}
</Button> </Button>
) )
export const LandingDemo = ({ title, children }) => { export const LandingDemo = ({ title, children }) => {
return ( return (
<div className={classes.demo}> <div className={classes['demo']}>
<CodeBlock executable lang="python" title={title}> <CodeBlock executable lang="python" title={title}>
{children} {children}
</CodeBlock> </CodeBlock>
@ -86,7 +86,7 @@ export const LandingDemo = ({ title, children }) => {
} }
export const LandingBannerGrid = ({ children }) => ( export const LandingBannerGrid = ({ children }) => (
<Grid cols={2} className={classes.bannerGrid}> <Grid cols={2} className={classes['banner-grid']}>
{children} {children}
</Grid> </Grid>
) )
@ -102,11 +102,11 @@ export const LandingBanner = ({
color, color,
children, children,
}) => { }) => {
const contentClassNames = classNames(classes.bannerContent, { const contentClassNames = classNames(classes['banner-content'], {
[classes.bannerContentSmall]: small, [classes['banner-content-small']]: small,
}) })
const textClassNames = classNames(classes.bannerText, { const textClassNames = classNames(classes['banner-text'], {
[classes.bannerTextSmall]: small, [classes['banner-text-small']]: small,
}) })
const style = { const style = {
'--color-theme': background, '--color-theme': background,
@ -115,13 +115,13 @@ export const LandingBanner = ({
} }
const Heading = small ? H2 : H1 const Heading = small ? H2 : H1
return ( return (
<div className={classes.banner} style={style}> <div className={classes['banner']} style={style}>
<Grid cols={small ? null : 3} narrow className={contentClassNames}> <Grid cols={small ? null : 3} narrow className={contentClassNames}>
{(title || label) && ( {(title || label) && (
<Heading Component="h3" className={classes.bannerTitle}> <Heading Component="h3" className={classes['banner-title']}>
{label && ( {label && (
<div className={classes.bannerLabel}> <div className={classes['banner-label']}>
<span className={classes.label}>{label}</span> <span className={classes['label']}>{label}</span>
</div> </div>
)} )}
<Link to={to} hidden> <Link to={to} hidden>
@ -144,8 +144,13 @@ export const LandingBanner = ({
} }
export const LandingBannerButton = ({ to, small, children }) => ( export const LandingBannerButton = ({ to, small, children }) => (
<div className={classes.bannerButton}> <div className={classes['banner-button']}>
<Button to={to} variant="tertiary" large={!small} className={classes.bannerButtonElement}> <Button
to={to}
variant="tertiary"
large={!small}
className={classes['banner-button-element']}
>
{children} {children}
</Button> </Button>
</div> </div>

4
website/src/components/link.js
View File

@ -44,12 +44,12 @@ export default function Link({
const linkClassNames = classNames(classes.root, className, { const linkClassNames = classNames(classes.root, className, {
[classes.hidden]: hidden, [classes.hidden]: hidden,
[classes.nowrap]: (withIcon && !sourceWithText) || icon === 'network', [classes.nowrap]: (withIcon && !sourceWithText) || icon === 'network',
[classes.withIcon]: withIcon, [classes['with-icon']]: withIcon,
}) })
const Wrapper = ws ? Whitespace : Fragment const Wrapper = ws ? Whitespace : Fragment
const content = ( const content = (
<> <>
{sourceWithText ? <span className={classes.sourceText}>{children}</span> : children} {sourceWithText ? <span className={classes['source-text']}>{children}</span> : children}
{withIcon && <Icon name={icon} width={16} inline className={classes.icon} />} {withIcon && <Icon name={icon} width={16} inline className={classes.icon} />}
</> </>
) )

2
website/src/components/list.js
View File

@ -9,7 +9,7 @@ export const Ul = (props) => <ul className={classes.ul} {...props} />
export const Li = ({ children, emoji, ...props }) => { export const Li = ({ children, emoji, ...props }) => {
const { hasIcon, content } = replaceEmoji(children) const { hasIcon, content } = replaceEmoji(children)
const liClassNames = classNames(classes.li, { const liClassNames = classNames(classes.li, {
[classes.liIcon]: hasIcon, [classes['li-icon']]: hasIcon,
[classes.emoji]: emoji, [classes.emoji]: emoji,
}) })
return ( return (

4
website/src/components/main.js
View File

@ -31,8 +31,8 @@ export default function Main({
}) { }) {
const pattern = patterns[theme] const pattern = patterns[theme]
const mainClassNames = classNames(classes.root, { const mainClassNames = classNames(classes.root, {
[classes.withSidebar]: sidebar, [classes['with-sidebar']]: sidebar,
[classes.withAsides]: asides, [classes['with-asides']]: asides,
}) })
return ( return (

4
website/src/components/navigation.js
View File

@ -40,7 +40,7 @@ export default function Navigation({ title, items = [], section, search, alert,
{!alert ? ( {!alert ? (
logo logo
) : ( ) : (
<span className={classes.hasAlert}> <span className={classes['has-alert']}>
{logo} <span className={classes.alert}>{alert}</span> {logo} <span className={classes.alert}>{alert}</span>
</span> </span>
)} )}
@ -52,7 +52,7 @@ export default function Navigation({ title, items = [], section, search, alert,
{items.map(({ text, url }, i) => { {items.map(({ text, url }, i) => {
const isActive = section && text.toLowerCase() === section const isActive = section && text.toLowerCase() === section
const itemClassNames = classNames(classes.item, { const itemClassNames = classNames(classes.item, {
[classes.isActive]: isActive, [classes['is-active']]: isActive,
}) })
return ( return (
<li key={i} className={itemClassNames}> <li key={i} className={itemClassNames}>

58
website/src/components/quickstart.js
View File

@ -86,14 +86,18 @@ const Quickstart = ({
return !data.length ? null : ( return !data.length ? null : (
<Container id={id}> <Container id={id}>
<div className={classNames(classes.root, { [classes.hidePrompts]: !!hidePrompts })}> <div
className={classNames(classes['root'], {
[classes['hide-prompts']]: !!hidePrompts,
})}
>
{title && ( {title && (
<H2 className={classes.title} name={id}> <H2 className={classes['title']} name={id}>
<a href={`#${id}`}>{title}</a> <a href={`#${id}`}>{title}</a>
</H2> </H2>
)} )}
{description && <p className={classes.description}>{description}</p>} {description && <p className={classes['description']}>{description}</p>}
{data.map( {data.map(
({ ({
@ -112,21 +116,21 @@ const Quickstart = ({
// Check if dropdown should be shown // Check if dropdown should be shown
const dropdownGetter = showDropdown[id] || (() => true) const dropdownGetter = showDropdown[id] || (() => true)
return hidden ? null : ( return hidden ? null : (
<div key={id} data-quickstart-group={id} className={classes.group}> <div key={id} data-quickstart-group={id} className={classes['group']}>
<style data-quickstart-style={id} scoped> <style data-quickstart-style={id} scoped>
{styles[id] || {styles[id] ||
`[data-quickstart-results]>[data-quickstart-${id}] { display: none }`} `[data-quickstart-results]>[data-quickstart-${id}] { display: none }`}
</style> </style>
<div className={classes.legend}> <div className={classes['legend']}>
{title} {title}
{help && ( {help && (
<span data-tooltip={help} className={classes.help}> <span data-tooltip={help} className={classes['help']}>
{' '} {' '}
<Icon name="help" width={16} /> <Icon name="help" width={16} />
</span> </span>
)} )}
</div> </div>
<div className={classes.fields}> <div className={classes['fields']}>
{options.map((option) => { {options.map((option) => {
const optionType = multiple ? 'checkbox' : 'radio' const optionType = multiple ? 'checkbox' : 'radio'
const checkedForId = checked[id] || [] const checkedForId = checked[id] || []
@ -151,7 +155,7 @@ const Quickstart = ({
}} }}
type={optionType} type={optionType}
className={classNames( className={classNames(
classes.input, classes['input'],
classes[optionType] classes[optionType]
)} )}
name={id} name={id}
@ -160,7 +164,7 @@ const Quickstart = ({
checked={checkedForId.includes(option.id)} checked={checkedForId.includes(option.id)}
/> />
<label <label
className={classes.label} className={classes['label']}
htmlFor={`quickstart-${option.id}`} htmlFor={`quickstart-${option.id}`}
> >
{option.title} {option.title}
@ -168,7 +172,7 @@ const Quickstart = ({
{option.help && ( {option.help && (
<span <span
data-tooltip={option.help} data-tooltip={option.help}
className={classes.help} className={classes['help']}
> >
{' '} {' '}
<Icon name="help" width={16} /> <Icon name="help" width={16} />
@ -178,12 +182,12 @@ const Quickstart = ({
</Fragment> </Fragment>
) )
})} })}
<span className={classes.fieldExtra}> <span className={classes['field-extra']}>
{!!dropdown.length && ( {!!dropdown.length && (
<select <select
defaultValue={defaultValue} defaultValue={defaultValue}
className={classNames(classes.select, { className={classNames(classes['select'], {
[classes.selectHidden]: !dropdownGetter(), [classes['select-hidden']]: !dropdownGetter(),
})} })}
onChange={({ target }) => { onChange={({ target }) => {
const value = target.value const value = target.value
@ -207,7 +211,7 @@ const Quickstart = ({
{other && otherState[id] && ( {other && otherState[id] && (
<input <input
type="text" type="text"
className={classes.textInput} className={classes['text-input']}
placeholder="Type here..." placeholder="Type here..."
onChange={({ target }) => setterFunc(target.value)} onChange={({ target }) => setterFunc(target.value)}
/> />
@ -218,10 +222,10 @@ const Quickstart = ({
) )
} }
)} )}
<pre className={classes.code}> <pre className={classes['code']}>
<code <code
className={classNames(classes.results, { className={classNames(classes['results'], {
[classes.small]: !!small, [classes['small']]: !!small,
[`language-${codeLang}`]: !!codeLang, [`language-${codeLang}`]: !!codeLang,
})} })}
data-quickstart-results="" data-quickstart-results=""
@ -230,12 +234,12 @@ const Quickstart = ({
{children} {children}
</code> </code>
<menu className={classes.menu}> <menu className={classes['menu']}>
{showCopy && ( {showCopy && (
<button <button
title="Copy to clipboard" title="Copy to clipboard"
onClick={onClickCopy} onClick={onClickCopy}
className={classes.iconButton} className={classes['icon-button']}
> >
<Icon width={18} name={copySuccess ? 'accept' : 'clipboard'} /> <Icon width={18} name={copySuccess ? 'accept' : 'clipboard'} />
</button> </button>
@ -247,14 +251,16 @@ const Quickstart = ({
)}`} )}`}
title="Download file" title="Download file"
download={download} download={download}
className={classes.iconButton} className={classes['icon-button']}
> >
<Icon width={18} name="download" /> <Icon width={18} name="download" />
</a> </a>
)} )}
</menu> </menu>
</pre> </pre>
{showCopy && <textarea ref={copyAreaRef} className={classes.copyArea} rows={1} />} {showCopy && (
<textarea ref={copyAreaRef} className={classes['copy-area']} rows={1} />
)}
</div> </div>
</Container> </Container>
) )
@ -283,11 +289,11 @@ Quickstart.propTypes = {
const QS = ({ children, prompt = 'bash', divider = false, comment = false, ...props }) => { const QS = ({ children, prompt = 'bash', divider = false, comment = false, ...props }) => {
const qsClassNames = classNames({ const qsClassNames = classNames({
[classes.prompt]: !!prompt && !divider, [classes['prompt']]: !!prompt && !divider,
[classes.bash]: prompt === 'bash' && !divider, [classes['bash']]: prompt === 'bash' && !divider,
[classes.python]: prompt === 'python' && !divider, [classes['python']]: prompt === 'python' && !divider,
[classes.divider]: !!divider, [classes['divider']]: !!divider,
[classes.comment]: !!comment, [classes['comment']]: !!comment,
}) })
const attrs = Object.assign( const attrs = Object.assign(
{}, {},

23
website/src/components/sidebar.js
View File

@ -22,8 +22,8 @@ function getActiveHeading(items, slug) {
const DropdownNavigation = ({ items, defaultValue }) => { const DropdownNavigation = ({ items, defaultValue }) => {
return ( return (
<div className={classes.dropdown}> <div className={classes['dropdown']}>
<Dropdown className={classes.dropdownSelect} defaultValue={defaultValue}> <Dropdown className={classes['dropdown-select']} defaultValue={defaultValue}>
<option disabled>Select page...</option> <option disabled>Select page...</option>
{items.map((section, i) => {items.map((section, i) =>
section.items.map(({ text, url }, j) => ( section.items.map(({ text, url }, j) => (
@ -58,19 +58,19 @@ export default function Sidebar({ items = [], pageMenu = [], slug }) {
}, [initialized]) }, [initialized])
return ( return (
<menu className={classNames('sidebar', classes.root)}> <menu className={classNames('sidebar', classes['root'])}>
<h1 hidden aria-hidden="true" className={classNames('h0', classes.activeHeading)}> <h1 hidden aria-hidden="true" className={classNames('h0', classes['active-heading'])}>
{activeHeading} {activeHeading}
</h1> </h1>
<DropdownNavigation items={items} defaultValue={slug} /> <DropdownNavigation items={items} defaultValue={slug} />
{items.map((section, i) => ( {items.map((section, i) => (
<ul className={classes.section} key={i}> <ul className={classes['section']} key={i}>
<li className={classes.label}>{section.label}</li> <li className={classes['label']}>{section.label}</li>
{section.items.map(({ text, url, tag, onClick, menu, isActive }, j) => { {section.items.map(({ text, url, tag, onClick, menu, isActive }, j) => {
const currentMenu = menu || pageMenu || [] const currentMenu = menu || pageMenu || []
const active = isActive || slug === url const active = isActive || slug === url
const itemClassNames = classNames(classes.link, { const itemClassNames = classNames(classes['link'], {
[classes.isActive]: active, [classes['is-active']]: active,
'is-active': active, 'is-active': active,
}) })
@ -86,11 +86,12 @@ export default function Sidebar({ items = [], pageMenu = [], slug }) {
{tag && <Tag spaced>{tag}</Tag>} {tag && <Tag spaced>{tag}</Tag>}
</Link> </Link>
{active && !!currentMenu.length && ( {active && !!currentMenu.length && (
<ul className={classes.crumbs}> <ul className={classes['crumbs']}>
{currentMenu.map((crumb) => { {currentMenu.map((crumb) => {
const currentActive = activeSection || currentMenu[0].id const currentActive = activeSection || currentMenu[0].id
const crumbClassNames = classNames(classes.crumb, { const crumbClassNames = classNames(classes['crumb'], {
[classes.crumbActive]: currentActive === crumb.id, [classes['crumb-active']]:
currentActive === crumb.id,
}) })
return ( return (
<li className={crumbClassNames} key={crumb.id}> <li className={crumbClassNames} key={crumb.id}>

2
website/src/components/table.js
View File

@ -45,7 +45,7 @@ export const Table = ({ fixed, className, ...props }) => {
export const Th = ({ children, ...props }) => { export const Th = ({ children, ...props }) => {
const isRotated = children && !isString(children) && children.type && children.type.name == 'Tx' const isRotated = children && !isString(children) && children.type && children.type.name == 'Tx'
const thClassNames = classNames(classes.th, { [classes.thRotated]: isRotated }) const thClassNames = classNames(classes.th, { [classes['th-rotated']]: isRotated })
return ( return (
<th className={thClassNames} {...props}> <th className={thClassNames} {...props}>
{children} {children}

2
website/src/components/title.js
View File

@ -37,7 +37,7 @@ export default function Title({
...props ...props
}) { }) {
const hasApiDetails = Object.values(apiDetails || {}).some((v) => v) const hasApiDetails = Object.values(apiDetails || {}).some((v) => v)
const metaIconProps = { className: classes.metaIcon, width: 18 } const metaIconProps = { className: classes['meta-icon'], width: 18 }
return ( return (
<header className={classes.root}> <header className={classes.root}>
{(image || source) && ( {(image || source) && (

4
website/src/components/typography.js
View File

@ -58,8 +58,8 @@ export const Label = ({ className, ...props }) => (
) )
export const InlineList = ({ Component = 'p', gutterBottom = true, className, children }) => { export const InlineList = ({ Component = 'p', gutterBottom = true, className, children }) => {
const listClassNames = classNames(classes.inlineList, className, { const listClassNames = classNames(classes['inline-list'], className, {
[classes.noGutter]: !gutterBottom, [classes['no-gutter']]: !gutterBottom,
}) })
return <Component className={listClassNames}>{children}</Component> return <Component className={listClassNames}>{children}</Component>
} }