@bkazemi/verily 0.8.1 → 0.9.0

package/dist/server/email.js

@@ -1,6 +1,6 @@
 import { Refused } from '../core/index.js';
 import { emailLogo } from './email-logo.js';
-import { escape } from './escape.js';
+import { html, raw } from './html.js';
 /** The logotype as the message carries it. */
 const logo = {
     contentId: 'verily-logo',
@@ -71,51 +71,139 @@ export function emailProvider(options) {
  * otherwise push the code that far off centre.
  */
 function letter(parts) {
-    const sans = "system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif";
-    const mono = "ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace";
-    return `<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<meta name="color-scheme" content="light dark">
-<meta name="supported-color-schemes" content="light dark">
-<title>Verily</title>
-<style>
-@media (prefers-color-scheme: dark) {
-  .page { background: #161a18 !important; }
-  .ink { color: #dde5e0 !important; }
-  .muted { color: #96a39b !important; }
-  .button { background: #7fc4a2 !important; }
-  .button a { color: #10231a !important; }
-  .code { background: #1d2220 !important; border-color: #2f3b35 !important; color: #dde5e0 !important; }
-  .rule { border-color: #2f3b35 !important; }
-}
-</style>
-</head>
-<body class="page" style="margin:0;padding:0;background:#ffffff;">
-<div style="display:none;max-height:0;overflow:hidden;opacity:0;">${escape(parts.ask)} ${escape(parts.lasts)}</div>
-<table role="presentation" class="page" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#ffffff;">
-<tr><td align="center" style="padding:40px 16px 48px;">
-<table role="presentation" align="center" width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:440px;margin:0 auto;">
-<tr><td align="center" style="padding:0 0 28px;">
-<img src="cid:${logo.contentId}" width="94" height="40" alt="Verily" style="display:block;margin:0 auto;border:0;outline:none;font:700 20px/40px ${sans};color:#23312b;">
-</td></tr>
-<tr><td class="ink" align="center" style="padding:0 0 10px;font:650 22px/1.3 ${sans};color:#23312b;text-align:center;">Confirm your address</td></tr>
-<tr><td class="ink" align="center" style="padding:0 0 24px;font:16px/1.6 ${sans};color:#23312b;text-align:center;">${escape(parts.ask)}</td></tr>
-<tr><td align="center" style="padding:0 0 28px;">
-<table role="presentation" align="center" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;"><tr><td class="button" align="center" style="background:#245f43;border-radius:10px;"><a href="${escape(parts.link)}" style="display:inline-block;padding:13px 26px;font:600 16px/1.2 ${sans};color:#ffffff;text-decoration:none;">${escape(parts.button)}</a></td></tr></table>
-</td></tr>
-<tr><td class="muted" align="center" style="padding:0 0 10px;font:14px/1.5 ${sans};color:#6b786f;text-align:center;">${escape(parts.enter)}</td></tr>
-<tr><td class="code" align="center" style="padding:14px 12px 14px 15px;background:#f7f9f7;border:1px solid #dce2de;border-radius:10px;font:600 22px/1.2 ${mono};letter-spacing:.14em;color:#23312b;text-align:center;">${escape(parts.code)}</td></tr>
-<tr><td class="muted" align="center" style="padding:12px 0 28px;font:14px/1.5 ${sans};color:#6b786f;text-align:center;">${escape(parts.lasts)}</td></tr>
-<tr><td class="rule" style="border-top:1px solid #dce2de;font-size:0;line-height:0;">&nbsp;</td></tr>
-<tr><td class="muted" align="center" style="padding:18px 0 0;font:13px/1.6 ${sans};color:#6b786f;text-align:center;">${escape(parts.ignore)}</td></tr>
-</table>
-</td></tr>
-</table>
-</body>
-</html>`;
+    // Constants, let in as written so the quotes in them stay quotes.
+    const sans = raw("system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif");
+    const mono = raw("ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace");
+    return html `
+    <!doctype html>
+    <html lang="en">
+      <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <meta name="color-scheme" content="light dark">
+        <meta name="supported-color-schemes" content="light dark">
+        <title>Verily</title>
+        <style>
+          @media (prefers-color-scheme: dark) {
+            .page { background: #161a18 !important; }
+            .ink { color: #dde5e0 !important; }
+            .muted { color: #96a39b !important; }
+            .button { background: #7fc4a2 !important; }
+            .button a { color: #10231a !important; }
+            .code { background: #1d2220 !important; border-color: #2f3b35 !important; color: #dde5e0 !important; }
+            .rule { border-color: #2f3b35 !important; }
+          }
+        </style>
+      </head>
+      <body class="page" style="margin:0;padding:0;background:#ffffff;">
+        <div style="display:none;max-height:0;overflow:hidden;opacity:0;">${parts.ask} ${parts.lasts}</div>
+        <table
+          role="presentation"
+          class="page"
+          width="100%"
+          cellpadding="0"
+          cellspacing="0"
+          border="0"
+          style="background:#ffffff;">
+          <tr>
+            <td align="center" style="padding:40px 16px 48px;">
+              <table
+                role="presentation"
+                align="center"
+                width="100%"
+                cellpadding="0"
+                cellspacing="0"
+                border="0"
+                style="max-width:440px;margin:0 auto;">
+                <tr>
+                  <td align="center" style="padding:0 0 28px;">
+                    <img
+                      src="cid:${logo.contentId}"
+                      width="94"
+                      height="40"
+                      alt="Verily"
+                      style="display:block;margin:0 auto;border:0;outline:none;font:700 20px/40px ${sans};color:#23312b;">
+                  </td>
+                </tr>
+                <tr>
+                  <td
+                    class="ink"
+                    align="center"
+                    style="padding:0 0 10px;font:650 22px/1.3 ${sans};color:#23312b;text-align:center;">
+                    Confirm your address
+                  </td>
+                </tr>
+                <tr>
+                  <td
+                    class="ink"
+                    align="center"
+                    style="padding:0 0 24px;font:16px/1.6 ${sans};color:#23312b;text-align:center;">
+                    ${parts.ask}
+                  </td>
+                </tr>
+                <tr>
+                  <td align="center" style="padding:0 0 28px;">
+                    <table
+                      role="presentation"
+                      align="center"
+                      cellpadding="0"
+                      cellspacing="0"
+                      border="0"
+                      style="margin:0 auto;">
+                      <tr>
+                        <td class="button" align="center" style="background:#245f43;border-radius:10px;">
+                          <a
+                            href="${parts.link}"
+                            style="display:inline-block;padding:13px 26px;font:600 16px/1.2 ${sans};color:#ffffff;text-decoration:none;">
+                            ${parts.button}
+                          </a>
+                        </td>
+                      </tr>
+                    </table>
+                  </td>
+                </tr>
+                <tr>
+                  <td
+                    class="muted"
+                    align="center"
+                    style="padding:0 0 10px;font:14px/1.5 ${sans};color:#6b786f;text-align:center;">
+                    ${parts.enter}
+                  </td>
+                </tr>
+                <tr>
+                  <td
+                    class="code"
+                    align="center"
+                    style="padding:14px 12px 14px 15px;background:#f7f9f7;border:1px solid #dce2de;border-radius:10px;font:600 22px/1.2 ${mono};letter-spacing:.14em;color:#23312b;text-align:center;">
+                    ${parts.code}
+                  </td>
+                </tr>
+                <tr>
+                  <td
+                    class="muted"
+                    align="center"
+                    style="padding:12px 0 28px;font:14px/1.5 ${sans};color:#6b786f;text-align:center;">
+                    ${parts.lasts}
+                  </td>
+                </tr>
+                <tr>
+                  <td class="rule" style="border-top:1px solid #dce2de;font-size:0;line-height:0;">&nbsp;</td>
+                </tr>
+                <tr>
+                  <td
+                    class="muted"
+                    align="center"
+                    style="padding:18px 0 0;font:13px/1.6 ${sans};color:#6b786f;text-align:center;">
+                    ${parts.ignore}
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+        </table>
+      </body>
+    </html>
+  `.markup;
 }
 /**
  * The mailbox an address names. Lowercased throughout: the part before the @ may be case

package/dist/server/html.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Markup that is safe to put in a page as it is: built by `html`, or let through by
+ * `raw()`. Everything else that goes into a page is text, and is escaped.
+ */
+export declare class Html {
+    readonly markup: string;
+    constructor(markup: string);
+    toString(): string;
+}
+/**
+ * What can go inside `html`. Text and numbers are escaped. `Html` goes in as it is, and a
+ * list goes in as each of its items in turn. Nothing, false and null leave nothing, so a
+ * part that is only there sometimes can be written as `${shown && html`...`}`.
+ */
+export type Content = Html | string | number | false | null | undefined | readonly Content[];
+/**
+ * Markup, or nothing: what a parameter takes that must not be given text. An empty string
+ * is allowed, since it holds nothing that could be read as markup.
+ */
+export type OptionalHtml = Html | '' | false | null | undefined;
+/**
+ * Builds markup from a template, escaping every value put into it that is not markup
+ * already. This covers element text and quoted attributes. It does not make a URL safe to
+ * follow: pass an address through `safeUrl()` before it goes into `href`.
+ *
+ * The template can be written indented across lines: see `unindent` for how its line
+ * breaks are taken out. Values are never changed.
+ */
+export declare function html(template: TemplateStringsArray, ...values: Content[]): Html;
+/**
+ * Markup let into a page unescaped. Only for markup this code wrote itself, such as the
+ * logo, and never for anything a request or a record supplied.
+ */
+export declare const raw: (markup: string) => Html;

package/dist/server/html.js

@@ -0,0 +1,67 @@
+import { escape } from './escape.js';
+/**
+ * Markup that is safe to put in a page as it is: built by `html`, or let through by
+ * `raw()`. Everything else that goes into a page is text, and is escaped.
+ */
+export class Html {
+    markup;
+    constructor(markup) {
+        this.markup = markup;
+    }
+    toString() {
+        return this.markup;
+    }
+}
+const write = (content) => content instanceof Html
+    ? content.markup
+    : Array.isArray(content)
+        ? content.map(write).join('')
+        : content === undefined || content === null || content === false
+            ? ''
+            : escape(content);
+/**
+ * One piece of a template's own text, without the line breaks and indentation it was
+ * written with. Whitespace that holds a line break is dropped where it touches a tag or
+ * either end of the template, or lies between two values. Anywhere else, between words or
+ * between a word and a value, it becomes one space.
+ *
+ * `first` and `last` say whether the piece starts or ends the template; otherwise a value
+ * comes before or after it.
+ */
+function unindent(text, first, last) {
+    return text.replace(/\s*\n\s*/g, (run, at) => {
+        const before = at === 0 ? (first ? '' : 'value') : text[at - 1];
+        const after = at + run.length === text.length ? (last ? '' : 'value') : text[at + run.length];
+        return before === '>' || after === '<' || !before || !after
+            ? ''
+            : before === 'value' && after === 'value'
+                ? ''
+                : ' ';
+    });
+}
+/** Each template's text, unindented once. The same template is the same array every call. */
+const unindented = new WeakMap();
+/**
+ * Builds markup from a template, escaping every value put into it that is not markup
+ * already. This covers element text and quoted attributes. It does not make a URL safe to
+ * follow: pass an address through `safeUrl()` before it goes into `href`.
+ *
+ * The template can be written indented across lines: see `unindent` for how its line
+ * breaks are taken out. Values are never changed.
+ */
+export function html(template, ...values) {
+    let strings = unindented.get(template);
+    if (!strings) {
+        strings = template.map((text, i) => unindent(text, i === 0, i === template.length - 1));
+        unindented.set(template, strings);
+    }
+    let markup = strings[0];
+    for (const [index, value] of values.entries())
+        markup += write(value) + strings[index + 1];
+    return new Html(markup);
+}
+/**
+ * Markup let into a page unescaped. Only for markup this code wrote itself, such as the
+ * logo, and never for anything a request or a record supplied.
+ */
+export const raw = (markup) => new Html(markup);