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
2025-04-29 18:27:56 +02:00 · 2018-06-19 21:46:15 -07:00 · 2018-06-19 21:46:15 -07:00 · 1094dbd352
commit 1094dbd352
parent 169a5e6ded
18 changed files with 1474 additions and 1114 deletions
--- a/docs/api-doc-markdown.md
+++ b/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)`
-* `docdoc(file)`
+- `docusaurus.function(a, b)`
+- `docdoc(file)`
 ```

 and each function will link to their corresponding sections in the page.
--- a/docs/guides-blog.md
+++ b/docs/guides-blog.md
@ -1,5 +1,5 @@
 ---
-id: blog
+id: adding-blog
 title: Adding a Blog
 ---

--- a/examples/basics/pages/en/help.js
+++ b/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" />
--- a/lib/core/BlogPageLayout.js
+++ b/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 => {
--- a/lib/core/BlogPost.js
+++ b/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 +
--- a/lib/core/BlogPostLayout.js
+++ b/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>
--- a/lib/core/Doc.js
+++ b/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>
--- a/lib/core/DocsLayout.js
+++ b/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>
--- a/lib/core/Site.js
+++ b/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 = {
-        lang: this.props.language,
-      };
-    } else {
-      htmlElementProps = {};
+      htmlElementProps.lang = this.props.language;
    }

-    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
-          className={classNames({
-            [className]: className,
-            separateOnPageNav: this.props.config.onPageNav == 'separate',
-          })}>
+        <body className={this.props.className}>
          <HeaderNav
            config={this.props.config}
            baseUrl={this.props.config.baseUrl}
