feat: markdown support in tutorials

package.json

@@ -18,6 +18,7 @@
     "@thi.ng/matrices": "^0.6.18",
     "@thi.ng/transducers": "^7.0.0",
     "@thi.ng/vectors": "^4.4.3",
+    "marked": "^1.1.1",
     "micromodal": "^0.4.6",
     "microtip": "^0.2.2",
     "normalize.css": "^8.0.1",

public/styles/pages/tutorial.scss

@@ -73,3 +73,20 @@
 .tutorial__result-type {
   margin-left: 2rem;
 }
+
+// Those are overrides for the html generated by marked
+.tutorial__slide img {
+  width: 100%;
+}
+
+.tutorial__slide a {
+  color: darken($bright, 20);
+}
+
+.tutorial__slide code {
+  width: 100%;
+  display: block;
+
+  background: $primary-dark;
+  padding: 0.5rem;
+}

spago.dhall

@@ -23,6 +23,7 @@
   , "halogen-hooks"
   , "halogen-select"
   , "halogen-vdom"
+  , "html-parser-halogen"
   , "lists"
   , "math"
   , "maybe"

src/Component/Tutorial.purs

@@ -21,6 +21,7 @@ import Effect.Class (class MonadEffect, liftEffect)
 import Halogen (Component, HalogenM, Slot, defaultEval, fork, get, gets, mkComponent, mkEval, modify_, query, request, tell)
 import Halogen.HTML as HH
 import Halogen.HTML.Events (onClick)
+import Html.Renderer.Halogen as RH
 import Lunarbox.Capability.Navigate (class Navigate, navigate)
 import Lunarbox.Capability.Resource.Gist (class ManageGists, fetchGist)
 import Lunarbox.Capability.Resource.Project (class ManageProjects, createProject, getProject)
@@ -46,6 +47,7 @@ import Lunarbox.Data.Route (Route(..))
 import Lunarbox.Data.Tutorial (TutorialId, TutorialWithMetadata)
 import Lunarbox.Data.TutorialConfig (TutorialSteps, getTutorialSteps)
 import Lunarbox.Data.ValidateSolution (SolutionError(..), validateSolution)
+import Lunarbox.Foreign.Marked (parseMarkdown)
 import Network.RemoteData (RemoteData(..), fromEither)
 import Random.LCG (randomSeed)
 import Record as Record
@@ -402,7 +404,7 @@ component =
                       else
                         "tutorial__slide"
                   ]
-                  [ HH.text content ]
+                  [ HH.lazy (\_ -> RH.render_ $ parseMarkdown content) false ]
           , id: "slide-modal-" <> show slideIndex
           , onClose: Skip
           , title: maybe "Cannot find title" _.title slide

src/Foreign/Marked.js

@@ -0,0 +1,13 @@
+"use strict"
+
+const marked = require("marked")
+
+/**
+ * Parse a string of markdown to html
+ *
+ * @param {String} input The string to parse.
+ */
+exports.parseMarkdown = (input) =>
+  marked(input, {
+    sanitize: true
+  })

src/Foreign/Marked.purs

@@ -0,0 +1,3 @@
+module Lunarbox.Foreign.Marked where
+
+foreign import parseMarkdown :: String -> String

yarn.lock

@@ -6356,6 +6356,11 @@ marked@^1.0.0:
   resolved "https://registry.yarnpkg.com/marked/-/marked-1.1.0.tgz#62504ad4d11550c942935ccc5e39d64e5a4c4e50"
   integrity sha512-EkE7RW6KcXfMHy2PA7Jg0YJE1l8UPEZE8k45tylzmZM30/r1M1MUXWQfJlrSbsTeh7m/XTwHbWUENvAJZpp1YA==
 
+marked@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-1.1.1.tgz#e5d61b69842210d5df57b05856e0c91572703e6a"
+  integrity sha512-mJzT8D2yPxoPh7h0UXkB+dBj4FykPJ2OIfxAWeIHrvoHDkFxukV/29QxoFQoPM6RLEwhIFdJpmKBlqVM3s2ZIw==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"