Commit 775f243a authored by SpinShare's avatar SpinShare

slight design changes

parent be2704f2
......@@ -19,6 +19,12 @@
<div class="page-wrapper with-navbar with-sidebar">
<nav class="navbar">
<div class="navbar-content">
<button class="btn btn-action" type="button" onclick="halfmoon.toggleSidebar()">
<i class="mdi mdi-menu" aria-hidden="true"></i>
<span class="sr-only">Toggle sidebar</span>
</button>
</div>
<a href="#" class="navbar-brand">
<img class="hidden-lm" src="https://spinsha.re/assets/img/logo_colored_ondark.svg" />
<img class="hidden-dm" src="https://spinsha.re/assets/img/logo_colored_onwhite.svg" />
......
......@@ -19,6 +19,12 @@
<div class="page-wrapper with-navbar with-sidebar">
<nav class="navbar">
<div class="navbar-content">
<button class="btn btn-action" type="button" onclick="halfmoon.toggleSidebar()">
<i class="mdi mdi-menu" aria-hidden="true"></i>
<span class="sr-only">Toggle sidebar</span>
</button>
</div>
<a href="#" class="navbar-brand">
<img class="hidden-lm" src="https://spinsha.re/assets/img/logo_colored_ondark.svg" />
<img class="hidden-dm" src="https://spinsha.re/assets/img/logo_colored_onwhite.svg" />
......@@ -107,58 +113,60 @@
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-lg-7">
<div class="content">
<div class="content" id="introduction">
<h1 class="content-title">
Connect
</h1>
<div class="card" id="introduction">
<h2 class="card-title">Introduction</h2>
<p>This document outlines how to connect a SpinShare userprofile with your application and how you can use this connection to perform user actions such as creating reviews or adding charts to playlists.</p>
</div>
<div class="card" id="terminology">
<h2 class="card-title">Terminology</h2>
Introduction
</h1>
<p>This document outlines how to connect a SpinShare userprofile with your application and how you can use this connection to perform user actions such as creating reviews or adding charts to playlists.</p>
</div>
<div class="content" id="terminology">
<h1 class="content-title">
Terminology
</h1>
<table class="table table-bordered">
<tr>
<th>User</th>
<td>A "User" is a SpinShare userprofile.</td>
</tr>
<tr>
<th>ConnectApp</th>
<td>A "ConnectApp" is your application, bot or whatever.</td>
</tr>
<tr>
<th>Connection</th>
<td>A "Connection" is a relationship between a ConnectApp and a User. A User can always revoke access to a ConnectApp by going into the usersettings on SpinShare.</td>
</tr>
<tr>
<th>ConnectCode</th>
<td>A "ConnectCode" is a 6 character code that is used for establishing the connection between a User and a ConnectApp. This code will change every 15 seconds as long as the user is on the SpinShare connect page.</td>
</tr>
<tr>
<th>ConnectToken</th>
<td>A "ConnectToken" is a series of characters used along with your ApiKey to verify you are allowed to perform certain actions and ping certain api endpoints. This token is valid until the user revokes access.</td>
</tr>
</table>
</div>
<div class="card" id="creating-a-connection">
<h2 class="card-title">Creating a Connection</h2>
<div class="alert alert-secondary" role="alert">
<h4 class="alert-heading">Attention</h4>
API access is handled privately as of now. Please refer to the developers on the SpinShare Discord to receive API access.
</div>
<table class="table table-bordered">
<tr>
<th>User</th>
<td>A "User" is a SpinShare userprofile.</td>
</tr>
<tr>
<th>ConnectApp</th>
<td>A "ConnectApp" is your application, bot or whatever.</td>
</tr>
<tr>
<th>Connection</th>
<td>A "Connection" is a relationship between a ConnectApp and a User. A User can always revoke access to a ConnectApp by going into the usersettings on SpinShare.</td>
</tr>
<tr>
<th>ConnectCode</th>
<td>A "ConnectCode" is a 6 character code that is used for establishing the connection between a User and a ConnectApp. This code will change every 15 seconds as long as the user is on the SpinShare connect page.</td>
</tr>
<tr>
<th>ConnectToken</th>
<td>A "ConnectToken" is a series of characters used along with your ApiKey to verify you are allowed to perform certain actions and ping certain api endpoints. This token is valid until the user revokes access.</td>
</tr>
</table>
</div>
<p>The SpinShare API does not consume login credentials for protected API endpoints but rather a simple apikey/token solution. Users have to connect to a ConnectApp once by inputting a 6 character long ConnectCode that changes every 15 seconds.</p>
<strong>Steps to establish a Connection</strong>
<p>Prompt the user to input their connect code. The code can be found on within the profile settings under the "Connect" tab.</p>
<p>Put the ConnectCode through the <a href="#getting-a-token">Getting a Token</a> API endpoint along with your ApiKey to generate a ConnectToken.</p>
<p>Save the ConnectToken locally and use it for protected API endpoints. If you need to verify if your ConnectToken is still valid, you can use the <a href="#validating-a-token">Validating a Token</a> API endpoint.</p>
</div>
<div class="content" id="creating-a-connection">
<h1 class="content-title">
Creating a Connection
</h1>
<div class="alert alert-secondary" role="alert">
<h4 class="alert-heading">Attention</h4>
API access is handled privately as of now. Please refer to the developers on the SpinShare Discord to receive API access.
</div>
<p>The SpinShare API does not consume login credentials for protected API endpoints but rather a simple apikey/token solution. Users have to connect to a ConnectApp once by inputting a 6 character long ConnectCode that changes every 15 seconds.</p>
<strong>Steps to establish a Connection</strong>
<p>Prompt the user to input their connect code. The code can be found on within the profile settings under the "Connect" tab.</p>
<p>Put the ConnectCode through the <a href="#getting-a-token">Getting a Token</a> API endpoint along with your ApiKey to generate a ConnectToken.</p>
<p>Save the ConnectToken locally and use it for protected API endpoints. If you need to verify if your ConnectToken is still valid, you can use the <a href="#validating-a-token">Validating a Token</a> API endpoint.</p>
</div>
<div class="content">
<div class="card" id="getting-a-token">
<h2 class="card-title">Getting a Token</h2>
<p>Returns a ConnectToken.</p>
......
......@@ -19,6 +19,12 @@
<div class="page-wrapper with-navbar with-sidebar">
<nav class="navbar">
<div class="navbar-content">
<button class="btn btn-action" type="button" onclick="halfmoon.toggleSidebar()">
<i class="mdi mdi-menu" aria-hidden="true"></i>
<span class="sr-only">Toggle sidebar</span>
</button>
</div>
<a href="#" class="navbar-brand">
<img class="hidden-lm" src="https://spinsha.re/assets/img/logo_colored_ondark.svg" />
<img class="hidden-dm" src="https://spinsha.re/assets/img/logo_colored_onwhite.svg" />
......
......@@ -19,6 +19,12 @@
<div class="page-wrapper with-navbar with-sidebar">
<nav class="navbar">
<div class="navbar-content">
<button class="btn btn-action" type="button" onclick="halfmoon.toggleSidebar()">
<i class="mdi mdi-menu" aria-hidden="true"></i>
<span class="sr-only">Toggle sidebar</span>
</button>
</div>
<a href="#" class="navbar-brand">
<img class="hidden-lm" src="https://spinsha.re/assets/img/logo_colored_ondark.svg" />
<img class="hidden-dm" src="https://spinsha.re/assets/img/logo_colored_onwhite.svg" />
......@@ -114,6 +120,13 @@
<p>Welcome to the SpinShare API Documentation! These pages focus on all the data you can access from SpinSha.re to make cool stuff. Whether you're working on a Twitch bot, a mod for the game or anything else helping, we want you to be able to use our platform to make your projects even better!<br /><br />So what are we waiting for? Let's create something awesome together!</p>
</div>
<div class="content">
<h1 class="content-title">
Support
</h1>
<p>If you need any help implementing the SpinShare API, feel free to ask us anything in the <code class="code">#development</code> channel on our <a href="https://spinsha.re/discord" target="_blank">Discord Server</a>.</p>
</div>
<div class="content">
<h1 class="content-title">
Changelog
......
......@@ -19,6 +19,12 @@
<div class="page-wrapper with-navbar with-sidebar">
<nav class="navbar">
<div class="navbar-content">
<button class="btn btn-action" type="button" onclick="halfmoon.toggleSidebar()">
<i class="mdi mdi-menu" aria-hidden="true"></i>
<span class="sr-only">Toggle sidebar</span>
</button>
</div>
<a href="#" class="navbar-brand">
<img class="hidden-lm" src="https://spinsha.re/assets/img/logo_colored_ondark.svg" />
<img class="hidden-dm" src="https://spinsha.re/assets/img/logo_colored_onwhite.svg" />
......
......@@ -19,6 +19,12 @@
<div class="page-wrapper with-navbar with-sidebar">
<nav class="navbar">
<div class="navbar-content">
<button class="btn btn-action" type="button" onclick="halfmoon.toggleSidebar()">
<i class="mdi mdi-menu" aria-hidden="true"></i>
<span class="sr-only">Toggle sidebar</span>
</button>
</div>
<a href="#" class="navbar-brand">
<img class="hidden-lm" src="https://spinsha.re/assets/img/logo_colored_ondark.svg" />
<img class="hidden-dm" src="https://spinsha.re/assets/img/logo_colored_onwhite.svg" />
......
......@@ -19,6 +19,12 @@
<div class="page-wrapper with-navbar with-sidebar">
<nav class="navbar">
<div class="navbar-content">
<button class="btn btn-action" type="button" onclick="halfmoon.toggleSidebar()">
<i class="mdi mdi-menu" aria-hidden="true"></i>
<span class="sr-only">Toggle sidebar</span>
</button>
</div>
<a href="#" class="navbar-brand">
<img class="hidden-lm" src="https://spinsha.re/assets/img/logo_colored_ondark.svg" />
<img class="hidden-dm" src="https://spinsha.re/assets/img/logo_colored_onwhite.svg" />
......
......@@ -19,6 +19,12 @@
<div class="page-wrapper with-navbar with-sidebar">
<nav class="navbar">
<div class="navbar-content">
<button class="btn btn-action" type="button" onclick="halfmoon.toggleSidebar()">
<i class="mdi mdi-menu" aria-hidden="true"></i>
<span class="sr-only">Toggle sidebar</span>
</button>
</div>
<a href="#" class="navbar-brand">
<img class="hidden-lm" src="https://spinsha.re/assets/img/logo_colored_ondark.svg" />
<img class="hidden-dm" src="https://spinsha.re/assets/img/logo_colored_onwhite.svg" />
......
......@@ -19,6 +19,12 @@
<div class="page-wrapper with-navbar with-sidebar">
<nav class="navbar">
<div class="navbar-content">
<button class="btn btn-action" type="button" onclick="halfmoon.toggleSidebar()">
<i class="mdi mdi-menu" aria-hidden="true"></i>
<span class="sr-only">Toggle sidebar</span>
</button>
</div>
<a href="#" class="navbar-brand">
<img class="hidden-lm" src="https://spinsha.re/assets/img/logo_colored_ondark.svg" />
<img class="hidden-dm" src="https://spinsha.re/assets/img/logo_colored_onwhite.svg" />
......
......@@ -19,6 +19,12 @@
<div class="page-wrapper with-navbar with-sidebar">
<nav class="navbar">
<div class="navbar-content">
<button class="btn btn-action" type="button" onclick="halfmoon.toggleSidebar()">
<i class="mdi mdi-menu" aria-hidden="true"></i>
<span class="sr-only">Toggle sidebar</span>
</button>
</div>
<a href="#" class="navbar-brand">
<img class="hidden-lm" src="https://spinsha.re/assets/img/logo_colored_ondark.svg" />
<img class="hidden-dm" src="https://spinsha.re/assets/img/logo_colored_onwhite.svg" />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment