@submitium/badges 1.1.0 → 1.2.0

package/README.md

@@ -34,7 +34,7 @@ export function Footer() {
 }
 ```
 
-`<SubmitiumBadges />` is an async Server Component. It reads `SUBMITIUM_API_KEY`, and Next.js caches the wall for an hour (`revalidate`).
+`<SubmitiumBadges />` is an async Server Component. It reads `SUBMITIUM_API_KEY`, and keeps the wall for a minute (`revalidate`), so new badges show within a few minutes of an order.
 
 ## Nuxt
 
@@ -118,7 +118,7 @@ const html = wall ? wallToHtml(layoutWall(wall)) : "";
 |---|---|---|
 | `apiKey` | `SUBMITIUM_API_KEY` | Your project's API key. |
 | `timeout` | `3000` | Milliseconds to wait for the API. Past that, no wall, and your page carries on. |
-| `revalidate` | `3600` | Seconds a wall is kept before asking again (in memory, and as Next.js `revalidate`). |
+| `revalidate` | `60` | Seconds a wall is kept before asking again (in memory, and as Next.js `revalidate`). A static Next.js page is rebuilt as often when visited: raise it to rebuild less, and new badges take as long to show. |
 | `apiUrl` | `https://api.submitium.com` | For local development only. |
 
 The format (`ribbon`: one gliding line in the footer bar; `window`: a small gliding window under your logo), the theme and the attribution link are settings you change in the dashboard. Your code stays the same.
