Skip to content

Commit 5048a43

Browse files
mustard-mhmustard-mh
committed
💄 Changelog css support
1 parent e3ad31e commit 5048a43

File tree

1 file changed

+156
-3
lines changed

1 file changed

+156
-3
lines changed

‎src/releaseNote.ts

Lines changed: 156 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ class ReleaseNotePanel {
8787

8888
return [
8989
`# ${info.title}`,
90-
'> See also https://gitpod.io/changelog',
90+
`> Published at ${date}, see also https://gitpod.io/changelog`,
9191
`![${info.alt ?? 'image'}](https://www.gitpod.io/images/changelog/${info.image})`,
9292
content,
9393
].join('\n\n');
@@ -99,7 +99,20 @@ class ReleaseNotePanel {
9999
}
100100
const mdContent = await this.loadChangelog(date);
101101
const html = await vscode.commands.executeCommand('markdown.api.render', mdContent) as string;
102-
this.panel.webview.html = html;
102+
this.panel.webview.html = `<!DOCTYPE html>
103+
<html lang="en">
104+
<head>
105+
<meta charset="UTF-8">
106+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
107+
<title>Gitpod Release Note</title>
108+
<style>
109+
${DEFAULT_MARKDOWN_STYLES}
110+
</style>
111+
</head>
112+
<body>
113+
${html}
114+
</body>
115+
</html>`;
103116
if (!this.lastRead || date > this.lastRead) {
104117
await this.context.globalState.update(LAST_READ_RELEASE_DATE, date);
105118
this.lastRead = date;
@@ -161,4 +174,144 @@ class ReleaseNotePanel {
161174
}
162175
}
163176
}
164-
}
177+
}
178+
179+
// Align with https://github.com/gitpod-io/openvscode-server/blob/494f7eba3615344ee634e6bec0b20a1903e5881d/src/vs/workbench/contrib/markdown/browser/markdownDocumentRenderer.ts#L14
180+
export const DEFAULT_MARKDOWN_STYLES = `
181+
body {
182+
padding: 10px 20px;
183+
line-height: 22px;
184+
max-width: 882px;
185+
margin: 0 auto;
186+
}
187+
188+
body *:last-child {
189+
margin-bottom: 0;
190+
}
191+
192+
img {
193+
max-width: 100%;
194+
max-height: 100%;
195+
}
196+
197+
a {
198+
text-decoration: none;
199+
}
200+
201+
a:hover {
202+
text-decoration: underline;
203+
}
204+
205+
a:focus,
206+
input:focus,
207+
select:focus,
208+
textarea:focus {
209+
outline: 1px solid -webkit-focus-ring-color;
210+
outline-offset: -1px;
211+
}
212+
213+
hr {
214+
border: 0;
215+
height: 2px;
216+
border-bottom: 2px solid;
217+
}
218+
219+
h1 {
220+
padding-bottom: 0.3em;
221+
line-height: 1.2;
222+
border-bottom-width: 1px;
223+
border-bottom-style: solid;
224+
}
225+
226+
h1, h2, h3 {
227+
font-weight: normal;
228+
}
229+
230+
table {
231+
border-collapse: collapse;
232+
}
233+
234+
table > thead > tr > th {
235+
text-align: left;
236+
border-bottom: 1px solid;
237+
}
238+
239+
table > thead > tr > th,
240+
table > thead > tr > td,
241+
table > tbody > tr > th,
242+
table > tbody > tr > td {
243+
padding: 5px 10px;
244+
}
245+
246+
table > tbody > tr + tr > td {
247+
border-top-width: 1px;
248+
border-top-style: solid;
249+
}
250+
251+
blockquote {
252+
margin: 0 7px 0 5px;
253+
padding: 0 16px 0 10px;
254+
border-left-width: 5px;
255+
border-left-style: solid;
256+
}
257+
258+
code {
259+
font-family: "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
260+
}
261+
262+
pre code {
263+
font-family: var(--vscode-editor-font-family);
264+
font-weight: var(--vscode-editor-font-weight);
265+
font-size: var(--vscode-editor-font-size);
266+
line-height: 1.5;
267+
}
268+
269+
code > div {
270+
padding: 16px;
271+
border-radius: 3px;
272+
overflow: auto;
273+
}
274+
275+
.monaco-tokenized-source {
276+
white-space: pre;
277+
}
278+
279+
/** Theming */
280+
281+
.vscode-light code > div {
282+
background-color: rgba(220, 220, 220, 0.4);
283+
}
284+
285+
.vscode-dark code > div {
286+
background-color: rgba(10, 10, 10, 0.4);
287+
}
288+
289+
.vscode-high-contrast code > div {
290+
background-color: var(--vscode-textCodeBlock-background);
291+
}
292+
293+
.vscode-high-contrast h1 {
294+
border-color: rgb(0, 0, 0);
295+
}
296+
297+
.vscode-light table > thead > tr > th {
298+
border-color: rgba(0, 0, 0, 0.69);
299+
}
300+
301+
.vscode-dark table > thead > tr > th {
302+
border-color: rgba(255, 255, 255, 0.69);
303+
}
304+
305+
.vscode-light h1,
306+
.vscode-light hr,
307+
.vscode-light table > tbody > tr + tr > td {
308+
border-color: rgba(0, 0, 0, 0.18);
309+
}
310+
311+
.vscode-dark h1,
312+
.vscode-dark hr,
313+
.vscode-dark table > tbody > tr + tr > td {
314+
border-color: rgba(255, 255, 255, 0.18);
315+
}
316+
317+
`;

0 commit comments

Comments
 (0)