feat: revamped swiftwave homepage

swiftwave-org · May 27, 2024 · 511ea2b · 511ea2b
1 parent f0ce4e2
commit 511ea2b
Show file tree

Hide file tree

Showing 10 changed files with 333 additions and 137 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -37,9 +37,7 @@ const config = {
             },
           },
         },
-        blog: {
-          showReadingTime: true,
-        },
+        blog: false,
         theme: {
           customCss: require.resolve("./src/css/custom.css"),
         },
@@ -162,19 +160,44 @@ const config = {
             title: "Documentation",
             items: [
               {
-                label: "CLI Reference",
-                to: "/docs/cli",
+                label: "Documentation",
+                to: "/docs",
               },
               {
                 label: "GraphQL API Reference",
                 to: "https://graphql.docs.swiftwave.org/"
               },
+              {
+                label: "CLI Reference",
+                to: "/docs/cli",
+              },
               {
                 label: "REST API Reference",
                 to: "https://github.com/swiftwave-org/swiftwave/blob/develop/docs/rest_api.md"
               }
             ],
           },
+          {
+            title: "Important Service",
+            items: [
+              {
+                label: "App Store Metadata",
+                to: "https://github.com/swiftwave-org/app-store",
+              },
+              {
+                label: "Stats Ninja",
+                to: "https://github.com/swiftwave-org/stats-ninja",
+              },
+              {
+                label: "Volume Toolkit",
+                to: "https://github.com/swiftwave-org/volume-toolkit"
+              },
+              {
+                label: "UDP Proxy",
+                to: "https://github.com/swiftwave-org/udpproxy"
+              }
+            ],
+          },
           {
             title: "Source Code",
             items: [
@@ -186,6 +209,10 @@ const config = {
                 label: "SwiftWave Dashboard",
                 to: "https://github.com/swiftwave-org/dashboard",
               },
+              {
+                label: "Custom HAProxy Image",
+                to: "https://github.com/swiftwave-org/haproxy"
+              },
               {
                 label: "Quick DNS",
                 to: "https://github.com/swiftwave-org/dns"
@@ -196,7 +223,7 @@ const config = {
             title: "Community",
             items: [
               {
-                label: "Join on Slack",
+                label: "Slack",
                 to: "https://slack.swiftwave.org/",
               },
               {
@@ -210,7 +237,7 @@ const config = {
             ],
           },
         ],
-        copyright: `Copyright © ${new Date().getFullYear()} SwiftWave, All rights reserved.`,
+        copyright: `Copyright © 2023 - ${new Date().getFullYear()} SwiftWave, All rights reserved.`,
       },
       prism: {
         theme: lightCodeTheme,

diff --git a/src/components/github-star-btn.js b/src/components/github-star-btn.js
@@ -0,0 +1,29 @@
+import React, { useEffect } from "react";
+
+export default function GithubStarBtn() {
+    const [githubStars, setGithubStars] = React.useState("---");
+    const fetchGithubStars = async () => {
+        try {
+            const response = await fetch("https://api.github.com/repos/swiftWave-org/swiftwave");
+            const data = await response.json();
+            setGithubStars(data.stargazers_count);
+        } catch (error) {
+            console.log(error)
+        }
+    }
+
+    useEffect(() => {
+        fetchGithubStars();
+    }, []);
+
+    return (
+        <div className="flex flex-row gap-2 px-3 py-0.5 justify-center items-center border-[3px] border-gray-400 border-solid rounded-lg cursor-pointer hover:bg-gray-100 hover:border-primary-500 overflow-hidden" onClick={() => window.open("https://github.com/swiftWave-org/swiftwave", "_blank")}>
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" />
+            </svg>
+            <div className="text-base font-medium font-Roboto hidden md:block">Star</div>
+            <div className="h-full w-0.5 bg-gray-400 self-stretch -my-1 py-[0.3rem] hidden md:block">&nbsp;</div>
+            <div className="text-base font-medium font-Roboto">{githubStars}</div>
+        </div>
+    );
+}
diff --git a/src/components/header.js b/src/components/header.js
@@ -0,0 +1,23 @@
+import { CloudIcon } from "@heroicons/react/24/outline";
+import React from "react";
+
+
+export default function Header() {
+    return (
+        <div className="mt-20 md:mt-40 mb-10 w-full flex flex-col items-center">
+            {/* micro announcement bar */}
+            <div className="text-sm md:text-lg text-black px-4 md:px-6 py-1.5 border border-solid border-gray-300 rounded-full font-Poppins mb-14">
+                🚀  v2.x released. <span className="font-bold">Check here</span>
+            </div>
+            {/* tagline */}
+            <div className="font-Pacifico text-center text-2xl md:text-6xl leading-loose md:leading-loose">
+                <span className="text-primary-700">Simple Lightweight</span> PaaS<br />
+                for self-hosting
+            </div>
+            {/* cta */}
+            <div className="mt-20 flex flex-row justify-center gap-3 border-[3px] border-solid border-primary-500 rounded-lg px-6 md:px-12 py-3 md:py-4 text-lg cursor-pointer font-Roboto font-medium hover:bg-primary-500 hover:text-white duration-300">
+                <CloudIcon className="w-6 h-6" /><span>Self-host Swiftwave</span>
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/info-group.js b/src/components/info-group.js
@@ -0,0 +1,29 @@
+import React from "react";
+
+export default function InfoGroup(props) {
+    return (
+        <div className="w-full mt-16 md:mt-20 flex flex-col items-center" >
+            <div className="text-xl md:text-2xl font-bold font-Poppins">{props.title}</div>
+            <div className="text-base mt-1 md:text-lg font-medium font-Poppins text-center">{props.subtitle}</div>
+            <div className="w-full mt-10 font-Roboto flex gap-6 flex-wrap justify-center">
+                {
+                    (props.infos || []).map((info, index) => {
+                        return (
+                            <div className="w-full md:w-[20%] border-[2px] border-gray-400 border-solid rounded-lg p-3 md:p-5" key={index}>
+                                <div className="flex flex-row justify-start items-center gap-2 font-Poppins">
+                                    {
+                                        info.icon
+                                    }
+                                    <div className="text-lg md:text-xl font-bold">{info.title}</div>
+                                </div>
+                                <div className="mt-4 font-Roboto shadow-sm text-justify">
+                                    {info.content}
+                                </div>
+                            </div>
+                        );
+                    })
+                }
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/navbar.js b/src/components/navbar.js
@@ -0,0 +1,59 @@
+import React from "react";
+import Logo from "../img/logo.png"
+import Link from "@docusaurus/Link";
+import GithubStarBtn from "./github-star-btn";
+import { Bars4Icon } from "@heroicons/react/16/solid";
+import { XMarkIcon } from "@heroicons/react/24/outline";
+
+export default function Navbar() {
+  const [isMobileNavbarOpen, setIsMobileNavbarOpen] = React.useState(false);
+  const links = [
+    { name: "Docs", href: "/docs" },
+    { name: "Community", href: "http://slack.swiftwave.org/" },
+    { name: "Contribute", href: "/docs/contribution_guideline" },
+    { name: "Support", href: "/docs/support_us" },
+  ]
+
+  return (
+    <>
+      <div className="flex flex-row justify-between items-center">
+        {/* Logo */}
+        <div className="flex flex-row justify-center items-center gap-2 cursor-pointer">
+          <img src={Logo} className="w-12 h-12" />
+          <div className="max-h-full flex flex-col items-start justify-center">
+            <div className="text-2xl font-Comfortaa font-bold p-0 m-0 leading-tight">swiftwave</div>
+            <p className="p-0 m-0 text-sm leading-tight">open source paas</p>
+          </div>
+        </div>
+        {/* Desktop Links */}
+        <div className="flex-row gap-8 items-center hidden md:flex">
+          {
+            links.map((link) => (
+              <Link className="custom-navbar-link" key={link.name} href={link.href}>{link.name}</Link>
+            ))
+          }
+        </div>
+        {/* Github btn */}
+        <GithubStarBtn />
+        {/* Mobile Hamburger */}
+        <div className="h-8 w-8 p-0.5 text-gray-600 rounded-md transition-all block md:hidden" onClick={() => setIsMobileNavbarOpen(!isMobileNavbarOpen)}>
+          {
+            isMobileNavbarOpen ? <XMarkIcon className="h-6 w-6" /> : <Bars4Icon className="h-6 w-6" />
+          }
+        </div>
+      </div>
+      {/* Mobile Links */}
+      {
+        isMobileNavbarOpen && (
+          <div className="flex flex-col gap-2 mt-4 mb-2 bg-gray-50 p-2 rounded-md">
+            {
+              links.map((link) => (
+                <Link className="custom-navbar-link" key={link.name} href={link.href}>{link.name}</Link>
+              ))
+            }
+          </div>
+        )
+      }
+    </>
+  );
+}
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -4,19 +4,20 @@
  * work well for content-centric websites.
  */
 
+
+ @import url('https://fonts.googleapis.com/css2?family=Comfortaa:[email protected]&family=Pacifico&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
 @tailwind utilities;
 
-/* [data-theme='dark'] {
-  --ifm-color-primary: #af8aff;
-  --ifm-color-primary-dark: #9463ff;
-  --ifm-color-primary-darker: #8f5bff;
-  --ifm-color-primary-darkest: #8147ff;
-  --ifm-color-primary-light: #cab1ff;
-  --ifm-color-primary-lighter: #d7c5ff;
-  --ifm-color-primary-lightest: #ffffff;
-  --ifm-background-color: #111827;
-  --ifm-navbar-background-color: #111827;
-} */
+[data-theme='light'] {
+  --ifm-color-primary-light: #ede9fe;
+  --ifm-color-primary-lighter: #c4b5fd;
+  --ifm-color-primary-lightest: #a78bfa;
+  --ifm-color-primary: #8b5cf6;
+  --ifm-color-primary-dark: #7c3aed;
+  --ifm-color-primary-darker: #5b21b6;
+  --ifm-color-primary-darkest: #4c1d95;
+}
 
 .markdown header h1 {
   --ifm-h1-font-size: 2rem!important;
@@ -25,4 +26,22 @@
 img {
   width: auto;
   height: auto;
-}
+}
+
+.custom-navbar-link {
+  @apply font-Roboto text-base font-medium md:font-normal md:text-lg text-black;
+  text-decoration: none!important;
+}
+
+::-webkit-scrollbar {
+  width: 9px;
+  height: 9px;
+}
+
+::-webkit-scrollbar-track {
+  @apply rounded-md bg-gray-200;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply rounded-md bg-primary-500;
+}
diff --git a/src/img/full-logo.png b/src/img/full-logo.png
diff --git a/src/img/logo.png b/src/img/logo.png