@neonwilderness/moveskins 1.1.0

package/src/create.js

@@ -0,0 +1,65 @@
+/**
+ * Creates a new skin locally
+ */
+import yargs from "yargs/yargs";
+import chalk from "chalk";
+import fs from "node:fs";
+import path from "node:path";
+import * as Twoday from "@neonwilderness/twoday";
+import { skinRegister } from "./_utils.js";
+const argv = yargs(process.argv.slice(2)).argv;
+
+// Validates script param --alias (blog name/alias)
+if (!argv.alias) {
+  console.log(chalk.red("Error: You must specify a blogname alias with --alias={alias} !!"));
+  process.exit(1);
+}
+const alias = argv.alias.trim().toLowerCase();
+
+// Validates script param --skin (skin name to be created)
+if (!argv.skin) {
+  console.log(
+    chalk.red("Error: You must specify a skin name to be created with --skin={skinname} !!"),
+  );
+  console.log(chalk.blue("Example: node ./src/create --alias=info --skin=Site.mynewskin"));
+  process.exit(1);
+}
+const skinName = argv.skin;
+
+// Validates skin name syntax (must have 2 strings around a dot)
+const nameParts = skinName.split(".").reduce((all, part) => {
+  if (part.trim().length) all.push(part);
+  return all;
+}, []);
+if (nameParts.length !== 2) {
+  console.log(chalk.red(`Error: Wrong skin name syntax "${skinName}" !!`));
+  console.log(chalk.blue("Use skin name syntax: --skin={hoptype}.{name}"));
+  process.exit(1);
+}
+
+// Main async function to validate hoptype, register the skin and create the physical skin file
+(async () => {
+  try {
+    const td = new Twoday.Twoday("prod");
+    const { valid, prototype, _name } = await td.isValidHoptype(skinName);
+
+    if (!valid) {
+      console.log(
+        chalk.red(`Error: Sorry, there is no Hoptype "${prototype}" in the Twoday code base!!`),
+      );
+      process.exit(1);
+    }
+
+    skinRegister.load();
+    const newSkin = "(new skin)";
+    skinRegister.setData(skinName, `${skinName} ${newSkin}`, `${newSkin}`);
+    skinRegister.store();
+
+    const dir = path.resolve(process.cwd(), "skins", alias);
+    if (!fs.existsSync(dir)) fs.mkdirSync(dir);
+    fs.writeFileSync(path.resolve(dir, `${skinName}.skin`), `<p><!-- ${newSkin} --></p>\n`);
+    console.log(chalk.green(`New skin "${skinName}" successfully established in /skins/${alias}.`));
+  } catch (e) {
+    console.log(chalk.red(`An error occured while creating the new skin "${skinName}": ${e}`));
+  }
+})();

package/src/images.js

@@ -0,0 +1,55 @@
+/**
+ * Upload /skins/{alias}/images items to create layout images
+ */
+import yargs from "yargs/yargs";
+import chalk from "chalk";
+import fs from "node:fs";
+import path from "node:path";
+import * as Twoday from "@neonwilderness/twoday";
+import { config } from "dotenv-safe";
+config();
+const argv = yargs(process.argv.slice(2)).argv;
+
+// Validates script param --alias (blog name/alias)
+if (!argv.alias) {
+  console.log(chalk.red("Error: You must specify a blogname alias with --alias={alias} !!"));
+  process.exit(1);
+}
+const alias = argv.alias.trim().toLowerCase();
+
+if (!argv.to || (argv.to !== "dev" && argv.to !== "prod")) {
+  console.log("Error: You must specify a target platform with --to=dev|prod");
+  process.exit(1);
+}
+const platform = argv.to.toLowerCase();
+
+(async () => {
+  try {
+    const td = new Twoday.Twoday(platform);
+    await td.login();
+
+    const imageFolder = path.resolve(process.cwd(), "skins", alias, "images");
+    if (!fs.existsSync(imageFolder)) {
+      console.log(chalk.red(`Error: image folder for alias ${alias} does not exist!!`));
+      process.exit(1);
+    }
+
+    const images = fs.readdirSync(imageFolder);
+    let uploaded = 0;
+    for (const image of images) {
+      const [name, _ext] = image.split(".");
+      if (name.startsWith("_")) continue;
+      const imgID = await td.createImage(alias, {
+        alias: name,
+        path: path.resolve(imageFolder, image),
+      });
+      uploaded++;
+      console.log(chalk.green(`New image "${image}" =>${imgID} saved.`));
+    }
+    console.log(chalk.blue(`${uploaded} images uploaded to alias "${alias}".`));
+  } catch (e) {
+    console.log(chalk.red(`Error while creating images for alias "${alias}": ${e}`));
+  } finally {
+    await td.logout();
+  }
+})();

