clean up formatting a bit and add components overview

.gitignore

@@ -32,6 +32,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-pacakge-lock.json
+package-lock.json
 tsconfig.tsbuildinfo
-

packages/docusaurus/docs/01-overview.md

@@ -1,3 +1,39 @@
 # Overview
 
+## Components Overview
+
+Pangolin’s architecture consists of the following components, each designed to handle a specific aspect of the system:
+
+### [**Pangolin**](https://github.com/fosrl/pangolin) (Management Application & Central Server)
+   The central hub for managing the application. Pangolin includes:
+    - Most business logic.
+    - External facing rest API.
+    - WebSocket server for managing Newt sites.
+    - Internal facing rest API for communication between components on the VPS.
+    - Frontend server for the web interface.
+    - Main database for storing data.
+    - Authentication system.
+
+### [**Gerbil**](https://github.com/fosrl/gerbil) (WireGuard Interface Management)
+   Acts as the intermediary for managing WireGuard configurations. It creates and maintains the secure tunnels between sites and the Pangolin server.
+
+### [**Traefik**](https://github.com/traefik/traefik) (Reverse Proxy)
+   A high-performance, modular reverse proxy that routes requests to private resources. Traefik is widely adopted, and its plugin system allows further customization and security enhancements. For example:
+    - Out-of-the-box compatibility with plugins like Fail2Ban or CrowdSec.
+    - Enhanced security via our custom Traefik plugin Badger, which acts as an authentication bouncer.
+
+### [**Badger**](https://github.com/traefik/badger) (Traefik Plugin):
+    A custom Traefik plugin that acts as an authentication bouncer. Badger:
+     - Intercepts requests to the Traefik reverse proxy.
+     - Redirects unauthenticated requests to the Pangolin server for authentication.
+
+### [**Newt**](https://github.com/fosrl/newt) (Minimal User Space WireGuard Client)
+   A lightweight client designed to run on the private network. Newt:
+    - Connects to the Pangolin server via WebSocket for managing endpoints.
+    - Facilitates networking through its connection to Gerbil over the encrypted tunnel.
+
+## System Diagram
+
+<p align="center">
     ![graphic](@site/static/img/Fossorial_Overview.drawio.svg)
+</p>

packages/docusaurus/docusaurus.config.ts

