[DOCS] Landing page & layout updates (nebari-dev#213)

* Layout clean-up and update landing page

Signed-off-by: Pavithra Eswaramoorthy <pavithraes@outlook.com>

* code review - update alt text

Signed-off-by: Pavithra Eswaramoorthy <pavithraes@outlook.com>

---------

Signed-off-by: Pavithra Eswaramoorthy <pavithraes@outlook.com>

docs/docusaurus.config.js

@@ -13,15 +13,15 @@ const config = {
   favicon: 'img/favicon.ico',
 
   // Set the production url of your site here
-  url: 'https://your-docusaurus-site.example.com',
+  url: 'https://jhub-apps.nebari.dev/',
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
   baseUrl: '/',
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
-  organizationName: 'facebook', // Usually your GitHub org/user name.
-  projectName: 'docusaurus', // Usually your repo name.
+  organizationName: 'nebari-dev', // Usually your GitHub org/user name.
+  projectName: 'jhub-apps', // Usually your repo name.
 
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
@@ -44,7 +44,7 @@ const config = {
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl:
-            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+            'https://github.com/nebari-dev/jhub-apps/tree/main/docs',
         },
         blog: false,
         theme: {
@@ -62,15 +62,15 @@ const config = {
       navbar: {
         title: 'JHub Apps',
         logo: {
-          alt: 'My Site Logo',
+          alt: 'Nebari Logo',
           src: 'img/logo.svg',
         },
         items: [
           {
             type: 'docSidebar',
             sidebarId: 'tutorialSidebar',
             position: 'left',
-            label: 'Docs',
+            label: 'Documentation',
           },
           {
             href: 'https://github.com/nebari-dev/jhub-apps',
@@ -82,30 +82,16 @@ const config = {
       footer: {
         style: 'dark',
         links: [
-          {
-            title: 'Docs',
-            items: [
-              {
-                label: 'Docs',
-                to: '/docs/intro',
-              },
-            ],
-          },
           {
             title: 'Community',
             items: [
               {
                 label: 'Stack Overflow',
                 href: 'https://stackoverflow.com/questions/tagged/jhub-apps',
               },
-            ],
-          },
-          {
-            title: 'More',
-            items: [
               {
-                label: 'GitHub',
-                href: 'https://github.com/nebari-dev/jhub-apps',
+                label: 'Nebari',
+                href: 'https://nebari.dev',
               },
             ],
           },

docs/src/pages/index.js

@@ -7,6 +7,84 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import Heading from '@theme/Heading';
 import styles from './index.module.css';
 
+const FrameworkList = [
+  {
+    image: "/img/logos/panel.png",
+    title: "Panel",
+    description: (
+      <>
+        Powerful data exploration & web app framework for Python
+      </>
+    ),
+  },
+  {
+    image: "/img/logos/bokeh.png",
+    title: "Bokeh",
+    description: (
+      <>
+        Python library for creating interactive visualizations for modern web browsers
+      </>
+    ),
+  },
+  {
+    image: "/img/logos/streamlit.png",
+    title: "Streamlit",
+    description: (
+      <>
+        Python framework for data scientists and AI/ML engineers
+        to deliver dynamic data apps with only a few lines of code
+      </>
+    ),
+  },
+  {
+    image: "/img/logos/plotly-dash.png",
+    title: "Plotly Dash",
+    description: (
+      <>
+        Low-code framework for rapidly building data apps in Python
+      </>
+    ),
+  },
+  {
+    image: "/img/logos/voila.png",
+    title: "Voila",
+    description: (
+      <>
+        Convert a Jupyter Notebook into an interactive dashboard
+      </>
+    ),
+  },
+  {
+    image: "/img/logos/gradio.png",
+    title: "Gradio",
+    description: (
+      <>
+        Quickly build a demo or web application
+        for your machine learning model, API, or any Python function
+      </>
+    ),
+  },
+  {
+    image: "/img/logos/jupyter.png",
+    title: "JupyterLab",
+    description: (
+      <>
+        Highly extensible, feature-rich notebook authoring application and editing environment
+      </>
+    ),
+  },
+  {
+    image: "/img/logos/custom.png",
+    title: "Generic Python Command",
+    description: (
+      <>
+        Python Server, Flask API, and more!
+      </>
+    ),
+  },
+];
+
+
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
   return (
@@ -28,6 +106,39 @@ function HomepageHeader() {
   );
 }
 
+function Framework({ image, title, description }) {
+  return (
+    <div className={clsx("col col--4")}>
+      <div className="text--center padding--md">
+        <img
+          alt={`${title} logo`}
+          src={image}
+        />
+        {/* <h3>{title}</h3> */}
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+function HomepageFrameworks() {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <section className={clsx(styles.framework, "hero hero--secondary")}>
+      <div className="container">
+        <h2 className="text--center padding--md">
+          Supported frameworks
+        </h2>
+        <div className="row">
+          {FrameworkList.map((props, idx) => (
+            <Framework key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
 export default function Home() {
   const {siteConfig} = useDocusaurusContext();
   return (
@@ -36,7 +147,7 @@ export default function Home() {
       description="JupyterHub Apps Launcher">
       <HomepageHeader />
       <main>
-        <HomepageFeatures />
+        <HomepageFrameworks />
       </main>
     </Layout>
   );

docs/src/pages/index.module.css

@@ -21,3 +21,10 @@
   align-items: center;
   justify-content: center;
 }
+
+.framework {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}