mirror of
https://github.com/wah-su/mstickers.git
synced 2025-04-05 15:54:36 +00:00
REFACTOR: Generate Static Pages instead of ?id query param for sticker pack
This commit is contained in:
parent
5cb32a8681
commit
dfcddfc0cd
GPG key ID:
858E8EE696525EED
21 changed files with 2074 additions and 473 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -1,2 +1,3 @@
|
||||||
node_modules
|
node_modules
|
||||||
*.json
|
stickerpacks/**/*.json
|
||||||
|
ignore/
|
||||||
12
.vscode/settings.json
vendored
Normal file
12
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
{
|
||||||
|
"fiveServer.ignore": [
|
||||||
|
"**/node_modules/**",
|
||||||
|
".vscode/**",
|
||||||
|
".git/**",
|
||||||
|
"**/*.scss",
|
||||||
|
"**/*.sass",
|
||||||
|
"**/*.css",
|
||||||
|
"**/*.ts",
|
||||||
|
"**/*.js",
|
||||||
|
]
|
||||||
|
}
|
||||||
109
index.html
109
index.html
|
|
@ -1,109 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Matrix Sticker pack</title>
|
|
||||||
<link href="static/tailwind.css" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<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="flex-col hidden gap-4 w-full md:w-[600px]" id="preview_sticker_pack">
|
|
||||||
<div class="flex flex-wrap items-center justify-around gap-4 p-4 rounded-lg shadow-lg md:flex-row bg-stone-800 text-slate-200"
|
|
||||||
id="preview_sticker_pack">
|
|
||||||
<img src="static/images/sticker.png" class="object-contain w-32 md:w-64" alt="" id="preview_sticker_pack_image" />
|
|
||||||
<div class="flex flex-col justify-center gap-2">
|
|
||||||
<p class="text-4xl text-bold" id="preview_sticker_pack_name">
|
|
||||||
{sticker_pack_name}
|
|
||||||
</p>
|
|
||||||
<p id="preview_sticker_pack_author_by" class="hidden text-2xl">by <a
|
|
||||||
id="preview_sticker_pack_author" class="hidden text-2xl underline">{sticker_pack_author}</a>
|
|
||||||
</p>
|
|
||||||
<div>
|
|
||||||
<p class="hidden text-4xl text-green-400 text-bold" id="preview_sticker_pack_rating_safe">S</p>
|
|
||||||
<p class="hidden text-4xl text-yellow-500 text-bold" id="preview_sticker_pack_rating_ques">Q</p>
|
|
||||||
<p class="hidden text-4xl text-red-500 text-bold" id="preview_sticker_pack_rating_expl">E</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<a class="bg-[#2f7ca3] h-16 gap-2 items-center px-4 rounded-lg hidden hover:scale-110 transition-transform" id="preview_sticker_pack_add_tg">
|
|
||||||
<img src="static/images/telegram.png" alt="" class="object-contain w-10" />
|
|
||||||
<p class="text-2xl text-slate-50">Telegram</p>
|
|
||||||
</a>
|
|
||||||
<button onclick="toggleElementInstruction()" class="bg-[#259d7b] h-16 gap-2 items-center px-4 rounded-lg flex hover:scale-110 transition-transform" id="preview_sticker_pack_add_el">
|
|
||||||
<img src="static/images/element.png" alt="" class="object-contain w-10" />
|
|
||||||
<p class="text-2xl text-slate-50">Element</p>
|
|
||||||
</button>
|
|
||||||
<a class="bg-[#282443] h-16 gap-2 items-center px-4 rounded-lg hidden hover:scale-110 transition-transform" id="preview_sticker_pack_add_fc">
|
|
||||||
<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] h-16 gap-2 items-center px-4 rounded-lg hidden hover:scale-110 transition-transform" id="preview_sticker_pack_add_ci">
|
|
||||||
<img src="static/images/cinny.png" alt="" class="object-contain w-10" />
|
|
||||||
<p class="text-2xl text-slate-50">Cinny</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</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 max-w-[90%] md:max-w-[768px] 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>
|
|
||||||
|
|
||||||
<div class="w-full md:w-[600px] hidden" id="preview_sticker_pack_stickers_container">
|
|
||||||
<div class="p-4 rounded-lg shadow-lg bg-stone-800 text-slate-200 ">
|
|
||||||
<p class="text-2xl">Pack Preview <span id="preview_sticker_pack_stickers_count"></span></p>
|
|
||||||
<div class="flex flex-wrap gap-4 mt-4 " id="preview_sticker_pack_stickers">
|
|
||||||
<img src="static/images/cinny.png" alt="" class="hidden object-contain md:w-20 w-24" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gap-1 [grid-template-columns:repeat(auto-fill,minmax(128px,372px))] justify-center items-center hidden w-full" id="stickerpacks_index">
|
|
||||||
<div class="hidden gap-4 items-center flex-grow bg-stone-800 text-slate-200 border-black border-solid border-2 p-4 rounded-lg">
|
|
||||||
<img src="static/images/cinny.png" alt="" class="object-contain w-24"/>
|
|
||||||
<div class="grid">
|
|
||||||
<p class="text-2xl">{pack_name}</p>
|
|
||||||
<p class="text-xl">{artist_name}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<script src="static/pack_preview.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
122
kentai_radiquum/index.html
Normal file
122
kentai_radiquum/index.html
Normal file
|
|
@ -0,0 +1,122 @@
|
||||||
|
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>kentai radiquum</title>
|
||||||
|
<link rel="icon" type="image/png" href="https://synapse.wah.su/__thumbnail/LB/FF/fXVUPCuJKQdfBZpMYqJd" />
|
||||||
|
<meta property="og:title" content="kentai radiquum" />
|
||||||
|
<meta property="og:description" content="2 stickers | rating: safe | author: ketfox (https://vk.com/ketfox18)" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:image" content="https://synapse.wah.su/__thumbnail/LB/FF/fXVUPCuJKQdfBZpMYqJd" />
|
||||||
|
<meta property="og:image:type" content="image/png" />
|
||||||
|
<meta property="og:image:width" content="256" />
|
||||||
|
<meta property="og:image:height" content="256" />
|
||||||
|
<meta property="og:image:alt" content="🤗" />
|
||||||
|
<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="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="LBFFfXVUPCuJKQdfBZpMYqJd">
|
||||||
|
<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="https://synapse.wah.su/__thumbnail/LB/FF/fXVUPCuJKQdfBZpMYqJd"
|
||||||
|
alt="🤗"
|
||||||
|
class="object-contain w-48 h-48 hidden"
|
||||||
|
data-image-id="LBFFfXVUPCuJKQdfBZpMYqJd"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-2 justify-center">
|
||||||
|
<p class="text-4xl">kentai radiquum</p><p class="text-2xl">by: <a href="https://vk.com/ketfox18" class="underline">ketfox</a></p><p class="text-2xl text-green-400 text-bold">safe</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-2 justify-center w-full md:w-[768px]">
|
||||||
|
|
||||||
|
<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/kentai_radiquum">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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/#/!ODINKkkGZdSjOtFyqg:wah.su">
|
||||||
|
<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/#/!ODINKkkGZdSjOtFyqg:wah.su">
|
||||||
|
<img src="../static/images/cinny.png" alt="" class="object-contain w-10" />
|
||||||
|
<p class="text-2xl text-slate-50">Cinny</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</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>
|
||||||
|
|
||||||
1395
package-lock.json
generated
Normal file
1395
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
119
package.json
Normal file
119
package.json
Normal file
|
|
@ -0,0 +1,119 @@
|
||||||
|
{
|
||||||
|
"devDependencies": {
|
||||||
|
"chokidar": "^4.0.3",
|
||||||
|
"tailwindcss": "^3.4.17"
|
||||||
|
},
|
||||||
|
"name": "stickerpackpreview",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Matrix Sticker Pack Preview",
|
||||||
|
"dependencies": {
|
||||||
|
"ansi-regex": "^6.1.0",
|
||||||
|
"ansi-styles": "^6.2.1",
|
||||||
|
"any-promise": "^1.3.0",
|
||||||
|
"anymatch": "^3.1.3",
|
||||||
|
"arg": "^5.0.2",
|
||||||
|
"balanced-match": "^1.0.2",
|
||||||
|
"binary-extensions": "^2.3.0",
|
||||||
|
"brace-expansion": "^2.0.1",
|
||||||
|
"braces": "^3.0.3",
|
||||||
|
"camelcase-css": "^2.0.1",
|
||||||
|
"color-convert": "^2.0.1",
|
||||||
|
"color-name": "^1.1.4",
|
||||||
|
"commander": "^4.1.1",
|
||||||
|
"cross-spawn": "^7.0.6",
|
||||||
|
"cssesc": "^3.0.0",
|
||||||
|
"didyoumean": "^1.2.2",
|
||||||
|
"dlv": "^1.1.3",
|
||||||
|
"eastasianwidth": "^0.2.0",
|
||||||
|
"emoji-regex": "^9.2.2",
|
||||||
|
"fast-glob": "^3.3.2",
|
||||||
|
"fastq": "^1.18.0",
|
||||||
|
"fill-range": "^7.1.1",
|
||||||
|
"foreground-child": "^3.3.0",
|
||||||
|
"function-bind": "^1.1.2",
|
||||||
|
"glob": "^10.4.5",
|
||||||
|
"glob-parent": "^6.0.2",
|
||||||
|
"hasown": "^2.0.2",
|
||||||
|
"is-binary-path": "^2.1.0",
|
||||||
|
"is-core-module": "^2.16.1",
|
||||||
|
"is-extglob": "^2.1.1",
|
||||||
|
"is-fullwidth-code-point": "^3.0.0",
|
||||||
|
"is-glob": "^4.0.3",
|
||||||
|
"is-number": "^7.0.0",
|
||||||
|
"isexe": "^2.0.0",
|
||||||
|
"jackspeak": "^3.4.3",
|
||||||
|
"jiti": "^1.21.7",
|
||||||
|
"lilconfig": "^3.1.3",
|
||||||
|
"lines-and-columns": "^1.2.4",
|
||||||
|
"lru-cache": "^10.4.3",
|
||||||
|
"merge2": "^1.4.1",
|
||||||
|
"micromatch": "^4.0.8",
|
||||||
|
"minimatch": "^9.0.5",
|
||||||
|
"minipass": "^7.1.2",
|
||||||
|
"mz": "^2.7.0",
|
||||||
|
"nanoid": "^3.3.8",
|
||||||
|
"normalize-path": "^3.0.0",
|
||||||
|
"object-assign": "^4.1.1",
|
||||||
|
"object-hash": "^3.0.0",
|
||||||
|
"package-json-from-dist": "^1.0.1",
|
||||||
|
"path-key": "^3.1.1",
|
||||||
|
"path-parse": "^1.0.7",
|
||||||
|
"path-scurry": "^1.11.1",
|
||||||
|
"picocolors": "^1.1.1",
|
||||||
|
"picomatch": "^2.3.1",
|
||||||
|
"pify": "^2.3.0",
|
||||||
|
"pirates": "^4.0.6",
|
||||||
|
"postcss": "^8.4.49",
|
||||||
|
"postcss-import": "^15.1.0",
|
||||||
|
"postcss-js": "^4.0.1",
|
||||||
|
"postcss-load-config": "^4.0.2",
|
||||||
|
"postcss-nested": "^6.2.0",
|
||||||
|
"postcss-selector-parser": "^6.1.2",
|
||||||
|
"postcss-value-parser": "^4.2.0",
|
||||||
|
"queue-microtask": "^1.2.3",
|
||||||
|
"read-cache": "^1.0.0",
|
||||||
|
"readdirp": "^3.6.0",
|
||||||
|
"resolve": "^1.22.10",
|
||||||
|
"reusify": "^1.0.4",
|
||||||
|
"run-parallel": "^1.2.0",
|
||||||
|
"shebang-command": "^2.0.0",
|
||||||
|
"shebang-regex": "^3.0.0",
|
||||||
|
"signal-exit": "^4.1.0",
|
||||||
|
"source-map-js": "^1.2.1",
|
||||||
|
"string-width": "^5.1.2",
|
||||||
|
"string-width-cjs": "^4.2.3",
|
||||||
|
"strip-ansi": "^7.1.0",
|
||||||
|
"strip-ansi-cjs": "^6.0.1",
|
||||||
|
"sucrase": "^3.35.0",
|
||||||
|
"supports-preserve-symlinks-flag": "^1.0.0",
|
||||||
|
"thenify": "^3.3.1",
|
||||||
|
"thenify-all": "^1.6.0",
|
||||||
|
"to-regex-range": "^5.0.1",
|
||||||
|
"ts-interface-checker": "^0.1.13",
|
||||||
|
"util-deprecate": "^1.0.2",
|
||||||
|
"which": "^2.0.2",
|
||||||
|
"wrap-ansi": "^8.1.0",
|
||||||
|
"wrap-ansi-cjs": "^7.0.0",
|
||||||
|
"yaml": "^2.6.1"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "node ./src/index.js",
|
||||||
|
"watch": "node ./src/watch.js"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/wah-su/mstickers.git"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"matrix",
|
||||||
|
"stickerpack",
|
||||||
|
"telegram",
|
||||||
|
"preview"
|
||||||
|
],
|
||||||
|
"author": "Radiquum",
|
||||||
|
"license": "ISC",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/wah-su/mstickers/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://github.com/wah-su/mstickers#readme"
|
||||||
|
}
|
||||||
6
src/config.js
Normal file
6
src/config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
const config = {
|
||||||
|
stickerPacksDir: "./stickerpacks",
|
||||||
|
outDir: "./",
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = config
|
||||||
27
src/index.js
Normal file
27
src/index.js
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
const config = require("./config");
|
||||||
|
const fs = require("fs");
|
||||||
|
|
||||||
|
const _CreatePackPage = require("./templates/pack");
|
||||||
|
|
||||||
|
function GenerateStaticSite() {
|
||||||
|
let PackIndex = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
PackIndex = JSON.parse(fs.readFileSync(config.stickerPacksDir + "/index.json"));
|
||||||
|
} catch (e) {
|
||||||
|
console.error("No index.json found!");
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!fs.existsSync(config.outDir)) fs.mkdirSync(config.outDir);
|
||||||
|
|
||||||
|
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));
|
||||||
|
console.log("preview for " + packFile.id + " created");
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
GenerateStaticSite();
|
||||||
|
module.exports = GenerateStaticSite
|
||||||
20
src/templates/components/head.js
Normal file
20
src/templates/components/head.js
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
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
|
||||||
71
src/templates/components/packCard.js
Normal file
71
src/templates/components/packCard.js
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
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;
|
||||||
26
src/templates/components/packLinks.js
Normal file
26
src/templates/components/packLinks.js
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
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
|
||||||
64
src/templates/pack.js
Normal file
64
src/templates/pack.js
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
const Head = require("./components/head");
|
||||||
|
const PackCard = require("./components/packCard");
|
||||||
|
const PackLinks = require("./components/PackLinks");
|
||||||
|
|
||||||
|
function _CreatePackPage(index, pack) {
|
||||||
|
return `
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
${Head(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>
|
||||||
|
|
||||||
|
</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
|
||||||
39
src/utils.js
Normal file
39
src/utils.js
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
function CreateImageURL(index, id) {
|
||||||
|
return `${index.homeserver_url}${id.slice(0, 2)}/${id.slice(2, 4)}/${id.slice(
|
||||||
|
4
|
||||||
|
)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function CreatePackDescription(pack) {
|
||||||
|
let description = [];
|
||||||
|
|
||||||
|
description.push(`${pack.stickers.length} stickers`);
|
||||||
|
|
||||||
|
if (pack.hasOwnProperty("rating") && pack.rating) {
|
||||||
|
switch (pack.rating.toLowerCase()) {
|
||||||
|
case "safe":
|
||||||
|
description.push("rating: safe");
|
||||||
|
break;
|
||||||
|
case "questionable":
|
||||||
|
description.push("rating: questionable");
|
||||||
|
break;
|
||||||
|
case "explicit":
|
||||||
|
description.push("rating: explicit");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (pack.hasOwnProperty("author") && pack.author) {
|
||||||
|
let author_string = `author: ${pack.author.name}`;
|
||||||
|
if (pack.author.url) {
|
||||||
|
author_string += ` (${pack.author.url})`;
|
||||||
|
}
|
||||||
|
description.push(author_string);
|
||||||
|
}
|
||||||
|
|
||||||
|
return description.join(" | ");
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {CreateImageURL, CreatePackDescription};
|
||||||
36
src/watch.js
Normal file
36
src/watch.js
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
const chokidar = require("chokidar");
|
||||||
|
const exec = require("child_process");
|
||||||
|
|
||||||
|
function onChange() {
|
||||||
|
exec.exec("npm run build", (error, stdout, stderr) => {
|
||||||
|
if (error) {
|
||||||
|
console.error(`error: ${error.message}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (stderr) {
|
||||||
|
console.error(`stderr: ${stderr}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.log(`stdout: ${stdout}`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const watcher = chokidar.watch("./src/templates", {
|
||||||
|
ignored: (path, stats) =>
|
||||||
|
stats?.isFile() && !(path.endsWith(".js") || path.endsWith(".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();
|
||||||
|
});
|
||||||
13
static/OpenPopUp.js
Normal file
13
static/OpenPopUp.js
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
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");
|
||||||
|
}
|
||||||
22
static/RenderImages.js
Normal file
22
static/RenderImages.js
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
const images = document.querySelectorAll("[data-image-id]");
|
||||||
|
|
||||||
|
images.forEach((image) => {
|
||||||
|
|
||||||
|
const spinner = document.querySelector(`[data-spinner-id="${image.getAttribute("data-image-id")}"]`)
|
||||||
|
console.log(image)
|
||||||
|
console.log(spinner)
|
||||||
|
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
@ -1,233 +0,0 @@
|
||||||
const packPreview = document.getElementById("preview_sticker_pack");
|
|
||||||
const packName = document.getElementById("preview_sticker_pack_name");
|
|
||||||
const packAuthor_by = document.getElementById("preview_sticker_pack_author_by");
|
|
||||||
const packAuthor = document.getElementById("preview_sticker_pack_author");
|
|
||||||
const packImage = document.getElementById("preview_sticker_pack_image");
|
|
||||||
const packStickersC = document.getElementById(
|
|
||||||
"preview_sticker_pack_stickers_container"
|
|
||||||
);
|
|
||||||
const packStickersCount = document.getElementById(
|
|
||||||
"preview_sticker_pack_stickers_count"
|
|
||||||
);
|
|
||||||
const packStickers = document.getElementById("preview_sticker_pack_stickers");
|
|
||||||
const packLinkTG = document.getElementById("preview_sticker_pack_add_tg");
|
|
||||||
const packLinkFC = document.getElementById("preview_sticker_pack_add_fc");
|
|
||||||
const packLinkCI = document.getElementById("preview_sticker_pack_add_ci");
|
|
||||||
const ElementInstructionOV = document.getElementById(
|
|
||||||
"preview_sticker_pack_add_to_element_overlay"
|
|
||||||
);
|
|
||||||
const ElementInstruction = document.getElementById(
|
|
||||||
"preview_sticker_pack_add_to_element"
|
|
||||||
);
|
|
||||||
|
|
||||||
const stickerpacksIndexContainer =
|
|
||||||
document.getElementById("stickerpacks_index");
|
|
||||||
|
|
||||||
let index = null;
|
|
||||||
const searchParams = new URLSearchParams(window.location.search);
|
|
||||||
const pack_id = searchParams.get("id");
|
|
||||||
|
|
||||||
async function loadIndex() {
|
|
||||||
index = await fetch(`${window.location.origin}/stickerpacks/index.json`)
|
|
||||||
.then((res) => {
|
|
||||||
if (!res.ok) {
|
|
||||||
throw new Error("not found");
|
|
||||||
}
|
|
||||||
return res.json();
|
|
||||||
})
|
|
||||||
.then((json) => {
|
|
||||||
return json;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
console.error(e);
|
|
||||||
return null;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!pack_id) {
|
|
||||||
loadStickerpacks();
|
|
||||||
} else if (!index) {
|
|
||||||
stickerpacksIndexContainer.classList.remove("hidden");
|
|
||||||
stickerpacksIndexContainer.innerHTML = "no index.json found";
|
|
||||||
} else {
|
|
||||||
loadPack(pack_id);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function imageIsLoaded(img_id, img_placeholder) {
|
|
||||||
const __img = document.getElementById(img_id);
|
|
||||||
const __img_placeholder = document.getElementById(img_placeholder);
|
|
||||||
if (__img.complete) {
|
|
||||||
__img_placeholder.classList.add("hidden");
|
|
||||||
__img.classList.remove("hidden");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadStickerpacks() {
|
|
||||||
stickerpacksIndexContainer.classList.remove("hidden");
|
|
||||||
stickerpacksIndexContainer.classList.add("grid");
|
|
||||||
for (let i = 0; i < index.packs.length; i++) {
|
|
||||||
const data = await fetch(
|
|
||||||
`${window.location.origin}/stickerpacks/${index.packs[i]}`
|
|
||||||
)
|
|
||||||
.then((res) => {
|
|
||||||
if (!res.ok) {
|
|
||||||
throw new Error("not found");
|
|
||||||
}
|
|
||||||
return res.json();
|
|
||||||
})
|
|
||||||
.then((json) => {
|
|
||||||
return json;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
console.error(e);
|
|
||||||
return null;
|
|
||||||
});
|
|
||||||
if (!data) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
const _tmp_id = data.stickers[0].id;
|
|
||||||
stickerpacksIndexContainer.innerHTML += `
|
|
||||||
<a href="index.html?id=${index.packs[i].split(".json")[0]}">
|
|
||||||
<div class="flex gap-4 items-center bg-stone-800 text-slate-200 p-4 rounded-lg">
|
|
||||||
<img src="${getStickerImage(data.stickers[0].id)}" alt="${
|
|
||||||
data.stickers[0].body
|
|
||||||
}" class="hidden object-contain w-24" id="${_tmp_id}"/>
|
|
||||||
<img src="static/images/sticker.png" alt="${
|
|
||||||
data.stickers[0].body
|
|
||||||
}" class="object-contain w-24" id="${_tmp_id}-placeholder"/>
|
|
||||||
<div>
|
|
||||||
<p class="text-2xl">${data.title}</p>
|
|
||||||
${
|
|
||||||
data.hasOwnProperty("author") && data.author.name
|
|
||||||
? `<p class="text-xl">${data.author.name}</p>`
|
|
||||||
: ""
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
`;
|
|
||||||
const __img = document.getElementById(_tmp_id);
|
|
||||||
__img.addEventListener("load", () => {
|
|
||||||
imageIsLoaded(_tmp_id, `${_tmp_id}-placeholder`);
|
|
||||||
__img.removeEventListener("load", this);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadPack(pack) {
|
|
||||||
const data = await fetch(
|
|
||||||
`${window.location.origin}/stickerpacks/${pack}.json`
|
|
||||||
)
|
|
||||||
.then((res) => {
|
|
||||||
if (!res.ok) {
|
|
||||||
throw new Error("not found");
|
|
||||||
}
|
|
||||||
return res.json();
|
|
||||||
})
|
|
||||||
.then((json) => {
|
|
||||||
return json;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
console.error(e);
|
|
||||||
return null;
|
|
||||||
});
|
|
||||||
packPreview.classList.remove("hidden");
|
|
||||||
packPreview.classList.add("flex");
|
|
||||||
if (!data) {
|
|
||||||
packName.innerHTML = "sticker pack not found";
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
updatePackInfo(data);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getStickerImage(stickerID) {
|
|
||||||
const _image_path = `${stickerID.slice(0, 2)}/${stickerID.slice(
|
|
||||||
2,
|
|
||||||
4
|
|
||||||
)}/${stickerID.slice(4)}`;
|
|
||||||
|
|
||||||
return `${index.homeserver_url}/__thumbnail/${_image_path}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function updatePackInfo(data) {
|
|
||||||
packName.innerHTML = data.title;
|
|
||||||
|
|
||||||
if (data.hasOwnProperty("author") && data.author) {
|
|
||||||
packAuthor_by.classList.remove("hidden");
|
|
||||||
packAuthor.classList.remove("hidden");
|
|
||||||
packAuthor.innerHTML = data.author.name;
|
|
||||||
|
|
||||||
if (data.author.url) {
|
|
||||||
packAuthor.href = data.author.url;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
packImage.src = getStickerImage(data.stickers[0].id);
|
|
||||||
|
|
||||||
if (data.hasOwnProperty("rating") && data.rating) {
|
|
||||||
switch (data.rating.toLowerCase()) {
|
|
||||||
case "safe":
|
|
||||||
document
|
|
||||||
.getElementById("preview_sticker_pack_rating_safe")
|
|
||||||
.classList.remove("hidden");
|
|
||||||
break;
|
|
||||||
case "questionable":
|
|
||||||
document
|
|
||||||
.getElementById("preview_sticker_pack_rating_ques")
|
|
||||||
.classList.remove("hidden");
|
|
||||||
break;
|
|
||||||
case "explicit":
|
|
||||||
document
|
|
||||||
.getElementById("preview_sticker_pack_rating_expl")
|
|
||||||
.classList.remove("hidden");
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
packLinkTG.href = `https://t.me/addstickers/${data.id}`;
|
|
||||||
packLinkTG.classList.remove("hidden");
|
|
||||||
packLinkTG.classList.add("flex");
|
|
||||||
|
|
||||||
if (data.hasOwnProperty("room_id") && data.room_id) {
|
|
||||||
packLinkFC.href = `https://matrix.to/#/${data.room_id}`;
|
|
||||||
packLinkCI.href = `https://matrix.to/#/${data.room_id}`;
|
|
||||||
packLinkFC.classList.remove("hidden");
|
|
||||||
packLinkFC.classList.add("flex");
|
|
||||||
packLinkCI.classList.remove("hidden");
|
|
||||||
packLinkCI.classList.add("flex");
|
|
||||||
}
|
|
||||||
|
|
||||||
packStickersC.classList.remove("hidden");
|
|
||||||
packStickersCount.innerHTML = `(${data.stickers.length})`;
|
|
||||||
for (let i = 0; i < data.stickers.length; i++) {
|
|
||||||
const sticker = data.stickers[i];
|
|
||||||
const stickerImage = document.createElement("img");
|
|
||||||
const stickerImagePlaceholder = document.createElement("img");
|
|
||||||
stickerImagePlaceholder.src = `static/images/sticker.png`;
|
|
||||||
stickerImagePlaceholder.id = `${sticker.id}-placeholder`;
|
|
||||||
stickerImagePlaceholder.alt = sticker.body;
|
|
||||||
stickerImagePlaceholder.classList.add("object-contain", "md:w-20", "w-24");
|
|
||||||
packStickers.appendChild(stickerImagePlaceholder);
|
|
||||||
stickerImage.src = getStickerImage(sticker.id);
|
|
||||||
stickerImage.id = sticker.id;
|
|
||||||
stickerImage.alt = sticker.body;
|
|
||||||
stickerImage.classList.add("object-contain", "md:w-20", "w-24", "hidden");
|
|
||||||
packStickers.appendChild(stickerImage);
|
|
||||||
|
|
||||||
stickerImage.addEventListener("load", () => {
|
|
||||||
imageIsLoaded(sticker.id, `${sticker.id}-placeholder`);
|
|
||||||
stickerImage.removeEventListener("load", this);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleElementInstruction() {
|
|
||||||
ElementInstructionOV.classList.toggle("hidden");
|
|
||||||
ElementInstruction.classList.toggle("hidden");
|
|
||||||
|
|
||||||
ElementInstruction.classList.toggle("flex");
|
|
||||||
}
|
|
||||||
|
|
||||||
loadIndex();
|
|
||||||
|
|
@ -588,30 +588,34 @@ video {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fixed {
|
.sr-only {
|
||||||
position: fixed;
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
padding: 0;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
white-space: nowrap;
|
||||||
|
border-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.absolute {
|
.fixed {
|
||||||
position: absolute;
|
position: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inset-0 {
|
.inset-0 {
|
||||||
inset: 0px;
|
inset: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-0 {
|
|
||||||
top: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-16 {
|
|
||||||
top: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-8 {
|
.top-8 {
|
||||||
top: 2rem;
|
top: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.left-1\/2 {
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
.-z-10 {
|
.-z-10 {
|
||||||
z-index: -10;
|
z-index: -10;
|
||||||
}
|
}
|
||||||
|
|
@ -633,18 +637,14 @@ video {
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt-4 {
|
.inline {
|
||||||
margin-top: 1rem;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex {
|
.flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid {
|
|
||||||
display: grid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -653,6 +653,10 @@ video {
|
||||||
height: 4rem;
|
height: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h-48 {
|
||||||
|
height: 12rem;
|
||||||
|
}
|
||||||
|
|
||||||
.min-h-screen {
|
.min-h-screen {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
@ -661,47 +665,41 @@ video {
|
||||||
width: 2.5rem;
|
width: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-20 {
|
.w-16 {
|
||||||
width: 5rem;
|
width: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-64 {
|
.w-48 {
|
||||||
width: 16rem;
|
width: 12rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-full {
|
.w-full {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-24 {
|
|
||||||
width: 6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-32 {
|
|
||||||
width: 8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-fit {
|
|
||||||
width: -moz-fit-content;
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.max-w-\[90\%\] {
|
.max-w-\[90\%\] {
|
||||||
max-width: 90%;
|
max-width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-grow {
|
.-translate-x-1\/2 {
|
||||||
flex-grow: 1;
|
--tw-translate-x: -50%;
|
||||||
|
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));
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-spin {
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-col {
|
.flex-col {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-wrap {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.items-center {
|
.items-center {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
@ -710,18 +708,6 @@ video {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.justify-between {
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.justify-around {
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
|
|
||||||
.justify-evenly {
|
|
||||||
justify-content: space-evenly;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap-2 {
|
.gap-2 {
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -730,27 +716,14 @@ video {
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gap-1 {
|
.overflow-x-hidden {
|
||||||
gap: 0.25rem;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rounded-lg {
|
.rounded-lg {
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-2 {
|
|
||||||
border-width: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-solid {
|
|
||||||
border-style: solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-black {
|
|
||||||
--tw-border-opacity: 1;
|
|
||||||
border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-\[\#259d7b\] {
|
.bg-\[\#259d7b\] {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(37 157 123 / var(--tw-bg-opacity, 1));
|
background-color: rgb(37 157 123 / var(--tw-bg-opacity, 1));
|
||||||
|
|
@ -805,6 +778,10 @@ video {
|
||||||
--tw-gradient-to: #000 var(--tw-gradient-to-position);
|
--tw-gradient-to: #000 var(--tw-gradient-to-position);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fill-green-500 {
|
||||||
|
fill: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
.object-contain {
|
.object-contain {
|
||||||
-o-object-fit: contain;
|
-o-object-fit: contain;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
|
|
@ -819,11 +796,26 @@ video {
|
||||||
padding-right: 1rem;
|
padding-right: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.px-8 {
|
||||||
|
padding-left: 2rem;
|
||||||
|
padding-right: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
.py-2 {
|
.py-2 {
|
||||||
padding-top: 0.5rem;
|
padding-top: 0.5rem;
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.py-4 {
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.py-8 {
|
||||||
|
padding-top: 2rem;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
.text-2xl {
|
.text-2xl {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
line-height: 2rem;
|
line-height: 2rem;
|
||||||
|
|
@ -834,9 +826,9 @@ video {
|
||||||
line-height: 2.5rem;
|
line-height: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-xl {
|
.text-gray-200 {
|
||||||
font-size: 1.25rem;
|
--tw-text-opacity: 1;
|
||||||
line-height: 1.75rem;
|
color: rgb(229 231 235 / var(--tw-text-opacity, 1));
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-green-400 {
|
.text-green-400 {
|
||||||
|
|
@ -849,11 +841,6 @@ video {
|
||||||
color: rgb(239 68 68 / var(--tw-text-opacity, 1));
|
color: rgb(239 68 68 / var(--tw-text-opacity, 1));
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-slate-200 {
|
|
||||||
--tw-text-opacity: 1;
|
|
||||||
color: rgb(226 232 240 / var(--tw-text-opacity, 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-slate-50 {
|
.text-slate-50 {
|
||||||
--tw-text-opacity: 1;
|
--tw-text-opacity: 1;
|
||||||
color: rgb(248 250 252 / var(--tw-text-opacity, 1));
|
color: rgb(248 250 252 / var(--tw-text-opacity, 1));
|
||||||
|
|
@ -869,6 +856,11 @@ video {
|
||||||
color: rgb(234 179 8 / var(--tw-text-opacity, 1));
|
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 {
|
.underline {
|
||||||
text-decoration-line: underline;
|
text-decoration-line: underline;
|
||||||
}
|
}
|
||||||
|
|
@ -889,30 +881,6 @@ video {
|
||||||
transition-duration: 150ms;
|
transition-duration: 150ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
.\[grid-template-columns\:repeat\(1\2c minmax\(0\2c 1fr\)\)\] {
|
|
||||||
grid-template-columns: repeat(1,minmax(0,1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(128px\2c 256px\)\)\] {
|
|
||||||
grid-template-columns: repeat(auto-fill,minmax(128px,256px));
|
|
||||||
}
|
|
||||||
|
|
||||||
.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(128px\2c 372px\)\)\] {
|
|
||||||
grid-template-columns: repeat(auto-fill,minmax(128px,372px));
|
|
||||||
}
|
|
||||||
|
|
||||||
.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(128px\2c 512px\)\)\] {
|
|
||||||
grid-template-columns: repeat(auto-fill,minmax(128px,512px));
|
|
||||||
}
|
|
||||||
|
|
||||||
.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(128px\2c 512pxpx\)\)\] {
|
|
||||||
grid-template-columns: repeat(auto-fill,minmax(128px,512pxpx));
|
|
||||||
}
|
|
||||||
|
|
||||||
.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(128px\2c 512x\)\)\] {
|
|
||||||
grid-template-columns: repeat(auto-fill,minmax(128px,512x));
|
|
||||||
}
|
|
||||||
|
|
||||||
.tiledBackground {
|
.tiledBackground {
|
||||||
background-image: url('images/background-white.png');
|
background-image: url('images/background-white.png');
|
||||||
background-repeat: repeat;
|
background-repeat: repeat;
|
||||||
|
|
@ -923,39 +891,19 @@ video {
|
||||||
margin-top: -16px;
|
margin-top: -16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hover\:scale-110:hover {
|
.hover\:scale-105:hover {
|
||||||
--tw-scale-x: 1.1;
|
--tw-scale-x: 1.05;
|
||||||
--tw-scale-y: 1.1;
|
--tw-scale-y: 1.05;
|
||||||
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));
|
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));
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.md\:top-\[25\%\] {
|
|
||||||
top: 25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:top-64 {
|
|
||||||
top: 16rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:top-32 {
|
.md\:top-32 {
|
||||||
top: 8rem;
|
top: 8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.md\:w-\[600px\] {
|
.md\:w-\[768px\] {
|
||||||
width: 600px;
|
width: 768px;
|
||||||
}
|
|
||||||
|
|
||||||
.md\:w-24 {
|
|
||||||
width: 6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:w-20 {
|
|
||||||
width: 5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:w-64 {
|
|
||||||
width: 16rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.md\:max-w-\[768px\] {
|
.md\:max-w-\[768px\] {
|
||||||
|
|
@ -966,11 +914,14 @@ video {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
.md\:items-center {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md\:whitespace-pre {
|
.md\:whitespace-pre {
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.dark\:text-gray-600 {
|
||||||
|
--tw-text-opacity: 1;
|
||||||
|
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
19
stickerpicker/package.json
Normal file
19
stickerpicker/package.json
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"name": "maunium-stickerpicker",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"description": "A fast and simple Matrix sticker picker widget",
|
||||||
|
"repository": "https://github.com/maunium/stickerpicker",
|
||||||
|
"author": "Tulir Asokan <tulir@maunium.net>",
|
||||||
|
"license": "AGPL-3.0-or-later",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"esinstall": "node ./esinstall.js",
|
||||||
|
"sass": "sass --no-source-map --style=compressed style/"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"esinstall": "^1.1.7",
|
||||||
|
"htm": "^3.1.0",
|
||||||
|
"preact": "^10.5.14",
|
||||||
|
"sass": "^1.42.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: ["./index.html"],
|
content: ["./src/templates/**/*.{html,js}"],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue