wah.su/mstickers
1
0
Fork 0
mirror of https://github.com/wah-su/mstickers.git synced 2025-04-05 15:54:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor Pack Page Style

Browse source
This commit is contained in:
Kentai Radiquum 2025-01-23 22:06:58 +05:00
parent 999ba6acbe
commit bf2684cabc
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
22 changed files with 364 additions and 448 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/config.js
View file

@ -1,6 +1,6 @@
const config = {
stickerPacksDir: "stickerpacks",
outDir: "sticker",
outDir: "",
homeserverUrl: "https://synapse.wah.su/__thumbnail/"
};

2
src/hotreload.js
View file

@ -1,4 +1,4 @@
let webSocket = new WebSocket('ws://127.0.0.1:3001');
let webSocket = new WebSocket(`ws://${window.location.hostname}:3001`);
webSocket.onmessage = function(e) {
if (e.data == "RELOAD") {
console.log("Reloading page after build")

34
src/index.js
View file

@ -1,11 +1,9 @@
const config = require("./config");
const fs = require("fs");
const path = require("path");
const { log } = require("./utils");
const { log, CreateImageURL, CreatePackDescription } = require("./utils");
let ejs = require("ejs");
// const _CreatePackPage = require("./templates/pack");
let PackIndex = null;
let Packs = [];
@ -52,8 +50,31 @@ if (OutPath != ParPath) {
PackIndex.packs.forEach((pack) => {
const packFile = JSON.parse(fs.readFileSync(`${InpPath}${pack}`));
// if (!fs.existsSync(`${OutPath}${packFile.id}`)) fs.mkdirSync(`${OutPath}${packFile.id}`);
// fs.writeFileSync(`${OutPath}${packFile.id}/index.html`, _CreatePackPage(PackIndex, packFile, isDev));
const Template = fs.readFileSync(
path.join(ParPath, "src/templates/Base.ejs")
);
const html = ejs.render(
Template.toString(),
{
title: packFile.title,
description: CreatePackDescription(packFile),
image: {
url: CreateImageURL(config.homeserverUrl, packFile.stickers[0].id),
mimetype: packFile.stickers[0].info.mimetype,
w: packFile.stickers[0].info.w,
h: packFile.stickers[0].info.h,
alt: packFile.stickers[0].info.alt,
},
path: config.outDir ? `/${config.outDir}` : "",
isDev,
stickerset: packFile,
page: "stickerset",
homeserverUrl: config.homeserverUrl,
},
{ root: path.join(ParPath, "src/templates") }
);
if (!fs.existsSync(`${OutPath}${packFile.id}`)) fs.mkdirSync(`${OutPath}${packFile.id}`);
fs.writeFileSync(`${OutPath}${packFile.id}/index.html`, html);
Packs.push({
id: packFile.id,
name: packFile.title,
@ -86,7 +107,7 @@ const html = ejs.render(
h: "96",
alt: "",
},
path: config.OutPath,
path: config.outDir ? `/${config.outDir}` : "",
isDev,
stickerset: null,
page: "index",
@ -95,6 +116,5 @@ const html = ejs.render(
},
{ root: path.join(ParPath, "src/templates") }
);
log("LOG", `\n\n${html}\n\n`);
fs.writeFileSync(`${OutPath}index.html`, html);
log("INFO", "Generation complete");

88
src/templates/Base.ejs
View file

@ -5,24 +5,96 @@
<%- include("/components/Header", {path, stickerset}) %>
<div class="fixed inset-0 min-h-screen -z-10 tiledBackground"></div>
<div class="fixed inset-0 min-h-screen -z-20 bg-gradient-to-b from-gray-900 to-black"></div>
<div class="container px-8 py-4 mx-auto">
<div class="container px-4 py-4 mx-auto sm:px-8">
<% if (page=="index" ) { %>
<div class="grid w-full h-full grid-cols-1 gap-2 lg:grid-cols-2 2xl:grid-cols-3">
<% packs.forEach(function(pack){ %>
<%- include('/components/Link/Stickerset', {path, homeserverUrl, pack}); %>
<% }); %>
</div>
<%- include('/components/Footer'); %>
<% }; %>
<div class="flex flex-wrap items-center gap-4 py-4 mx-auto">
<a class="flex items-center gap-2 text-lg" href="https://wah.su/radiquum"> <span>by @radiquum</span> <img class="object-contain w-8 rounded-full aspect-square" src="https://radiquum.wah.su/static/avatar_512.jpg" alt="" /></a>
<div class="flex items-center gap-2">
<p class="text-lg">Find us on:</p>
<a href="https://github.com/wah-su"><img class="object-contain w-8 rounded-full aspect-square" src="<%- path %>/static/images/github-mark-white.png" alt="github" /></a>
<a href="https://wah.su"><img class="object-contain w-8 rounded-full aspect-square" src="<%- path %>/static/images/captive_portal_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.png" alt="website" /></a>
<% if (page=="stickerset" ) { %>
<div class="flex flex-wrap gap-4">
<div class="flex flex-col w-full gap-2 lg:w-[49%] h-fit">
<%- include('/components/Pack/Description', {homeserverUrl, stickerset}); %>
<%- include('/components/Pack/Links', {stickerset}); %>
<div
class="hidden px-4 py-2 rounded-md md:block sm:px-8 bg-slate-800">
<p
class="flex items-center gap-2 mb-4 text-lg border-b md:text-2xl border-slate-400">
<img src="<%- path %>/static/images/element.png" alt=""
class="object-contain w-8 py-2" /> Add StickerPicker to
Element
</p>
<p>
Type /devtools in chat. Other -> Explore account data in
Element Web
(not "room account data", must be the global one), edit the
m.widgets account data event to have the following content:
</p>
<p class="whitespace-pre">
{
"stickerpicker": {
"content": {
"type": "m.stickerpicker",
"url": "https://matrix.wah.su/stickerpicker/?theme=$theme",
"name": "Stickerpicker",
"creatorUserId": "@you:matrix.server.name",
"data": {}
},
"sender": "@you:matrix.server.name",
"state_key": "stickerpicker",
"type": "m.widget",
"id": "stickerpicker"
}
}
</p>
<p>
If you do not yet have a m.widgets event, simply create it
with that
content. You can also use the client-server API directly
instead of
using Element Web.
<br />
<br />
The theme=$theme query parameter will make the widget
conform to
Element's theme automatically. You can also use light, dark
or black
instead of $theme to always use a specific theme.
</p>
</div>
<div class="hidden lg:block">
<%- include('/components/Footer'); %>
</div>
</div>
<div class="flex flex-col w-full gap-2 lg:w-[49%] h-fit">
<%- include('/components/Pack/Preview', {homeserverUrl, stickerset}); %>
</div>
<div class="block lg:hidden">
<%- include('/components/Footer'); %>
</div>
</div>
<% }; %>
</div>
<script src="<%- path %>/static/RenderImages.js"></script>
</body>
<% if (page=="stickerset" ) { %>
<script>
const stickerpackdesc = document.getElementById("stickerpackdesc");
const stickerpackname = document.getElementById("stickerpackname");
window.onscroll = () => {
const current_Y_pos = window.scrollY;
if (
current_Y_pos >
Math.floor(stickerpackdesc.clientHeight * 0.7)
) {
stickerpackname.style.setProperty("--tw-translate-y", "0%");
} else {
stickerpackname.style.setProperty("--tw-translate-y", "-200%");
}
};
</script>
<% }; %>
</html>

18
src/templates/components/Footer.ejs Normal file
View file

@ -0,0 +1,18 @@
<div class="flex flex-wrap items-center gap-4 py-4 mx-auto">
<a class="flex items-center gap-2 text-lg" href="https://wah.su/radiquum">
<span>by
@radiquum</span> <img
class="object-contain w-8 rounded-full aspect-square"
src="https://radiquum.wah.su/static/avatar_512.jpg" alt="" /></a>
<div class="flex items-center gap-2">
<p class="text-lg">Find us on:</p>
<a href="https://github.com/wah-su"><img
class="object-contain w-8 rounded-full aspect-square"
src="<%- path %>/static/images/github-mark-white.png"
alt="github" /></a>
<a href="https://wah.su"><img
class="object-contain w-8 rounded-full aspect-square"
src="<%- path %>/static/images/captive_portal_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.png"
alt="website" /></a>
</div>
</div>

2
src/templates/components/Head.ejs
View file

@ -14,7 +14,7 @@
<link href="<%= path %>/static/tailwind.css" rel="stylesheet">
<% if (isDev) { %>
<!-- The following was injected by watch.js script, because we are in a dev mode -->
<script src="<%= path %>/src/hotreload.js"></script>
<script src="/src/hotreload.js"></script>
<!-- Dev mode: Enabled -->
<% }; %>
</head>

17
src/templates/components/Header.ejs
View file

@ -1,12 +1,15 @@
<header class="sticky top-0 left-0 right-0 bg-[#1d1f3d] rounded-b-lg">
<div class="container flex items-center justify-between px-8 py-4 mx-auto">
<a href="<%- path %>index.html"><img class="h-6 sm:h-10" src="<%- path %>/static/images/logo.svg" alt="index page"/></a>
<% include('/functions') %>
<header class="sticky top-0 left-0 right-0 bg-[#1d1f3d] rounded-b-lg z-10">
<div class="container flex items-center justify-between px-8 py-4 mx-auto min-h-16">
<a href="<%- path %>/index.html"><img class="h-6 sm:h-10" src="<%- path %>/static/images/logo.svg" alt="index page"/></a>
<% if (stickerset) { %>
<p>STICKERSET</p>
<div id="stickerpackname" class="-p-4 flex items-center gap-2 transition-transform translate-y-[var(--tw-translate-y)]" style="--tw-translate-y:-200%">
<img src="<%- CreateImageURL(homeserverUrl, stickerset.stickers[0].id) %>" class="object-contain w-8 aspect-square" />
<p class="text-lg sm:text-xl"><%- stickerset.title %></p>
</div>
<% }; %>
<div class="flex items-center justify-center gap-2 text-white sm:gap-4 sm:text-xl">
<a class="hidden hover:underline sm:inline" href="<%- path %>index.html">StickerSets</a>
<a class="hover:underline" href="https://github.com/wah-su/mstickers">GitHub</a>
<div class="items-center justify-center hidden gap-2 text-white sm:flex sm:gap-4 sm:text-xl">
<a class="hover:underline" href="<%- path %>/index.html">StickerSets</a>
</div>
</div>
</header>

4
src/templates/components/Link/AddLink.ejs Normal file
View file

@ -0,0 +1,4 @@
<a class="bg-[var(--bg-color)] gap-2 items-center w-full px-4 sm:px-8 py-4 rounded-lg flex hover:scale-105 transition-transform" href="<%- link %>" style="--bg-color:<%- color %>">
<img src="<%- path %>/static/images/<%- image %>" alt="" class="object-contain w-10" />
<p class="text-2xl text-slate-50"><%- text %></p>
</a>

2
src/templates/components/Link/Stickerset.ejs
View file

@ -1,5 +1,5 @@
<% include('/functions') %>
<a href="<%- path %><%- pack.id %>" class="flex items-center w-full h-full gap-2 p-4 rounded-md sm:gap-4 bg-slate-800">
<a href="<%- path %>/<%- pack.id %>" class="flex items-center w-full h-full gap-2 p-4 rounded-md sm:gap-4 bg-slate-800">
<div class="grid items-center justify-center object-contain w-16 grid-cols-1 grid-rows-1 sm:w-32 aspect-square">
<img src="<%- CreateImageURL(homeserverUrl, pack.image) %>" data-image-id="<%- pack.image %>" class="object-contain w-16 sm:w-32 aspect-square [grid-column:1] [grid-row:1]" loading="lazy" />
<svg

37
src/templates/components/Pack/Description.ejs Normal file
View file

@ -0,0 +1,37 @@
<% include('/functions') %>
<div class="flex items-center w-full h-full gap-2 py-2 rounded-md bg-slate-800 sm:gap-4" id="stickerpackdesc">
<div class="grid items-center justify-center object-contain w-24 grid-cols-1 grid-rows-1 sm:w-32 aspect-square">
<img src="<%- CreateImageURL(homeserverUrl, stickerset.stickers[0].id) %>" data-image-id="<%- stickerset.stickers[0].id %>-Icon" class="object-contain w-24 sm:w-32 aspect-square [grid-column:1] [grid-row:1]" loading="lazy" />
<svg
role="status"
data-spinner-id="<%- stickerset.stickers[0].id %>-Icon"
aria-hidden="true"
class="mx-auto [grid-column:1] [grid-row:1] inline w-8 text-gray-200 sm:w-16 animate-spin dark:text-gray-600 fill-green-500"
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="currentColor"
/>
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill"
/>
</svg>
</div>
<div class="px-4">
<p class="text-xl font-bold sm:text-2xl line-clamp-1"><%- stickerset.title %></p>
<% if (stickerset.hasOwnProperty("author") && stickerset.author.hasOwnProperty("name") && stickerset.author.name) { %>
<% if (stickerset.author.hasOwnProperty("url") && stickerset.author.url) { %>
<a class="text-lg underline sm:text-xl" href="<%- stickerset.author.url %>"><%- stickerset.author.name %></a>
<% } else { %>
<p class="text-lg sm:text-xl"><%- stickerset.author.name %></p>
<% }; %>
<% }; %>
<% if (stickerset.hasOwnProperty("rating") && stickerset.rating) { %>
<p class="text-lg sm:text-xl <%- PackRatingClass(stickerset.rating) %>"><%- stickerset.rating %></p>
<% }; %>
</div>
</div>

5
src/templates/components/Pack/Links.ejs Normal file
View file

@ -0,0 +1,5 @@
<%- include ("/components/Link/AddLink", {name: "telegram", text: "Telegram", image: "telegram.png", link: "https://t.me/addstickers/" + stickerset.id, color: "#2f7ca3"} ) %>
<% if (stickerset.hasOwnProperty("room_id") && stickerset.room_id) { %>
<%- include ("/components/Link/AddLink", {name: "cinny.png", text: "Cinny", image: "cinny.png", link: "https://matrix.to/#/" + stickerset.room_id, color: "#373737"} ) %>
<%- include ("/components/Link/AddLink", {name: "fluffychat.png", text: "FluffyChat", image: "fluffychat.png", link: "https://matrix.to/#/" + stickerset.room_id, color: "#282443"} ) %>
<% }; %>

30
src/templates/components/Pack/Preview.ejs Normal file
View file

@ -0,0 +1,30 @@
<% include('/functions') %>
<div class="w-full h-full px-4 py-2 rounded-md sm:px-8 bg-slate-800 sm:gap-4">
<p class="mb-4 text-lg border-b md:text-2xl border-slate-400"><%- stickerset.stickers.length %> stickers</p>
<div class="grid w-full h-full grid-cols-3 gap-2 lg:grid-cols-3 sm:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5">
<% stickerset.stickers.forEach(function(sticker){ %>
<div class="grid items-center justify-center object-contain w-24 grid-cols-1 grid-rows-1 sm:w-32 aspect-square">
<img src="<%- CreateImageURL(homeserverUrl, sticker.id) %>" data-image-id="<%- sticker.id %>" class="object-contain w-24 sm:w-32 aspect-square [grid-column:1] [grid-row:1]" loading="lazy" />
<svg
role="status"
data-spinner-id="<%- sticker.id %>"
aria-hidden="true"
class="mx-auto [grid-column:1] [grid-row:1] inline w-8 text-gray-200 sm:w-16 animate-spin dark:text-gray-600 fill-green-500"
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="currentColor"
/>
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill"
/>
</svg>
</div>
<% }); %>
</div>
</div>

71
src/templates/components/packCard.js
View file

@ -1,71 +0,0 @@
const { CreateImageURL } = require("../../utils");
function _packName(pack) {
let string = "";
string += `<p class="text-4xl">${pack.title}</p>`;
if (pack.hasOwnProperty("author") && pack.author) {
let author_string = `<p class="text-2xl">by: ${pack.author.name}</p>`;
if (pack.author.url) {
author_string = `<p class="text-2xl">by: <a href="${pack.author.url}" class="underline">${pack.author.name}</a></p>`;
}
string += author_string;
}
if (pack.hasOwnProperty("rating") && pack.rating) {
switch (pack.rating.toLowerCase()) {
case "safe":
string += `<p class="text-2xl text-green-400 text-bold">safe</p>`;
break;
case "questionable":
string += `<p class="text-2xl text-yellow-500 text-bold">questionable</p>`;
break;
case "explicit":
string += `<p class="text-2xl text-red-500 text-bold">explicit</p>`;
break;
default:
break;
}
}
return string;
}
function _packCard(index, pack) {
return `
<div class="w-full flex gap-4 flex-col md:flex-row md:w-[768px] justify-center items-center bg-stone-800 text-zinc-100 px-4 py-8 rounded-lg">
<div class="w-48 h-48 flex justify-center items-center">
<div role="status" data-spinner-id="${pack.stickers[0].id}">
<svg
aria-hidden="true"
class="inline w-16 h-16 text-gray-200 animate-spin dark:text-gray-600 fill-green-500"
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="currentColor"
/>
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill"
/>
</svg>
<span class="sr-only">Loading...</span>
</div>
<img
src="${CreateImageURL(index, pack.stickers[0].id)}"
alt="${pack.stickers[0].body}"
class="object-contain w-48 h-48 hidden"
data-image-id="${pack.stickers[0].id}"
/>
</div>
<div class="flex flex-col gap-2 justify-center">
${_packName(pack)}
</div>
</div>
`;
}
module.exports = _packCard;

20
src/templates/components/packHead.js
View file

@ -1,20 +0,0 @@
const {CreateImageURL, CreatePackDescription} = require("../../utils");
function _CreateHead(index, pack) {
return `
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>${pack.title}</title>
<link rel="icon" type="${pack.stickers[0].info.mimetype}" href="${CreateImageURL(index, pack.stickers[0].id)}" />
<meta property="og:title" content="${pack.title}" />
<meta property="og:description" content="${CreatePackDescription(pack)}" />
<meta property="og:type" content="website" />
<meta property="og:image" content="${CreateImageURL(index, pack.stickers[0].id)}" />
<meta property="og:image:type" content="${pack.stickers[0].info.mimetype}" />
<meta property="og:image:width" content="${pack.stickers[0].info.w}" />
<meta property="og:image:height" content="${pack.stickers[0].info.h}" />
<meta property="og:image:alt" content="${pack.stickers[0].body}" />
<link href="../static/tailwind.css" rel="stylesheet">
`}
module.exports = _CreateHead

26
src/templates/components/packLinks.js
View file

@ -1,26 +0,0 @@
function PackLinks(pack) {
return `
<a class="bg-[#2f7ca3] gap-2 items-center w-full px-8 py-4 rounded-lg flex hover:scale-105 transition-transform" href="https://t.me/addstickers/${pack.id}">
<img src="../static/images/telegram.png" alt="" class="object-contain w-10" />
<p class="text-2xl text-slate-50">Telegram</p>
</a>
<button class="bg-[#259d7b] gap-2 items-center w-full px-8 py-4 rounded-lg flex hover:scale-105 transition-transform" onclick="toggleElementInstruction()">
<img src="../static/images/element.png" alt="" class="object-contain w-10" />
<p class="text-2xl text-slate-50">Element</p>
</button>
${(pack.hasOwnProperty("room_id") && pack.room_id) ? (
`
<a class="bg-[#282443] gap-2 items-center w-full px-8 py-4 rounded-lg flex hover:scale-105 transition-transform" href="https://matrix.to/#/${pack.room_id}">
<img src="../static/images/fluffychat.png" alt="" class="object-contain w-10" />
<p class="text-2xl text-slate-50">FluffyChat</p>
</a>
<a class="bg-[#373737] gap-2 items-center w-full px-8 py-4 rounded-lg flex hover:scale-105 transition-transform" href="https://matrix.to/#/${pack.room_id}">
<img src="../static/images/cinny.png" alt="" class="object-contain w-10" />
<p class="text-2xl text-slate-50">Cinny</p>
</a>
`
)
: ""}
`}
module.exports = PackLinks

48
src/templates/components/packPreview.js
View file

@ -1,48 +0,0 @@
const { CreateImageURL } = require("../../utils");
function _addSticker(index, sticker) {
return `
<div class="w-24 h-24 flex justify-center items-center">
<div role="status" data-spinner-id="${sticker.id}-sticker">
<svg
aria-hidden="true"
class="inline w-16 h-16 text-gray-200 animate-spin dark:text-gray-600 fill-green-500"
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="currentColor"
/>
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill"
/>
</svg>
<span class="sr-only">Loading...</span>
</div>
<img
src="${CreateImageURL(index, sticker.id)}"
alt="${sticker.body}"
class="object-contain w-24 h-24 hidden"
data-image-id="${sticker.id}-sticker"
/>
</div>
`};
function _packPreview(index, pack) {
let stickers = [];
pack.stickers.forEach((sticker) => stickers.push(_addSticker(index, sticker)));
return `
<div class="w-full flex gap-4 flex-col md:w-[768px] bg-stone-800 text-zinc-100 px-4 py-8 rounded-lg">
<p class="text-2xl">Pack Preview (${pack.stickers.length} stickers)</p>
<div class="gap-2 [grid-template-columns:repeat(auto-fill,96px)] justify-center grid items-center w-full">
${stickers.join("\n")}
</div>
</div>
`};
module.exports = _packPreview;

68
src/templates/pack.js
View file

@ -1,68 +0,0 @@
const PackHead = require("./components/packHead");
const PackCard = require("./components/packCard");
const PackLinks = require("./components/packLinks");
const PackPreview = require("./components/packPreview");
const { InjectWSConnection } = require("../utils")
function _CreatePackPage(index, pack, isDev) {
return `
<!DOCTYPE html>
<html lang="en">
<head>
${PackHead(index, pack)}
${isDev ? InjectWSConnection() : ""}
</head>
<body class="overflow-x-hidden">
<div class="fixed inset-0 min-h-screen -z-10 tiledBackground"></div>
<div class="fixed inset-0 min-h-screen -z-20 bg-gradient-to-b from-gray-900 to-black"></div>
<div class="container flex flex-col items-center justify-center min-h-screen gap-4 p-4 mx-auto">
${PackCard(index, pack)}
<div class="flex flex-col gap-2 justify-center w-full md:w-[768px]">
${PackLinks(pack)}
</div>
${PackPreview(index, pack)}
</div>
<div class="fixed inset-0 z-10 hidden min-h-screen bg-black opacity-40" id="preview_sticker_pack_add_to_element_overlay"></div>
<div class="fixed top-8 md:top-32 w-full md:max-w-[768px] left-1/2 -translate-x-1/2 text-white z-20 hidden flex-col gap-4 p-4 rounded-lg shadow-lg bg-stone-900" id="preview_sticker_pack_add_to_element">
<p>
Type /devtools in chat. Other -> Explore account data in Element Web (not "room account data", must be the global one), edit the m.widgets account data event to have the following content:
</p>
<p class="md:whitespace-pre">
{
"stickerpicker": {
"content": {
"type": "m.stickerpicker",
"url": "https://matrix.wah.su/stickerpicker/?theme=$theme",
"name": "Stickerpicker",
"creatorUserId": "@you:matrix.server.name",
"data": {}
},
"sender": "@you:matrix.server.name",
"state_key": "stickerpicker",
"type": "m.widget",
"id": "stickerpicker"
}
}
</p>
<p>
If you do not yet have a m.widgets event, simply create it with that content. You can also use the client-server API directly instead of using Element Web.
<br />
<br />
The theme=$theme query parameter will make the widget conform to Element's theme automatically. You can also use light, dark or black instead of $theme to always use a specific theme.
</p>
<button class="flex items-center justify-center w-full py-2 text-2xl bg-red-600 rounded-lg" onclick="toggleElementInstruction()">Close</button>
</div>
<script src="../static/RenderImages.js"></script>
<script src="../static/OpenPopUp.js"></script>
</body>
</html>
`
}
module.exports = _CreatePackPage

19
src/utils.js
View file

@ -1,3 +1,7 @@
CreateImageURL = function (homeserverUrl, id) {
return `${homeserverUrl}${id.slice(0, 2)}/${id.slice(2, 4)}/${id.slice(4)}`;
};
function CreatePackDescription(pack) {
let description = [];
@ -30,11 +34,15 @@ function CreatePackDescription(pack) {
return description.join(" | ");
}
function log(level = "INFO" | "ERROR" | "WARN" | "LOG", message, connected = false) {
const date = new Date;
const time = date.toLocaleTimeString()
function log(
level = "INFO" | "ERROR" | "WARN" | "LOG",
message,
connected = false
) {
const date = new Date();
const time = date.toLocaleTimeString();
if (connected) {
message = `↳${message}`
message = `↳${message}`;
}
switch (level.toUpperCase()) {
case "INFO":
@ -54,5 +62,6 @@ function log(level = "INFO" | "ERROR" | "WARN" | "LOG", message, connected = fal
module.exports = {
log,
CreatePackDescription
CreatePackDescription,
CreateImageURL
};

22
src/watch.js
View file

@ -10,6 +10,7 @@ const { log } = require("./utils");
let triggered = 0;
const delay = 1000;
let SIGINTCount = 0;
let WSclients = [];
const InpPath = path
.join(__dirname, "../", config.stickerPacksDir, "./")
@ -20,7 +21,7 @@ log("INFO", `Sticker sets directory: ${InpPath}`);
log("INFO", `Output directory: ${OutPath}`);
log("INFO", `Working directory: ${ParPath}`);
function onChange(wss) {
function onChange() {
if (triggered != 0 && Date.now() - triggered < delay) {
log("WARN", `Rebuild was triggered less than a ${delay}ms ago!`, true);
return;
@ -38,9 +39,9 @@ function onChange(wss) {
return;
}
log("INFO", stdout);
if (wss) {
if (WSclients.length > 0) {
log("INFO", "Reloading web page...");
wss.send("RELOAD");
WSclients.forEach((ws) => ws.send("RELOAD"));
}
});
}
@ -86,18 +87,19 @@ function startServerWithRebuild() {
const folder = path.join(__dirname, "..");
const wss = new WebSocket.Server({ port: 3001 });
let WSclient = null;
wss.on("connection", (ws) => {
WSclient = ws;
WSclients.push(ws);
log("INFO", `Client ${WSclients.length} connected`)
ws.send("CONNECTED");
});
process.on("SIGINT", () => {
SIGINTCount += 1;
if (WSclient) {
if (WSclients.length > 0) {
async function _closeWS() {
await WSclient.close();
WSclients.forEach(async (ws) => await ws.close())
}
_closeWS();
}
@ -118,15 +120,15 @@ function startServerWithRebuild() {
watcher
.on("add", (path) => {
log("INFO", `File ${path} has been added, rebuilding...`);
onChange(WSclient);
onChange();
})
.on("change", (path) => {
log("INFO", `File ${path} has been changed, rebuilding...`);
onChange(WSclient);
onChange();
})
.on("unlink", (path) => {
log("INFO", `File ${path} has been removed, rebuilding...`);
onChange(WSclient);
onChange();
});
});
}

13
static/OpenPopUp.js
View file

@ -1,13 +0,0 @@
const ElementInstructionOV = document.getElementById(
"preview_sticker_pack_add_to_element_overlay"
);
const ElementInstruction = document.getElementById(
"preview_sticker_pack_add_to_element"
);
function toggleElementInstruction() {
ElementInstructionOV.classList.toggle("hidden");
ElementInstruction.classList.toggle("hidden");
ElementInstruction.classList.toggle("flex");
}

10
static/RenderImages.js
View file

@ -1,16 +1,17 @@
const images = document.querySelectorAll("[data-image-id]");
images.forEach((image, i) => {
if (i < 4) {
image.setAttribute("loading", "eager")
image.setAttribute("loading", "eager");
}
const spinner = document.querySelector(`[data-spinner-id="${image.getAttribute("data-image-id")}"]`)
const spinner = document.querySelector(
`[data-spinner-id="${image.getAttribute("data-image-id")}"]`
);
if (image.height > 0 && image.complete) {
image.classList.remove("invisible");
spinner.classList.add("invisible");
return
return;
} else {
image.classList.add("invisible");
spinner.classList.remove("invisible");
@ -22,5 +23,4 @@ images.forEach((image, i) => {
spinner.classList.add("invisible");
image.removeEventListener("load", this);
});
});

216
static/tailwind.css
View file

@ -588,18 +588,6 @@ video {
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.invisible {
visibility: hidden;
}
@ -620,10 +608,6 @@ video {
left: 0px;
}
.left-1\/2 {
left: 50%;
}
.right-0 {
right: 0px;
}
@ -632,10 +616,6 @@ video {
top: 0px;
}
.top-8 {
top: 2rem;
}
.-z-10 {
z-index: -10;
}
@ -648,15 +628,15 @@ video {
z-index: 10;
}
.z-20 {
z-index: 20;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mb-4 {
margin-bottom: 1rem;
}
.line-clamp-1 {
overflow: hidden;
display: -webkit-box;
@ -664,6 +644,10 @@ video {
-webkit-line-clamp: 1;
}
.block {
display: block;
}
.inline {
display: inline;
}
@ -684,26 +668,23 @@ video {
aspect-ratio: 1 / 1;
}
.h-16 {
height: 4rem;
}
.h-24 {
height: 6rem;
}
.h-48 {
height: 12rem;
}
.h-6 {
height: 1.5rem;
}
.h-fit {
height: -moz-fit-content;
height: fit-content;
}
.h-full {
height: 100%;
}
.min-h-16 {
min-height: 4rem;
}
.min-h-screen {
min-height: 100vh;
}
@ -720,10 +701,6 @@ video {
width: 6rem;
}
.w-48 {
width: 12rem;
}
.w-8 {
width: 2rem;
}
@ -732,8 +709,8 @@ video {
width: 100%;
}
.-translate-x-1\/2 {
--tw-translate-x: -50%;
.translate-y-\[var\(--tw-translate-y\)\] {
--tw-translate-y: var(--tw-translate-y);
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));
}
@ -751,6 +728,10 @@ video {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-rows-1 {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
@ -787,6 +768,10 @@ video {
overflow-x: hidden;
}
.whitespace-pre {
white-space: pre;
}
.rounded-full {
border-radius: 9999px;
}
@ -804,39 +789,22 @@ video {
border-bottom-left-radius: 0.5rem;
}
.border-b {
border-bottom-width: 1px;
}
.border-slate-400 {
--tw-border-opacity: 1;
border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}
.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));
}
.bg-\[\#282443\] {
--tw-bg-opacity: 1;
background-color: rgb(40 36 67 / var(--tw-bg-opacity, 1));
}
.bg-\[\#2f7ca3\] {
--tw-bg-opacity: 1;
background-color: rgb(47 124 163 / var(--tw-bg-opacity, 1));
}
.bg-\[\#373737\] {
--tw-bg-opacity: 1;
background-color: rgb(55 55 55 / var(--tw-bg-opacity, 1));
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-red-600 {
--tw-bg-opacity: 1;
background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
.bg-\[var\(--bg-color\)\] {
background-color: var(--bg-color);
}
.bg-slate-800 {
@ -844,16 +812,6 @@ video {
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));
}
.bg-stone-900 {
--tw-bg-opacity: 1;
background-color: rgb(28 25 23 / var(--tw-bg-opacity, 1));
}
.bg-gradient-to-b {
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
@ -901,21 +859,11 @@ video {
padding-bottom: 1rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
@ -926,11 +874,20 @@ video {
line-height: 1.25rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.font-bold {
font-weight: 700;
}
.text-gray-200 {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity, 1));
@ -961,25 +918,10 @@ video {
color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}
.text-zinc-100 {
--tw-text-opacity: 1;
color: rgb(244 244 245 / var(--tw-text-opacity, 1));
}
.underline {
text-decoration-line: underline;
}
.opacity-40 {
opacity: 0.4;
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@ -994,10 +936,6 @@ video {
grid-row: 1;
}
.\[grid-template-columns\:repeat\(auto-fill\2c 96px\)\] {
grid-template-columns: repeat(auto-fill,96px);
}
.tiledBackground {
background-image: url('images/background-white.png');
background-repeat: repeat;
@ -1019,8 +957,8 @@ video {
}
@media (min-width: 640px) {
.sm\:inline {
display: inline;
.sm\:flex {
display: flex;
}
.sm\:h-10 {
@ -1035,10 +973,19 @@ video {
width: 8rem;
}
.sm\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sm\:gap-4 {
gap: 1rem;
}
.sm\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.sm\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
@ -1061,37 +1008,52 @@ video {
}
@media (min-width: 768px) {
.md\:top-32 {
top: 8rem;
.md\:block {
display: block;
}
.md\:w-\[768px\] {
width: 768px;
}
.md\:max-w-\[768px\] {
max-width: 768px;
}
.md\:flex-row {
flex-direction: row;
}
.md\:whitespace-pre {
white-space: pre;
.md\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
}
@media (min-width: 1024px) {
.lg\:block {
display: block;
}
.lg\:hidden {
display: none;
}
.lg\:w-\[49\%\] {
width: 49%;
}
.lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
.xl\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 1536px) {
.\32xl\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.\32xl\:grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
@media (prefers-color-scheme: dark) {