added command list to site

src/app/CommandsListTable.tsx

@@ -0,0 +1,57 @@
+import { JSX } from "react";
+import { Checkmark, Heading, Table, VStack } from "@chakra-ui/react";
+import botCommands from "@/data/botCommands";
+
+const CommandsListTable = (): JSX.Element => {
+  return (
+    <VStack gap={6} w={{ base: "90%", md: "100%" }}>
+      <Heading as="h3" fontSize="3xl">
+        {"Bot Commands"}
+      </Heading>
+      <Table.Root maxW="fit-content" interactive showColumnBorder>
+        <Table.Caption>
+          {"The bot will only respond to admins and moderators within groups."}
+        </Table.Caption>
+        <Table.Header>
+          <Table.Row bg="cyan.emphasized">
+            <Table.ColumnHeader> {"Command"}</Table.ColumnHeader>
+            <Table.ColumnHeader> {"Description"}</Table.ColumnHeader>
+            <Table.ColumnHeader> {"Private"}</Table.ColumnHeader>
+            <Table.ColumnHeader> {"Group"}</Table.ColumnHeader>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {botCommands.map((commandObj, index) => {
+            const { command, description, groups } = commandObj;
+            return (
+              <Table.Row
+                key={`${index}-${command}`}
+                bg="cyan.muted"
+                _hover={{ bg: "purple.emphasized" }}
+              >
+                <Table.Cell>{command}</Table.Cell>
+                <Table.Cell>{description.replaceAll("\\", "")}</Table.Cell>
+                <Table.Cell>
+                  {groups ? (
+                    <Checkmark colorPalette="purple" checked />
+                  ) : (
+                    <Checkmark colorPalette="purple" indeterminate />
+                  )}
+                </Table.Cell>
+                <Table.Cell>
+                  {commandObj.private ? (
+                    <Checkmark colorPalette="purple" checked />
+                  ) : (
+                    <Checkmark colorPalette="purple" indeterminate />
+                  )}
+                </Table.Cell>
+              </Table.Row>
+            );
+          })}
+        </Table.Body>
+      </Table.Root>
+    </VStack>
+  );
+};
+
+export default CommandsListTable;

src/app/api/bot/route.ts

@@ -0,0 +1,37 @@
+import { headers } from "next/headers";
+import botCommands from "@/data/botCommands";
+
+const environment = process.env.NODE_ENV || "development";
+
+const isValidApiKey = (apiKey: string): boolean => {
+  const envApiKey =
+    process.env.API_TOKEN || process.env.NEXT_PUBLIC_API_TOKEN || "";
+
+  return apiKey === envApiKey;
+};
+
+export async function GET(/*request: Request*/) {
+  const headersList = await headers();
+  const apiKey = headersList.get("x-api-key");
+
+  if (environment === "production") {
+    if (!apiKey || apiKey == null) {
+      return new Response("No API Key provided", {
+        status: 401,
+        headers: headersList
+      });
+    }
+
+    if (apiKey !== null && !(await isValidApiKey(apiKey))) {
+      return new Response("Invalid API Key", {
+        status: 403,
+        headers: headersList
+      });
+    }
+  }
+
+  return Response.json(botCommands, {
+    status: 200,
+    headers: headersList
+  });
+}

src/app/page.tsx

@@ -23,6 +23,7 @@ import GetTotalGroupsQuery from "@/graphql/queries/getTotalGroups";
 import GetTotalStatsQuery from "@/graphql/queries/getTotalStats";
 import GetTodaysStatsQuery from "@/graphql/queries/getTodaysStats";
 import GetStatsRange from "@/graphql/queries/getStatsRange";
+import CommandsListTable from "./CommandsListTable";
 
 export default function Home() {
   // * Total Groups * //
@@ -95,9 +96,9 @@ export default function Home() {
     <Fragment>
       <VStack
         bg="cyan.950"
-        minH="100vh"
+        minH="100dvh"
         h="100%"
-        py="5vh"
+        py="5dvh"
         minW="fit-content"
         textAlign="center"
       >
@@ -152,6 +153,7 @@ export default function Home() {
               </Text>
             </VStack>
           </VStack>
+          <CommandsListTable />
           <VStack gap={10} w="100%">
             {totalGroups ? (
               <StatsList
@@ -194,7 +196,7 @@ export default function Home() {
               />
             )}
           </VStack>
-          <VStack w="95%" gap="5vh">
+          <VStack w="95%" gap="5dvh">
             <VStack gap={1}>
               <Heading as="h1" fontSize="3xl">{`30 Day Stats`}</Heading>
               <Text textAlign="center" fontSize="sm" color="whiteAlpha.800">
@@ -240,7 +242,7 @@ export default function Home() {
           rgb(147, 40, 142)
            )`}
         w="100%"
-        py="5vh"
+        py="5dvh"
         textAlign="center"
       >
         <VStack
@@ -263,17 +265,19 @@ export default function Home() {
             minW="fit-content"
             w={{ base: "100%", sm: "auto" }}
             bg="blackAlpha.600"
-            maxW={{ base: "", sm: "62vw" }}
+            maxW={{ base: "", sm: "62dvw" }}
             px={2}
           >
-            {"Down with fascism! Fuck MAGA! Fuck Trump! Fuck Nazis!"}
+            {
+              "Down with fascism! Fuck MAGA! Fuck Trump! Fuck Nazis! Abolish ICE!"
+            }
           </Text>
           <Text
             fontSize="3xl"
             minW="fit-content"
             w={{ base: "100%", sm: "auto" }}
             bg="blackAlpha.600"
-            maxW={{ base: "", sm: "62vw" }}
+            maxW={{ base: "", sm: "62dvw" }}
             px={2}
           >
             {

src/components/charts/LineChart.tsx

@@ -25,7 +25,7 @@ const LineChartComponent = ({
   });
 
   return (
-    <Chart.Root maxH="xs" chart={chart} maxW="100vw">
+    <Chart.Root maxH="xs" chart={chart} maxW="100dvw">
       <LineChart data={chart.data}>
         <CartesianGrid stroke={chart.color("border")} vertical={false} />
         <XAxis

src/data/botCommands.ts

@@ -0,0 +1,56 @@
+// * Commands *
+
+interface Commands {
+  command: String;
+  description: String;
+  groups: boolean;
+  private: boolean;
+}
+
+const botInfo: Commands = {
+  command: "/botInfo",
+  description:
+    "Lists information about the bot such as: creator, reason for my creation, purpose and goal, etc",
+  groups: true,
+  private: true
+};
+
+const getGroupStats: Commands = {
+  command: "/groupStats",
+  description:
+    "Displays the number of times the bot has deleted links in your group for the lifetime of the bot",
+  groups: true,
+  private: false
+};
+
+const help: Commands = {
+  command: "/help",
+  description:
+    "Lists information about how to setup the bot and the list of available commands",
+  groups: true,
+  private: true
+};
+
+const registerGroup: Commands = {
+  command: "/registerGroup",
+  description: `Will add your group to the database, if your group doesn't exist already\\. This is used to calculate the "total groups" count on the bot stats website`,
+  groups: true,
+  private: true
+};
+
+const botStatsSite: Commands = {
+  command: "/botStats",
+  description: "Provides the bot stats website link as an embed",
+  groups: true,
+  private: true
+};
+
+const commands: Commands[] = [
+  botInfo,
+  getGroupStats,
+  help,
+  registerGroup,
+  botStatsSite
+];
+
+export default commands;