mirror of
https://github.com/wah-su/mstickers.git
synced 2025-04-05 07:44:35 +00:00
Merge pull request #4 from wah-su/main
#4 Instead of ?id use SSG with pack id as a path
This commit is contained in:
Kentai Radiquum
GitHub
commit
627e95be77
24 changed files with 2203 additions and 441 deletions
59
.github/workflows/pregenPreview.yaml
vendored
Normal file
59
.github/workflows/pregenPreview.yaml
vendored
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
name: Deploy to Pages
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- stickerpacks
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
|
||||
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
|
||||
concurrency:
|
||||
group: "pages"
|
||||
cancel-in-progress: false
|
||||
|
||||
defaults:
|
||||
run:
|
||||
shell: bash
|
||||
|
||||
jobs:
|
||||
# Build job
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Install nodejs
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 20
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
submodules: recursive
|
||||
fetch-depth: 0
|
||||
- name: Setup Pages
|
||||
id: pages
|
||||
uses: actions/configure-pages@v4
|
||||
- name: Install Node.js dependencies
|
||||
run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
|
||||
- name: Build website
|
||||
run: npm run build
|
||||
- name: Upload artifact
|
||||
uses: actions/upload-pages-artifact@v2
|
||||
with:
|
||||
path: ./
|
||||
|
||||
# Deployment job
|
||||
deploy:
|
||||
environment:
|
||||
name: github-pages
|
||||
url: ${{ steps.deployment.outputs.page_url }}
|
||||
runs-on: ubuntu-latest
|
||||
needs: build
|
||||
steps:
|
||||
- name: Deploy to GitHub Pages
|
||||
id: deployment
|
||||
uses: actions/deploy-pages@v3
|
||||
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -1,2 +1,3 @@
|
|||
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>
|
||||
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
|
||||
40
src/index.js
Normal file
40
src/index.js
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
const config = require("./config");
|
||||
const fs = require("fs");
|
||||
|
||||
const _CreatePackPage = require("./templates/pack");
|
||||
const _CreatePacksIndex = require("./templates/index");
|
||||
|
||||
function GenerateStaticSite() {
|
||||
let PackIndex = null
|
||||
let Packs = [];
|
||||
|
||||
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));
|
||||
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");
|
||||
|
||||
}
|
||||
|
||||
GenerateStaticSite();
|
||||
module.exports = GenerateStaticSite
|
||||
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;
|
||||
20
src/templates/components/packHead.js
Normal file
20
src/templates/components/packHead.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
|
||||
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
|
||||
48
src/templates/components/packPreview.js
Normal file
48
src/templates/components/packPreview.js
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
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;
|
||||
97
src/templates/index.js
Normal file
97
src/templates/index.js
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
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
|
||||
66
src/templates/pack.js
Normal file
66
src/templates/pack.js
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
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
|
||||
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,24 +588,28 @@ video {
|
|||
}
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
.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;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.inset-0 {
|
||||
inset: 0px;
|
||||
}
|
||||
|
||||
.top-0 {
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.top-16 {
|
||||
top: 4rem;
|
||||
.left-1\/2 {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.top-8 {
|
||||
|
|
@ -633,8 +637,8 @@ video {
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.flex {
|
||||
|
|
@ -653,6 +657,14 @@ video {
|
|||
height: 4rem;
|
||||
}
|
||||
|
||||
.h-24 {
|
||||
height: 6rem;
|
||||
}
|
||||
|
||||
.h-48 {
|
||||
height: 12rem;
|
||||
}
|
||||
|
||||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
|
@ -661,39 +673,45 @@ video {
|
|||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.w-20 {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.w-64 {
|
||||
width: 16rem;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
.w-16 {
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
.w-24 {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.w-32 {
|
||||
width: 8rem;
|
||||
.w-48 {
|
||||
width: 12rem;
|
||||
}
|
||||
|
||||
.w-fit {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.max-w-\[90\%\] {
|
||||
max-width: 90%;
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.-translate-x-1\/2 {
|
||||
--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-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -710,18 +728,6 @@ video {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.justify-evenly {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
|
@ -734,6 +740,10 @@ video {
|
|||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.overflow-x-hidden {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
|
@ -805,6 +815,10 @@ video {
|
|||
--tw-gradient-to: #000 var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.fill-green-500 {
|
||||
fill: #22c55e;
|
||||
}
|
||||
|
||||
.object-contain {
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
|
|
@ -819,11 +833,26 @@ video {
|
|||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.px-8 {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.py-4 {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.py-8 {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
|
|
@ -839,6 +868,11 @@ video {
|
|||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-gray-200 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(229 231 235 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-green-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(74 222 128 / var(--tw-text-opacity, 1));
|
||||
|
|
@ -849,11 +883,6 @@ video {
|
|||
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 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(248 250 252 / var(--tw-text-opacity, 1));
|
||||
|
|
@ -869,6 +898,16 @@ 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;
|
||||
}
|
||||
|
|
@ -889,30 +928,18 @@ video {
|
|||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.\[grid-template-columns\:repeat\(1\2c minmax\(0\2c 1fr\)\)\] {
|
||||
grid-template-columns: repeat(1,minmax(0,1fr));
|
||||
.\[grid-template-columns\:100\%\] {
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
|
||||
.\[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 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-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 {
|
||||
background-image: url('images/background-white.png');
|
||||
background-repeat: repeat;
|
||||
|
|
@ -923,39 +950,19 @@ video {
|
|||
margin-top: -16px;
|
||||
}
|
||||
|
||||
.hover\:scale-110:hover {
|
||||
--tw-scale-x: 1.1;
|
||||
--tw-scale-y: 1.1;
|
||||
.hover\:scale-105:hover {
|
||||
--tw-scale-x: 1.05;
|
||||
--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));
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:top-\[25\%\] {
|
||||
top: 25%;
|
||||
}
|
||||
|
||||
.md\:top-64 {
|
||||
top: 16rem;
|
||||
}
|
||||
|
||||
.md\:top-32 {
|
||||
top: 8rem;
|
||||
}
|
||||
|
||||
.md\:w-\[600px\] {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.md\:w-24 {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.md\:w-20 {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.md\:w-64 {
|
||||
width: 16rem;
|
||||
.md\:w-\[768px\] {
|
||||
width: 768px;
|
||||
}
|
||||
|
||||
.md\:max-w-\[768px\] {
|
||||
|
|
@ -966,11 +973,22 @@ video {
|
|||
flex-direction: row;
|
||||
}
|
||||
|
||||
.md\:items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.md\:whitespace-pre {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.md\:\[grid-template-columns\:repeat\(auto-fill\2c 384px\)\] {
|
||||
grid-template-columns: repeat(auto-fill,384px);
|
||||
}
|
||||
|
||||
.md\:\[grid-template-columns\:repeat\(auto-fill\2c minmax\(380px\2c 500px\)\)\] {
|
||||
grid-template-columns: repeat(auto-fill,minmax(380px,500px));
|
||||
}
|
||||
}
|
||||
|
||||
@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"
|
||||
}
|
||||
}
|
||||
|
|
@ -33,10 +33,7 @@ let HOMESERVER_URL = "https://matrix-client.matrix.org";
|
|||
|
||||
// const makeThumbnailURL = mxc => `${HOMESERVER_URL}/_matrix/media/v3/thumbnail/${mxc.slice(6)}?height=128&width=128&method=scale`
|
||||
const makeThumbnailURL = (mxc) =>
|
||||
`${HOMESERVER_URL}/__thumbnail/${mxc.slice(0, 2)}/${mxc.slice(
|
||||
2,
|
||||
4
|
||||
)}/${mxc.slice(4)}`;
|
||||
`${HOMESERVER_URL}${mxc.slice(0, 2)}/${mxc.slice(2,4)}/${mxc.slice(4)}`;
|
||||
|
||||
// We need to detect iOS webkit because it has a bug related to scrolling non-fixed divs
|
||||
// This is also used to fix scrolling to sections on Element iOS
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./index.html"],
|
||||
content: ["./src/templates/**/*.{html,js}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue