CSS revamp - Improve typography and overall styling (#757)

* Improve CSS code

* Fix blog layout

* Fix

* Refactor onPageNav

* More fixes

* Fix docs nav

* Use alternative hack

* Tweak clearfix

docs/api-doc-markdown.md

@@ -3,6 +3,8 @@ id: doc-markdown
 title: Markdown Features
 ---
 
+Find out more about Docusaurus-specific fields when writing Markdown.
+
 ## Markdown Headers
 
 ### Documents
@@ -124,8 +126,8 @@ Text describing my function
 will lead to a table of contents of the functions:
 
 ```md
-* `docusaurus.function(a, b)`
+- `docusaurus.function(a, b)`
-* `docdoc(file)`
+- `docdoc(file)`
 ```
 
 and each function will link to their corresponding sections in the page.

docs/guides-blog.md

@@ -1,5 +1,5 @@
 ---
-id: blog
+id: adding-blog
 title: Adding a Blog
 ---
 

examples/basics/pages/en/help.js

@@ -43,7 +43,7 @@ class Help extends React.Component {
         <Container className="mainContainer documentContainer postContainer">
           <div className="post">
             <header className="postHeader">
-              <h2>Need help?</h2>
+              <h1>Need help?</h1>
             </header>
             <p>This project is maintained by a dedicated group of people.</p>
             <GridBlock contents={supportLinks} layout="threeColumn" />

lib/core/BlogPageLayout.js

@@ -31,13 +31,14 @@ class BlogPageLayout extends React.Component {
         title="Blog"
         language="en"
         config={this.props.config}
+        className="blog"
         metadata={{blog: true, blogListing: true}}>
         <div className="docMainWrapper wrapper">
           <BlogSidebar
             language={this.props.language}
             config={this.props.config}
           />
-          <Container className="mainContainer documentContainer postContainer blogContainer">
+          <Container className="mainContainer postContainer blogContainer">
             <div className="posts">
               {MetadataBlog.slice(page * perPage, (page + 1) * perPage).map(
                 post => {

lib/core/BlogPost.js

@@ -45,7 +45,7 @@ class BlogPost extends React.Component {
     const post = this.props.post;
     const className =
       'authorPhoto' +
-      (post.author && post.authorTitle ? ' authorPhoto-big' : '');
+      (post.author && post.authorTitle ? ' authorPhotoBig' : '');
     if (post.authorFBID) {
       return (
         <div className={className}>
@@ -77,7 +77,7 @@ class BlogPost extends React.Component {
   renderTitle() {
     const post = this.props.post;
     return (
-      <h1>
+      <h1 className="postHeaderTitle">
         <a
           href={
             this.props.config.baseUrl +

lib/core/BlogPostLayout.js

@@ -12,6 +12,7 @@ const Container = require('./Container.js');
 const Site = require('./Site.js');
 const OnPageNav = require('./nav/OnPageNav.js');
 const utils = require('./utils.js');
+const classNames = require('classnames');
 
 // used for entire blog posts, i.e., each written blog article with sidebar with site header/footer
 class BlogPostLayout extends React.Component {
@@ -40,7 +41,7 @@ class BlogPostLayout extends React.Component {
     const fbLike = this.props.config.facebookAppId && (
       <div className="blogSocialSectionItem">
         <div
-          className="fb-like"
+          className="fbLike"
           data-href={
             this.props.config.url +
             this.props.config.baseUrl +
@@ -84,7 +85,7 @@ class BlogPostLayout extends React.Component {
   }
 
   getDescription() {
-    var descLines = this.props.children.trim().split('\n');
+    const descLines = this.props.children.trim().split('\n');
     for (var i = 0; i < descLines.length; i++) {
       // Don't want blank lines or descriptions that are raw image rendering strings
       if (descLines[i] && !descLines[i].startsWith('![')) {
@@ -95,12 +96,15 @@ class BlogPostLayout extends React.Component {
   }
 
   render() {
-    let post = this.props.metadata;
+    const hasOnPageNav = this.props.config.onPageNav === 'separate';
+    const post = this.props.metadata;
     post.path = utils.getPath(post.path, this.props.config.cleanUrl);
     let blogSidebarTitleConfig = this.props.config.blogSidebarTitle || {};
     return (
       <Site
-        className="sideNavVisible"
+        className={classNames('sideNavVisible', {
+          separateOnPageNav: hasOnPageNav,
+        })}
         url={'blog/' + post.path}
         title={this.props.metadata.title}
         language={'en'}
@@ -113,7 +117,7 @@ class BlogPostLayout extends React.Component {
             current={post}
             config={this.props.config}
           />
-          <Container className="mainContainer documentContainer postContainer blogContainer">
+          <Container className="mainContainer postContainer blogContainer">
             <div className="lonePost">
               <BlogPost
                 post={post}
@@ -129,7 +133,7 @@ class BlogPostLayout extends React.Component {
               </a>
             </div>
           </Container>
-          {this.props.config.onPageNav == 'separate' && (
+          {hasOnPageNav && (
             <nav className="onPageNav">
               <OnPageNav rawContent={this.props.children} />
             </nav>

lib/core/Doc.js

@@ -65,7 +65,9 @@ class Doc extends React.Component {
       <div className="post">
         <header className="postHeader">
           {editLink}
-          {!this.props.hideTitle && <h1>{this.props.title}</h1>}
+          {!this.props.hideTitle && (
+            <h1 className="postHeaderTitle">{this.props.title}</h1>
+          )}
         </header>
         <article>
           <MarkdownBlock>{this.props.content}</MarkdownBlock>

lib/core/DocsLayout.js

@@ -12,6 +12,7 @@ const DocsSidebar = require('./DocsSidebar.js');
 const OnPageNav = require('./nav/OnPageNav.js');
 const Site = require('./Site.js');
 const translation = require('../server/translation.js');
+const classNames = require('classnames');
 const path = require('path');
 const url = require('url');
 
@@ -43,10 +44,13 @@ class DocsLayout extends React.Component {
           this.props.metadata.localized_id
         ] || this.props.metadata.title
       : this.props.metadata.title;
+    const hasOnPageNav = this.props.config.onPageNav === 'separate';
     return (
       <Site
         config={this.props.config}
-        className="sideNavVisible doc"
+        className={classNames('sideNavVisible', {
+          separateOnPageNav: hasOnPageNav,
+        })}
         title={title}
         description={content.trim().split('\n')[0]}
         language={metadata.language}
@@ -106,7 +110,7 @@ class DocsLayout extends React.Component {
               )}
             </div>
           </Container>
-          {this.props.config.onPageNav == 'separate' && (
+          {hasOnPageNav && (
             <nav className="onPageNav">
               <OnPageNav rawContent={this.props.children} />
             </nav>

lib/core/Site.js

@@ -43,17 +43,11 @@ class Site extends React.Component {
     }
 
     // We do not want a lang attribute for the html tag if we don't have a language set
-    let htmlElementProps;
+    const htmlElementProps = {};
     if (this.props.language) {
-      htmlElementProps = {
+      htmlElementProps.lang = this.props.language;
-        lang: this.props.language,
-      };
-    } else {
-      htmlElementProps = {};
     }
 
-    const className = this.props.className || '';
-
     return (
       <html {...htmlElementProps}>
         <Head
@@ -64,11 +58,7 @@ class Site extends React.Component {
           language={this.props.language}
           version={this.props.version}
         />
-        <body
+        <body className={this.props.className}>
-          className={classNames({
-            [className]: className,
-            separateOnPageNav: this.props.config.onPageNav == 'separate',
-          })}>
           <HeaderNav
             config={this.props.config}
             baseUrl={this.props.config.baseUrl}

lib/core/nav/SideNav.js

@@ -70,14 +70,18 @@ class SideNav extends React.Component {
       </nav>
     );
   }
+
   renderCategory(category) {
     return (
-      <div className="navGroup navGroupActive" key={category.name}>
+      <div className="navGroup" key={category.name}>
-        <h3>{this.getLocalizedCategoryString(category.name)}</h3>
+        <h3 className="navGroupCategoryTitle">
+          {this.getLocalizedCategoryString(category.name)}
+        </h3>
         <ul>{category.links.map(this.renderItemLink, this)}</ul>
       </div>
     );
   }
+
   // return appropriately translated category string
   getLocalizedCategoryString(category) {
     let categoryString = translation[this.props.language]
@@ -86,6 +90,7 @@ class SideNav extends React.Component {
       : category;
     return categoryString;
   }
+
   // return appropriately translated label to use for doc/blog in sidebar
   getLocalizedString(metadata) {
     let localizedString;
@@ -123,23 +128,23 @@ class SideNav extends React.Component {
     }
     return null;
   }
+
   renderItemLink(link) {
     const itemClasses = classNames('navListItem', {
       navListItemActive: link.id === this.props.current.id,
     });
-    const linkClasses = classNames('navItem', {
-      navItemActive: link.id === this.props.current.id,
-    });
     return (
       <li className={itemClasses} key={link.id}>
-        <a className={linkClasses} href={this.getLink(link)}>
+        <a className="navItem" href={this.getLink(link)}>
           {this.getLocalizedString(link)}
         </a>
       </li>
     );
   }
 }
+
 SideNav.defaultProps = {
   contents: [],
 };
+
 module.exports = SideNav;

lib/server/generate.js

@@ -362,13 +362,6 @@ async function execute() {
         const color = siteConfig.colors[key];
         cssContent = cssContent.replace(new RegExp('\\$' + key, 'g'), color);
       });
-      const codeColor = color(siteConfig.colors.primaryColor)
-        .alpha(0.07)
-        .string();
-      cssContent = cssContent.replace(
-        new RegExp('\\$codeColor', 'g'),
-        codeColor
-      );
 
       if (siteConfig.fonts) {
         Object.keys(siteConfig.fonts).forEach(key => {

lib/server/server.js

@@ -503,10 +503,6 @@ function execute(port, options) {
       const color = siteConfig.colors[key];
       cssContent = cssContent.replace(new RegExp('\\$' + key, 'g'), color);
     });
-    const codeColor = color(siteConfig.colors.primaryColor)
-      .alpha(0.07)
-      .string();
-    cssContent = cssContent.replace(new RegExp('\\$codeColor', 'g'), codeColor);
 
     if (siteConfig.fonts) {
       Object.keys(siteConfig.fonts).forEach(key => {

website/core/Footer.js

@@ -9,8 +9,8 @@ const PropTypes = require('prop-types');
 const React = require('react');
 
 const SocialFooter = props => (
-  <div>
+  <div className="footerSection">
-    <h5>More</h5>
+    <h5>Social</h5>
     <div className="social">
       <a
         className="github-button" // part of the https://buttons.github.io/buttons.js script in siteConfig.js
@@ -51,7 +51,7 @@ const SocialFooter = props => (
 );
 
 SocialFooter.propTypes = {
-  config: PropTypes.object
+  config: PropTypes.object,
 };
 
 class Footer extends React.Component {
@@ -62,53 +62,57 @@ class Footer extends React.Component {
           {this.props.config.footerIcon && (
             <a href={this.props.config.baseUrl} className="nav-home">
               <img
-                src={`${this.props.config.baseUrl}${this.props.config
+                src={`${this.props.config.baseUrl}${
-                  .footerIcon}`}
+                  this.props.config.footerIcon
+                }`}
                 alt={this.props.config.title}
                 width="66"
                 height="58"
               />
             </a>
           )}
-          <div>
+          <div className="footerSection">
             <h5>Docs</h5>
             <a
               href={`
-                ${this.props.config.baseUrl}docs/${this.props.language}/installation.html`}
+                ${this.props.config.baseUrl}docs/${
-            >
+                this.props.language
+              }/installation.html`}>
               Getting Started
             </a>
             <a
               href={`
-                ${this.props.config.baseUrl}docs/${this.props.language}/versioning.html`}
+                ${this.props.config.baseUrl}docs/${
-            >
+                this.props.language
+              }/versioning.html`}>
               Versioning
             </a>
             <a
               href={`
-                ${this.props.config.baseUrl}docs/${this.props.language}/translation.html`}
+                ${this.props.config.baseUrl}docs/${
-            >
+                this.props.language
+              }/translation.html`}>
               Localization
             </a>
             <a
               href={`
-                ${this.props.config.baseUrl}docs/${this.props.language}/search.html`}
+                ${this.props.config.baseUrl}docs/${
-            >
+                this.props.language
+              }/search.html`}>
               Adding Search
             </a>
           </div>
-          <div>
+          <div className="footerSection">
             <h5>Community</h5>
             <a
-              href={`${this.props.config.baseUrl}${this.props
+              href={`${this.props.config.baseUrl}${
-                .language}/users.html`}
+                this.props.language
-            >
+              }/users.html`}>
               User Showcase
             </a>
           </div>
           <SocialFooter config={this.props.config} />
         </section>
-
         <a
           href="https://code.facebook.com/projects/"
           target="_blank"

website/pages/en/help.js

@@ -5,40 +5,37 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const React = require("react");
+const React = require('react');
-const CompLibrary = require("../../core/CompLibrary.js");
+const CompLibrary = require('../../core/CompLibrary.js');
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
-const siteConfig = require(process.cwd() + "/siteConfig.js");
+const siteConfig = require(process.cwd() + '/siteConfig.js');
-const translate = require("../../server/translate.js").translate;
+const translate = require('../../server/translate.js').translate;
 
 class Help extends React.Component {
   render() {
     const supportLinks = [
       {
         title: <translate>Browse the docs</translate>,
-        content: (
+        content: `Learn more about Docusaurus using the [official documentation](${
-            `Learn more about Docusaurus using the [official documentation](${siteConfig.baseUrl}docs/${this.props.language}/installation).`
+          siteConfig.baseUrl
-        ),
+        }docs/${this.props.language}/installation).`,
       },
       {
         title: <translate>Discord</translate>,
-        content: (
+        content:
-            "You can join the conversation on [Discord](https://discord.gg/docusaurus) on one of our two text channels: #docusaurus-users for user help and #docusaurus-dev for contributing help."
+          'You can join the conversation on [Discord](https://discord.gg/docusaurus) on one of our two text channels: #docusaurus-users for user help and #docusaurus-dev for contributing help.',
-        ),
       },
       {
         title: <translate>Twitter</translate>,
-        content: (
+        content:
-            "You can follow and contact us on [Twitter](https://twitter.com/docusaurus)."
+          'You can follow and contact us on [Twitter](https://twitter.com/docusaurus).',
-        ),
       },
       {
         title: <translate>GitHub</translate>,
-        content: (
+        content:
-            "At our [GitHub repo](https://github.com/facebook/docusaurus) Browse and submit [issues](https://github.com/facebook/Docusaurus/issues) or [pull requests](https://github.com/facebook/Docusaurus/pulls) for bugs you find or any new features you may want implemented. Be sure to also check out our [contributing information](https://github.com/facebook/Docusaurus/blob/master/CONTRIBUTING.md)."
+          'At our [GitHub repo](https://github.com/facebook/docusaurus) Browse and submit [issues](https://github.com/facebook/Docusaurus/issues) or [pull requests](https://github.com/facebook/Docusaurus/pulls) for bugs you find or any new features you may want implemented. Be sure to also check out our [contributing information](https://github.com/facebook/Docusaurus/blob/master/CONTRIBUTING.md).',
-        ),
+      },
-      }
     ];
 
     return (
@@ -46,11 +43,14 @@ class Help extends React.Component {
         <Container className="mainContainer documentContainer postContainer">
           <div className="post">
             <header className="postHeader">
-              <h2><translate>Need help?</translate></h2>
+              <h1>
+                <translate>Need help?</translate>
+              </h1>
             </header>
             <p>
               <translate desc="statement made to reader">
-                If you need help with Docusaurus, you can try one of the mechanisms below.
+                If you need help with Docusaurus, you can try one of the
+                mechanisms below.
               </translate>
             </p>
             <GridBlock contents={supportLinks} layout="fourColumn" />

website/pages/en/index.js

@@ -5,13 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const React = require("react");
+const React = require('react');
-const CompLibrary = require("../../core/CompLibrary.js");
+const CompLibrary = require('../../core/CompLibrary.js');
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
 const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
-const siteConfig = require(process.cwd() + "/siteConfig.js");
+const siteConfig = require(process.cwd() + '/siteConfig.js');
-const translate = require("../../server/translate.js").translate;
+const translate = require('../../server/translate.js').translate;
 
 class Button extends React.Component {
   render() {
@@ -26,7 +26,7 @@ class Button extends React.Component {
 }
 
 Button.defaultProps = {
-  target: "_self"
+  target: '_self',
 };
 
 class HomeSplash extends React.Component {
@@ -36,23 +36,28 @@ class HomeSplash extends React.Component {
         <div className="homeSplashFade">
           <div className="wrapper homeWrapper">
             <div className="projectLogo">
-              <img src={`${siteConfig.baseUrl}img/docusaurus_keytar.svg`} alt="Docusaurus with Keytar"/>
+              <img
+                src={`${siteConfig.baseUrl}img/docusaurus_keytar.svg`}
+                alt="Docusaurus with Keytar"
+              />
             </div>
             <div className="inner">
-              <h2 className="projectTitle">
+              <h1 className="projectTitle">
                 {siteConfig.title}
                 <small>{siteConfig.tagline}</small>
-              </h2>
+              </h1>
               <div className="section promoSection">
                 <div className="promoRow">
                   <div className="pluginRowBlock">
                     <Button
                       href={`
-                        ${siteConfig.baseUrl}docs/${this.props.language}/installation
+                        ${siteConfig.baseUrl}docs/${
+                        this.props.language
+                      }/installation
                         `}>
                       <translate>Get Started</translate>
                     </Button>
-                    <Button href='https://github.com/facebook/Docusaurus'>
+                    <Button href="https://github.com/facebook/Docusaurus">
                       <translate>GitHub</translate>
                     </Button>
                   </div>
@@ -68,7 +73,7 @@ class HomeSplash extends React.Component {
 
 class Index extends React.Component {
   render() {
-    let language = this.props.language || "en";
+    let language = this.props.language || 'en';
     const showcase = siteConfig.users
       .filter(user => {
         return user.pinned;
@@ -85,44 +90,44 @@ class Index extends React.Component {
       <div>
         <HomeSplash language={language} />
         <div className="mainContainer">
-          <Container padding={["bottom", "top"]}>
+          <Container padding={['bottom', 'top']} background="light">
             <GridBlock
               align="center"
               contents={[
                 {
-                  content: (
+                  content: `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](${
-                    write docs and blog posts with [Markdown](${siteConfig.baseUrl}docs/${this.props.language}/doc-markdown)
+                      siteConfig.baseUrl
+                    }docs/${this.props.language}/doc-markdown)
                     and Docusaurus will publish a set of static html files ready
-                    to serve.`
+                    to serve.`,
-                  ),
                   image: `${siteConfig.baseUrl}img/markdown.png`,
-                  imageAlign: "top",
+                  imageAlign: 'top',
-                  imageAlt: "Markdown",
+                  imageAlt: 'Markdown',
-                  title: <translate>Powered by Markdown</translate>
+                  title: <translate>Powered by Markdown</translate>,
                 },
                 {
-                  content: (
+                  content: `[Extend or customize](${siteConfig.baseUrl}docs/${
-                    `[Extend or customize](${siteConfig.baseUrl}docs/${this.props.language}/api-pages)
+                    this.props.language
+                  }/api-pages)
                     your project's layout by reusing React. Docusaurus can be
-                    extended while reusing the same header and footer.`
+                    extended while reusing the same header and footer.`,
-                  ),
                   image: `${siteConfig.baseUrl}img/react.svg`,
-                  imageAlign: "top",
+                  imageAlign: 'top',
-                  imageAlt: "React",
+                  imageAlt: 'React',
-                  title: <translate>Built Using React</translate>
+                  title: <translate>Built Using React</translate>,
                 },
                 {
-                  content: (
+                  content: `[Localization](${siteConfig.baseUrl}docs/${
-                    `[Localization](${siteConfig.baseUrl}docs/${this.props.language}/translation)
+                    this.props.language
+                  }/translation)
                     comes pre-configured. Use [Crowdin](https://crowdin.com/) to translate your docs
-                    into over 70 languages.`
+                    into over 70 languages.`,
-                  ),
                   image: `${siteConfig.baseUrl}img/translation.svg`,
-                  imageAlign: "top",
+                  imageAlign: 'top',
-                  imageAlt: "Translation",
+                  imageAlt: 'Translation',
-                  title: <translate>Ready for Translations</translate>
+                  title: <translate>Ready for Translations</translate>,
-                }
+                },
               ]}
               layout="threeColumn"
             />
@@ -132,93 +137,109 @@ class Index extends React.Component {
               align="center"
               contents={[
                 {
-                  content: (
+                  content: `Support users on all versions of your project. Document
-                    `Support users on all versions of your project. Document
+                    [versioning](${siteConfig.baseUrl}docs/${
-                    [versioning](${siteConfig.baseUrl}docs/${this.props.language}/versioning)
+                    this.props.language
-                    helps you keep documentation in sync with project releases.`
+                  }/versioning)
-                  ),
+                    helps you keep documentation in sync with project releases.`,
                   image: `${siteConfig.baseUrl}img/versioning.svg`,
-                  imageAlign: "top",
+                  imageAlign: 'top',
-                  imageAlt: "Document Versioning",
+                  imageAlt: 'Document Versioning',
-                  title: <translate>Document Versioning</translate>
+                  title: <translate>Document Versioning</translate>,
                 },
                 {
-                  content: (
+                  content: `Make it easy for your community to [find](${
-                    `Make it easy for your community to [find](${siteConfig.baseUrl}docs/${this.props.language}/search) what they need in your documentation.
+                    siteConfig.baseUrl
-                    We proudly support [Algolia documentation search](https://www.algolia.com/).`
+                  }docs/${
-                  ),
+                    this.props.language
+                  }/search) what they need in your documentation.
+                    We proudly support [Algolia documentation search](https://www.algolia.com/).`,
                   image: `${siteConfig.baseUrl}img/search.svg`,
-                  imageAlign: "top",
+                  imageAlign: 'top',
-                  imageAlt: "Document Search",
+                  imageAlt: 'Document Search',
-                  title: <translate>Document Search</translate>
+                  title: <translate>Document Search</translate>,
-                }
+                },
               ]}
               layout="twoColumn"
             />
           </Container>
-          <Container padding={["bottom", "top"]} background="light">
+          <Container padding={['bottom', 'top']}>
             <GridBlock
               contents={[
                 {
-                  content: (
+                  content: `Get [up and running](${siteConfig.baseUrl}docs/${
-                    `Get [up and running](${siteConfig.baseUrl}docs/${this.props.language}/site-creation)
+                    this.props.language
-                    quickly without having to worry about site design.`
+                  }/site-creation)
-                  ),
+                    quickly without having to worry about site design.`,
-                  imageAlign: "right",
+                  imageAlign: 'right',
                   image: `${siteConfig.baseUrl}img/docusaurus_speed.svg`,
-                  imageAlt: "Docusaurus on a Scooter",
+                  imageAlt: 'Docusaurus on a Scooter',
-                  title: <translate>Quick Setup</translate>
+                  title: <translate>Quick Setup</translate>,
-                }
+                },
               ]}
               layout="twoColumn"
             />
           </Container>
-          <Container padding={["bottom", "top"]}>
+          <Container padding={['bottom', 'top']} background="light">
             <GridBlock
               contents={[
                 {
-                  content: (
+                  content: `Make design and documentation changes by using the included
-                    `Make design and documentation changes by using the included
+                    [live server](${siteConfig.baseUrl}docs/${
-                    [live server](${siteConfig.baseUrl}docs/${this.props.language}/site-preparation#verifying-installation).
+                    this.props.language
-                    [Publish](${siteConfig.baseUrl}docs/${this.props.language}/publishing)
+                  }/site-preparation#verifying-installation).
+                    [Publish](${siteConfig.baseUrl}docs/${
+                    this.props.language
+                  }/publishing)
                     your site to GitHub pages or other static file hosts
                     manually, using a script, or with continuous integration
-                    like CircleCI.`
+                    like CircleCI.`,
-                  ),
+                  imageAlign: 'left',
-                  imageAlign: "left",
                   image: `${siteConfig.baseUrl}img/docusaurus_live.gif`,
-                  imageAlt: "Docusaurus Demo",
+                  imageAlt: 'Docusaurus Demo',
-                  title: <translate>Develop and Deploy</translate>
+                  title: <translate>Develop and Deploy</translate>,
-                }
+                },
               ]}
               layout="twoColumn"
             />
           </Container>
-          <Container padding={["bottom", "top"]} background="light">
+          <Container padding={['bottom', 'top']}>
             <GridBlock
               contents={[
                 {
-                  content: (
+                  content: `Docusaurus currently provides support to help your website
-                    `Docusaurus currently provides support to help your website
+                    use [translations](${siteConfig.baseUrl}docs/${
-                    use [translations](${siteConfig.baseUrl}docs/${this.props.language}/translation),
+                    this.props.language
-                    [search](${siteConfig.baseUrl}docs/${this.props.language}/search),
+                  }/translation),
-                    and [versioning](${siteConfig.baseUrl}docs/${this.props.language}/versioning),
+                    [search](${siteConfig.baseUrl}docs/${
-                    along with some other special [documentation markdown features](${siteConfig.baseUrl}docs/${this.props.language}/doc-markdown).
+                    this.props.language
+                  }/search),
+                    and [versioning](${siteConfig.baseUrl}docs/${
+                    this.props.language
+                  }/versioning),
+                    along with some other special [documentation markdown features](${
+                      siteConfig.baseUrl
+                    }docs/${this.props.language}/doc-markdown).
                     If you have ideas for useful features, feel free to
-                    contribute on [GitHub](https://github.com/facebook/docusaurus)!`
+                    contribute on [GitHub](https://github.com/facebook/docusaurus)!`,
-                  ),
+                  imageAlign: 'right',
-                  imageAlign: "right",
                   image: `${siteConfig.baseUrl}img/docusaurus_monochrome.svg`,
-                  imageAlt: "Monochromatic Docusaurus",
+                  imageAlt: 'Monochromatic Docusaurus',
-                  title: <translate>Website Features</translate>
+                  title: <translate>Website Features</translate>,
-                }
+                },
               ]}
               layout="twoColumn"
             />
           </Container>
           <div className="productShowcaseSection paddingBottom">
-            <h2><translate>Who's Using Docusaurus?</translate></h2>
+            <h2>
-            <p><translate>Docusaurus is building websites for these projects...</translate></p>
+              <translate>Who's Using Docusaurus?</translate>
+            </h2>
+            <p>
+              <translate>
+                Docusaurus is building websites for these projects...
+              </translate>
+            </p>
             <div className="logos">{showcase}</div>
             <div className="more-users">
               <a
@@ -229,7 +250,7 @@ class Index extends React.Component {
             </div>
           </div>
           <div className="testimonials">
-            <Container padding={["bottom", "top"]}>
+            <Container padding={['bottom', 'top']}>
               <GridBlock
                 align="center"
                 contents={[
@@ -237,26 +258,29 @@ class Index extends React.Component {
                     content:
                       "*I've helped open source many projects at Facebook and every one needed a website. They all had very similar constraints: the documentation should be written in markdown and be deployed via GitHub pages. None of the existing solutions were great, so I hacked my own and then forked it whenever we needed a new website. I’m so glad that Docusaurus now exists so that I don’t have to spend a week each time spinning up a new one.*",
                     image: `${siteConfig.baseUrl}img/christopher-chedeau.jpg`,
-                    imageAlign: "top",
+                    imageAlign: 'top',
                     imageAlt: 'Christopher "vjeux" Chedeau',
-                    title: 'Christopher "vjeux" Chedeau <br/><font size="2">Lead Prettier Developer</font>'
+                    title:
+                      'Christopher "vjeux" Chedeau <br/><font size="2">Lead Prettier Developer</font>',
                   },
                   {
                     content:
-                      "*Open source contributions to the React Native docs have skyrocketed after our move to Docusaurus. The docs are now hosted on a small repo in plain markdown, with none of the clutter that a typical static site generator would require. Thanks Slash!*",
+                      '*Open source contributions to the React Native docs have skyrocketed after our move to Docusaurus. The docs are now hosted on a small repo in plain markdown, with none of the clutter that a typical static site generator would require. Thanks Slash!*',
                     image: `${siteConfig.baseUrl}img/hector-ramos.png`,
-                    imageAlign: "top",
+                    imageAlign: 'top',
-                    imageAlt: "Hector Ramos",
+                    imageAlt: 'Hector Ramos',
-                    title: 'Hector Ramos <br/><font size="2">Lead React Native Advocate</font>'
+                    title:
+                      'Hector Ramos <br/><font size="2">Lead React Native Advocate</font>',
                   },
                   {
                     content:
-                      "*Docusaurus has been a great choice for the ReasonML family of projects. It makes our documentation consistent, i18n-friendly, easy to maintain, and friendly for new contributors.*",
+                      '*Docusaurus has been a great choice for the ReasonML family of projects. It makes our documentation consistent, i18n-friendly, easy to maintain, and friendly for new contributors.*',
                     image: `${siteConfig.baseUrl}img/ricky-vetter.jpg`,
-                    imageAlign: "top",
+                    imageAlign: 'top',
-                    imageAlt: "Ricky Vetter",
+                    imageAlt: 'Ricky Vetter',
-                    title: 'Ricky Vetter <br/><font size="2">ReasonReact Developer</font>'
+                    title:
-                  }
+                      'Ricky Vetter <br/><font size="2">ReasonReact Developer</font>',
+                  },
                 ]}
                 layout="threeColumn"
               />

website/pages/en/users.js

@@ -31,7 +31,7 @@ class Users extends React.Component {
 
     return (
       <div className="mainContainer">
-        <Container padding={['bottom', 'top']}>
+        <Container padding={['bottom']}>
           <div className="showcaseSection">
             <div className="prose">
               <h1>

website/sidebars.json

@@ -7,7 +7,7 @@
       "publishing"
     ],
     "Guides": [
-      "blog",
+      "adding-blog",
       "custom-pages",
       "search",
       "navigation",