website: create website

This commit introduces a the Kilo website. It is generated with
Docusaurus and can be deployed with standard services like Netlify.

Signed-off-by: Lucas Servén Marín <[email protected]>

Makefile

@@ -200,6 +200,21 @@ header: .header
 		exit 1; \
 	fi
 
+website/docs/README.md: README.md
+	rm -rf website/docs
+	mkdir website/docs
+	find docs  -type f -name '*.md' | xargs -I{} ln {} website/{}
+	rm -rf website/static/img/graphs
+	cp -r docs/graphs website/static/img/
+	cp README.md website/docs/
+	sed -i 's/\.\/docs\///g' $@
+	find $(@D)  -type f -name '*.md' | xargs -I{} sed -i 's/\.\//\/img\//g' {}
+	sed -i 's/graphs\//\/img\/graphs\//g' $@
+
+website/build/index.html: website/docs/README.md
+	yarn --cwd website install
+	yarn --cwd website build
+
 container: .container-$(ARCH)-$(VERSION) container-name
 .container-$(ARCH)-$(VERSION): $(BINS) Dockerfile
 	@i=0; for a in $(ALL_ARCH); do [ "$$a" = $(ARCH) ] && break; i=$$((i+1)); done; \

README.md

@@ -1,4 +1,11 @@
-<p align="center"><img src="./kilo.svg" width="150"></p>
+---
+id: introduction
+title: Introduction
+hide_title: true
+custom_edit_url: https://github.com/squat/kilo/edit/master/README.md
+---
+
+<p align="center"><img src="./kilo.svg" width="150" /></p>
 
 # Kilo
 
@@ -101,7 +108,7 @@ For example, to run Kilo on a Typhoon cluster running Flannel:
 kubectl apply -f https://raw.githubusercontent.com/squat/kilo/master/manifests/kilo-typhoon-flannel.yaml
 ```
 
-[See the manifests directory for more examples](./manifests).
+[See the manifests directory for more examples](https://github.com/squat/kilo/tree/master/manifests).
 
 ## VPN
 
@@ -181,4 +188,4 @@ For example, the `graph` command can be used to generate a graph of the network
 kgctl graph | circo -Tsvg > cluster.svg
 ```
 
-<img src="./docs/graphs/location.svg">
+<img src="./docs/graphs/location.svg" />

docs/annotations.md

@@ -1,3 +1,9 @@
+---
+id: annotations
+title: Annotations
+hide_title: true
+---
+
 # Annotations
 
 The following annotations can be added to any Kubernetes Node object to configure the Kilo network.

docs/kgctl.md

@@ -1,10 +1,15 @@
+---
+id: kgctl
+hide_title: true
+---
+
 # kgctl
 
 Kilo provides a command line tool for inspecting and interacting with clusters: `kgctl`.
 This tool can be used to understand a mesh's topology, get the WireGuard configuration for a peer, or graph a cluster.
 `kgctl` requires a Kubernetes configuration file to be provided, either by setting the `KUBECONFIG` environment variable or by providing the `--kubeconfig` flag.
 
