From ce76659bbce0defd332cdca195671e53577cf46f Mon Sep 17 00:00:00 2001 From: Stevan Freeborn Date: Sat, 25 Jul 2026 16:57:37 -0500 Subject: [PATCH] feat: add voices/speak commands and distinguish members/subscriber only commands from the others --- src/index.js | 46 +++++++++++++++++++++++++++++++++++----------- src/style.css | 32 ++++++++++++++++++++++++++------ 2 files changed, 61 insertions(+), 17 deletions(-) diff --git a/src/index.js b/src/index.js index 5c780a7..bff8776 100644 --- a/src/index.js +++ b/src/index.js @@ -3,123 +3,147 @@ const COMMANDS = [ name: "Show Support", description: "Feel free to buy me some coffee to support the stream.", aliases: ["!coffee", "!donation", "!dono"], + subOrMemberOnly: false, }, { name: "Topic", description: "Find out what is happening on the stream.", aliases: ["!wtf", "!whatbrodoing"], + subOrMemberOnly: false, + }, + { + name: "Voices", + description: "Find out what voices are available for the !speak command.", + aliases: ["!voices"], + subOrMemberOnly: true, + }, + { + name: "Speak", + description: "Trigger a text-to-speech message with voice of your choice. i.e. !speak <voice_name> <msg>", + aliases: ["!speak", "!say"], + subOrMemberOnly: true, }, { name: "Wrong Screen", description: "Sometimes I forget to switch to the correct scene. Use this command to let me know I've done this.", aliases: ["!screen", "!imblind", "!iamblind", "!talktotheface"], + subOrMemberOnly: false, }, { name: "Lurk", description: "Let chat know you are here, but lurking. We support our fellow lurkers.", aliases: ["!lurk"], + subOrMemberOnly: false, }, { name: "Schedule", description: "Get my stream schedule.", aliases: ["!schedule"], + subOrMemberOnly: false, }, { name: "Lofi Generator", description: "Get the link to the website that I use for my stream music.", aliases: ["!lofi", "!music"], + subOrMemberOnly: false, }, { name: "ZoomIt", description: "Get the link to the tool I use to draw on my screen.", aliases: ["!zoomit"], + subOrMemberOnly: false, }, { name: "Neovim", description: "Get the link to my Neovim configs.", aliases: ["!nvim", "!neovim"], + subOrMemberOnly: false, }, { name: "My Font", description: "Get the link to the Nerd Font I use.", aliases: ["!font", "!nerdfont"], + subOrMemberOnly: false, }, { name: "PowerShell", description: "Get the link to my PowerShell profile.", aliases: ["!pwsh", "!powershell"], + subOrMemberOnly: false, }, { name: "Oh My Posh", description: "Get the link to my Oh My Posh configs.", aliases: ["!omp", "!ohmyposh"], + subOrMemberOnly: false, }, { name: "Member", description: "Get a link to become a member of the YouTube channel.", aliases: ["!member"], + subOrMemberOnly: false, }, { name: "Links", description: "Get a link to all my links.", aliases: ["!links"], + subOrMemberOnly: false, }, { name: "Blog", description: "Get the link to my blog.", aliases: ["!blog"], + subOrMemberOnly: false, }, { name: "Bluesky", description: "Get the link to my Bluesky profile.", aliases: ["!bsky", "!bluesky"], + subOrMemberOnly: false, }, { name: "Bottom", description: "Get the link to the terminal monitor I use.", aliases: ["!btm", "!bottom"], + subOrMemberOnly: false, }, { name: "Discord", description: "Want to chat off stream? Get the invite link to my discord.", aliases: ["!discord"], + subOrMemberOnly: false, }, { name: "GitHub", description: "Get the link to my GitHub profile.", aliases: ["!gh", "!github"], - }, - { - name: "Tangled", - description: "Get the link to my Tangled profile.", - aliases: ["!tangled"], + subOrMemberOnly: false, }, { name: "LinkedIn", description: "Get the link to my LinkedIn profile.", aliases: ["!li", "!linkedin"], - }, - { - name: "Telegram", - description: "Get the invite link to my Telegram channel.", - aliases: ["!tg", "!telegram"], + subOrMemberOnly: false, }, { name: "Twitch", description: "Get the link to my Twitch channel.", aliases: ["!ttv", "!twitch"], + subOrMemberOnly: false, }, { name: "YouTube", description: "Get the link to my YouTube channel.", aliases: ["!yt", "!youtube"], + subOrMemberOnly: false, }, { name: "Commands", description: "Get the link to the list of commands available in chat during a stream.", aliases: ["!help", "!commands"], + subOrMemberOnly: false, }, ]; @@ -142,7 +166,7 @@ function handleContentLoaded() { function CommandListItem(command) { const listItemElement = document.createElement("li"); listItemElement.innerHTML = /*html*/ ` -
+
${command.name}
diff --git a/src/style.css b/src/style.css index e2917d4..78c8321 100644 --- a/src/style.css +++ b/src/style.css @@ -55,16 +55,16 @@ table { :root { --bg-color: #181818; - --text-color: #E4E4E4; + --text-color: #e4e4e4; --accent-color: #b39cd0; - font-family: 'CaskaydiaCove NFM', monospace; + font-family: "CaskaydiaCove NFM", monospace; font-size: 16px; } html, body { - height: 100% + height: 100%; } body { @@ -105,6 +105,26 @@ main { border-radius: 1rem; background-color: #323232; overflow: hidden; + position: relative; +} + +.sub-or-member-only::after { + position: absolute; + right: 0; + top: 0; + padding: 0.5rem; + content: "Members/Subscribers"; + background: #ff0000; + background: linear-gradient(90deg, + rgba(255, 0, 0, 0.75) 0%, + rgba(100, 65, 165, 0.75) 65%); + border-bottom-left-radius: 1rem; +} + +@media (max-width: 600px) { + .sub-or-member-only::after { + content: "Mems/Subs"; + } } .command-card .left { @@ -113,7 +133,6 @@ main { gap: 1rem; } - .command-card .right { display: flex; flex-direction: column; @@ -151,13 +170,14 @@ main { .copy-button .fa-copy { display: block; } + .copy-button .fa-check { display: none; } .copy-button.copied { - color: #89D185; - pointer-events: none; + color: #89d185; + pointer-events: none; } .copy-button.copied .fa-copy {