Docs hardening (#817)

* SONAR-11352 Fix version label when on latest

* SONAR-11353 Add favicon

* SONAR-11351 Add canonical url

* Change utility links positions

* Fix the content of sonar-docs zip file

* Rename sonar-docs preproduction server

* Remove achived version notice when on lastest

* Fix links prefixing

* SONAR-11359 Make images path relative to version

* Apply feedbacks

* Fix favicon path

server/sonar-docs/build.gradle

@@ -9,6 +9,8 @@ sonarqube {
 group = 'com.sonarsource.sonarqube'
 
 yarn_run {
+  environment = [ GATSBY_DOCS_VERSION: version ]
+  inputs.property('version', version)
   inputs.dir('src').withPathSensitivity(PathSensitivity.RELATIVE)
   ['gatsby-config.js', 'gatsby-node.js', 'package.json'].each {
     inputs.file(it).withPathSensitivity(PathSensitivity.RELATIVE)
@@ -27,7 +29,7 @@ task "yarn_lint-report"() {
 }
 
 task zip(type: Zip) {
-  def archiveDir = "sonarqube-docs-$version"
+  def archiveDir = "$version"
   duplicatesStrategy DuplicatesStrategy.EXCLUDE
   baseName "sonar-docs"
 

server/sonar-docs/gatsby-config.js

@@ -19,10 +19,7 @@
  */
 const DOCS_VERSION = process.env.GATSBY_DOCS_VERSION || '1.0';
 
-const prefix =
-  process.env.GATSBY_USE_PREFIX === '1'
-    ? { pathPrefix: '/' + process.env.GATSBY_DOCS_VERSION }
-    : {};
+const prefix = { pathPrefix: '/' + DOCS_VERSION }
 
 module.exports = {
   ...prefix,

server/sonar-docs/src/images/community-icon.svg

@@ -1,2 +0,0 @@
-
-<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{fill:#c9232c}</style></defs><g id="Groupe_5744" data-name="Groupe 5744"><g id="user"><g id="User-2" data-name="User"><g id="Groupe_5718" data-name="Groupe 5718"><path id="Tracé_9562" data-name="Tracé 9562" d="M18.27 37.36c5.28 0 9.57-5.25 9.57-11.7S23.54 14 18.27 14a8.72 8.72 0 0 0-6.85 3.51 13.1 13.1 0 0 0-2.73 8.19c0 6.41 4.31 11.66 9.58 11.66zm0-21.28c4.1 0 7.44 4.3 7.44 9.58s-3.34 9.57-7.44 9.57-7.45-4.29-7.45-9.57 3.34-9.57 7.45-9.57zm7.44 19.15a1.07 1.07 0 0 0 0 2.13 7.45 7.45 0 0 1 7.45 7.44 1.07 1.07 0 0 1-1.07 1.07H4.44a1.07 1.07 0 0 1-1.07-1.07 7.45 7.45 0 0 1 7.45-7.44 1.07 1.07 0 0 0 0-2.13 9.61 9.61 0 0 0-9.58 9.58A3.2 3.2 0 0 0 4.44 48H32.1a3.19 3.19 0 0 0 3.19-3.19 9.6 9.6 0 0 0-9.58-9.58z"/></g></g></g><g id="Groupe_5727" data-name="Groupe 5727"><path id="Tracé_8533" data-name="Tracé 8533" class="cls-1" d="M43.69 27.71h-1.61a23.58 23.58 0 0 0-23.7-23.4v-1.6a25.19 25.19 0 0 1 25.31 25"/><path id="Tracé_8534" data-name="Tracé 8534" class="cls-1" d="M44.8 19.13A24.11 24.11 0 0 0 28.1 1.91l.38-1.29a25.51 25.51 0 0 1 17.64 18.2z"/><path id="Tracé_8535" data-name="Tracé 8535" class="cls-1" d="M46.61 11.53A24.67 24.67 0 0 0 37.09.9l.56-.9a25.7 25.7 0 0 1 9.93 11.07z"/></g></g></svg>

server/sonar-docs/src/images/community.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.67 15.199"><defs><style>.cls-1{fill:#8a8c8f}</style></defs><g id="Groupe_5754" data-name="Groupe 5754" transform="translate(-152.652 -749)"><g id="user_5_" data-name="user (5)" transform="translate(152.652 753.42)"><g id="User"><g id="Groupe_5718" data-name="Groupe 5718"><path id="Tracé_9562" data-name="Tracé 9562" class="cls-1" d="M5.39 7.411c1.672 0 3.032-1.663 3.032-3.706S7.061 0 5.39 0a2.77 2.77 0 0 0-2.169 1.113 4.148 4.148 0 0 0-.863 2.593c0 2.042 1.36 3.705 3.032 3.705zm0-6.737c1.3 0 2.358 1.36 2.358 3.032S6.69 6.738 5.39 6.738 3.032 5.377 3.031 3.706 4.09.674 5.39.674zm2.358 6.063a.337.337 0 1 0 0 .674 2.361 2.361 0 0 1 2.358 2.358.337.337 0 0 1-.337.337H1.011a.337.337 0 0 1-.337-.337 2.361 2.361 0 0 1 2.358-2.358.337.337 0 1 0 0-.674A3.035 3.035 0 0 0 0 9.769a1.012 1.012 0 0 0 1.011 1.011h8.758a1.012 1.012 0 0 0 1.011-1.011 3.035 3.035 0 0 0-3.032-3.032z"/></g></g></g><g id="Groupe_5753" data-name="Groupe 5753" transform="translate(158.078 749)"><path id="Tracé_8533" data-name="Tracé 8533" class="cls-1" d="M299.414 15.715h-.506a7.469 7.469 0 0 0-7.508-7.409V7.8a7.974 7.974 0 0 1 8.014 7.915" transform="translate(-291.4 -6.943)"/><path id="Tracé_8534" data-name="Tracé 8534" class="cls-1" d="M324.687 7.659a7.63 7.63 0 0 0-5.287-5.452l.121-.407a8.071 8.071 0 0 1 5.584 5.76z" transform="translate(-316.322 -1.602)"/><path id="Tracé_8535" data-name="Tracé 8535" class="cls-1" d="M348.312 3.65A7.81 7.81 0 0 0 345.3.286l.176-.286a8.139 8.139 0 0 1 3.144 3.507z" transform="translate(-339.375)"/></g></g></svg>

server/sonar-docs/src/images/newspaper.svg

@@ -0,0 +1 @@
+<svg id="newspaper" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.45 12.543"><defs><style>.cls-1{fill:#8a8c8f}</style></defs><g id="Groupe_5746" data-name="Groupe 5746" transform="translate(5.348 3.34)"><g id="Groupe_5745" data-name="Groupe 5745"><path id="Tracé_9572" data-name="Tracé 9572" class="cls-1" d="M207.455 144.4h-3.34a.533.533 0 1 0 0 1.066h3.34a.533.533 0 1 0 0-1.066z" transform="translate(-203.582 -144.402)"/></g></g><g id="Groupe_5748" data-name="Groupe 5748" transform="translate(5.348 5.917)"><g id="Groupe_5747" data-name="Groupe 5747"><path id="Tracé_9573" data-name="Tracé 9573" class="cls-1" d="M208.735 242.473h-4.619a.533.533 0 0 0 0 1.066h4.619a.533.533 0 0 0 0-1.066z" transform="translate(-203.582 -242.473)"/></g></g><g id="Groupe_5750" data-name="Groupe 5750"><g id="Groupe_5749" data-name="Groupe 5749"><path id="Tracé_9574" data-name="Tracé 9574" class="cls-1" d="M12.917 17.247H3.482a.533.533 0 0 0-.533.533v5.028h-.941A2.01 2.01 0 0 0 0 24.816v2.967a2.008 2.008 0 0 0 2.275 1.99h8.794a2.384 2.384 0 0 0 2.381-2.381V17.78a.533.533 0 0 0-.533-.533zM2.949 27.783a.943.943 0 0 1-.759.924h-.182v.018a.943.943 0 0 1-.942-.942v-2.967a.943.943 0 0 1 .942-.942h.942v3.909zm9.434-.391a1.332 1.332 0 0 1-1.315 1.315H3.79a1.994 1.994 0 0 0 .225-.924v-9.47h8.368v9.079z" transform="translate(0 -17.247)"/></g></g><g id="Groupe_5752" data-name="Groupe 5752" transform="translate(5.348 8.333)"><g id="Groupe_5751" data-name="Groupe 5751"><path id="Tracé_9575" data-name="Tracé 9575" class="cls-1" d="M207.455 334.464h-3.34a.533.533 0 1 0 0 1.066h3.34a.533.533 0 1 0 0-1.066z" transform="translate(-203.582 -334.464)"/></g></g></svg>

server/sonar-docs/src/images/sq-icon-small.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M11.939 13.282h-.756C11.183 7.203 6.167 2.256 0 2.256v-.755c6.585 0 11.939 5.286 11.939 11.781zm.522-4.053c-.906-3.816-3.997-7-7.872-8.111l.173-.603c4.09 1.174 7.353 4.538 8.311 8.57l-.612.144zm.581-3.575A11.572 11.572 0 0 0 8.562.648l.261-.43a12.081 12.081 0 0 1 4.677 5.22l-.458.216z" fill="#4e9bcd" fill-rule="nonzero"/></svg>

server/sonar-docs/src/images/tw-icon-small.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M13.5 2.57a5.52 5.52 0 0 1-1.593.428 2.685 2.685 0 0 0 1.216-1.524 5.431 5.431 0 0 1-1.756.668 2.666 2.666 0 0 0-2.022-.874c-.765 0-1.417.27-1.957.809a2.67 2.67 0 0 0-.809 1.958c0 .205.023.417.068.634a7.724 7.724 0 0 1-3.182-.853A7.84 7.84 0 0 1 .942 1.773a2.713 2.713 0 0 0-.377 1.396c0 .474.112.914.334 1.32.223.405.523.733.9.985a2.746 2.746 0 0 1-1.251-.352v.035c0 .668.21 1.254.63 1.76.42.506.949.824 1.589.955a2.846 2.846 0 0 1-.728.094c-.16 0-.334-.014-.523-.042a2.71 2.71 0 0 0 .977 1.366c.474.357 1.01.541 1.61.552a5.417 5.417 0 0 1-3.435 1.182c-.245 0-.468-.011-.668-.034a7.684 7.684 0 0 0 4.249 1.242c.982 0 1.904-.155 2.766-.467.863-.311 1.599-.728 2.21-1.25a8.407 8.407 0 0 0 1.581-1.803c.442-.68.772-1.39.989-2.129A7.86 7.86 0 0 0 12.112 4 5.805 5.805 0 0 0 13.5 2.57z" fill="#4d9bce" fill-rule="nonzero"/></svg>

server/sonar-docs/src/images/twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.751 11.981"><path d="M14.751 1.423a6.335 6.335 0 0 1-1.516 1.563q.009.131.009.393a8.589 8.589 0 0 1-.356 2.429 8.779 8.779 0 0 1-1.081 2.326 9.144 9.144 0 0 1-1.727 1.97 7.689 7.689 0 0 1-2.415 1.367 8.838 8.838 0 0 1-3.023.51A8.4 8.4 0 0 1 0 10.624a6.468 6.468 0 0 0 .73.037 5.919 5.919 0 0 0 3.753-1.292 3.03 3.03 0 0 1-2.827-2.1 3.831 3.831 0 0 0 .571.047 3.128 3.128 0 0 0 .8-.1 2.974 2.974 0 0 1-1.736-1.044A2.921 2.921 0 0 1 .6 4.25v-.037a3 3 0 0 0 1.367.384 3.02 3.02 0 0 1-.983-1.076A3.03 3.03 0 0 1 1.031.554a8.57 8.57 0 0 0 2.757 2.232 8.424 8.424 0 0 0 3.477.931 3.358 3.358 0 0 1-.075-.693A3.026 3.026 0 0 1 12.422.955a5.928 5.928 0 0 0 1.919-.73 2.935 2.935 0 0 1-1.329 1.666 6.024 6.024 0 0 0 1.739-.468z" fill="#8a8c8f"/></svg>

server/sonar-docs/src/layouts/components/Sidebar.js

@@ -25,6 +25,7 @@ import Search from './Search';
 import SearchEntryResult from './SearchEntryResult';
 import NavigationTree from '../../../static/StaticNavigationTree.json';
 import { ExternalLink } from './ExternalLink';
+import DownloadIcon from './icons/DownloadIcon';
 
 export default class Sidebar extends React.PureComponent {
   constructor(props) {
@@ -129,6 +130,7 @@ export default class Sidebar extends React.PureComponent {
 
   render() {
     const isOnCurrentVersion =
+      this.props.version === 'latest' ||
       this.state.versions.find(v => v.value === this.props.version) !== undefined;
     return (
       <div className="page-sidebar">
@@ -137,7 +139,7 @@ export default class Sidebar extends React.PureComponent {
             <img
               alt="Continuous Code Quality"
               css={{ verticalAlign: 'top', margin: 0 }}
-              src="/images/SonarQubeIcon.svg"
+              src={`/${this.props.version}/images/SonarQubeIcon.svg`}
               title="Continuous Code Quality"
               width="160"
             />
@@ -166,6 +168,29 @@ export default class Sidebar extends React.PureComponent {
           {this.state.query !== '' && this.renderResults()}
           {this.state.query === '' && this.renderCategories(NavigationTree)}
         </div>
+        <div className="sidebar-footer">
+          <a href="https://www.sonarqube.org/" rel="noopener noreferrer" target="_blank">
+            <DownloadIcon /> SonarQube
+          </a>
+          <a href="https://community.sonarsource.com/" rel="noopener noreferrer" target="_blank">
+            <img src={`/${this.props.version}/images/community.svg`} alt="Community" /> Community
+          </a>
+          <a
+            className="icon-only"
+            href="https://twitter.com/SonarQube"
+            rel="noopener noreferrer"
+            target="_blank">
+            <img src={`/${this.props.version}/images/twitter.svg`} alt="Twitter" />
+          </a>
+          <a
+            className="icon-only"
+            href="https://www.sonarsource.com/resources/product-news/"
+            rel="noopener noreferrer"
+            target="_blank">
+            <img src={`/${this.props.version}/images/newspaper.svg`} alt="Product News" />
+            <span className="tooltip">Product News</span>
+          </a>
+        </div>
       </div>
     );
   }

server/sonar-docs/src/layouts/components/VersionSelect.js

@@ -37,12 +37,16 @@ export default class VersionSelect extends React.PureComponent {
   render() {
     const { versions } = this.props;
     const hasVersions = versions.length > 1;
+    const currentVersion = versions.find(v => v.current);
+    const versionLabel =
+      this.props.version === 'latest' && currentVersion ? currentVersion.value : this.props.version;
     const isOnCurrentVersion =
-      !hasVersions || versions.find(v => v.value === this.props.version) !== undefined;
+      !hasVersions || (currentVersion && versionLabel === currentVersion.value);
+
     return (
       <div className="version-select">
         <button onClick={this.handleClick}>
-          Docs <span className={isOnCurrentVersion ? 'current' : ''}>{this.props.version}</span>
+          Docs <span className={isOnCurrentVersion ? 'current' : ''}>{versionLabel}</span>
           {hasVersions && !this.state.open && <ChevronDownIcon size={10} />}
           {hasVersions && this.state.open && <ChevronUpIcon size={10} />}
         </button>

server/sonar-docs/src/layouts/index.js

@@ -19,7 +19,6 @@
  */
 import React from 'react';
 import Sidebar from './components/Sidebar';
-import DownloadIcon from './components/icons/DownloadIcon';
 import Footer from './components/Footer';
 import HeaderListProvider from './components/HeaderListProvider';
 
@@ -44,29 +43,6 @@ export default function Layout(props) {
               />
             </div>
             <div className="page-main">
-              <div className="useful-links-block">
-                <div className="useful-link-title">Download</div>
-                <a href="https://www.sonarqube.org/" rel="noopener noreferrer" target="_blank">
-                  <DownloadIcon /> SonarQube
-                </a>
-                <div className="useful-link-title">Get Help</div>
-                <a
-                  href="https://community.sonarsource.com/"
-                  rel="noopener noreferrer"
-                  target="_blank">
-                  <img src="/images/community-icon.svg" alt="Community" /> Community
-                </a>
-                <div className="useful-link-title">Stay Connected</div>
-                <a href="https://twitter.com/SonarQube" rel="noopener noreferrer" target="_blank">
-                  <img src="/images/tw-icon-small.svg" alt="Twitter" /> Twitter
-                </a>
-                <a
-                  href="https://www.sonarsource.com/resources/product-news/"
-                  rel="noopener noreferrer"
-                  target="_blank">
-                  <img src="/images/sq-icon-small.svg" alt="Product News" /> Product News
-                </a>
-              </div>
               <div className="page-container">{props.children()}</div>
               <Footer />
             </div>

server/sonar-docs/src/templates/page.css

@@ -65,10 +65,80 @@ body > div,
   margin-right: -6px;
 }
 
+.sidebar-footer {
+  border-top: 1px solid #cfd3d7;
+  flex-grow: 0;
+  font-size: 12px;
+}
+
+.sidebar-footer a {
+  position: relative;
+  display: inline-block;
+  text-decoration: none;
+  color: rgba(0, 0, 0, 0.8);
+  line-height: 30px;
+  margin: 10px 10px 10px -8px;
+  padding: 0 8px;
+  border-radius: 3px;
+}
+
+.sidebar-footer a img,
+.sidebar-footer a svg {
+  height: 16px;
+  color: #8a8c8f;
+  margin-right: 5px;
+  margin-bottom: 0;
+  transform: translateY(2px);
+}
+
+.sidebar-footer a.icon-only img {
+  height: 12px;
+  margin-right: 0;
+}
+
+.sidebar-footer a:hover {
+  background: #e8eff5;
+}
+
 .page-sidebar .alert {
   margin: 16px 0;
 }
 
+.page-sidebar a .tooltip {
+  opacity: 0;
+  background: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  font-size: 12px;
+  border-radius: 3px;
+  line-height: 24px;
+  padding: 0 8px;
+  position: absolute;
+  top: -30px;
+  left: -50px;
+  white-space: nowrap;
+  transition: opacity 0.2s ease;
+}
+
+.page-sidebar a .tooltip:after {
+  top: 100%;
+  right: 20px;
+  border: solid transparent;
+  content: ' ';
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+  border-color: rgba(0, 0, 0, 0);
+  border-top-color: rgba(0, 0, 0, 0.8);
+  border-width: 6px;
+  margin-left: -6px;
+}
+
+.page-sidebar a:hover .tooltip {
+  opacity: 1;
+  display: block;
+}
+
 .page-main {
   background: white;
   display: flex;
@@ -81,51 +151,7 @@ body > div,
   z-index: 50;
 }
 
-.useful-links-block {
-  width: 200px;
-  right: 32px;
-  top: 32px;
-  position: fixed;
-  background: #f9f9fb;
-  padding: 0 22px 22px 22px;
-  border-radius: 3px;
-}
-
-.useful-link-title {
-  font-size: 12px;
-  margin-top: 16px;
-  margin-bottom: 4px;
-}
-
-.useful-links-block a {
-  color: #070706;
-  display: block;
-  font-size: 14px;
-  text-decoration: inherit;
-  line-height: 25px;
-  transition: all 0.2s ease;
-  margin: -4px;
-  padding: 4px;
-  border-radius: 3px;
-}
-
-.useful-links-block a:hover {
-  background-color: #e8eff5;
-}
-
-.useful-links-block a svg,
-.useful-links-block a img {
-  margin-right: 6px;
-  margin-left: 4px;
-  margin-bottom: 0;
-  height: 16px;
-  transform: translateY(2px);
-}
-
 @media only screen and (max-width: 1100px) {
-  .useful-links-block {
-    display: none;
-  }
   .page-container {
     max-width: 100% !important;
   }
@@ -231,7 +257,7 @@ a.search-result .note {
 .page-indexes-link {
   color: #2d3032;
   font-size: 16px;
-  font-weight: bold;
+  font-weight: 500;
   line-height: 35px;
   margin: 0;
   padding: 0 10px;
@@ -242,9 +268,11 @@ a.search-result .note {
 
 .page-indexes-link:hover {
   background-color: #e8eff5;
+  color: #2679af;
 }
 
 .page-indexes-link.active {
+  font-weight: 700;
   color: #2679af;
 }
 
@@ -275,6 +303,10 @@ a.search-result .note {
   color: #2679af;
 }
 
+.sub-menu-link.active {
+  font-weight: 700;
+}
+
 .headings-container {
   background: #e8eff4;
   margin: 4px -20px 8px -36px;
@@ -334,6 +366,7 @@ a.search-result .note {
   padding-right: 16px;
   font-size: 15px;
   flex-grow: 1;
+  margin: 0 auto;
 }
 
 .page-container h1 {
@@ -647,10 +680,10 @@ ul > ul {
   margin: 0 0.5em 1.5rem;
 }
 
-img[src='/images/exclamation.svg'],
-img[src='/images/check.svg'],
-img[src='/images/cross.svg'],
-img[src='/images/info.svg'] {
+img[src$='/images/exclamation.svg'],
+img[src$='/images/check.svg'],
+img[src$='/images/cross.svg'],
+img[src$='/images/info.svg'] {
   margin-bottom: 0;
   top: 0 !important;
 }

server/sonar-docs/src/templates/page.js

@@ -22,6 +22,8 @@ import Helmet from 'react-helmet';
 import HeaderList from '../layouts/components/HeaderList';
 import './page.css';
 
+const version = process.env.GATSBY_DOCS_VERSION || '1.0';
+
 export default class Page extends React.PureComponent {
   componentDidMount() {
     const collaspables = document.getElementsByClassName('collapse');
@@ -51,12 +53,17 @@ export default class Page extends React.PureComponent {
     htmlWithInclusions = removeTableOfContents(htmlWithInclusions);
     htmlWithInclusions = createAnchorForHeadings(htmlWithInclusions, realHeadingsList);
     htmlWithInclusions = replaceDynamicLinks(htmlWithInclusions);
+    htmlWithInclusions = replaceImageLinks(htmlWithInclusions);
     htmlWithInclusions = replaceInstanceTag(htmlWithInclusions);
 
+    const version = process.env.GATSBY_DOCS_VERSION || '';
+
     return (
       <div css={{ paddingTop: 24, paddingBottom: 24 }}>
         <Helmet title={page.frontmatter.title || 'Documentation'}>
           <html lang="en" />
+          <link rel="icon" href={`/${version}/favicon.ico`} />
+          <link rel="canonical" href={this.props.location.pathname.replace('latest', version)} />
         </Helmet>
         <HeaderList headers={realHeadingsList} />
         <h1>{page.frontmatter.title}</h1>
@@ -104,10 +111,17 @@ function replaceInstanceTag(content) {
   return content.replace(/{instance}/gi, 'SonarQube');
 }
 
+function replaceImageLinks(content) {
+  const version = process.env.GATSBY_DOCS_VERSION || '';
+  if (version !== '') {
+    content = content.replace(/\<img src="\/images\/(.*)"/gim, `<img src="/${version}/images/$1"`);
+  }
+  return content;
+}
+
 function replaceDynamicLinks(content) {
   const version = process.env.GATSBY_DOCS_VERSION || '';
-  const usePrefix = process.env.GATSBY_USE_PREFIX === '1';
-  if (usePrefix && version !== '') {
+  if (version !== '') {
     content = content.replace(
       /\<a href="(?!#)(?!http)(.*)"\>(.*)\<\/a\>/gim,
       `<a href="/${version}$1">$2</a>`

server/sonar-docs/src/utils/typography.js

@@ -27,7 +27,7 @@ const typography = new Typography({
   baseFontSize: '15px',
   bodyWeight: '400',
   headerWeight: '400',
-  googleFonts: [{ name: fontFamily, styles: ['400,700'] }],
+  googleFonts: [{ name: fontFamily, styles: ['400,500,700'] }],
   overrideStyles: () => ({
     a: {
       color: '#439ccd'