Skip to content

Commit 90f4288

Browse files
dockfriesdockfries
committed
Intl.DateTimeFormat BrowserOnly
1 parent 8347f02 commit 90f4288

1 file changed

Lines changed: 109 additions & 35 deletions

File tree

‎frontend/src/lib/downloads/common.tsx‎

Lines changed: 109 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import React, { useState } from "react";
77
import Admonition from "../../components/Admonition";
88
import { INITIAL_VISIBLE_RELEASES } from "./constants";
99
import styles from "../../pages/downloads.module.css";
10+
import BrowserOnly from "@docusaurus/BrowserOnly";
1011

1112
export interface Release {
1213
tag: string;
@@ -77,7 +78,7 @@ function renderMarkdown(md: string): React.ReactNode {
7778
parts.push(
7879
<a key={`i${match.index}`} href={match[7]}>
7980
{match[6]}
80-
</a>
81+
</a>,
8182
);
8283
}
8384
lastIndex = regex.lastIndex;
@@ -95,7 +96,7 @@ function renderMarkdown(md: string): React.ReactNode {
9596
if (headerMatch) {
9697
flushList();
9798
const level = headerMatch[1].length;
98-
const Tag = (`h${level}` as "h1" | "h2" | "h3");
99+
const Tag = `h${level}` as "h1" | "h2" | "h3";
99100
elements.push(<Tag key={key++}>{inlineFormat(headerMatch[2])}</Tag>);
100101
continue;
101102
}
@@ -123,15 +124,24 @@ interface ReleaseListPageProps {
123124
config: ProductConfig;
124125
}
125126

126-
export function ReleaseListPage({ config }: ReleaseListPageProps): React.ReactElement {
127+
export function ReleaseListPage({
128+
config,
129+
}: ReleaseListPageProps): React.ReactElement {
127130
const [showAll, setShowAll] = useState(false);
128131

129132
const releases = config.releases;
130-
const visibleReleases = showAll ? releases : releases.slice(0, INITIAL_VISIBLE_RELEASES);
133+
const visibleReleases = showAll
134+
? releases
135+
: releases.slice(0, INITIAL_VISIBLE_RELEASES);
131136
const hasMore = releases.length > INITIAL_VISIBLE_RELEASES;
132137

133138
return (
134-
<Layout title={typeof config.pageTitle === "string" ? config.pageTitle : "Downloads"} description="Download open.mp releases">
139+
<Layout
140+
title={
141+
typeof config.pageTitle === "string" ? config.pageTitle : "Downloads"
142+
}
143+
description="Download open.mp releases"
144+
>
135145
<main className={styles.pageContainer}>
136146
<Heading as="h1" className={styles.pageTitle}>
137147
{config.pageTitle}
@@ -140,7 +150,10 @@ export function ReleaseListPage({ config }: ReleaseListPageProps): React.ReactEl
140150

141151
{config.announcement && (
142152
<div className={styles.topAdmonition}>
143-
<Admonition type={config.announcement.type} title={config.announcement.title}>
153+
<Admonition
154+
type={config.announcement.type}
155+
title={config.announcement.title}
156+
>
144157
{config.announcement.body}
145158
</Admonition>
146159
</div>
@@ -149,31 +162,44 @@ export function ReleaseListPage({ config }: ReleaseListPageProps): React.ReactEl
149162
{visibleReleases.map((release, index) => {
150163
const assets = release.assets;
151164
return (
152-
<div key={release.tag + release.publishedAt} className={styles.productSection}>
165+
<div
166+
key={release.tag + release.publishedAt}
167+
className={styles.productSection}
168+
>
153169
<Heading as="h2" className={styles.productTitle}>
154170
{release.tag}
155171
{index === 0 && (
156172
<span className={styles.newBadge}>
157-
<Translate id="downloads.latestBadge" description="Badge for latest release">
173+
<Translate
174+
id="downloads.latestBadge"
175+
description="Badge for latest release"
176+
>
158177
LATEST
159178
</Translate>
160179
</span>
161180
)}
162181
</Heading>
163182

164-
<p className={styles.versionInfo}>
165-
<Translate
166-
id="downloads.releaseDate"
167-
description="Release date label"
168-
values={{ date: formatDate(release.publishedAt) }}
169-
>
170-
{"Released {date}"}
171-
</Translate>
172-
</p>
183+
<BrowserOnly>
184+
{() => (
185+
<p className={styles.versionInfo}>
186+
<Translate
187+
id="downloads.releaseDate"
188+
description="Release date label"
189+
values={{ date: formatDate(release.publishedAt) }}
190+
>
191+
{"Released {date}"}
192+
</Translate>
193+
</p>
194+
)}
195+
</BrowserOnly>
173196

174197
{release.admonition && (
175198
<div className={styles.releaseAdmonition}>
176-
<Admonition type={release.admonition.type} title={release.admonition.title}>
199+
<Admonition
200+
type={release.admonition.type}
201+
title={release.admonition.title}
202+
>
177203
{release.admonition.body}
178204
</Admonition>
179205
</div>
@@ -182,7 +208,10 @@ export function ReleaseListPage({ config }: ReleaseListPageProps): React.ReactEl
182208
{release.highlights && release.highlights.length > 0 && (
183209
<div className={styles.keyFeatures}>
184210
<h3 className={styles.keyFeaturesTitle}>
185-
<Translate id="downloads.release.highlights" description="Release highlights heading">
211+
<Translate
212+
id="downloads.release.highlights"
213+
description="Release highlights heading"
214+
>
186215
Highlights
187216
</Translate>
188217
</h3>
@@ -197,12 +226,17 @@ export function ReleaseListPage({ config }: ReleaseListPageProps): React.ReactEl
197226
{release.body && (
198227
<details className={styles.changelogDetails}>
199228
<summary className={styles.changelogSummary}>
200-
<Translate id="downloads.release.viewChangelog" description="Expandable changelog summary">
229+
<Translate
230+
id="downloads.release.viewChangelog"
231+
description="Expandable changelog summary"
232+
>
201233
View full changelog
202234
</Translate>
203235
</summary>
204236
<div className={styles.changelogContent}>
205-
{typeof release.body === "string" ? renderMarkdown(release.body) : React.createElement(release.body)}
237+
{typeof release.body === "string"
238+
? renderMarkdown(release.body)
239+
: React.createElement(release.body)}
206240
</div>
207241
</details>
208242
)}
@@ -216,25 +250,48 @@ export function ReleaseListPage({ config }: ReleaseListPageProps): React.ReactEl
216250
to={asset.url}
217251
>
218252
<div className={styles.downloadLabel}>
219-
<span>{asset.label}{/dynssl/i.test(asset.label) && " *"}</span>
220-
<span className={styles.buttonSize}>({asset.size})</span>
253+
<span>
254+
{asset.label}
255+
{/dynssl/i.test(asset.label) && " *"}
256+
</span>
257+
<span className={styles.buttonSize}>
258+
({asset.size})
259+
</span>
221260
</div>
222261
</Link>
223262
))
224263
) : (
225-
<Link className={`button button--primary button--lg ${styles.downloadButton}`} to={release.htmlUrl}>
226-
<Translate id="downloads.release.viewOnGitHub" description="Fallback button per release">
264+
<Link
265+
className={`button button--primary button--lg ${styles.downloadButton}`}
266+
to={release.htmlUrl}
267+
>
268+
<Translate
269+
id="downloads.release.viewOnGitHub"
270+
description="Fallback button per release"
271+
>
227272
View release on GitHub
228273
</Translate>
229274
</Link>
230275
)}
231276

232-
<Link className={styles.githubLink} to={release.htmlUrl} title="View release on GitHub">
233-
<svg viewBox="0 0 16 16" width="20" height="20" fill="currentColor">
277+
<Link
278+
className={styles.githubLink}
279+
to={release.htmlUrl}
280+
title="View release on GitHub"
281+
>
282+
<svg
283+
viewBox="0 0 16 16"
284+
width="20"
285+
height="20"
286+
fill="currentColor"
287+
>
234288
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
235289
</svg>
236290
<span>
237-
<Translate id="downloads.release.github" description="Link to release page on GitHub">
291+
<Translate
292+
id="downloads.release.github"
293+
description="Link to release page on GitHub"
294+
>
238295
GitHub
239296
</Translate>
240297
</span>
@@ -243,8 +300,12 @@ export function ReleaseListPage({ config }: ReleaseListPageProps): React.ReactEl
243300

244301
{assets.some((a) => /dynssl/i.test(a.label)) && (
245302
<p className={styles.dynSslNote}>
246-
<Translate id="downloads.release.dynSslNote" description="Note about DynSSL version requiring libssl">
247-
* The DynSSL version requires libssl to be installed on your Linux distribution.
303+
<Translate
304+
id="downloads.release.dynSslNote"
305+
description="Note about DynSSL version requiring libssl"
306+
>
307+
* The DynSSL version requires libssl to be installed on your
308+
Linux distribution.
248309
</Translate>
249310
</p>
250311
)}
@@ -260,7 +321,10 @@ export function ReleaseListPage({ config }: ReleaseListPageProps): React.ReactEl
260321
type="button"
261322
>
262323
{showAll ? (
263-
<Translate id="downloads.hideOlderReleases" description="Button to hide older releases">
324+
<Translate
325+
id="downloads.hideOlderReleases"
326+
description="Button to hide older releases"
327+
>
264328
Hide older releases
265329
</Translate>
266330
) : (
@@ -279,13 +343,23 @@ export function ReleaseListPage({ config }: ReleaseListPageProps): React.ReactEl
279343
<div className={styles.footerTrust}>
280344
<div className={styles.trustSection}>
281345
<p className={styles.trustText}>
282-
<Translate id="downloads.opensourceTrust" description="Open source trust message for downloads pages">
283-
Every release is open source. Build from source, or download directly from GitHub.
346+
<Translate
347+
id="downloads.opensourceTrust"
348+
description="Open source trust message for downloads pages"
349+
>
350+
Every release is open source. Build from source, or download
351+
directly from GitHub.
284352
</Translate>
285353
</p>
286354
<div className={styles.trustActions}>
287-
<Link className={`button button--secondary button--lg ${styles.downloadButton}`} to={config.releasesUrl}>
288-
<Translate id="downloads.downloadFromGithub" description="Button label to open GitHub releases page">
355+
<Link
356+
className={`button button--secondary button--lg ${styles.downloadButton}`}
357+
to={config.releasesUrl}
358+
>
359+
<Translate
360+
id="downloads.downloadFromGithub"
361+
description="Button label to open GitHub releases page"
362+
>
289363
Download from GitHub
290364
</Translate>
291365
</Link>

0 commit comments

Comments
 (0)