add templating for api reference

.gitignore

@@ -4,6 +4,9 @@
 /assets/jsconfig.json
 hugo_stats.json
 
+# I HATE YOU PRETTIER I HATE YOU SO MUCH
+node_modules
+
 # Executable may be added to repository
 hugo.exe
 hugo.darwin

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "overrides": [
+    {
+      "files": ["*.html"],
+      "options": {
+        "parser": "go-template"
+      }
+    }
+  ],
+  "goTemplateBracketSpacing": true
+}

content/api/_index.md

@@ -0,0 +1,6 @@
+---
+menu: main
+title: API reference
+---
+
+TODO Talk about kilovolt and explain event and RPCs

layouts/api/list.html

@@ -0,0 +1,75 @@
+{{ define "schema" }}
+  <code>
+    {{ with .element }}
+      {{ with $.name }}
+        <div class="nameblock"><span class="name">{{ . }}</span>:</div>
+      {{ end }}
+      arrayOf [
+      {{ template  "schema" . }}
+      ]
+    {{ else }}
+      {{ if (eq .name .kind) }}
+        <span class="kind">{{ .kind }}</span>
+      {{ else }}
+        {{ with .name }}
+          <div class="nameblock">
+            <span class="name">{{ . }}</span>{{ if $.isPointer }}
+              <abbr class="pointer" title="Optional, might not be in the object"
+                >*</abbr
+              >
+            {{ end }}:
+          </div>
+        {{ end }}
+        <span class="kind">{{ .kind }}</span>
+      {{ end }}
+      {{ with .keys }}
+        {
+        {{ range . }}
+          <ul>
+            <li>{{ template  "schema" . }}</li>
+          </ul>
+        {{ end }}
+        }
+      {{ end }}
+    {{ end }}
+  </code>
+{{ end }}
+
+{{ define "main" }}
+  {{ $keys := .Site.Data.api.v310.api }}
+  <main class="apidocs">
+    <nav>
+      <ul>
+        {{ range $key, $spec := $keys }}
+          <li>
+            <a href="#{{ anchorize $key }}" class="monotitle">{{ $key }}</a>
+          </li>
+        {{ end }}
+      </ul>
+    </nav>
+    <div class="doc">
+      <section class="copy">{{ .Content }}</section>
+      <section class="reference">
+        {{ range $key, $spec := $keys }}
+          <article class="api" id="{{ anchorize $key }}">
+            <header>
+              <h3>
+                <span class="monotitle">{{ $key }}</span> {{ range .tags }}
+                  <span class="tag {{ . }}">{{ . }}</span>
+                {{ end }}
+              </h3>
+              {{ with .description }}
+                <div class="description">{{ . }}</div>
+              {{ end }}
+              {{ with .schema }}
+                <div class="schema">
+                  {{ template  "schema" . }}
+                </div>
+              {{ end }}
+            </header>
+          </article>
+        {{ end }}
+      </section>
+    </div>
+  </main>
+{{ end }}

layouts/index.html

@@ -18,9 +18,9 @@
             <div>
               <header>One API for everything</header>
               <p>
-              Build overlays and tooling with easy access to Twitch alerts, chat
+                Build overlays and tooling with easy access to Twitch alerts,
-              messages and more through a single websocket interface. The API
+                chat messages and more through a single websocket interface. The
-              strives for simplicity with a
+                API strives for simplicity with a
                 <a
                   href="https://github.com/strimertul/kilovolt/blob/main/PROTOCOL.md"
                   >documented protocol</a
@@ -29,7 +29,9 @@
                 <a href="https://github.com/strimertul/kilovolt-client-ts"
                   >Typescript</a
                 >,
-              <a href="https://github.com/strimertul/kilovolt-client-go">Go</a>
+                <a href="https://github.com/strimertul/kilovolt-client-go"
+                  >Go</a
+                >
                 and
                 <a href="https://github.com/strimertul/kilovolt-client-python"
                   >Python</a

layouts/partials/header.html

@@ -4,9 +4,23 @@
     strimertül
   </div>
   <nav>
