Ent website design changes

Summary: Design: https://our.intern.facebook.com/intern/px/p/Jr3W

Reviewed By: alexsn

Differential Revision: D17093961

fbshipit-source-id: d2512a0fec8459170084f15fb3fffb285ad4b375

doc/website/core/Footer.js

@@ -3,6 +3,8 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
+ * @format
  */
 
 const React = require('react');
@@ -48,62 +50,23 @@ class Footer extends React.Component {
             </a>
           </div>
           <div>
-            <h5>Community</h5>
-            <a href={this.pageUrl('users.html', this.props.language)}>
-              User Showcase
-            </a>
-            <a
-              href="https://stackoverflow.com/questions/tagged/"
-              target="_blank"
-              rel="noreferrer noopener">
-              Stack Overflow
-            </a>
-            <a href="https://discordapp.com/">Project Chat</a>
-            <a
-              href="https://twitter.com/"
-              target="_blank"
-              rel="noreferrer noopener">
-              Twitter
-            </a>
-          </div>
-          <div>
-            <h5>More</h5>
-            <a href={`${this.props.config.baseUrl}blog`}>Blog</a>
-            <a href="https://github.com/">GitHub</a>
-            <a
-              className="github-button"
-              href={this.props.config.repoUrl}
-              data-icon="octicon-star"
-              data-count-href="/facebook/docusaurus/stargazers"
-              data-show-count="true"
-              data-count-aria-label="# stargazers on GitHub"
-              aria-label="Star this project on GitHub">
-              Star
-            </a>
-            {this.props.config.twitterUsername && (
-              <div className="social">
-                <a
-                  href={`https://twitter.com/${
-                    this.props.config.twitterUsername
-                  }`}
-                  className="twitter-follow-button">
-                  Follow @{this.props.config.twitterUsername}
-                </a>
-              </div>
-            )}
-            {this.props.config.facebookAppId && (
-              <div className="social">
-                <div
-                  className="fb-like"
-                  data-href={this.props.config.url}
-                  data-colorscheme="dark"
-                  data-layout="standard"
-                  data-share="true"
-                  data-width="225"
-                  data-show-faces="false"
-                />
-              </div>
-            )}
+            <h5>Credits</h5>
+            <span className="copyright">
+              The Go gopher was designed by{' '}
+              <a
+                href="http://reneefrench.blogspot.com/"
+                style={{display: 'inline'}}>
+                Renee French
+              </a>
+              . The design is licensed under the Creative Commons 3.0
+              Attributions license. Read this{' '}
+              <a
+                href="https://blog.golang.org/gopher"
+                style={{display: 'inline'}}>
+                article
+              </a>{' '}
+              for more details.
+            </span>
           </div>
         </section>
 

doc/website/pages/en/index.js

@@ -15,6 +15,30 @@ const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
 
+const Block = props => (
+  <div className="block">
+    <div className="blockTitle">{props.title}</div>
+    <div className="blockContent">{props.content}</div>
+  </div>
+);
+
+const Features = () => (
+  <div className="features">
+    <Block
+      title="Schema As Code"
+      content="Simple API for modeling any graph schema as Go objects"
+    />
+    <Block
+      title="Easily Traverse Any Graph"
+      content="Run queries, aggregations and traverse any graph structure easily"
+    />
+    <Block
+      title="Statically Typed And Explicit API"
+      content="100% statically types and explicit api using code generation"
+    />
+  </div>
+);
+
 class HomeSplash extends React.Component {
   render() {
     const {siteConfig, language = ''} = this.props;
@@ -38,11 +62,16 @@ class HomeSplash extends React.Component {
     );
 
     const ProjectTitle = () => (
-      <div className="projectTitleContainer">
-        <img src="https://entgo.io/assets/logo.png" />
-        <div className="projectTitle">
-          <p>{siteConfig.tagline}</p>
+      <div>
+        <div className="projectTitleContainer">
+          <img src="https://entgo.io/assets/logo.png" />
+          <div className="projectTitle">
+            <p>{siteConfig.tagline}</p>
+          </div>
         </div>
+        <p className="projectDesc">
+          A simple API for modeling any graph using scema as Go objects
+        </p>
       </div>
     );
 
@@ -67,9 +96,15 @@ class HomeSplash extends React.Component {
         {/*<Logo img_src={`${baseUrl}img/undraw_monitor.svg`} />*/}
         <div className="inner">
           <ProjectTitle siteConfig={siteConfig} />
-          <PromoSection>
-            <Button href="#try">Getting Started</Button>
-          </PromoSection>
+          <div className="gettingStartedButton">
+            <a href="./docs/getting-started">
+              <div className="gettingStartedButtonText">
+                <div className="gettingStartedText">{'Getting Started '}</div>
+                <div className="gettingStartedButtonArrow">→</div>
+              </div>
+            </a>
+          </div>
+          <Features />
         </div>
       </SplashContainer>
     );
@@ -81,110 +116,6 @@ class Index extends React.Component {
     const {config: siteConfig, language = ''} = this.props;
     const {baseUrl} = siteConfig;
 
-    const Block = props => (
-      <Container
-        padding={['bottom', 'top']}
-        id={props.id}
-        background={props.background}>
-        <GridBlock
-          align="center"
-          contents={props.children}
-          layout={props.layout}
-          className={props.className}
-        />
-      </Container>
-    );
-
-    const FeatureCallout = () => (
-      <div
-        className="productShowcaseSection paddingBottom"
-        style={{textAlign: 'center'}}>
-        <h2>Feature Callout</h2>
-        <MarkdownBlock>These are features of this project</MarkdownBlock>
-      </div>
-    );
-
-    const TryOut = () => (
-      <Block id="try">
-        {[
-          {
-            content:
-              'To make your landing page more attractive, use illustrations!' +
-              ' Check out [**unDraw**](https://undraw.co/) which provides' +
-              'you with customizable illustrations which are free to use. ' +
-              'The illustrations you see on this page are from unDraw.',
-            image: `${baseUrl}img/undraw_code_review.svg`,
-            imageAlign: 'left',
-            title: 'Wonderful SVG Illustrations',
-          },
-        ]}
-      </Block>
-    );
-
-    const Description = () => (
-      <Block background="dark">
-        {[
-          {
-            content:
-              'This is another description of how this project is useful',
-            image: `${baseUrl}img/undraw_note_list.svg`,
-            imageAlign: 'right',
-            title: 'Description',
-          },
-        ]}
-      </Block>
-    );
-
-    const LearnHow = () => (
-      <Block background="light">
-        {[
-          {
-            content:
-              'Each new Docusaurus project has **randomly-generated** ' +
-              'theme colors.',
-            image: `${baseUrl}img/undraw_youtube_tutorial.svg`,
-            imageAlign: 'right',
-            title: 'Randomly Generated Theme Colors',
-          },
-        ]}
-      </Block>
-    );
-
-    const Features = () => (
-      <Block layout="fourColumn" className="features">
-        {[
-          {
-            title: 'Schema As Code',
-            content: 'Simple API for modeling any graph schema as Go objects',
-            image: `https://entgo.io/assets/gopher-schema-as-code.png`,
-            imageAlign: 'top',
-          },
-          {
-            title: 'Easily Traverse Any Graph',
-            content:
-              'Run queries, aggregations and traverse any graph ' +
-              'structure easily',
-            image: `https://entgo.io/assets/gopher-graph-traversal.png`,
-            imageAlign: 'top',
-          },
-          {
-            title: 'Statically Typed And Explicit API',
-            content:
-              '100% statically types and explicit api using ' +
-              'code generation',
-            image: `https://entgo.io/assets/gopher-graph-traversal.png`,
-            imageAlign: 'top',
-          },
-          {
-            title: 'Multiple Storage Driver Support',
-            content: 'Support both SQL and Gremlin dialects',
-            image: `https://entgo.io/assets/gopher-graph-traversal.png`,
-            imageAlign: 'top',
-          },
-        ]}
-      </Block>
-    );
-
     const Showcase = () => {
       if ((siteConfig.users || []).length === 0) {
         return null;
@@ -217,14 +148,6 @@ class Index extends React.Component {
     return (
       <div>
         <HomeSplash siteConfig={siteConfig} language={language} />
-        <div className="mainContainer">
-          <Features />
-          <FeatureCallout />
-          <LearnHow />
-          <TryOut />
-          <Description />
-          <Showcase />
-        </div>
       </div>
     );
   }

doc/website/siteConfig.js

@@ -3,6 +3,8 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
+ * @format
  */
 
 // See https://docusaurus.io/docs/site-config for all the possible
@@ -37,7 +39,9 @@ const siteConfig = {
   // For no header links in the top nav bar -> headerLinks: [],
   headerLinks: [
     {doc: 'getting-started', label: 'Docs'},
+    {doc: 'getting-started', label: 'GoDoc'},
     {href: 'https://github.com/facebookincubator/ent', label: 'Github'},
+    {href: 'https://github.com/facebookincubator/ent/issues', label: 'Help'},
   ],
 
   // If you have users set above, you add it here:
@@ -45,7 +49,6 @@ const siteConfig = {
 
   /* path to images for header/footer */
   headerIcon: 'img/favicon.ico',
-  footerIcon: 'img/favicon.ico',
   favicon: 'img/favicon.ico',
 
   /* Colors for website */
@@ -77,13 +80,13 @@ const siteConfig = {
   },
 
   // Add custom scripts here that would be placed in <script> tags.
-    scripts: [
-        'https://buttons.github.io/buttons.js',
-        'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js',
-        '/js/code-block-buttons.js',
-        '/js/custom.js',
-    ],
-    stylesheets: ['/css/code-block-buttons.css'],
+  scripts: [
+    'https://buttons.github.io/buttons.js',
+    'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js',
+    '/js/code-block-buttons.js',
+    '/js/custom.js',
+  ],
+  stylesheets: ['/css/code-block-buttons.css'],
 
   // On page navigation for the current documentation page.
   onPageNav: 'separate',

doc/website/static/css/custom.css

@@ -3,8 +3,45 @@
   font-family: 'Calibre Medium';
   font-style: normal;
   font-weight: normal;
-  src: local('Calibre Medium'),
-  url('../font/CalibreMedium.woff') format('woff');
+  src: local('Calibre Medium'), url('../font/CalibreMedium.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Calibre Light';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Calibre Light'), url('../font/CalibreLight.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Calibre Light Italic';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Calibre Light Italic'),
+    url('../font/CalibreLightItalic.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Calibre Semibold';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Calibre Semibold'),
+    url('../font/CalibreSemibold.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Calibre Bold';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Calibre Bold'), url('../font/CalibreBold.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Calibre Medium Italic';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Calibre Medium Italic'),
+    url('../font/CalibreMediumItalic.woff') format('woff');
 }
 
 @media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
@@ -27,7 +64,7 @@ body {
 }
 
 .sideNavVisible {
-    background: white;
+  background: white;
 }
 
 .fixedHeaderContainer {
@@ -42,7 +79,7 @@ body {
 .navigationSlider .slidingNav ul li > a:hover,
 .navigationSlider .slidingNav ul li.siteNavItemActive > a,
 .navigationSlider .slidingNav ul li.siteNavGroupActive > a {
-  background-color: #4d8eaa;
+  background-color: transparent;
 }
 
 .onPageNav .toc-headings > li > a.active,
@@ -67,18 +104,124 @@ body {
   height: 44px;
 }
 
+.projectDesc {
+  font-family: 'Calibre Light Italic';
+  font-size: 29px;
+  line-height: 34px;
+  color: white;
+  text-align: left;
+  max-width: 520px;
+}
+
 @media only screen and (min-width: 480px) {
   .projectTitle {
     margin: 0;
   }
 }
 
+.homeContainer {
+  padding: 0 15%;
+  padding-bottom: 20px;
+}
+
+.features {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  margin: 100px auto;
+  margin-bottom: 0px;
+}
+
+.block {
+  width: 290px;
+}
+
+.blockTitle {
+  font-family: 'Calibre Medium Italic';
+  font-size: 24px;
+  color: #ffe800;
+  margin-bottom: 13px;
+}
+
+.blockContent {
+  font-family: 'Calibre Light';
+  font-size: 24px;
+  line-height: 26px;
+  color: white;
+}
+
+.gettingStartedButton {
+  display: inline-block;
+  border-radius: 31px;
+  padding: 15px 15px 7px 25px;
+  background-image: linear-gradient(to right, #85c3e1, #29bbaf);
+}
+
+.gettingStartedText {
+  font-family: 'Calibre Semibold';
+  font-size: 28px;
+  color: white;
+  line-height: 35px;
+}
+
+.gettingStartedButtonArrow {
+  font-family: 'Calibre Bold';
+  line-height: 35px;
+  font-size: 35px;
+  color: white;
+  margin-top: 7px;
+  margin-left: 15px;
+}
+
+.homeContainer {
+  text-align: left;
+}
+
+.gettingStartedButtonText {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 .projectTitle p {
   display: inline-block;
   color: white;
   font-family: 'Calibre Medium';
   font-size: 56px;
   margin-left: 15px;
+  margin-bottom: 20px;
+}
+
+.navigationSlider .slidingNav ul li {
+  min-width: 124px;
+  text-align: left;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.navigationSlider .slidingNav ul li a {
+  color: white;
+  font-family: 'Calibre Light';
+  font-size: 24px;
+  padding: 0;
+}
+
+.navigationSlider .slidingNav ul li > a {
+  background-color: transparent;
+}
+
+.navigationSlider .slidingNav ul li a:hover {
+  background-color: transparent;
+  color: #4d8eaa;
+}
+
+.headerWrapper.wrapper {
+  padding: 0;
+}
+
+body .homeContainer .homeWrapper {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .button {
@@ -98,9 +241,13 @@ a {
   color: #4d8eaa;
 }
 
-#er-linked-list, #er-user-spouse, #er-tree, #er-following-followers,
-#er-user-friends, #er-city-streets {
-    height: 230px;
+#er-linked-list,
+#er-user-spouse,
+#er-tree,
+#er-following-followers,
+#er-user-friends,
+#er-city-streets {
+  height: 230px;
 }
 
 @media only screen and (max-width: 1500px) {
@@ -133,6 +280,51 @@ a {
   .gridBlock .fourByGridBlock img {
     max-height: 104px;
   }
+
+  body .wrapper.homeWrapper {
+    display: flex;
+    justify-content: center;
+  }
+
+  .headerWrapper.wrapper {
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  .navPusher {
+    padding-top: 50px;
+    position: relative;
+  }
+
+  .features {
+    flex-direction: column;
+  }
+
+  .block {
+    margin-top: 20px;
+    width: 80%;
+  }
+
+  .projectTitleContainer {
+    flex-direction: column;
+  }
+
+  .projectTitle p {
+    margin-left: 0px;
+    margin-top: 20px;
+  }
+
+  .homeContainer {
+    margin-bottom: 50px;
+  }
+
+  .fixedHeaderContainer {
+    margin-top: 0 !important;
+  }
+
+  .navigationSlider .slidingNav ul li {
+    min-width: 100px;
+  }
 }
 
 @media only screen and (max-width: 880px) {
@@ -143,6 +335,17 @@ a {
   }
 }
 
+body,
+html {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.wrapper.homeWrapper {
+  display: block !important;
+}
+
 /*
  Home Page
 */
@@ -152,6 +355,12 @@ a {
 
 .fixedHeaderContainer {
   position: relative;
+  margin-top: 100px;
+  padding: 0 15%;
+}
+
+.navigationSlider .slidingNav {
+  position: relative;
 }
 
 header > .navigationSlider {
@@ -167,9 +376,39 @@ header > .navigationSlider {
 }
 
 .sideNavVisible .fixedHeaderContainer a {
-  display: flex!important;
+  display: flex !important;
+}
+
+.sideNavVisible .navigationSlider .slidingNav {
+  position: relative;
 }
 
 .sideNavVisible .fixedHeaderContainer {
+  display: flex;
+  align-items: center;
   position: fixed;
+  margin-top: 0;
+  padding: 0;
+}
+
+.sideNavVisible .navigationWrapper.navigationSlider {
+  align-self: flex-end;
+}
+
+.sideNavVisible .headerWrapper.wrapper {
+  width: 100vw;
+  margin: 0 20px;
+}
+
+.sideNavVisible .headerWrapper.wrapper header {
+  width: 100vw;
+}
+
+.navigationSlider .slidingNav ul {
+  margin-top: 0px;
+}
+
+ul,
+ol {
+  margin-bottom: 0px;
 }