-## Getting Started
+## Installation
 
 Installing `kgctl` currently requires building the binary from source.
 *Note*: the [Go toolchain must be installed](https://golang.org/doc/install) in order to build the binary.
@@ -60,7 +65,7 @@ kgctl graph | circo -Tsvg > cluster.svg
 
 This will generate an SVG like:
 
-<img src="./graphs/location.svg">
+<img src="./graphs/location.svg" />
 
 ### showconf
 

docs/multi-cluster-services.md

@@ -1,3 +1,9 @@
+---
+id: multi-cluster-services
+title: Multi-cluster Services
+hide_title: true
+---
+
 # Multi-cluster Services
 
 Just as Kilo can connect a Kubernetes cluster to external services over WireGuard, it can connect multiple independent Kubernetes clusters.

docs/topology.md

@@ -1,3 +1,9 @@
+---
+id: topology
+title: Topology
+hide_title: true
+---
+
 # Topology
 
 Kilo allows the topology of the encrypted network to be customized.
@@ -30,7 +36,7 @@ Analyzing the cluster with `kgctl` would produce a result like:
 kgctl graph | circo -Tsvg > cluster.svg
 ```
 
-<img src="./graphs/location.svg">
+<img src="./graphs/location.svg" />
 
 ## Full Mesh
 
@@ -44,7 +50,7 @@ Analyzing the cluster with `kgctl` would produce a result like:
 kgctl graph | circo -Tsvg > cluster.svg
 ```
 
-<img src="./graphs/full-mesh.svg">
+<img src="./graphs/full-mesh.svg" />
 
 ## Mixed 
 
@@ -64,7 +70,7 @@ Analyzing the cluster with `kgctl` would produce a result like:
 kgctl graph | circo -Tsvg > cluster.svg
 ```
 
-<img src="./graphs/mixed.svg">
+<img src="./graphs/mixed.svg" />
 
 If the cluster also had nodes in AWS, then the following snippet could be used:
 
@@ -80,4 +86,4 @@ This would in turn produce a graph like:
 kgctl graph | circo -Tsvg > cluster.svg
 ```
 
-<img src="./graphs/complex.svg">
+<img src="./graphs/complex.svg" />

docs/vpn-server.md

@@ -1,3 +1,9 @@
+---
+id: vpn-server
+title: VPN Sever
+hide_title: true
+---
+
 # VPN Server
 
 The cluster VPN created by Kilo can also be used by peers as a gateway to access the Internet.

docs/vpn.md

@@ -1,3 +1,9 @@
+---
+id: vpn
+title: VPN
+hide_title: true
+---
+
 # VPN
 
 Kilo enables peers outside of a Kubernetes cluster to connect to the created WireGuard network.

website/.gitignore

@@ -0,0 +1,21 @@
+# Dependencies
+/node_modules
+
+# Production
+/docs
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

website/README.md

@@ -0,0 +1,33 @@
+# Website
+
+This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+```
+$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

website/docusaurus.config.js

@@ -0,0 +1,77 @@
+module.exports = {
+  title: 'Kilo',
+  tagline: 'a multi-cloud network overlay built on WireGuard and designed for Kubernetes',
+  url: 'https://kilo.squat.ai',
+  baseUrl: '/',
+  favicon: 'img/favicon.ico',
+  organizationName: 'squat',
+  projectName: 'kilo',
+  themeConfig: {
+    navbar: {
+      title: 'Kilo',
+      logo: {
+        alt: 'Kilo',
+        src: 'img/kilo.svg',
+      },
+      links: [
+        {
+          to: 'docs/introduction',
+          activeBasePath: 'docs',
+          label: 'Docs',
+          position: 'left',
+        },
+        {
+          href: 'https://github.com/squat/kilo',
+          label: 'GitHub',
+          position: 'right',
+        },
+      ],
+    },
+    footer: {
+      style: 'dark',
+      links: [
+        {
+          title: 'Docs',
+          items: [
+            {
+              label: 'Introduction',
+              to: 'docs/introduction',
+            },
+            {
+              label: 'Topology',
+              to: 'docs/topology',
+            },
+            {
+              label: 'VPN',
+              to: 'docs/vpn',
+            },
+          ],
+        },
+        {
+          title: 'Social',
+          items: [
+            {
+              label: 'GitHub',
+              href: 'https://github.com/squat/kilo',
+            },
+          ],
+        },
+      ],
+    },
+  },
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          sidebarPath: require.resolve('./sidebars.js'),
+          editUrl:
+            'https://github.com/squat/kilo/edit/master/',
+        },
+        theme: {
+          customCss: require.resolve('./src/css/custom.css'),
+        },
+      },
+    ],
+  ],
+};

website/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "website",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy"
+  },
+  "dependencies": {
+    "@docusaurus/core": "^2.0.0-alpha.48",
+    "@docusaurus/preset-classic": "^2.0.0-alpha.48",
+    "classnames": "^2.2.6",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

website/sidebars.js

@@ -0,0 +1,19 @@
+module.exports = {
+  docs: [
+    {
+      type: 'doc',
+      id: 'introduction',
+    },
+    {
+      type: 'category',
+      label: 'Guides',
+      items: ['topology', 'vpn', 'vpn-server', 'multi-cluster-services'],
+    },
+    {
+      type: 'category',
+      label: 'Reference',
+      items: ['annotations', 'kgctl'],
+    },
+    //Features: ['mdx'],
+  ],
+};

website/src/css/custom.css

@@ -0,0 +1,25 @@
+/* stylelint-disable docusaurus/copyright-header */
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: rgb(33, 175, 144);
+  --ifm-color-primary-darker: rgb(31, 165, 136);
+  --ifm-color-primary-darkest: rgb(26, 136, 112);
+  --ifm-color-primary-light: rgb(70, 203, 174);
+  --ifm-color-primary-lighter: rgb(102, 212, 189);
+  --ifm-color-primary-lightest: rgb(146, 224, 208);
+  --ifm-code-font-size: 95%;
+}
+
+.docusaurus-highlight-code-line {
+  background-color: rgb(72, 77, 91);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}