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

3 files changed, 32 insertions, 27 deletions

diff --git a/server/sonar-docs/src/layouts/components/Sidebar.js b/server/sonar-docs/src/layouts/components/Sidebar.js
index eec894ba5f1..2bf6c893101 100644
--- a/server/sonar-docs/src/layouts/components/Sidebar.js
+++ b/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>
     );
   }
diff --git a/server/sonar-docs/src/layouts/components/VersionSelect.js b/server/sonar-docs/src/layouts/components/VersionSelect.js
index 3028c9dcc39..49bc96fe6c4 100644
--- a/server/sonar-docs/src/layouts/components/VersionSelect.js
+++ b/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>
diff --git a/server/sonar-docs/src/layouts/index.js b/server/sonar-docs/src/layouts/index.js
index 824955d0ae5..03a49061106 100644
--- a/server/sonar-docs/src/layouts/index.js
+++ b/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>