package/src/index.js

@@ -0,0 +1,114 @@
+/**
+ * Downloads modified skins from dev|prod Twoday for one or more alias(es) to a local ./skin folder
+ *   or
+ * Uploads local skins to dev|prod Twoday for selected aliases
+ * Examples:
+ *   node ./index --from=dev --alias=www,info     (downloads www/info skins from twoday-test.net)
+ *   node ./index --to=dev --alias=info           (uploads local info skins to twoday-test.net)
+ *   node ./index --from=prod --alias=*           (downloads www/info/help/top skins from twoday.net)
+ *   node ./index --to=prod --alias=www           (uploads local www skins to twoday.net)
+ * ================================================================================================
+ *   An Alias of * is equal to the core Twoday blogs: www,info,help,top
+ *   User/Psw in .env file needs to have admin rights on the selected alias(es) or it won't work!
+ */
+import yargs from "yargs/yargs";
+const argv = yargs(process.argv.slice(2)).options({
+  from: {
+    alias: "f",
+    description: 'Platform where to download the skins from: "dev" or "prod"',
+    type: "string",
+  },
+  to: {
+    alias: "t",
+    description: 'Platform where to compare or upload the skins to: "dev" or "prod"',
+    type: "string",
+  },
+  alias: {
+    alias: "a",
+    description: "One or more alias blog name/s delimited by comma (no space)",
+    type: "string",
+  },
+  skin: {
+    alias: "s",
+    description: "Skin selection string (regex) to filter the skins to upload",
+    type: "string",
+  },
+  backup: {
+    alias: "b",
+    description: "Backup skins to the local /backup folder to preserve their former status",
+    type: "boolean",
+  },
+  clean: {
+    default: false,
+    description:
+      "Cleanup (delete) the alias local skin directory to remove potential old files before new download",
+    type: "boolean",
+  },
+  compare: {
+    default: false,
+    description: "Compare the local alias skin directory to a remote location (prod/dev)",
+    type: "boolean",
+  },
+  debug: {
+    default: false,
+    description: "Issue more logging messages and diff analysis (for upload function)",
+    type: "boolean",
+  },
+}).argv;
+import chalk from "chalk";
+import * as Twoday from "@neonwilderness/twoday";
+import { cleanupAliasFolder, splitAliases } from "./_utils.js";
+import { downloadModifiedSkins } from "./_download.js";
+import { uploadModifiedSkins } from "./_upload.js";
+import { compareLocalToRemoteSkins } from "./_compare.js";
+import { config } from "dotenv-safe";
+config();
+
+if (!argv.from && !argv.to) {
+  console.log("Desired action must be specified with --from=dev|prod or --to=dev|prod");
+  process.exit(1);
+}
+if (argv.from && argv.to) {
+  console.log("You cannot specify --from=dev|prod AND --to=dev|prod in one run");
+  process.exit(1);
+}
+if (argv.compare && !argv.to) {
+  console.log("You must specify a target platform with --to=dev|prod when comparing skins");
+  process.exit(1);
+}
+if (!argv.alias) {
+  console.log("You must specify the desired alias(es) with --alias=name1,name2,... OR --alias=*");
+  process.exit(1);
+}
+const platform = (argv.from || argv.to).toLowerCase();
+const td = new Twoday.Twoday(platform, { delay: 100 });
+
+const core = ["www", "info", "help", "top"];
+const aliases = argv.alias === "*" ? core : splitAliases(argv.alias, ",");
+
+if (argv.compare) {
+  if (aliases.length === 1 && aliases[0].includes(":"))
+    console.log(
+      `Start comparing local skin files of alias${aliases.length > 1 ? "es" : ""} ${chalk.yellow(
+        aliases.join(", "),
+      )} to ${chalk.green(td.fullDomain)}...`,
+    );
+  compareLocalToRemoteSkins(td, aliases);
+} else {
+  const action = argv.from ? "down" : "up";
+  const direction = argv.from ? "from" : "to";
+  const execTask = argv.from ? downloadModifiedSkins : uploadModifiedSkins;
+
+  if (action === "down" && argv.clean) cleanupAliasFolder(aliases, argv.backup);
+
+  console.log(
+    `Start ${action}loading modified skins of alias${aliases.length > 1 ? "es" : ""} ${chalk.yellow(
+      aliases.join(", "),
+    )} ${direction} remote ${chalk.green(td.fullDomain)}...`,
+  );
+  execTask(td, aliases, {
+    backup: argv.backup,
+    debug: argv.debug,
+    skin: argv.skin ? new RegExp(argv.skin) : null,
+  });
+}

