mirror of
https://github.com/wah-su/mstickers.git
synced 2025-04-05 07:44:35 +00:00
Kentai Radiquum
GitHub
commit
cc7611fd31
31 changed files with 1705 additions and 557 deletions
12
.vscode/settings.json
vendored
12
.vscode/settings.json
vendored
|
|
@ -1,12 +0,0 @@
|
|||
{
|
||||
"fiveServer.ignore": [
|
||||
"**/node_modules/**",
|
||||
".vscode/**",
|
||||
".git/**",
|
||||
"**/*.scss",
|
||||
"**/*.sass",
|
||||
"**/*.css",
|
||||
"**/*.ts",
|
||||
"**/*.js",
|
||||
]
|
||||
}
|
||||
880
package-lock.json
generated
880
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -25,7 +25,9 @@
|
|||
"didyoumean": "^1.2.2",
|
||||
"dlv": "^1.1.3",
|
||||
"eastasianwidth": "^0.2.0",
|
||||
"ejs": "^3.1.10",
|
||||
"emoji-regex": "^9.2.2",
|
||||
"express": "^4.21.2",
|
||||
"fast-glob": "^3.3.2",
|
||||
"fastq": "^1.18.0",
|
||||
"fill-range": "^7.1.1",
|
||||
|
|
@ -94,6 +96,7 @@
|
|||
"which": "^2.0.2",
|
||||
"wrap-ansi": "^8.1.0",
|
||||
"wrap-ansi-cjs": "^7.0.0",
|
||||
"ws": "^8.18.0",
|
||||
"yaml": "^2.6.1"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
const config = {
|
||||
stickerPacksDir: "./stickerpacks",
|
||||
outDir: "./",
|
||||
stickerPacksDir: "stickerpacks",
|
||||
outDir: "",
|
||||
homeserverUrl: "https://synapse.wah.su/__thumbnail/"
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = config
|
||||
11
src/hotreload.js
Normal file
11
src/hotreload.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
let webSocket = new WebSocket(`ws://${window.location.hostname}:3001`);
|
||||
webSocket.onmessage = function(e) {
|
||||
if (e.data == "RELOAD") {
|
||||
console.log("Reloading page after build")
|
||||
location.reload()
|
||||
} else if (e.data == "CONNECTED") {
|
||||
console.log("Connected to server")
|
||||
} else {
|
||||
console.warn(`unknown data received: ${e}`)
|
||||
}
|
||||
};
|
||||
138
src/index.js
138
src/index.js
|
|
@ -1,44 +1,120 @@
|
|||
const config = require("./config");
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
const { log, CreateImageURL, CreatePackDescription } = require("./utils");
|
||||
let ejs = require("ejs");
|
||||
|
||||
const _CreatePackPage = require("./templates/pack");
|
||||
const _CreatePacksIndex = require("./templates/index");
|
||||
|
||||
let PackIndex = null
|
||||
let PackIndex = null;
|
||||
let Packs = [];
|
||||
|
||||
const dirents = fs.readdirSync(config.stickerPacksDir, { withFileTypes: true });
|
||||
const isDev = process.env.DEVMODE || false;
|
||||
log("INFO", `DEV MODE ENABLED: ${isDev}`);
|
||||
|
||||
const InpPath = path
|
||||
.join(__dirname, "../", config.stickerPacksDir, "./")
|
||||
.trim();
|
||||
const OutPath = path.join(__dirname, "../", config.outDir, "./").trim();
|
||||
const ParPath = path.join(__dirname, "../", "./").trim();
|
||||
log("INFO", `Sticker sets directory: ${InpPath}`);
|
||||
log("INFO", `Output directory: ${OutPath}`);
|
||||
log("INFO", `Working directory: ${ParPath}`);
|
||||
|
||||
const dirents = fs.readdirSync(InpPath, { withFileTypes: true });
|
||||
const files = dirents
|
||||
.filter(dirent => dirent.isFile())
|
||||
.filter(dirent => (dirent.name.endsWith(".json") && dirent.name != "index.json"))
|
||||
.map(dirent => dirent.name);
|
||||
.filter((dirent) => dirent.isFile())
|
||||
.filter(
|
||||
(dirent) => dirent.name.endsWith(".json") && dirent.name != "index.json"
|
||||
)
|
||||
.map((dirent) => dirent.name);
|
||||
if (files.length == 0) {
|
||||
console.error("[ERROR] NO Sticker Packs Found!");
|
||||
process.exit(1);
|
||||
log("error", "No sticker sets found!");
|
||||
process.exit(1);
|
||||
}
|
||||
console.log("[INFO] Found " + files.length + " sticker packs");
|
||||
log("INFO", `Found: ${files.length} sticker sets`);
|
||||
|
||||
PackIndex = {
|
||||
homeserver_url: config.homeserverUrl,
|
||||
packs: files
|
||||
}
|
||||
fs.writeFileSync(config.stickerPacksDir + "/index.json", JSON.stringify(PackIndex));
|
||||
homeserver_url: config.homeserverUrl,
|
||||
packs: files,
|
||||
};
|
||||
fs.writeFileSync(
|
||||
config.stickerPacksDir + "/index.json",
|
||||
JSON.stringify(PackIndex)
|
||||
);
|
||||
log("INFO", `Updated "index.json" in sticker sets directory`, true);
|
||||
|
||||
if (!fs.existsSync(config.outDir)) fs.mkdirSync(config.outDir);
|
||||
if (OutPath != ParPath) {
|
||||
if (!fs.existsSync(OutPath)) fs.mkdirSync(OutPath);
|
||||
fs.cpSync(`${ParPath}static`, `${OutPath}static`, { recursive: true });
|
||||
log("INFO", `Copied static directory to output directory`);
|
||||
}
|
||||
|
||||
PackIndex.packs.forEach((pack) => {
|
||||
const packFile = JSON.parse(fs.readFileSync(config.stickerPacksDir + "/" + pack));
|
||||
if (!fs.existsSync(config.outDir + "/" + packFile.id)) fs.mkdirSync(config.outDir + "/" + packFile.id);
|
||||
fs.writeFileSync(config.outDir + "/" + packFile.id + "/index.html", _CreatePackPage(PackIndex, packFile));
|
||||
Packs.push({
|
||||
id: packFile.id,
|
||||
name: packFile.title,
|
||||
image: packFile.stickers[0].id,
|
||||
author: (packFile.hasOwnProperty("author") && packFile.author) ? packFile.author.name : null,
|
||||
rating: packFile.hasOwnProperty("rating") ? packFile.rating : null,
|
||||
stickers: packFile.stickers.length
|
||||
})
|
||||
console.log("preview for " + packFile.id + " created");
|
||||
})
|
||||
fs.writeFileSync(config.outDir + "/index.html", _CreatePacksIndex(PackIndex, Packs));
|
||||
console.log("Generation complete");
|
||||
const packFile = JSON.parse(fs.readFileSync(`${InpPath}${pack}`));
|
||||
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,
|
||||
image: packFile.stickers[0].id,
|
||||
author:
|
||||
packFile.hasOwnProperty("author") && packFile.author
|
||||
? packFile.author.name
|
||||
: null,
|
||||
rating: packFile.hasOwnProperty("rating") ? packFile.rating : null,
|
||||
stickers: packFile.stickers.length,
|
||||
});
|
||||
log(
|
||||
"INFO",
|
||||
`Created preview for sticker set: ${packFile.title} (${packFile.id})`
|
||||
);
|
||||
});
|
||||
|
||||
const indexTemplate = fs.readFileSync(
|
||||
path.join(ParPath, "src/templates/Base.ejs")
|
||||
);
|
||||
const html = ejs.render(
|
||||
indexTemplate.toString(),
|
||||
{
|
||||
title: "TG -> Matrix Stickers Index",
|
||||
description: `Available ${PackIndex.packs.length} sticker packs`,
|
||||
image: {
|
||||
url: "./static/images/sticker.png",
|
||||
mimetype: "image/png",
|
||||
w: "96",
|
||||
h: "96",
|
||||
alt: "",
|
||||
},
|
||||
path: config.outDir ? `/${config.outDir}` : "",
|
||||
isDev,
|
||||
stickerset: null,
|
||||
page: "index",
|
||||
packs: Packs,
|
||||
homeserverUrl: config.homeserverUrl,
|
||||
},
|
||||
{ root: path.join(ParPath, "src/templates") }
|
||||
);
|
||||
fs.writeFileSync(`${OutPath}index.html`, html);
|
||||
log("INFO", "Generation complete");
|
||||
|
|
|
|||
100
src/templates/Base.ejs
Normal file
100
src/templates/Base.ejs
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<%- include('/components/Head', {title, description, image, path, isDev}); %>
|
||||
<body class="overflow-x-hidden text-white">
|
||||
<%- 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-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'); %>
|
||||
<% }; %>
|
||||
<% 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
18
src/templates/components/Footer.ejs
Normal 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>
|
||||
20
src/templates/components/Head.ejs
Normal file
20
src/templates/components/Head.ejs
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title><%- title %></title>
|
||||
<link rel="icon" type="<%= image.mimetype %>" href="<%= image.url %>" />
|
||||
<meta property="og:title" content="<%- title %>" />
|
||||
<meta property="og:description" content="<%- description %>" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="<%= image.url %>" />
|
||||
<meta property="og:image:type" content="<%= image.mimetype %>" />
|
||||
<meta property="og:image:width" content="<%= image.w %>" />
|
||||
<meta property="og:image:height" content="<%= image.h %>" />
|
||||
<meta property="og:image:alt" content="<%= image.alt %>" />
|
||||
<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="/src/hotreload.js"></script>
|
||||
<!-- Dev mode: Enabled -->
|
||||
<% }; %>
|
||||
</head>
|
||||
15
src/templates/components/Header.ejs
Normal file
15
src/templates/components/Header.ejs
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<% 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) { %>
|
||||
<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="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
4
src/templates/components/Link/AddLink.ejs
Normal 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>
|
||||
29
src/templates/components/Link/Stickerset.ejs
Normal file
29
src/templates/components/Link/Stickerset.ejs
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<% 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">
|
||||
<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
|
||||
role="status"
|
||||
data-spinner-id="<%- pack.image %>"
|
||||
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>
|
||||
<p class="text-lg sm:text-2xl line-clamp-1"><%- pack.name %></p>
|
||||
<p class="text-sm sm:text-lg line-clamp-1"><%- pack.author %></p>
|
||||
<p class="text-xs sm:text-base"><span class="<%- PackRatingClass(pack.rating) %>"><%- pack.rating %></span> | <%- pack.stickers %> stick </p>
|
||||
</div>
|
||||
</a>
|
||||
37
src/templates/components/Pack/Description.ejs
Normal file
37
src/templates/components/Pack/Description.ejs
Normal 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
5
src/templates/components/Pack/Links.ejs
Normal 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
30
src/templates/components/Pack/Preview.ejs
Normal 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>
|
||||
|
|
@ -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;
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
19
src/templates/functions.ejs
Normal file
19
src/templates/functions.ejs
Normal file
|
|
@ -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
|
||||
}
|
||||
}
|
||||
%>
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
const { CreateImageURL } = require("../utils");
|
||||
|
||||
function _PackLink(index, pack) {
|
||||
|
||||
let packRating = "";
|
||||
|
||||
if (pack.rating) {
|
||||
if (pack.rating.toLowerCase() === "safe") {
|
||||
packRating = `<span class="text-green-400">S</span>`;
|
||||
} else if (pack.rating.toLowerCase() === "questionable") {
|
||||
packRating = `<span class="text-yellow-500">Q</span>`;
|
||||
} else if (pack.rating.toLowerCase() === "explicit") {
|
||||
packRating = `<span class="text-red-500">E</span>`;
|
||||
}
|
||||
}
|
||||
|
||||
return `
|
||||
<a class="bg-stone-800 text-zinc-100 p-4 rounded-lg w-full flex flex-row gap-2" href="./${pack.id}/">
|
||||
|
||||
<div class="w-24 h-24 flex justify-center items-center">
|
||||
|
||||
<div role="status" data-spinner-id="${pack.image}">
|
||||
<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.image)}"
|
||||
alt=""
|
||||
class="object-contain w-24 h-24 hidden"
|
||||
data-image-id="${pack.image}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1 justify-center">
|
||||
<p class="text-bold text-2xl">${pack.name}</p>
|
||||
${pack.author ? `<p class="text-xl">${pack.author}</p>` : ""}
|
||||
<p class="text-xl">${pack.stickers} stickers ${pack.rating ? "| " + packRating : ""}</p>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
`
|
||||
}
|
||||
|
||||
function _CreatePacksIndex(index, packs) {
|
||||
|
||||
let packLinks = [];
|
||||
packs.forEach((packLink) => packLinks.push(_PackLink(index, packLink)));
|
||||
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>TG -> Matrix Stickers Index</title>
|
||||
<link rel="icon" type="image/png" href="./static/images/sticker.png" />
|
||||
<meta property="og:title" content="TG -> Matrix Stickers Index" />
|
||||
<meta property="og:description" content="available ${packs.length} sticker packs" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="./static/images/sticker.png" />
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
<meta property="og:image:width" content="96" />
|
||||
<meta property="og:image:height" content="96" />
|
||||
<meta property="og:image:alt" content="sticker" />
|
||||
<link href="./static/tailwind.css" rel="stylesheet">
|
||||
</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">
|
||||
<div class="gap-2 [grid-template-columns:100%] md:[grid-template-columns:repeat(auto-fill,minmax(380px,500px))] justify-center items-center grid w-full">
|
||||
${packLinks.join("\n")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../static/RenderImages.js"></script>
|
||||
</body>
|
||||
`
|
||||
}
|
||||
|
||||
module.exports = _CreatePacksIndex
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
const PackHead = require("./components/packHead");
|
||||
const PackCard = require("./components/packCard");
|
||||
const PackLinks = require("./components/packLinks");
|
||||
const PackPreview = require("./components/packPreview");
|
||||
|
||||
function _CreatePackPage(index, pack) {
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
${PackHead(index, pack)}
|
||||
</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
|
||||
40
src/utils.js
40
src/utils.js
|
|
@ -1,8 +1,6 @@
|
|||
function CreateImageURL(index, id) {
|
||||
return `${index.homeserver_url}${id.slice(0, 2)}/${id.slice(2, 4)}/${id.slice(
|
||||
4
|
||||
)}`;
|
||||
}
|
||||
CreateImageURL = function (homeserverUrl, id) {
|
||||
return `${homeserverUrl}${id.slice(0, 2)}/${id.slice(2, 4)}/${id.slice(4)}`;
|
||||
};
|
||||
|
||||
function CreatePackDescription(pack) {
|
||||
let description = [];
|
||||
|
|
@ -36,4 +34,34 @@ function CreatePackDescription(pack) {
|
|||
return description.join(" | ");
|
||||
}
|
||||
|
||||
module.exports = {CreateImageURL, CreatePackDescription};
|
||||
function log(
|
||||
level = "INFO" | "ERROR" | "WARN" | "LOG",
|
||||
message,
|
||||
connected = false
|
||||
) {
|
||||
const date = new Date();
|
||||
const time = date.toLocaleTimeString();
|
||||
if (connected) {
|
||||
message = `↳${message}`;
|
||||
}
|
||||
switch (level.toUpperCase()) {
|
||||
case "INFO":
|
||||
console.info(`${time}:${level} - ${message}`);
|
||||
break;
|
||||
case "ERROR":
|
||||
console.error(`${time}:${level} - ${message}`);
|
||||
break;
|
||||
case "WARN":
|
||||
console.warn(`${time}:${level} - ${message}`);
|
||||
break;
|
||||
default:
|
||||
console.log(`${time}:LOG - ${message}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
log,
|
||||
CreatePackDescription,
|
||||
CreateImageURL
|
||||
};
|
||||
|
|
|
|||
138
src/watch.js
138
src/watch.js
|
|
@ -1,36 +1,136 @@
|
|||
const chokidar = require("chokidar");
|
||||
const exec = require("child_process");
|
||||
const express = require("express");
|
||||
const path = require("path");
|
||||
const WebSocket = require("ws");
|
||||
const fs = require("fs");
|
||||
const config = require("./config");
|
||||
const { log } = require("./utils");
|
||||
|
||||
let triggered = 0;
|
||||
const delay = 1000;
|
||||
let SIGINTCount = 0;
|
||||
let WSclients = [];
|
||||
|
||||
const InpPath = path
|
||||
.join(__dirname, "../", config.stickerPacksDir, "./")
|
||||
.trim();
|
||||
const OutPath = path.join(__dirname, "../", config.outDir, "./").trim();
|
||||
const ParPath = path.join(__dirname, "../", "./").trim();
|
||||
log("INFO", `Sticker sets directory: ${InpPath}`);
|
||||
log("INFO", `Output directory: ${OutPath}`);
|
||||
log("INFO", `Working directory: ${ParPath}`);
|
||||
|
||||
function onChange() {
|
||||
if (triggered != 0 && Date.now() - triggered < delay) {
|
||||
log("WARN", `Rebuild was triggered less than a ${delay}ms ago!`, true);
|
||||
return;
|
||||
}
|
||||
triggered = Date.now();
|
||||
|
||||
process.env.DEVMODE = true;
|
||||
exec.exec("npm run build", (error, stdout, stderr) => {
|
||||
if (error) {
|
||||
console.error(`error: ${error.message}`);
|
||||
log("ERROR", error.message);
|
||||
return;
|
||||
}
|
||||
if (stderr) {
|
||||
console.error(`stderr: ${stderr}`);
|
||||
log("ERROR", stderr);
|
||||
return;
|
||||
}
|
||||
console.log(`stdout: ${stdout}`);
|
||||
log("INFO", stdout);
|
||||
if (WSclients.length > 0) {
|
||||
log("INFO", "Reloading web page...");
|
||||
WSclients.forEach((ws) => ws.send("RELOAD"));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const watcher = chokidar.watch("./src/templates", {
|
||||
ignored: (path, stats) =>
|
||||
stats?.isFile() && !(path.endsWith(".js") || path.endsWith(".json")),
|
||||
// atomic: true,
|
||||
function onExit() {
|
||||
let folders = null;
|
||||
|
||||
if (fs.existsSync(`${InpPath}/index.json`)) {
|
||||
folders = [];
|
||||
JSON.parse(fs.readFileSync(`${InpPath}/index.json`))["packs"].map((pack) =>
|
||||
folders.push(pack.replace(".json", ""))
|
||||
);
|
||||
|
||||
folders.forEach((folder) => {
|
||||
if (fs.existsSync(`${OutPath}${folder}`))
|
||||
fs.rmdirSync(`${OutPath}${folder}`, { recursive: true });
|
||||
log("INFO", `Deleted generated folder: "${folder}"`);
|
||||
});
|
||||
} else {
|
||||
log("WARN", `no "index.json" found, forgot to run build?`);
|
||||
}
|
||||
|
||||
if (fs.existsSync(`${OutPath}index.html`)) fs.rmSync(`${OutPath}index.html`);
|
||||
log("INFO", `Deleted "index.html" file`);
|
||||
|
||||
if (fs.existsSync(OutPath) && OutPath != ParPath) {
|
||||
fs.rmdirSync(`${OutPath}`, { recursive: true });
|
||||
log("INFO", `Deleted output folder`);
|
||||
}
|
||||
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
const watcher = chokidar.watch(["./src", "./stickerpacks", "./static"], {
|
||||
ignored: (filePath, stats) => filePath.endsWith("index.json"),
|
||||
atomic: true,
|
||||
awaitWriteFinish: true,
|
||||
persistent: true,
|
||||
});
|
||||
watcher.on("add", (path) => {
|
||||
console.log(`File ${path} has been added, rebuilding...`);
|
||||
onChange();
|
||||
});
|
||||
watcher.on("change", (path) => {
|
||||
console.log(`File ${path} has been changed, rebuilding...`);
|
||||
onChange();
|
||||
});
|
||||
watcher.on("unlink", (path) => {
|
||||
console.log(`File ${path} has been removed, rebuilding...`);
|
||||
onChange();
|
||||
});
|
||||
|
||||
function startServerWithRebuild() {
|
||||
const app = express();
|
||||
const folder = path.join(__dirname, "..");
|
||||
const wss = new WebSocket.Server({ port: 3001 });
|
||||
|
||||
|
||||
wss.on("connection", (ws) => {
|
||||
WSclients.push(ws);
|
||||
log("INFO", `Client ${WSclients.length} connected`)
|
||||
ws.send("CONNECTED");
|
||||
});
|
||||
|
||||
|
||||
process.on("SIGINT", () => {
|
||||
SIGINTCount += 1;
|
||||
if (WSclients.length > 0) {
|
||||
async function _closeWS() {
|
||||
WSclients.forEach(async (ws) => await ws.close())
|
||||
}
|
||||
_closeWS();
|
||||
}
|
||||
if (SIGINTCount == 1) {
|
||||
log("LOG", "Gracefully shutdown and cleanup...");
|
||||
onExit();
|
||||
} else if (SIGINTCount >= 3) {
|
||||
log("LOG", "Received 3+ SIGINT signals. Force exit...");
|
||||
process.exit(0);
|
||||
}
|
||||
});
|
||||
|
||||
app.use(express.static(folder));
|
||||
app.listen(3000, () => {
|
||||
log("INFO", `Serving files from folder ${folder}`);
|
||||
log("INFO", "Express server is running on port 3000");
|
||||
|
||||
watcher
|
||||
.on("add", (path) => {
|
||||
log("INFO", `File ${path} has been added, rebuilding...`);
|
||||
onChange();
|
||||
})
|
||||
.on("change", (path) => {
|
||||
log("INFO", `File ${path} has been changed, rebuilding...`);
|
||||
onChange();
|
||||
})
|
||||
.on("unlink", (path) => {
|
||||
log("INFO", `File ${path} has been removed, rebuilding...`);
|
||||
onChange();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
startServerWithRebuild();
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
|
|
@ -1,22 +1,26 @@
|
|||
const images = document.querySelectorAll("[data-image-id]");
|
||||
images.forEach((image, i) => {
|
||||
if (i < 4) {
|
||||
image.setAttribute("loading", "eager");
|
||||
}
|
||||
|
||||
images.forEach((image) => {
|
||||
const spinner = document.querySelector(
|
||||
`[data-spinner-id="${image.getAttribute("data-image-id")}"]`
|
||||
);
|
||||
|
||||
const spinner = document.querySelector(`[data-spinner-id="${image.getAttribute("data-image-id")}"]`)
|
||||
console.log(image)
|
||||
console.log(spinner)
|
||||
if (image.height > 0 && image.complete) {
|
||||
image.classList.remove("invisible");
|
||||
spinner.classList.add("invisible");
|
||||
return;
|
||||
} else {
|
||||
image.classList.add("invisible");
|
||||
spinner.classList.remove("invisible");
|
||||
}
|
||||
|
||||
if (image.height > 0) {
|
||||
image.classList.remove("hidden");
|
||||
spinner.classList.add("hidden");
|
||||
return
|
||||
}
|
||||
|
||||
image.addEventListener("load", () => {
|
||||
console.log("image " + image.getAttribute("data-image-id") + " loaded");
|
||||
image.classList.remove("hidden");
|
||||
spinner.classList.add("hidden");
|
||||
image.removeEventListener("load", this);
|
||||
});
|
||||
|
||||
});
|
||||
image.addEventListener("load", () => {
|
||||
console.log("image " + image.getAttribute("data-image-id") + " loaded");
|
||||
image.classList.remove("invisible");
|
||||
spinner.classList.add("invisible");
|
||||
image.removeEventListener("load", this);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
static/images/github-mark-white.png
Normal file
BIN
static/images/github-mark-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
52
static/images/logo.svg
Normal file
52
static/images/logo.svg
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<svg width="551" height="111" viewBox="0 0 551 111" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_33_157)">
|
||||
<g clip-path="url(#clip1_33_157)">
|
||||
<g clip-path="url(#clip2_33_157)">
|
||||
<g clip-path="url(#clip3_33_157)">
|
||||
<g clip-path="url(#clip4_33_157)">
|
||||
<g clip-path="url(#clip5_33_157)">
|
||||
<path d="M0 53.0013C0 23.7292 23.4314 0 52.3351 0C81.2393 0 104.67 23.7297 104.671 53.0013C104.671 82.2734 81.2393 106.003 52.3351 106.003C23.4309 106.003 0 82.2734 0 53.0013ZM52.3351 102.388C79.2679 102.388 101.101 80.277 101.101 53.0013C101.101 25.7256 79.2679 3.6147 52.3351 3.6147C25.4023 3.6147 3.56927 25.7261 3.56927 53.0013C3.56927 80.277 25.4027 102.388 52.3351 102.388Z" fill="#FE633D"/>
|
||||
<path d="M52.3354 105.473C80.9503 105.473 104.147 81.9807 104.147 53.0015C104.147 24.0223 80.9503 0.530029 52.3354 0.530029C23.7204 0.530029 0.523438 24.0223 0.523438 53.0015C0.523438 81.9807 23.7204 105.473 52.3354 105.473Z" fill="#FE633D"/>
|
||||
<g clip-path="url(#clip6_33_157)">
|
||||
<g clip-path="url(#clip7_33_157)">
|
||||
<path d="M81.0596 52.8843C81.0596 56.9643 77.8002 60.2633 73.7698 60.2633C69.7465 60.2633 66.4854 56.9643 66.4854 52.8843C66.4854 48.8099 73.1235 42.1573 77.1485 42.1573C81.1808 42.1573 81.0596 48.8099 81.0596 52.8843Z" fill="white"/>
|
||||
<path d="M38.1869 52.8843C38.1869 56.9643 34.9276 60.2633 30.8962 60.2633C26.8721 60.2633 23.6136 56.9643 23.6136 52.8843C23.6136 48.8099 23.365 42.1573 27.3882 42.1573C31.4196 42.1573 38.1869 48.8099 38.1869 52.8843Z" fill="white"/>
|
||||
<path d="M68.7905 38.1255C68.7905 42.2045 65.5312 45.5054 61.5025 45.5054C57.4775 45.5054 54.2163 42.2045 54.2163 38.1255C54.2163 34.052 57.4775 24.5085 61.5025 24.5085C65.5312 24.5076 68.7905 34.051 68.7905 38.1255Z" fill="white"/>
|
||||
<path d="M70.3857 67.1504C72.3408 75.3085 64.095 81.7211 51.9507 81.4884C39.819 81.2547 31.7168 74.6539 33.846 66.7295C35.9716 58.8151 44.2165 52.3925 52.2658 52.3925C60.3239 52.3934 68.4315 59.0042 70.3857 67.1504Z" fill="white"/>
|
||||
<path d="M50.3321 38.1255C50.3321 42.2045 47.0719 45.5054 43.0432 45.5054C39.0173 45.5054 35.7588 42.2045 35.7588 38.1255C35.7588 34.052 39.0173 24.5085 43.0432 24.5085C47.0719 24.5076 50.3321 34.051 50.3321 38.1255Z" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<path d="M144.44 96.7675H134.078L120.47 37.3439H129.334L140.07 85.6414L150.682 43.5392H159.421L170.033 85.6414L180.769 37.3439H189.134L175.526 96.7675H165.289L154.927 55.171L144.44 96.7675ZM221.718 98.2847C214.56 98.2847 209.026 96.6157 205.114 93.2779C201.202 89.9569 199.246 85.3463 199.246 79.4461C199.246 73.7988 201.077 69.5001 204.739 66.55C208.401 63.5999 213.895 62.1248 221.219 62.1248H243.691V59.5961C243.691 54.1174 242.417 50.2148 239.87 47.8885C237.34 45.5789 233.037 44.4242 226.962 44.4242C219.138 44.4242 212.064 46.1521 205.738 49.6079L202.867 41.6427C210.024 37.7654 218.181 35.8267 227.336 35.8267C236.158 35.8267 242.584 37.6137 246.612 41.1875C250.657 44.7782 252.679 50.4508 252.679 58.2054V96.7675H245.938L244.814 90.4458C241.402 93.0588 237.781 95.0143 233.953 96.3123C230.124 97.6272 226.046 98.2847 221.718 98.2847ZM222.967 89.6872C230.79 89.6872 237.698 87.4114 243.691 82.8598V70.2165H220.969C216.724 70.2165 213.578 70.992 211.531 72.5429C209.5 74.1107 208.485 76.4117 208.485 79.4461C208.485 82.8177 209.691 85.3632 212.105 87.0827C214.519 88.819 218.139 89.6872 222.967 89.6872ZM283.516 96.7675H274.527V7H283.516V42.7806C289.825 38.1447 296.816 35.8267 304.49 35.8267C311.381 35.8267 316.599 37.6811 320.145 41.3898C323.674 45.0985 325.438 50.7037 325.438 58.2054V96.7675H316.475V59.5961C316.475 54.286 315.393 50.4255 313.229 48.0149C311.065 45.6211 307.644 44.4242 302.966 44.4242C299.637 44.4242 296.292 44.9889 292.929 46.1184C289.567 47.2647 286.429 48.9336 283.516 51.1251V96.7675ZM372.005 98.2847C369.425 98.2847 367.219 97.3575 365.388 95.5031C363.557 93.6488 362.642 91.4151 362.642 88.8022C362.642 86.2735 363.557 84.0567 365.388 82.1518C367.219 80.2637 369.425 79.3197 372.005 79.3197C374.585 79.3197 376.791 80.2637 378.622 82.1518C380.453 84.0567 381.368 86.2735 381.368 88.8022C381.368 91.4151 380.453 93.6488 378.622 95.5031C376.791 97.3575 374.585 98.2847 372.005 98.2847ZM444.29 98.2847C434.053 98.2847 424.897 95.8403 416.824 90.9515L420.445 83.2391C424.023 85.3463 427.852 86.9478 431.93 88.0436C436.008 89.1393 440.253 89.6872 444.664 89.6872C455.9 89.6872 461.518 86.4 461.518 79.8254C461.518 77.3811 460.769 75.5857 459.271 74.4394C457.773 73.3099 455.151 72.4923 451.406 71.9866L437.174 69.9637C431.098 69.0365 426.67 67.3676 423.89 64.9569C421.094 62.5631 419.695 59.0061 419.695 54.286C419.695 48.3858 421.843 43.8342 426.137 40.6312C430.415 37.4282 436.425 35.8267 444.165 35.8267C452.904 35.8267 461.144 37.8497 468.884 41.8955L465.638 49.7344C459.063 46.1942 451.822 44.4242 443.915 44.4242C433.844 44.4242 428.809 47.5007 428.809 53.6538C428.809 56.0139 429.558 57.7418 431.056 58.8376C432.554 59.9333 435.176 60.734 438.921 61.2398L453.154 63.2627C459.313 64.1056 463.765 65.7492 466.512 68.1936C469.259 70.638 470.632 74.3045 470.632 79.1933C470.632 85.3463 468.368 90.0665 463.84 93.3538C459.296 96.641 452.779 98.2847 444.29 98.2847ZM511.955 98.2847C505.13 98.2847 499.928 96.405 496.35 92.6457C492.771 88.9033 490.981 83.3234 490.981 75.906V37.3439H499.97V74.5153C499.97 79.8254 501.052 83.6774 503.216 86.0712C505.38 88.4819 508.792 89.6872 513.453 89.6872C516.866 89.6872 520.253 89.0972 523.616 87.9172C526.995 86.7371 530.099 85.0935 532.929 82.9863V37.3439H541.918V96.7675H535.176L534.177 90.4458C530.848 93.0588 527.328 95.0143 523.616 96.3123C519.92 97.6272 516.033 98.2847 511.955 98.2847Z" fill="#FF851B"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_33_157">
|
||||
<rect width="551" height="111" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_33_157">
|
||||
<rect width="551" height="106" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip2_33_157">
|
||||
<rect width="551" height="111" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip3_33_157">
|
||||
<rect width="550.601" height="111" fill="white" transform="translate(0.398682)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip4_33_157">
|
||||
<rect width="104.671" height="106.003" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip5_33_157">
|
||||
<rect width="104.671" height="106.003" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip6_33_157">
|
||||
<rect width="57.4493" height="56.986" fill="white" transform="translate(23.6106 24.5085)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip7_33_157">
|
||||
<rect width="57.4493" height="56.986" fill="white" transform="translate(23.6106 24.5085)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.3 KiB |
|
|
@ -588,32 +588,32 @@ 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;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.inset-0 {
|
||||
inset: 0px;
|
||||
}
|
||||
|
||||
.left-1\/2 {
|
||||
left: 50%;
|
||||
.left-0 {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.top-8 {
|
||||
top: 2rem;
|
||||
.right-0 {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.top-0 {
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.-z-10 {
|
||||
|
|
@ -628,15 +628,26 @@ 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;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
|
|
@ -653,16 +664,25 @@ video {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.h-16 {
|
||||
height: 4rem;
|
||||
.aspect-square {
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.h-24 {
|
||||
height: 6rem;
|
||||
.h-6 {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.h-48 {
|
||||
height: 12rem;
|
||||
.h-fit {
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.min-h-16 {
|
||||
min-height: 4rem;
|
||||
}
|
||||
|
||||
.min-h-screen {
|
||||
|
|
@ -681,20 +701,16 @@ video {
|
|||
width: 6rem;
|
||||
}
|
||||
|
||||
.w-48 {
|
||||
width: 12rem;
|
||||
.w-8 {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.-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));
|
||||
}
|
||||
|
||||
|
|
@ -708,8 +724,16 @@ video {
|
|||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
flex-direction: row;
|
||||
.grid-cols-1 {
|
||||
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));
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
|
|
@ -728,6 +752,10 @@ video {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
|
@ -736,69 +764,52 @@ video {
|
|||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.overflow-x-hidden {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.whitespace-pre {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.border-2 {
|
||||
border-width: 2px;
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.border-solid {
|
||||
border-style: solid;
|
||||
.rounded-b-lg {
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.border-black {
|
||||
.border-b {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.border-slate-400 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
|
||||
border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-\[\#259d7b\] {
|
||||
.bg-\[\#1d1f3d\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(37 157 123 / var(--tw-bg-opacity, 1));
|
||||
background-color: rgb(29 31 61 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-\[\#282443\] {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(40 36 67 / var(--tw-bg-opacity, 1));
|
||||
.bg-\[var\(--bg-color\)\] {
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
.bg-\[\#2f7ca3\] {
|
||||
.bg-slate-800 {
|
||||
--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-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));
|
||||
background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-gradient-to-b {
|
||||
|
|
@ -848,19 +859,19 @@ 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;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
|
|
@ -868,6 +879,15 @@ video {
|
|||
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));
|
||||
|
|
@ -898,46 +918,22 @@ 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));
|
||||
}
|
||||
|
||||
.text-slate-200 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(226 232 240 / 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);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.\[grid-template-columns\:100\%\] {
|
||||
grid-template-columns: 100%;
|
||||
.\[grid-column\:1\] {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.\[grid-template-columns\:repeat\(auto-fill\2c 96px\)\] {
|
||||
grid-template-columns: repeat(auto-fill,96px);
|
||||
}
|
||||
|
||||
.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(128px\2c 372px\)\)\] {
|
||||
grid-template-columns: repeat(auto-fill,minmax(128px,372px));
|
||||
.\[grid-row\:1\] {
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.tiledBackground {
|
||||
|
|
@ -956,33 +952,107 @@ 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\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sm\:h-10 {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.sm\:w-16 {
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
.sm\:w-32 {
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
.md\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.md\:w-\[768px\] {
|
||||
width: 768px;
|
||||
.md\:text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.md\:max-w-\[768px\] {
|
||||
max-width: 768px;
|
||||
.lg\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.md\:flex-row {
|
||||
flex-direction: row;
|
||||
.lg\:w-\[49\%\] {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.md\:whitespace-pre {
|
||||
white-space: pre;
|
||||
.lg\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.md\:\[grid-template-columns\:repeat\(auto-fill\2c 384px\)\] {
|
||||
grid-template-columns: repeat(auto-fill,384px);
|
||||
.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));
|
||||
}
|
||||
|
||||
.md\:\[grid-template-columns\:repeat\(auto-fill\2c minmax\(380px\2c 500px\)\)\] {
|
||||
grid-template-columns: repeat(auto-fill,minmax(380px,500px));
|
||||
.\32xl\:grid-cols-5 {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./src/templates/**/*.{html,js}"],
|
||||
content: ["./src/templates/**/*.{html,js,ejs}", "./static/**/*.{html,js,ejs}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue