From 86db744a5fc2ac3c998fc5c126c1298e9c085df9 Mon Sep 17 00:00:00 2001 From: Pascal Mugnier Date: Mon, 15 Oct 2018 18:07:26 +0200 Subject: [PATCH] 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 | 4 +- server/sonar-docs/gatsby-config.js | 5 +- .../sonar-docs/src/images/community-icon.svg | 2 - server/sonar-docs/src/images/community.svg | 1 + server/sonar-docs/src/images/newspaper.svg | 1 + .../sonar-docs/src/images/sq-icon-small.svg | 1 - .../sonar-docs/src/images/tw-icon-small.svg | 1 - server/sonar-docs/src/images/twitter.svg | 1 + .../src/layouts/components/Sidebar.js | 27 +++- .../src/layouts/components/VersionSelect.js | 8 +- server/sonar-docs/src/layouts/index.js | 24 ---- server/sonar-docs/src/templates/page.css | 131 +++++++++++------- server/sonar-docs/src/templates/page.js | 18 ++- server/sonar-docs/src/utils/typography.js | 2 +- server/sonar-docs/static/favicon.ico | Bin 0 -> 5430 bytes 15 files changed, 138 insertions(+), 88 deletions(-) delete mode 100644 server/sonar-docs/src/images/community-icon.svg create mode 100644 server/sonar-docs/src/images/community.svg create mode 100644 server/sonar-docs/src/images/newspaper.svg delete mode 100644 server/sonar-docs/src/images/sq-icon-small.svg delete mode 100644 server/sonar-docs/src/images/tw-icon-small.svg create mode 100644 server/sonar-docs/src/images/twitter.svg create mode 100644 server/sonar-docs/static/favicon.ico diff --git a/server/sonar-docs/build.gradle b/server/sonar-docs/build.gradle index 12c9b29623c..6112b5ecca5 100644 --- a/server/sonar-docs/build.gradle +++ b/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" diff --git a/server/sonar-docs/gatsby-config.js b/server/sonar-docs/gatsby-config.js index cd8bb759cc8..7832423a952 100644 --- a/server/sonar-docs/gatsby-config.js +++ b/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, diff --git a/server/sonar-docs/src/images/community-icon.svg b/server/sonar-docs/src/images/community-icon.svg deleted file mode 100644 index dfa53dfe92a..00000000000 --- a/server/sonar-docs/src/images/community-icon.svg +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/server/sonar-docs/src/images/community.svg b/server/sonar-docs/src/images/community.svg new file mode 100644 index 00000000000..25bbe950663 --- /dev/null +++ b/server/sonar-docs/src/images/community.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/server/sonar-docs/src/images/newspaper.svg b/server/sonar-docs/src/images/newspaper.svg new file mode 100644 index 00000000000..ae8027cce4c --- /dev/null +++ b/server/sonar-docs/src/images/newspaper.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/server/sonar-docs/src/images/sq-icon-small.svg b/server/sonar-docs/src/images/sq-icon-small.svg deleted file mode 100644 index f59febd15c4..00000000000 --- a/server/sonar-docs/src/images/sq-icon-small.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/server/sonar-docs/src/images/tw-icon-small.svg b/server/sonar-docs/src/images/tw-icon-small.svg deleted file mode 100644 index b88dc689044..00000000000 --- a/server/sonar-docs/src/images/tw-icon-small.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/server/sonar-docs/src/images/twitter.svg b/server/sonar-docs/src/images/twitter.svg new file mode 100644 index 00000000000..2a7fd9f93f7 --- /dev/null +++ b/server/sonar-docs/src/images/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file 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 (
@@ -137,7 +139,7 @@ export default class Sidebar extends React.PureComponent { Continuous Code Quality @@ -166,6 +168,29 @@ export default class Sidebar extends React.PureComponent { {this.state.query !== '' && this.renderResults()} {this.state.query === '' && this.renderCategories(NavigationTree)}
+
+ + SonarQube + + + Community Community + + + Twitter + + + Product News + Product News + +
); } 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 (
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) { />
-
-
Download
- - SonarQube - -
Get Help
- - Community Community - -
Stay Connected
- - Twitter Twitter - - - Product News Product News - -
{props.children()}
diff --git a/server/sonar-docs/src/templates/page.css b/server/sonar-docs/src/templates/page.css index 8c4e816d6cc..a3c19def7aa 100644 --- a/server/sonar-docs/src/templates/page.css +++ b/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; } diff --git a/server/sonar-docs/src/templates/page.js b/server/sonar-docs/src/templates/page.js index c60e2a964ef..6c2ce88ffb3 100644 --- a/server/sonar-docs/src/templates/page.js +++ b/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 (
+ +

{page.frontmatter.title}

@@ -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(/\(.*)\<\/a\>/gim, `$2` diff --git a/server/sonar-docs/src/utils/typography.js b/server/sonar-docs/src/utils/typography.js index 8dd671b42b7..934c610d061 100644 --- a/server/sonar-docs/src/utils/typography.js +++ b/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' diff --git a/server/sonar-docs/static/favicon.ico b/server/sonar-docs/static/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..15b647af1c2a2bd175c93c150295681f0974f51c GIT binary patch literal 5430 zcmds*Pe@cz6o;Qp5+b65L_`afuo4lG2$2X4X(19J60IUa#3V!piEtt2A|irXL`XzP zxUgs;;vz&sB3gxu2oVX1h=>RmAuU?O^!=uH9@jU2m}wjyH1K)PJ@?%6d-uNk?tM?s zEA#evH8mc;dhg0!&pRTk{%`#${=4{&QB{cCWvRcO*M&d)OD2Ep)I zcL)-$uMnHQlW?JsK5i_1=b_d04Ho>cq!j6%NBN^yZ2W zw-G-8)ACa;KzTSOTb+A#=Q)cpmF3}N3^%YI&>>9vwTf6VmwPhT$^;Jnsg7+(_+BIGkT5?f=ckyw5=r_C+x^bYH<%6xz~6djr-Y)Za#bISPGrwWsOc&qk!* z;p{zmu#8h`Mc_}n4C;7G4>Ur1L&pQ6*u+Q3dvqa;WuQO?R zsq0;F72ZMK@7C5o-;&(dLE~P8V6Vg0{;T`mY`L(t7JIB-Y)P&OkhY%p)OuG=>`vc5 z>T2Lq{F3YY7n>ZKTRqd#*7rbz<-v}_XIKJvK5D6JeWtz_EWXf^{>q~@E$tQ9@mx`# z13mwT+}zafz=G>5#HMcyw6}c&Y0p6LUMU+Mf!g}q+|=7adr*t(&)25k8L;PT8$03l zrLH;ATxh*r47KUI=OYArlG~omCVoF$27UKvOuykF9B}(kZ-PzGS%1oHlZ{XJW5-$u z$M|s?Ln{n}G^Hn9p>Nc*{}JHRyl73WL9hlbKfasr6?R;+)Bc(^UAyMZw5)uKZyeIj zOngT{bD?Y0*n(%z$vuT%bCUI*( g)pYxluMvX1%xyE9_7Tv$=Zv%Xs7vQx0g;%008j=mLI3~& literal 0 HcmV?d00001 -- 2.39.5