writing page layout

2025-01-26 01:02:29 +00:00 · 2025-01-26 01:02:29 +00:00 · de2c3c960f
commit de2c3c960f
parent 56f91ba239
8 changed files with 592 additions and 209 deletions
--- a/package.json
+++ b/package.json
@ -16,6 +16,7 @@
  "license": "ISC",
  "description": "",
  "dependencies": {
+    "canvas": "^3.1.0",
    "discord.js": "^14.17.3",
    "dotenv": "^16.4.7",
    "ejs": "^3.1.10",
--- a/src/client/public/css/main.css
+++ b/src/client/public/css/main.css
@ -11,3 +11,63 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
 .sidebar-btn {
    @apply flex items-center gap-x-3.5 py-2 px-2.5 text-sm rounded-lg focus:outline-none text-gray-800 hover:bg-gray-100 focus:bg-gray-100 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:text-neutral-200;
 }
+
+
+.layout-sidebar-main {
+    @apply
+        [--auto-close:lg]
+        lg:block
+        lg:translate-x-0
+        lg:end-auto
+        lg:bottom-0
+        -translate-x-full
+        transition-all
+        duration-300
+        
+        /* Position and Display */
+        transform
+        w-64
+        h-full
+        fixed
+        top-0
+        start-0
+        bottom-0
+        z-[60]
+
+        /* Colours and Border */
+        bg-white
+        border-e
+        border-gray-200
+        dark:bg-neutral-800
+        dark:border-neutral-700;
+}
+
+.layout-sidebar-guilds {
+    @apply
+        [--auto-close:lg]
+        lg:block
+        lg:translate-x-0
+        lg:end-auto
+        lg:bottom-0
+        -translate-x-full
+        transition-all
+        duration-300
+        
+        /* Position and Display */
+        transform
+        w-64
+        h-full
+        /* hidden */
+        fixed
+        top-0
+        start-64
+        bottom-0
+        z-[60]
+
+        /* Colours and Border */
+        bg-white
+        border-e
+        border-gray-200
+        dark:bg-neutral-800
+        dark:border-neutral-700;
+}
--- a/src/client/public/css/tailwind.css
+++ b/src/client/public/css/tailwind.css
@ -731,6 +731,14 @@ video {
  margin-inline-end: 1.25rem;
 }

+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
 .ms-0\.5 {
  margin-inline-start: 0.125rem;
 }
@ -755,6 +763,10 @@ video {
  margin-top: 0.5rem;
 }

+.mt-5 {
+  margin-top: 1.25rem;
+}
+
 .mt-auto {
  margin-top: auto;
 }
@ -826,6 +838,11 @@ video {
  height: 2rem;
 }

+.size-\[34px\] {
+  width: 34px;
+  height: 34px;
+}
+
 .size-\[38px\] {
  width: 38px;
  height: 38px;
@ -839,6 +856,10 @@ video {
  height: 0.5rem;
 }

+.h-\[32px\] {
+  height: 32px;
+}
+
 .h-auto {
  height: auto;
 }
@ -1038,6 +1059,10 @@ video {
  border-radius: 0.125rem !important;
 }

+.rounded {
+  border-radius: 0.25rem;
+}
+
 .rounded-full {
  border-radius: 9999px;
 }
@ -1140,6 +1165,11 @@ video {
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
 }

+.bg-neutral-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
+}
+
 .bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@ -1182,6 +1212,11 @@ video {
  padding-bottom: 0.125rem !important;
 }

+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
 .px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
@ -1217,6 +1252,15 @@ video {
  padding-bottom: 0.75rem;
 }

+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
+
 .pe-1 {
  padding-inline-end: 0.25rem;
 }
@ -1265,11 +1309,20 @@ video {
  vertical-align: bottom;
 }

+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
 .\!text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
 }

+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
 .text-\[12px\] {
  font-size: 12px;
 }
@ -1467,6 +1520,82 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
  background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
 }

