mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-12 08:37:25 +02:00
fix(v2): various improvements for accessibility (#2480)
This commit is contained in:
Alexey Pyltsyn
GitHub
parent
8fe203d529
commit
c299baa80b
6 changed files with 169 additions and 161 deletions
|
|
@ -137,7 +137,7 @@ export default ({
|
|||
onClick={handleCopyCode}>
|
||||
{showCopied ? 'Copied' : 'Copy'}
|
||||
</button>
|
||||
<pre
|
||||
<div
|
||||
tabIndex="0"
|
||||
className={classnames(className, styles.codeBlock, {
|
||||
[styles.codeBlockWithTitle]: codeBlockTitle,
|
||||
|
|
@ -163,7 +163,7 @@ export default ({
|
|||
);
|
||||
})}
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -20,9 +20,6 @@
|
|||
|
||||
.codeBlock {
|
||||
overflow: auto;
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.codeBlockWithTitle {
|
||||
|
|
@ -59,9 +56,10 @@
|
|||
}
|
||||
|
||||
.codeBlockLines {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
margin-bottom: 0;
|
||||
font-family: var(--ifm-font-family-monospace);
|
||||
font-size: inherit;
|
||||
line-height: var(--ifm-pre-line-height);
|
||||
white-space: pre;
|
||||
float: left;
|
||||
min-width: 100%;
|
||||
padding: var(--ifm-pre-padding);
|
||||
|
|
|
|||
|
|
@ -18,9 +18,7 @@ function BrowserWindow({children, minHeight, url}) {
|
|||
<span className={styles.dot} style={{background: '#fbbe3c'}} />
|
||||
<span className={styles.dot} style={{background: '#58cb42'}} />
|
||||
</div>
|
||||
<div className={styles.browserWindowAddressBar}>
|
||||
<input disabled type="text" value={url} readOnly />
|
||||
</div>
|
||||
<div className={styles.browserWindowAddressBar}>{url}</div>
|
||||
<div className={styles.browserWindowMenuIcon}>
|
||||
<div>
|
||||
<span className={styles.bar} />
|
||||
|
|
|
|||
|
|
@ -35,8 +35,13 @@
|
|||
|
||||
.browserWindowAddressBar {
|
||||
flex: 1 0;
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 1rem;
|
||||
margin: 0 1rem 0 0.5rem;
|
||||
border-radius: 12.5px;
|
||||
background-color: #fff;
|
||||
color: #666;
|
||||
padding: 5px 15px;
|
||||
font: 400 13px Arial;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.dot {
|
||||
|
|
@ -49,17 +54,6 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
input[type='text'] {
|
||||
width: 100%;
|
||||
border-radius: 12.5px;
|
||||
border: none;
|
||||
background-color: white;
|
||||
margin-top: -8px;
|
||||
height: 25px;
|
||||
color: #666;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
.browserWindowMenuIcon {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,150 +68,163 @@ function Home() {
|
|||
permalink="/"
|
||||
title={tagline}
|
||||
description={customFields.description}>
|
||||
<div className={styles.hero}>
|
||||
<div className={styles.heroInner}>
|
||||
<h1 className={styles.heroProjectTagline}>
|
||||
<img
|
||||
alt="Docusaurus with Keytar"
|
||||
className={styles.heroLogo}
|
||||
src={useBaseUrl('img/docusaurus_keytar.svg')}
|
||||
/>
|
||||
Build <span className={styles.heroProjectKeywords}>optimized</span>{' '}
|
||||
websites <span className={styles.heroProjectKeywords}>quickly</span>
|
||||
, focus on your{' '}
|
||||
<span className={styles.heroProjectKeywords}>content</span>
|
||||
</h1>
|
||||
<div className={styles.indexCtas}>
|
||||
<Link
|
||||
className={styles.indexCtasGetStartedButton}
|
||||
to={useBaseUrl('docs/introduction')}>
|
||||
Get Started
|
||||
<main>
|
||||
<div className={styles.hero}>
|
||||
<div className={styles.heroInner}>
|
||||
<h1 className={styles.heroProjectTagline}>
|
||||
<img
|
||||
alt="Docusaurus with Keytar"
|
||||
className={styles.heroLogo}
|
||||
src={useBaseUrl('img/docusaurus_keytar.svg')}
|
||||
/>
|
||||
Build{' '}
|
||||
<span className={styles.heroProjectKeywords}>optimized</span>{' '}
|
||||
websites{' '}
|
||||
<span className={styles.heroProjectKeywords}>quickly</span>, focus
|
||||
on your{' '}
|
||||
<span className={styles.heroProjectKeywords}>content</span>
|
||||
</h1>
|
||||
<div className={styles.indexCtas}>
|
||||
<Link
|
||||
className={styles.indexCtasGetStartedButton}
|
||||
to={useBaseUrl('docs/introduction')}>
|
||||
Get Started
|
||||
</Link>
|
||||
<span className={styles.indexCtasGitHubButtonWrapper}>
|
||||
<iframe
|
||||
className={styles.indexCtasGitHubButton}
|
||||
src="https://ghbtns.com/github-btn.html?user=facebook&repo=docusaurus&type=star&count=true&size=large"
|
||||
width={160}
|
||||
height={30}
|
||||
title="GitHub Stars"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={classnames(styles.announcement, styles.announcementDark)}>
|
||||
<div className={styles.announcementInner}>
|
||||
Coming from v1? Check out our{' '}
|
||||
<Link to={useBaseUrl('/docs/migrating-from-v1-to-v2')}>
|
||||
v1 to v2 migration guide
|
||||
</Link>
|
||||
<span className={styles.indexCtasGitHubButtonWrapper}>
|
||||
<iframe
|
||||
className={styles.indexCtasGitHubButton}
|
||||
src="https://ghbtns.com/github-btn.html?user=facebook&repo=docusaurus&type=star&count=true&size=large"
|
||||
width={160}
|
||||
height={30}
|
||||
title="GitHub Stars"
|
||||
/>
|
||||
</span>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classnames(styles.announcement, styles.announcementDark)}>
|
||||
<div className={styles.announcementInner}>
|
||||
Coming from v1? Check out our{' '}
|
||||
<Link to={useBaseUrl('/docs/migrating-from-v1-to-v2')}>
|
||||
v1 to v2 migration guide
|
||||
</Link>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.section}>
|
||||
<div className="container text--center margin-bottom--xl">
|
||||
<div className="row">
|
||||
<div className="col">
|
||||
<img
|
||||
className={styles.featureImage}
|
||||
alt="Powered by MDX"
|
||||
src={useBaseUrl('img/undraw_typewriter.svg')}
|
||||
/>
|
||||
<h3 className="padding-top--md">Powered by Markdown</h3>
|
||||
<p className="padding-horiz--md">
|
||||
Save time and focus on your project's documentation. Simply
|
||||
write docs and blog posts with Markdown/MDX and Docusaurus will
|
||||
publish a set of static HTML files ready to serve. You can even
|
||||
embed JSX components into your Markdown thanks to MDX.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col">
|
||||
<img
|
||||
alt="Built Using React"
|
||||
className={styles.featureImage}
|
||||
src={useBaseUrl('img/undraw_react.svg')}
|
||||
/>
|
||||
<h3 className="padding-top--md">Built Using React</h3>
|
||||
<p className="padding-horiz--md">
|
||||
Extend or customize your project's layout by reusing React.
|
||||
Docusaurus can be extended while reusing the same header and
|
||||
footer.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col">
|
||||
<img
|
||||
alt="Ready for Translations"
|
||||
className={styles.featureImage}
|
||||
src={useBaseUrl('img/undraw_around_the_world.svg')}
|
||||
/>
|
||||
<h3 className="padding-top--md">Ready for Translations</h3>
|
||||
<p className="padding-horiz--md">
|
||||
Localization comes pre-configured. Use Crowdin to translate your
|
||||
docs into over 70 languages.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container text--center">
|
||||
<div className="row">
|
||||
<div className="col col--4 col--offset-2">
|
||||
<img
|
||||
alt="Document Versioning"
|
||||
className={styles.featureImage}
|
||||
src={useBaseUrl('img/undraw_version_control.svg')}
|
||||
/>
|
||||
<h3 className="padding-top--md">Document Versioning</h3>
|
||||
<p className="padding-horiz--md">
|
||||
Support users on all versions of your project. Document
|
||||
versioning helps you keep documentation in sync with project
|
||||
releases.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col col--4">
|
||||
<img
|
||||
alt="Document Search"
|
||||
className={styles.featureImage}
|
||||
src={useBaseUrl('img/undraw_algolia.svg')}
|
||||
/>
|
||||
<h3 className="padding-top--md">Content Search</h3>
|
||||
<p className="padding-horiz--md">
|
||||
Make it easy for your community to find what they need in your
|
||||
documentation. We proudly support Algolia documentation search.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={classnames(
|
||||
styles.section,
|
||||
styles.sectionAlt,
|
||||
styles.quotes,
|
||||
)}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
{QUOTES.map(quote => (
|
||||
<div className="col" key={quote.name}>
|
||||
<div className="avatar avatar--vertical margin-bottom--sm">
|
||||
<Image
|
||||
alt={quote.name}
|
||||
className="avatar__photo avatar__photo--xl"
|
||||
img={quote.thumbnail}
|
||||
style={{overflow: 'hidden'}}
|
||||
/>
|
||||
<div className="avatar__intro padding-top--sm">
|
||||
<h4 className="avatar__name">{quote.name}</h4>
|
||||
<small className="avatar__subtitle">{quote.title}</small>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text--center text--italic padding-horiz--md">
|
||||
{quote.text}
|
||||
<div className={styles.section}>
|
||||
<div className="container text--center margin-bottom--xl">
|
||||
<div className="row">
|
||||
<div className="col">
|
||||
<img
|
||||
className={styles.featureImage}
|
||||
alt="Powered by MDX"
|
||||
src={useBaseUrl('img/undraw_typewriter.svg')}
|
||||
/>
|
||||
<h2 className={classnames(styles.featureHeading)}>
|
||||
Powered by Markdown
|
||||
</h2>
|
||||
<p className="padding-horiz--md">
|
||||
Save time and focus on your project's documentation. Simply
|
||||
write docs and blog posts with Markdown/MDX and Docusaurus
|
||||
will publish a set of static HTML files ready to serve. You
|
||||
can even embed JSX components into your Markdown thanks to
|
||||
MDX.
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
<div className="col">
|
||||
<img
|
||||
alt="Built Using React"
|
||||
className={styles.featureImage}
|
||||
src={useBaseUrl('img/undraw_react.svg')}
|
||||
/>
|
||||
<h2 className={classnames(styles.featureHeading)}>
|
||||
Built Using React
|
||||
</h2>
|
||||
quotes
|
||||
<p className="padding-horiz--md">
|
||||
Extend or customize your project's layout by reusing React.
|
||||
Docusaurus can be extended while reusing the same header and
|
||||
footer.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col">
|
||||
<img
|
||||
alt="Ready for Translations"
|
||||
className={styles.featureImage}
|
||||
src={useBaseUrl('img/undraw_around_the_world.svg')}
|
||||
/>
|
||||
<h2 className={classnames(styles.featureHeading)}>
|
||||
Ready for Translations
|
||||
</h2>
|
||||
<p className="padding-horiz--md">
|
||||
Localization comes pre-configured. Use Crowdin to translate
|
||||
your docs into over 70 languages.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container text--center">
|
||||
<div className="row">
|
||||
<div className="col col--4 col--offset-2">
|
||||
<img
|
||||
alt="Document Versioning"
|
||||
className={styles.featureImage}
|
||||
src={useBaseUrl('img/undraw_version_control.svg')}
|
||||
/>
|
||||
<h2 className={classnames(styles.featureHeading)}>
|
||||
Document Versioning
|
||||
</h2>
|
||||
<p className="padding-horiz--md">
|
||||
Support users on all versions of your project. Document
|
||||
versioning helps you keep documentation in sync with project
|
||||
releases.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col col--4">
|
||||
<img
|
||||
alt="Document Search"
|
||||
className={styles.featureImage}
|
||||
src={useBaseUrl('img/undraw_algolia.svg')}
|
||||
/>
|
||||
<h2 className={classnames(styles.featureHeading)}>
|
||||
Content Search
|
||||
</h2>
|
||||
<p className="padding-horiz--md">
|
||||
Make it easy for your community to find what they need in your
|
||||
documentation. We proudly support Algolia documentation
|
||||
search.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classnames(styles.section, styles.sectionAlt)}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
{QUOTES.map(quote => (
|
||||
<div className="col" key={quote.name}>
|
||||
<div className="avatar avatar--vertical margin-bottom--sm">
|
||||
<Image
|
||||
alt={quote.name}
|
||||
className="avatar__photo avatar__photo--xl"
|
||||
img={quote.thumbnail}
|
||||
style={{overflow: 'hidden'}}
|
||||
/>
|
||||
<div className="avatar__intro padding-top--sm">
|
||||
<h4 className="avatar__name">{quote.name}</h4>
|
||||
<small className="avatar__subtitle">{quote.title}</small>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text--center text--italic padding-horiz--md">
|
||||
{quote.text}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,11 @@
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.featureHeading {
|
||||
font-size: var(--ifm-h3-font-size);
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.announcement {
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue