From c0dac12111ccbd3fb9473a0c010bda4760d1c84b Mon Sep 17 00:00:00 2001
From: Ruben Verborgh <ruben@verborgh.org>
Date: Wed, 21 Jul 2021 19:39:23 +0200
Subject: [PATCH] feat: Render Markdown documents as HTML.

---
 .../converters/markdown.json                  | 19 +++++++++++++++++++
 .../representation-conversion/default.json    | 14 ++++----------
 templates/styles/main.css                     | 17 +++++++++++++----
 3 files changed, 36 insertions(+), 14 deletions(-)
 create mode 100644 config/util/representation-conversion/converters/markdown.json

diff --git a/config/util/representation-conversion/converters/markdown.json b/config/util/representation-conversion/converters/markdown.json
new file mode 100644
index 000000000..bedf37d32
--- /dev/null
+++ b/config/util/representation-conversion/converters/markdown.json
@@ -0,0 +1,19 @@
+{
+  "@context": "https://linkedsoftwaredependencies.org/bundles/npm/@solid/community-server/^1.0.0/components/context.jsonld",
+  "import": [
+    "files-scs:config/util/representation-conversion/converters/content-type-replacer.json",
+    "files-scs:config/util/representation-conversion/converters/quad-to-rdf.json",
+    "files-scs:config/util/representation-conversion/converters/rdf-to-quad.json"
+  ],
+  "@graph": [
+    {
+      "comment": "Renders Markdown snippets into the main page template.",
+      "@id": "urn:solid-server:default:MarkdownToHtmlConverter",
+      "@type": "MarkdownToHtmlConverter",
+      "templateEngine": {
+        "@type": "HandlebarsTemplateEngine",
+        "template": "$PACKAGE_ROOT/templates/main.html.hbs"
+      }
+    }
+  ]
+}
diff --git a/config/util/representation-conversion/default.json b/config/util/representation-conversion/default.json
index ea52c0c9e..6eea4bb95 100644
--- a/config/util/representation-conversion/default.json
+++ b/config/util/representation-conversion/default.json
@@ -3,7 +3,8 @@
   "import": [
     "files-scs:config/util/representation-conversion/converters/content-type-replacer.json",
     "files-scs:config/util/representation-conversion/converters/quad-to-rdf.json",
-    "files-scs:config/util/representation-conversion/converters/rdf-to-quad.json"
+    "files-scs:config/util/representation-conversion/converters/rdf-to-quad.json",
+    "files-scs:config/util/representation-conversion/converters/markdown.json"
   ],
   "@graph": [
     {
@@ -12,6 +13,7 @@
       "@type": "WaterfallHandler",
       "handlers": [
         { "@id": "urn:solid-server:default:DefaultUiConverter" },
+        { "@id": "urn:solid-server:default:MarkdownToHtmlConverter" },
         {
           "@type": "IfNeededConverter",
           "comment": "Only continue converting if the requester cannot accept the available content type"
@@ -36,15 +38,7 @@
               "extension": ".md.hbs",
               "contentType": "text/markdown"
             },
-            {
-              "comment": "Renders Markdown snippets into the main page template.",
-              "@type": "MarkdownToHtmlConverter",
-              "templateEngine": {
-                "@id": "urn:solid-server:default:MainTemplateEngine",
-                "@type": "HandlebarsTemplateEngine",
-                "template": "$PACKAGE_ROOT/templates/main.html.hbs"
-              }
-            }
+            { "@id": "urn:solid-server:default:MarkdownToHtmlConverter" }
           ]
         }
       ]
diff --git a/templates/styles/main.css b/templates/styles/main.css
index 5d4764e9c..1f74f62bf 100644
--- a/templates/styles/main.css
+++ b/templates/styles/main.css
@@ -15,9 +15,13 @@ html {
   --solid-purple: #7c4dff;
   --solid-blue: #18a9e6;
 
+  height: 100%;
+
   background-color: var(--solid-purple);
   background-image: linear-gradient(135deg, var(--solid-purple) 10%, var(--solid-blue) 90%);
-  height: 100%;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  overscroll-behavior: none;
 }
 
 body, input, button {
@@ -34,9 +38,6 @@ body {
   background: white;
   box-shadow: 5px 5px 2px rgba(0, 0, 0, .1);
   border-radius: 3px;
-
-  font: 12pt/1.3 Raleway, sans-serif;
-  font-weight: 300;
 }
 
 header {
@@ -86,6 +87,10 @@ a:hover {
   color: var(--solid-blue);
 }
 
+code {
+  font-size: 90%;
+}
+
 li {
   margin: .5em 0;
 }
@@ -96,6 +101,10 @@ ul > li::marker {
   color: var(--solid-purple);
 }
 
+pre {
+  overflow-x: scroll;
+}
+
 fieldset {
   border: none;
   margin: 0;