Enhance documentation frontpage (#73)

docs/docs/contributing/_category_.json

@@ -5,4 +5,4 @@
         "type": "generated-index",
         "description": "Developing Athena"
     }
-}
+}

docs/docusaurus.config.ts

@@ -3,8 +3,8 @@ import type {Config} from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 
 const config: Config = {
-  title: 'My Site',
-  tagline: 'Dinosaurs are cool',
+  title: 'Athena',
+  tagline: 'A GraphQL Object Storage Webservice Backed by OpenStack Swift and Hadoop HDFS',
   favicon: 'img/favicon.ico',
 
   url: 'https://qubitpi.github.io/',
@@ -47,26 +47,26 @@ const config: Config = {
     // Replace with your project's social card
     image: 'img/docusaurus-social-card.jpg',
     navbar: {
-      title: 'My Site',
+      title: 'Athena',
       logo: {
-        alt: 'My Site Logo',
+        alt: 'Athena Logo',
         src: 'img/logo.svg',
       },
       items: [
         {
           type: 'docSidebar',
-          sidebarId: 'tutorialSidebar',
+          sidebarId: 'docSidebar',
           position: 'left',
-          label: 'Tutorial',
+          label: 'Documentation',
         },
         {to: '/blog', label: 'Blog', position: 'left'},
         {
-          href: "https://QubitPi.github.io/athena/apidocs",
+          href: "https://qubitpi.github.io/athena/apidocs",
           label: "API",
           position: "left",
         },
         {
-          href: 'https://github.com/facebook/docusaurus',
+          href: 'https://github.com/QubitPi/athena',
           label: 'GitHub',
           position: 'right',
         },
@@ -76,10 +76,10 @@ const config: Config = {
       style: 'dark',
       links: [
         {
-          title: 'Docs',
+          title: 'Documentation',
           items: [
             {
-              label: 'Tutorial',
+              label: 'Getting Started',
               to: '/docs/intro',
             },
           ],
@@ -88,17 +88,13 @@ const config: Config = {
           title: 'Community',
           items: [
             {
-              label: 'Stack Overflow',
-              href: 'https://stackoverflow.com/questions/tagged/docusaurus',
+              label: 'GitHub Issue',
+              href: 'https://github.com/QubitPi/athena/issues',
             },
             {
               label: 'Discord',
-              href: 'https://discordapp.com/invite/docusaurus',
-            },
-            {
-              label: 'Twitter',
-              href: 'https://twitter.com/docusaurus',
-            },
+              href: 'https://discord.com/widget?id=1001320502960324658&theme=dark',
+            }
           ],
         },
         {
@@ -110,12 +106,12 @@ const config: Config = {
             },
             {
               label: 'GitHub',
-              href: 'https://github.com/facebook/docusaurus',
+              href: 'https://github.com/QubitPi/athena',
             },
           ],
         },
       ],
-      copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
+      copyright: `Copyright © ${new Date().getFullYear()} Jiaqi Liu. Built with Docusaurus.`,
     },
     prism: {
       theme: prismThemes.github,

docs/sidebars.ts

@@ -12,11 +12,11 @@ import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
  */
 const sidebars: SidebarsConfig = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
+  docSidebar: [{type: 'autogenerated', dirName: '.'}],
 
   // But you can create a sidebar manually
   /*
-  tutorialSidebar: [
+  docSidebar: [
     'intro',
     'hello',
     {

docs/src/components/HomepageFeatures/index.tsx

@@ -10,32 +10,33 @@ type FeatureItem = {
 
 const FeatureList: FeatureItem[] = [
   {
-    title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+    title: 'Cutting-Edge API Technology',
+    Svg: require('@site/static/img/graphql.svg').default,
     description: (
       <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
+        Athena makes it easy to build and maintain GraphQL web services for managing file metadata. Athena's API is
+        clean and user-friendly, hiding the complexities of complicated data storage and query optimization from
+        end-users
       </>
     ),
   },
   {
-    title: 'Focus on What Matters',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+    title: 'Specialized in Object Storage',
+    Svg: require('@site/static/img/object-storage.svg').default,
     description: (
       <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
+        Designed for Big Data and scalability, Athena has first-class support for OpenStack Swift and Hadoop HDFS as
+        back-ends and flexible pipeline-style architecture which handles nearly any back-end for data storage
       </>
     ),
   },
   {
-    title: 'Powered by React',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
+    title: 'Cloud Native in Nature',
+    Svg: require('@site/static/img/openstack.svg').default,
     description: (
       <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
+        The long-term goal of Athena is to make it part of OpenStack ecosystem so to make it a quickly-provisioned and
+        easily-managed SaaS infrastructural component
       </>
     ),
   },

docs/src/css/custom.css

@@ -6,25 +6,25 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #48cae4;
+  --ifm-color-primary-dark: #48cae4;
+  --ifm-color-primary-darker: #00b4d8;
+  --ifm-color-primary-darkest: #0096c7;
+  --ifm-color-primary-light: #48cae4;
+  --ifm-color-primary-lighter: #48cae4;
+  --ifm-color-primary-lightest: #48cae4;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #c1d3fe;
+  --ifm-color-primary-dark: #abc4ff;
+  --ifm-color-primary-darker: #9fbcff;
+  --ifm-color-primary-darkest: #93b5ff;
+  --ifm-color-primary-light: #abc4ff;
+  --ifm-color-primary-lighter: #abc4ff;
+  --ifm-color-primary-lightest: #abc4ff;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }

docs/src/pages/index.tsx

@@ -20,7 +20,7 @@ function HomepageHeader() {
           <Link
             className="button button--secondary button--lg"
             to="/docs/intro">
-            Docusaurus Tutorial - 5min ⏱️
+            Documentation
           </Link>
         </div>
       </div>