list discord guilds via middleware

src/app.ts

@@ -7,6 +7,7 @@ import engine from "ejs-mate";
 
 import "@bot/bot";
 import homeRouter from "@server/routers/home.router";
+import { attachGuilds } from "@server/middleware/attachGuilds";
 
 const app = express();
 
@@ -17,7 +18,7 @@ app.use(express.urlencoded({ extended: true }));
 
 app.use("/static", express.static(path.resolve(__dirname, "client/public")));
 
-app.use("/", homeRouter);
+app.use("/", attachGuilds, homeRouter);
 
 const HOST = process.env.HOST || "localhost";
 const PORT = process.env.PORT || 3000;

src/client/public/css/tailwind.css

@@ -37,6 +37,8 @@
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
     --text-xl: 1.25rem;
     --text-xl--line-height: calc(1.75 / 1.25);
     --text-4xl: 2.25rem;
@@ -389,6 +391,10 @@
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
   }
+  .size-\[28px\] {
+    width: 28px;
+    height: 28px;
+  }
   .\!h-2\.5 {
     height: calc(var(--spacing) * 2.5) !important;
   }
@@ -549,6 +555,9 @@
   .rounded-md {
     border-radius: var(--radius-md);
   }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -689,6 +698,10 @@
     font-size: var(--text-4xl);
     line-height: var(--tw-leading, var(--text-4xl--line-height));
   }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));

src/client/views/layout/sidebar.ejs

@@ -25,6 +25,29 @@
                             Home
                         </a>
                     </li>
+                    <li>
+                        <hr class="py-2">
+                    </li>
+                    <% guilds.forEach(guild => { %>
+                        <li>
+                            <a href="/guild/<%= guild.id %>" class="sidebar-btn">
+                                <% if (guild.icon) { %>
+                                    <img class="size-[28px] rounded-sm" src="<%= guild.iconURL() %>" alt="<%= guild.name %> icon">
+                                <% } else { %>
+                                    <div class="size-[28px] rounded-sm shrink-0 flex justify-center items-center bg-neutral-100 dark:bg-neutral-900">
+                                        <span class="text-xs">
+                                            <%= guild.name.split(" ").splice(0, 2).map(word => word[0].toUpperCase()).join(""); %>
+                                        </span>
+                                    </div>
+                                <% } %>
+                                <div>
+                                    <span class="text-base">
+                                        <%= guild.name %>
+                                    </span>
+                                </div>
+                            </a>
+                        </li>
+                    <% }); %>
                 </ul>
             </nav>
         </div>

src/server/middleware/attachGuilds.ts

@@ -0,0 +1,7 @@
+import { Request, Response, NextFunction } from "express";
+import { client as bot } from "@bot/bot";
+
+export const attachGuilds = (_request: Request, response: Response, next: NextFunction) => {
+    response.locals.guilds = bot.guilds.cache.map(guild => guild);
+    next();
+}