@casomoltd/tooling 0.34.0 → 0.34.2

package/README.md

@@ -15,7 +15,7 @@ Shared linting, formatting, commit config, and CLI tools for Casomo Ltd's repos.
 | `@casomoltd/tooling/knip` | Knip config for unused exports/dependencies |
 | `@casomoltd/tooling/jscpd` | Copy-paste detection config |
 | `@casomoltd/tooling/readability` | `scoreText()` — readability scoring for page content |
-| `@casomoltd/tooling/buttondown` | For a repo using the `buttondown` command: the shared email blocks and skins (`createEmailBlocks`, `emailBaseCss`, `composeWebSkin`), `tokenReader()`, `loadSettings()` and `buildPayload()`, and `EMAIL_CHROME_HIDES` ([docs/buttondown.md](docs/buttondown.md)) |
+| `@casomoltd/tooling/buttondown` | For a repo using the `buttondown` command: the shared email blocks and skins (`createEmailBlocks`, `emailBaseCss`, `composeWebSkin`), `tokenReader()`, `loadSettings()` and `buildPayload()`, and `EMAIL_CHROME_HIDES` and `WEB_CHROME_HIDES` ([docs/buttondown.md](docs/buttondown.md)) |
 
 ### Bin commands
 

package/buttondown/engine.mjs

@@ -6,7 +6,8 @@
  *
  * A repo configures it under `buttondown` in its `casomo.config.mjs`:
  *
- *   import {EMAIL_CHROME_HIDES} from "@casomoltd/tooling/buttondown";
+ *   import {EMAIL_CHROME_HIDES, WEB_CHROME_HIDES}
+ *     from "@casomoltd/tooling/buttondown";
  *
  *   export default {
  *     buttondown: {
@@ -16,7 +17,9 @@
  *       tokens: [["--color-accent", "--color-brand-accent"]], // target, source
  *       extra: [["--radius", "0"]],           // uncommented lines after them
  *       asserts: {"--radius-lg": "0"},        // tokens the skins depend on
- *       allowedHides: {...EMAIL_CHROME_HIDES, ".selector": "why"},
+ *       allowedHides: {...EMAIL_CHROME_HIDES, ...WEB_CHROME_HIDES, // the
+ *         second for a repo that composes its web skin
+ *         ".selector": "why"},
  *       linkClasses: {onDark: "on-dark"},     // each needs an `a.<class>` rule
  *       ownLinks: ["/rss"],                   // hrefs that are not socials
  *       paletteFiles: ["buttondown/assets/icon.svg"],
@@ -47,6 +50,8 @@ export const END = "/* END TOKENS */";
 export const EMAIL_CHROME_HIDES = {
   ".social-links": "the web footer's links, duplicated in an email",
   ".newsletter-masthead": "replaced by the repo's own header band",
+  ".transactional-email-header":
+    "the icon, subject and name above a transactional email's own bands",
   ".newsletter-icon": "the icon slot above the repo's own mark",
   ".email-preamble": "the forwarding prompt between title and prose",
   ".colophon": "the sender-and-date line under the hidden masthead",
@@ -54,6 +59,25 @@ export const EMAIL_CHROME_HIDES = {
   ".powered-by-icon": "the logo tile above the kept attribution line",
 };
 
+/**
+ * Buttondown's controls on the hosted pages that send a reader somewhere
+ * worse than the site does. `composeWebSkin` hides them, so a repo that
+ * composes its web skin spreads this into `allowedHides`, as it does
+ * EMAIL_CHROME_HIDES. The manage-link hide assumes the archive is on a
+ * custom domain, where that link's buttondown.com address asks a signed-in
+ * reader to sign in again; on buttondown.com it is their only manage link.
+ */
+export const WEB_CHROME_HIDES = {
+  "a.sniper-link-button":
+    "a button to the reader's mail provider, in the form's place and in the"
+    + " sign-up dialog; their inbox is theirs to go to",
+  [".subscribe:has(span.confirmation-email-message)"
+    + " #subscribe-form a.archive__button"]:
+    "a signed-in reader's manage link, which goes to buttondown.com and asks"
+    + " them to sign in again; the header's Account link opens the same"
+    + " settings on the site's domain",
+};
+
 const API = "https://api.buttondown.com/v1";
 
 /** The API's own path prefix, which every request path sits under. */

package/buttondown/index.d.mts

@@ -59,6 +59,10 @@ export type Check = (context: CheckContext) => Promise<string[]>;
  *  bands: spread into `allowedHides` to allow hiding it. */
 export const EMAIL_CHROME_HIDES: Readonly<Record<string, string>>;
 
+/** Hosted-page controls the composed web skin hides; spread into
+ *  `allowedHides` by a repo that uses `composeWebSkin`. */
+export const WEB_CHROME_HIDES: Readonly<Record<string, string>>;
+
 export function loadSettings(root?: string): Promise<Settings>;
 
 export function buildPayload(settings: Settings): Promise<Payload>;

package/buttondown/index.mjs

@@ -4,6 +4,7 @@
  */
 export {
   buildPayload, EMAIL_CHROME_HIDES, loadSettings, tokenReader,
+  WEB_CHROME_HIDES,
 } from "./engine.mjs";
 export {colophonLinks} from "./colophon.mjs";
 export {createEmailBlocks, TABLE} from "./email-blocks.mjs";

package/buttondown/skins.mjs

@@ -6,7 +6,7 @@ import {readFileSync} from "node:fs";
 import {
   BODY_SIZE, PARAGRAPH_MARGIN, requireTheme,
 } from "./email-blocks.mjs";
-import {EMAIL_CHROME_HIDES, preludeEnd} from "./engine.mjs";
+import {EMAIL_CHROME_HIDES, preludeEnd, WEB_CHROME_HIDES} from "./engine.mjs";
 
 /** The shared web rules: base-web.css, which reads every value from the
  *  variables the site's TOKENS block defines. */
@@ -14,6 +14,12 @@ const WEB_BASE = readFileSync(
   new URL("./base-web.css", import.meta.url), "utf8",
 );
 
+/** WEB_CHROME_HIDES as rules. Important, so a site's own rules for the
+ *  same elements can't show them unless those are important too. */
+const WEB_HIDES = Object.keys(WEB_CHROME_HIDES)
+  .map((selector) => `${selector} { display: none !important; }`)
+  .join("\n");
+
 /**
  * The web skin: the site's stylesheet with the shared rules inserted after
  * its opening comments and `@import`s, which must come before any rule,
@@ -22,7 +28,8 @@ const WEB_BASE = readFileSync(
 export function composeWebSkin(site) {
   const at = preludeEnd(site);
   const head = site.slice(0, at);
-  return `${head}${head ? "\n\n" : ""}${WEB_BASE}\n${site.slice(at)}`;
+  return `${head}${head ? "\n\n" : ""}${WEB_BASE}\n${WEB_HIDES}\n`
+    + site.slice(at);
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casomoltd/tooling",
-  "version": "0.34.0",
+  "version": "0.34.2",
   "description": "Casomo's shared dev config: ESLint, Prettier, commitlint, knip & jscpd presets and dev CLIs (git hooks, readability, screenshots, design specs)",
   "license": "MIT",
   "repository": {