@@ -129,6 +129,7 @@ The format (`ribbon`: one gliding line in the footer bar; `window`: a small glid
 - **Checked.** The wall must match a strict contract (`parseWall`): https links that point to the directory's own domain, https images, a closed list of `rel` values, plain text with a length limit, and a wall that hasn't expired (a week at most). Anything else and the whole wall is refused, not repaired.
 - **Plain elements only.** The wall becomes links, images, a few spans and one scoped `<style>`, all written by this package from numbers (no CSS comes from the API). React, Vue, Svelte and Astro write each element themselves and escape every value.
 - **In your HTML.** The badges are in the HTML your server sends, which is what directory checkers read. No client JavaScript: motion is pure CSS. It pauses on hover and keyboard focus, and stands still under `prefers-reduced-motion`.
+- **Up to date within minutes.** Your server keeps the wall for a minute, then asks again: badges a new order adds show within a few minutes, and a busy site asks us once a minute at most, per server. A static build (Astro, `next export`) shows them at its next build.
 - **Visible from day one.** Before your first order the wall has no badge yet: it shows one gliding line, "Directory badges will appear here as this product gets listed.", where the badges will be. Badges replace it as directories are ordered.
 - **Never breaks your page.** If the API is slow, down or answers anything unexpected, the last good wall is kept, or nothing renders.
 - **Fair to directories.** Each badge links to its directory with the directory's official `rel`, the image loads from the directory's own URL, and no badge is hidden or duplicated. Badges a directory wants in view at all times never move.

package/{client-x4bD7iXW.js → client-H97YsZf9.js}

@@ -191,6 +191,12 @@ async function verifySignedWall(envelope, keys = SUBMITIUM_PUBLIC_KEYS) {
 //#endregion
 //#region src/client.ts
 const DEFAULT_API_URL = "https://api.submitium.com";
+/**
+* Seconds a wall is kept before asking again: new badges show within a few minutes of an order,
+* and a busy site asks us at most once a minute per server. Next.js rebuilds a static page as often
+* (the lowest `revalidate` of a route sets its own); pass a higher value to rebuild less often.
+*/
+const DEFAULT_REVALIDATE = 60;
 const API_KEY = /^sbk_(live|test)_[A-Za-z0-9]{24,64}$/;
 function envKey() {
 	return typeof process !== "undefined" ? process.env?.SUBMITIUM_API_KEY : void 0;
@@ -209,7 +215,7 @@ async function fetchWall(options = {}) {
 	const apiKey = options.apiKey ?? envKey();
 	if (!apiKey || !API_KEY.test(apiKey)) return null;
 	const base = (options.apiUrl ?? "https://api.submitium.com").replace(/\/+$/, "");
-	const revalidate = options.revalidate ?? 3600;
+	const revalidate = options.revalidate ?? 60;
 	const slot = `${base} ${apiKey}`;
 	const kept = memory.get(slot);
 	if (kept && alive(kept.wall) && Date.now() - kept.at < revalidate * 1e3) return kept.wall;
@@ -243,4 +249,4 @@ async function request(base, apiKey, revalidate, options) {
 	}
 }
 //#endregion
-export { verifySignedWall as a, REL_TOKENS as c, WALL_VERSION as d, parseWall as f, isSignedWall as i, THEMES as l, fetchWall as n, ATTRIBUTIONS as o, SUBMITIUM_PUBLIC_KEYS as r, LIMITS as s, DEFAULT_API_URL as t, VARIANTS as u };
+export { isSignedWall as a, LIMITS as c, VARIANTS as d, WALL_VERSION as f, SUBMITIUM_PUBLIC_KEYS as i, REL_TOKENS as l, DEFAULT_REVALIDATE as n, verifySignedWall as o, parseWall as p, fetchWall as r, ATTRIBUTIONS as s, DEFAULT_API_URL as t, THEMES as u };

package/{client-iCo9PkAU.d.ts → client-gGbOYZbN.d.ts}

@@ -1,12 +1,18 @@
 import { d as Wall } from "./contract-KBbC2LBR.js";
 //#region src/client.d.ts
 declare const DEFAULT_API_URL = "https://api.submitium.com";
+/**
+ * Seconds a wall is kept before asking again: new badges show within a few minutes of an order,
+ * and a busy site asks us at most once a minute per server. Next.js rebuilds a static page as often
+ * (the lowest `revalidate` of a route sets its own); pass a higher value to rebuild less often.
+ */
+declare const DEFAULT_REVALIDATE = 60;
 type FetchWallOptions = {
   /** Your project's API key. Defaults to the SUBMITIUM_API_KEY environment variable. */
   apiKey?: string;
   /** Milliseconds before giving up: the page renders without the wall. Default 3000. */
   timeout?: number;
-  /** Seconds the wall is kept before asking again (in memory, and as Next.js `revalidate`). Default one hour. */
+  /** Seconds the wall is kept before asking again (in memory, and as Next.js `revalidate`). Default 60. */
   revalidate?: number;
   /** Testing against a local API only: its URL and its public key. */
   apiUrl?: string;
@@ -18,4 +24,4 @@ type FetchWallOptions = {
  */
 declare function fetchWall(options?: FetchWallOptions): Promise<Wall | null>;
 //#endregion
-export { FetchWallOptions as n, fetchWall as r, DEFAULT_API_URL as t };
+export { fetchWall as i, DEFAULT_REVALIDATE as n, FetchWallOptions as r, DEFAULT_API_URL as t };

package/index.d.ts

@@ -1,5 +1,5 @@
 import { a as RelToken, c as VARIANTS, d as Wall, f as WallBadge, i as REL_TOKENS, l as Variant, n as Attribution, o as THEMES, p as parseWall, r as LIMITS, s as Theme, t as ATTRIBUTIONS, u as WALL_VERSION } from "./contract-KBbC2LBR.js";
-import { n as FetchWallOptions, r as fetchWall, t as DEFAULT_API_URL } from "./client-iCo9PkAU.js";
+import { i as fetchWall, n as DEFAULT_REVALIDATE, r as FetchWallOptions, t as DEFAULT_API_URL } from "./client-gGbOYZbN.js";
 //#region src/layout.d.ts
 type WallTag = "div" | "ul" | "li" | "a" | "img" | "picture" | "source" | "span" | "b" | "style" | "svg" | "path";
 type WallAttrs = {
@@ -82,4 +82,4 @@ export declare function styleText(style: Record<string, string>): string;
 /** The CSS of a `style` node, refused if it could close the element (it never can: it's ours). */
 export declare function cssOf(node: WallNode): string;
 //#endregion
-export { ATTRIBUTIONS, type Attribution, DEFAULT_API_URL, type FetchWallOptions, LIMITS, REL_TOKENS, type RelToken, type SignedWall, THEMES, type Theme, VARIANTS, type Variant, WALL_VERSION, type Wall, type WallAttrs, type WallBadge, type WallNode, type WallTag, fetchWall, parseWall };
+export { ATTRIBUTIONS, type Attribution, DEFAULT_API_URL, DEFAULT_REVALIDATE, type FetchWallOptions, LIMITS, REL_TOKENS, type RelToken, type SignedWall, THEMES, type Theme, VARIANTS, type Variant, WALL_VERSION, type Wall, type WallAttrs, type WallBadge, type WallNode, type WallTag, fetchWall, parseWall };

package/index.js

@@ -1,5 +1,5 @@
-import { a as verifySignedWall, c as REL_TOKENS, d as WALL_VERSION, f as parseWall, i as isSignedWall, l as THEMES, n as fetchWall, o as ATTRIBUTIONS, r as SUBMITIUM_PUBLIC_KEYS, s as LIMITS, t as DEFAULT_API_URL, u as VARIANTS } from "./client-x4bD7iXW.js";
-import { a as TAGS, c as styleText, i as ATTRS, n as EMPTY_TEXT, o as attrsOf, r as layoutWall, s as cssOf, t as ATTRIBUTION_URL } from "./layout-DOI7sqk6.js";
+import { a as isSignedWall, c as LIMITS, d as VARIANTS, f as WALL_VERSION, i as SUBMITIUM_PUBLIC_KEYS, l as REL_TOKENS, n as DEFAULT_REVALIDATE, o as verifySignedWall, p as parseWall, r as fetchWall, s as ATTRIBUTIONS, t as DEFAULT_API_URL, u as THEMES } from "./client-H97YsZf9.js";
+import { a as TAGS, c as styleText, i as ATTRS, n as EMPTY_TEXT, o as attrsOf, r as layoutWall, s as cssOf, t as ATTRIBUTION_URL } from "./layout-cMiQ5rSW.js";
 //#region src/html.ts
 const VOID = /* @__PURE__ */ new Set([
 	"img",
@@ -45,4 +45,4 @@ function write(node, depth) {
 	return `<${node.tag}${attrs}>${inner}${lines ? end : ""}</${node.tag}>`;
 }
 //#endregion
-export { ATTRIBUTIONS, ATTRIBUTION_URL, ATTRS, DEFAULT_API_URL, EMPTY_TEXT, LIMITS, REL_TOKENS, SUBMITIUM_PUBLIC_KEYS, TAGS, THEMES, VARIANTS, WALL_VERSION, attrsOf, cssOf, fetchWall, isSignedWall, layoutWall, parseWall, styleText, verifySignedWall, wallToHtml };
+export { ATTRIBUTIONS, ATTRIBUTION_URL, ATTRS, DEFAULT_API_URL, DEFAULT_REVALIDATE, EMPTY_TEXT, LIMITS, REL_TOKENS, SUBMITIUM_PUBLIC_KEYS, TAGS, THEMES, VARIANTS, WALL_VERSION, attrsOf, cssOf, fetchWall, isSignedWall, layoutWall, parseWall, styleText, verifySignedWall, wallToHtml };

package/{layout-DOI7sqk6.js → layout-cMiQ5rSW.js}

@@ -186,8 +186,8 @@ function windowFormat({ movers, badge }) {
 const EMPTY_TEXT = "Directory badges will appear here as this product gets listed.";
 const CSS_EMPTY = `.sbm-ph{position:relative;flex:1 1 260px;width:260px;min-width:0;max-width:520px;height:${H}px;overflow:hidden;${mask(40)}}.sbm-col .sbm-ph{flex:none;width:320px;max-width:100%}.sbm-pt{display:flex;width:max-content;height:100%;align-items:center;animation:sbm-pe 18s linear infinite}.sbm-pt span{padding-right:48px;white-space:nowrap;opacity:.7}@keyframes sbm-pe{from{transform:translateX(0)}to{transform:translateX(-50%)}}.sbm:hover .sbm-pt,.sbm:focus-within .sbm-pt{animation-play-state:paused}@media (prefers-reduced-motion:reduce){.sbm-ph{width:auto;height:auto;${NO_MASK}}.sbm-pt{width:auto;animation:none}.sbm-pt span{white-space:normal;padding:0}.sbm-pt span+span{display:none}}`;
 const LAYOUT_CSS = {
-	ribbon: ".sbm-ribbon{container-type:inline-size;flex:1 1 260px;width:100%;min-width:0}.sbm-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;font-size:12px}@container (max-width:520px){.sbm-lb{display:none}.sbm-w{flex-basis:100%}}",
-	window: ".sbm-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:12px}"
+	ribbon: ".sbm-ribbon{container-type:inline-size;width:100%;min-width:0}.sbm-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;font-size:12px}@container (max-width:520px){.sbm-lb{display:none}.sbm-w{flex-basis:100%}}",
+	window: ".sbm-window{min-width:0;max-width:100%}.sbm-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:12px}"
 };
 const MARK_PATHS = [["#4432F4", "M20 1l-1 1 0 2 6 27 1 1 2 0 1 0 6-12 12-2 1-2-1-1-11-6-14-8-2 0zM39 22l-2 0-7 11-2 1-2 0-2-1-3-11-14 8-1 1 2 2 20 10 3 1 2 0 23-11 2-2-1-1-15-9-3 1z"], ["#CAC9FD", "M11 37l-5 3 0 1 1 0 25 13 2-1 18-9 5-2 1-2-1-1-5-2-19 9-1 1-21-10zM10 47l-4 1 0 2 1 1 25 12 2 0 9-5 13-7 2-1 0-2-2 0-4-2-17 9-3 1-20-10-2 1z"]];
 function attributionNode(rel) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@submitium/badges",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "The Submitium badge wall: a signed, checked wall rendered as plain links and images. React, Vue, Svelte, Astro.",
   "license": "MIT",
   "author": "Submitium <contact@submitium.com>",

package/react.d.ts

@@ -1,5 +1,5 @@
 import { d as Wall } from "./contract-KBbC2LBR.js";
-import { n as FetchWallOptions } from "./client-iCo9PkAU.js";
+import { r as FetchWallOptions } from "./client-gGbOYZbN.js";
 import { ReactNode } from "react";
 //#region src/react.d.ts
 /** A wall you already fetched (with `fetchWall`), rendered. */

package/react.js

@@ -1,5 +1,5 @@
-import { n as fetchWall } from "./client-x4bD7iXW.js";
-import { a as TAGS, o as attrsOf, r as layoutWall, s as cssOf } from "./layout-DOI7sqk6.js";
+import { r as fetchWall } from "./client-H97YsZf9.js";
+import { a as TAGS, o as attrsOf, r as layoutWall, s as cssOf } from "./layout-cMiQ5rSW.js";
 import { createElement } from "react";
 //#region src/react.tsx
 /** React's names for the attributes React spells differently. */

package/vue.js

@@ -1,4 +1,4 @@
-import { a as TAGS, o as attrsOf, r as layoutWall, s as cssOf } from "./layout-DOI7sqk6.js";
+import { a as TAGS, o as attrsOf, r as layoutWall, s as cssOf } from "./layout-cMiQ5rSW.js";
 import { defineComponent, h } from "vue";
 //#region src/vue.ts
 function toVue(node) {