-    <a href='{{ relURL "" }}'>Overview</a>
+    <a
-    <!-- <a href='{{ relURL "guide" }}'>Guide</a> -->
+      href="{{ relURL "" }}"
-    <!-- <a href='{{ relURL "api" }}'>API reference</a> -->
+      {{ if .IsHome }}class="current"{{ end }}
+      >Overview</a
+    >
+    {{ $currentPage := . }}
+    {{ $section := .Site.GetPage $currentPage.Section }}
+    {{ range .Site.Menus.main }}
+      <a
+        class="navbar-item {{ if $section.IsMenuCurrent "main" . }}
+          current
+        {{ end }}"
+        href="{{ .URL | absLangURL | safeURL }}"
+      >
+        {{ .Name }}
+      </a>
+    {{ end }}
     <a href="https://github.com/strimertul/strimertul">GitHub</a>
   </nav>
 </header>

package-lock.json

@@ -0,0 +1,79 @@
+{
+  "name": "website",
+  "version": "1.0.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "website",
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "prettier": "^2.8.4",
+        "prettier-plugin-go-template": "^0.0.13"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz",
+      "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-go-template": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-go-template/-/prettier-plugin-go-template-0.0.13.tgz",
+      "integrity": "sha512-gG/xT5kd+kCzoMaTchXvdfBdsunyRCV6G8cgdPGPd2V5JGGKXUG7SjzBKU7jaGh2RTeblcAdBb/E+S/duOAMsA==",
+      "dev": true,
+      "dependencies": {
+        "ulid": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "prettier": "^2.0.0"
+      }
+    },
+    "node_modules/ulid": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/ulid/-/ulid-2.3.0.tgz",
+      "integrity": "sha512-keqHubrlpvT6G2wH0OEfSW4mquYRcbe/J8NMmveoQOjUqmo+hXtO+ORCpWhdbZ7k72UtY61BL7haGxW6enBnjw==",
+      "dev": true,
+      "bin": {
+        "ulid": "bin/cli.js"
+      }
+    }
+  },
+  "dependencies": {
+    "prettier": {
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz",
+      "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==",
+      "dev": true
+    },
+    "prettier-plugin-go-template": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-go-template/-/prettier-plugin-go-template-0.0.13.tgz",
+      "integrity": "sha512-gG/xT5kd+kCzoMaTchXvdfBdsunyRCV6G8cgdPGPd2V5JGGKXUG7SjzBKU7jaGh2RTeblcAdBb/E+S/duOAMsA==",
+      "dev": true,
+      "requires": {
+        "ulid": "^2.3.0"
+      }
+    },
+    "ulid": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/ulid/-/ulid-2.3.0.tgz",
+      "integrity": "sha512-keqHubrlpvT6G2wH0OEfSW4mquYRcbe/J8NMmveoQOjUqmo+hXtO+ORCpWhdbZ7k72UtY61BL7haGxW6enBnjw==",
+      "dev": true
+    }
+  }
+}

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "website",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com-ash:strimertul/strimertul.github.io.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "prettier": "^2.8.4",
+    "prettier-plugin-go-template": "^0.0.13"
+  }
+}

themes/strimertul/assets/scss/api.scss

@@ -0,0 +1,104 @@
+.apidocs {
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 250px 1fr;
+  @media only screen and (max-width: $mobile) {
+    grid-template-columns: 1fr;
+    & > nav {
+      display: none;
+    }
+  }
+  & > nav,
+  & > .doc {
+    grid-row: 1;
+    padding: 1rem;
+  }
+  & > nav {
+    padding: 0;
+    grid-column: 1;
+    ul {
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+      li {
+        display: flex;
+        align-items: stretch;
+        justify-content: stretch;
+        transition: all 100ms;
+        &:nth-child(odd) {
+          background-color: rgba(255, 255, 255, 0.02);
+        }
+        &:hover {
+          background-color: rgba(255, 255, 255, 0.05);
+        }
+        a {
+          flex: 1;
+          padding: 0.5rem;
+          color: $teal10;
+        }
+        a:hover {
+          color: $teal12;
+        }
+      }
+    }
+  }
+  & > .doc {
+    grid-column: 2;
+  }
+  .monotitle {
+    font-family: "Iosevka Web", monospace;
+  }
+  .reference {
+    .api {
+      padding-bottom: 15px;
+      .tag {
+        background-color: #5699e1;
+        color: rgb(239, 245, 249);
+        font-size: 12px;
+        text-transform: uppercase;
+        display: inline-block;
+        padding: 3px 5px;
+        border-radius: 8px;
+        &.rpc {
+          background-color: #8e56e1;
+        }
+        &.event {
+          background-color: #018937;
+        }
+        &.history {
+          background-color: #037f88;
+        }
+      }
+    }
+  }
+}
+
+.schema {
+  margin-top: 1rem;
+  .nameblock {
+    display: none;
+  }
+  li {
+    list-style-type: none;
+    & > code > .nameblock {
+      display: inline-flex;
+      & > .name {
+        &::before,
+        &::after {
+          content: '"';
+        }
+      }
+    }
+  }
+  ul {
+    padding: 0;
+    margin: 0;
+    margin-left: 2rem;
+  }
+  .name {
+    color: $yellow11;
+  }
+  .kind {
+    color: $grass10;
+  }
+}

