mirror of
https://github.com/facebook/docusaurus.git
synced 2025-07-29 22:47:52 +02:00
refactor(v2): use BEM for classes
This commit is contained in:
Yangshun Tay
parent
1fc4c9b810
commit
d00799f633
12 changed files with 124 additions and 139 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
||||
|
|
@ -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}
|
||||
<i className="fas fa-arrow-right" />
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<Link
|
||||
className="navbar-link"
|
||||
to={baseUrl + (translationEnabled ? thisLanguage : '')}>
|
||||
{headerIcon && (
|
||||
<img
|
||||
className={styles.navLogo}
|
||||
src={baseUrl + headerIcon}
|
||||
alt={title}
|
||||
/>
|
||||
)}
|
||||
{!disableHeaderTitle && <strong>{title}</strong>}
|
||||
</Link>
|
||||
</div>
|
||||
<nav className="navbar navbar--light navbar--fixed-top">
|
||||
<div className="navbar__inner">
|
||||
<div className="navbar__items">
|
||||
<Link
|
||||
className="navbar__brand"
|
||||
to={baseUrl + (translationEnabled ? thisLanguage : '')}>
|
||||
{headerIcon && (
|
||||
<img
|
||||
className="navbar__logo"
|
||||
src={baseUrl + headerIcon}
|
||||
alt={title}
|
||||
/>
|
||||
)}
|
||||
{!disableHeaderTitle && <strong>{title}</strong>}
|
||||
</Link>
|
||||
{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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue