Skip to content

Commit 2f19dd9

Browse files
jxomjxom
committed
fix: mobile overflow, always-show dates, index OG image, disable PDF temporarily
- Fix horizontal overflow on mobile (overflow-x hidden, word-break, table wrappers) - Ensure all TIPs have a date (fallback to PR created_at or today for git failures) - Add OG image for index page (Tempo Improvement Proposals) - Disable PDF generation (puppeteer hangs on current CF Browser Rendering platform) - Replace View on GitHub with Proposed in PR for PR TIPs - Remove PDF download link while disabled Amp-Thread-ID: https://ampcode.com/threads/T-019d7462-88d4-74ed-a7ca-86834a3064c2
1 parent f87bb44 commit 2f19dd9

6 files changed

Lines changed: 99 additions & 30 deletions

File tree

‎src/lib/Og.tsx‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,47 @@
1-
/** OG image component — business card style. */
1+
/** OG image components — business card style. */
2+
3+
export function OgIndex() {
4+
return (
5+
<div
6+
style={{
7+
display: 'flex',
8+
flexDirection: 'column',
9+
justifyContent: 'center',
10+
alignItems: 'center',
11+
textAlign: 'center',
12+
width: '100%',
13+
height: '100%',
14+
background: '#fdfdfd',
15+
padding: '64px 72px',
16+
fontFamily: 'CMU Serif',
17+
}}
18+
>
19+
<div
20+
style={{
21+
fontSize: '56px',
22+
fontWeight: 700,
23+
color: '#111',
24+
lineHeight: 1.2,
25+
}}
26+
>
27+
Tempo Improvement Proposals
28+
</div>
29+
30+
<div
31+
style={{
32+
display: 'flex',
33+
marginTop: '32px',
34+
fontSize: '24px',
35+
color: '#555',
36+
lineHeight: 1.5,
37+
maxWidth: '800px',
38+
}}
39+
>
40+
Specifications defining protocol changes and enhancements to the Tempo blockchain.
41+
</div>
42+
</div>
43+
)
44+
}
245

346
export function OgCard({
447
number,

‎src/lib/Sync.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ async function firstCommitDate(path: string, token?: string): Promise<string> {
1717
`https://api.github.com/repos/tempoxyz/tempo/commits?path=${encodeURIComponent(path)}&per_page=1&page=1`,
1818
{ headers: ghHeaders(token) },
1919
)
20-
if (!res.ok) return ''
20+
if (!res.ok) return new Date().toISOString().slice(0, 10)
2121
// GitHub returns newest first by default; get the Link header for last page
2222
const link = res.headers.get('link')
2323
if (link) {
@@ -34,7 +34,7 @@ async function firstCommitDate(path: string, token?: string): Promise<string> {
3434
const commits = (await res.json()) as Array<{ commit: { committer: { date: string } } }>
3535
if (commits.length > 0) return commits[commits.length - 1].commit.committer.date.slice(0, 10)
3636
} catch {}
37-
return ''
37+
return new Date().toISOString().slice(0, 10)
3838
}
3939

4040
async function raw(ref: string, path: string, token?: string): Promise<string> {
@@ -88,6 +88,7 @@ async function fetchPrTips(token?: string): Promise<TipRow[]> {
8888
title: string
8989
body: string | null
9090
html_url: string
91+
created_at: string
9192
head: { ref: string }
9293
}> = []
9394
let page = 1
@@ -137,7 +138,7 @@ async function fetchPrTips(token?: string): Promise<TipRow[]> {
137138
url: pr.html_url,
138139
branch: pr.head.ref,
139140
}),
140-
'',
141+
pr.created_at?.slice(0, 10) || new Date().toISOString().slice(0, 10),
141142
),
142143
)
143144
}

‎src/routes/$tipId.tsx‎

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -97,29 +97,23 @@ function TipPage() {
9797
Protocol Version: <strong>{tip.protocolVersion}</strong>
9898
</p>
9999
)}
100-
{tip.pr && (
101-
<p style={{ fontSize: '0.85em' }}>
102-
Proposed in{' '}
103-
<a href={tip.pr.url} target="_blank" rel="noopener noreferrer">
104-
PR #{tip.pr.number}
105-
</a>
106-
</p>
107-
)}
108100
<p style={{ fontSize: '0.85em' }}>
109-
<a href={`/${tip.number}.pdf`} style={{ marginRight: '1em' }}>
110-
Download PDF
111-
</a>
112-
<a
113-
href={
114-
tip.pr
115-
? `${tip.pr.url}/files`
116-
: `https://github.com/tempoxyz/tempo/blob/main/tips/tip-${tip.number}.md`
117-
}
118-
target="_blank"
119-
rel="noopener noreferrer"
120-
>
121-
View on GitHub
122-
</a>
101+
{tip.pr ? (
102+
<>
103+
Proposed in{' '}
104+
<a href={tip.pr.url} target="_blank" rel="noopener noreferrer">
105+
PR #{tip.pr.number}
106+
</a>
107+
</>
108+
) : (
109+
<a
110+
href={`https://github.com/tempoxyz/tempo/blob/main/tips/tip-${tip.number}.md`}
111+
target="_blank"
112+
rel="noopener noreferrer"
113+
>
114+
View on GitHub
115+
</a>
116+
)}
123117
</p>
124118
</header>
125119

