@the-smithy/hearth 0.28.2 → 0.30.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/block-reference.html +90 -12
- package/package.json +2 -2
package/block-reference.html
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<meta charset="utf-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
6
6
|
<meta name="claude:viewport-fit-sides" content="cover">
|
|
7
|
-
<meta name="hearth-block-reference-inputs" content="
|
|
7
|
+
<meta name="hearth-block-reference-inputs" content="4dc7bd7e5e851451">
|
|
8
8
|
<title>Hearth Block Reference</title>
|
|
9
9
|
<style>/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
10
10
|
@layer properties;
|
|
@@ -1158,11 +1158,16 @@ body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-a
|
|
|
1158
1158
|
.jump nav { position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; width: min(260px, calc(100vw - 32px)); max-height: 70dvh; overflow-y: auto; padding: 8px; background: var(--page-card); border: 1px solid var(--page-line); border-radius: 6px; }
|
|
1159
1159
|
.jump a { display: block; padding: 3px 8px; border-radius: 4px; }
|
|
1160
1160
|
.jump a:hover { background: var(--mark-soft); }
|
|
1161
|
+
.place { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
|
|
1162
|
+
.steps { display: inline-flex; gap: 8px; }
|
|
1163
|
+
.steps a { padding: 5px 12px; border: 1px solid var(--page-line); border-radius: 6px; }
|
|
1164
|
+
.steps a[href]:hover { background: var(--mark-soft); }
|
|
1165
|
+
.steps a:not([href]) { color: var(--page-quiet); }
|
|
1161
1166
|
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
|
|
1162
|
-
.widths { display: inline-flex; border: 1px solid var(--page-line); border-radius: 6px; overflow: hidden; }
|
|
1163
|
-
.widths button { padding: 5px 12px; background: var(--page-card); cursor: pointer; }
|
|
1164
|
-
.widths button + button { border-left: 1px solid var(--page-line); }
|
|
1165
|
-
.widths button[aria-pressed="true"] { background: var(--mark); color: #fff; }
|
|
1167
|
+
.showing, .widths { display: inline-flex; border: 1px solid var(--page-line); border-radius: 6px; overflow: hidden; }
|
|
1168
|
+
.showing button, .widths button { padding: 5px 12px; background: var(--page-card); cursor: pointer; }
|
|
1169
|
+
.showing button + button, .widths button + button { border-left: 1px solid var(--page-line); }
|
|
1170
|
+
.showing button[aria-pressed="true"], .widths button[aria-pressed="true"] { background: var(--mark); color: #fff; }
|
|
1166
1171
|
.view-switch { display: inline-flex; border: 1px solid var(--page-line); border-radius: 6px; overflow: hidden; }
|
|
1167
1172
|
.view-switch > * { padding: 5px 12px; }
|
|
1168
1173
|
.view-switch > * + * { border-left: 1px solid var(--page-line); }
|
|
@@ -1175,7 +1180,10 @@ body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-a
|
|
|
1175
1180
|
.sidenav a { display: block; padding: 3px 8px; border-radius: 4px; }
|
|
1176
1181
|
.sidenav a:hover { background: var(--mark-soft); }
|
|
1177
1182
|
.nav-group { margin: 14px 8px 4px; font-size: 12px; font-weight: 600; color: var(--page-quiet); }
|
|
1183
|
+
.sidenav a[aria-current="true"], .jump a[aria-current="true"] { background: var(--mark-soft); font-weight: 600; }
|
|
1178
1184
|
main { min-width: 0; }
|
|
1185
|
+
.one-block .group-title, .one-block .entry:not(.current), .one-block:not(.landing) .intro { display: none; }
|
|
1186
|
+
html:not(.one-block) .steps { display: none; }
|
|
1179
1187
|
/* The list needs a wide window: in Hearth's admin this page sits in a narrower frame, and the blocks need the room. */
|
|
1180
1188
|
@media (min-width: 1280px) {
|
|
1181
1189
|
.layout { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; }
|
|
@@ -1230,13 +1238,21 @@ main { min-width: 0; }
|
|
|
1230
1238
|
#slot-tip { position: fixed; z-index: 70; max-width: min(320px, calc(100vw - 24px)); padding: 3px 8px; background: var(--mark); color: #fff; font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border-radius: 3px; pointer-events: none; }
|
|
1231
1239
|
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
|
|
1232
1240
|
</style>
|
|
1241
|
+
<script>if (location.hash !== "#all") document.documentElement.classList.add("one-block");</script>
|
|
1233
1242
|
</head>
|
|
1234
1243
|
<body>
|
|
1235
1244
|
<header class="topbar">
|
|
1236
1245
|
<a class="wordmark" href="#top">Hearth block reference</a>
|
|
1237
|
-
<
|
|
1246
|
+
<div class="place">
|
|
1247
|
+
<details class="jump" id="jump"><summary>Choose a block</summary><nav aria-label="Blocks"><p class="nav-group">Start here</p><a href="#grounds">Grounds and buttons</a><a href="#form-states">Form states</a><p class="nav-group">Layout</p><a href="#block-hero">Hero</a><a href="#block-cta">Call to action</a><p class="nav-group">Content</p><a href="#block-richText">Text</a><a href="#block-mediaText">Image + text</a><a href="#block-stats">Stats</a><a href="#block-cardGrid">Cards</a><a href="#block-faq">FAQ</a><a href="#block-pricing">Pricing</a><a href="#block-projects">Projects</a><a href="#block-quote">Quote</a><a href="#block-people">People</a><a href="#block-logos">Logos</a><a href="#block-collectionList">Collection list</a><p class="nav-group">Media</p><a href="#block-gallery">Photo gallery</a><a href="#block-video">Video</a><a href="#block-embed">Embed</a><p class="nav-group">Places & events</p><a href="#block-location">Location</a><a href="#block-locations">Locations</a><a href="#block-schedule">Schedule</a><a href="#block-upcomingEvents">Upcoming events</a><a href="#block-pastEvents">Past events</a><a href="#block-eventSpotlight">Event spotlight</a><p class="nav-group">Forms</p><a href="#block-volunteerSignup">Volunteer sign-up</a><a href="#block-form">Form</a><p class="nav-group">Giving</p><a href="#block-fundraiserSpotlight">Fundraiser spotlight</a><a href="#block-fundraiserGrid">Fundraisers</a><a href="#block-donate">Donation form</a><p class="nav-group">Global</p><a href="#block-sharedBlock">Global block</a><p class="nav-group">Custom</p><a href="#block-custom">Custom block</a></nav></details>
|
|
1248
|
+
<span class="steps"><a id="previous">← Previous</a><a id="next">Next →</a></span>
|
|
1249
|
+
</div>
|
|
1238
1250
|
<div class="controls">
|
|
1239
1251
|
<!-- hearth:view-switch -->
|
|
1252
|
+
<div class="showing" role="group" aria-label="Blocks shown">
|
|
1253
|
+
<button type="button" aria-pressed="true">One block</button>
|
|
1254
|
+
<button type="button" aria-pressed="false">All blocks</button>
|
|
1255
|
+
</div>
|
|
1240
1256
|
<div class="widths" role="group" aria-label="Preview width">
|
|
1241
1257
|
<button type="button" data-width="desktop" aria-pressed="true">Desktop</button>
|
|
1242
1258
|
<button type="button" data-width="768" aria-pressed="false">Tablet</button>
|
|
@@ -1542,12 +1558,74 @@ Millbrook, IL</address><p class="whitespace-pre-line" data-slot="locations.hours
|
|
|
1542
1558
|
jump.addEventListener("click", function (e) { if (e.target.tagName === "A") jump.open = false; });
|
|
1543
1559
|
document.addEventListener("click", function (e) { if (!jump.contains(e.target)) jump.open = false; });
|
|
1544
1560
|
|
|
1561
|
+
// One block at a time, unless the address says #all. Without this script the whole list shows.
|
|
1562
|
+
var entries = Array.prototype.slice.call(document.querySelectorAll("main .entry"));
|
|
1563
|
+
var links = Array.prototype.slice.call(document.querySelectorAll(".sidenav a"));
|
|
1564
|
+
var menuLinks = Array.prototype.slice.call(jump.querySelectorAll("nav a"));
|
|
1565
|
+
var showing = document.querySelectorAll(".showing button");
|
|
1566
|
+
var current = entries[0];
|
|
1567
|
+
var landing = true;
|
|
1568
|
+
function step(link, target, word) {
|
|
1569
|
+
if (target) {
|
|
1570
|
+
link.href = target.hash;
|
|
1571
|
+
link.title = word + ": " + target.textContent;
|
|
1572
|
+
} else {
|
|
1573
|
+
link.removeAttribute("href");
|
|
1574
|
+
link.removeAttribute("title");
|
|
1575
|
+
}
|
|
1576
|
+
}
|
|
1577
|
+
function route() {
|
|
1578
|
+
var id = location.hash.slice(1);
|
|
1579
|
+
var everything = id === "all";
|
|
1580
|
+
var found = document.getElementById(id);
|
|
1581
|
+
landing = !found || !found.classList.contains("entry");
|
|
1582
|
+
current = landing ? entries[0] : found;
|
|
1583
|
+
root.classList.toggle("one-block", !everything);
|
|
1584
|
+
root.classList.toggle("landing", landing);
|
|
1585
|
+
entries.forEach(function (entry) { entry.classList.toggle("current", entry === current); });
|
|
1586
|
+
links.concat(menuLinks).forEach(function (link) {
|
|
1587
|
+
if (!everything && link.hash === "#" + current.id) link.setAttribute("aria-current", "true");
|
|
1588
|
+
else link.removeAttribute("aria-current");
|
|
1589
|
+
});
|
|
1590
|
+
showing[0].setAttribute("aria-pressed", String(!everything));
|
|
1591
|
+
showing[1].setAttribute("aria-pressed", String(everything));
|
|
1592
|
+
var index = links.findIndex(function (link) { return link.hash === "#" + current.id; });
|
|
1593
|
+
jump.querySelector("summary").textContent = everything ? "Choose a block" : links[index].textContent;
|
|
1594
|
+
step(document.getElementById("previous"), links[index - 1], "Previous");
|
|
1595
|
+
step(document.getElementById("next"), links[index + 1], "Next");
|
|
1596
|
+
if (!everything) window.scrollTo({ top: 0, behavior: "instant" });
|
|
1597
|
+
}
|
|
1598
|
+
window.addEventListener("hashchange", route);
|
|
1599
|
+
route();
|
|
1600
|
+
|
|
1601
|
+
// In the whole list a link scrolls, and the address stays #all so that a reload or Back keeps the list.
|
|
1602
|
+
document.addEventListener("click", function (e) {
|
|
1603
|
+
var link = e.target.closest ? e.target.closest("a[href^='#']") : null;
|
|
1604
|
+
if (!link || link.closest(".frame") || root.classList.contains("one-block")) return;
|
|
1605
|
+
var target = document.getElementById(link.hash.slice(1));
|
|
1606
|
+
if (!target) return;
|
|
1607
|
+
e.preventDefault();
|
|
1608
|
+
target.scrollIntoView();
|
|
1609
|
+
});
|
|
1610
|
+
// The switch keeps your place: the same block, whichever way you go.
|
|
1611
|
+
showing[0].addEventListener("click", function () {
|
|
1612
|
+
var line = window.innerHeight / 3;
|
|
1613
|
+
var inView = entries.filter(function (entry) { return entry.getBoundingClientRect().bottom > line; })[0];
|
|
1614
|
+
location.hash = (inView || current).id;
|
|
1615
|
+
});
|
|
1616
|
+
showing[1].addEventListener("click", function () {
|
|
1617
|
+
var keep = landing ? null : current;
|
|
1618
|
+
location.hash = "all";
|
|
1619
|
+
route();
|
|
1620
|
+
if (keep) keep.scrollIntoView({ behavior: "instant" });
|
|
1621
|
+
});
|
|
1622
|
+
|
|
1545
1623
|
var tip = document.getElementById("slot-tip");
|
|
1546
1624
|
var toggle = document.getElementById("show-slots");
|
|
1547
|
-
var
|
|
1625
|
+
var hovered = null;
|
|
1548
1626
|
function clear() {
|
|
1549
|
-
if (
|
|
1550
|
-
|
|
1627
|
+
if (hovered) hovered.classList.remove("slot-hover");
|
|
1628
|
+
hovered = null;
|
|
1551
1629
|
tip.hidden = true;
|
|
1552
1630
|
}
|
|
1553
1631
|
toggle.addEventListener("change", function () {
|
|
@@ -1558,9 +1636,9 @@ Millbrook, IL</address><p class="whitespace-pre-line" data-slot="locations.hours
|
|
|
1558
1636
|
if (!toggle.checked) return;
|
|
1559
1637
|
var el = e.target.closest ? e.target.closest(".frame [data-slot]") : null;
|
|
1560
1638
|
if (!el) return clear();
|
|
1561
|
-
if (el !==
|
|
1562
|
-
if (
|
|
1563
|
-
|
|
1639
|
+
if (el !== hovered) {
|
|
1640
|
+
if (hovered) hovered.classList.remove("slot-hover");
|
|
1641
|
+
hovered = el;
|
|
1564
1642
|
el.classList.add("slot-hover");
|
|
1565
1643
|
tip.textContent = el.getAttribute("data-slot").split(" ").join(" + ");
|
|
1566
1644
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@the-smithy/hearth",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.30.0",
|
|
4
4
|
"description": "Typed client for the Hearth Delivery API: content, SEO, forms and publish webhooks.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"block-reference.html"
|
|
51
51
|
],
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@the-smithy/hearth-schema": "^0.
|
|
53
|
+
"@the-smithy/hearth-schema": "^0.30.0"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
56
|
"next": ">=15",
|