add docs section to reference.octant.dev

changelogs/unreleased/1079-wwitzel3

@@ -0,0 +1 @@
+reference.octant.dev now has a Docs section

web/.storybook/main.js

@@ -1,5 +1,5 @@
 module.exports = {
-  stories: ['../src/**/*.stories.@(js|ts|mdx)'],
+  stories: ['../src/**/*.@(stories|story).@(js|ts|mdx)'],
   addons: [
     '@storybook/addon-actions',
     '@storybook/addon-links',

web/.storybook/manager-head.html

@@ -0,0 +1,35 @@
+<title>Octant</title>
+<meta name="description" content="Octant - A highly extensible platform for developers to better understand the complexity of Kubernetes clusters" />
+<link rel="canonical" href="https://reference.octant.dev"/>
+
+<!-- Bots -->
+<meta name="robots" content="index,follow">
+<meta name="googlebot" content="index,follow">
+
+<!-- Favs -->
+<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
+<link rel="icon" href="/favicon.ico" type="image/x-icon">
+
+  <!-- SEO tags -->
+  <title>Octant | Validate your Kubernetes configuration</title>
+  <meta name="generator" content="Storybook" />
+  <meta property="og:title" content="Octant" />
+  <meta name="author" content="Octant Authors" />
+  <meta property="og:locale" content="en_US" />
+  <meta name="description" content="Visualize your Kubernetes workloads" />
+  <meta property="og:description" content="Visualize your Kubernetes workloads" />
+  <meta property="og:site_name" content="Octant" />
+  <meta name="twitter:card" content="summary" />
+  <meta property="twitter:title" content="Octant" />
+  <meta name="twitter:site" content="@projectoctant" />
+  <meta name="twitter:creator" content="@Octant Authors" />
+  <script type="application/ld+json">
+  {"author":{"@type":"Person","name":"Octant Authors"},"headline":"Octant","description":"Visualize your Kubernetes workloads","name":"Octant","@type":"WebSite","url":"/","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"/octant-logo.png"},"name":"Octant Authors"},"@context":"https://schema.org"}</script>
+  <!-- SEO tag -->
+
+<style>
+  .os-viewport .os-content pre {
+    background-color: rgb(11, 126, 155)!important;
+    color: white!important;
+  }
+</style>

web/.storybook/manager.js

@@ -1,8 +1,9 @@
 import { addons } from '@storybook/addons';
-import { themes } from '@storybook/theming';
+
+import theme from './theme';
 
 addons.setConfig({
-  theme: themes.light,
+  theme: theme,
   previewTabs: {
     'storybook/docs/panel': { index: -1 },
   },

web/.storybook/preview.js

@@ -10,8 +10,10 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from '../src/app/app-routing.module';
 import { setCompodocJson } from '@storybook/addon-docs/angular';
 import docJson from '../documentation.json';
-import { themes } from '@storybook/theming';
 import { MonacoEditorModule } from 'ng-monaco-editor';
+import { windowProvider, WindowToken } from '../src/app/window';
+
+import theme from './theme';
 
 setCompodocJson(docJson);
 
@@ -38,6 +40,7 @@ addDecorator(
     ],
     providers: [
       InitService,
+      { provide: WindowToken, useFactory: windowProvider },
       {
         provide: APP_INITIALIZER,
         useFactory: initService => () => initService.init(),
@@ -50,12 +53,29 @@ addDecorator(
 
 export const parameters = {
   docs: {
-    theme: themes.light,
+    theme: theme,
   },
   options: {
     storySort: (a, b) => {
       // Show component stories on top
-      return a[1].id.localeCompare(b[1].id, {
+      let leftId = a[1].id;
+      let rightId = b[1].id;
+
+      if (leftId.startsWith('docs')) {
+        leftId = '1' + leftId;
+        if (leftId.includes('intro')) {
+          leftId = '0' + leftId;
+        }
+      }
+
+      if (rightId.startsWith('docs')) {
+        rightId = '1' + rightId;
+        if (rightId.includes('intro')) {
+          rightId = '0' + rightId;
+        }
+      }
+
+      return leftId.localeCompare(rightId, {
         numeric: true,
         ignorePunctuation: true,
       });

web/.storybook/theme.js

@@ -0,0 +1,9 @@
+import { create } from '@storybook/theming/create';
+import OctantLogo from './assets/octant-logo.png';
+
+export default create({
+  base: 'light',
+  brandTitle: 'Octant',
+  brandUrl: 'https://github.com/vmware-taznu/octant',
+  brandImage: OctantLogo
+});

web/src/stories/docs/getting-started/GettingStarted.story.mdx

@@ -0,0 +1,81 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta
+  title="Docs/Getting Started/Installation"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: { canvas: { hidden: true } },
+    canvas: { disable: true },
+  }}
+/>
+
+# Getting Started
+
+## Installation
+
+### Package (Linux only)
+
+1. Download the `.deb` or `.rpm` from the [releases page](https://github.com/vmware-tanzu/octant/releases).
+
+2. Install with either `dpkg -i` or `rpm -i` respectively.
+
+###  Windows
+
+#### Chocolatey
+
+1. Install using chocolatey with the following one-liner:
+
+   ```sh
+   choco install octant --confirm
+   ```
+
+#### Scoop
+
+1. Add the [extras](https://github.com/lukesampson/scoop-extras) bucket.
+
+   ```sh
+   scoop bucket add extras
+   ```
+
+2. Install using scoop.
+
+   ```sh
+   scoop install octant
+   ```
+
+### macOS
+
+#### Homebrew
+
+1. Install using Homebrew with the following one-liner:
+
+   ```sh
+   brew install octant
+   ```
+
+### Download a Pre-built Binary (Linux, macOS, Windows)
+
+1. Open the [releases page](https://github.com/vmware-tanzu/octant/releases) from a browser and download the latest tarball or zip file.
+
+2. Extract the tarball or zip where `X.Y` is the release version:
+
+    ```sh
+    $ tar -xzvf ~/Downloads/octant_0.X.Y_Linux-64bit.tar.gz
+    octant_0.X.Y_Linux-64bit/README.md
+    octant_0.X.Y_Linux-64bit/octant
+    ```
+
+3. Verify it runs:
+
+    ```sh
+    $ ./octant_0.X.Y_Linux-64bit/octant version
+    ```
+
+## Nightly Builds
+
+Nightly builds of Octant are available for download.
+
+Please note that nightly builds maybe less stable than our tagged releases and are intended to allow early access to
+preview upcoming features and for plugin authors who want access to the latest plugin APIs.
+
+[Browse nightly builds](https://console.cloud.google.com/storage/browser/octant-nightlies)

web/src/stories/docs/getting-started/Intro.story.mdx

@@ -0,0 +1,49 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta
+  title="Docs/Intro"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: { canvas: { hidden: true } },
+    canvas: { disable: true },
+  }}
+/>
+
+<div style={{ margin: '0 auto', maxWidth: '600px', color: 'white', textAlign: 'center' }}>
+  <img
+    style={{ width: '75%', margin: '0 auto 2em auto' }}
+    src="https://github.com/vmware-tanzu/octant/raw/master/site/docs/master/octant-logo.png"
+  />
+  <br />
+  <br />
+
+
+<a href="https://github.com/vmware-tanzu/octant/releases/latest">
+  <img src="https://img.shields.io/github/release/vmware-tanzu/octant.svg" />
+</a>
+&nbsp;&nbsp;
+<a href="https://github.com/vmware-tanzu/octant">
+  <img src="https://github.com/vmware-tanzu/octant/workflows/preflight-checks/badge.svg" />
+</a>
+&nbsp;&nbsp;
+<a href="https://github.com/vmware-tanzu/octant/blob/master/LICENSE">
+  <img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg" />
+</a>
+&nbsp;&nbsp;
+<a href="https://github.com/vmware-tanzu/octant">
+  <img
+    alt="GitHub stars"
+    src="https://img.shields.io/github/stars/vmware-tanzu/octant?style=social"
+  />
+</a>
+
+---
+
+<h3>A highly extensible platform for developers to better understand the complexity of Kubernetes clusters.</h3>
+<p>
+Octant is a tool for developers to understand how applications run on a Kubernetes cluster.
+It aims to be part of the developer's toolkit for gaining insight and approaching complexity found in Kubernetes.
+Octant offers a combination of introspective tooling, cluster navigation, and object management along with a plugin system to further extend its capabilities.
+</p>
+</div>
+

web/src/stories/docs/getting-started/Why.story.mdx

@@ -0,0 +1,36 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta
+  title="Docs/Getting Started/Why"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: { canvas: { hidden: true } },
+    canvas: { disable: true },
+  }}
+/>
+
+# Why Octant?
+
+Why build what looks like another Kubernetes dashboard when there are already so many out there? ...
+
+- [Kubernetes Dashboard](https://github.com/kubernetes/dashboard)
+- [Lens](https://k8slens.dev/)
+- [Infra](https://infra.app)
+- [K9S](https://k9scli.io/)
+
+The answer is because Octant is not a dashboard, Octant is a platform that ships with a dashboard view.
+
+The Octant team is building a platform that allows one to create developer experineces
+that have Kubernetes at the core. The goal of Octant is to help developers reduce the need to think
+about Kubernetes and focus their energy on thinking about their workloads.
+
+As the Octant team tried out the various different tools, each of them was missing one
+thing, the ability to easily extend them to create custom developer experiences around resources
+in the Kubernetes cluster. This ability to extend and override the default
+behavior of Octant is what makes it so powerful. This allows people
+with the tacit knowledge of complex resources to build smart, insightful, and actionable interfaces
+around those resources.
+
+Our goal is simple, create a platform and a community that is working to simplify Kubernetes for everyone.
+
+We hope you enjoy our work!