Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: change landing page hero #1290

Merged
merged 4 commits into from
Mar 20, 2019
Merged

feat: change landing page hero #1290

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
716e8a2
docs: add v2 roadmap to landing page
yangshun Mar 20, 2019
44082c5
feat: change landing page hero
yangshun Mar 20, 2019
0fc31d8
fix: remove CSS test as it doesn't account for autoprefixing
yangshun Mar 20, 2019
15fbbed
fix: some css nits
endiliey Mar 20, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 0 additions & 22 deletions v1/lib/__tests__/build-files.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,11 @@ const shell = require('shelljs');

const CWD = process.cwd();

const utils = require('../server/utils');

const loadConfig = require('../server/config');

const siteConfig = loadConfig(`${CWD}/website/siteConfig.js`);
const buildDir = `${CWD}/website/build`;
const docsDir = `${CWD}/docs`;
const staticCSSDir = `${CWD}/website/static/css`;

let inputMarkdownFiles = [];
let inputAssetsFiles = [];
Expand Down Expand Up @@ -87,25 +84,6 @@ describe('Build files', () => {
});
});

test('Concatenated CSS files', async () => {
const inputFiles = await glob(`${staticCSSDir}/*.css`);
const combinedCSSFile = `${buildDir}/${
siteConfig.projectName
}/css/main.css`;
const fileContents = await Promise.all(
[combinedCSSFile, ...inputFiles].map(file => fs.readFile(file, 'utf8')),
);

const [outputFileContent, ...inputFileContents] = fileContents;
const minifiedCssFiles = await Promise.all(
inputFileContents.map(utils.minifyCss),
);

minifiedCssFiles.forEach(fileContent => {
expect(outputFileContent).toContain(fileContent);
});
});

test('Copied assets from /docs/assets', () => {
const metadata = outputAssetsFiles.map(file =>
filepath.create(file).basename(),
Expand Down
100 changes: 44 additions & 56 deletions v1/website/pages/en/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,54 +14,42 @@ const GridBlock = CompLibrary.GridBlock;
const Showcase = require(`${process.cwd()}/core/Showcase.js`);
const translate = require('../../server/translate.js').translate;

class HomeSplash extends React.Component {
render() {
const {siteConfig, language} = this.props;
function HomeSplash(props) {
const {siteConfig, language} = props;

const Button = props => (
<div className="pluginWrapper buttonWrapper">
<a className="button" href={props.href} target={props.target}>
{props.children}
</a>
</div>
);

return (
<div className="homeContainer">
<div className="homeSplashFade">
<div className="wrapper homeWrapper">
<div className="projectLogo">
<img
src={`${siteConfig.baseUrl}img/docusaurus_keytar.svg`}
alt="Docusaurus with Keytar"
/>
</div>
<div className="inner">
<h1 className="projectTitle">
{siteConfig.title}
<small>{siteConfig.tagline}</small>
</h1>
<div className="section promoSection">
<div className="promoRow">
<div className="pluginRowBlock">
<Button
href={`
${siteConfig.baseUrl}docs/${language}/installation
`}>
<translate>Get Started</translate>
</Button>
<Button href="https://github.com/facebook/Docusaurus">
<translate>GitHub</translate>
</Button>
</div>
</div>
</div>
</div>
</div>
return (
<div className="index-hero">
<div className="index-hero-inner">
<h1 className="index-hero-project-tagline">
<img
alt="Docusaurus with Keytar"
className="index-hero-logo"
src={`${siteConfig.baseUrl}img/docusaurus_keytar.svg`}
/>
{siteConfig.title} makes it easy to maintain{' '}
<span className="index-hero-project-keywords">Open Source</span>{' '}
documentation websites.
</h1>
<div className="index-ctas">
<a
className="button index-ctas-get-started-button"
href={`${siteConfig.baseUrl}docs/${language}/installation`}>
<translate>Get Started</translate>
</a>
<span className="index-ctas-github-button">
<iframe
src="https://ghbtns.com/github-btn.html?user=facebook&amp;repo=docusaurus&amp;type=star&amp;count=true&amp;size=large"
frameBorder={0}
scrolling={0}
width={160}
height={30}
title="GitHub Stars"
/>
</span>
</div>
</div>
);
}
</div>
);
}

class Index extends React.Component {
Expand All @@ -72,18 +60,18 @@ class Index extends React.Component {
return (
<div>
<HomeSplash siteConfig={siteConfig} language={language} />
<div className="mainContainer">
<div className="announcement">
<div className="announcement-inner">
We're working on{' '}
<a href="https://github.com/facebook/Docusaurus/issues/789">
Docusaurus 2
</a>
, contribute to its roadmap by suggesting features or giving
feedback{' '}
<a href="https://munseo-preview.netlify.com/feedback/">here</a>!
</div>
<div className="announcement">
<div className="announcement-inner">
We're working on{' '}
<a href="https://github.com/facebook/Docusaurus/issues/789">
Docusaurus 2
</a>
, contribute to its roadmap by suggesting features or giving
feedback{' '}
<a href="https://munseo-preview.netlify.com/feedback/">here</a>!
</div>
</div>
<div className="mainContainer">
<Container padding={['bottom', 'top']} background="light">
<GridBlock
align="center"
Expand Down
99 changes: 99 additions & 0 deletions v1/website/static/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,109 @@ table td:first-child > code {
font-weight: bold;
font-size: 24px;
padding: 48px;
margin: 0 auto;
text-align: center;
}

.announcement-inner {
margin: 0 auto;
max-width: 768px;
}

.index-hero {
background-color: #2b3137;
padding: 48px;
}

.index-hero-inner {
margin: 0 auto;
max-width: 1100px;
padding: 0 20px;
}

.index-hero-project-tagline {
color: #fff;
font-size: 64px;
margin: 0;
}

.index-hero-project-keywords {
color: $primaryColor;
}

@keyframes jackInTheBox {
from {
opacity: 0;
transform: scale(0.1) rotate(30deg);
transform-origin: center bottom;
}

50% {
transform: rotate(-10deg);
}

70% {
transform: rotate(3deg);
}

to {
opacity: 1;
transform: scale(1);
}
}

.index-hero-logo {
animation-duration: 2s;
animation-name: jackInTheBox;
float: right;
margin-top: 20px;
padding: 20px;
}

.index-ctas {
margin-top: 24px;
}

.index-ctas-get-started-button {
border-radius: 8px;
border-width: 2px;
color: #fff;
font-size: 24px;
font-weight: bold;
margin-right: 24px;
padding: 18px 36px;
}

.index-ctas-github-button {
vertical-align: sub;
}

@media only screen and (max-width: 768px) {
.index-hero {
padding-left: 20px;
padding-right: 20px;
}

.index-hero-inner {
padding: 0;
}

.index-hero-project-tagline {
font-size: 36px;
text-align: center;
}

.index-hero-logo {
display: block;
float: none;
margin: 0 auto;
}

.index-ctas {
text-align: center;
}

.index-ctas-github-button {
display: none;
}
}