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 0000000..0908872 Binary files /dev/null and b/static/images/captive_portal_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.png differ diff --git a/static/images/github-mark-white.png b/static/images/github-mark-white.png new file mode 100644 index 0000000..50b8175 Binary files /dev/null and b/static/images/github-mark-white.png differ 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: {}, },