Render README markdown in the browser

cgit had no markdown support of its own, so a readme was rendered
through an external python filter or not at all. Escaping the source
and formatting it in cgit.js keeps the work in the browser like the
blob highlighter, and the page stays readable as plain text without
scripting.

1 file changed, 90 insertions, 0 deletions

diff --git a/assets/cgit.css b/assets/cgit.css
index 96192e4..10fcf66 100644
--- a/assets/cgit.css
+++ b/assets/cgit.css
@@ -496,6 +496,96 @@ div#cgit div#summary pre {
 	overflow-x: auto;
 }
 
+div#cgit .markdown {
+	line-height: 1.6;
+	overflow-wrap: break-word;
+}
+
+div#cgit .markdown > :first-child {
+	margin-top: 0;
+}
+
+div#cgit .markdown > :last-child {
+	margin-bottom: 0;
+}
+
+div#cgit .markdown h1,
+div#cgit .markdown h2,
+div#cgit .markdown h3,
+div#cgit .markdown h4,
+div#cgit .markdown h5,
+div#cgit .markdown h6 {
+	margin: 1.2em 0 0.5em;
+	font-weight: bold;
+	line-height: 1.25;
+}
+
+div#cgit .markdown h1 { font-size: 1.6em; }
+div#cgit .markdown h2 {
+	font-size: 1.35em;
+	border-bottom: 1px solid var(--border);
+	padding-bottom: 0.2em;
+}
+div#cgit .markdown h3 { font-size: 1.15em; }
+div#cgit .markdown h4 { font-size: 1em; }
+div#cgit .markdown h5,
+div#cgit .markdown h6 { font-size: 0.9em; color: var(--muted); }
+
+div#cgit .markdown p { margin: 0.7em 0; }
+div#cgit .markdown a { color: var(--link); }
+
+div#cgit .markdown ul,
+div#cgit .markdown ol { margin: 0.7em 0; padding-left: 2em; }
+div#cgit .markdown li { margin: 0.2em 0; }
+
+div#cgit .markdown blockquote {
+	margin: 0.7em 0;
+	padding: 0.1em 1em;
+	color: var(--muted);
+	border-left: 3px solid var(--border-mid);
+}
+
+div#cgit .markdown hr {
+	border: none;
+	border-top: 1px solid var(--border);
+	margin: 1.2em 0;
+}
+
+div#cgit .markdown code {
+	background: var(--surface-2);
+	border: 1px solid var(--border);
+	border-radius: 3px;
+	padding: 0.1em 0.35em;
+	font-size: 0.95em;
+}
+
+div#cgit .markdown pre {
+	background: var(--surface-2);
+	border: 1px solid var(--border);
+	border-radius: 4px;
+	padding: 0.7em 0.9em;
+	overflow-x: auto;
+}
+
+div#cgit .markdown pre code {
+	background: none;
+	border: none;
+	padding: 0;
+}
+
+div#cgit .markdown table {
+	border-collapse: collapse;
+	margin: 0.7em 0;
+}
+
+div#cgit .markdown th,
+div#cgit .markdown td {
+	border: 1px solid var(--border);
+	padding: 0.35em 0.7em;
+}
+
+div#cgit .markdown th { background: var(--surface-2); }
+
 div#cgit table#downloads {
 	float: right;
 	border-collapse: collapse;