Ilia Denisov
40acbcccdd
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Successful in 12s
CI / integration (pull_request) Successful in 20s
CI / ui (pull_request) Successful in 1m10s
CI / conformance (pull_request) Successful in 9s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m47s
- packs sorted by ascending rouble price; - values grouped hints-only -> no-ads-only -> no-ads+hints -> tournament (the tournament group is empty until such products become sellable), ascending chip price within each group; - price columns right-aligned (GFM "---:" separators); - tables span the full content width; the name column shrinks to its content and never wraps; - muted-but-visible cell borders on the dark theme, where the section rule colour blends into the background.
119 lines
3.6 KiB
TypeScript
119 lines
3.6 KiB
TypeScript
import { marked } from 'marked';
|
|
|
|
/**
|
|
* renderOfferHtml renders the public-offer markdown source into a standalone,
|
|
* self-contained HTML document served at `/offer/`. It runs server-side in the
|
|
* render sidecar (`renderer/src/offer.mjs`), which reads the owner-edited
|
|
* `ui/legal/offer_ru.md`, splices the live catalog price list into it and calls
|
|
* this function — one renderer shared with the browser build, kept unit-tested
|
|
* here (`offer.test.ts`).
|
|
*
|
|
* The input `markdown` is trusted repository content plus the backend's own
|
|
* catalog projection, not user input, so the rendered HTML is deliberately not
|
|
* sanitised. The page carries its own minimal light/dark styling so it needs
|
|
* neither the app bundle nor `app.css`.
|
|
*/
|
|
export function renderOfferHtml(markdown: string): string {
|
|
const body = marked.parse(markdown, { async: false }) as string;
|
|
return `<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Публичная оферта — Эрудит</title>
|
|
<link rel="canonical" href="https://erudit-game.ru/offer/" />
|
|
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#f3f4f6" />
|
|
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0f1115" />
|
|
<style>
|
|
:root {
|
|
color-scheme: light dark;
|
|
--bg: #ffffff;
|
|
--text: #1a1c20;
|
|
--accent: #2563eb;
|
|
--rule: #e5e7eb;
|
|
--cell-border: #d1d5db;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #0f1115;
|
|
--text: #e7e9ee;
|
|
--accent: #6ea8fe;
|
|
--rule: #242832;
|
|
/* A muted grey — the section rules (--rule) vanish on the dark background, so table cells
|
|
get a slightly firmer border to stay legible without being loud. */
|
|
--cell-border: #3a4250;
|
|
}
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font: 16px/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
main {
|
|
max-width: 760px;
|
|
margin: 0 auto;
|
|
padding: 24px 20px 64px;
|
|
}
|
|
a {
|
|
color: var(--accent);
|
|
}
|
|
h1 {
|
|
font-size: 1.6rem;
|
|
text-align: center;
|
|
}
|
|
h2 {
|
|
font-size: 1.2rem;
|
|
margin-top: 2em;
|
|
padding-top: 1em;
|
|
border-top: 1px solid var(--rule);
|
|
}
|
|
h3 {
|
|
font-size: 1.05rem;
|
|
margin-top: 1.5em;
|
|
}
|
|
ul {
|
|
padding-left: 1.25em;
|
|
}
|
|
li {
|
|
margin: 0.25em 0;
|
|
}
|
|
/* The price tables (§4.4) span the full content width. */
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 0.75em 0 1.25em;
|
|
font-size: 0.95rem;
|
|
}
|
|
th,
|
|
td {
|
|
border: 1px solid var(--cell-border);
|
|
padding: 6px 10px;
|
|
}
|
|
/* The product-name column shrinks to its content and never wraps; the price columns share the
|
|
rest of the width (width:1% is the shrink-to-fit idiom paired with the table's width:100%). */
|
|
th:first-child,
|
|
td:first-child {
|
|
width: 1%;
|
|
white-space: nowrap;
|
|
}
|
|
/* Right-aligned price columns. marked emits the alignment from the "---:" separator; this rule
|
|
keeps it applied whether that surfaces as an align attribute or an inline style. */
|
|
th[align='right'],
|
|
td[align='right'] {
|
|
text-align: right;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
${body}
|
|
</main>
|
|
</body>
|
|
</html>
|
|
`;
|
|
}
|