‎src/routes/index.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,11 @@ export const Route = createFileRoute('/')({
2525
'A collection of specifications defining protocol changes and enhancements to the Tempo blockchain.',
2626
},
2727
{ property: 'og:url', content: `${Config.baseUrl}/` },
28-
{ name: 'twitter:card', content: 'summary' },
28+
{ property: 'og:image', content: `${Config.baseUrl}/og/index.png` },
29+
{ property: 'og:image:width', content: '1200' },
30+
{ property: 'og:image:height', content: '630' },
31+
{ name: 'twitter:card', content: 'summary_large_image' },
32+
{ name: 'twitter:image', content: `${Config.baseUrl}/og/index.png` },
2933
{
3034
name: 'twitter:title',
3135
content: 'Tempo Improvement Proposals',
@@ -173,8 +177,9 @@ function SearchResults({ results, activeIndex }: { results: SearchTypes.Result[]
173177
<div
174178
style={{
175179
display: 'flex',
180+
flexWrap: 'wrap',
176181
alignItems: 'baseline',
177-
gap: '0.6em',
182+
gap: '0.4em 0.6em',
178183
marginBottom: '0.3em',
179184
}}
180185
>
@@ -189,7 +194,7 @@ function SearchResults({ results, activeIndex }: { results: SearchTypes.Result[]
189194
TIP-
190195
<TipNumber value={r.number} />
191196
</span>
192-
<span style={{ fontWeight: 700 }}>{r.title}</span>
197+
<span style={{ fontWeight: 700, minWidth: 0 }}>{r.title}</span>
193198
<span style={{ marginLeft: 'auto', flexShrink: 0 }}>
194199
<StatusBadge status={r.status} />
195200
</span>
@@ -293,6 +298,7 @@ function TipsIndex() {
293298
results && <SearchResults results={results} activeIndex={activeIndex} />
294299
)
295300
) : (
301+
<div style={{ overflowX: 'auto' }}>
296302
<table style={{ marginTop: '0.5em' }}>
297303
<caption className="sr-only">List of Tempo Improvement Proposals</caption>
298304
<thead>
@@ -330,6 +336,7 @@ function TipsIndex() {
330336
))}
331337
</tbody>
332338
</table>
339+
</div>
333340
)}
334341
</div>
335342
</main>

‎src/styles.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ html {
5858
font-size: var(--body-font-size);
5959
-webkit-font-smoothing: antialiased;
6060
-moz-osx-font-smoothing: grayscale;
61+
overflow-x: hidden;
6162
}
6263

6364
body {
@@ -66,6 +67,7 @@ body {
6667
line-height: var(--body-line-height);
6768
color: var(--color-text);
6869
background: var(--color-bg);
70+
overflow-x: hidden;
6971
}
7072

7173
/* ── Typography ── */
@@ -127,6 +129,7 @@ code {
127129
background: var(--color-code-bg);
128130
padding: 0.15em 0.35em;
129131
border-radius: 3px;
132+
word-break: break-all;
130133
}
131134

132135
pre {
@@ -146,6 +149,7 @@ pre code {
146149
padding: 0;
147150
border-radius: 0;
148151
font-size: inherit;
152+
word-break: normal;
149153
}
150154

151155
/* Shiki code blocks */
@@ -180,6 +184,12 @@ blockquote p:last-child {
180184
}
181185

182186
/* ── Tables (booktabs-style) ── */
187+
.tip-body table {
188+
display: block;
189+
overflow-x: auto;
190+
-webkit-overflow-scrolling: touch;
191+
}
192+
183193
table {
184194
width: 100%;
185195
border-collapse: collapse;
@@ -272,6 +282,8 @@ figcaption {
272282
max-width: var(--content-width);
273283
margin: 0 auto;
274284
padding: 3rem 1.5rem 5rem;
285+
overflow-wrap: break-word;
286+
word-wrap: break-word;
275287
}
276288

277289
/* ── TIP Frontmatter (\maketitle) ── */

‎src/worker.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { createStartHandler, defaultStreamHandler } from '@tanstack/react-start/
22
import { ImageResponse } from 'takumi-js/response'
33
import wasmModule, { initSync, Renderer } from 'takumi-js/wasm'
44
import * as Config from './lib/Config'
5-
import { OgCard } from './lib/Og'
5+
import { OgCard, OgIndex } from './lib/Og'
66
// @ts-expect-error bytes import
77
import cmunrmData from '../public/fonts/cmunrm-clean.ttf?bytes'
88
// @ts-expect-error bytes import
@@ -25,6 +25,18 @@ export default {
2525
async fetch(request: Request, env: Env) {
2626
const url = new URL(request.url)
2727

28+
// /og/index.png → index OG image
29+
if (url.pathname === '/og/index.png') {
30+
return new ImageResponse(<OgIndex />, {
31+
width: 1200,
32+
height: 630,
33+
renderer,
34+
headers: {
35+
'Cache-Control': 'public, max-age=3600, s-maxage=86400, stale-while-revalidate=604800',
36+
},
37+
})
38+
}
39+
2840
// /og/:number.png → dynamic OG image
2941
const ogMatch = url.pathname.match(/^\/og\/(.+)\.png$/)
3042
if (ogMatch) {

0 commit comments

Comments
 (0)