openvibers/openvibe.blog Commits

Home: a taste and a door on phones (#126)

OP OpenVibers committed 15 days ago · 8a945a8f8c · 3 files, +27 −15

Six posts show on a phone with a link to the whole blog (the pager stays on wide
screens), five sites in the week's bars, the AI desks are one row that scrolls
sideways, twelve topics show; what a blog gets and how it works fold into
"Start your blog today", and the find-your-way grid and the closing call that
repeated the nav and the hero go. The hero has two actions. CSS raw budget
36.1 -> 38 (measured 37.6).

Changes

ddiff --git a/public/css/blog.css b/public/css/blog.css
iindex b157ea1..c9eb556 100644
---- a/public/css/blog.css
++++ b/public/css/blog.css
@@@ -118,3 +118,23 @@ body.blog-home .page { max-width: 1120px; }
.bh-card .bh-sum { display: none; }
.bh-desks .bh-sum { -webkit-line-clamp: 2; line-clamp: 2; }
}
++
++/* Phones (2026-10-29): a taste and a door. Six posts and a link to the whole blog, five sites in the week, the desks in
++ one sideways row, twelve topics; every list is a link away. */
++.bh-all { display: none; }
++.bh-fold { border: 1px solid var(--border, #1f2d47); border-radius: 14px; background: var(--bg-card, #131c2e); }
++.bh-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 16px; cursor: pointer; font-weight: 700; list-style: none; }
++.bh-fold > summary::-webkit-details-marker { display: none; }
++.bh-fold > summary span { color: var(--text-muted, #7386a3); font-weight: 600; font-size: .86rem; text-align: right; }
++.bh-fold > summary:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: -2px; border-radius: 14px; }
++.bh-fold .sc-sec { margin: 0; max-width: none; padding: 0 16px 16px; }
++.bh-fold-go { margin: 0; padding: 0 16px 18px; }
++@media (max-width: 599px) {
++ #posts .bh-cards > li:nth-child(n+7), #posts .ov-pagination { display: none; }
++ #posts .bh-all { display: block; }
++ .bh-bars > li:nth-child(n+6), .bh-chips > li:nth-child(n+13) { display: none; }
++ .bh-desks { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; gap: 10px; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; }
++ .bh-desks::-webkit-scrollbar { display: none; }
++ .bh-desks > li { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; }
++ .bh-fold > summary span { display: none; }
++}
ddiff --git a/server/render/home.js b/server/render/home.js
iindex a2543a5..68467d9 100644
---- a/server/render/home.js
++++ b/server/render/home.js
@@@ -60,13 +60,14 @@ function homeBody(o) {
eyebrow: 'OpenVibe.Blog',
title: 'Write on', accent: 'OpenVibe',
lede: 'A blog of your own with drafts, scheduling, feeds and comments, on the OpenVibe account you already have. Anyone can read without one.',
-- actions: [start, { label: 'Read the OpenVibe blog', href: '#posts' }, { label: 'AI desks', href: '/desks' }],
++ // Two, so they sit side by side on a phone; the AI desks are a section of their own below.
++ actions: [start, { label: 'Read the OpenVibe blog', href: '#posts' }],
aside: stats ? { html: statsPanel(stats) } : undefined,
}))}
<section class="sc-sec bh-sec" id="posts" aria-labelledby="bh-posts-h"><h2 id="bh-posts-h">Latest from ${blog.title.replace(/^The /, 'the ')}</h2>
${blog.description ? h`<p class="sc-lede">${blog.description}</p>` : ''}
${feeds.length ? h`<p class="feeds">Follow: ${feeds.map((f) => h`<a href="${f.href}" type="${f.mime}">${f.label}</a> `)}</p>` : ''}
--${items.length ? h`<ol class="bh-cards">${items.map(postCard)}</ol>${raw(ssr.paginationHtml(pager))}` : h`<p class="empty">Nothing published here yet.</p>`}</section>
++${items.length ? h`<ol class="bh-cards">${items.map(postCard)}</ol>${raw(ssr.paginationHtml(pager))}<p class="bh-more bh-all"><a href="/@${blog.handle}">Every post, newest first</a></p>` : h`<p class="empty">Nothing published here yet.</p>`}</section>
${week.length ? h`<section class="sc-sec bh-sec" aria-labelledby="bh-week-h"><h2 id="bh-week-h">This week across OpenVibe</h2>
<p class="sc-lede">${plural(stats.weekChanges, 'change')} shipped to ${plural(stats.weekSites, 'site')} in the last seven days. Patch notes on this blog round them up.</p>
<ol class="bh-bars">${week.map((w) => h`<li><a href="https://openvibe.network/updates?site=${encodeURIComponent(w.service)}">${siteName(w.service)}</a><span class="bh-bar" aria-hidden="true"><span style="width:${String(Math.max(2, Math.round((w.changes / top) * 100)))}%"></span></span><span class="bh-n">${plural(w.changes, 'change')}</span></li>`)}</ol>
@@@ -79,7 +80,7 @@ ${tags.length ? h`<section class="sc-sec bh-sec" aria-labelledby="bh-tags-h"><h2
<ul class="bh-chips">${tags.map((t) => h`<li><a href="/tags/${encodeURIComponent(t.slug)}">#${t.name} <span>${num(t.posts)}</span></a></li>`)}</ul>
${series.length ? h`<p class="bh-more">Series: ${series.map((s, i) => h`${i ? ' · ' : ''}<a href="${s.url}">${s.title}</a> (${plural(s.posts, 'post')})`)}</p>` : ''}</section>` : ''}
${memberItems.length ? h`<section class="sc-sec bh-sec" aria-labelledby="bh-members-h"><h2 id="bh-members-h">From members' blogs</h2><ol class="bh-cards">${memberItems.map(postCard)}</ol></section>` : ''}
--${raw(showcase.features({
++<div class="sc-sec bh-sec"><details class="bh-fold"><summary>Start your blog today<span>what it gets, how it works</span></summary>${raw(showcase.features({
title: 'What your blog gets',
items: [
{ icon: 'ov:blog', title: 'Drafts and revisions', text: 'Every save is a revision you can go back to; publish when it is ready.' },
@@@ -98,17 +99,8 @@ ${raw(showcase.steps({
{ title: 'Publish now or schedule it', text: 'Public, unlisted, for your VIP members or private, one post at a time.' },
{ title: 'Readers follow along', text: 'Feeds for the blog, each series and each category, and comments on OpenVibe.Community.' },
],
-- }))}
--<section class="sc-sec bh-sec bh-faq" aria-labelledby="bh-faq-h"><h2 id="bh-faq-h">Questions</h2>${FAQ.map((f) => h`<details><summary>${f.q}</summary><p>${f.a}</p></details>`)}</section>
--<section class="sc-sec bh-sec" aria-labelledby="bh-links-h"><h2 id="bh-links-h">Find your way around</h2><ul class="bh-links">
--<li><a href="/write"><b>Write</b><small>Your blog, its drafts and its settings.</small></a></li>
--<li><a href="/desks"><b>AI desks</b><small>News, food safety, deals, hosting, crowdfunding, developer digests and satire.</small></a></li>
--${series.length ? h`<li><a href="${series[0].url}"><b>${series[0].title}</b><small>Every change to OpenVibe, rounded up.</small></a></li>` : ''}
--<li><a href="/feed.xml"><b>Feeds</b><small>RSS here; Atom and JSON Feed too.</small></a></li>
--<li><a href="/updates"><b>What shipped</b><small>Every change to OpenVibe.Blog itself.</small></a></li>
--<li><a href="https://openvibe.network/updates"><b>Network changelog</b><small>Every change to every OpenVibe site.</small></a></li>
--</ul></section>
--${raw(showcase.cta({ title: 'Start your blog today', text: 'Drafts, scheduling, feeds and comments come with it, and readers need no account.', actions: [start] }))}`);
++ }))}<p class="bh-fold-go"><a class="sc-btn sc-primary" href="${start.href}">${start.label}</a></p></details></div>
++<section class="sc-sec bh-sec bh-faq" aria-labelledby="bh-faq-h"><h2 id="bh-faq-h">Questions</h2>${FAQ.map((f) => h`<details><summary>${f.q}</summary><p>${f.a}</p></details>`)}</section>`);
}
/** Structured data for the home: the site, the newest posts as an ItemList, and the questions shown. */
ddiff --git a/test/perf-budget.test.js b/test/perf-budget.test.js
iindex eb5b9c8..85c3511 100644
---- a/test/perf-budget.test.js
++++ b/test/perf-budget.test.js
@@@ -20,7 +20,7 @@ const BUDGETS = {
jsRawKB: 308, // 307.8 with openvibe-shared 4.43.0 (room.css carries the kit tokens, 4.39.1; the kit's 4.39.0 rules); 300.5 openvibe-shared 4.25.0: the menu's orb beside the brand, both balances on phones, messages, the account sheet on phones and the bar stepping away on phones; 293 openvibe-shared 4.22.0: the navbar's magnifier search button and More dropdown (search.js and loading.js load only when used); 287.2 Shared 4.17.0: OpenCoins and Vibes chips (wallet: true) in the navbar; 273.2 openvibe-shared 4.15 footer: the compact footer opens into the whole one, and the pulse line; 263.4 with shared 4.11.0's seasonal navbar; 254.1 with openvibe-shared 4.9.0 (status text twins in every theme, 2026-10-23); 246.2 with openvibe-shared 4.2.x (Ask Actor in the navbar, 2026-10-15); 239.1 (212.2 before openvibe-shared/shell's web-runtime.js)
jsBrotliKB: 77, // 76.1 with openvibe-shared 4.43.0 (room.css carries the kit tokens, 4.39.1; the kit's 4.39.0 rules); 74.2 openvibe-shared 4.25.0: the menu's orb beside the brand, both balances on phones, messages, the account sheet on phones and the bar stepping away on phones; 70.5 Shared 4.17.0: OpenCoins and Vibes chips (wallet: true) in the navbar; 67.9 openvibe-shared 4.15 footer: the compact footer opens into the whole one, and the pulse line; 65.3 Shared 4.12.0: the light/dark switch, the seasonal mark and the theme pairs; 61.7 with shared 4.11.0's seasonal navbar; 59.1 with openvibe-shared 4.4.0 (every site in the launcher, 2026-10-17); 56.3 (49.9 before web-runtime.js)
cssFiles: 2, // 1
-- cssRawKB: 36.1, // 36 measured with openvibe-shared v4.39.0 (+1.5 KB raw of kit/room/showcase CSS; raised from 34 by the measured growth; sizes are rounded down to 1 decimal, so the limit must clear 36.0); 29.1 openvibe-shared 4.23.0: the showcase hero on a phone (near the bar, buttons side by side, numbers three across); 27.9 on 2026-10-26 (Shared 4.13's home kit: showcase.css 12.2 → 18.3 KB); 22 on 2026-10-22 (the home's post cards, week bars, desks, topics, questions and links); 17.7 (2026-10-15: blog.css carries the AI desks' few rules; the shared showcase.css grew to ~12 KB)
++ cssRawKB: 38, // 37.6 the home's phone limits, desk row and fold (2026-10-29); 36 measured with openvibe-shared v4.39.0 (+1.5 KB raw of kit/room/showcase CSS; raised from 34 by the measured growth; sizes are rounded down to 1 decimal, so the limit must clear 36.0); 29.1 openvibe-shared 4.23.0: the showcase hero on a phone (near the bar, buttons side by side, numbers three across); 27.9 on 2026-10-26 (Shared 4.13's home kit: showcase.css 12.2 → 18.3 KB); 22 on 2026-10-22 (the home's post cards, week bars, desks, topics, questions and links); 17.7 (2026-10-15: blog.css carries the AI desks' few rules; the shared showcase.css grew to ~12 KB)
cssBrotliKB: 9, // 7.3 openvibe-shared 4.26.1 (hero visual); 6.2 (2026-10-26, Shared 4.13's home kit); 5.1 (2026-10-22); 1.4
externalFiles: 1, // 0
};