@ofidj/generator-fidj 3.21.1 → 3.22.0

package/generators/app/templates/typescript/package.json

@@ -15,8 +15,8 @@
     "privacy:rehearse": "npm run build && node --test test/server.test.mjs"
   },
   "dependencies": {
-    "@ofidj/entry": "^3.21.0",
-    "@ofidj/node": "^3.21.1"
+    "@ofidj/entry": "^3.22.0",
+    "@ofidj/node": "^3.22.0"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",

package/generators/app/templates/typescript/scripts/render-content.mjs

@@ -30,8 +30,11 @@ function mountedHead(config) {
   ].join("");
 }
 export function renderContent(config) {
+  const footer = config.moduleMount
+    ? ""
+    : "<footer>Built with Fidj · Your choices belong to this app.</footer>";
   // HTML is supplied by the developer at generation time, never by an app visitor.
-  return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="referrer" content="no-referrer"><title>${escape(config.title)}</title><link rel="icon" href="${escape(config.favicon)}"><link rel="stylesheet" href="./main.css">${mountedHead(config)}</head><body>
+  return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="referrer" content="no-referrer"><meta name="description" content="${escape(config.description)}"><title>${escape(config.title)}</title><link rel="icon" href="${escape(config.favicon)}"><link rel="preload" href="./fonts/InstrumentSerif-400-latin.woff2" as="font" type="font/woff2" crossorigin><link rel="stylesheet" href="./main.css">${mountedHead(config)}</head><body>
   <header class="topbar"><a class="brand" href="#/content"><img src="${escape(config.logo)}" alt=""><span class="brand-name">${escape(config.title)}</span></a><nav class="content-nav" id="app-nav" aria-label="App navigation" hidden></nav></header>
-  <main><template id="public-content"><section class="card public-content"><h1>${escape(config.welcome)}</h1><div>${config.content}</div></section></template><div id="app" aria-live="polite"></div><footer>Built with Fidj · Your choices belong to this app.</footer></main><script type="module" src="./main.js"></script></body></html>`;
+  <main><template id="public-content"><section class="card public-content"><h1>${escape(config.welcome)}</h1><div>${config.content}</div></section></template><div id="app" aria-live="polite"></div>${footer}</main><script type="module" src="./main.js"></script></body></html>`;
 }

package/generators/app/templates/typescript/src/content.ts

