You are viewing a plain text version of this content. The canonical link for it is here.
Posted to reviews@yunikorn.apache.org by ww...@apache.org on 2020/06/21 01:47:20 UTC

[incubator-yunikorn-site] branch site-v2 updated: optimize index layout

This is an automated email from the ASF dual-hosted git repository.

wwei pushed a commit to branch site-v2
in repository https://gitbox.apache.org/repos/asf/incubator-yunikorn-site.git


The following commit(s) were added to refs/heads/site-v2 by this push:
     new 4128aec  optimize index layout
4128aec is described below

commit 4128aecb63f20a47e30992ba20cf791e62f54385
Author: Weiwei yang <ww...@apache.org>
AuthorDate: Sat Jun 20 18:47:04 2020 -0700

    optimize index layout
---
 docusaurus.config.js      |  21 +++-------
 src/css/custom.css        |  27 ++++++++----
 src/pages/index.js        | 105 +++++++++++++++++++++++++++++++++-------------
 static/img/cloud-prem.png | Bin 0 -> 638560 bytes
 static/img/k8s.png        | Bin 0 -> 220913 bytes
 static/img/scheduling.png | Bin 0 -> 36823 bytes
 static/img/yunikorn.ico   | Bin 0 -> 31166 bytes
 7 files changed, 98 insertions(+), 55 deletions(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index aed3d63..356c97c 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -21,21 +21,14 @@ module.exports = {
   tagline: 'Apache YuniKorn (Incubating) is a light-weight, universal resource scheduler for container orchestrator systems.',
   url: 'http://yunikorn.apache.org',
   baseUrl: '/',
-  favicon: 'img/favicon.ico',
-  organizationName: 'apache', // Usually your GitHub org/user name.
-  projectName: 'incubator-yunikorn-core', // Usually your repo name.
+  favicon: 'img/yunikorn.ico',
+  organizationName: 'apache',
+  projectName: 'incubator-yunikorn-core',
   plugins: [
     [
       '@docusaurus/plugin-content-blog',
       {
-        /**
-         * URL route for the blog section of your site.
-         * *DO NOT* include a trailing slash.
-         */
         routeBasePath: 'community',
-        /**
-         * Path to data on filesystem relative to site dir.
-         */
         path: './community',
       },
     ],
@@ -48,9 +41,6 @@ module.exports = {
           homePageId: 'get_started/user_guide',
           path: 'docs',
           sidebarPath: require.resolve('./sidebars.js'),
-          // editUrl: 'https://github.com/facebook/docusaurus/edit/master/website/',
-          // showLastUpdateAuthor: false,
-          // showLastUpdateTime: false,
         },
         theme: {
           customCss: require.resolve('./src/css/custom.css'),
@@ -59,13 +49,13 @@ module.exports = {
     ],
   ],
   themeConfig: {
-    disableDarkMode: true,
+    disableDarkMode: false,
     navbar: {
       hideOnScroll: false,
       title: 'Apache YuniKorn',
       logo: {
         alt: 'YuniKorn Site Logo',
-        src: 'img/yunikorn_blue_256.png',
+        src: 'img/yunikorn.ico',
       },
       links: [
         {label: 'Quick Start', to: 'docs/', position: 'left'},
@@ -155,7 +145,6 @@ module.exports = {
         Apache and the Apache feather logo are trademarks of The Apache Software Foundation<br/> <br/>
 
         <p style="text-align: left">Disclaimer: Apache YuniKorn (Incubating) is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completene [...]
-
     },
   }
 };
diff --git a/src/css/custom.css b/src/css/custom.css
index 48e6a2f..5189826 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -17,13 +17,12 @@
 /* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #44aab1;
-  --ifm-color-primary-dark: rgb(33, 175, 144);
-  --ifm-color-primary-darker: rgb(31, 165, 136);
-  --ifm-color-primary-darkest: rgb(26, 136, 112);
-  --ifm-color-primary-light: rgb(70, 203, 174);
-  --ifm-color-primary-lighter: rgb(102, 212, 189);
-  --ifm-color-primary-lightest: rgb(146, 224, 208);
-  --ifm-code-font-size: 95%;
+  --ifm-color-primary-dark: #3d999f;
+  --ifm-color-primary-darker: #3a9196;
+  --ifm-color-primary-darkest: #30777c;
+  --ifm-color-primary-light: #51b5bc;
+  --ifm-color-primary-lighter: #5ab9c0;
+  --ifm-color-primary-lightest: #75c4ca;
 }
 
 .docusaurus-highlight-code-line {
@@ -78,9 +77,14 @@
   max-width: 1200px;
 }
 
+[class^="main_src-pages"] .container{
+  text-align: center;
+  max-width: 1200px;
+  padding: 60px;
+}
 
 .button.button--secondary {
-  color: white !important;
+  color: 44aab1 !important;
 }
 
 .button--lg {
@@ -88,7 +92,12 @@
 }
 
 .hero--primary {
-  background-image: url("/img/home-hero.png");
+  background-image: url("/img/hero-background-image.jpeg");
   background-repeat: no-repeat;
   background-position: center;
 }
+
+.navbar .navbar__logo {
+  height: auto;
+  width: 50px;
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index 06b47fe..91d28d2 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -17,9 +17,45 @@
 import React from 'react';
 import classnames from 'classnames';
 import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import styles from './styles.module.css';
 
+const features = [
+  {
+    title: <>Scheduling Capabilities</>,
+    imageUrl: 'img/scheduling.png',
+    description: (
+      <>
+      Built-in with comprehensive scheduling capabilities, such as hierarchy
+      queues, resource fairness across queues, job ordering (FIFO/FAIR), pluggable
+      node sorting policies, preemption, etc.
+      </>
+    ),
+  },
+  {
+    title: <>Resource Scheduler for K8s</>,
+    imageUrl: 'img/k8s.png',
+    description: (
+      <>
+      YuniKorn is fully K8s compatible, all K8s APIs are supported
+      such as predicates, volumes, etc. No API changes needed from client
+      side.
+      </>
+    ),
+  },
+  {
+    title: <>Cloud Native</>,
+    imageUrl: 'img/cloud-prem.png',
+    description: (
+      <>
+      It supports both on-prem and on-cloud clusters. It works with cluster
+      autoscaler on cloud to bring maximum resource elasticity.
+      </>
+    ),
+  },
+];
+
 function Home() {
   const context = useDocusaurusContext();
   const {siteConfig = {}} = context;
@@ -28,39 +64,48 @@ function Home() {
       title={`Welcome to ${siteConfig.title}`}
       description="Description will go into a meta tag in <head />">
       <header className={classnames('hero hero--primary', styles.heroBanner)}>
-        <div className="container">
-          <h1 className="hero__title">{siteConfig.title}</h1>
-          <p className="hero__subtitle">{siteConfig.tagline}</p>
-          <br />
-          <div className="buttons_src-pages-">
-              <a className="button button--outline button--secondary button--lg" href="/docs/">GET STARTED</a> &nbsp;
-              <a className="button button--outline button--secondary button--lg" href="/community/download">DOWNLOAD</a> &nbsp;
-              <a className="button button--outline button--secondary button--lg" href="/community/roadmap">ROADMAP</a>
-          </div>
-        </div>
+        <div className="container" />
       </header>
       <main>
-          <section className="features_src-pages-">
-              <div className="container">
-                  <h1 className="hero__title">Architecture</h1>
-                  {/*<p>Apache YuniKorn (Incubating) is a light-weighted, universal resource scheduler for container orchestrator systems.</p>*/}
-                  {/*<ul>*/}
-                  {/*    <li><span className="glyphicon glyphicon-transfer"></span> Unified</li>*/}
-                  {/*    <li><span className="glyphicon glyphicon-eye-open"></span> Capacity Planning</li>*/}
-                  {/*    <li><span className="glyphicon glyphicon-dashboard"></span> Resource Monitoring</li>*/}
-                  {/*    <li><span className="glyphicon glyphicon-wrench"></span> Resource Scheduling</li>*/}
-                  {/*    <li><span className="glyphicon glyphicon-cloud"></span> Application Management</li>*/}
-                  {/*</ul>*/}
-                  <div className="row">
-                      <div className="col col--12">
-                          <div className="text--center">
-                              <br />
-                              <img src="/img/architecture.png" />
-                          </div>
-                      </div>
-                  </div>
-              </div>
+          <section className="main_src-pages-">
+          <div className="container">
+            <h1 className="hero__title">{siteConfig.title}</h1>
+            <p className="hero__subtitle">{siteConfig.tagline}</p>
+            <br />
+            <div className="buttons_src-pages-">
+                <a className="button button--outline button--secondary button--lg" href="/docs/">GET STARTED</a> &nbsp;
+                <a className="button button--outline button--secondary button--lg" href="/community/download">DOWNLOAD</a> &nbsp;
+                <a className="button button--outline button--secondary button--lg" href="/community/roadmap">ROADMAP</a>
+            </div>
+          </div>
           </section>
+
+          {features && features.length && (
+         <section className={styles.features}>
+           <div className="container">
+             <div className="row">
+               {features.map(({ imageUrl, title, description }, idx) => (
+                 <div
+                   key={idx}
+                   className={classnames('col col--4', styles.feature)}
+                 >
+                   {imageUrl && (
+                     <div className="text--center">
+                       <img
+                         className={styles.featureImage}
+                         src={imageUrl}
+                         alt={title}
+                       />
+                     </div>
+                   )}
+                   <h3>{title}</h3>
+                   <p>{description}</p>
+                 </div>
+               ))}
+             </div>
+           </div>
+         </section>
+       )}
       </main>
 
     </Layout>
diff --git a/static/img/cloud-prem.png b/static/img/cloud-prem.png
new file mode 100644
index 0000000..14908bf
Binary files /dev/null and b/static/img/cloud-prem.png differ
diff --git a/static/img/k8s.png b/static/img/k8s.png
new file mode 100644
index 0000000..6852613
Binary files /dev/null and b/static/img/k8s.png differ
diff --git a/static/img/scheduling.png b/static/img/scheduling.png
new file mode 100644
index 0000000..deb07a2
Binary files /dev/null and b/static/img/scheduling.png differ
diff --git a/static/img/yunikorn.ico b/static/img/yunikorn.ico
new file mode 100644
index 0000000..d0857e3
Binary files /dev/null and b/static/img/yunikorn.ico differ