1.0 docs structure (#2629)

Refs #2021

---------

Co-authored-by: Brian Manifold <bmanifold@gmail.com>

website/src/app/kb/administer/backup-restore/page.tsx

@@ -0,0 +1,11 @@
+import Content from "./readme.mdx";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Backup and Restore • Firezone Docs",
+  description: "Firezone Documentation",
+};
+
+export default function Page() {
+  return <Content />;
+}

website/src/app/kb/administer/backup-restore/readme.mdx

@@ -0,0 +1 @@
+# Backup and Restore

website/src/app/kb/administer/logs/page.tsx

@@ -0,0 +1,11 @@
+import Content from "./readme.mdx";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Viewing Logs • Firezone Docs",
+  description: "Firezone Documentation",
+};
+
+export default function Page() {
+  return <Content />;
+}

website/src/app/kb/administer/logs/readme.mdx

@@ -0,0 +1 @@
+# Viewing Logs

website/src/app/kb/administer/troubleshooting/page.tsx

@@ -0,0 +1,11 @@
+import Content from "./readme.mdx";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Troubleshooting Guide • Firezone Docs",
+  description: "Firezone Documentation",
+};
+
+export default function Page() {
+  return <Content />;
+}

website/src/app/kb/administer/troubleshooting/readme.mdx

@@ -0,0 +1 @@
+# Troubleshooting Guide

website/src/app/kb/administer/upgrading/page.tsx

@@ -0,0 +1,11 @@
+import Content from "./readme.mdx";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Upgrading • Firezone Docs",
+  description: "Firezone Documentation",
+};
+
+export default function Page() {
+  return <Content />;
+}

website/src/app/kb/administer/upgrading/readme.mdx

@@ -0,0 +1 @@
+# Upgrading Firezone

website/src/app/kb/authenticate/email/page.tsx

@@ -0,0 +1,11 @@
+import Content from "./readme.mdx";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Email Auth • Firezone Docs",
+  description: "Firezone Documentation",
+};
+
+export default function Page() {
+  return <Content />;
+}

website/src/app/kb/authenticate/email/readme.mdx

@@ -0,0 +1 @@
+# Email Authentication

website/src/app/kb/authenticate/google/page.tsx

@@ -0,0 +1,11 @@
+import Content from "./readme.mdx";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Google Auth • Firezone Docs",
+  description: "Firezone Documentation",
+};
+
+export default function Page() {
+  return <Content />;
+}

website/src/app/kb/authenticate/google/readme.mdx

@@ -0,0 +1 @@
+# Google Authentication

website/src/app/kb/authenticate/oidc/page.tsx

@@ -0,0 +1,11 @@
+import Content from "./readme.mdx";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "OIDC Auth • Firezone Docs",
+  description: "Firezone Documentation",
+};
+
+export default function Page() {
+  return <Content />;
+}

website/src/app/kb/authenticate/oidc/readme.mdx

@@ -0,0 +1 @@
+# OpenID Connect (OIDC) Authentication

website/src/app/kb/authenticate/user-group-sync/page.tsx

@@ -0,0 +1,11 @@
+import Content from "./readme.mdx";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "IdP Sync • Firezone Docs",
+  description: "Firezone Documentation",
+};
+
+export default function Page() {
+  return <Content />;
+}

website/src/app/kb/authenticate/user-group-sync/readme.mdx

@@ -0,0 +1 @@
+# User / Group Sync

website/src/app/kb/deploy/clients/page.tsx

@@ -0,0 +1,11 @@
+import Content from "./readme.mdx";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Client Deployment • Firezone Docs",
+  description: "Firezone Documentation",
+};
+
+export default function Page() {
+  return <Content />;
+}

website/src/app/kb/deploy/clients/readme.mdx

@@ -0,0 +1 @@
+# Deploy Clients

website/src/app/kb/deploy/gateway/page.tsx