package/src/template.html

@@ -0,0 +1,132 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Skin Diff Report</title>
+    <style>
+      body {
+        background: #fff;
+        color: #24292e;
+        font-family: Arial, Helvetica, sans-serif;
+        font-size: 16px;
+      }
+      del {
+        background: #ffdce0;
+        text-decoration: none;
+      }
+      ins {
+        background: #ccffd8;
+        text-decoration: none;
+      }
+      del::before,
+      ins::before {
+        display: inline-block;
+        font-weight: bold;
+        width: 2rem;
+        text-align: center;
+      }
+      del::before {
+        content: "–";
+        background: #fdb9c1;
+      }
+      ins::before {
+        content: "+";
+        background: #abf2bc;
+      }
+      h3 {
+        padding: 0.5rem;
+      }
+      .skinbox {
+        background: #f5f5f5;
+        margin-top: 1rem;
+        padding: 0.5rem;
+      }
+      .skinresult {
+        margin-top: 0.5rem;
+      }
+      .skinresult::before {
+        display: inline-block;
+        background: #ddd;
+        font-size: 11px;
+        content: "Skin";
+        margin-right: 0.5rem;
+        padding: 2px 4px;
+        line-height: 1rem;
+        border-radius: 5px;
+      }
+      .identical .skinresult {
+      }
+      .different .skinresult {
+        background: yellow;
+        font-weight: bold;
+        padding: 0.5rem;
+      }
+      .new .skinresult {
+        background: #abf2bc;
+        font-weight: bold;
+        padding: 0.5rem;
+      }
+      .skintoggle {
+        border: 0;
+        color: #777;
+        font-weight: bolder;
+        background: #ddd;
+        border-radius: 50%;
+        line-height: 1rem;
+        margin-left: 0.5rem;
+        cursor: pointer;
+      }
+      .resultbox {
+        margin-top: 1rem;
+      }
+      .result {
+        margin-top: 0.5rem;
+        font-size: 14px;
+      }
+      .diffs {
+        font-family: monospace;
+        margin-top: 0.2rem;
+      }
+    </style>
+  </head>
+  <body x-data="diffResults">
+    <template x-for="(alias, ia) in aliases" :key="ia">
+      <div class="aliasbox">
+        <h3 x-html="alias.header"></h3>
+        <template x-for="(skin, is) in alias.skins" :key="is">
+          <div class="skinbox" :class="skin.class">
+            <div>
+              <span class="skinresult" :class="skin.class" x-text="skin.text"></span>
+              <button
+                class="skintoggle"
+                @click="skin.open = !skin.open"
+                x-show="skin.results.length"
+                x-text="skin.open ? '-' : '+'"
+              ></button>
+            </div>
+            <div class="resultbox" x-show="skin.open && skin.results.length">
+              <template x-for="(result, ir) in skin.results" :key="ir">
+                <div class="result">
+                  <div
+                    :style="{ color: result.itemChanged ? '#e53935' : '#bdbdbd' }"
+                    x-text="result.text"
+                  ></div>
+                  <div class="diffs" x-html="result.diffs.replace(/\n/g, '<br>')"></div>
+                </div>
+              </template>
+            </div>
+          </div>
+        </template>
+      </div>
+    </template>
+
+    <script>
+      document.addEventListener("alpine:init", () => {
+        Alpine.data("diffResults", () => $$templateJSON);
+      });
+    </script>
+    <script defer src="https://unpkg.com/alpinejs@latest"></script>
+  </body>
+</html>