Skip to content

Commit b63c354

Browse files
asubowoasubowo
committed
Merge dev into v1: flight arc plane glyph refinements (v1.17.7)
2 parents b513a01 + 489e4c3 commit b63c354

3 files changed

Lines changed: 45 additions & 23 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "subspace-api",
3-
"version": "1.17.6",
3+
"version": "1.17.7",
44
"description": "API service for subtype.space",
55
"repository": {
66
"type": "git",

‎scripts/renderFlightPreview.ts‎

Lines changed: 42 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -38,32 +38,54 @@ const xSIZES: Record<string, [number, number]> = {
3838
quadrant: [520, 390],
3939
}
4040

41+
const FRAMEWORK_CSS = 'https://trmnl.com/css/latest/plugins.css'
42+
const FRAMEWORK_JS = 'https://trmnl.com/js/latest/plugins.js'
43+
4144
/**
42-
*
43-
* @param fragment The markup fragment from renderMarkup
44-
* @param variant The plugin display variant
45-
* @param w screen width (useful for TRMNL X or testing on other devices)
46-
* @param h screen height, see note above
45+
* Each variant is slotted into its own iframe so style overrides don't mash with each other
46+
* This method gets consumed by generateVariant()
47+
*
48+
* @param fragment The markup fragment from renderMarkup
49+
* @param variant The plugin display variant
50+
* @param w screen width (full device size, or mashup-slot size per variant)
51+
* @param h screen height, see note above
52+
* @param screenClass framework device class(es): `screen--og` or `screen--v2 screen--lg`
4753
*/
48-
function generateVariant(fragment: string, variant: string, w: number, h: number, screenClass = ''): string {
49-
const cls = `screen${screenClass ? ` ${screenClass}` : ''}`
50-
const label = `${variant}${screenClass ? ` (${screenClass})` : ''} — ${w}×${h}`
51-
return `<figure style="margin:0">
52-
<figcaption style="font:12px monospace;color:#555;margin-bottom:6px">${label}</figcaption>
53-
<div class="${cls}" style="width:${w}px;height:${h}px">
54+
function variantDoc(fragment: string, variant: string, w: number, h: number, screenClass: string): string {
55+
return `<!doctype html><html><head>
56+
<link rel="stylesheet" href="${FRAMEWORK_CSS}" />
57+
<script src="${FRAMEWORK_JS}"></script>
58+
<link rel="preconnect" href="https://fonts.googleapis.com">
59+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
60+
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
61+
<style>
62+
html, body { margin:0; }
63+
.screen { transform:none !important; margin:0 !important; box-sizing:border-box; border:1px solid #000; }
64+
</style>
65+
</head><body class="environment trmnl">
66+
<div class="screen ${screenClass}" style="width:${w}px;height:${h}px">
5467
<div class="view view--${variant}">${fragment}</div>
5568
</div>
56-
</figure>`
69+
</body></html>`
5770
}
5871

72+
/**
73+
* Wrap a variant document in a captioned, sized iframe for the gallery page.
74+
*/
75+
function generateVariant(fragment: string, variant: string, w: number, h: number, screenClass: string): string {
76+
console.log(`Generating variant ${variant} (${screenClass})`)
77+
const label = `${variant} (${screenClass}) — ${w}×${h}`
78+
const doc = variantDoc(fragment, variant, w, h, screenClass).replaceAll('"', '&quot;')
79+
return `<figure style="margin:0">
80+
<figcaption style="font:12px monospace;color:#555;margin-bottom:6px">${label}</figcaption>
81+
<iframe srcdoc="${doc}" width="${w}" height="${h}" style="border:0;display:block" scrolling="no"></iframe>
82+
</figure>`
83+
}
5984

6085
function generatePage(generatedVariant: string): string {
6186
return `<!doctype html><html><head><style>
6287
body { margin:24px; background:#e9e9ee; }
6388
.grid { display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start; }
64-
.screen { box-sizing:border-box; border:1px solid #000; overflow:hidden; display:flex; flex-direction:column; }
65-
.screen .view, .screen .layout, .screen .columns,
66-
.screen .column, .screen .markdown { display:flex; flex-direction:column; flex:1; }
6789
</style></head><body>
6890
<div class="grid">${generatedVariant}</div>
6991
</body></html>`
@@ -73,16 +95,18 @@ function generatePage(generatedVariant: string): string {
7395
const baseUrl = new URL(config.auth.mcpServerUrl).origin
7496

7597
const variants = ['full', 'half_horizontal', 'half_vertical', 'quadrant'] as MarkupVariant[]
98+
console.log('Generating OG TRMNL render')
7699
const generatedVariants = variants.map(v => {
77100
const [w, h] = SIZES[v]
78-
return generateVariant(renderMarkup(sampleFlight, v, 0, baseUrl), v, w, h)
101+
return generateVariant(renderMarkup(sampleFlight, v, 0, baseUrl), v, w, h, 'screen--og')
79102
}).join('')
80103

104+
105+
console.log('Generating TRMNL X render')
81106
const generatedXVariants = variants.map(v => {
82107
const [w, h] = xSIZES[v]
83-
return generateVariant(renderMarkup(sampleFlight, v, 0, baseUrl), v, w, h, 'screen--lg')
108+
return generateVariant(renderMarkup(sampleFlight, v, 0, baseUrl), v, w, h, 'screen--v2 screen--lg')
84109
}).join('')
85110

86111

87112
writeFileSync('flight-preview.html', generatePage(generatedVariants + generatedXVariants))
88-

‎src/integrations/aerodatabox/formatters.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ function buildArcSvg(progressPct: number | null): string {
224224
// Leave a symmetric gap on both sides of the plane so the glyph never overlaps the route lines.
225225
// |B'(t)| = 2|b-a| is the curve speed (px per unit t); ~one plane half-width is gapPx/speed in t.
226226
const speed = 2 * Math.hypot(mid.b.x - mid.a.x, mid.b.y - mid.a.y)
227-
const gapT = speed > 0 ? Math.min(32 / speed, 0.14) : 0.07
227+
const gapT = speed > 0 ? Math.min(42 / speed, 0.16) : 0.08
228228
const back = split(Math.max(t - gapT, 0)) // flown (solid) ends here, just behind the tail
229229
const fwd = split(Math.min(t + gapT, 1)) // remaining (dotted) starts here, just past the nose
230230

@@ -236,9 +236,7 @@ function buildArcSvg(progressPct: number | null): string {
236236
return `<svg class="arc-svg" viewBox="0 0 600 124" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
237237
${remainingPath ? `<path d="${remainingPath}" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-dasharray="1 11" />` : ''}
238238
${flownPath ? `<path d="${flownPath}" fill="none" stroke="black" stroke-width="5" stroke-linecap="round" />` : ''}
239-
<circle cx="${P0.x}" cy="${P0.y}" r="6" fill="black" />
240-
<circle cx="${P2.x}" cy="${P2.y}" r="6" fill="white" stroke="black" stroke-width="3" />
241-
<g transform="translate(${n(mid.c.x)},${n(mid.c.y)}) rotate(${n(angle)})"><text text-anchor="middle" dominant-baseline="central" font-size="48" fill="black">✈</text></g>
239+
<g transform="translate(${n(mid.c.x)},${n(mid.c.y)}) rotate(${n(angle)})"><text x="0" y="-3" text-anchor="middle" dominant-baseline="central" font-size="64" fill="black">✈</text></g>
242240
</svg>`
243241
}
244242

0 commit comments

Comments
 (0)