@@ -0,0 +1,11 @@
+import Content from "./readme.mdx";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Gateway Deployment • Firezone Docs",
+  description: "Firezone Documentation",
+};
+
+export default function Page() {
+  return <Content />;
+}

website/src/app/kb/deploy/gateway/readme.mdx

@@ -0,0 +1 @@
+# Deploy a Gateway

website/src/app/kb/deploy/page.tsx

@@ -0,0 +1,11 @@
+import Content from "./readme.mdx";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Deploy • Firezone Docs",
+  description: "Firezone Documentation",
+};
+
+export default function Page() {
+  return <Content />;
+}

website/src/app/kb/deploy/readme.mdx

@@ -0,0 +1 @@
+# Deploy Firezone

website/src/app/kb/layout.tsx

@@ -0,0 +1,16 @@
+import KbSidebar from "@/components/KbSidebar";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex">
+      <KbSidebar />
+      <main className="max-w-screen-xl p-4 pt-20 -ml-64 md:ml-0 lg:mx-auto">
+        <div className="px-4">
+          <article className="max-w-none format format-sm sm:format-base lg:format-lg ">
+            {children}
+          </article>
+        </div>
+      </main>
+    </div>
+  );
+}

website/src/app/kb/page.tsx

@@ -0,0 +1,11 @@
+import Content from "./readme.mdx";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Firezone Docs • Home",
+  description: "Firezone Documentation",
+};
+
+export default function Page() {
+  return <Content />;
+}

website/src/app/kb/quickstart/page.tsx

@@ -0,0 +1,11 @@
+import Content from "./readme.mdx";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Quickstart • Firezone Docs",
+  description: "Firezone Documentation",
+};
+
+export default function Page() {
+  return <Content />;
+}

website/src/app/kb/quickstart/readme.mdx