+.layout-sidebar-main {
+  position: fixed;
+  top: 0px;
+  inset-inline-start: 0px;
+  bottom: 0px;
+  z-index: 60;
+  height: 100%;
+  width: 16rem;
+  --tw-translate-x: -100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  border-inline-end-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  --auto-close: lg;
+}
+
+@media (min-width: 1024px) {
+  .layout-sidebar-main {
+    inset-inline-end: auto;
+    bottom: 0px;
+    display: block;
+    --tw-translate-x: 0px;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+}
+
+.layout-sidebar-main:where(.dark, .dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(64 64 64 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
+}
+
+.layout-sidebar-guilds {
+  position: fixed;
+  top: 0px;
+  inset-inline-start: 16rem;
+  bottom: 0px;
+  z-index: 60;
+  height: 100%;
+  width: 16rem;
+  --tw-translate-x: -100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  border-inline-end-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  --auto-close: lg;
+}
+
+@media (min-width: 1024px) {
+  .layout-sidebar-guilds {
+    inset-inline-end: auto;
+    bottom: 0px;
+    display: block;
+    --tw-translate-x: 0px;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  }
+}
+
+.layout-sidebar-guilds:where(.dark, .dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(64 64 64 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
+}
+
 .before\:absolute::before {
  content: var(--tw-content);
  position: absolute;
@ -1688,10 +1817,6 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
  display: flex !important;
 }

-.dark .hs-dark-mode-active\:flex {
-  display: flex;
-}
-
 .dark .hs-dark-mode-active\:hidden {
  display: none;
 }
@ -1850,6 +1975,11 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
 }

+.dark\:text-gray-400:where(.dark, .dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+
 .dark\:text-neutral-200:where(.dark, .dark *) {
  --tw-text-opacity: 1;
  color: rgb(229 229 229 / var(--tw-text-opacity, 1));
--- a/src/client/views/eee.ejs
+++ b/src/client/views/eee.ejs
--- a/src/client/views/home.ejs
+++ b/src/client/views/home.ejs
@ -1,3 +1,44 @@
 <%  layout("layout") -%>

-test
+<h1 class="text-4xl">Home Page</h1>
+
+<p>
+    This is some placeholder text.
+</p>
+
+<p>
+    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla aliquid temporibus sed odit blanditiis, repellendus id quibusdam voluptas harum vel culpa eligendi nihil corporis exercitationem ipsam a, deserunt voluptatibus soluta.
+    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi fugit necessitatibus assumenda eum. Sint est officiis ad laborum, dolores, illum explicabo error, doloribus repudiandae animi quis quam mollitia expedita fugiat!
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum asperiores provident et expedita ea unde vitae aut blanditiis, beatae sed rem a ad, quis quia dolorem ullam omnis magni sit?
+    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio ipsum voluptatibus enim laboriosam dolorem eveniet. Vitae cumque recusandae molestias molestiae necessitatibus nam quidem incidunt officia dignissimos, facilis, mollitia quaerat ad.
+</p>
+<p>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate hic odio non ad expedita itaque accusantium nostrum. Veritatis provident quaerat, quibusdam ullam possimus beatae corrupti repudiandae! Accusantium dolorem enim cupiditate?
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur ullam exercitationem voluptas ducimus, veritatis repellat mollitia inventore recusandae tempore numquam voluptatibus dolores perferendis minima ut omnis, corrupti deserunt. Debitis, fuga?
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero natus quod iure id cum a eligendi et laudantium in incidunt, consequatur perspiciatis aliquid aliquam eaque debitis deserunt. Alias, accusamus veniam.
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, laudantium. Reprehenderit beatae autem illum et similique nesciunt suscipit? Quo dignissimos delectus minus, distinctio vero nesciunt iusto architecto accusamus eius iste.
+    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor harum vero, ut laboriosam error dolores itaque animi quo accusamus consectetur. Distinctio pariatur quo iste dolorem a nobis eum fuga delectus.
+</p>
+<p>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit cumque rerum commodi aut modi maiores, incidunt suscipit odit? Natus aspernatur amet, est sapiente cupiditate consequuntur nam rerum autem accusamus culpa!
+    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere quaerat rem amet, laboriosam eius facilis minus pariatur magnam ea molestiae totam vitae suscipit veniam nihil explicabo voluptatibus sequi deleniti. Earum!
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam dolores exercitationem voluptas qui dolor consequuntur nostrum quidem, similique, incidunt voluptatum cum nulla. Quis odio ducimus cum eos saepe officiis at.
+</p>
+<p>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni ratione quaerat, sequi nostrum eius odio corrupti deserunt corporis, voluptates ex quas hic laborum non consequatur neque commodi, fuga inventore assumenda.
+    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam aperiam distinctio numquam esse perferendis, placeat, pariatur consequatur nulla atque amet voluptatem molestiae quasi veniam quis sunt similique, modi ipsam! Consectetur!
+</p>
+<p>
+    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo consequuntur neque numquam quam cumque dolores debitis dolorum exercitationem ratione optio fuga libero itaque, et ut. Tempore repellendus sit impedit illo.
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet velit natus inventore unde rerum nemo, aliquam cum nihil mollitia eligendi. Iusto aliquam ea molestias, nobis nostrum expedita delectus neque saepe.
+    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quos odit sint cumque et perspiciatis debitis magnam inventore ratione magni, architecto sequi vel ipsum sunt id minus vitae necessitatibus, neque voluptatem!
+    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste, delectus facere enim veritatis reiciendis esse non ex perspiciatis explicabo incidunt pariatur fuga impedit officiis doloribus commodi quam deleniti fugiat modi.
+    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste odit consequuntur neque, voluptate aut similique cupiditate ex asperiores excepturi unde sed totam sapiente, placeat praesentium sit corrupti officia minima veritatis.
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum rem quidem omnis fuga aspernatur, error qui maiores blanditiis rerum suscipit enim, totam vero, eligendi beatae laudantium inventore cumque mollitia impedit.
+    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur, maxime soluta consequuntur est ullam quia dolor, consequatur quasi ut porro ipsam! Maxime labore obcaecati dolorum, reprehenderit sunt repudiandae consequuntur assumenda.
+</p>
+<p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae atque explicabo consequuntur quo totam similique magni laboriosam, reprehenderit quos deleniti pariatur ab esse sed fugiat accusantium veritatis, voluptas possimus ut?
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio ducimus esse quae ad sapiente possimus quisquam dolorum ab error, voluptatum libero eveniet tenetur dignissimos id sunt, ullam, facere corrupti eaque.
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus laborum id temporibus quis eveniet. Accusantium consequatur, beatae et facilis natus pariatur vitae aliquam possimus. Enim ratione odio harum eos hic?
+</p>
--- a/src/client/views/layout.ejs
+++ b/src/client/views/layout.ejs
--- a/src/server/controllers/home.js
+++ b/src/server/controllers/home.js
@ -1,7 +1,17 @@
 const bot = require("../../bot/bot");
+const generateDefaultAvatar = require("../../utils/avatarGen");

 const get = async (request, response) => {
-    const guilds = bot.guilds.cache.map(guild => guild);
+    const guilds = bot.guilds.cache.map(guild => {
+
+        // // Create an avatar if no image exists
+        // if (!guild.icon) {
+        //     guild.iconURL = () => generateDefaultAvatar(guild.name, "#FFFFFF", "#171717", 50, 50);
+        // }
+
+        return guild;
+    });
+
    response.render("home", {
        title: "home page",
        guilds: guilds
--- a/src/utils/avatarGen.js
+++ b/src/utils/avatarGen.js
@ -0,0 +1,29 @@
+// Generate an avatar from a given string
+
+const { createCanvas } = require("canvas");
+
+const generateDefaultAvatar = (inputString, colour=null, bgColour=null, width=200, height=200, fontSize=null) => {
+    if (!inputString) { return; }
+
+    const words = inputString.split(" ").slice(0, 2);
+    const initials = words.map(word => word[0].toUpperCase()).join("");
+
+    const canvas = createCanvas(width, height);
+    const context = canvas.getContext("2d");
+
+    // // Background
+    // context.fillStyle = bgColour ? bgColour : "#" + Math.floor(Math.random()*16777215).toString(16);
+    // context.fillRect(0, 0, canvas.width, canvas.height);
+
+    // Text
+    const fontSizePixels = fontSize || width * 0.3;
+    context.fillStyle = colour || "#FFFFFF";
+    context.font = `bold ${fontSizePixels}px sans-serif`;
+    context.textAlign = "center";
+    context.textBaseline = "middle";
+    context.fillText(initials, canvas.width / 2, canvas.height / 2);
+
+    return canvas.toDataURL();
+};
+
+module.exports = generateDefaultAvatar;