Deploying to gh-pages from @ 38d1851 🚀

BarryCarlyon · Jul 19, 2023 · 10176b6 · 10176b6
1 parent 61668c0
commit 10176b6
Show file tree

Hide file tree

Showing 53 changed files with 11,599 additions and 0 deletions.
diff --git a/examples/auth_code_no_server/index.html b/examples/auth_code_no_server/index.html
@@ -0,0 +1,58 @@
+<html>
+<head>
+    <title>Authentication with out a server | Template</title>
+    <link rel="stylesheet" href="/twitch_misc/style.css" />
+    <style>
+        input[type="text"] {
+            width: 300px;
+        }
+        input[type="submit"] {
+            background: rebeccapurple;
+            padding: 3px;
+        ]
+    </style>
+    <script src="https://embed.twitch.tv/embed/v1.js"></script>
+</head>
+<body>
+    <p>This example is the "web side" of "OAuth authorization code flow" without a server.</p>
+    <p>Hnady for scripts on a raspberry pi, or server thats not practical to spool up a web server on to handle the ?code return.</p>
+    <p>It's not disimilar to how some of the Google Auth node examples work, you start a script, the script goes "open this URL in a browser", then you are given the ?code to copy paste into the script and the script fetchs the token and refresh token</p>
+
+    <form action="https://id.twitch.tv/oauth2/authorize" method="GET">
+        <fieldset>
+            <div id="code" style="display: none;">
+                <p>Copy and past this code to your script</p>
+                <input type="text" name="the_code" id="the_code" value="" readonly />
+            </div>
+
+            <input type="hidden" name="redirect_uri" value="https://barrycarlyon.github.io/twitch_misc/examples/auth_code_no_server/" />
+            <input type="hidden" name="response_type" value="code" />
+
+            <div id="rest_of_form">
+                <div>
+                    <label>ClientID</label>
+                    <input type="text" name="client_id" id="client_id" />
+                </div>
+                <div>
+                    <label>Scopes</label>
+                    <input type="text" name="scopes" id="scopes" value="user:read:email" />
+                </div>
+
+                <div>
+                    <input type="submit" value="Login with Twitch" />
+                </div>
+            </div>
+        </fieldset>
+    </form>
+
+    <script type="text/javascript">
+        const urlParams = new URLSearchParams(window.location.search);
+        const code = urlParams.get('code');
+        if (code && code.length) {
+            document.getElementById('the_code').value = code;
+            document.getElementById('code').style.display = 'block';
+            document.getElementById('rest_of_form').style.display = 'none';
+        }
+    </script>
+</body>
+</html>
diff --git a/examples/browse_categories/README.md b/examples/browse_categories/README.md
@@ -0,0 +1,48 @@
+## What is this example
+
+This is a very rough example of how to build a page which collects the data needed to generate [The Directory](https://www.twitch.tv/directory)
+
+It uses Implicit auth to obtain a token, but this is just for the [GitHub pages demo](https://barrycarlyon.github.io/twitch_misc/examples/browse_categories/).
+
+If you are building this yourself and as a "server" application, you can use any kind of token as it's all public data.
+
+Normally for a server solution (you first wouldn't be doing it client side or with fetch), you'd normally use a [Client Credentaisl/App Access/Server to Server token](https://dev.twitch.tv/docs/authentication/getting-tokens-oauth#oauth-client-credentials-flow)
+
+## TRY THIS EXAMPLE NOW!
+
+This example is also available via GitHub Pages!
+
+Give it a [whirl here](https://barrycarlyon.github.io/twitch_misc/examples/browse_categories/)
+
+## Reference Documentation
+
+- [OAuth Implicit Code Flow](https://dev.twitch.tv/docs/authentication/getting-tokens-oauth#oauth-implicit-code-flow)
+- [Get Top Games](https://dev.twitch.tv/docs/api/reference#get-top-games)
+- [Get Streams](https://dev.twitch.tv/docs/api/reference#get-streams) - Using GameID's to filter
+
+## But what about rate limits?
+
+This example runs in a browser and we are using implicit auth to get a token to use.
+As a result we are using frontend JS to make the API calls, and browsers will limit the number of requests made to the same domain (api.twitch.tv in this example), so we can't "hammer" enough to get close to the rate limit.
+
+But that is something to consider if you are making these calls server side.
+
+## Setting up the config
+
+- Visit [Twitch Dev Console](https://dev.twitch.tv/console/)
+- Visit Applications
+- Manage your Application, or create one if you don't have one
+- Copy the Client ID into `client_id` JavaScript Variable
+- You'll need to throw this webpage into a website somewhere, and update the `redirect` in the html file and on the dev console accordingly.
+
+## Running the example
+
+If you have PHP installed
+
+> sudo php -S 127.0.0.1:80
+
+or just throw the code up on a webpage somewhere
+
+## Screenshot
+
+![Example](example.png)
diff --git a/examples/browse_categories/example.png b/examples/browse_categories/example.png
diff --git a/examples/browse_categories/index.html b/examples/browse_categories/index.html
@@ -0,0 +1,168 @@
+<html>
+<head>
+    <title>Browser Categories | Twitch API Example</title>
+    <link rel="stylesheet" href="/twitch_misc/style.css" />
+</head>
+<body>
+    <p>This example first uses <a href="https://dev.twitch.tv/docs/authentication/getting-tokens-oauth#oauth-implicit-code-flow" target="_blank">Implicit Auth</a> to get a token to use then will return a page similar to <a href="https://www.twitch.tv/directory" target="_blank">The Directorty</a>.  Generally calls will be done/cached server side with an <a href="https://dev.twitch.tv/docs/authentication/getting-tokens-oauth#oauth-client-credentials-flow" target="_blank">App Access Token</a></p>
+
+    <p>Get the code for this example on <a href="https://github.com/BarryCarlyon/twitch_misc/tree/main/examples/browse_categories">Github</a> or just View the source instead</p>
+
+    <p>After authenticating to get a Key, it calls <a href="https://dev.twitch.tv/docs/api/reference#get-top-games" target="_blank">Get Top Games</a> then calls the first few pages of <a href="https://dev.twitch.tv/docs/api/reference#get-streams" target="_blank">Get Streams</a> for that game to get an approx viewer count.</p>
+
+    <a href="" id="authorize" target="barrysgithubtwitchauth">Authorize</a>
+    <div id="loading"></div>
+
+    <h3>Page Loading Status</h3>
+
+    <p>Status output as each page of streams for that gameID loads</p>
+    <table id="loader">
+        <tr>
+            <th>GameID</th>
+            <th>Status</th>
+            <th>1</th>
+            <th>2</th>
+            <th>3</th>
+            <th>4</th>
+            <th>...</th>
+        </tr>
+    </table>
+
+    <h3>The Directory</h3>
+    <table id="categories"></table>
+
+    <script type="text/javascript">
+        // go populate this with a client_id
+        var client_id = 'hozgh446gdilj5knsrsxxz8tahr3koz';
+        var redirect = 'https://barrycarlyon.github.io/twitch_misc/';
+        // setup a memory space for the token
+        var access_token = '';
+
+        document.getElementById('authorize').setAttribute('href', 'https://id.twitch.tv/oauth2/authorize?client_id=' + client_id + '&redirect_uri=' + encodeURIComponent(redirect) + '&response_type=token')
+
+        function processToken(token) {
+            access_token = token;
+
+            document.getElementById('loading').textContent = 'Loading Categories';
+
+            // Get top 20 categories
+            fetch(
+                'https://api.twitch.tv/helix/games/top?first=20',
+                {
+                    "headers": {
+                        "Client-ID": client_id,
+                        "Authorization": "Bearer " + access_token
+                    }
+                }
+            )
+            .then(resp => resp.json())
+            .then(resp => {
+                var tr = false;
+
+                document.getElementById('loading').textContent = 'Got ' + resp.data.length + ' Categories';
+
+                // dumb table maker
+                for (var x=0;x<resp.data.length;x++) {
+                    var r = document.createElement('tr');
+                    r.setAttribute('id', 'loader_row_' + resp.data[x].id);
+                    document.getElementById('loader').append(r);
+
+                    var d = document.createElement('td');
+                    d.textContent = resp.data[x].id;
+                    r.append(d);
+                    var d = document.createElement('td');
+                    d.setAttribute('id', 'loader_' + resp.data[x].id);
+                    r.append(d);
+
+                    if (!tr || (x % 10) === 0) {
+                        tr = document.createElement('tr');
+                    }
+                    document.getElementById('categories').append(tr);
+
+                    var td = document.createElement('td');
+                    td.style.textAlign = 'center';
+                    tr.append(td);
+
+                    var img = document.createElement('img');
+
+                    // how to handle image sizing
+                    // substitute {width} and {height} as needed
+                    //img.setAttribute('src', resp.data[x].box_art_url.replace('{width}x{height}', '285x380'));
+                    img.setAttribute('src', resp.data[x].box_art_url.replace('{width}x{height}', '100x150'));
+
+                    td.append(img);
+
+                    var p = document.createElement('p');
+                    p.textContent = resp.data[x].name;
+                    td.append(p);
+
+                    var d = document.createElement('span');
+                    d.setAttribute('id', 'count_' + resp.data[x].id);
+                    d.textContent = '0';
+                    td.append(d);
+                    var d = document.createElement('span');
+                    d.textContent = ' viewers';
+                    td.append(d);
+
+                    // parraelelelellle call
+                    fetchStreams(resp.data[x].id);
+                }
+            })
+            .catch(err => {
+                console.log(err);
+                document.getElementById('loading').textContent = 'Something went wrong';
+            });
+        }
+
+        // max number of pages to stop
+        // you don't want to go too deep
+        // as in the first 20/30/50 pages you'll collect MOST of the statistically significant channels
+        // to get an approximation of the category
+        var limit = 50;
+        function fetchStreams(game_id, page, after, tot) {
+            page = page ? page : 0;
+            document.getElementById('loader_' + game_id).textContent = 'Loading Page: ' + page + ' Current ' + tot;
+            fetch(
+                'https://api.twitch.tv/helix/streams?first=100&game_id=' + game_id + (after ? '&after=' + after : ''),
+                {
+                    "headers": {
+                        "Client-ID": client_id,
+                        "Authorization": "Bearer " + access_token
+                    }
+                }
+            )
+            .then(resp => resp.json())
+            .then(resp => {
+                document.getElementById('loader_' + game_id).textContent = 'Processing Page: ' + page;
+
+                var total = parseInt(document.getElementById('count_' + game_id).textContent);
+                for (var x=0;x<resp.data.length;x++) {
+                    total += resp.data[x].viewer_count;
+                }
+                document.getElementById('count_' + game_id).textContent = total;
+
+                var d = document.createElement('td');
+                d.textContent = resp.data.length;
+                document.getElementById('loader_row_' + game_id).append(d);
+
+                // loop if we got a cursor
+                if (resp.hasOwnProperty('pagination') && resp.pagination.hasOwnProperty('cursor')) {
+                    page++;
+                    // do a page limit check
+                    if (page >= limit) {
+                        document.getElementById('loader_' + game_id).textContent = 'Stopped at Page: ' + page + ' - ' + resp.data.length;
+                        return;
+                    }
+                    fetchStreams(game_id, page, resp.pagination.cursor, total);
+                } else {
+                    document.getElementById('loader_' + game_id).textContent = 'Last Page: ' + page + ' - ' + resp.data.length;
+                }
+            })
+            .catch(err => {
+                console.log(err);
+                document.getElementById('loading').textContent = 'Something went wrong';
+            });
+        }
+    </script>
+</body>
+</html>
diff --git a/examples/calendar/README.md b/examples/calendar/README.md
@@ -0,0 +1,51 @@
+## What is this example
+
+This is an example for just poking the [Calendar/Schedule](https://dev.twitch.tv/docs/api/reference#get-channel-stream-schedule) part of the Twitch API
+
+It uses Implicit auth to obtain a token, but this is just for the [GitHub pages demo](https://barrycarlyon.github.io/twitch_misc/examples/calendar/).
+
+If you are building this yourself and as a "server" application, you can use any kind of token as it's all public data.
+
+Normally for a server solution (you first wouldn't be doing it client side or with fetch), you'd normally use a [Client Credentaisl/App Access/Server to Server token](https://dev.twitch.tv/docs/authentication/getting-tokens-oauth#oauth-client-credentials-flow)
+
+This example generates a QR code to the iCalendar URL, the Javascript library [davidshimjs/qrcodejs](https://github.com/davidshimjs/qrcodejs) is used for this.
+
+## TRY THIS EXAMPLE NOW!
+
+This example is also available via GitHub Pages!
+
+Give it a [whirl here](https://barrycarlyon.github.io/twitch_misc/examples/calendar/)
+
+## Reference Documentation
+
+- [OAuth Implicit Code Flow](https://dev.twitch.tv/docs/authentication/getting-tokens-oauth#oauth-implicit-code-flow)
+- [Get Channel Stream Schedule](https://dev.twitch.tv/docs/api/reference#get-channel-stream-schedule)
+- [Get Channel iCalendar](https://dev.twitch.tv/docs/api/reference#get-channel-icalendar)
+- [Get Users](https://dev.twitch.tv/docs/api/reference#get-users) - For Converting `logins` to `user_ids`
+
+## But what about rate limits?
+
+This example runs in a browser and we are using implicit auth to get a token to use.
+As a result we are using frontend JS to make the API calls, and browsers will limit the number of requests made to the same domain (api.twitch.tv in this example), so we can't "hammer" enough to get close to the rate limit.
+
+But that is something to consider if you are making these calls server side.
+
+## Setting up the config
+
+- Visit [Twitch Dev Console](https://dev.twitch.tv/console/)
+- Visit Applications
+- Manage your Application, or create one if you don't have one
+- Copy the Client ID into `client_id` JavaScript Variable
+- You'll need to throw this webpage into a website somewhere, and update the `redirect` in the html file and on the dev console accordingly.
+
+## Running the example
+
+If you have PHP installed
+
+> sudo php -S 127.0.0.1:80
+
+or just throw the code up on a webpage somewhere
+
+## Screenshot
+
+![Example](example.png)
diff --git a/examples/calendar/example.png b/examples/calendar/example.png