add templating for api reference

This commit is contained in:
Ash Keel 2023-02-18 01:04:20 +01:00
parent 6093a829c4
commit 59a0b97cbe
No known key found for this signature in database
GPG Key ID: BAD8D93E7314ED3E
18 changed files with 1988 additions and 117 deletions

3
.gitignore vendored
View File

@ -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

11
.prettierrc Normal file
View File

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

6
content/api/_index.md Normal file
View File

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

View File

1539
data/api/v310/api.json Normal file

File diff suppressed because it is too large Load Diff

75
layouts/api/list.html Normal file
View File

@ -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 }}

View File

@ -1,101 +1,103 @@
{{ define "main" }}
<main class="landing">
<section class="hero maxw">
<div class="hero-copy">
<h1>HEY PUT TEXT HERE!</h1>
<div class="download-button">
<a href="https://github.com/strimertul/strimertul/releases/latest">
Download
</a>
</div>
</div>
<div class="screenshots"></div>
</section>
<section class="features">
<article>
<div class="maxw">
<div class="flex">
<div>
<header>One API for everything</header>
<p>
Build overlays and tooling with easy access to Twitch alerts, chat
messages and more through a single websocket interface. The API
strives for simplicity with a
<a
href="https://github.com/strimertul/kilovolt/blob/main/PROTOCOL.md"
>documented protocol</a
>, but there are also officially supported bindings for popular
languages such as
<a href="https://github.com/strimertul/kilovolt-client-ts"
>Typescript</a
>,
<a href="https://github.com/strimertul/kilovolt-client-go">Go</a>
and
<a href="https://github.com/strimertul/kilovolt-client-python"
>Python</a
>.
</p>
</div>
{{ $image := resources.Get "landing/websocket.svg" }}
<img
class="landing-point"
src="{{ $image.RelPermalink }}"
style="width: 200px; padding-left: 20px"
/>
<main class="landing">
<section class="hero maxw">
<div class="hero-copy">
<h1>HEY PUT TEXT HERE!</h1>
<div class="download-button">
<a href="https://github.com/strimertul/strimertul/releases/latest">
Download
</a>
</div>
</div>
</article>
<article>
<div class="maxw">
<div class="flex">
{{ $image := resources.Get "landing/rewards.png" }}
<img class="landing-point" src="{{ $image.RelPermalink }}" />
<div>
<header>No Twitch Affiliate?</header>
<p>
The built-in loyalty system lets regular viewers accrue points,
claim rewards and contribute towards community goals.
</p>
<div class="screenshots"></div>
</section>
<section class="features">
<article>
<div class="maxw">
<div class="flex">
<div>
<header>One API for everything</header>
<p>
Build overlays and tooling with easy access to Twitch alerts,
chat messages and more through a single websocket interface. The
API strives for simplicity with a
<a
href="https://github.com/strimertul/kilovolt/blob/main/PROTOCOL.md"
>documented protocol</a
>, but there are also officially supported bindings for popular
languages such as
<a href="https://github.com/strimertul/kilovolt-client-ts"
>Typescript</a
>,
<a href="https://github.com/strimertul/kilovolt-client-go"
>Go</a
>
and
<a href="https://github.com/strimertul/kilovolt-client-python"
>Python</a
>.
</p>
</div>
{{ $image := resources.Get "landing/websocket.svg" }}
<img
class="landing-point"
src="{{ $image.RelPermalink }}"
style="width: 200px; padding-left: 20px"
/>
</div>
</div>
</div>
</article>
<article>
<div class="maxw">
<div class="flex">
<div class="flex-copy">
<header>Keep total control of your tech</header>
<p>
Strimertül runs completely in your computer and has no remote
components.
</p>
</div>
{{ $image := resources.Get "landing/downloads.png" }}
<img class="landing-point" src="{{ $image.RelPermalink }}" />
</div>
</div>
</article>
<article>
<div class="maxw">
<div class="flex">
{{ $image := resources.Get "landing/AGPLv3_Logo.svg" }}
<img class="landing-point" src="{{ $image.RelPermalink }}" />
<div>
<header>Free and won't turn evil</header>
<p>
strimertül is free and open source under the
<a
href="https://github.com/strimertul/strimertul/blob/master/LICENSE"
>AGPLv3</a
>, a strong
<a href="https://en.wikipedia.org/wiki/Copyleft"
>copyleft license</a
>, meaning we couldn't close it down even if we wanted!
</p>
</article>
<article>
<div class="maxw">
<div class="flex">
{{ $image := resources.Get "landing/rewards.png" }}
<img class="landing-point" src="{{ $image.RelPermalink }}" />
<div>
<header>No Twitch Affiliate?</header>
<p>
The built-in loyalty system lets regular viewers accrue points,
claim rewards and contribute towards community goals.
</p>
</div>
</div>
</div>
</div>
</article>
</section>
</main>
</article>
<article>
<div class="maxw">
<div class="flex">
<div class="flex-copy">
<header>Keep total control of your tech</header>
<p>
Strimertül runs completely in your computer and has no remote
components.
</p>
</div>
{{ $image := resources.Get "landing/downloads.png" }}
<img class="landing-point" src="{{ $image.RelPermalink }}" />
</div>
</div>
</article>
<article>
<div class="maxw">
<div class="flex">
{{ $image := resources.Get "landing/AGPLv3_Logo.svg" }}
<img class="landing-point" src="{{ $image.RelPermalink }}" />
<div>
<header>Free and won't turn evil</header>
<p>
strimertül is free and open source under the
<a
href="https://github.com/strimertul/strimertul/blob/master/LICENSE"
>AGPLv3</a
>, a strong
<a href="https://en.wikipedia.org/wiki/Copyleft"
>copyleft license</a
>, meaning we couldn't close it down even if we wanted!
</p>
</div>
</div>
</div>
</article>
</section>
</main>
{{ end }}

View File

@ -4,9 +4,23 @@
strimertül
</div>
<nav>
<a href='{{ relURL "" }}'>Overview</a>
<!-- <a href='{{ relURL "guide" }}'>Guide</a> -->
<!-- <a href='{{ relURL "api" }}'>API reference</a> -->
<a
href="{{ relURL "" }}"
{{ 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>

79
package-lock.json generated Normal file
View File

@ -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
}
}
}

20
package.json Normal file
View File

@ -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"
}
}

View File

@ -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;
}
}

View File

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

View File

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

View File

@ -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";

View File

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

View File

@ -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 }}

View File

@ -1,8 +1,10 @@
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ with .Date }}
<section class="meta">
Published on {{.Date | time.Format "2006-01-02" }} {{ if (gt .Lastmod .Date)
}}| Last modified on {{.Lastmod | time.Format "2006-01-02" }} {{ end }}
</section>
{{ end }} {{ .Content }} {{ end }}
<main class="single maxw">
<h1>{{ .Title }}</h1>
{{ with .Date }}
<section class="meta">
Published on {{.Date | time.Format "2006-01-02" }} {{ if (gt .Lastmod .Date)
}}| Last modified on {{.Lastmod | time.Format "2006-01-02" }} {{ end }}
</section>
{{ end }} {{ .Content }} {{ end }}
</main>

View File

@ -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 =
.Site.Title }}{{ end }}
{{ $title := print .Site.Title " | " .Title }}
{{ 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 }}
"targetPath" "css/main.css" "enableSourceMap" true ) | minify |
resources.Fingerprint
}}
<style>
body {
background-color: hsl(0, 0%, 8.5%);