From 999ba6acbedf8a554367ea33dc69f6efbd653499 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Thu, 23 Jan 2025 13:47:43 +0500 Subject: [PATCH] REFACTOR | BROKEN CHANGES - Refactor Index Page SSG to EJS template engine --- .vscode/settings.json | 12 -- src/index.js | 19 +- src/templates/Base.ejs | 23 ++- src/templates/components/Header.ejs | 13 +- src/templates/components/Link/Stickerset.ejs | 29 ++++ src/templates/functions.ejs | 19 ++ src/templates/index.js | 75 -------- src/utils.js | 18 +- static/RenderImages.js | 18 +- ...24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.png | Bin 0 -> 3449 bytes static/images/github-mark-white.png | Bin 0 -> 4837 bytes static/tailwind.css | 162 ++++++++++++++++-- tailwind.config.js | 2 +- 13 files changed, 256 insertions(+), 134 deletions(-) delete mode 100644 .vscode/settings.json create mode 100644 src/templates/components/Link/Stickerset.ejs create mode 100644 src/templates/functions.ejs delete mode 100644 src/templates/index.js create mode 100644 static/images/captive_portal_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.png create mode 100644 static/images/github-mark-white.png diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index d1fb129..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "fiveServer.ignore": [ - "**/node_modules/**", - ".vscode/**", - ".git/**", - "**/*.scss", - "**/*.sass", - "**/*.css", - "**/*.ts", - "**/*.js", - ] -} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 0027b88..e214111 100644 --- a/src/index.js +++ b/src/index.js @@ -5,7 +5,6 @@ const { log } = require("./utils"); let ejs = require("ejs"); // const _CreatePackPage = require("./templates/pack"); -// const _CreatePacksIndex = require("./templates/index"); let PackIndex = null; let Packs = []; @@ -79,16 +78,20 @@ const html = ejs.render( indexTemplate.toString(), { title: "TG -> Matrix Stickers Index", - description: `available ${PackIndex.packs.length} sticker packs`, + description: `Available ${PackIndex.packs.length} sticker packs`, image: { - url: "./static/images/sticker.png", - mimetype: "image/png", - w: "96", - h: "96", - alt: "" + url: "./static/images/sticker.png", + mimetype: "image/png", + w: "96", + h: "96", + alt: "", }, path: config.OutPath, - isDev + isDev, + stickerset: null, + page: "index", + packs: Packs, + homeserverUrl: config.homeserverUrl, }, { root: path.join(ParPath, "src/templates") } ); diff --git a/src/templates/Base.ejs b/src/templates/Base.ejs index 9080d5f..944d39c 100644 --- a/src/templates/Base.ejs +++ b/src/templates/Base.ejs @@ -1,9 +1,28 @@ <%- include('/components/Head', {title, description, image, path, isDev}); %> - - <%- include("/components/Header", {path}) %> + + <%- include("/components/Header", {path, stickerset}) %>
+
+ <% if (page == "index") { %> +
+ <% packs.forEach(function(pack){ %> + <%- include('/components/Link/Stickerset', {path, homeserverUrl, pack}); %> + <% }); %> +
+ <% }; %> + +
+ by @radiquum +
+

Find us on:

+ github + website +
+
+
+ \ No newline at end of file diff --git a/src/templates/components/Header.ejs b/src/templates/components/Header.ejs index ad8235d..670ea03 100644 --- a/src/templates/components/Header.ejs +++ b/src/templates/components/Header.ejs @@ -1,5 +1,12 @@ -
-
- index page +
+
+ index page + <% if (stickerset) { %> +

STICKERSET

+ <% }; %> +
+ + GitHub +
\ No newline at end of file diff --git a/src/templates/components/Link/Stickerset.ejs b/src/templates/components/Link/Stickerset.ejs new file mode 100644 index 0000000..a9415a0 --- /dev/null +++ b/src/templates/components/Link/Stickerset.ejs @@ -0,0 +1,29 @@ +<% include('/functions') %> + +
+ + +
+
+

<%- pack.name %>

+

<%- pack.author %>