--- a/lib/core/nav/SideNav.js
+++ b/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}>
-        <h3>{this.getLocalizedCategoryString(category.name)}</h3>
+      <div className="navGroup" key={category.name}>
+        <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;
--- a/lib/server/generate.js
+++ b/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 => {
--- a/lib/server/server.js
+++ b/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 => {
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
--- a/website/core/Footer.js
+++ b/website/core/Footer.js
@ -9,8 +9,8 @@ const PropTypes = require('prop-types');
 const React = require('react');

 const SocialFooter = props => (
-  <div>
-    <h5>More</h5>
+  <div className="footerSection">
+    <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
-                  .footerIcon}`}
+                src={`${this.props.config.baseUrl}${
+                  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
-                .language}/users.html`}
-            >
+              href={`${this.props.config.baseUrl}${
+                this.props.language
+              }/users.html`}>
              User Showcase
            </a>
          </div>
          <SocialFooter config={this.props.config} />
        </section>
-
        <a
          href="https://code.facebook.com/projects/"
          target="_blank"
--- a/website/pages/en/help.js
+++ b/website/pages/en/help.js
@ -5,40 +5,37 @@
 * LICENSE file in the root directory of this source tree.
 */

-const React = require("react");
-const CompLibrary = require("../../core/CompLibrary.js");
+const React = require('react');
+const CompLibrary = require('../../core/CompLibrary.js');
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
-const siteConfig = require(process.cwd() + "/siteConfig.js");
-const translate = require("../../server/translate.js").translate;
+const siteConfig = require(process.cwd() + '/siteConfig.js');
+const translate = require('../../server/translate.js').translate;

 class Help extends React.Component {
  render() {
    const supportLinks = [
      {
        title: <translate>Browse the docs</translate>,
-        content: (
-            `Learn more about Docusaurus using the [official documentation](${siteConfig.baseUrl}docs/${this.props.language}/installation).`
-        ),
+        content: `Learn more about Docusaurus using the [official documentation](${
+          siteConfig.baseUrl
+        }docs/${this.props.language}/installation).`,
      },
      {
        title: <translate>Discord</translate>,
-        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."
-        ),
+        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.',
      },
      {
        title: <translate>Twitter</translate>,
-        content: (
-            "You can follow and contact us on [Twitter](https://twitter.com/docusaurus)."
-        ),
+        content:
+          'You can follow and contact us on [Twitter](https://twitter.com/docusaurus).',
      },
      {
        title: <translate>GitHub</translate>,
-        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)."
-        ),
-      }
+        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).',
+      },
    ];

    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" />
--- a/website/pages/en/index.js
+++ b/website/pages/en/index.js
@ -5,13 +5,13 @@
 * LICENSE file in the root directory of this source tree.
 */

-const React = require("react");
-const CompLibrary = require("../../core/CompLibrary.js");
+const React = require('react');
+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 translate = require("../../server/translate.js").translate;
+const siteConfig = require(process.cwd() + '/siteConfig.js');
+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: (
-                    `Save time and focus on your project's documentation. Simply
-                    write docs and blog posts with [Markdown](${siteConfig.baseUrl}docs/${this.props.language}/doc-markdown)
+                  content: `Save time and focus on your project's documentation. Simply
+                    write docs and blog posts with [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",
-                  imageAlt: "Markdown",
-                  title: <translate>Powered by Markdown</translate>
+                  imageAlign: 'top',
+                  imageAlt: 'Markdown',
+                  title: <translate>Powered by Markdown</translate>,
                },
                {
-                  content: (
-                    `[Extend or customize](${siteConfig.baseUrl}docs/${this.props.language}/api-pages)
+                  content: `[Extend or customize](${siteConfig.baseUrl}docs/${
+                    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",
-                  imageAlt: "React",
-                  title: <translate>Built Using React</translate>
+                  imageAlign: 'top',
+                  imageAlt: 'React',
+                  title: <translate>Built Using React</translate>,
                },
                {
-                  content: (
-                    `[Localization](${siteConfig.baseUrl}docs/${this.props.language}/translation)
+                  content: `[Localization](${siteConfig.baseUrl}docs/${
+                    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",
-                  imageAlt: "Translation",
-                  title: <translate>Ready for Translations</translate>
-                }
+                  imageAlign: 'top',
+                  imageAlt: 'Translation',
+                  title: <translate>Ready for Translations</translate>,
+                },
              ]}
              layout="threeColumn"
            />
@ -132,93 +137,109 @@ class Index extends React.Component {
              align="center"
              contents={[
                {
-                  content: (
-                    `Support users on all versions of your project. Document
-                    [versioning](${siteConfig.baseUrl}docs/${this.props.language}/versioning)
-                    helps you keep documentation in sync with project releases.`
-                  ),
+                  content: `Support users on all versions of your project. Document
+                    [versioning](${siteConfig.baseUrl}docs/${
+                    this.props.language
+                  }/versioning)
+                    helps you keep documentation in sync with project releases.`,
                  image: `${siteConfig.baseUrl}img/versioning.svg`,
-                  imageAlign: "top",
-                  imageAlt: "Document Versioning",
-                  title: <translate>Document Versioning</translate>
+                  imageAlign: 'top',
+                  imageAlt: 'Document Versioning',
+                  title: <translate>Document Versioning</translate>,
                },
                {
-                  content: (
-                    `Make it easy for your community to [find](${siteConfig.baseUrl}docs/${this.props.language}/search) what they need in your documentation.
-                    We proudly support [Algolia documentation search](https://www.algolia.com/).`
-                  ),
+                  content: `Make it easy for your community to [find](${
+                    siteConfig.baseUrl
+                  }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",
-                  imageAlt: "Document Search",
-                  title: <translate>Document Search</translate>
-                }
+                  imageAlign: 'top',
+                  imageAlt: 'Document Search',
+                  title: <translate>Document Search</translate>,
+                },
              ]}
              layout="twoColumn"
            />
          </Container>
-          <Container padding={["bottom", "top"]} background="light">
+          <Container padding={['bottom', 'top']}>
            <GridBlock
              contents={[
                {
-                  content: (
-                    `Get [up and running](${siteConfig.baseUrl}docs/${this.props.language}/site-creation)
-                    quickly without having to worry about site design.`
-                  ),
-                  imageAlign: "right",
+                  content: `Get [up and running](${siteConfig.baseUrl}docs/${
+                    this.props.language
+                  }/site-creation)
+                    quickly without having to worry about site design.`,
+                  imageAlign: 'right',
                  image: `${siteConfig.baseUrl}img/docusaurus_speed.svg`,
-                  imageAlt: "Docusaurus on a Scooter",
-                  title: <translate>Quick Setup</translate>
-                }
+                  imageAlt: 'Docusaurus on a Scooter',
+                  title: <translate>Quick Setup</translate>,
+                },
              ]}
              layout="twoColumn"
            />
          </Container>
-          <Container padding={["bottom", "top"]}>
+          <Container padding={['bottom', 'top']} background="light">
            <GridBlock
              contents={[
                {
-                  content: (
-                    `Make design and documentation changes by using the included
-                    [live server](${siteConfig.baseUrl}docs/${this.props.language}/site-preparation#verifying-installation).
-                    [Publish](${siteConfig.baseUrl}docs/${this.props.language}/publishing)
+                  content: `Make design and documentation changes by using the included
+                    [live server](${siteConfig.baseUrl}docs/${
+                    this.props.language
+                  }/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.`
-                  ),
-                  imageAlign: "left",
+                    like CircleCI.`,
+                  imageAlign: 'left',
                  image: `${siteConfig.baseUrl}img/docusaurus_live.gif`,
-                  imageAlt: "Docusaurus Demo",
-                  title: <translate>Develop and Deploy</translate>
-                }
+                  imageAlt: 'Docusaurus Demo',
+                  title: <translate>Develop and Deploy</translate>,
+                },
              ]}
              layout="twoColumn"
            />
          </Container>
-          <Container padding={["bottom", "top"]} background="light">
+          <Container padding={['bottom', 'top']}>
            <GridBlock
              contents={[
                {
-                  content: (
-                    `Docusaurus currently provides support to help your website
-                    use [translations](${siteConfig.baseUrl}docs/${this.props.language}/translation),
-                    [search](${siteConfig.baseUrl}docs/${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).
+                  content: `Docusaurus currently provides support to help your website
+                    use [translations](${siteConfig.baseUrl}docs/${
+                    this.props.language
+                  }/translation),
+                    [search](${siteConfig.baseUrl}docs/${
+                    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)!`
-                  ),
-                  imageAlign: "right",
+                    contribute on [GitHub](https://github.com/facebook/docusaurus)!`,
+                  imageAlign: 'right',
                  image: `${siteConfig.baseUrl}img/docusaurus_monochrome.svg`,
-                  imageAlt: "Monochromatic Docusaurus",
-                  title: <translate>Website Features</translate>
-                }
+                  imageAlt: 'Monochromatic Docusaurus',
+                  title: <translate>Website Features</translate>,
+                },
              ]}
              layout="twoColumn"
            />
          </Container>
          <div className="productShowcaseSection paddingBottom">
-            <h2><translate>Who's Using Docusaurus?</translate></h2>
-            <p><translate>Docusaurus is building websites for these projects...</translate></p>
+            <h2>
+              <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",
-                    imageAlt: "Hector Ramos",
-                    title: 'Hector Ramos <br/><font size="2">Lead React Native Advocate</font>'
+                    imageAlign: 'top',
+                    imageAlt: 'Hector Ramos',
+                    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",
-                    imageAlt: "Ricky Vetter",
-                    title: 'Ricky Vetter <br/><font size="2">ReasonReact Developer</font>'
-                  }
+                    imageAlign: 'top',
+                    imageAlt: 'Ricky Vetter',
+                    title:
+                      'Ricky Vetter <br/><font size="2">ReasonReact Developer</font>',
+                  },
                ]}
                layout="threeColumn"
              />
--- a/website/pages/en/users.js
+++ b/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>
--- a/website/sidebars.json
+++ b/website/sidebars.json
@ -7,7 +7,7 @@
      "publishing"
    ],
    "Guides": [
-      "blog",
+      "adding-blog",
      "custom-pages",
      "search",
      "navigation",