@bkazemi/verily 0.6.0 → 0.8.0

package/dist/server/style.js

@@ -15,6 +15,7 @@ export const stylesheet = `:root {
   --surface: #fff;
   --raised: #f7f9f7;
   --accent: #245f43;
+  --warn: #a4442b;
   color-scheme: light dark;
   accent-color: var(--accent);
 }
@@ -27,6 +28,7 @@ export const stylesheet = `:root {
     --surface: #161a18;
     --raised: #1d2220;
     --accent: #7fc4a2;
+    --warn: #e59a82;
   }
 }
 
@@ -74,6 +76,13 @@ h1 {
  */
 main.single h1 { margin-bottom: 1.25rem; padding-bottom: 0; border-bottom: none; }
 
+/*
+ * A page holding one thing sits in the middle of the window rather than at its top,
+ * where it would leave most of the window empty below it.
+ */
+body:has(main.single) { display: flex; min-height: 100vh; min-height: 100dvh; }
+main.single { width: 100%; max-width: 24rem; margin: auto; padding-bottom: 3rem; }
+
 h2 { margin: 2rem 0 .75rem; font-size: 1.125rem; font-weight: 620; letter-spacing: -.01em; }
 
 h3 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 620; }
@@ -179,7 +188,17 @@ main:has(.accounts) { max-width: 54rem; }
   letter-spacing: .02em;
 }
 
