* 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 pathtags/7.5
group = 'com.sonarsource.sonarqube' | group = 'com.sonarsource.sonarqube' | ||||
yarn_run { | yarn_run { | ||||
environment = [ GATSBY_DOCS_VERSION: version ] | |||||
inputs.property('version', version) | |||||
inputs.dir('src').withPathSensitivity(PathSensitivity.RELATIVE) | inputs.dir('src').withPathSensitivity(PathSensitivity.RELATIVE) | ||||
['gatsby-config.js', 'gatsby-node.js', 'package.json'].each { | ['gatsby-config.js', 'gatsby-node.js', 'package.json'].each { | ||||
inputs.file(it).withPathSensitivity(PathSensitivity.RELATIVE) | inputs.file(it).withPathSensitivity(PathSensitivity.RELATIVE) | ||||
} | } | ||||
task zip(type: Zip) { | task zip(type: Zip) { | ||||
def archiveDir = "sonarqube-docs-$version" | |||||
def archiveDir = "$version" | |||||
duplicatesStrategy DuplicatesStrategy.EXCLUDE | duplicatesStrategy DuplicatesStrategy.EXCLUDE | ||||
baseName "sonar-docs" | baseName "sonar-docs" | ||||
*/ | */ | ||||
const DOCS_VERSION = process.env.GATSBY_DOCS_VERSION || '1.0'; | 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 = { | module.exports = { | ||||
...prefix, | ...prefix, |
<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> |
<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> |
<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> |
<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> |
<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> |
<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> |
import SearchEntryResult from './SearchEntryResult'; | import SearchEntryResult from './SearchEntryResult'; | ||||
import NavigationTree from '../../../static/StaticNavigationTree.json'; | import NavigationTree from '../../../static/StaticNavigationTree.json'; | ||||
import { ExternalLink } from './ExternalLink'; | import { ExternalLink } from './ExternalLink'; | ||||
import DownloadIcon from './icons/DownloadIcon'; | |||||
export default class Sidebar extends React.PureComponent { | export default class Sidebar extends React.PureComponent { | ||||
constructor(props) { | constructor(props) { | ||||
render() { | render() { | ||||
const isOnCurrentVersion = | const isOnCurrentVersion = | ||||
this.props.version === 'latest' || | |||||
this.state.versions.find(v => v.value === this.props.version) !== undefined; | this.state.versions.find(v => v.value === this.props.version) !== undefined; | ||||
return ( | return ( | ||||
<div className="page-sidebar"> | <div className="page-sidebar"> | ||||
<img | <img | ||||
alt="Continuous Code Quality" | alt="Continuous Code Quality" | ||||
css={{ verticalAlign: 'top', margin: 0 }} | css={{ verticalAlign: 'top', margin: 0 }} | ||||
src="/images/SonarQubeIcon.svg" | |||||
src={`/${this.props.version}/images/SonarQubeIcon.svg`} | |||||
title="Continuous Code Quality" | title="Continuous Code Quality" | ||||
width="160" | width="160" | ||||
/> | /> | ||||
{this.state.query !== '' && this.renderResults()} | {this.state.query !== '' && this.renderResults()} | ||||
{this.state.query === '' && this.renderCategories(NavigationTree)} | {this.state.query === '' && this.renderCategories(NavigationTree)} | ||||
</div> | </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> | </div> | ||||
); | ); | ||||
} | } |
render() { | render() { | ||||
const { versions } = this.props; | const { versions } = this.props; | ||||
const hasVersions = versions.length > 1; | 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 = | const isOnCurrentVersion = | ||||
!hasVersions || versions.find(v => v.value === this.props.version) !== undefined; | |||||
!hasVersions || (currentVersion && versionLabel === currentVersion.value); | |||||
return ( | return ( | ||||
<div className="version-select"> | <div className="version-select"> | ||||
<button onClick={this.handleClick}> | <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 && <ChevronDownIcon size={10} />} | ||||
{hasVersions && this.state.open && <ChevronUpIcon size={10} />} | {hasVersions && this.state.open && <ChevronUpIcon size={10} />} | ||||
</button> | </button> |
*/ | */ | ||||
import React from 'react'; | import React from 'react'; | ||||
import Sidebar from './components/Sidebar'; | import Sidebar from './components/Sidebar'; | ||||
import DownloadIcon from './components/icons/DownloadIcon'; | |||||
import Footer from './components/Footer'; | import Footer from './components/Footer'; | ||||
import HeaderListProvider from './components/HeaderListProvider'; | import HeaderListProvider from './components/HeaderListProvider'; | ||||
/> | /> | ||||
</div> | </div> | ||||
<div className="page-main"> | <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> | <div className="page-container">{props.children()}</div> | ||||
<Footer /> | <Footer /> | ||||
</div> | </div> |
margin-right: -6px; | 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 { | .page-sidebar .alert { | ||||
margin: 16px 0; | 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 { | .page-main { | ||||
background: white; | background: white; | ||||
display: flex; | display: flex; | ||||
z-index: 50; | 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) { | @media only screen and (max-width: 1100px) { | ||||
.useful-links-block { | |||||
display: none; | |||||
} | |||||
.page-container { | .page-container { | ||||
max-width: 100% !important; | max-width: 100% !important; | ||||
} | } | ||||
.page-indexes-link { | .page-indexes-link { | ||||
color: #2d3032; | color: #2d3032; | ||||
font-size: 16px; | font-size: 16px; | ||||
font-weight: bold; | |||||
font-weight: 500; | |||||
line-height: 35px; | line-height: 35px; | ||||
margin: 0; | margin: 0; | ||||
padding: 0 10px; | padding: 0 10px; | ||||
.page-indexes-link:hover { | .page-indexes-link:hover { | ||||
background-color: #e8eff5; | background-color: #e8eff5; | ||||
color: #2679af; | |||||
} | } | ||||
.page-indexes-link.active { | .page-indexes-link.active { | ||||
font-weight: 700; | |||||
color: #2679af; | color: #2679af; | ||||
} | } | ||||
color: #2679af; | color: #2679af; | ||||
} | } | ||||
.sub-menu-link.active { | |||||
font-weight: 700; | |||||
} | |||||
.headings-container { | .headings-container { | ||||
background: #e8eff4; | background: #e8eff4; | ||||
margin: 4px -20px 8px -36px; | margin: 4px -20px 8px -36px; | ||||
padding-right: 16px; | padding-right: 16px; | ||||
font-size: 15px; | font-size: 15px; | ||||
flex-grow: 1; | flex-grow: 1; | ||||
margin: 0 auto; | |||||
} | } | ||||
.page-container h1 { | .page-container h1 { | ||||
margin: 0 0.5em 1.5rem; | 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; | margin-bottom: 0; | ||||
top: 0 !important; | top: 0 !important; | ||||
} | } |
import HeaderList from '../layouts/components/HeaderList'; | import HeaderList from '../layouts/components/HeaderList'; | ||||
import './page.css'; | import './page.css'; | ||||
const version = process.env.GATSBY_DOCS_VERSION || '1.0'; | |||||
export default class Page extends React.PureComponent { | export default class Page extends React.PureComponent { | ||||
componentDidMount() { | componentDidMount() { | ||||
const collaspables = document.getElementsByClassName('collapse'); | const collaspables = document.getElementsByClassName('collapse'); | ||||
htmlWithInclusions = removeTableOfContents(htmlWithInclusions); | htmlWithInclusions = removeTableOfContents(htmlWithInclusions); | ||||
htmlWithInclusions = createAnchorForHeadings(htmlWithInclusions, realHeadingsList); | htmlWithInclusions = createAnchorForHeadings(htmlWithInclusions, realHeadingsList); | ||||
htmlWithInclusions = replaceDynamicLinks(htmlWithInclusions); | htmlWithInclusions = replaceDynamicLinks(htmlWithInclusions); | ||||
htmlWithInclusions = replaceImageLinks(htmlWithInclusions); | |||||
htmlWithInclusions = replaceInstanceTag(htmlWithInclusions); | htmlWithInclusions = replaceInstanceTag(htmlWithInclusions); | ||||
const version = process.env.GATSBY_DOCS_VERSION || ''; | |||||
return ( | return ( | ||||
<div css={{ paddingTop: 24, paddingBottom: 24 }}> | <div css={{ paddingTop: 24, paddingBottom: 24 }}> | ||||
<Helmet title={page.frontmatter.title || 'Documentation'}> | <Helmet title={page.frontmatter.title || 'Documentation'}> | ||||
<html lang="en" /> | <html lang="en" /> | ||||
<link rel="icon" href={`/${version}/favicon.ico`} /> | |||||
<link rel="canonical" href={this.props.location.pathname.replace('latest', version)} /> | |||||
</Helmet> | </Helmet> | ||||
<HeaderList headers={realHeadingsList} /> | <HeaderList headers={realHeadingsList} /> | ||||
<h1>{page.frontmatter.title}</h1> | <h1>{page.frontmatter.title}</h1> | ||||
return content.replace(/{instance}/gi, 'SonarQube'); | 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) { | function replaceDynamicLinks(content) { | ||||
const version = process.env.GATSBY_DOCS_VERSION || ''; | const version = process.env.GATSBY_DOCS_VERSION || ''; | ||||
const usePrefix = process.env.GATSBY_USE_PREFIX === '1'; | |||||
if (usePrefix && version !== '') { | |||||
if (version !== '') { | |||||
content = content.replace( | content = content.replace( | ||||
/\<a href="(?!#)(?!http)(.*)"\>(.*)\<\/a\>/gim, | /\<a href="(?!#)(?!http)(.*)"\>(.*)\<\/a\>/gim, | ||||
`<a href="/${version}$1">$2</a>` | `<a href="/${version}$1">$2</a>` |
baseFontSize: '15px', | baseFontSize: '15px', | ||||
bodyWeight: '400', | bodyWeight: '400', | ||||
headerWeight: '400', | headerWeight: '400', | ||||
googleFonts: [{ name: fontFamily, styles: ['400,700'] }], | |||||
googleFonts: [{ name: fontFamily, styles: ['400,500,700'] }], | |||||
overrideStyles: () => ({ | overrideStyles: () => ({ | ||||
a: { | a: { | ||||
color: '#439ccd' | color: '#439ccd' |