@@ -97,14 +97,10 @@ function banner() {
 // Signing out is not a place, so it is not a tab: it is a thing you do to an
 // account, and it lives on that account's screen.
 function appNav(current: "content" | "account") {
-  const tab = (id: string, label: string, selected: boolean) =>
-    `<button id="${id}"${selected ? ' class="selected" aria-current="page"' : ""}><span class="tab-label">${label}</span></button>`;
+  const tab = (id: string, label: string, selected: boolean, profile = false) =>
+    `<button id="${id}"${selected ? ' class="selected" aria-current="page"' : ""}>${profile ? '<span class="profile-mark" aria-hidden="true"><svg viewBox="0 0 20 20"><circle cx="10" cy="7" r="3"/><path d="M4.5 16c.7-3 2.5-4.5 5.5-4.5s4.8 1.5 5.5 4.5"/></svg></span>' : ""}<span class="tab-label">${label}</span></button>`;
   const account = signedIn
-    ? tab(
-        "account-tab",
-        accountEmail ? `Profile (${escape(accountEmail)})` : "Profile",
-        current === "account",
-      )
+    ? tab("account-tab", "Profile", current === "account", true)
     : tab("account-tab", "Sign in", false);
   return tab("content-tab", "Content", current === "content") + account;
 }
@@ -112,7 +108,7 @@ function appNav(current: "content" | "account") {
 function profileSummary() {
   const publicUrl = `${config.dashboardUrl}/#/pub/${encodeURIComponent(config.appId)}`;
   const badgeUrl = `${config.apiEndpoint}/apps/${encodeURIComponent(config.appId)}/badge`;
-  return `<header class="profile-summary"><div class="profile-summary-copy"><span class="eyebrow">Profile</span><strong>${escape(accountEmail)}</strong><span>${escape(config.title)}</span></div><a class="profile-public" href="${escape(publicUrl)}" target="_blank" rel="noopener"><img src="${escape(badgeUrl)}" alt="${escape(config.title)} public badge" width="133" height="20"></a><button id="exit" class="danger">Sign out</button></header>`;
+  return `<header class="profile-summary"><div class="profile-summary-copy"><h1 class="eyebrow">Profile</h1><strong>${escape(accountEmail)}</strong><span>${escape(config.title)}</span></div><a class="profile-public" href="${escape(publicUrl)}" target="_blank" rel="noopener"><img src="${escape(badgeUrl)}" alt="${escape(config.title)} public badge" width="133" height="20"></a><button id="exit" class="sign-out">Sign out</button></header>`;
 }
 
 // The bar belongs to the document, not to the screen being drawn: it survives
@@ -521,6 +517,9 @@ function startModule() {
   } | null;
   if (!mount) return;
   moduleStarted = true;
+  // The entry may have been on screen a moment ago (a refused request, a
+  // redirect); its class drops the page margins the app relies on.
+  document.body.classList.remove("signin-view");
   document.body.classList.add("has-module");
   // The app takes the whole document, not a corner of the shell's. A built
   // single-page app positions itself against the body — Ionic, for one, fixes
@@ -674,7 +673,7 @@ function render() {
   root.innerHTML = `<section class="signin-shell"><div class="signin-intro${config.highlights?.length ? "" : " is-plain"}">${masthead(config.logo, config.title)}
   <div class="signin-identity"><h1>${escape(config.welcome)}</h1><p class="signin-description">${escape(config.description)}</p></div>
   ${highlightCells(config.highlights)}</div>
-  <div class="signin-form"><div>${banner()}<h2>Sign in to ${escape(config.title)}</h2><form id="signin">${credentialFields({email: signInEmail, password: signInPassword}, {passkey: passkeyHere})}</form>${config.allowAnonymous ? `<div class="signin-divider"><span>or explore first</span></div><button class="anonymous-entry" id="anonymous">Enter anonymously <span aria-hidden="true">→</span></button><p class="signin-footnote">No account needed to view the content.</p>` : ""}
+  <div class="signin-form"><div><div class="signin-mobile-masthead">${masthead(config.logo, config.title)}</div>${banner()}<h2>Sign in to ${escape(config.title)}</h2><form id="signin">${credentialFields({email: signInEmail, password: signInPassword}, {passkey: passkeyHere})}</form>${config.allowAnonymous ? `<div class="signin-divider"><span>or explore first</span></div><button class="anonymous-entry" id="anonymous">Enter anonymously <span aria-hidden="true">→</span></button><p class="signin-footnote">No account needed to view the content.</p>` : ""}
   ${config.title === "Fidj" ? walletDoor() : ""}</div>
   ${badgeStrip(config.badges)}</div></section>`;
   wireNav();
@@ -809,7 +808,12 @@ function render() {
       signInThroughProvider(submitter);
       return;
     }
-    submitter?.setAttribute("data-busy", "true");
+    // Enter arrives through the unseen twin of Continue; the wait is shown on
+    // the Continue a person can see.
+    const shown = submitter?.classList.contains("implicit-submit")
+      ? root.querySelector<HTMLButtonElement>('button.primary[value="credentials"]')
+      : submitter;
+    shown?.setAttribute("data-busy", "true");
     void action(async () => {
       if (oidc && (!email || !password)) {
         throw new Error("Enter your email and password, or sign in with Fidj.");

package/generators/app/templates/typescript/src/main.ts

@@ -208,7 +208,7 @@ function render() {
   <main>${notice ? `<p class="notice" role="status">${escape(notice)}</p>` : ""}${error ? `<p class="error" role="alert">${escape(error)}</p>` : ""}
   ${
     !session
-      ? `<section class="welcome"><div><p class="eyebrow">A LITTLE SPACE FOR YOUR IDEAS</p><h1>Good ideas<br>start here.</h1><p>Keep your notes together, with access you understand and privacy you control.</p><div class="promise"><img src="/fidj-logo.png" alt=""><span>Your account connects through Fidj.<br>Your choices belong to this app.</span></div></div><form id="signin" class="card"><h2>Welcome to ${escape(settings.title)}</h2>${oidc ? providerEntry(settings.title, settings.appId, settings.signin === "button" ? "" : credentialFields(), false, settings.signin || "button") : `<p>Sign in with your Fidj account.</p>${credentialFields()}<button class="primary" type="submit">Sign in</button>${settings.localDemo ? `<div class="demo"><strong>Try the local example</strong><p>Alex owns the app. Maya and Sam start with the Free role.</p><button type="button" data-demo="alex">Alex · owner</button><button type="button" data-demo="maya">Maya · member</button><button type="button" data-demo="sam">Sam · member</button></div>` : ""}`}</form></section>`
+      ? `<section class="welcome"><div><p class="eyebrow">A LITTLE SPACE FOR YOUR IDEAS</p><h1>Good ideas<br>start here.</h1><p>Keep your notes together, with access you understand and privacy you control.</p><div class="promise"><img src="/fidj-logo.png" alt=""><span>Your account connects through Fidj.<br>Your choices belong to this app.</span></div></div><form id="signin" class="card"><h2>Welcome to ${escape(settings.title)}</h2>${oidc ? providerEntry(settings.title, settings.appId, settings.signin === "button" ? "" : credentialFields(), false, settings.signin || "button") : `<p>Sign in with your Fidj account.</p>${credentialFields()}<button class="primary" type="submit">Sign in</button>${settings.localDemo ? `<div class="demo"><strong>Try the local example</strong><p>Alex owns the app. Maya and Sam start as members.</p><button type="button" data-demo="alex">Alex · owner</button><button type="button" data-demo="maya">Maya · member</button><button type="button" data-demo="sam">Sam · member</button></div>` : ""}`}</form></section>`
       : `
   <div class="page-heading"><div><p class="eyebrow">YOUR WORKSPACE</p><h1>A place to think.</h1><p>${escape(session.username)} <span class="roles">${session.roles.map(escape).join(" · ") || "No assigned roles"}</span></p></div><button id="signout">Sign out</button></div>
   <nav><button id="workspace-tab" class="${view === "workspace" ? "selected" : ""}">My notes</button><button id="privacy-tab" class="${view === "privacy" ? "selected" : ""}">My privacy</button><button id="refresh">Refresh access</button></nav>

package/lib/module-mount.cjs

@@ -27,7 +27,9 @@ function describeMount(html, file) {
   for (const tag of head.match(/<link\b[^>]*>/gi) || []) {
     const rel = (attribute(tag, "rel") || "").toLowerCase();
     const href = attribute(tag, "href");
-    if (rel === "stylesheet" && href) styles.push(resolve(href));
+    // Once each: Angular repeats its deferred stylesheet inside <noscript>.
+    if (rel === "stylesheet" && href && !styles.includes(resolve(href)))
+      styles.push(resolve(href));
   }
 
   const scripts = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ofidj/generator-fidj",
-  "version": "3.21.1",
+  "version": "3.22.0",
   "description": "Generate a TypeScript app with Fidj sign-in, live server-side roles and per-app privacy.",
   "homepage": "https://fidj.ovh",
   "bugs": {