@@ -37,26 +37,28 @@ const config: Config = {
       {
         docs: {
           sidebarPath: './sidebars.ts',
+		  routeBasePath: '/'
           // 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/',
         },
-        blog: {
+		blog: false,
-          showReadingTime: true,
+        // blog: {
-          feedOptions: {
+        //   showReadingTime: true,
-            type: ['rss', 'atom'],
+        //   feedOptions: {
-            xslt: true,
+        //     type: ['rss', 'atom'],
-          },
+        //     xslt: true,
-          // Please change this to your repo.
+        //   },
-          // Remove this to remove the "edit this page" links.
+        //   // Please change this to your repo.
-        //   editUrl:
+        //   // Remove this to remove the "edit this page" links.
-        //     'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+        // //   editUrl:
-          // Useful options to enforce blogging best practices
+        // //     'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
-          onInlineTags: 'warn',
+        //   // Useful options to enforce blogging best practices
-          onInlineAuthors: 'warn',
+        //   onInlineTags: 'warn',
-          onUntruncatedBlogPosts: 'warn',
+        //   onInlineAuthors: 'warn',
-        },
+        //   onUntruncatedBlogPosts: 'warn',
+        // },
         theme: {
           customCss: './src/css/custom.css',
         },
@@ -80,7 +82,7 @@ const config: Config = {
           position: 'left',
           label: 'Docs',
         },
-        {to: '/blog', label: 'Blog', position: 'left'},
+        // {to: '/blog', label: 'Blog', position: 'left'},
         {
           href: 'https://github.com/fosrl',
           label: 'GitHub',
@@ -91,45 +93,45 @@ const config: Config = {
     footer: {
       style: 'dark',
       links: [
-        {
-          title: 'Docs',
-          items: [
-            {
-              label: 'Docs',
-              to: '/docs/overview',
-            },
-          ],
-        },
-        {
-          title: 'Community',
-          items: [
         // {
-            //   label: 'Stack Overflow',
+        //   title: 'Docs',
-            //   href: 'https://stackoverflow.com/questions/tagged/docusaurus',
+        //   items: [
-            // },
-            {
-              label: 'Discord',
-              href: 'https://discordapp.com/invite/docusaurus',
-            },
         //     {
-            //   label: 'X',
+        //       label: 'Docs',
-            //   href: 'https://x.com/docusaurus',
+        //       to: '/docs/overview',
+        //     },
+        //   ],
+        // },
+        // {
+        //   title: 'Community',
+        //   items: [
+        //     // {
+        //     //   label: 'Stack Overflow',
+        //     //   href: 'https://stackoverflow.com/questions/tagged/docusaurus',
+        //     // },
+        //     {
+        //       label: 'Discord',
+        //       href: 'https://discordapp.com/invite/docusaurus',
+        //     },
+        //     // {
+        //     //   label: 'X',
+        //     //   href: 'https://x.com/docusaurus',
+        //     // },
+        //   ],
+        // },
+        // {
+        //   title: 'More',
+        //   items: [
+        //     // {
+        //     //   label: 'Blog',
+        //     //   to: '/blog',
+        //     // },
+        //     {
+        //       label: 'GitHub',
+        //       href: 'https://github.com/fosrl',
+        //     },
+        //   ],
         // },
-          ],
-        },
-        {
-          title: 'More',
-          items: [
-            {
-              label: 'Blog',
-              to: '/blog',
-            },
-            {
-              label: 'GitHub',
-              href: 'https://github.com/fosrl',
-            },
-          ],
-        },
       ],
       copyright: `Copyright © ${new Date().getFullYear()} Fossorial, LLC`,
     },

packages/docusaurus/src/components/HomepageFeatures/index.tsx

@@ -1,19 +1,52 @@
-import clsx from 'clsx';
+import clsx from "clsx";
-import Heading from '@theme/Heading';
+import Heading from "@theme/Heading";
-import styles from './styles.module.css';
+import styles from "./styles.module.css";
 
 type FeatureItem = {
   title: string;
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
+  // Svg: React.ComponentType<React.ComponentProps<"svg">>;
   description: JSX.Element;
 };
 
-function Feature({title, Svg, description}: FeatureItem) {
+const FeatureList: FeatureItem[] = [
+  {
+    title: "Easy to Use",
+    // Svg: require("@site/static/img/undraw_docusaurus_mountain.svg").default,
+    description: (
+      <>
+        Docusaurus was designed from the ground up to be easily installed and
+        used to get your website up and running quickly.
+      </>
+    ),
+  },
+  {
+    title: "Focus on What Matters",
+    // Svg: require("@site/static/img/undraw_docusaurus_tree.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.
+      </>
+    ),
+  },
+  {
+    title: "Powered by React",
+    // Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
+    description: (
+      <>
+        Extend or customize your website layout by reusing React. Docusaurus can
+        be extended while reusing the same header and footer.
+      </>
+    ),
+  },
+];
+
+function Feature({ title, description }: FeatureItem) {
   return (
-    <div className={clsx('col col--4')}>
+    <div className={clsx("col col--4")}>
-      <div className="text--center">
+      {/* <div className="text--center"> */}
-        <Svg className={styles.featureSvg} role="img" />
+      {/*   <Svg className={styles.featureSvg} role="img" /> */}
-      </div>
+      {/* </div> */}
       <div className="text--center padding-horiz--md">
         <Heading as="h3">{title}</Heading>
         <p>{description}</p>
@@ -27,7 +60,9 @@ export default function HomepageFeatures(): JSX.Element {
     <section className={styles.features}>
       <div className="container">
         <div className="row">
-
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
         </div>
       </div>
     </section>

packages/docusaurus/src/pages/index.tsx

@@ -1,16 +1,17 @@
-import clsx from 'clsx';
+import clsx from "clsx";
-import Link from '@docusaurus/Link';
+import Link from "@docusaurus/Link";
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import Layout from '@theme/Layout';
+import Layout from "@theme/Layout";
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
+import HomepageFeatures from "@site/src/components/HomepageFeatures";
-import Heading from '@theme/Heading';
+import Heading from "@theme/Heading";
 
-import styles from './index.module.css';
+import styles from "./index.module.css";
+import { useEffect } from "react";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
         <Heading as="h1" className="hero__title">
           {siteConfig.title}
@@ -19,7 +20,8 @@ function HomepageHeader() {
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"
-            to="/docs/intro">
+            to="/docs/intro"
+          >
             Pangolin Tutorial - 5min ⏱️
           </Link>
         </div>
@@ -30,14 +32,11 @@ function HomepageHeader() {
 
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
-  return (
+
-    <Layout
+  useEffect(() => {
-      title={`Hello from ${siteConfig.title}`}
+	// redirect to /overview
-      description="Description will go into a meta tag in <head />">
+	window.location.href = "/overview";
-      <HomepageHeader />
+  });
-      <main>
+
-        <HomepageFeatures />
+  return <></>
-      </main>
-    </Layout>
-  );
 }