+

<%- pack.rating %> | <%- pack.stickers %> stick

+
+ \ No newline at end of file diff --git a/src/templates/functions.ejs b/src/templates/functions.ejs new file mode 100644 index 0000000..4719398 --- /dev/null +++ b/src/templates/functions.ejs @@ -0,0 +1,19 @@ +<% CreateImageURL=function(homeserverUrl,id) { return `${homeserverUrl}${id.slice(0,2)}/${id.slice(2,4)}/${id.slice(4)}`; } %> +<% +PackRatingClass=function(rating) { + switch (rating.toLowerCase()) { + case "safe": + return "text-green-400" + break + case "questionable": + return "text-yellow-500" + break + case "explicit": + return "text-red-500" + break + default: + return "hidden" + break + } +} +%> \ No newline at end of file diff --git a/src/templates/index.js b/src/templates/index.js deleted file mode 100644 index 31189d9..0000000 --- a/src/templates/index.js +++ /dev/null @@ -1,75 +0,0 @@ -const { CreateImageURL, InjectWSConnection } = require("../utils"); - -function _PackLink(index, pack) { - - let packRating = ""; - - if (pack.rating) { - if (pack.rating.toLowerCase() === "safe") { - packRating = `S`; - } else if (pack.rating.toLowerCase() === "questionable") { - packRating = `Q`; - } else if (pack.rating.toLowerCase() === "explicit") { - packRating = `E`; - } - } - - return ` - - -
- -
- - Loading... -
- -
- -
-

${pack.name}

- ${pack.author ? `

${pack.author}

` : ""} -

${pack.stickers} stickers ${pack.rating ? "| " + packRating : ""}

-
- - -` -} - -function _CreatePacksIndex(index, packs, isDev) { - - let packLinks = []; - packs.forEach((packLink) => packLinks.push(_PackLink(index, packLink))); - - return ` -
-
- ${packLinks.join("\n")} -
-
- - -` -} - -module.exports = _CreatePacksIndex \ No newline at end of file diff --git a/src/utils.js b/src/utils.js index 5aad9aa..4ef9484 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,9 +1,3 @@ -function CreateImageURL(index, id) { - return `${index.homeserver_url}${id.slice(0, 2)}/${id.slice(2, 4)}/${id.slice( - 4 - )}`; -} - function CreatePackDescription(pack) { let description = []; @@ -36,14 +30,6 @@ function CreatePackDescription(pack) { return description.join(" | "); } -function InjectWSConnection() { - return ` - - - - `; -} - function log(level = "INFO" | "ERROR" | "WARN" | "LOG", message, connected = false) { const date = new Date; const time = date.toLocaleTimeString() @@ -67,8 +53,6 @@ function log(level = "INFO" | "ERROR" | "WARN" | "LOG", message, connected = fal } module.exports = { - CreateImageURL, - CreatePackDescription, - InjectWSConnection, log, + CreatePackDescription }; diff --git a/static/RenderImages.js b/static/RenderImages.js index 2a54193..57509a1 100644 --- a/static/RenderImages.js +++ b/static/RenderImages.js @@ -1,19 +1,25 @@ const images = document.querySelectorAll("[data-image-id]"); +images.forEach((image, i) => { -images.forEach((image) => { + if (i < 4) { + image.setAttribute("loading", "eager") + } const spinner = document.querySelector(`[data-spinner-id="${image.getAttribute("data-image-id")}"]`) - if (image.height > 0) { - image.classList.remove("hidden"); - spinner.classList.add("hidden"); + if (image.height > 0 && image.complete) { + image.classList.remove("invisible"); + spinner.classList.add("invisible"); return + } else { + image.classList.add("invisible"); + spinner.classList.remove("invisible"); } image.addEventListener("load", () => { console.log("image " + image.getAttribute("data-image-id") + " loaded"); - image.classList.remove("hidden"); - spinner.classList.add("hidden"); + image.classList.remove("invisible"); + spinner.classList.add("invisible"); image.removeEventListener("load", this); }); diff --git a/static/images/captive_portal_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.png b/static/images/captive_portal_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.png new file mode 100644 index 0000000000000000000000000000000000000000..0908872a4b23d38658ffbbd1d504eda72803dbf3 GIT binary patch literal 3449 zcmV-<4TkcGP)Px?Gf6~2RCr$Poqv!VMHR=tZ}tL-{Jfo=>Ddhkp+q2{@>)oYf!xm1+1!y! zveVtOJCnT}+f}Jb)xLiH`hDhg_jLEXBlJpFJwRP;z1KK;0J{7T^Z@h#blC%4ZoU@* zJpf(yK$n~EML-WgvInZwYRNDr9RL_k1a=I=5CnDrI1F;I_WuCLC9n&?Wsn<1k!OHh zAabK<&GJg6QtPsx6Pq7*5wLP)ZR(^gX(kxQf$)V)9LHD+!mVrG;UzonSb8lJof#<^ z7XUoZ+Xcp?8O+fvfR4a zN{q9FFn^L~E4c!2{qSc1&d99;j3?H<2H+F9wE z^{;nq^W<2@^~37`d{rU;I1E0M8#sxGP6V(`O8cI1Y;*6Fb(G?n1Mq@yh#A`}TV5yN z0`#k4YTUSkW&P6&!x`Mb1B&{uBU-bs<2Wmt09e@<#*M(*F>&olMWeULcYlCR+(dZQ-x@n6(TF~F$|H^0$FQ_kK=GZaGg)rZ- z%*)0KxIuU(7}5!oh;9~Ean5@6{QAWJpRH$cEXA&4m&*F`a>>j9cz$>v1BdAtMu5kJ z1&(E2J6670tLH#pJ^rI`SnK`{ApSJ$l&RfQt2OKWjrrDhKUyf^dU|A z?-#b&oPRnknE-J8+K&J_N5>cf?&>RGfoYl>IokE>7Xkb|nVtgCkx5$z&G!xF#foR{ zhmKu5cSD)#(9llCnrI<_<8=A~@WqZ@`mUa=ESNjg;057)X1#Sjb96yjSm(ED^2IRR zcAH^53&IB_Cf(rJrgXA({qTAKUrE%#_|Kbt_{grN`9>?5K`%I;$T&~OEkrm=Se?Bm zbQA%uAI8pzS0KtFbADWT(5uZQqN}9C4`YT9=0h?W&kGM>!h?Yzq=5k7 zWXCpR=xvp@0qBMMTANhPk7YFGkf$Bn+()OEt{?stK;n{-0Oc5-27+u@RN31$05_=L ztFw))<$Uig!SqgiqLn;yFfJ?$Q)_4#^uh~>us|M7TRK8)?a5@cArLKgtYW(_ohn8f z|DNLM|EXh}XR2Co{h@h4bh%8ffyTa5Z99IlmE|?x-=}~={9Yg_#u<*?e}zh!>xc1j z_nRuYcB7!J2+(}`pES_;oNe20sfo zk;Z;gJ5iuzztxDid!vG$LaK2wNo8ix`Ji zgehGyjn>tA*J&dPQUTC;`U%Nzs;wO11@&JubG$j0RBm@{^UGV7CSv&reLRW!tL)MY~&;^@5I8Z2)Pu z9CR9<$TDfRD6|2%LHIB@d097+9h$mtghw1pZ`rH`pjsW;$>@vT+p|w?(EG4LG;Hi# zsr3I_)pacZI)@#qhTeC-w>UIvJg^E|=S zC*3IPz|IL>m3Y_@LP$6KlmJ{eI0A+tIc4IP9J{n@T2H!)vseRkj%^p?6RM7j@7K?c zz!xVgqJ@rK)H=}{tHbqcFG`Owqv%M-v7{G&H2{Ps!@w^S-zGKo)?3x}g8J3Wd}^Xz zrqhKeN)Kps$#`DRNdOShCx3_Hjb}w z>{9C6Z*EY(1{G%u-M6!G^f zPU#| z{Fp@7a>q7RH}N*A?z-UtFc9~nWg*~BVVko%iU7|KmobpI1dR;dqf#oR-Xn7TFut3! zdy;XJ3fQyN)s=RDgkd;+O#{zK>OSw-<{oKvS8KK1jfmE}V>DI=0gnmWlrBYehM*S# zPQ0*Wpi#DMJM}Wv^~1sVYsaKc7ieWeD>8 z&}Bd*b-LZ5t(892P(g&Mu*|7x0jTuG7q?YIn-V}?lduk&PVhkKx zw#_@zK0RI#KE#}yiXZ|GtJvm}w0c`cfFI5@faEJODbI07+fcoTF>rU;Hjk0@K?y*$ z6`^zWu$2LxAKuA8vT;##yyIB6W&yx;gX3Trw}E#Gs;aFBX8v(ml)lpu z0M}J+#@!)oGx6$2Qsb^4#v6RiZ@gNSh@-g`VO^62fT|aqYLJn58=9G~DvQ$TY1?vx za5)&COkPOPJlif_*&zVMc66H)*q~RtgowVKY#g8C*riOiqg}stHb9Bn(NV+;D^976 z?P&RpzKAhU5$0VT0chsz>Dw|$`*d_mUiZ3Tx9r=nUF94QS8%=Xq0DmkxT*OWa?8aEe6!HpezK zzh2jEb)B60^QiPX;~KhKG+OTgV@=SD0&1BKpjB6@L9m~}#*<0iWX8LFMzphKS(zM9 zZrILd2S6tZnvuYmDTJv?JJa-s$_dPTdRde*xumt(1JIre2!AoSaj?#3s;(Exhau*r zjwl_{-e4fFrGnpXo4E}^u|c{~0K#RCWzJW1qUzO-GKlVx$qn=H-a82Kj7nG9-#1GD z+EJi68Lb!^+J4HKXh`NfW}H_R=7nh;tdies0cb~oCImOA-vj2Ok{m{$r-WVHPvy|G zzi+kx;*O@t391?sy;^-PM=VcQWAGuOR9c$W$ujxP8o9konJ{T|RtYnmLPvXo_BP`iX#c1i|B%*Rwj>29sw zX$Z9ipsAN%8s^48rwfBj0E|R}cCOH*qtzekldOZl~0otD#{g zifUQAF{x*%z~ADCiWH%r3EP3$Cc+L(m=4CCs`CLAfVlpkAI{c=0N}sGn5{~$Iog$6 z0j!M#{oJDML6FzV0zlkCItctW!ZWAYi%t3+6dh+oO-E1NVBbe%u$ z0p#&skeANUNJ!)S9)OH##1PVcusH7KfQ)@I?$z}GbQw_(Ko3BdJ<#RmdlAqB&}9#F bx%vMASN$8iTzAC200000NkvXXu0mjf1TTaH literal 0 HcmV?d00001 diff --git a/static/images/github-mark-white.png b/static/images/github-mark-white.png new file mode 100644 index 0000000000000000000000000000000000000000..50b81752278d084ba9d449fff25f4051df162b0f GIT binary patch literal 4837 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 literal 0 HcmV?d00001 diff --git a/static/tailwind.css b/static/tailwind.css index 965aec6..4409599 100644 --- a/static/tailwind.css +++ b/static/tailwind.css @@ -600,18 +600,38 @@ video { border-width: 0; } +.invisible { + visibility: hidden; +} + .fixed { position: fixed; } +.sticky { + position: sticky; +} + .inset-0 { inset: 0px; } +.left-0 { + left: 0px; +} + .left-1\/2 { left: 50%; } +.right-0 { + right: 0px; +} + +.top-0 { + top: 0px; +} + .top-8 { top: 2rem; } @@ -637,6 +657,13 @@ video { margin-right: auto; } +.line-clamp-1 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; +} + .inline { display: inline; } @@ -653,6 +680,10 @@ video { display: none; } +.aspect-square { + aspect-ratio: 1 / 1; +} + .h-16 { height: 4rem; } @@ -665,6 +696,14 @@ video { height: 12rem; } +.h-6 { + height: 1.5rem; +} + +.h-full { + height: 100%; +} + .min-h-screen { min-height: 100vh; } @@ -685,6 +724,10 @@ video { width: 12rem; } +.w-8 { + width: 2rem; +} + .w-full { width: 100%; } @@ -704,14 +747,22 @@ video { animation: spin 1s linear infinite; } -.flex-row { - flex-direction: row; +.grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.grid-rows-1 { + grid-template-rows: repeat(1, minmax(0, 1fr)); } .flex-col { flex-direction: column; } +.flex-wrap { + flex-wrap: wrap; +} + .items-center { align-items: center; } @@ -720,8 +771,8 @@ video { justify-content: center; } -.gap-1 { - gap: 0.25rem; +.justify-between { + justify-content: space-between; } .gap-2 { @@ -736,10 +787,28 @@ video { overflow-x: hidden; } +.rounded-full { + border-radius: 9999px; +} + .rounded-lg { border-radius: 0.5rem; } +.rounded-md { + border-radius: 0.375rem; +} + +.rounded-b-lg { + border-bottom-right-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; +} + +.bg-\[\#1d1f3d\] { + --tw-bg-opacity: 1; + background-color: rgb(29 31 61 / var(--tw-bg-opacity, 1)); +} + .bg-\[\#259d7b\] { --tw-bg-opacity: 1; background-color: rgb(37 157 123 / var(--tw-bg-opacity, 1)); @@ -770,6 +839,11 @@ video { background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); } +.bg-slate-800 { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); +} + .bg-stone-800 { --tw-bg-opacity: 1; background-color: rgb(41 37 36 / var(--tw-bg-opacity, 1)); @@ -842,11 +916,21 @@ video { line-height: 2.5rem; } -.text-xl { - font-size: 1.25rem; +.text-lg { + font-size: 1.125rem; line-height: 1.75rem; } +.text-sm { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.text-xs { + font-size: 0.75rem; + line-height: 1rem; +} + .text-gray-200 { --tw-text-opacity: 1; color: rgb(229 231 235 / var(--tw-text-opacity, 1)); @@ -902,8 +986,12 @@ video { transition-duration: 150ms; } -.\[grid-template-columns\:100\%\] { - grid-template-columns: 100%; +.\[grid-column\:1\] { + grid-column: 1; +} + +.\[grid-row\:1\] { + grid-row: 1; } .\[grid-template-columns\:repeat\(auto-fill\2c 96px\)\] { @@ -926,6 +1014,52 @@ video { 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)); } +.hover\:underline:hover { + text-decoration-line: underline; +} + +@media (min-width: 640px) { + .sm\:inline { + display: inline; + } + + .sm\:h-10 { + height: 2.5rem; + } + + .sm\:w-16 { + width: 4rem; + } + + .sm\:w-32 { + width: 8rem; + } + + .sm\:gap-4 { + gap: 1rem; + } + + .sm\:text-2xl { + font-size: 1.5rem; + line-height: 2rem; + } + + .sm\:text-base { + font-size: 1rem; + line-height: 1.5rem; + } + + .sm\:text-lg { + font-size: 1.125rem; + line-height: 1.75rem; + } + + .sm\:text-xl { + font-size: 1.25rem; + line-height: 1.75rem; + } +} + @media (min-width: 768px) { .md\:top-32 { top: 8rem; @@ -946,9 +1080,17 @@ video { .md\:whitespace-pre { white-space: pre; } +} - .md\:\[grid-template-columns\:repeat\(auto-fill\2c minmax\(380px\2c 500px\)\)\] { - grid-template-columns: repeat(auto-fill,minmax(380px,500px)); +@media (min-width: 1024px) { + .lg\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (min-width: 1536px) { + .\32xl\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); } } diff --git a/tailwind.config.js b/tailwind.config.js index 00108c5..45d37f2 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,6 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ["./src/templates/**/*.{html,js, ejs}"], + content: ["./src/templates/**/*.{html,js,ejs}", "./static/**/*.{html,js,ejs}"], theme: { extend: {}, },