Add Railroad Syntax to Hakyll

Posted on October 2, 2012

Tags: hacksoft

Hakyll Setup Series

1 Setup

add the script to your templates/default.html

 <!-- RAILROAD START -------------------------------------- -->
        <script type="module">
            import rr,* as rrClass from "/lib/railroad/railroad.js";
            Object.assign(window,rr)
            window.rrOptions = rrClass.Options;
            document.addEventListener('DOMContentLoaded',()=>{ReplaceDivWithSvg()},false)
            const ReplaceDivWithSvg = () =>  {
                for (const railroadelem of document.getElementsByClassName("rroad") ){
                railroadelem.innerHTML = eval(railroadelem.innerText.trim()+".toString()")
                }
            }
        </script>
        

        <link rel="stylesheet" href="/lib/railroad/railroad-diagrams.css">
<!-- RAILROAD END ----------------------------------------- -->

main :: IO ()
main = do
    hakyllWith config $ do
        ...

        match "lib/**" $ do
            route   idRoute
            compile copyFileCompiler

Create a lib directory and create a railroad directory within the newly created lib directory.

Create a file “railroad.js” inside you /lib/railroad directory and copy the contents from this link

Create a file “railroad-diagrams.css” /lib/railroad directory and copy the contents from this link

If you followed my Setup PlantUML(Updated)

Line 3, 4, 20 is what we added to our previous plantuml-hakyll integration code.

------------------------------------------------RAILROAD START

railroad :: Data.Text.Text -> Data.Text.Text
railroad y = Data.Text.pack("<div class='rroad'>"<> Data.Text.unpack y <> "</div>")

------------------------------------------------RAILROAD END

mhexCode :: Data.Text.Text -> String
mhexCode y = tail $ init ( show ( Data.ByteString.Base16.encode $ Data.ByteString.Char8.pack $ Data.Text.unpack y ))

planthtml :: Data.Text.Text -> Data.Text.Text 
--planthtml y = T.pack ("<figure><img src='http://www.plantuml.com/plantuml/svg/~h" <> (T.unpack $ hexCode y) <>"'></figure>") 
planthtml y = Data.Text.pack ("<figure><img src='http://www.plantuml.com/plantuml/svg/~h" <> (mhexCode $ y) <>"'></figure>") 

--Pandoc filtering, 
addToCodeBlock :: Pandoc -> Pandoc 
addToCodeBlock  = walk ftranslate 
  where ftranslate :: Block -> Block
        ftranslate (CodeBlock ("",["plantuml"],[]) txt ) = RawBlock (Format "html") (planthtml txt)
        ftranslate (CodeBlock ("",["railroad"],[]) txt ) = RawBlock (Format "html") (railroad txt)
        ftranslate x = x

Now it should work when you input codeblocks your pandoc markdown with “rroad” tag as shown below (use backticks instead of single quotes in your pandoc markdown).

'''rroad
Diagram("foo")
'''

Diagram("foo")

If you did NOT follow my Setup PlantUML(Updated)

Add the codeblock below to your site.hs

------------------------------------------------RAILROAD START

railroad :: Data.Text.Text -> Data.Text.Text
railroad y = Data.Text.pack("<div class='rroad'>"<> Data.Text.unpack y <> "</div>")

------------------------------------------------RAILROAD END

--Pandoc filtering, 
addToCodeBlock :: Pandoc -> Pandoc 
addToCodeBlock  = walk ftranslate 
        ftranslate (CodeBlock ("",["railroad"],[]) txt ) = RawBlock (Format "html") (railroad txt)
        ftranslate x = x 

--New document compiler
modAddedCompiler :: Compiler (Item String)
modAddedCompiler = pandocCompilerWithTransform defaultHakyllReaderOptions defaultHakyllWriterOptions addToCodeBlock

In your site.hs find the match "posts/*" $ do and ONLY change the compiler in line 7 to modAddedCompiler

main :: IO ()
main = do
    hakyllWith config $ do
    ...
      match "posts/*" $ do
                route $ setExtension "html"
                compile $ modAddedCompiler --ONLY THIS
                    >>= loadAndApplyTemplate "templates/post.html"    (postCtxWithTags tags)
                    ...

Now it should work when you input codeblocks your pandoc markdown with “rroad” tag as shown below (use backticks instead of single quotes in your pandoc markdown).

'''rroad
Diagram("foo")
'''

Diagram("foo")