refactor(v2): use BEM for classes

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

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;
}

View file

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

View file

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

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;

View file

@ -110,66 +110,66 @@ function Home() {
</div>
</div>
<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="col col-4">
<div className="col">
<img
className={styles.featureImage}
src={`${siteConfig.baseUrl}img/undraw_typewriter.svg`}
/>
<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
write docs and blog posts with Markdown and Docusaurus will
publish a set of static html files ready to serve.
</p>
</div>
<div className="col col-4">
<div className="col">
<img
className={styles.featureImage}
src={`${siteConfig.baseUrl}img/undraw_react.svg`}
/>
<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.
Docusaurus can be extended while reusing the same header and
footer.
</p>
</div>
<div className="col col-4">
<div className="col">
<img
className={styles.featureImage}
src={`${siteConfig.baseUrl}img/undraw_around_the_world.svg`}
/>
<h3>Ready for Translations</h3>
<p className="padding-horiz-md">
<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="container text--center">
<div className="row">
<div className="col col-4 col-offset-2">
<div className="col col--4 col--offset-2">
<img
className={styles.featureImage}
src={`${siteConfig.baseUrl}img/undraw_version_control.svg`}
/>
<h3>Document Versioning</h3>
<p className="padding-horiz-md">
<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">
<div className="col col--4">
<img
className={styles.featureImage}
src={`${siteConfig.baseUrl}img/undraw_algolia.svg`}
/>
<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
documentation. We proudly support Algolia documentation search.
</p>
@ -186,19 +186,19 @@ function Home() {
<div className="container">
<div className="row">
{QUOTES.map(quote => (
<div className="col col-4" key={quote.name}>
<div className="avatar avatar-vertical margin-bottom-sm">
<div className="col" key={quote.name}>
<div className="avatar avatar--vertical margin-bottom--sm">
<img
alt={quote.name}
className="avatar-photo avatar-photo-xl"
className="avatar__photo avatar__photo--xl"
src={`${siteConfig.baseUrl}${quote.thumbnail}`}
/>
<div className="avatar-intro">
<h4 className="avatar-name">{quote.name}</h4>
<small className="avatar-subtitle">{quote.title}</small>
<div className="avatar__intro">
<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">
<p className="text--center text--italic padding-horiz--md">
{quote.text}
</p>
</div>

View file

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