npm - @ofidj/generator-fidj - Versions diffs - 1.0.1 → 1.0.4 - Mend

@ofidj/generator-fidj 1.0.1 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/generators/app/templates/typescript/src/tokens.css ADDED Viewed

@@ -0,0 +1,56 @@
+/* The Fidj design system, v2 — every value the product paints with.
+ *
+ * This file is shared verbatim with fidj-app (src/theme/fidj-tokens.css), so a
+ * style change made here reaches Fidj, mleweb and every generated app at once.
+ * Keep it free of anything path-dependent: @font-face lives in fonts.css, and
+ * each consumer supplies its own. Nothing else in a stylesheet may introduce a
+ * literal colour, family or radius.
+ */
+:root {
+  /* Ink — the dark half of the split: brand panel, header, primary button. */
+  --fidj-ink: #14110f;
+  --fidj-ink-raised: #2a2521;
+  --fidj-ink-line: #38322c;
+  --fidj-ink-line-soft: #4a423b;
+  --fidj-on-ink: #f2eee9;
+  --fidj-on-ink-muted: #b6ada5;
+  --fidj-on-ink-faint: #8c847c;
+  /* Paper — the light half. */
+  --fidj-paper: #fbfaf8;
+  --fidj-surface: #ffffff;
+  --fidj-surface-sunk: #f5f1ec;
+  --fidj-surface-tint: #f2eee9;
+  --fidj-line: #e4ded7;
+  --fidj-line-soft: #ece7e1;
+  --fidj-line-strong: #dfd9d2;
+  --fidj-line-hover: #c9c1b8;
+  --fidj-text: #14110f;
+  --fidj-text-muted: #4a4540;
+  --fidj-text-faint: #6b655f;
+  --fidj-placeholder: #a8a099;
+  /* Accents. The red is the Fidj mark; it identifies the account and privacy
+   * provider, so it stays sparing — a dot, a rule, a hover. */
+  --fidj-accent: #d6342c;
+  --fidj-danger: #b8352c;
+  --fidj-danger-strong: #8c2a22;
+  --fidj-danger-tint: #fdf7f6;
+  --fidj-danger-line: #e8d9d6;
+  --fidj-ok: #3f7a4f;
+  --fidj-warn: #c07a1e;
+  --fidj-warn-tint: #fbf7f1;
+  --fidj-focus-ring: 0 0 0 3px rgb(20 17 15 / 0.07);
+  --fidj-overlay-shadow: 0 12px 32px rgb(20 17 15 / 0.18);
+  --fidj-font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
+  --fidj-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
+  --fidj-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
+  /* Squared corners are the loudest signal of this style: 2px everywhere, and
+   * a full round only for avatars and status dots. */
+  --fidj-radius: 2px;
+  --fidj-shell-max: 1180px;
+}

package/lib/app-module.cjs CHANGED Viewed

@@ -54,6 +54,11 @@ function inspectModule(source, entry = "index.html", destination) {
     }
   };
   visit(root);
-  return { root, file, entry: "./module/" + file + url.hash };
+  // Address a directory rather than its index file: the generated server and
+  // any static host resolve it, and no index.html shows up in the address bar.
+  const address = file.endsWith("index.html")
+    ? file.slice(0, -"index.html".length)
+    : file;
+  return { root, file, entry: "./module/" + address + url.hash };
 }
 module.exports = { inspectModule };

package/lib/scaffold.cjs CHANGED Viewed

@@ -40,11 +40,55 @@ function scaffold(destination, options) {
   }
   const title = options.title || name;
   if (/[\r\n]/.test(title)) throw new Error("Title must be one line.");
+  // Sign-in highlights are the app's own selling points, so they are supplied
+  // per app rather than baked in: an app that passes none simply shows none.
+  const highlights = (options.highlights || []).map((entry) => {
+    const [heading, ...rest] = String(entry).split("|");
+    const body = rest.join("|").trim();
+    if (!heading.trim() || !body)
+      throw new Error('Each --highlight must read "<heading>|<body>".');
+    if (/[\r\n]/.test(entry)) throw new Error("A highlight must be one line.");
+    return { heading: heading.trim(), body };
+  });
+  if (highlights.length > 6)
+    throw new Error("Six highlights is the most the sign-in panel can hold.");
+  // Trust badges are claims about a specific app — where it is hosted, what it
+  // audits. None are supplied by default, because an app cannot inherit them.
+  const badges = (options.badges || []).map((entry) => {
+    const text = String(entry).trim();
+    if (!text || /[\r\n]/.test(text))
+      throw new Error("Each --badge must be one line of text.");
+    if (text.length > 40)
+      throw new Error("A badge must be at most 40 characters.");
+    return text;
+  });
+  if (badges.length > 4)
+    throw new Error("Four badges is the most the sign-in footer can hold.");
   if (
     options.domain &&
     !/^(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z]{2,}$/i.test(options.domain)
   )
     throw new Error("Domain must be a hostname, without a scheme or path.");
+  const brandImage = (value, flag) => {
+    if (!value) return null;
+    const source = path.resolve(value);
+    if (!fs.existsSync(source) || !fs.statSync(source).isFile())
+      throw new Error(`${flag} must point at an image file.`);
+    const extension = path.extname(source).toLowerCase();
+    if (
+      ![".png", ".svg", ".gif", ".jpg", ".jpeg", ".webp", ".ico"].includes(
+        extension,
+      )
+    )
+      throw new Error(
+        `${flag} must be a .png, .svg, .gif, .jpg, .webp or .ico file.`,
+      );
+    if (fs.statSync(source).size > 512 * 1024)
+      throw new Error(`${flag} must be under 512KB; it is served on every visit.`);
+    return { source, extension };
+  };
+  const logo = brandImage(options.logo, "--logo");
+  const favicon = brandImage(options.favicon, "--favicon");
   const dir = path.resolve(destination);
   const appModule = options.module
     ? inspectModule(options.module, options.moduleEntry, dir)
@@ -99,19 +143,44 @@ function scaffold(destination, options) {
       options.description ||
       "A space to explore, with an account that puts you in control.",
     content: appModule ? "" : options.content,
+    highlights,
+    badges,
+    // An app that supplies no mark of its own borrows Fidj's, so the sign-in
+    // and the browser tab are never blank.
+    logo: logo ? "./brand/logo" + logo.extension : "./fidj-logo.png",
+    favicon: favicon ? "./brand/favicon" + favicon.extension : "./fidj-logo.png",
     moduleEntry: appModule?.entry || "",
     domain: options.domain,
   };
+  if (logo || favicon) fs.mkdirSync(path.join(dir, "public/brand"), { recursive: true });
+  if (logo)
+    fs.copyFileSync(logo.source, path.join(dir, "public/brand/logo" + logo.extension));
+  if (favicon)
+    fs.copyFileSync(favicon.source, path.join(dir, "public/brand/favicon" + favicon.extension));
+  if (favicon) {
+    // The workspace starter serves a static index.html rather than rendering
+    // one, so its icon is rewritten here.
+    const page = path.join(dir, "public/index.html");
+    fs.writeFileSync(
+      page,
+      fs
+        .readFileSync(page, "utf8")
+        .replace('href="/fidj-logo.png"', `href="/brand/favicon${favicon.extension}"`),
+    );
+  }
   if (appModule) {
     fs.cpSync(appModule.root, path.join(dir, "public/module"), {
       recursive: true,
     });
     const entryFile = path.join(dir, "public/module", appModule.file);
-    const relativeSignin =
+    // Point back at the shell's directory, not at its index file, for the same
+    // reason the module entry does: no index.html in the address bar.
+    const toRoot =
       path.posix.relative(
         path.posix.dirname("module/" + appModule.file),
-        "index.html",
-      ) + "#/signin";
+        ".",
+      ) || ".";
+    const relativeSignin = toRoot + "/#/signin";
     const html = fs.readFileSync(entryFile, "utf8");
     if (!html.includes("</head>"))
       throw new Error("Module entry must have an HTML head.");

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ofidj/generator-fidj",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "Generate a TypeScript app with Fidj sign-in, live server-side roles and per-app privacy.",
   "homepage": "https://fidj.ovh",
   "bugs": {
@@ -12,15 +12,11 @@
   "files": [
     "bin",
     "lib",
-    "generators",
-    "!generators/app/templates/app2018",
-    "!generators/app/templates/app2021"
+    "generators"
   ],
   "main": "./lib/scaffold.cjs",
   "keywords": [
     "fidj",
-    "angular",
-    "ionic",
     "yeoman-generator"
   ],
   "dependencies": {