-.name { margin: 0; font-size: 1.0625rem; font-weight: 620; letter-spacing: -.01em; }
+/* A provider's mark before its name, at the height of the letters. */
+.who .provider { display: inline-block; width: .875rem; height: .875rem; margin-right: .375rem; vertical-align: -.125rem; }
+
+/* Clipped 4px left of the text, which hides the date's dot when the date wraps to a new line. */
+.name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1rem; margin: 0 0 0 -4px; padding-left: 4px; overflow-x: clip; font-size: 1.0625rem; font-weight: 620; letter-spacing: -.01em; }
+
+/* The account's creation date, after the name and a dot. It wraps under a long name. */
+.name .since { position: relative; color: var(--muted); font-size: .8125rem; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
+
+/* The dot sits in the gap before the date. */
+.name .since::before { content: "·"; position: absolute; left: -.5rem; transform: translateX(-50%); }
 
 /* The name is the card's subject before it is a link, so the rule is drawn on hover. */
 .name a { text-decoration: none; }
@@ -192,6 +211,8 @@ main:has(.accounts) { max-width: 54rem; }
 .fingerprint { font-family: ui-monospace, monospace; text-wrap: balance; }
 .fingerprint span { display: inline-block; margin-right: .5ch; }
 .how.additional { padding-left: .75rem; }
+/* The "signed" pill after the verifier's name, one size smaller than the line it sits on. */
+.how .signed-mark { display: inline-block; margin-left: .3125rem; padding: 0 .375rem; border: 1px solid var(--line); border-radius: 999px; font-size: .625rem; font-weight: 550; line-height: 1.3; text-decoration: none; vertical-align: .0625rem; }
 
 .fine { color: var(--muted); font-size: .8125rem; line-height: 1.55; margin-bottom: .625rem; }
 
@@ -255,12 +276,121 @@ button {
   border-radius: 6px;
   background: var(--accent);
   color: var(--surface);
-  font: 500 .9375rem/1.4 inherit;
+  font: 500 .9375rem/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif;
   cursor: pointer;
 }
 
+/* A link that starts something, drawn as a button. */
+a.button {
+  display: inline-block;
+  padding: .5rem 1rem;
+  border: 1px solid var(--accent);
+  border-radius: 6px;
+  background: var(--accent);
+  color: var(--surface);
+  font-weight: 500;
+  font-size: .9375rem;
+  line-height: 1.4;
+  text-decoration: none;
+}
+
 button + button { margin-left: .5rem; border-color: var(--line); background: none; color: var(--ink); }
 
+/* The other choice beside a page's one action, such as Cancel. */
+a.button.secondary { border-color: var(--line); background: none; color: var(--ink); }
+
+/* A page's action and its alternative, side by side. */
+.choice { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
+.choice form { margin: 0; }
+
+/* A control that ends something. Filled where it is the page's one action. */
+button.danger { border-color: var(--warn); background: var(--warn); }
+
+/*
+ * A connection on the settings page: the account's card, then what can be done with it.
+ * Its state sits in the card's corner, on the line that names the method.
+ */
+.connection { position: relative; margin-bottom: 1rem; }
+
+.state {
+  position: absolute;
+  top: .75rem;
+  right: .875rem;
+  display: flex;
+  align-items: center;
+  gap: .375rem;
+  height: 1.625rem;
+  padding: 0 .75rem 0 .5rem;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--ink);
+  font-size: .8125rem;
+  font-weight: 550;
+}
+
+/*
+ * The V the badge draws, in the tone that says how the record stands. A record that claims
+ * nothing is drawn faint in the text colour, as the badge draws it.
+ */
+.verdict { flex-shrink: 0; width: 1rem; height: 1rem; }
+.verdict.pending { opacity: .45; }
+.how .verdict { width: .875rem; height: .875rem; margin-right: .3125rem; vertical-align: -.125rem; }
+h1 .verdict { width: 1.25rem; height: 1.25rem; margin-right: .5rem; vertical-align: -.0625rem; }
+
+/*
+ * In a state pill the V is cropped to its strokes and fills the pill's height, so its arms
+ * and its foot meet the border. The pill's left padding keeps the arms clear of its curve.
+ */
+.state .verdict { width: auto; height: 100%; }
+
+/*
+ * A pill's line includes room for descenders below the letters, which leaves its text
+ * sitting high. Trimmed to the letters, the padding alone sets the space above and below.
+ * In a state pill the word alone is trimmed, so it centres on the V by its letters.
+ */
+@supports (text-box: trim-both cap alphabetic) {
+  .listing { padding: .3125rem .5rem; text-box: trim-both cap alphabetic; }
+  .state > span { text-box: trim-both cap alphabetic; }
+}
+
+/* Links that sit together on one line, wrapping where there is no room. */
+.links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; font-size: .875rem; }
+
+/* Under the account's id, with the facts about it rather than the controls. */
+.evidence { margin: .375rem 0 0; font-size: .8125rem; }
+
+.connection dl { margin-bottom: .75rem; }
+.connection .side > :last-child { margin-bottom: 0; }
+.connection pre { margin: .75rem 0; background: var(--surface); }
+.connection .actions { margin-top: .875rem; }
+
+/* The buttons for one connection in a row, wrapping where there is no room. */
+.actions { display: flex; flex-wrap: wrap; gap: .5rem; }
+.actions form { display: contents; }
+
+.actions button, .actions a.button {
+  margin: 0;
+  padding: .3125rem .75rem;
+  border-color: var(--line);
+  background: var(--surface);
+  color: var(--ink);
+  font-size: .8125rem;
+}
+
+.actions button:hover, .actions a.button:hover { border-color: var(--muted); }
+
+/* The controls that cannot be undone, together at the foot of the card. */
+.ending { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); }
+.ending form { margin: 0; }
+
+.ending button.danger {
+  padding: .3125rem .75rem;
+  background: var(--surface);
+  color: var(--warn);
+  font-size: .8125rem;
+}
+
 fieldset { margin: 0 0 1.25rem; padding: 1rem 1.125rem .25rem; border: 1px solid var(--line); border-radius: 8px; }
 
 legend { padding: 0 .375rem; color: var(--muted); font-size: .8125rem; }

package/dist/server/youtube.js

@@ -78,10 +78,15 @@ export function youtubeProvider(options) {
                     : undefined;
                 if (!handle)
                     throw new Error('Invalid provider identity');
+                // The channel's creation date, not the Google account's. Optional: a missing or
+                // unparseable date is left off and the sign-in still succeeds.
+                const publishedAt = channel.snippet.publishedAt;
+                const createdAt = typeof publishedAt === 'string' ? Date.parse(publishedAt) : NaN;
                 return {
                     id: channel.id,
                     handle,
                     profileUrl: `https://www.youtube.com/channel/${channel.id}`,
+                    ...(Number.isFinite(createdAt) ? { createdAt } : {}),
                 };
             }
             finally {