@@ -0,0 +1,88 @@
+import Image from "next/image";
+
+# Quickstart Guide
+
+Welcome to the quickstart guide for Firezone
+
+<Image
+  src="/images/firezone-v1-architecture-simple.png"
+  alt="Firezone simplified architecture"
+  width={900}
+  height={50}
+  className="mx-auto shadow rounded"
+/>
+
+
+## Prerequisites
+
+* Firezone account (Don't have an account? Get one here https://app.firezone.dev/sign_up)
+* Resource you want to give users secure access to (e.g. prod server, database, SaaS application, subnet, etc...)
+* Server or VM (with the ability to deploy a docker container or Linux application) that can connect to both the resource, and the internet
+
+## Summary
+
+1. **Sign in to your Firezone Admin Portal**
+
+1. **Create a Site** -  Sites are where admins manage resources, and gateways that enable access to those resources (e.g. US-West, Chicago-office).
+
+1. **Deploy a Gateway** - Gateways are site-specific, and provide connectivity between the Firezone client and resources in a Site.
+
+1. **Add a Resource** - A resource is anything you'd like to give users secure access to (e.g. a server/VM, database, subnet).
+
+1. **Create a Policy for each Resource** - A policy defines which user-groups can access a Resource (note: access is default-deny, which means a user can't access a Resource until a Policy permitting access is created).
+
+1. **Download the Firezone Client**
+
+This quickstart guide illustrates a simple Firezone setup. Firezone supports more complex deployments, but we like to start with the basics.
+
+Instructions below follow the same order as the summary above. If you follow the instructions sequentially from top to bottom, you should end up with a working Firezone network that looks like the architecture diagram at the top of this guide.
+
+
+### Signing In
+
+In your browser, visit your custom sign-in URL, which can be found in the "Welcome to Firezone" email sent after you created your account.  Once on the sign-in page, enter your email and click the sign-in button.  You'll receive another email with a magic link and a token.  You may either click the magic link to be signed in automatically or you may copy the token value and enter it in to the form on the sign-in page.
+
+
+### Create a Site
+
+When you log in to the admin portal, you'll land on the Sites page. The first step will be to create a Site by clicking the 'Add Site' button. We'll auto-generate a name for the site, but you should consider renaming it something relevant like `Production`, `US-West`, or `Chicago-office`. After the site is created, you'll be forwarded to the Site Details page where you can continue the setup process.
+
+
+### Deploy a Gateway
+
+Gateways run on your infrastructure (server, VM, etc.) and must have access to the internet as well as the resource you'd like to share.
+
+On the Site Details page, click the 'Deploy a Gateway' button. You will be shown 2 options to deploy a Gateway: `Docker` or `Systemd` (choose whichever method you prefer, and follow the instruction on that page).
+
+When a Gateway has been successfully deployed, you will be notified deployment page and given the option to be redirected to the Site Details page where the gateway will now be listed and shown as online.
+
+
+### Add a Resource
+
+A Resource is anything the site-gateway can reach, that you'd like to give users access to. Examples include servers, databases, subnets, etc...
+
+On the Site Details page, click on the 'Create a Resource' button.  You will now be able to enter the `name` and `address` for a Resource.  The `name` can be anything you choose, and the `address` must be one of the following:
+
+- IP address
+- Fully Qualified Domain Name (FQDN)
+- CIDR Range
+
+After creation, you'll need to create a policy authorizing user-group(s) to access the resource. Users cannot access a resource unless they are members of a group that has access.
+
+
+### Create a Policy
+
+Navigate to the Policies page by clicking the 'Policies' button in the left-side menu bar. Select a resource, and choose which groups can access that resource. Save the policy.
+
+
+### Download the Firezone Client
+
+When you're finished in the Admin Portal, you can connect to available resources by downloading the Firezone Client App, and signing in.
+
+To download the app...
+
+After installing the app, go to 'Settings' and enter your 'Account ID' (aka account slug), and apply changes. If you don't recall your Account ID, you can refer back to the "Welcome to Firezone" email that was sent when you signed up.
+
+To sign in, close the settings window, click "Sign In" in the Firezone app, and authenticate your account.
+
+You now have secure access to resources shown in the "Resources" section. Enjoy!

website/src/app/kb/readme.mdx

@@ -0,0 +1,8 @@
+import SupportOptions from "@/components/SupportOptions";
+import Image from "next/image";
+
+# Docs Overview
+
+Welcome to the Firezone Documentation! Use the sections below to get started.
+
+{/* TODO */}

website/src/app/kb/user-guides/android-client/page.tsx

@@ -0,0 +1,11 @@
+import Content from "./readme.mdx";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Android Client • Firezone Docs",
+  description: "Firezone Documentation",
+};
+
+export default function Page() {
+  return <Content />;
+}

website/src/app/kb/user-guides/android-client/readme.mdx

@@ -0,0 +1 @@
+# Android Client

website/src/app/kb/user-guides/apple-client/page.tsx

@@ -0,0 +1,11 @@
+import Content from "./readme.mdx";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Apple Client • Firezone Docs",
+  description: "Firezone Documentation",
+};
+
+export default function Page() {
+  return <Content />;
+}

website/src/app/kb/user-guides/apple-client/readme.mdx

@@ -0,0 +1 @@
+# Apple Client (macOS / iOS)

website/src/app/kb/user-guides/linux-client/page.tsx

@@ -0,0 +1,11 @@
+import Content from "./readme.mdx";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Linux Client • Firezone Docs",
+  description: "Firezone Documentation",
+};
+
+export default function Page() {
+  return <Content />;
+}

website/src/app/kb/user-guides/linux-client/readme.mdx

@@ -0,0 +1 @@
+# Linux Client

website/src/app/kb/user-guides/windows-client/page.tsx

@@ -0,0 +1,11 @@
+import Content from "./readme.mdx";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Windows Client • Firezone Docs",
+  description: "Firezone Documentation",
+};
+
+export default function Page() {
+  return <Content />;
+}

