mirror of
https://github.com/fosrl/docs.git
synced 2025-05-12 13:20:43 +01:00
clean up formatting a bit and add components overview
This commit is contained in:
Milo Schwartz
parent
3de889e0b9
commit
601bb62a6e
5 changed files with 160 additions and 89 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -32,6 +32,5 @@ npm-debug.log*
|
|||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
pacakge-lock.json
|
||||
package-lock.json
|
||||
tsconfig.tsbuildinfo
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
showReadingTime: true,
|
||||
feedOptions: {
|
||||
type: ['rss', 'atom'],
|
||||
xslt: true,
|
||||
},
|
||||
// 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/',
|
||||
// Useful options to enforce blogging best practices
|
||||
onInlineTags: 'warn',
|
||||
onInlineAuthors: 'warn',
|
||||
onUntruncatedBlogPosts: 'warn',
|
||||
},
|
||||
blog: false,
|
||||
// blog: {
|
||||
// showReadingTime: true,
|
||||
// feedOptions: {
|
||||
// type: ['rss', 'atom'],
|
||||
// xslt: true,
|
||||
// },
|
||||
// // 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/',
|
||||
// // Useful options to enforce blogging best practices
|
||||
// onInlineTags: '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',
|
||||
// href: 'https://stackoverflow.com/questions/tagged/docusaurus',
|
||||
// },
|
||||
{
|
||||
label: 'Discord',
|
||||
href: 'https://discordapp.com/invite/docusaurus',
|
||||
},
|
||||
// title: 'Docs',
|
||||
// items: [
|
||||
// {
|
||||
// label: 'X',
|
||||
// href: 'https://x.com/docusaurus',
|
||||
// label: 'Docs',
|
||||
// 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`,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,19 +1,52 @@
|
|||
import clsx from 'clsx';
|
||||
import Heading from '@theme/Heading';
|
||||
import styles from './styles.module.css';
|
||||
import clsx from "clsx";
|
||||
import Heading from "@theme/Heading";
|
||||
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'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="text--center">
|
||||
<Svg className={styles.featureSvg} role="img" />
|
||||
</div>
|
||||
<div className={clsx("col col--4")}>
|
||||
{/* <div className="text--center"> */}
|
||||
{/* <Svg className={styles.featureSvg} role="img" /> */}
|
||||
{/* </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>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
import clsx from 'clsx';
|
||||
import Link from '@docusaurus/Link';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import Layout from '@theme/Layout';
|
||||
import HomepageFeatures from '@site/src/components/HomepageFeatures';
|
||||
import Heading from '@theme/Heading';
|
||||
import clsx from "clsx";
|
||||
import Link from "@docusaurus/Link";
|
||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
||||
import Layout from "@theme/Layout";
|
||||
import HomepageFeatures from "@site/src/components/HomepageFeatures";
|
||||
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();
|
||||
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>
|
||||
|
|
@ -29,15 +31,12 @@ function HomepageHeader() {
|
|||
}
|
||||
|
||||
export default function Home(): JSX.Element {
|
||||
const {siteConfig} = useDocusaurusContext();
|
||||
return (
|
||||
<Layout
|
||||
title={`Hello from ${siteConfig.title}`}
|
||||
description="Description will go into a meta tag in <head />">
|
||||
<HomepageHeader />
|
||||
<main>
|
||||
<HomepageFeatures />
|
||||
</main>
|
||||
</Layout>
|
||||
);
|
||||
const { siteConfig } = useDocusaurusContext();
|
||||
|
||||
useEffect(() => {
|
||||
// redirect to /overview
|
||||
window.location.href = "/overview";
|
||||
});
|
||||
|
||||
return <></>
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue