[Various] Theme color palette

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);

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;

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);

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)

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);