bot/src/commands/announcement.ts

@@ -11,7 +11,7 @@ import {
   TextInputBuilder,
   TextInputStyle,
 } from "discord.js";
-import { entitledUsers } from "../config/entitlements.js";
+import { naomiId } from "../config/entitlements.js";
 import { errorHandler } from "../utils/errorHandler.js";
 import type { Command } from "../interfaces/command.js";
 
@@ -21,9 +21,10 @@ import type { Command } from "../interfaces/command.js";
  * @param _hikari - Hikari's Discord instance (unused).
  * @param interaction - The command interaction payload from Discord.
  */
+// eslint-disable-next-line max-lines-per-function -- Modal requires many input components
 export const announcement: Command = async(_hikari, interaction) => {
   try {
-    if (!entitledUsers.includes(interaction.user.id)) {
+    if (interaction.user.id !== naomiId) {
       await interaction.reply({
         content:   "This command is restricted to the owner.",
         ephemeral: true,
@@ -41,6 +42,24 @@ export const announcement: Command = async(_hikari, interaction) => {
       setMaxLength(4000).
       setRequired(true);
 
+    const contentInput2 = new TextInputBuilder().
+      setCustomId("content_2").
+      setStyle(TextInputStyle.Paragraph).
+      setMaxLength(4000).
+      setRequired(false);
+
+    const contentInput3 = new TextInputBuilder().
+      setCustomId("content_3").
+      setStyle(TextInputStyle.Paragraph).
+      setMaxLength(4000).
+      setRequired(false);
+
+    const contentInput4 = new TextInputBuilder().
+      setCustomId("content_4").
+      setStyle(TextInputStyle.Paragraph).
+      setMaxLength(4000).
+      setRequired(false);
+
     const categorySelect = new StringSelectMenuBuilder().
       setCustomId("category").
       setPlaceholder("Select a category").
@@ -55,12 +74,27 @@ export const announcement: Command = async(_hikari, interaction) => {
         "Your version of the announcement, to send to the AI for processing.",
       ).
       setTextInputComponent(contentInput);
+    // eslint-disable-next-line stylistic/max-len -- Label chain exceeds line length limit
+    const contentLabel2 = new LabelBuilder().setLabel("Additional Copy (Part 2)").
+      setDescription("Optional continuation of your announcement copy.").
+      setTextInputComponent(contentInput2);
+    // eslint-disable-next-line stylistic/max-len -- Label chain exceeds line length limit
+    const contentLabel3 = new LabelBuilder().setLabel("Additional Copy (Part 3)").
+      setDescription("Optional continuation of your announcement copy.").
+      setTextInputComponent(contentInput3);
+    // eslint-disable-next-line stylistic/max-len -- Label chain exceeds line length limit
+    const contentLabel4 = new LabelBuilder().setLabel("Additional Copy (Part 4)").
+      setDescription("Optional continuation of your announcement copy.").
+      setTextInputComponent(contentInput4);
     const categoryLabel = new LabelBuilder().setLabel("Announcement Category").
       setDescription("The category of the announcement.").
       setStringSelectMenuComponent(categorySelect);
 
     modal.addLabelComponents(
       contentLabel,
+      contentLabel2,
+      contentLabel3,
+      contentLabel4,
       categoryLabel,
     );
 

bot/src/config/entitlements.ts

@@ -3,12 +3,12 @@
  * @license Naomi's Public License
  * @author Naomi Carrigan
  */
+const naomiId = "465650873650118659";
+
 const entitledGuilds = [
   "1354624415861833870",
 ];
 
-const entitledUsers = [
-  "465650873650118659",
-];
+const entitledUsers = [ naomiId ];
 
-export { entitledGuilds, entitledUsers };
+export { entitledGuilds, entitledUsers, naomiId };

bot/src/modules/handleAnnouncementModal.ts

@@ -87,26 +87,37 @@ const buildAnnouncementFiles = (rawPost: RawPost): Array<AttachmentBuilder> => {
  * to the owner's DMs, and replies ephemerally with the platform recap.
  * @param interaction - The modal submit interaction payload from Discord.
  */
+// eslint-disable-next-line max-lines-per-function -- This is a big function.
 export const handleAnnouncementModal = async(
   interaction: ModalSubmitInteraction,
 ): Promise<void> => {
   try {
     await interaction.deferReply({ ephemeral: true });
 
-    const content = interaction.fields.getTextInputValue("content");
+    const content = [
+      interaction.fields.getTextInputValue("content"),
+      interaction.fields.getTextInputValue("content_2"),
+      interaction.fields.getTextInputValue("content_3"),
+      interaction.fields.getTextInputValue("content_4"),
+    ].filter((part) => {
+      return part.length > 0;
+    }).join("\n\n");
     const categoryValues = interaction.fields.getStringSelectValues("category");
     const type = categoryValues[0] ?? "company";
 
-    const response = await fetch("https://hikari.nhcarrigan.com/announcement", {
-      body:    JSON.stringify({ content, type }),
-      headers: {
+    const response = await fetch(
+      "https://hikari.nhcarrigan.com/api/announcement",
+      {
+        body:    JSON.stringify({ content, type }),
+        headers: {
         // eslint-disable-next-line @typescript-eslint/naming-convention -- HTTP header capitalisation convention
-        "Authorization": process.env.ANNOUNCEMENT_TOKEN ?? "",
-        // eslint-disable-next-line @typescript-eslint/naming-convention -- HTTP header naming convention
-        "Content-Type":  "application/json",
+          "Authorization": process.env.ANNOUNCEMENT_TOKEN ?? "",
+          // eslint-disable-next-line @typescript-eslint/naming-convention -- HTTP header naming convention
+          "Content-Type":  "application/json",
+        },
+        method: "POST",
       },
-      method: "POST",
-    });
+    );
 
     if (!response.ok) {
       await interaction.editReply({

bot/src/utils/checkEntitlement.ts

@@ -4,7 +4,7 @@
  * @author Naomi Carrigan
  */
 
-import { entitledGuilds, entitledUsers } from "../config/entitlements.js";
+import { entitledGuilds, naomiId } from "../config/entitlements.js";
 import type { Client, Guild, User } from "discord.js";
 
 /**
@@ -17,7 +17,7 @@ const checkUserEntitlement = async(
   hikari: Client,
   user: User,
 ): Promise<boolean> => {
-  if (entitledUsers.includes(user.id)) {
+  if (user.id === naomiId) {
     return true;
   }
   const entitlements = await hikari.application?.entitlements.fetch({

client/src/app/announcements/announcements.css

@@ -1,11 +1,11 @@
 hr {
   width: 100%;
   border: none;
-  border-top: 1px solid var(--foreground);
+  border-top: 1px solid var(--border);
   margin: 0;
 }
 
-:host ::ng-deep ul{
+:host ::ng-deep ul {
   list-style-type: disc;
   list-style-position: inside;
 }
@@ -15,6 +15,7 @@ hr {
   margin-bottom: 1em;
   width: 90%;
 }
+
 .tag {
   display: inline-block;
   padding: 0 0.5em;
@@ -23,13 +24,13 @@ hr {
 }
 
 .products {
-  background-color: #e0f7fa;
-  color: #006064;
+  background-color: var(--witch-plum);
+  color: var(--witch-moon);
 }
 
 .community {
-  background-color: #e8f5e9;
-  color: #1b5e20;
+  background-color: var(--witch-rose);
+  color: var(--witch-moon);
 }
 
 .date {

client/src/app/home/home.css

@@ -1,99 +1,96 @@
 ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
 
-::ng-deep main{
+::ng-deep main {
   overflow: hidden !important;
   max-width: 100%;
 }
 
 #one {
-    transform: translateY(-200vh);
-    animation: slide-down 2s forwards;
-    font-size: 1.3rem;
+  transform: translateY(-200vh);
+  animation: slide-down 2s forwards;
+  font-size: 1.3rem;
 }
 
 #two {
-    transform: translateY(200vh);
-    animation: slide-up 2s forwards 2s;
+  transform: translateY(200vh);
+  animation: slide-up 2s forwards 2s;
 }
 
 #three {
-    transform: translateX(-200vw);
-    animation: slide-left 2s forwards 4s;
+  transform: translateX(-200vw);
+  animation: slide-left 2s forwards 4s;
 }
 
 #four {
-    transform: translateX(200vw);
-    animation: slide-right 2s forwards 6s;
+  transform: translateX(200vw);
+  animation: slide-right 2s forwards 6s;
 }
 
 #five {
-    transform: translateX(-200vw);
-    animation: slide-left 2s forwards 8s;
+  transform: translateX(-200vw);
+  animation: slide-left 2s forwards 8s;
 }
 
 #six {
-    transform: translateX(200vw);
-    animation: slide-right 2s forwards 10s;
+  transform: translateX(200vw);
+  animation: slide-right 2s forwards 10s;
 }
 
 #seven {
-    transform: translateX(-200vw);
-    animation: slide-left 2s forwards 12s;
+  transform: translateX(-200vw);
+  animation: slide-left 2s forwards 12s;
 }
 
 #fade {
-    opacity: 0;
-    animation: fade-in 2s forwards 14s;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-    align-items: center;
-    flex-wrap: wrap;
+  opacity: 0;
+  animation: fade-in 2s forwards 14s;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 1em;
 }
 
 .btn {
-    display: inline-block;
-    padding: 10px 20px;
-    background-color: var(--foreground);
-    color: var(--background);
-    text-decoration: none;
-    border-radius: 50px;
-    border: 2px solid white;
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: var(--accent);
+  color: var(--witch-moon);
+  text-decoration: none;
+  border-radius: 50px;
+  border: 2px solid var(--border);
 }
 
 .btn:hover {
-    background-color: var(--background);
-    color: var(--foreground);
-    transition: background-color 0.3s, color 0.3s;
+  background-color: var(--highlight);
+  color: var(--foreground);
+  transition: background-color 0.3s, color 0.3s;
 }
 
 @keyframes slide-left {
-    100% { transform: translateX(0%); }
+  100% { transform: translateX(0%); }
 }
 
 @keyframes slide-right {
-    100% { transform: translateX(0%); }
+  100% { transform: translateX(0%); }
 }
 
 @keyframes slide-up {
-    100% { transform: translateY(0%); }
+  100% { transform: translateY(0%); }
 }
 
 @keyframes slide-down {
-    100% { transform: translateY(0%); }
+  100% { transform: translateY(0%); }
 }
 
 @keyframes fade-in {
-    100% { opacity: 1; }
-}
-
-@keyframes background-color {
-    0% { background-color: var(--foreground); }
-    100% { background-color: var(--background); }
+  100% { opacity: 1; }
 }
 
 @media screen and (prefers-reduced-motion: reduce) {

client/src/app/home/home.html

@@ -1,8 +1,9 @@
 <h1>Hi there, I'm Hikari~!</h1>
 <img
-  src="https://cdn.nhcarrigan.com/new-avatars/hikari-full.png"
+  src="https://cdn.nhcarrigan.com/hikari.png"
   alt="Hikari"
   height="250"
+  style="display: block; margin: auto;"
 />
 <p id="one">How may I help you today?</p>
 <p id="two">I can assist you with:</p>

client/src/app/nav/nav.css

@@ -6,11 +6,13 @@ nav {
   height: 40px;
   color: var(--foreground);
   background-color: var(--background);
+  border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-left: 15px;
   padding-right: 15px;
+  z-index: 100;
 }
 
 nav a:not(#logo) {
@@ -34,7 +36,7 @@ img {
 hr {
   width: 100%;
   border: none;
-  border-top: 1px solid var(--foreground);
+  border-top: 1px solid var(--border);
   margin: 0;
 }
 
@@ -50,7 +52,7 @@ hr {
   top: 40px;
   background-color: var(--background);
   color: var(--foreground);
-  border: 1px solid var(--foreground);
+  border: 1px solid var(--border);
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 }
@@ -59,7 +61,6 @@ hr {
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
   text-decoration: none;
   font-size: 2rem;
 }

client/src/app/nav/nav.html

@@ -15,7 +15,9 @@
     <hr />
     <a routerLink="/settings" class="nav-link">Settings</a>
     <hr />
-    <a routerLink="/chat" class="nav-link">Chat</a>
+    <a href="https://chat.nhcarrigan.com" target="_blank" class="nav-link">Chat</a>
+    <hr />
+    <a href="https://support.nhcarrigan.com" target="_blank" class="nav-link">Support</a>
     <hr />
   </div>
   <i class="fa-solid fa-bars" *ngIf="!navOpen" (click)="toggleNav()"></i>

client/src/app/products/products.css

@@ -3,44 +3,44 @@ a.product {
 }
 
 a.product:hover {
-  background-color: var(--background);
+  background-color: var(--highlight);
   color: var(--foreground);
 }
 
 .product:not(a) {
   cursor: default;
-  border: 2px dashed grey;
+  border: 2px dashed var(--witch-silver);
 }
 
 .btn {
-    display: inline-block;
-    padding: 10px 20px;
-    background-color: var(--foreground);
-    color: var(--background);
-    text-decoration: none;
-    border-radius: 50px;
-    border: 2px solid white;
-    font-family: 'OpenDyslexic', monospace;
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: var(--accent);
+  color: var(--witch-moon);
+  text-decoration: none;
+  border-radius: 50px;
+  border: 2px solid var(--border);
 }
 
 .btn:disabled {
-    background-color: var(--background);
-    color: var(--foreground);
+  background-color: var(--witch-plum);
+  color: var(--witch-moon);
+  opacity: 0.6;
 }
 
 .btn:hover {
-    background-color: var(--background);
-    color: var(--foreground);
-    transition: background-color 0.3s, color 0.3s;
+  background-color: var(--highlight);
+  color: var(--foreground);
+  transition: background-color 0.3s, color 0.3s;
 }
 
 .product {
   display: grid;
   grid-template-areas: "logo title icon" "logo description icon";
   grid-template-columns: 100px 1fr auto;
-  background-color: var(--foreground);
-  color: var(--background);
-  border: 2px solid white;
+  background-color: var(--witch-plum);
+  color: var(--witch-moon);
+  border: 2px solid var(--border);
   border-radius: 50px;
   margin-left: 10px;
   margin-right: 10px;
@@ -49,6 +49,14 @@ a.product:hover {
   align-items: center;
 }
 
+.title {
+  color: var(--witch-moon);
+}
+
+.description {
+  color: var(--witch-moon);
+}
+
 .icons {
   grid-area: icon;
   font-size: 2rem;

client/src/app/products/products.html

@@ -1,8 +1,9 @@
 <h1>Products</h1>
 <img
-  src="https://cdn.nhcarrigan.com/new-avatars/hikari-thinking-full.png"
+  src="https://cdn.nhcarrigan.com/hikari.png"
   alt="Hikari"
   height="250"
+  style="display: block; margin: auto;"
 />
 <p>Excellent! What sort of product are you looking for?</p>
 <div class="row">

client/src/app/sanctions/sanctions.css

@@ -1,11 +1,11 @@
 hr {
   width: 100%;
   border: none;
-  border-top: 1px solid var(--foreground);
+  border-top: 1px solid var(--border);
   margin: 0;
 }
 
-:host ::ng-deep ul{
+:host ::ng-deep ul {
   list-style-type: disc;
   list-style-position: inside;
 }
@@ -15,13 +15,14 @@ hr {
   margin-bottom: 1em;
   width: 90%;
 }
+
 .tag {
   display: inline-block;
   padding: 0 0.5em;
   border-radius: 50px;
   font-size: 0.8em;
-  background-color: #e0f7fa;
-  color: #006064;
+  background-color: var(--witch-plum);
+  color: var(--witch-moon);
 }
 
 .date {

client/src/app/sanctions/sanctions.ts

@@ -32,9 +32,7 @@ export class Sanctions {
   private async loadSanctions(): Promise<void> {
     const sanctions = await this.sanctionsService.getSanctions();
     this.sanctions = sanctions.sort((a, b) => {
-      return b.createdAt > a.createdAt
-        ? 1
-        : -1;
+      return b.number - a.number;
     });
   }
 }

client/src/app/soon/soon.css

@@ -1,15 +1,15 @@
 .btn {
-    display: inline-block;
-    padding: 10px 20px;
-    background-color: var(--foreground);
-    color: var(--background);
-    text-decoration: none;
-    border-radius: 50px;
-    border: 2px solid white;
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: var(--accent);
+  color: var(--witch-moon);
+  text-decoration: none;
+  border-radius: 50px;
+  border: 2px solid var(--border);
 }
 
 .btn:hover {
-    background-color: var(--background);
-    color: var(--foreground);
-    transition: background-color 0.3s, color 0.3s;
+  background-color: var(--highlight);
+  color: var(--foreground);
+  transition: background-color 0.3s, color 0.3s;
 }

client/src/app/soon/soon.html

@@ -1,8 +1,9 @@
 <h1>Oh dear~!</h1>
 <img
-  src="https://cdn.nhcarrigan.com/new-avatars/hikari-cry-full.png"
+  src="https://cdn.nhcarrigan.com/hikari.png"
   alt="Hikari"
   height="250"
+  style="display: block; margin: auto;"
 />
 <p>You appear to have become lost!</p>
 <p>

client/src/index.html

@@ -15,10 +15,4 @@
     <app-root></app-root>
   </body>
   <script src="https://cdn.nhcarrigan.com/headers/index.js"></script>
-  <script>
-    const styleElement = document.getElementById("nhcarrigan-global-styles");
-    if (styleElement) {
-      styleElement.remove();
-    }
-  </script>
 </html>

client/src/styles.css

@@ -1,102 +1,12 @@
-@font-face {
-  font-family: 'Vampyr';
-  src: url('https://cdn.nhcarrigan.com/fonts/vampyr.ttf') format('truetype');
-}
-
-:root {
-  --foreground: #8F2447;
-  --background: #E1F6F9DC;
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-family: 'Vampyr', monospace;
-  cursor: url('https://cdn.nhcarrigan.com/cursors/cursor.cur'), auto;
-  min-height: 100vh;
-  min-width: 100vw;
-}
-body::before {
-  background: url(https://cdn.nhcarrigan.com/background.png);
-  background-size: cover;
-  background-position: center;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-  content: "";
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  opacity: 1;
-  pointer-events: none;
-}
+/* Account for the fixed navigation bar */
 main {
-  color: var(--foreground);
-  background-color: var(--background);
-  text-align: center;
-  border-radius: 10px;
-  width: 100vw;
-  margin-bottom: 85px;
   margin-top: 50px;
-  min-height: calc(100vh - 85px - 50px);
-}
-footer {
-  width: 100%;
-  color: var(--foreground);
-  background-color: var(--background);
-  position: fixed;
-  bottom: 0;
-  height: 75px;
-  padding: 0 10px;
-}
-#footer-inner-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 75px;
-}
-#footer-badge-container {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  align-items: center;
-  justify-content: space-around;
-}
-#audio-theme-button, #theme-select-button {
-  background: none;
-  border: none;
-  cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
-  color: var(--foreground);
-}
-a {
-  color: unset;
-  cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
-}
-.btn:not(:disabled) {
-  cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
-}
-#tree-nation-offset-website {
-  display: flex;
-  align-items: center;
-}
-.is-dark {
-  --foreground: #E1F6F9;
-  --background: #8F2447bb;
+  min-height: calc(100vh - 50px - 85px);
 }
+
 @media screen and (max-width: 625px) {
-  #tree-nation-offset-website {
-    display: none;
-  }
-  footer, #footer-inner-container {
-    height: 50px;
-    justify-content: space-around;
-  }
   main {
     margin-bottom: 60px;
+    min-height: calc(100vh - 50px - 60px);
   }
 }