docs: update docs site (salesforce#493)

.all-contributorsrc

@@ -82,6 +82,7 @@
       "contributions": [
         "code",
         "doc",
+        "design",
         "blog"
       ]
     },

README.md

@@ -44,7 +44,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
     <td align="center"><a href="https://github.com/Anergelem"><img src="https://avatars0.githubusercontent.com/u/25507557?v=4" width="100px;" alt=""/><br /><sub><b>Anergelem</b></sub></a><br /><a href="#design-Anergelem" title="Design">🎨</a></td>
     <td align="center"><a href="https://github.com/hoisel"><img src="https://avatars2.githubusercontent.com/u/400244?v=4" width="100px;" alt=""/><br /><sub><b>Hoisel</b></sub></a><br /><a href="https://github.com/NetanelBasal/akita/commits?author=hoisel" title="Code">💻</a></td>
     <td align="center"><a href="https://www.linkedin.com/in/ange-picard-54648b136/"><img src="https://avatars0.githubusercontent.com/u/13108166?v=4" width="100px;" alt=""/><br /><sub><b>Ange Picard</b></sub></a><br /><a href="https://github.com/NetanelBasal/akita/commits?author=MonsieurMan" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/shaharkazaz"><img src="https://avatars2.githubusercontent.com/u/17194830?v=4" width="100px;" alt=""/><br /><sub><b>Shahar Kazaz</b></sub></a><br /><a href="https://github.com/NetanelBasal/akita/commits?author=shaharkazaz" title="Code">💻</a> <a href="https://github.com/NetanelBasal/akita/commits?author=shaharkazaz" title="Documentation">📖</a> <a href="#blog-shaharkazaz" title="Blogposts">📝</a></td>
+    <td align="center"><a href="https://github.com/shaharkazaz"><img src="https://avatars2.githubusercontent.com/u/17194830?v=4" width="100px;" alt=""/><br /><sub><b>Shahar Kazaz</b></sub></a><br /><a href="https://github.com/NetanelBasal/akita/commits?author=shaharkazaz" title="Code">💻</a> <a href="https://github.com/NetanelBasal/akita/commits?author=shaharkazaz" title="Documentation">📖</a> <a href="#design-shaharkazaz" title="Design">🎨</a> <a href="#blog-shaharkazaz" title="Blogposts">📝</a></td>
   </tr>
   <tr>
     <td align="center"><a href="https://github.com/ritox842"><img src="https://avatars0.githubusercontent.com/u/7280441?v=4" width="100px;" alt=""/><br /><sub><b>gili</b></sub></a><br /><a href="https://github.com/NetanelBasal/akita/commits?author=ritox842" title="Code">💻</a></td>

docs/docusaurus.config.js

@@ -13,7 +13,7 @@ module.exports = {
       indexName: 'akita',
     },
     navbar: {
-      title: 'Home',
+      title: 'Akita',
       logo: {
         alt: 'Transloco',
         src: 'img/akita.svg',
@@ -24,6 +24,7 @@ module.exports = {
           activeBasePath: 'docs',
           label: 'Docs',
           position: 'left',
+          className: 'first-nav-element'
         },
         {
           to: 'sample-app',
@@ -34,13 +35,21 @@ module.exports = {
         {
           href: 'https://stackblitz.com/edit/akita-todos-app',
           label: 'Playground',
+          position: 'left',
+          className: 'header-playground-link'
+        },
+        {
+          href: 'https://gitter.im/akita-state-management/Lobby',
+          label: '',
           position: 'right',
+          className: 'header-icon-link header-gitter-link'
         },
         {
           href: 'https://github.com/datorama/akita/',
-          label: 'GitHub',
+          label: '',
           position: 'right',
-        },
+          className: 'header-icon-link header-github-link'
+        }
       ],
     },
     footer: {
@@ -94,6 +103,7 @@ module.exports = {
     },
     prism: {
       theme: require('prism-react-renderer/themes/nightOwlLight'),
+      darkTheme: require('prism-react-renderer/themes/nightOwl')
     },
     sidebarCollapsible: true,
   },

docs/package.json

@@ -9,8 +9,8 @@
     "deploy": "GIT_USER=NetanelBasal USE_SSH=true docusaurus deploy"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-alpha.50",
-    "@docusaurus/preset-classic": "^2.0.0-alpha.50",
+    "@docusaurus/core": "^2.0.0-alpha.58",
+    "@docusaurus/preset-classic": "^2.0.0-alpha.58",
     "classnames": "^2.2.6",
     "react": "^16.8.4",
     "react-dom": "^16.8.4"

docs/src/pages/index.js

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import styles from './styles.module.css';
+import { architectureSvg } from "../components/architecture-svg";
 
 function Home() {
   const context = useDocusaurusContext();
@@ -23,7 +24,7 @@ function Home() {
             <h1 className="hero__title">
               🔮 A <span className="c">Reactive</span> State Management Tailor-Made for <span className="c">JS Applications</span>
             </h1>
-            <img src="img/akita.svg" />
+            <img className="logo" src="img/akita.svg" />
           </div>
 
           <div className={styles.buttons}>
@@ -35,26 +36,25 @@ function Home() {
         </div>
       </header>
 
-      <div className="container arc">
-        <img src="img/akita-arc.jpg" />
+      <div className="container arc padding-top--xl padding-bottom--xl">
+        {architectureSvg()}
       </div>
 
       <div className="description">
         <div className="container">
-          <p>
-            Akita is a state management pattern, built on top of RxJS, which takes the idea of multiple data stores from Flux and the immutable updates from Redux, along with the concept of streaming
-            data, to create the Observable Data Store model.
-          </p>
-
-          <p>
-            Akita encourages simplicity. It saves you the hassle of creating boilerplate code and offers powerful tools with a moderate learning curve, suitable for both experienced and inexperienced
-            developers alike.
-          </p>
-
-          <p>
-            Akita is based on object-oriented design principles instead of functional programming, so developers with OOP experience should feel right at home. Its opinionated structure provides your
-            team with a fixed pattern that cannot be deviated from.
-          </p>
+          <ul>
+            <li>            Akita is a state management pattern, built on top of RxJS, which takes the idea of multiple data stores from Flux and the immutable updates from Redux, along with the concept of streaming
+              data, to create the Observable Data Store model.
+            </li>
+            <li>
+              Akita encourages simplicity. It saves you the hassle of creating boilerplate code and offers powerful tools with a moderate learning curve, suitable for both experienced and inexperienced
+              developers alike.
+            </li>
+            <li>
+              Akita is based on object-oriented design principles instead of functional programming, so developers with OOP experience should feel right at home. Its opinionated structure provides your
+              team with a fixed pattern that cannot be deviated from.
+            </li>
+          </ul>
         </div>
       </div>
     </Layout>

docs/src/pages/styles.module.css

@@ -34,3 +34,13 @@
   height: 200px;
   width: 200px;
 }
+
+.getStarted {
+  background-color: rgba(211, 175, 211, 0.8);
+  border-color: #8c7db6;
+  color: white !important;
+}
+
+.getStarted:hover {
+  background-color: #d3afd3;
+}