add description to strimertul api page

This commit is contained in:
Ash Keel 2023-11-04 13:19:20 +01:00
parent e49e35203f
commit a677b3755f
No known key found for this signature in database
GPG Key ID: 53A9E9A6035DD109
5 changed files with 189 additions and 2 deletions

3
.gitignore vendored
View File

@ -7,6 +7,9 @@ hugo_stats.json
# I HATE YOU PRETTIER I HATE YOU SO MUCH
node_modules
# Stinky IDEs
.idea
# Executable may be added to repository
hugo.exe
hugo.darwin

View File

@ -4,4 +4,12 @@ title: API reference
weight: 100
---
TODO Talk about kilovolt and explain event and RPCs
You can interact with any part of strimertül through its API. In fact the main UI of strimertül is just a single page application that accesses the service through the API itself (with a couple shortcuts to bypass authentication), this means almost anything you can access through the UI you can access through the API!
## Kilovolt
The strimertül's API is a [Kilovolt](https://github.com/strimertul/kilovolt) server, a pub/sub key-value store accessible via websocket. Check [this repository](https://github.com/strimertul/kilovolt-clients) for a list of officially supported kilovolt clients (or submit your own). You should be able to easily build a client yourself by just creating a websocket connection and using the [Kilovolt protocol](https://github.com/strimertul/kilovolt/blob/main/PROTOCOL.md).
## Available keys/RPC/events
To check what keys you can access on strimertül, click on the menu entry with your strimertül version (or the closest one to it).

View File

@ -1,7 +1,7 @@
---
menu: apiversions
title: v3.1.x
title: v3.1 - v3.3
version: v31
aliases:
- latest

View File

@ -11,6 +11,7 @@
</ul>
</nav>
<div class="doc">
<header><h1>API documentation</h1></header>
<section class="copy">{{ .Content }}</section>
</div>
</main>

View File

@ -0,0 +1,175 @@
{{ define "main" }}
<main class="landing">
<section class="hero maxw">
<div class="hero-copy">
<h1>The streaming companion for power users</h1>
<p>
strimertül is a free and open source tool to add to your Twitch
streams for creating powerful overlays and power-up the viewer
interaction!
</p>
<div id="download">
<noscript>
<a href="https://github.com/strimertul/strimertul/releases/latest">
Check out the latest version on GitHub
</a>
</noscript>
<div class="hidden" id="download-template">
<h2>
Latest stable release:
<a href="https://github.com/strimertul/strimertul/releases/latest"
><span data-field="name"></span> (<time data-field="date"></time
>)</a
>
</h2>
<div class="download-list"><b>Downloads:</b></div>
</div>
</div>
<script>
const platforms = [
{
filter: ".exe",
name: "Windows 64-bit",
},
{
filter: ".dmg",
name: "macOS Universal",
},
{
filter: "linux",
name: "Linux AMD64",
},
];
(async function () {
const releaseblock = document.getElementById("download-template");
const latest = await (
await fetch(
"https://api.github.com/repos/strimertul/strimertul/releases/latest"
)
).json();
// Poor's man angularjs
const data = {
...latest,
date: new Date(latest.published_at).toLocaleDateString(),
};
releaseblock.querySelectorAll("*[data-field]").forEach((el) => {
const { field } = el.dataset;
if (field in data) {
el.innerHTML = data[field];
}
});
// Make those links
const downloadLinks = releaseblock.querySelector(".download-list");
latest.assets
.map((asset) => [
platforms.findIndex(({ filter }) =>
asset.name.includes(filter)
),
asset.browser_download_url,
])
.filter(([index]) => index >= 0)
.sort(([a], [b]) => a - b)
.forEach(([index, url]) => {
const link = document.createElement("a");
link.classList.add("download-link");
link.href = url;
link.appendChild(
document.createTextNode(platforms[index].name)
);
downloadLinks.appendChild(link);
});
releaseblock.classList.remove("hidden");
})();
</script>
</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>
</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>
</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 }}