themes/strimertul/assets/scss/landing.scss

@@ -1,9 +1,4 @@
 .landing {
-  .maxw {
-    max-width: 1000px;
-    margin: 0 auto;
-    width: 100%;
-  }
   .flex {
     display: flex;
     gap: 30px;

themes/strimertul/assets/scss/layout.scss

@@ -6,6 +6,12 @@ body {
   padding: 0;
 }
 
+.maxw {
+  max-width: 1000px;
+  margin: 0 auto;
+  width: 100%;
+}
+
 a,
 a:visited {
   color: $teal11;
@@ -44,12 +50,18 @@ p {
       padding: 5px 14px;
       text-decoration: none;
       transition: all 60ms;
+      &.current {
+        background: $gray1;
+        pointer-events: none;
+      }
+      &:not(.current) {
         &:hover {
           background: $gray3;
           box-shadow: inset 0 -2px $teal9;
         }
       }
     }
+  }
 
   @media only screen and (max-width: $mobile) {
     flex-direction: column;

themes/strimertul/assets/scss/main.scss

@@ -1,6 +1,8 @@
 @import "normalize.scss";
 @import url("https://rsms.me/inter/inter.css");
+@import url("https://iosevka-webfonts.github.io/iosevka/iosevka.css");
 
 @import "_vars.scss";
 @import "layout.scss";
 @import "landing.scss";
+@import "api.scss";

themes/strimertul/layouts/_default/baseof.html

@@ -4,8 +4,8 @@
   <body>
     <main>
       <div class="content">
-        {{- partial "header.html" . -}} {{- block "main" . }}{{- end }} {{-
+        {{- partial "header.html" . -}} {{- block "main" . }}{{- end }}
-        partial "footer.html" . -}}
+        {{- partial "footer.html" . -}}
       </div>
     </main>
   </body>

themes/strimertul/layouts/_default/list.html

@@ -1,4 +1,5 @@
 {{ define "main" }}
+<main class="single maxw">
 <h1>{{ .Title }}</h1>
 {{ range .Pages.ByPublishDate.Reverse }}
 <p>
@@ -8,4 +9,5 @@
     </a>
 </p>
 {{ end }}
+</main>
 {{ end }}

themes/strimertul/layouts/_default/single.html

@@ -1,4 +1,5 @@
 {{ define "main" }}
+<main class="single maxw">
   <h1>{{ .Title }}</h1>
   {{ with .Date }}
   <section class="meta">
@@ -6,3 +7,4 @@
     }}| Last modified on {{.Lastmod | time.Format "2006-01-02" }} {{ end }}
   </section>
   {{ end }} {{ .Content }} {{ end }}
+</main>

themes/strimertul/layouts/partials/head.html

@@ -1,12 +1,17 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  {{ $title := print .Site.Title " | " .Title }} {{ if .IsHome }}{{ $title =
+  {{ $title := print .Site.Title " | " .Title }}
-  .Site.Title }}{{ end }}
+  {{ if .IsHome }}
+    {{ $title =
+      .Site.Title
+    }}
+  {{ end }}
   <title>{{ $title }}</title>
   {{ $style := resources.Get "scss/main.scss" | resources.ToCSS (dict
     "targetPath" "css/main.css" "enableSourceMap" true ) | minify |
-  resources.Fingerprint }}
+    resources.Fingerprint
+  }}
   <style>
     body {
       background-color: hsl(0, 0%, 8.5%);