website/src/app/kb/user-guides/windows-client/readme.mdx

@@ -0,0 +1 @@
+# Windows Client

website/src/components/KbSidebar/Collapse.tsx

@@ -0,0 +1,48 @@
+import { HiChevronRight, HiChevronDown } from "react-icons/hi2";
+import { useState } from "react";
+
+export default function Collapse({
+  children,
+  label,
+  expanded,
+}: {
+  children: React.ReactNode;
+  label: string;
+  expanded?: boolean;
+}) {
+  const ctl = label.toLowerCase().replace(" ", "-") + "-dropdown";
+  const indent = "ml-3";
+  const hidden = expanded ? "" : "hidden";
+  const text = expanded ? "bg-neutral-100 " : "text-neutral-900 ";
+  const [expandedState, setExpandedState] = useState(expanded);
+
+  return (
+    <>
+      <button
+        type="button"
+        className={
+          text +
+          " flex items-center w-full transition duration-75 rounded group hover:bg-neutral-100 "
+        }
+        aria-controls={ctl}
+        data-collapse-toggle={ctl}
+        onClick={() => setExpandedState(!expandedState)}
+      >
+        <span
+          className="ml-3 flex-1 text-left whitespace-nowrap"
+          sidebar-toggle-item="true"
+        >
+          {label}
+        </span>
+        {expandedState ? (
+          <HiChevronDown sidebar-toggle-item="true" className="w-6 h-6" />
+        ) : (
+          <HiChevronRight sidebar-toggle-item="true" className="w-6 h-6" />
+        )}
+      </button>
+      <ul id={ctl} className={[hidden, "ml-3 py-1 space-y-0.5"].join(" ")}>
+        {children}
+      </ul>
+    </>
+  );
+}

website/src/components/KbSidebar/Item.tsx

@@ -0,0 +1,22 @@
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export default function Item({ href, label }: { href: string; label: string }) {
+  const p = usePathname();
+
+  function active(path: string) {
+    return p == path ? "bg-neutral-100  " : "";
+  }
+
+  return (
+    <Link
+      href={href}
+      className={[
+        active(href),
+        "flex items-center text-left rounded text-base font-normal text-neutral-900 hover:bg-neutral-100  ",
+      ].join(" ")}
+    >
+      <span className="ml-3">{label}</span>
+    </Link>
+  );
+}

website/src/components/KbSidebar/SearchForm.tsx

@@ -0,0 +1,14 @@
+import { DocSearch } from "@docsearch/react";
+import "@docsearch/css";
+
+export default function SearchForm() {
+  return (
+    <div className="pb-3 -ml-1 flex justify-start border-b border-neutral-200 ">
+      <DocSearch
+        appId="XXPZ9QVGFB"
+        apiKey="66664e8765e1645ea0b500acebb0b0c2"
+        indexName="firezone"
+      />
+    </div>
+  );
+}

website/src/components/KbSidebar/index.tsx

@@ -0,0 +1,30 @@
+"use client";
+import Collapse from "./Collapse";
+import { useEffect } from "react";
+import { initFlowbite } from "flowbite";
+import Item from "./Item";
+import SearchForm from "./SearchForm";
+import { usePathname } from "next/navigation";
+
+export default function KbSidebar() {
+  useEffect(() => {
+    // Manually init flowbite's data-toggle listeners since we're using custom components
+    initFlowbite();
+  }, []);
+
+  const p = usePathname() || "";
+
+  return (
+    <aside
+      id="kb-sidebar"
+      aria-label="Sidebar"
+      aria-hidden="true"
+      className="sticky left-0 top-0 flex-none w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-neutral-200 md:translate-x-0  "
+    >
+      <SearchForm />
+      <div className="mt-5 h-full overflow-y-auto bg-white  pr-3">
+        <ul className="space-y-2 font-medium">{/* FIXME */}</ul>
+      </div>
+    </aside>
+  );
+}