feat: add voices/speak commands and distinguish members/subscriber only commands from the others

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 <code>!speak</code> command.",
+    aliases: ["!voices"],
+    subOrMemberOnly: true,
+  },
+  {
+    name: "Speak",
+    description: "Trigger a text-to-speech message with voice of your choice. i.e. <code>!speak &lt;voice_name&gt; &lt;msg&gt;</code>",
+    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"],
-  },
+    subOrMemberOnly: false,
-  {
-    name: "Tangled",
-    description: "Get the link to my Tangled profile.",
-    aliases: ["!tangled"],
   },
   {
     name: "LinkedIn",
     description: "Get the link to my LinkedIn profile.",
     aliases: ["!li", "!linkedin"],
-  },
+    subOrMemberOnly: false,
-  {
-    name: "Telegram",
-    description: "Get the invite link to my Telegram channel.",
-    aliases: ["!tg", "!telegram"],
   },
   {
     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*/ `
-    <div class="command-card">
+    <div class="command-card${command.subOrMemberOnly ? ' sub-or-member-only' : ''}">
       <div class="left">
         <div class="name">${command.name}</div>
       </div>

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,12 +170,13 @@ main {
 .copy-button .fa-copy {
   display: block;
 }
+
 .copy-button .fa-check {
   display: none;
 }
 
 .copy-button.copied {
-  color: #89D185;
+  color: #89d185;
   pointer-events: none;
 }