@submitium/badges 1.0.0 → 1.1.0

package/README.md

@@ -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`.
+- **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.
 - **Attribution.** One discreet "Badge wall by Submitium" link, dofollow by default; you can make it nofollow in the dashboard.

package/index.d.ts

@@ -34,8 +34,14 @@ type WallNode = {
 };
 export declare const ATTRIBUTION_URL = "https://submitium.com/?ref=badge-wall";
 /**
- * The wall as a tree. An empty wall (nothing ordered yet) is its root alone: invisible, and still
- * found by our check, which looks for the project's key on it.
+ * Before the first order the wall has no badge yet: one line says where they will be, gliding
+ * where the badges will glide, so the site owner sees the place it takes (founder's review,
+ * 2026-10-21). Visitors read it too: plain, true for anyone.
+ */
+export declare const EMPTY_TEXT = "Directory badges will appear here as this product gets listed.";
+/**
+ * The wall as a tree. An empty wall (nothing ordered yet) holds one line where the badges will be
+ * (EMPTY_TEXT); our check finds it all the same, by the project's key on its root.
  */
 export declare function layoutWall(wall: Wall): WallNode;
 //#endregion

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 attrsOf, i as TAGS, n as layoutWall, o as cssOf, r as ATTRS, s as styleText, t as ATTRIBUTION_URL } from "./layout-DvNYYz0J.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";
 //#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, 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, EMPTY_TEXT, LIMITS, REL_TOKENS, SUBMITIUM_PUBLIC_KEYS, TAGS, THEMES, VARIANTS, WALL_VERSION, attrsOf, cssOf, fetchWall, isSignedWall, layoutWall, parseWall, styleText, verifySignedWall, wallToHtml };

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

@@ -178,8 +178,15 @@ function windowFormat({ movers, badge }) {
 		moving: zone("sbm-w", movers.map((m, i) => item(loop.delays[i], badge(m))))
 	};
 }
+/**
+* Before the first order the wall has no badge yet: one line says where they will be, gliding
+* where the badges will glide, so the site owner sees the place it takes (founder's review,
+* 2026-10-21). Visitors read it too: plain, true for anyone.
+*/
+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}.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%}}",
+	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}"
 };
 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"]];
@@ -250,8 +257,8 @@ function scoped(css, scope, root) {
 	return out;
 }
 /**
-* The wall as a tree. An empty wall (nothing ordered yet) is its root alone: invisible, and still
-* found by our check, which looks for the project's key on it.
+* The wall as a tree. An empty wall (nothing ordered yet) holds one line where the badges will be
+* (EMPTY_TEXT); our check finds it all the same, by the project's key on its root.
 */
 function layoutWall(wall) {
 	const { variant, theme, attribution } = wall.settings;
@@ -266,7 +273,18 @@ function layoutWall(wall) {
 		"data-submitium": wall.key,
 		"data-submitium-variant": variant
 	}, children);
-	if (wall.badges.length === 0) return root([]);
+	const by = attribution === "none" ? null : attributionNode(attribution);
+	const some = (...nodes) => nodes.filter((n) => n !== null);
+	const styleOf = (rules) => {
+		scope = `sbm-x${hash(rules)}`;
+		return el("style", {}, [scoped(rules, `.${scope}`, new Set(classes))]);
+	};
+	if (wall.badges.length === 0) {
+		const css = styleOf(CSS_BASE + (by ? CSS_BY : "") + LAYOUT_CSS[variant] + CSS_EMPTY);
+		const line = el("div", { class: "sbm-ph" }, [el("div", { class: "sbm-pt" }, [el("span", {}, [EMPTY_TEXT]), el("span", { "aria-hidden": "true" }, [EMPTY_TEXT])])]);
+		if (variant === "window") return root([css, el("div", { class: "sbm-col" }, some(line, by))]);
+		return root([css, el("div", { class: "sbm-bar" }, some(line, by ? el("span", { class: "sbm-ctl" }, [by]) : null))]);
+	}
 	const candidates = wall.badges.filter((b) => !b.still).map((b) => ({
 		badge: b,
 		width: widthOf(b)
@@ -282,16 +300,12 @@ function layoutWall(wall) {
 		class: "sbm-fix",
 		"data-submitium-zone": "fixed"
 	}, still.map((b) => el("span", { class: "sbm-i" }, [badgeNode(b, theme, false)]))) : null;
-	const by = attribution === "none" ? null : attributionNode(attribution);
 	const ctl = by ? el("span", { class: "sbm-ctl" }, [by]) : null;
 	const zoneNode = built.moving;
 	const label = el("span", { class: "sbm-lb" }, ["Featured on"]);
-	const rules = CSS_BASE + (by ? CSS_BY : "") + LAYOUT_CSS[variant] + built.css;
-	scope = `sbm-x${hash(rules)}`;
-	const css = el("style", {}, [scoped(rules, `.${scope}`, new Set(classes))]);
-	const some = (...nodes) => nodes.filter((n) => n !== null);
+	const css = styleOf(CSS_BASE + (by ? CSS_BY : "") + LAYOUT_CSS[variant] + built.css);
 	if (variant === "window") return root([css, el("div", { class: "sbm-col" }, some(zoneNode, fixed, by))]);
 	return zoneNode ? root(some(css, el("div", { class: "sbm-bar" }, some(label, zoneNode, ctl)), fixed)) : root([css, el("div", { class: "sbm-bar" }, some(label, fixed, ctl))]);
 }
 //#endregion
-export { attrsOf as a, TAGS as i, layoutWall as n, cssOf as o, ATTRS as r, styleText as s, ATTRIBUTION_URL as t };
+export { TAGS as a, styleText as c, ATTRS as i, EMPTY_TEXT as n, attrsOf as o, layoutWall as r, cssOf as s, ATTRIBUTION_URL as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@submitium/badges",
-  "version": "1.0.0",
+  "version": "1.1.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.js

@@ -1,5 +1,5 @@
 import { n as fetchWall } from "./client-x4bD7iXW.js";
-import { a as attrsOf, i as TAGS, n as layoutWall, o as cssOf } from "./layout-DvNYYz0J.js";
+import { a as TAGS, o as attrsOf, r as layoutWall, s as cssOf } from "./layout-DOI7sqk6.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 attrsOf, i as TAGS, n as layoutWall, o as cssOf } from "./layout-DvNYYz0J.js";
+import { a as TAGS, o as attrsOf, r as layoutWall, s as cssOf } from "./layout-DOI7sqk6.js";
 import { defineComponent, h } from "vue";
 //#region src/vue.ts
 function toVue(node) {