diff --git a/package-lock.json b/package-lock.json index 0e977ad..c09791e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,7 @@ "didyoumean": "^1.2.2", "dlv": "^1.1.3", "eastasianwidth": "^0.2.0", + "ejs": "^3.1.10", "emoji-regex": "^9.2.2", "express": "^4.21.2", "fast-glob": "^3.3.2", @@ -278,6 +279,11 @@ "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==" }, + "node_modules/async": { + "version": "3.2.6", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz", + "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==" + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -379,6 +385,35 @@ "node": ">= 6" } }, + "node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/chalk/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, "node_modules/chokidar": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz", @@ -431,6 +466,11 @@ "node": ">= 6" } }, + "node_modules/concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" + }, "node_modules/content-disposition": { "version": "0.5.4", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", @@ -545,6 +585,20 @@ "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==" }, + "node_modules/ejs": { + "version": "3.1.10", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz", + "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==", + "dependencies": { + "jake": "^10.8.5" + }, + "bin": { + "ejs": "bin/cli.js" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/emoji-regex": { "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", @@ -677,6 +731,25 @@ "reusify": "^1.0.4" } }, + "node_modules/filelist": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz", + "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==", + "dependencies": { + "minimatch": "^5.0.1" + } + }, + "node_modules/filelist/node_modules/minimatch": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", + "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/fill-range": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", @@ -834,6 +907,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "engines": { + "node": ">=8" + } + }, "node_modules/has-symbols": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz", @@ -974,6 +1055,43 @@ "@pkgjs/parseargs": "^0.11.0" } }, + "node_modules/jake": { + "version": "10.9.2", + "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.2.tgz", + "integrity": "sha512-2P4SQ0HrLQ+fw6llpLnOaGAvN2Zu6778SJMrCUwns4fOoG9ayrTiZk3VV8sCPkVZF8ab0zksVpS8FDY5pRCNBA==", + "dependencies": { + "async": "^3.2.3", + "chalk": "^4.0.2", + "filelist": "^1.0.4", + "minimatch": "^3.1.2" + }, + "bin": { + "jake": "bin/cli.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/jake/node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/jake/node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, "node_modules/jiti": { "version": "1.21.7", "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz", @@ -1845,6 +1963,17 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/supports-preserve-symlinks-flag": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", diff --git a/package.json b/package.json index 115ddda..9ebf517 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "didyoumean": "^1.2.2", "dlv": "^1.1.3", "eastasianwidth": "^0.2.0", + "ejs": "^3.1.10", "emoji-regex": "^9.2.2", "express": "^4.21.2", "fast-glob": "^3.3.2", diff --git a/src/config.js b/src/config.js index 21cf102..463b1cd 100644 --- a/src/config.js +++ b/src/config.js @@ -1,6 +1,6 @@ const config = { - stickerPacksDir: "./stickerpacks", - outDir: "./", + stickerPacksDir: "stickerpacks", + outDir: "sticker", homeserverUrl: "https://synapse.wah.su/__thumbnail/" }; diff --git a/src/index.js b/src/index.js index 75e7cd0..0027b88 100644 --- a/src/index.js +++ b/src/index.js @@ -2,9 +2,10 @@ const config = require("./config"); const fs = require("fs"); const path = require("path"); const { log } = require("./utils"); +let ejs = require("ejs"); -const _CreatePackPage = require("./templates/pack"); -const _CreatePacksIndex = require("./templates/index"); +// const _CreatePackPage = require("./templates/pack"); +// const _CreatePacksIndex = require("./templates/index"); let PackIndex = null; let Packs = []; @@ -51,11 +52,9 @@ if (OutPath != ParPath) { } PackIndex.packs.forEach((pack) => { - const packFile = JSON.parse( - fs.readFileSync(`${InpPath}${pack}`) - ); - if (!fs.existsSync(`${OutPath}${packFile.id}`)) fs.mkdirSync(`${OutPath}${packFile.id}`); - fs.writeFileSync(`${OutPath}${packFile.id}/index.html`, _CreatePackPage(PackIndex, packFile, isDev)); + const packFile = JSON.parse(fs.readFileSync(`${InpPath}${pack}`)); + // if (!fs.existsSync(`${OutPath}${packFile.id}`)) fs.mkdirSync(`${OutPath}${packFile.id}`); + // fs.writeFileSync(`${OutPath}${packFile.id}/index.html`, _CreatePackPage(PackIndex, packFile, isDev)); Packs.push({ id: packFile.id, name: packFile.title, @@ -67,7 +66,32 @@ PackIndex.packs.forEach((pack) => { rating: packFile.hasOwnProperty("rating") ? packFile.rating : null, stickers: packFile.stickers.length, }); - log("INFO", `Created preview for sticker set: ${packFile.title} (${packFile.id})`); + log( + "INFO", + `Created preview for sticker set: ${packFile.title} (${packFile.id})` + ); }); -fs.writeFileSync(`${OutPath}index.html`, _CreatePacksIndex(PackIndex, Packs, isDev)); + +const indexTemplate = fs.readFileSync( + path.join(ParPath, "src/templates/Base.ejs") +); +const html = ejs.render( + indexTemplate.toString(), + { + title: "TG -> Matrix Stickers Index", + description: `available ${PackIndex.packs.length} sticker packs`, + image: { + url: "./static/images/sticker.png", + mimetype: "image/png", + w: "96", + h: "96", + alt: "" + }, + path: config.OutPath, + isDev + }, + { root: path.join(ParPath, "src/templates") } +); +log("LOG", `\n\n${html}\n\n`); +fs.writeFileSync(`${OutPath}index.html`, html); log("INFO", "Generation complete"); diff --git a/src/templates/Base.ejs b/src/templates/Base.ejs new file mode 100644 index 0000000..9080d5f --- /dev/null +++ b/src/templates/Base.ejs @@ -0,0 +1,9 @@ + + + <%- include('/components/Head', {title, description, image, path, isDev}); %> + + <%- include("/components/Header", {path}) %> +
+
+ + \ No newline at end of file diff --git a/src/templates/components/Head.ejs b/src/templates/components/Head.ejs new file mode 100644 index 0000000..2948b9b --- /dev/null +++ b/src/templates/components/Head.ejs @@ -0,0 +1,20 @@ + + + + <%- title %> + + + + + + + + + + + <% if (isDev) { %> + + + + <% }; %> + \ No newline at end of file diff --git a/src/templates/components/Header.ejs b/src/templates/components/Header.ejs new file mode 100644 index 0000000..ad8235d --- /dev/null +++ b/src/templates/components/Header.ejs @@ -0,0 +1,5 @@ +
+
+ index page +
+
\ No newline at end of file diff --git a/src/templates/index.js b/src/templates/index.js index 2ea66e1..31189d9 100644 --- a/src/templates/index.js +++ b/src/templates/index.js @@ -62,28 +62,6 @@ function _CreatePacksIndex(index, packs, isDev) { packs.forEach((packLink) => packLinks.push(_PackLink(index, packLink))); return ` - - - - - - TG -> Matrix Stickers Index - - - - - - - - - - - ${isDev ? InjectWSConnection() : ""} - - -
-
-
${packLinks.join("\n")} @@ -91,7 +69,6 @@ function _CreatePacksIndex(index, packs, isDev) {
- ` } diff --git a/src/watch.js b/src/watch.js index c6df766..b7c9a29 100644 --- a/src/watch.js +++ b/src/watch.js @@ -74,7 +74,7 @@ function onExit() { process.exit(0); } -const watcher = chokidar.watch(["./src", "./stickerpacks"], { +const watcher = chokidar.watch(["./src", "./stickerpacks", "./static"], { ignored: (filePath, stats) => filePath.endsWith("index.json"), atomic: true, awaitWriteFinish: true, diff --git a/static/images/logo.svg b/static/images/logo.svg new file mode 100644 index 0000000..0c927dc --- /dev/null +++ b/static/images/logo.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/tailwind.css b/static/tailwind.css index 8ba6f24..965aec6 100644 --- a/static/tailwind.css +++ b/static/tailwind.css @@ -689,10 +689,6 @@ video { 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)); @@ -716,10 +712,6 @@ video { flex-direction: column; } -.flex-wrap { - flex-wrap: wrap; -} - .items-center { align-items: center; } @@ -728,6 +720,10 @@ video { justify-content: center; } +.gap-1 { + gap: 0.25rem; +} + .gap-2 { gap: 0.5rem; } @@ -736,10 +732,6 @@ video { gap: 1rem; } -.gap-1 { - gap: 0.25rem; -} - .overflow-x-hidden { overflow-x: hidden; } @@ -748,19 +740,6 @@ video { 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\] { --tw-bg-opacity: 1; background-color: rgb(37 157 123 / var(--tw-bg-opacity, 1)); @@ -903,11 +882,6 @@ video { 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; } @@ -936,10 +910,6 @@ video { 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)); -} - .tiledBackground { background-image: url('images/background-white.png'); background-repeat: repeat; @@ -977,10 +947,6 @@ video { 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)); } diff --git a/tailwind.config.js b/tailwind.config.js index e00955b..00108c5 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,6 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ["./src/templates/**/*.{html,js}"], + content: ["./src/templates/**/*.{html,js, ejs}"], theme: { extend: {}, },