← back to Recycledwallpaper
homepage: add Ideas rails block (New this week + Curated picks)
b1d73b2ea1416eb859ea9cf528c5641bd5757fda · 2026-05-26 08:11:14 -0700 · Steve Abrams
Fleet rails sweep — recycledwallpaper was missing the standard 2-rail Ideas
section on its homepage. Matches the hotel/jute/etc baseline added in
graphics-loop pass 11. CSS + hydration JS lifted verbatim from hotelwallcoverings.
Files touched
Diff
commit b1d73b2ea1416eb859ea9cf528c5641bd5757fda
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Tue May 26 08:11:14 2026 -0700
homepage: add Ideas rails block (New this week + Curated picks)
Fleet rails sweep — recycledwallpaper was missing the standard 2-rail Ideas
section on its homepage. Matches the hotel/jute/etc baseline added in
graphics-loop pass 11. CSS + hydration JS lifted verbatim from hotelwallcoverings.
---
public/index.html | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 53 insertions(+)
diff --git a/public/index.html b/public/index.html
index c8a308d..e7c2a63 100644
--- a/public/index.html
+++ b/public/index.html
@@ -317,6 +317,19 @@ textarea:focus-visible,
<a class="enter" href="#shop">Enter <svg viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M0 6h22M16 1l6 5-6 5"/></svg></a>
</section>
+<section class="section" id="ideas">
+ <div class="rail-block">
+ <div class="rail-eyebrow">Ideas</div>
+ <h2 class="rail-title">New this week</h2>
+ <div class="rail" id="railNewest"></div>
+ </div>
+ <div class="rail-block">
+ <div class="rail-eyebrow">Ideas</div>
+ <h2 class="rail-title">Curated picks</h2>
+ <div class="rail" id="railCurated"></div>
+ </div>
+</section>
+
<section class="section" id="shop">
<div class="section-header">
<div>
@@ -757,6 +770,20 @@ loadGridPage();
.dwm-option svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
.dwm-option .lbl{flex:1;display:block}
.dwm-option .val{display:block;font-size:10px;letter-spacing:0.14em;text-transform:none;font-weight:500;opacity:0.65;margin-top:4px}
+
+/* Ideas rails (added 2026-05-26 fleet rails sweep — matches hotel/jute/etc baseline) */
+#ideas { padding: 56px 24px 24px; max-width:1600px; margin:0 auto }
+#ideas .rail-block { margin-bottom:48px }
+#ideas .rail-eyebrow { font-size:11px; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:var(--muted, #888); margin-bottom:8px }
+#ideas .rail-title { font-size:clamp(22px,2.6vw,32px); font-weight:500; letter-spacing:-0.01em; margin:0 0 18px; color:var(--ink,#fff) }
+#ideas .rail { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none }
+#ideas .rail::-webkit-scrollbar { display:none }
+#ideas .rail-card { flex:0 0 240px; scroll-snap-align:start; cursor:pointer; transition:transform 0.2s; text-decoration:none; color:inherit }
+#ideas .rail-card:hover { transform:translateY(-3px) }
+#ideas .rail-card img { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:var(--card,#222) }
+#ideas .rail-card .rc-title { font-size:13px; font-weight:500; color:var(--paper,#fff); padding:8px 0 2px; line-height:1.3 }
+#ideas .rail-card .rc-meta { font-size:11px; color:var(--muted,#888); letter-spacing:0.06em }
+@media (max-width:720px) { #ideas .rail-card { flex:0 0 160px } }
</style>
<!-- Product details modal — opens on any chip click. Vendor-redacted. -->
@@ -1001,6 +1028,32 @@ loadGridPage();
else location.reload();
});
})();
+
+// 2026-05-26 fleet rails sweep: hydrate Ideas rails from /api/products
+(async function hydrateIdeas() {
+ try {
+ const r = await fetch('/api/products?limit=80');
+ if (!r.ok) return;
+ const d = await r.json();
+ const items = (d.items || []).filter(p => p && p.image_url);
+ if (!items.length) return;
+ const sorted = [...items].sort((a,b) => String(b.created_at || '').localeCompare(String(a.created_at || '')));
+ const newest = sorted.slice(0, 12);
+ const curated = items.filter((_, i) => i % 5 === 3).slice(0, 12);
+ function card(p) {
+ const url = (p.image_url || '').replace(/(_\d+x\d*)(\.(jpg|jpeg|png|webp|gif))(\?|$)/i, '$2$4');
+ return '<a class="rail-card" href="/sample/' + encodeURIComponent(p.handle || p.sku) + '">' +
+ '<img src="' + url + '" alt="' + (p.title || '').replace(/"/g, '"') + '" loading="lazy">' +
+ '<div class="rc-title">' + ((p.title || '').split('|')[0] || '').trim() + '</div>' +
+ '<div class="rc-meta">Designer Wallcoverings</div>' +
+ '</a>';
+ }
+ const r1 = document.getElementById('railNewest');
+ const r2 = document.getElementById('railCurated');
+ if (r1) r1.innerHTML = newest.map(card).join('');
+ if (r2) r2.innerHTML = curated.map(card).join('');
+ } catch(e) {}
+})();
</script>
← bedfc1a pre-hydrate density LS to kill FOUC
·
back to Recycledwallpaper
·
homepage: add retrowalls-canonical rail-sections (id=rails + 2a0c5d3 →