chore: remove 'In motion right now' strip — one signal, one place

The .rr-current marker on the current shipping milestone already says
'this is where we are' through colour + ring + dot scale. A second
surface saying the same thing in different words diluted both. One
signal, one place.

Removed:
- src/components/RoadmapInMotion.astro (component file)
- The import and render slot in /roadmap.astro
- The 'For shipping items: the first sentence appears on /roadmap as
  the "In motion right now" line' helper text on the admin description
  field (the field stays; only the helper copy goes).

The firstSentenceOf helper lived inside RoadmapInMotion only and was
never re-exported, so it dies with the file.

Banner margin-bottom restores from 40 → 56px now that nothing sits
between the dispatch banner and the route header. The route flows
directly out of the dispatch beat.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Hvid 2026-05-12 14:36:33 +02:00
parent 83503fe7a3
commit d85583b4a3
3 changed files with 6 additions and 77 deletions

View file

@ -1,69 +0,0 @@
---
import type { RoadmapItemWithAttribution } from '../lib/db';
interface Props {
items: RoadmapItemWithAttribution[];
}
const { items } = Astro.props;
/** First sentence of a description — naive but matches the user's needs.
* Returns '' for null/empty input. Falls back to a 200-char slice if no
* sentence-ending punctuation is found in a reasonable window. */
function firstSentenceOf(text: string | null): string {
if (!text) return '';
const trimmed = text.trim();
const match = trimmed.match(/^[^.!?]*[.!?](?=\s|$)/);
return match ? match[0] : trimmed.slice(0, 200);
}
// Most recent shipping item, in display_order (same selection rule as
// the .rr-current marker on the route).
let currentItem: RoadmapItemWithAttribution | null = null;
items.forEach((it) => { if (it.status === 'shipping') currentItem = it; });
const line = currentItem ? firstSentenceOf(currentItem.description) : '';
const visible = !!currentItem && line.length > 0;
---
{visible && (
<div class="rr-in-motion">
<span class="rr-in-motion-eyebrow">In motion right now</span>
<p class="rr-in-motion-line">{line}</p>
</div>
)}
<style>
.rr-in-motion {
display: flex;
align-items: baseline;
gap: 18px;
margin-bottom: 36px;
padding: 0 4px;
}
.rr-in-motion-eyebrow {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--on-surface-muted);
flex-shrink: 0;
}
.rr-in-motion-line {
font-family: var(--font-serif);
font-style: italic;
font-size: 18px;
line-height: 1.4;
color: var(--on-surface);
margin: 0;
max-width: 720px;
}
@media (max-width: 767px) {
.rr-in-motion {
flex-direction: column;
gap: 6px;
margin-bottom: 28px;
}
.rr-in-motion-line { font-size: 16px; }
}
</style>

View file

@ -64,7 +64,6 @@ const grouped: Record<Status, RoadmapItemWithAttribution[]> = {
<div class="field">
<label for="description" class="label-sm field-label">Description</label>
<textarea id="description" name="description" class="input body-md" rows="3">{editing?.description ?? ''}</textarea>
<span class="body-sm muted">For shipping items: the first sentence appears on /roadmap as the "In motion right now" line. Make it count.</span>
</div>
<div class="field">

View file

@ -1,7 +1,6 @@
---
import AppLayout from '../layouts/AppLayout.astro';
import LatestDispatchBanner from '../components/LatestDispatchBanner.astro';
import RoadmapInMotion from '../components/RoadmapInMotion.astro';
import RoadmapRoute from '../components/RoadmapRoute.astro';
import { getAllRoadmapItems } from '../lib/db';
@ -26,8 +25,6 @@ const items = getAllRoadmapItems()
<LatestDispatchBanner />
<RoadmapInMotion items={items} />
<RoadmapRoute items={items} />
</div>
</AppLayout>
@ -66,14 +63,16 @@ const items = getAllRoadmapItems()
max-width: 540px;
}
/* In-motion strip lives between banner and route; banner margin
tightens to 40px because the strip carries its own 36px below. */
.page :global(.banner) { margin-bottom: 40px; }
/* Banner sits directly above the route now — restore the original
56px gap so the editorial banner reads as its own beat. */
.page :global(.banner),
.page :global(.rr-dispatch) { margin-bottom: 56px; }
@media (max-width: 767px) {
.page { padding: 32px 24px 64px; }
.page-title { font-size: 36px; }
.page-header { margin-bottom: 28px; }
.page :global(.banner) { margin-bottom: 28px; }
.page :global(.banner),
.page :global(.rr-dispatch) { margin-bottom: 40px; }
}
</style>