From fc795a700b7dd8d039750e31046fec75015edb6d Mon Sep 17 00:00:00 2001 From: Oj Date: Sat, 17 Jul 2021 20:49:12 +0100 Subject: [PATCH] [Various] Theme color palette --- src/imageCdn.js | 52 ++++++++++++++++++++-------- src/index.js | 7 ++-- src/preprocessors/bdTheme.js | 25 +++----------- src/preprocessors/genericTheme.js | 57 +++++++++++++++++++++++++++---- src/preprocessors/pcTheme.js | 29 ++++------------ 5 files changed, 100 insertions(+), 70 deletions(-) diff --git a/src/imageCdn.js b/src/imageCdn.js index 79e61e8..20592f7 100644 --- a/src/imageCdn.js +++ b/src/imageCdn.js @@ -8,27 +8,49 @@ export default (manifest) => { const baseDir = join(distDir, 'img', manifest.name); return manifest.images ? Promise.all(manifest.images.map(async (x, i) => { + mkdirSync(baseDir, { recursive: true }); + + if (Array.isArray(x)) { + const finalName = `${i}.png`; + const finalFile = join(baseDir, finalName); + + // console.log('colors', x, i, finalFile); + + let i2 = 0; + for (const c of x) { + const file = join(baseDir, `${i2}.png`); + c[2] = file; + + console.log(c, file); + + await new Promise((res) => exec(`convert -size 212x112 xc:${c[1].replace('(', '\\(').replace(')', '\\)')} "${file}"`, res)); + + i2++; + } + + console.log(x); + + await new Promise((res) => exec(`montage ${x.map((c) => `"${c[2]}"`).join(' ')} -background "#101418" -tile 2x3 -geometry +6+6 - | convert - -trim "${finalFile}"`, res)); + + i2 = 0; + for (const c of x) { + const text = c[0].substring(2).replaceAll('-', ' ').replace('background ', '').replace(/\w\S*/g, (_) => _[0].toUpperCase() + _.substring(1).toLowerCase()); + + await new Promise((res) => exec(`convert -font 'Noto-Sans-Regular' -fill white -pointsize 20 -draw 'text ${(Math.floor(i2 / 3) * 230) + 100 - (text.length * 4)},${70 + (i2 % 3) * 125} "${text}"' "${finalFile}" "${finalFile}"`, res)); + + i2++; + } + + return `/img/${manifest.name}/${finalName}`; + } + + const rawFile = join(baseDir, x.split('/').pop()); const rawExt = rawFile.split('.').pop(); const finalName = `${i}.${rawExt === 'gif' ? 'gif' : 'png'}`; const finalFile = join(baseDir, finalName); - mkdirSync(baseDir, { recursive: true }); - - if (!x.includes('http')) { - console.log('color', x, i, finalFile); - - try { - await new Promise((res) => exec(`convert -size 330x200 xc:${x.replace('(', '\\(').replace(')', '\\)')} "${finalFile}"`, res)); - } catch (e) { - console.error('Failed to use ImageMagick to resize and compress, copying file as backup'); - // copyFileSync(rawFile, finalFile); - } - - return `/img/${manifest.name}/${finalName}`; - } - console.log(x, i, rawFile, finalFile); const writer = createWriteStream(rawFile); diff --git a/src/index.js b/src/index.js index 48e5c88..a63d029 100644 --- a/src/index.js +++ b/src/index.js @@ -179,10 +179,9 @@ for (const parentRepo of ModuleRepos) { ); if (preprocessor) { - const preOut = (await import(`./preprocessors/${preprocessor}.js`)).default( - `${cloneDir}${moduleDir}`, - repo, - ); + const preOut = await ( + await import(`./preprocessors/${preprocessor}.js`) + ).default(`${cloneDir}${moduleDir}`, repo); if (preOut !== undefined) { moduleDir = preOut; diff --git a/src/preprocessors/bdTheme.js b/src/preprocessors/bdTheme.js index 15f96a9..81df1b5 100644 --- a/src/preprocessors/bdTheme.js +++ b/src/preprocessors/bdTheme.js @@ -1,6 +1,8 @@ import { readFileSync, writeFileSync, mkdirSync, rmSync } from 'fs'; -export default (themePath, repo) => { +import generateThemeJS from './genericTheme.js'; + +export default async (themePath, repo) => { const content = readFileSync(themePath, 'utf8'); const metaReg = /@([^ ]*) (.*)/g; @@ -45,26 +47,7 @@ export default (themePath, repo) => { rmSync(themePath); mkdirSync(themePath); - const jsCode = `// Generated by MS2Builder - bdTheme preprocessor / porter -let style; - -export default { - goosemodHandlers: { - onImport: async () => { - style = document.createElement("style"); - document.head.appendChild(style); - style.appendChild( - document.createTextNode( - \`${content}\` - ) - ); - }, - - onRemove: async () => { - style.remove(); - }, - } -};`; + const jsCode = await generateThemeJS(manifest, content, repo); writeFileSync(`${themePath}/goosemodModule.json`, JSON.stringify(manifest)); writeFileSync(`${themePath}/index.js`, jsCode); diff --git a/src/preprocessors/genericTheme.js b/src/preprocessors/genericTheme.js index 65d8408..853160a 100644 --- a/src/preprocessors/genericTheme.js +++ b/src/preprocessors/genericTheme.js @@ -1,3 +1,5 @@ +import axios from 'axios'; + const discordVars = [ '--header-primary', '--header-secondary', @@ -55,10 +57,31 @@ const discordVars = [ '--deprecated-text-input-prefix', ]; -export default (manifest, _content, repo) => { +const imagePaletteVars = [ + '--background-primary', + '--background-secondary', + '--background-secondary-alt', + '--background-tertiary', + '--background-accent', + '--background-floating', +]; + +export default async (manifest, _content, repo) => { const content = _content.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$/g, '\\$'); - let variables = content.match(/--([^*!\n}]*): ([^*!\n}]*);/g) || []; + let variables = content.match(/--([^*!\n}]*): ([^*\n}]*);/g) || []; + + let imports = content.match(/@import url\(['"`]?(.*)['"`]?\);/g) || []; + for (const x of imports) { + const url = x.replace(/@import url\(['"`]?/, '').replace(/['"`]?\);/, ''); + + console.log(x, url); + + const imported = (await axios.get(url)).data; + + variables = variables.concat(imported.match(/--([^*!\n}]*): ([^*\n}]*);/g) || []); + } + if (variables.length > 0) variables = variables.map((x) => { const spl = x.split(':'); @@ -75,6 +98,28 @@ export default (manifest, _content, repo) => { return [name, val, type]; }); + const imagePalette = []; + + for (const wanted of imagePaletteVars) { + const v = variables.find((x) => x[0] === wanted); + + if (!v) { + console.log('aborting color palette image, could not find var', wanted); + break; + } + + while (v[1].startsWith('var(')) { + v[1] = variables.find((y) => y[0] === v[1].slice(4, -1))[1]; + } + + imagePalette.push([v[0], v[1]]); + } + + if (imagePalette.length === imagePaletteVars.length) { + if (!repo[4].images) repo[4].images = []; + repo[4].images.push(imagePalette); + } + // Filter out Discord standard vars, and duplicate names if (variables.length > 0) variables = variables.filter( @@ -122,7 +167,9 @@ export default (manifest, _content, repo) => { .replace('Dnd', 'DND')}', oninput: (val) => { - ${''/* x[2] === 'color' && x[1][0] !== '#' ? `val = 'rgb(' + parseInt(val.substring(1, 3), 16).toString() + ', ' + parseInt(val.substring(3, 5), 16).toString() + ', ' + parseInt(val.substring(5, 7), 16).toString() + ')'` : '' */} + ${ + '' /* x[2] === 'color' && x[1][0] !== '#' ? `val = 'rgb(' + parseInt(val.substring(1, 3), 16).toString() + ', ' + parseInt(val.substring(3, 5), 16).toString() + ', ' + parseInt(val.substring(5, 7), 16).toString() + ')'` : '' */ + } document.body.style.setProperty('${x[0]}', val); }, @@ -163,7 +210,3 @@ export default (manifest, _content, repo) => { } };`; }; -<<<<<<< HEAD - -======= ->>>>>>> 39784f0 ([GenericTheme > Settings] Fix hex color checking when not color type causing bad values oninput) diff --git a/src/preprocessors/pcTheme.js b/src/preprocessors/pcTheme.js index 9e1d771..3740243 100644 --- a/src/preprocessors/pcTheme.js +++ b/src/preprocessors/pcTheme.js @@ -1,7 +1,9 @@ import { readFileSync, writeFileSync, mkdirSync, rmSync } from 'fs'; import sass from 'sass'; -export default (manifestPath, repo) => { +import generateThemeJS from './genericTheme.js'; + +export default async (manifestPath, repo) => { const pcManifest = JSON.parse(readFileSync(manifestPath, 'utf8')); let manifest = { @@ -12,7 +14,7 @@ export default (manifestPath, repo) => { description: pcManifest.description, version: pcManifest.version, - authors: [ pcManifest.author ] + authors: [pcManifest.author], }; rmSync(manifestPath); @@ -21,7 +23,7 @@ export default (manifestPath, repo) => { if (pcManifest.theme.split('.').pop() === 'scss') { const cssPath = pcManifest.theme.split('.').slice(0, -1).concat('css').join('.'); - const compiled = (sass.renderSync({ file: pcManifest.theme })).css; + const compiled = sass.renderSync({ file: pcManifest.theme }).css; writeFileSync(cssPath, compiled); pcManifest.theme = cssPath; @@ -29,26 +31,7 @@ export default (manifestPath, repo) => { const content = readFileSync(pcManifest.theme, 'utf8'); - const jsCode = `// Generated by MS2Builder - pcTheme preprocessor / porter -let style; - -export default { - goosemodHandlers: { - onImport: async () => { - style = document.createElement("style"); - document.head.appendChild(style); - style.appendChild( - document.createTextNode( - \`${content}\` - ) - ); - }, - - onRemove: async () => { - style.remove(); - }, - } -};`; + const jsCode = await generateThemeJS(manifest, content, repo); writeFileSync(`${manifestPath}/goosemodModule.json`, JSON.stringify(manifest)); writeFileSync(`${manifestPath}/index.js`, jsCode);