3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-29 22:47:52 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(v2): use BEM for classes

Browse source
This commit is contained in:
Yangshun Tay 2019-04-20 00:42:24 -07:00
parent 1fc4c9b810
commit d00799f633
12 changed files with 124 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

6
packages/docusaurus/lib/default-theme/BlogPage/index.js
View file

@ -29,11 +29,11 @@ function BlogPage(props) {
{language && <html lang={language} />} {language && <html lang={language} />}
{language && <meta name="docsearch:language" content={language} />} {language && <meta name="docsearch:language" content={language} />}
</Head> </Head>
<div className="container margin-vert-xl"> <div className="container margin-vert--xl">
<div className="row"> <div className="row">
<div className="col col-6 col-offset-3"> <div className="col col--6 col--offset-3">
{BlogPosts.map((PostContent, index) => ( {BlogPosts.map((PostContent, index) => (
<div className="margin-bottom-xl" key={index}> <div className="margin-bottom--xl" key={index}>
<Post truncated metadata={posts[index]}> <Post truncated metadata={posts[index]}>
<PostContent /> <PostContent />
</Post> </Post>

4
packages/docusaurus/lib/default-theme/BlogPost/index.js
View file

@ -30,9 +30,9 @@ function BlogPost(props) {
{language && <html lang={language} />} {language && <html lang={language} />}
</Head> </Head>
{BlogPostContents && ( {BlogPostContents && (
<div className="container margin-vert-xl"> <div className="container margin-vert--xl">
<div className="row"> <div className="row">
<div className="col col-6 col-offset-3"> <div className="col col--6 col--offset-3">
<Post metadata={metadata}> <Post metadata={metadata}>
<BlogPostContents /> <BlogPostContents />
</Post> </Post>

8
packages/docusaurus/lib/default-theme/DocBody/index.js
View file

@ -30,12 +30,12 @@ function DocBody(props) {
{language && <meta name="docsearch:language" content={language} />} {language && <meta name="docsearch:language" content={language} />}
{version && <meta name="docsearch:version" content={version} />} {version && <meta name="docsearch:version" content={version} />}
</Head> </Head>
<div className="container margin-bottom-xl"> <div className="container margin-bottom--xl">
<div className="row"> <div className="row">
<div className="col col-8 col-offset-2"> <div className="col col--8 col--offset-2">
<h1 className="margin-vert-xl">{metadata.title}</h1> <h1 className="margin-vert--xl">{metadata.title}</h1>
<DocContents /> <DocContents />
<div className="margin-vert-xl"> <div className="margin-vert--xl">
<DocsPaginator /> <DocsPaginator />
</div> </div>
</div> </div>

8
packages/docusaurus/lib/default-theme/DocsPaginator/index.js
View file

@ -20,10 +20,10 @@ function DocsPaginator() {
return ( return (
<div className="row"> <div className="row">
<div className="col col-6"> <div className="col col--6">
{metadata.previous && docs[metadata.previous] && ( {metadata.previous && docs[metadata.previous] && (
<Link <Link
className="btn btn-outline btn-lg btn-primary" className="button button--secondary"
to={docs[metadata.previous].permalink}> to={docs[metadata.previous].permalink}>
<i className="fas fa-arrow-left" /> <i className="fas fa-arrow-left" />
&nbsp;&nbsp; &nbsp;&nbsp;
@ -31,10 +31,10 @@ function DocsPaginator() {
</Link> </Link>
)} )}
</div> </div>
<div className="col col-6 text-right"> <div className="col col--6 text--right">
{metadata.next && docs[metadata.next] && ( {metadata.next && docs[metadata.next] && (
<Link <Link
className="btn btn-outline btn-lg btn-primary" className="button button--secondary"
to={docs[metadata.next].permalink}> to={docs[metadata.next].permalink}>
{metadata.next_title}&nbsp;&nbsp; {metadata.next_title}&nbsp;&nbsp;
<i className="fas fa-arrow-right" /> <i className="fas fa-arrow-right" />

78
packages/docusaurus/lib/default-theme/Footer/index.js
View file

@ -9,89 +9,89 @@ import React from 'react';
function Footer() { function Footer() {
return ( return (
<footer className="footer footer-dark"> <footer className="footer footer--dark">
<div className="container"> <div className="container">
<div className="row footer-links"> <div className="row footer__links">
<div className="col col-3"> <div className="col">
<h4 className="footer-title">Docs</h4> <h4 className="footer__title">Docs</h4>
<ul className="footer-items"> <ul className="footer__items">
<li className="footer-item"> <li className="footer__item">
<a className="footer-link-item" href="/"> <a className="footer__link-item" href="/">
Getting Started Getting Started
</a> </a>
</li> </li>
<li className="footer-item"> <li className="footer__item">
<a className="footer-link-item" href="/"> <a className="footer__link-item" href="/">
API API
</a> </a>
</li> </li>
<li className="footer-item"> <li className="footer__item">
<a className="footer-link-item" href="/"> <a className="footer__link-item" href="/">
FAQ FAQ
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<div className="col col-3"> <div className="col">
<h4 className="footer-title">Community</h4> <h4 className="footer__title">Community</h4>
<ul className="footer-items"> <ul className="footer__items">
<li className="footer-item"> <li className="footer__item">
<a className="footer-link-item" href="/"> <a className="footer__link-item" href="/">
Users Users
</a> </a>
</li> </li>
<li className="footer-item"> <li className="footer__item">
<a className="footer-link-item" href="/"> <a className="footer__link-item" href="/">
Contribute Contribute
</a> </a>
</li> </li>
<li className="footer-item"> <li className="footer__item">
<a className="footer-link-item" href="/"> <a className="footer__link-item" href="/">
Stack Overflow Stack Overflow
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<div className="col col-3"> <div className="col">
<h4 className="footer-title">Social</h4> <h4 className="footer__title">Social</h4>
<ul className="footer-items"> <ul className="footer__items">
<li className="footer-item"> <li className="footer__item">
<a className="footer-link-item" href="/"> <a className="footer__link-item" href="/">
GitHub GitHub
</a> </a>
</li> </li>
<li className="footer-item"> <li className="footer__item">
<a className="footer-link-item" href="/"> <a className="footer__link-item" href="/">
Facebook Facebook
</a> </a>
</li> </li>
<li className="footer-item"> <li className="footer__item">
<a className="footer-link-item" href="/"> <a className="footer__link-item" href="/">
Twitter Twitter
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<div className="col col-3"> <div className="col">
<h4 className="footer-title">More</h4> <h4 className="footer__title">More</h4>
<ul className="footer-items"> <ul className="footer__items">
<li className="footer-item"> <li className="footer__item">
<a className="footer-link-item" href="/"> <a className="footer__link-item" href="/">
Tutorial Tutorial
</a> </a>
</li> </li>
<li className="footer-item"> <li className="footer__item">
<a className="footer-link-item" href="/"> <a className="footer__link-item" href="/">
Blog Blog
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div className="text-center"> <div className="text--center">
<div className="margin-bottom-sm"> <div className="margin-bottom--sm">
<img <img
className="footer-logo" className="footer__logo"
alt="Facebook Open Source Logo" alt="Facebook Open Source Logo"
src="https://docusaurus.io/img/oss_logo.png" src="https://docusaurus.io/img/oss_logo.png"
/> />

67
packages/docusaurus/lib/default-theme/Navbar/index.js
View file

@ -10,7 +10,6 @@ import React, {useContext} from 'react';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import Search from '@theme/Search'; import Search from '@theme/Search';
import DocusaurusContext from '@docusaurus/context'; import DocusaurusContext from '@docusaurus/context';
import styles from './styles.module.css';
function Navbar(props) { function Navbar(props) {
const context = useContext(DocusaurusContext); const context = useContext(DocusaurusContext);
@ -51,10 +50,10 @@ function Navbar(props) {
} }
return ( return (
<div key={link.doc} className="navbar-item"> <div key={link.doc} className="navbar__item">
<Link <Link
activeClassName="navbar-link-active" activeClassName="navbar__link--active"
className="navbar-link" className="navbar__link"
to={docs[id].permalink}> to={docs[id].permalink}>
{link.label} {link.label}
</Link> </Link>
@ -67,10 +66,10 @@ function Navbar(props) {
link.page link.page
}`; }`;
return ( return (
<div key={link.page} className="navbar-item"> <div key={link.page} className="navbar__item">
<Link <Link
activeClassName="navbar-link-active" activeClassName="navbar__link--active"
className="navbar-link" className="navbar__link"
to={pageHref}> to={pageHref}>
{link.label} {link.label}
</Link> </Link>
@ -80,8 +79,8 @@ function Navbar(props) {
if (link.href) { if (link.href) {
// set link to specified href // set link to specified href
return ( return (
<div key={link.label} className="navbar-item"> <div key={link.label} className="navbar__item">
<Link to={link.href} className="navbar-link"> <Link to={link.href} className="navbar__link">
{link.label} {link.label}
</Link> </Link>
</div> </div>
@ -91,10 +90,10 @@ function Navbar(props) {
// set link to blog url // set link to blog url
const blogUrl = `${baseUrl}blog`; const blogUrl = `${baseUrl}blog`;
return ( return (
<div key="Blog" className="navbar-item"> <div key="Blog" className="navbar__item">
<Link <Link
activeClassName="navbar-link-active" activeClassName="navbar__link--active"
className="navbar-link" className="navbar__link"
to={blogUrl}> to={blogUrl}>
Blog Blog
</Link> </Link>
@ -105,27 +104,25 @@ function Navbar(props) {
}; };
return ( return (
<nav className="navbar navbar-light navbar-fixed-top"> <nav className="navbar navbar--light navbar--fixed-top">
<div className="navbar-inner"> <div className="navbar__inner">
<div className="navbar-items"> <div className="navbar__items">
<div key="logo" className="navbar-item"> <Link
<Link className="navbar__brand"
className="navbar-link" to={baseUrl + (translationEnabled ? thisLanguage : '')}>
to={baseUrl + (translationEnabled ? thisLanguage : '')}> {headerIcon && (
{headerIcon && ( <img
<img className="navbar__logo"
className={styles.navLogo} src={baseUrl + headerIcon}
src={baseUrl + headerIcon} alt={title}
alt={title} />
/> )}
)} {!disableHeaderTitle && <strong>{title}</strong>}
{!disableHeaderTitle && <strong>{title}</strong>} </Link>
</Link>
</div>
{versioningEnabled && ( {versioningEnabled && (
<div key="versions" className="navbar-item"> <div key="versions" className="navbar__item">
<Link <Link
className="navbar-link" className="navbar__link"
to={ to={
baseUrl + baseUrl +
(translationEnabled ? `${thisLanguage}/versions` : `versions`) (translationEnabled ? `${thisLanguage}/versions` : `versions`)
@ -136,15 +133,15 @@ function Navbar(props) {
)} )}
{headerLinks.map(makeLinks)} {headerLinks.map(makeLinks)}
</div> </div>
<div className="navbar-items navbar-right"> <div className="navbar__items navbar__items--right">
{algolia && ( {algolia && (
<div className="navbar-search" key="search-box"> <div className="navbar__search" key="search-box">
<Search {...props} /> <Search {...props} />
</div> </div>
)} )}
<div className="navbar-item"> <div className="navbar__item">
<a <a
className="navbar-link" className="navbar__link"
href="https://github.com/facebook/docusaurus" href="https://github.com/facebook/docusaurus"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank"> target="_blank">

13
packages/docusaurus/lib/default-theme/Navbar/styles.module.css
View file

@ -1,13 +0,0 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.navLogo {
height: 2rem;
margin-right: 0.75rem;
vertical-align: middle;
width: 2rem;
}

22
packages/docusaurus/lib/default-theme/Post/index.js
View file

@ -48,29 +48,33 @@ function Post(props) {
<h1> <h1>
<Link to={permalink}>{title}</Link> <Link to={permalink}>{title}</Link>
</h1> </h1>
<div className="margin-bottom-sm"> <div className="margin-bottom--sm">
{month[blogPostDate.getMonth()]} {blogPostDate.getDay()},{' '} {month[blogPostDate.getMonth()]} {blogPostDate.getDay()},{' '}
{blogPostDate.getFullYear()} {blogPostDate.getFullYear()}
</div> </div>
<div className="avatar margin-bottom-md"> <div className="avatar margin-bottom--md">
{authorImageURL && ( {authorImageURL && (
<a <a
className="avatar-photo-link" className="avatar__photo-link"
href={authorURL} href={authorURL}
target="_blank" target="_blank"
rel="noreferrer noopener"> rel="noreferrer noopener">
<img className="avatar-photo" src={authorImageURL} alt={author} /> <img
className="avatar__photo"
src={authorImageURL}
alt={author}
/>
</a> </a>
)} )}
<div className="avatar-intro"> <div className="avatar__intro">
{author && ( {author && (
<> <>
<h4 className="avatar-name"> <h4 className="avatar__name">
<a href={authorURL} target="_blank" rel="noreferrer noopener"> <a href={authorURL} target="_blank" rel="noreferrer noopener">
{author} {author}
</a> </a>
</h4> </h4>
<small className="avatar-subtitle">{authorTitle}</small> <small className="avatar__subtitle">{authorTitle}</small>
</> </>
)} )}
</div> </div>
@ -84,8 +88,8 @@ function Post(props) {
{renderPostHeader()} {renderPostHeader()}
{children} {children}
{truncated && ( {truncated && (
<div className="text-right"> <div className="text--right">
<Link className="btn btn-outline btn-info" to={metadata.permalink}> <Link className="button button--secondary" to={metadata.permalink}>
Read More Read More
</Link> </Link>
</div> </div>

15
packages/docusaurus/lib/default-theme/Sidebar/index.js
View file

@ -48,21 +48,18 @@ function Sidebar() {
switch (item.type) { switch (item.type) {
case 'category': case 'category':
return ( return (
<li className="menu-list-item" key={item.label}> <li className="menu__list-item" key={item.label}>
<a className="menu-link" href="#!"> <a className="menu__link" href="#!">
{item.label} {item.label}
</a> </a>
<ul className="menu-list">{item.items.map(renderItem)}</ul> <ul className="menu__list">{item.items.map(renderItem)}</ul>
</li> </li>
); );
case 'link': case 'link':
return ( return (
<li className="menu-list-item" key={item.label}> <li className="menu__list-item" key={item.label}>
<Link <Link className="menu__link" to={item.href}>
activeClassName="menu-link-active"
className="menu-link"
to={item.href}>
{item.label} {item.label}
</Link> </Link>
</li> </li>
@ -77,7 +74,7 @@ function Sidebar() {
return ( return (
<div className={styles.sidebar}> <div className={styles.sidebar}>
<div className="menu"> <div className="menu">
<ul className="menu-list"> <ul className="menu__list">
{thisSidebar.map(item => renderItem(item, {root: true}))} {thisSidebar.map(item => renderItem(item, {root: true}))}
</ul> </ul>
</div> </div>

2
website/pages/feedback/index.js
View file

@ -22,7 +22,7 @@ function Feedback() {
}); });
}, []); }, []);
return <div className="container margin-vert-xl" data-canny />; return <div className="container margin-vert--xl" data-canny />;
} }
export default Feedback; export default Feedback;

38
website/pages/index.js
View file

@ -110,66 +110,66 @@ function Home() {
</div> </div>
</div> </div>
<div className={styles.section}> <div className={styles.section}>
<div className="container text-center margin-bottom-xl"> <div className="container text--center margin-bottom--xl">
<div className="row"> <div className="row">
<div className="col col-4"> <div className="col">
<img <img
className={styles.featureImage} className={styles.featureImage}
src={`${siteConfig.baseUrl}img/undraw_typewriter.svg`} src={`${siteConfig.baseUrl}img/undraw_typewriter.svg`}
/> />
<h3>Powered by Markdown</h3> <h3>Powered by Markdown</h3>
<p className="padding-horiz-md"> <p className="padding-horiz--md">
Save time and focus on your project's documentation. Simply Save time and focus on your project's documentation. Simply
write docs and blog posts with Markdown and Docusaurus will write docs and blog posts with Markdown and Docusaurus will
publish a set of static html files ready to serve. publish a set of static html files ready to serve.
</p> </p>
</div> </div>
<div className="col col-4"> <div className="col">
<img <img
className={styles.featureImage} className={styles.featureImage}
src={`${siteConfig.baseUrl}img/undraw_react.svg`} src={`${siteConfig.baseUrl}img/undraw_react.svg`}
/> />
<h3>Built Using React</h3> <h3>Built Using React</h3>
<p className="padding-horiz-md"> <p className="padding-horiz--md">
Extend or customize your project's layout by reusing React. Extend or customize your project's layout by reusing React.
Docusaurus can be extended while reusing the same header and Docusaurus can be extended while reusing the same header and
footer. footer.
</p> </p>
</div> </div>
<div className="col col-4"> <div className="col">
<img <img
className={styles.featureImage} className={styles.featureImage}
src={`${siteConfig.baseUrl}img/undraw_around_the_world.svg`} src={`${siteConfig.baseUrl}img/undraw_around_the_world.svg`}
/> />
<h3>Ready for Translations</h3> <h3>Ready for Translations</h3>
<p className="padding-horiz-md"> <p className="padding-horiz--md">
Localization comes pre-configured. Use Crowdin to translate your Localization comes pre-configured. Use Crowdin to translate your
docs into over 70 languages. docs into over 70 languages.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div className="container text-center"> <div className="container text--center">
<div className="row"> <div className="row">
<div className="col col-4 col-offset-2"> <div className="col col--4 col--offset-2">
<img <img
className={styles.featureImage} className={styles.featureImage}
src={`${siteConfig.baseUrl}img/undraw_version_control.svg`} src={`${siteConfig.baseUrl}img/undraw_version_control.svg`}
/> />
<h3>Document Versioning</h3> <h3>Document Versioning</h3>
<p className="padding-horiz-md"> <p className="padding-horiz--md">
Support users on all versions of your project. Document Support users on all versions of your project. Document
versioning helps you keep documentation in sync with project versioning helps you keep documentation in sync with project
releases. releases.
</p> </p>
</div> </div>
<div className="col col-4"> <div className="col col--4">
<img <img
className={styles.featureImage} className={styles.featureImage}
src={`${siteConfig.baseUrl}img/undraw_algolia.svg`} src={`${siteConfig.baseUrl}img/undraw_algolia.svg`}
/> />
<h3>Document Search</h3> <h3>Document Search</h3>
<p className="padding-horiz-md"> <p className="padding-horiz--md">
Make it easy for your community to find what they need in your Make it easy for your community to find what they need in your
documentation. We proudly support Algolia documentation search. documentation. We proudly support Algolia documentation search.
</p> </p>
@ -186,19 +186,19 @@ function Home() {
<div className="container"> <div className="container">
<div className="row"> <div className="row">
{QUOTES.map(quote => ( {QUOTES.map(quote => (
<div className="col col-4" key={quote.name}> <div className="col" key={quote.name}>
<div className="avatar avatar-vertical margin-bottom-sm"> <div className="avatar avatar--vertical margin-bottom--sm">
<img <img
alt={quote.name} alt={quote.name}
className="avatar-photo avatar-photo-xl" className="avatar__photo avatar__photo--xl"
src={`${siteConfig.baseUrl}${quote.thumbnail}`} src={`${siteConfig.baseUrl}${quote.thumbnail}`}
/> />
<div className="avatar-intro"> <div className="avatar__intro">
<h4 className="avatar-name">{quote.name}</h4> <h4 className="avatar__name">{quote.name}</h4>
<small className="avatar-subtitle">{quote.title}</small> <small className="avatar__subtitle">{quote.title}</small>
</div> </div>
</div> </div>
<p className="text-center text-italic padding-horiz-md"> <p className="text--center text--italic padding-horiz--md">
{quote.text} {quote.text}
</p> </p>
</div> </div>

2
website/pages/youtube.js
View file

@ -24,7 +24,7 @@ export default class Player extends React.Component {
<Head> <Head>
<title>My Youtube</title> <title>My Youtube</title>
</Head> </Head>
<div className="container margin-vert-xl text-center"> <div className="container margin-vert--xl text--center">
{/* this is a React-youtube component */} {/* this is a React-youtube component */}
<YouTube videoId="d9IxdwEFk1c" opts={opts} onReady={this._onReady} /> <YouTube videoId="d9IxdwEFk1c" opts={opts} onReady={this._onReady} />
</div> </div>