chore(v2): modify docusaurus-2 homepage (#1315)

* chore(v2): modify docusaurus-2 homepage * Update styles.module.css
facebook · Mar 28, 2019 · f04eea6 · f04eea6
1 parent 94928f8
commit f04eea6
Show file tree

Hide file tree

Showing 2 changed files with 162 additions and 71 deletions.
diff --git a/website/pages/index.js b/website/pages/index.js
@@ -5,8 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useState, useContext} from 'react';
 import Head from '@docusaurus/Head';
+import DocusaurusContext from '@docusaurus/context';
 
 import classnames from 'classnames';
 
@@ -112,6 +113,8 @@ const QUOTES = [
 ];
 
 function Home() {
+  const context = useContext(DocusaurusContext);
+  const {siteConfig = {}} = context;
   const [featureIndex, setFeatureIndex] = useState(0);
   useEffect(() => {
     const timer = window.setTimeout(() => {
@@ -129,29 +132,49 @@ function Home() {
       <Head key={featureIndex}>
         <title>Docusaurus</title>
       </Head>
-      <div className={classnames(styles.section, styles.banner)}>
-        <div className={classnames(styles.sectionInner, styles.bannerInner)}>
-          <h1 className={styles.header}>Docusaurus</h1>
-          <h2 className={styles.subtitle}>
-            Easy to maintain Open Source
-            <br />
-            Documentation websites
-          </h2>
-          <div className={styles.headerLinksContainer}>
-            <a className={styles.headerLink} href="/docs/installation">
-              Get Started
-            </a>
+      <div className={styles['index-hero']}>
+        <div className={styles['index-hero-inner']}>
+          <h1 className={styles['index-hero-project-tagline']}>
+            <img
+              alt="Docusaurus with Keytar"
+              className={styles['index-hero-logo']}
+              src={`${siteConfig.baseUrl}img/docusaurus_keytar.svg`}
+            />
+            {siteConfig.title} makes it easy to maintain{' '}
+            <span className={styles['index-hero-project-keywords']}>
+              Open Source
+            </span>{' '}
+            documentation websites.
+          </h1>
+          <div className={styles['index-ctas']}>
             <a
-              className={classnames(styles.headerLink, styles.gitHubLink)}
-              href="https://github.com/facebook/docusaurus"
-              rel="noopener noreferrer"
-              target="_blank">
-              GitHub
+              className={styles['index-ctas-get-started-button']}
+              href={`${siteConfig.baseUrl}docs/installation`}>
+              Get Started
             </a>
-            <div />
+            <span className={styles['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>
+      <div className={styles['announcement']}>
+        <div className={styles['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={`${siteConfig.baseUrl}feedback`}>here</a>!
+        </div>
+      </div>
       <div className={styles.section}>
         <div className={styles.sectionInner}>
           <div className={styles.row}>

diff --git a/website/pages/styles.module.css b/website/pages/styles.module.css
@@ -38,58 +38,6 @@
   padding-right: 0;
 }
 
-.banner {
-  background-color: #25c2a0;
-  color: #fff;
-}
-
-.bannerInner {
-  max-width: 960px;
-}
-
-.header {
-  font-size: 48px;
-  margin-bottom: 16px;
-  margin-top: 0;
-}
-
-.subtitle {
-  font-weight: 500;
-  font-size: 24px;
-  margin: 32px 0;
-}
-
-.headerLinksContainer {
-  padding: 32px 0;
-}
-
-.headerLink {
-  border: 1px solid #fff;
-  border-radius: 2em;
-  background-color: #fff;
-  color: #25c2a0;
-  font-size: 1em;
-  margin-right: 24px;
-  padding: 1em 2.4em;
-  text-decoration: none;
-  transition: color 300ms cubic-bezier(0.08, 0.52, 0.52, 1);
-}
-
-.headerLink:hover {
-  background-color: transparent;
-  color: #fff;
-}
-
-.gitHubLink {
-  background-color: transparent;
-  color: #fff;
-}
-
-.gitHubLink:hover {
-  background-color: #fff;
-  color: #25c2a0;
-}
-
 .featureList {
   list-style-type: none;
   padding-left: 0;
@@ -158,3 +106,123 @@
 .quoteText {
   font-style: italic;
 }
+
+.announcement {
+  background-color: #20232a;
+  color: #fff;
+  font-weight: bold;
+  font-size: 24px;
+  padding: 48px;
+  margin: 0 auto -40px;
+  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: #25c2a0;
+}
+
+@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;
+  background-color: #2b3137;
+}
+
+.index-ctas {
+  margin-top: 24px;
+}
+
+.index-ctas-get-started-button {
+  border: 1px solid #25c2a0;
+  display: inline-block;
+  line-height: 1.2em;
+  text-decoration: none!important;
+  text-transform: uppercase;
+  transition: background .3s,color .3s;
+  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;
+  }
+}