Browse Source

updated logo

Update the auspice logo, include it in the docs footer & app splash page. Favicons for docs & app.
master
james hadfield 4 years ago
parent
commit
e70b22f842
  1. 48
      docs-src/website/core/Footer.js
  2. 4
      docs-src/website/pages/en/index.js
  3. 4
      docs-src/website/siteConfig.js
  4. BIN
      docs-src/website/static/img/favicon.ico
  5. 15
      docs-src/website/static/img/icon-no-bg.svg
  6. 13
      docs-src/website/static/img/icon.svg
  7. 19
      docs-src/website/static/img/logo-dark.svg
  8. 19
      docs-src/website/static/img/logo-light.svg
  9. BIN
      favicon.png
  10. 18
      src/components/splash/index.js
  11. 85
      src/components/splash/splash.js
  12. 19
      src/images/logo-light.svg

48
docs-src/website/core/Footer.js

@ -13,27 +13,35 @@ class Footer extends React.Component {
render() {
return (
<footer className="nav-footer" id="footer">
<section className="sitemap">
<div>
<h5>Docs</h5>
<a href={this.props.config.baseUrl}>Splash Page</a>
<a href={this.docUrl("README")}>Overview</a>
</div>
<div>
<h5>Links</h5>
<a href="https://github.com/nextstrain/auspice">GitHub</a>
<a href="https://www.npmjs.com/package/auspice">NPM</a>
<a href="https://nextstrain.org">Nextstrain</a>
</div>
<div>
<h5>Contact</h5>
<a href="mailto:hello@nextstrain.org">email</a>
<a href="https://twitter.com/hamesjadfield">twitter</a>
</div>
</section>
<section className="sitemap">
<div>
<img
src={this.props.config.baseUrl + this.props.config.footerIcon}
alt={this.props.config.title}
width="66"
height="58"
/>
</div>
<div>
<h5>Docs</h5>
<a href={this.props.config.baseUrl}>Splash Page</a>
<a href={this.docUrl("README")}>Overview</a>
</div>
<div>
<h5>Links</h5>
<a href="https://github.com/nextstrain/auspice">GitHub</a>
<a href="https://www.npmjs.com/package/auspice">NPM</a>
<a href="https://nextstrain.org">Nextstrain</a>
</div>
<div>
<h5>Contact</h5>
<a href="mailto:hello@nextstrain.org">email</a>
<a href="https://twitter.com/hamesjadfield">twitter</a>
</div>
</section>
<section className="copyright">If you use auspice, please cite <a href="https://doi.org/10.1093/bioinformatics/bty407">Hadfield et al., 2018</a></section>
<section className="copyright">{this.props.config.copyright}</section>
<section className="copyright">If you use auspice, please cite <a href="https://doi.org/10.1093/bioinformatics/bty407">Hadfield et al., 2018</a></section>
<section className="copyright">{this.props.config.copyright}</section>
</footer>
);
}

4
docs-src/website/pages/index.js → docs-src/website/pages/en/index.js

@ -1,5 +1,5 @@
const React = require('react');
const CompLibrary = require('../core/CompLibrary.js'); // eslint-disable-line
const CompLibrary = require('../../core/CompLibrary.js'); // eslint-disable-line
const siteConfig = require(`${process.cwd()}/siteConfig.js`); // eslint-disable-line
const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
@ -226,7 +226,7 @@ class Index extends React.Component { // eslint-disable-line
<div>
<SplashContainer>
<div className="inner" style={{paddingBottom: "100px", paddingTop: "100px"}}>
<Logo img_src={imgUrl('icon-no-bg.svg')} />
<Logo img_src={imgUrl('logo-light.svg')} />
<ProjectTitle />
<PromoSection>
<Introduction/>

4
docs-src/website/siteConfig.js

@ -21,8 +21,8 @@ const siteConfig = {
],
/* path to images for header/footer */
headerIcon: 'img/icon.svg',
footerIcon: 'img/icon.svg',
headerIcon: 'img/logo-light.svg',
footerIcon: 'img/logo-light.svg',
favicon: 'img/favicon.ico',
colors: {

BIN
docs-src/website/static/img/favicon.ico

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 15 KiB

15
docs-src/website/static/img/icon-no-bg.svg

@ -1,15 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>icon</title>
<desc>Created with Sketch.</desc>
<g id="icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M12.5,200 L99,-2.17603713e-14" id="Line" stroke="#5DA8A3" stroke-width="23" stroke-linecap="square"></path>
<path d="M187.5,200 L100,1" id="Line" stroke="#5DA8A3" stroke-width="23" stroke-linecap="square"></path>
<path d="M135.710718,80.3357799 C133.897456,98.1073733 126.069939,112.573312 112.228168,123.733595 C98.3863964,134.893878 84.4262271,139.634851 70.34766,137.956513" id="Path-3" stroke="#5DA8A3" stroke-width="16" transform="translate(103.029189, 109.310698) rotate(6.000000) translate(-103.029189, -109.310698) "></path>
<path d="M12.5,201 L99,1" id="Line" stroke="#5DA8A3" stroke-width="23" stroke-linecap="square"></path>
<path d="M187.5,201 L100,2" id="Line" stroke="#5DA8A3" stroke-width="23" stroke-linecap="square"></path>
<path d="M135.710718,81.3357799 C133.897456,99.1073733 126.069939,113.573312 112.228168,124.733595 C98.3863964,135.893878 84.4262271,140.634851 70.34766,138.956513" id="Path-3" stroke="#5DA8A3" stroke-width="16" transform="translate(103.029189, 110.310698) rotate(6.000000) translate(-103.029189, -110.310698) "></path>
<path d="M88.5066172,153.705771 C82.9613462,148.343414 78.0156017,144.689644 73.6693836,142.744461 C69.3231656,140.799279 64.3774211,139.284902 58.8321501,138.201331 C62.4413204,136.244675 66.0674613,133.476033 69.7105727,129.895407 C73.3536842,126.314781 76.7794514,120.861382 79.9878744,113.53521" id="Path-3" stroke="#5DA8A3" stroke-width="10" stroke-linecap="round" transform="translate(73.669384, 133.620491) rotate(6.000000) translate(-73.669384, -133.620491) "></path>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.9 KiB

13
docs-src/website/static/img/icon.svg

@ -1,13 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>icon</title>
<desc>Created with Sketch.</desc>
<g id="icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#30353F" x="0" y="0" width="200" height="200"></rect>
<path d="M12.5,200 L99,-2.17603713e-14" id="Line" stroke="#5DA8A3" stroke-width="23" stroke-linecap="square"></path>
<path d="M187.5,200 L100,1" id="Line" stroke="#5DA8A3" stroke-width="23" stroke-linecap="square"></path>
<path d="M135.710718,80.3357799 C133.897456,98.1073733 126.069939,112.573312 112.228168,123.733595 C98.3863964,134.893878 84.4262271,139.634851 70.34766,137.956513" id="Path-3" stroke="#5DA8A3" stroke-width="16" transform="translate(103.029189, 109.310698) rotate(6.000000) translate(-103.029189, -109.310698) "></path>
<path d="M88.5066172,153.705771 C82.9613462,148.343414 78.0156017,144.689644 73.6693836,142.744461 C69.3231656,140.799279 64.3774211,139.284902 58.8321501,138.201331 C62.4413204,136.244675 66.0674613,133.476033 69.7105727,129.895407 C73.3536842,126.314781 76.7794514,120.861382 79.9878744,113.53521" id="Path-3" stroke="#5DA8A3" stroke-width="10" stroke-linecap="round" transform="translate(73.669384, 133.620491) rotate(6.000000) translate(-73.669384, -133.620491) "></path>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

19
docs-src/website/static/img/logo-dark.svg

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>icon copy</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="200" height="201"></rect>
</defs>
<g id="icon-copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Rectangle"></g>
<path d="M7.5,201 L99,1" id="Line" stroke="#30353F" stroke-width="15" stroke-linecap="square" mask="url(#mask-2)"></path>
<path d="M192.5,201 L100,2" id="Line" stroke="#30353F" stroke-width="15" stroke-linecap="square" mask="url(#mask-2)"></path>
<path d="M134.525012,72.3545577 C131.898763,91.9778105 123.664754,107.369579 109.822982,118.529862 C95.9812106,129.690145 82.0210413,134.431118 67.9424742,132.75278" id="Path-3" stroke="#30353F" stroke-width="15" mask="url(#mask-2)"></path>
<path d="M92.8033327,150.437802 C87.2580617,145.075444 82.3123172,141.421674 77.9660992,139.476492 C73.6198812,137.53131 68.6741366,136.016933 63.1288656,134.933362 C66.7380359,132.976705 70.3641768,130.208064 74.0072883,126.627438 C77.6503997,123.046812 81.0761669,117.593413 84.2845899,110.26724" id="Path-3" stroke="#30353F" stroke-width="10" stroke-linecap="round" mask="url(#mask-2)"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

19
docs-src/website/static/img/logo-light.svg

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>icon</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="200" height="201"></rect>
</defs>
<g id="icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Rectangle"></g>
<path d="M7.5,201 L99,1" id="Line" stroke="#5DA8A3" stroke-width="15" stroke-linecap="square" mask="url(#mask-2)"></path>
<path d="M192.5,201 L100,2" id="Line" stroke="#5DA8A3" stroke-width="15" stroke-linecap="square" mask="url(#mask-2)"></path>
<path d="M134.525012,72.3545577 C131.898763,91.9778105 123.664754,107.369579 109.822982,118.529862 C95.9812106,129.690145 82.0210413,134.431118 67.9424742,132.75278" id="Path-3" stroke="#5DA8A3" stroke-width="15" mask="url(#mask-2)"></path>
<path d="M92.8033327,150.437802 C87.2580617,145.075444 82.3123172,141.421674 77.9660992,139.476492 C73.6198812,137.53131 68.6741366,136.016933 63.1288656,134.933362 C66.7380359,132.976705 70.3641768,130.208064 74.0072883,126.627438 C77.6503997,123.046812 81.0761669,117.593413 84.2845899,110.26724" id="Path-3" stroke="#5DA8A3" stroke-width="10" stroke-linecap="round" mask="url(#mask-2)"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
favicon.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

18
src/components/splash/index.js

@ -27,7 +27,7 @@ class Splash extends React.Component {
componentDidMount() {
fetchJSON(`${charonAPIAddress}/getAvailable?prefix=${this.props.reduxPathname}`)
.then((json) => {
this.setState({available: json});
this.setState({available: json});
})
.catch((err) => {
this.setState({errorMessage: "Error in getting available datasets"});
@ -37,14 +37,14 @@ class Splash extends React.Component {
render() {
return (
<ErrorBoundary>
<SplashContent
isMobile={this.props.browserDimensions.width < controlsHiddenWidth}
available={this.state.available}
browserDimensions={this.props.browserDimensions}
dispatch={this.props.dispatch}
errorMessage={this.props.errorMessage || this.state.errorMessage}
changePage={changePage}
/>
<SplashContent
isMobile={this.props.browserDimensions.width < controlsHiddenWidth}
available={this.state.available}
browserDimensions={this.props.browserDimensions}
dispatch={this.props.dispatch}
errorMessage={this.props.errorMessage || this.state.errorMessage}
changePage={changePage}
/>
</ErrorBoundary>
);
}

85
src/components/splash/splash.js

@ -21,10 +21,10 @@ const formatDataset = (requestPath, dispatch, changePage) => {
return (
<li key={requestPath}>
<div
style={{color: "#5097BA", textDecoration: "none", cursor: "pointer", fontWeight: "400", fontSize: "94%"}}
onClick={() => dispatch(changePage({path: requestPath, push: true}))}
style={{color: "#5097BA", textDecoration: "none", cursor: "pointer", fontWeight: "400", fontSize: "94%"}}
onClick={() => dispatch(changePage({path: requestPath, push: true}))}
>
{requestPath}
{requestPath}
</div>
</li>
);
@ -35,23 +35,24 @@ const SplashContent = ({isMobile, available, browserDimensions, dispatch, errorM
const Header = () => (
<>
<Flex justifyContent="center">
<h1 style={{textAlign: "center", marginTop: "-10px", fontSize: "72px", letterSpacing: "3rem"}}>
{"auspice"}
</h1>
<div style={{paddingRight: "40px"}}>
<h1 style={{textAlign: "center", marginTop: "20px", marginLeft: "20px", fontSize: "72px", letterSpacing: "4rem"}}>
{"auspice"}
</h1>
<h1 style={{textAlign: "center", marginTop: "0px", fontSize: "29px"}}>
{"Interactive Visualisation of Phylogenomic data"}
</h1>
</div>
<img alt="logo" width="102" src={require("../../images/logo-light.svg")}/>
</Flex>
<div className="row">
<h1 style={{textAlign: "center", marginTop: "-10px", fontSize: "29px"}}>
{"Interactive Visualisation of Phylogenomic data"}
</h1>
</div>
</>
);
const Intro = () => (
<p style={{maxWidth: 600, marginTop: 0, marginRight: "auto", marginBottom: 20, marginLeft: "auto", textAlign: "center", fontSize: 16, fontWeight: 300, lineHeight: 1.42857143}}>
{`
Auspice is a locally run interactive viewer for phylogeographic and other datasets.
Auspice can be easily turned into an online web-app, such as nextstrain.org & auspice.us
Auspice is a locally run interactive viewer for phylogeographic and other datasets.
Auspice can be easily turned into an online web-app, such as nextstrain.org & auspice.us
`}
</p>
);
@ -59,16 +60,16 @@ const SplashContent = ({isMobile, available, browserDimensions, dispatch, errorM
const ErrorMessage = () => (
<CenterContent>
<div>
<p style={{color: "rgb(222, 60, 38)", fontWeight: 600, fontSize: "24px"}}>
{"😱 404, or an error has occured 😱"}
</p>
<p style={{color: "rgb(222, 60, 38)", fontWeight: 400, fontSize: "18px"}}>
{`Details: ${errorMessage}`}
</p>
<p style={{fontSize: "16px"}}>
{"If this keeps happening, or you believe this is a bug, please "}
<a href={"mailto:hello@nextstrain.org"}>{"get in contact with us."}</a>
</p>
<p style={{color: "rgb(222, 60, 38)", fontWeight: 600, fontSize: "24px"}}>
{"😱 404, or an error has occured 😱"}
</p>
<p style={{color: "rgb(222, 60, 38)", fontWeight: 400, fontSize: "18px"}}>
{`Details: ${errorMessage}`}
</p>
<p style={{fontSize: "16px"}}>
{"If this keeps happening, or you believe this is a bug, please "}
<a href={"mailto:hello@nextstrain.org"}>{"get in contact with us."}</a>
</p>
</div>
</CenterContent>
);
@ -76,22 +77,22 @@ const SplashContent = ({isMobile, available, browserDimensions, dispatch, errorM
const ListAvailable = ({type, data}) => (
<>
<div style={{fontSize: "26px"}}>
{`Locally available ${type}:`}
{`Locally available ${type}:`}
</div>
{
data ? (
<div style={{display: "flex", flexWrap: "wrap"}}>
<div style={{flex: "1 50%", minWidth: "0"}}>
<ColumnList width={browserDimensions.width}>
{data.map((d) => formatDataset(d.request, dispatch, changePage))}
</ColumnList>
</div>
</div>
) : (
<p>
none found
</p>
)
data ? (
<div style={{display: "flex", flexWrap: "wrap"}}>
<div style={{flex: "1 50%", minWidth: "0"}}>
<ColumnList width={browserDimensions.width}>
{data.map((d) => formatDataset(d.request, dispatch, changePage))}
</ColumnList>
</div>
</div>
) : (
<p>
none found
</p>
)
}
</>
);
@ -106,11 +107,11 @@ const SplashContent = ({isMobile, available, browserDimensions, dispatch, errorM
<>
<NavBar sidebar={false}/>
<div className="static container">
<Header/>
{errorMessage ? <ErrorMessage/> : <Intro/>}
<ListAvailable type="datasets" data={available.datasets}/>
<ListAvailable type="narratives" data={available.narratives}/>
<Footer/>
<Header/>
{errorMessage ? <ErrorMessage/> : <Intro/>}
<ListAvailable type="datasets" data={available.datasets}/>
<ListAvailable type="narratives" data={available.narratives}/>
<Footer/>
</div>
</>
);

19
src/images/logo-light.svg

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>icon</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="200" height="201"></rect>
</defs>
<g id="icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Rectangle"></g>
<path d="M7.5,201 L99,1" id="Line" stroke="#5DA8A3" stroke-width="15" stroke-linecap="square" mask="url(#mask-2)"></path>
<path d="M192.5,201 L100,2" id="Line" stroke="#5DA8A3" stroke-width="15" stroke-linecap="square" mask="url(#mask-2)"></path>
<path d="M134.525012,72.3545577 C131.898763,91.9778105 123.664754,107.369579 109.822982,118.529862 C95.9812106,129.690145 82.0210413,134.431118 67.9424742,132.75278" id="Path-3" stroke="#5DA8A3" stroke-width="15" mask="url(#mask-2)"></path>
<path d="M92.8033327,150.437802 C87.2580617,145.075444 82.3123172,141.421674 77.9660992,139.476492 C73.6198812,137.53131 68.6741366,136.016933 63.1288656,134.933362 C66.7380359,132.976705 70.3641768,130.208064 74.0072883,126.627438 C77.6503997,123.046812 81.0761669,117.593413 84.2845899,110.26724" id="Path-3" stroke="#5DA8A3" stroke-width="10" stroke-linecap="round" mask="url(#mask-2)"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

Loading…
Cancel
Save