From a5b80b1d7ed49984f028e76237e23b86e516f787 Mon Sep 17 00:00:00 2001
From: checktheroads <matt@allroads.io>
Date: Tue, 2 Jun 2020 01:39:25 -0700
Subject: [PATCH] add hyperglass-agent docs; main styling

---
 docs/docs/agent/setup.mdx        |  42 +++++++++++
 docs/src/pages/styles.module.css | 124 +++++++++++++++++--------------
 2 files changed, 111 insertions(+), 55 deletions(-)
 create mode 100644 docs/docs/agent/setup.mdx

diff --git a/docs/docs/agent/setup.mdx b/docs/docs/agent/setup.mdx
new file mode 100644
index 0000000..c793d44
--- /dev/null
+++ b/docs/docs/agent/setup.mdx
@@ -0,0 +1,42 @@
+---
+id: setup
+title: Linux Agent Setup
+sidebar_label: Setup
+keywords: [configuration, linux, frr, frrouting, bird, agent]
+description: Configure hyperglass-agent
+---
+
+:::caution Time & NTP
+Before you get to far, check to make sure your hyperglass server and hyperglass-agent system are both properly synchronized with an NTP server. During the setup process and on every interaction, hyperglass and hyperglass agent exchange [JWT](https://jwt.io/) tokens with a relatively short window (60 seconds, by default) in which to validate the payload. If the system clock on either system is askew by too much, this exchange can fail.
+:::
+
+## Setup
+
+Just like with hyperglass, the hyperglass agent is easy to set up. To automatically create an application directory, generate SSL certificates, generate and symlink a systemd file, and generate a random secret, run:
+
+```shell-session
+$ hyperglass setup
+```
+
+:::note
+You can also run the setup wizard with certain options disabled, if needed:
+
+```shell-session
+$ hyperglass-agent setup --help
+Usage: hyperglass-agent setup [OPTIONS]
+
+  Run the setup wizard
+
+Options:
+  --config / --no-config    Don't regenerate config file
+  --certs / --no-certs      Don't regenerate certificates
+  --systemd / --no-systemd  Don't generate a systemd file
+  --force                   Force regeneration of config file
+  -h, --help                Show this message and exit.
+```
+
+:::
+
+:::important More coming soon
+Documentation for [hyperglass-agent](https://github.com/checktheroads/hyperglass-agent) is in progress!
+:::
diff --git a/docs/src/pages/styles.module.css b/docs/src/pages/styles.module.css
index 346de00..57fd157 100644
--- a/docs/src/pages/styles.module.css
+++ b/docs/src/pages/styles.module.css
@@ -10,80 +10,94 @@
  * and scoped locally.
  */
 .heroBanner {
-    /* background-color: var(--neutron-color-dark); */
-    background-color: var(--ifm-background-color);
-    color: var(--neutron-color-lighter);
-    padding: 128px;
-    text-align: center;
-    position: relative;
-    overflow: hidden;
+  /* background-color: var(--neutron-color-dark); */
+  background-color: var(--ifm-background-color);
+  color: var(--neutron-color-lighter);
+  padding: 128px;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
 }
 
 .title[class] {
-    font-weight: 200;
-    font-size: 4rem;
+  font-weight: 200;
+  font-size: 4rem;
 }
 
 .subTitle[class] {
-    font-weight: 200;
-    font-size: 2rem;
-    padding: 24px;
+  font-weight: 200;
+  font-size: 2rem;
+  padding: 24px;
 }
 
-.homeBtn {
-    color: unset !important;
-    font-size: 24px;
-    padding: 16px 36px;
-    margin: 0.25rem;
-    border-color: unset;
+h2.smallerTitle[class] {
+  font-size: 1.5rem;
 }
 
-.homeBtn:hover {
-    color: unset !important;
-}
-
-.btnPrimary:hover {
-    border-color: var(--ifm-color-primary);
-}
-
-.btnSecondary:hover {
-    border-color: var(--ifm-color-secondary);
-}
-
-.buttons {
-    margin-top: 4vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-
-.content {
-    align-items: center;
-    display: flex;
-    padding: 36px 0;
-    width: 100%;
+.smallerTitleContainer {
+  max-width: 50%;
 }
 
 @media screen and (max-width: 966px) {
-    .heroBanner {
-        padding: 2rem;
-        min-height: 80vh;
-    }
+  .smallerTitleContainer {
+    max-width: unset;
+  }
+}
 
-    .title {
-        font-size: 2.5rem !important;
-    }
+.homeBtn {
+  color: unset !important;
+  font-size: 24px;
+  padding: 16px 36px;
+  margin: 0.25rem;
+  border-color: unset;
+}
 
-    .homeBtn {
-        min-width: 100%;
-    }
+.homeBtn:hover {
+  color: unset !important;
+}
+
+.btnPrimary:hover {
+  border-color: var(--ifm-color-primary);
+}
+
+.btnSecondary:hover {
+  border-color: var(--ifm-color-secondary);
+}
+
+.buttons {
+  margin-top: 4vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.content {
+  align-items: center;
+  display: flex;
+  padding: 36px 0;
+  width: 100%;
+}
+
+@media screen and (max-width: 966px) {
+  .heroBanner {
+    padding: 2rem;
+    min-height: 80vh;
+  }
+
+  .title {
+    font-size: 2.5rem !important;
+  }
+
+  .homeBtn {
+    min-width: 100%;
+  }
 }
 
 .tagPrimary {
-    color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
 }
 
 .tagSecondary {
-    color: var(--ifm-color-secondary);
+  color: var(--ifm-color-secondary);
 }