feat: change landing page hero (#1290)

* docs: add v2 roadmap to landing page

* feat: change landing page hero

* fix: remove CSS test as it doesn't account for autoprefixing

v1/lib/__tests__/build-files.test.js

@@ -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 = [];
@@ -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(),

v1/website/pages/en/index.js

@@ -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 {
@@ -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"

v1/website/static/css/custom.css

@@ -64,6 +64,7 @@ table td:first-child > code {
   font-weight: bold;
   font-size: 24px;
   padding: 48px;
+  margin: 0 auto;
   text-align: center;
 }
 
@@ -71,3 +72,101 @@ table td:first-child > code {
   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;
+  }
+}