Search code examples
csshaskellhakyll

How to relativize URLs in css files in Hakyll?

In my Hakyll site I have a stylesheet linked into the page:

<link rel="stylesheet" type="text/css" href="/css/my.css">

This CSS contains a @font-face directive linking to a font file:

@font-face {
 font-family: "Bla";
 src: url("/data/bla.ttf") format("truetype");
}

The problem is that font's URL doesn't get relativized by relativizeUrls even if I move it into a <script> tag inside the page itself. How to solve this problem?

Solution

  • I've gone an easier way. I've used this code to obtain root path relative to a current item:

    rootPath :: Compiler String
rootPath = (toSiteRoot . fromJust) <$> (getUnderlying >>= getRoute)

    And then created a Context with constant field:

    fontCtx = do
    root <- rootPath
    return $ constField "fontRoot" root

    Finally, i moved @font-face clause out of a CSS file into HTML one and used my field there:

        <style type="text/css">
        @font-face {
          ...
          src: url("$fontRoot$/data/bla.ttf") format("truetype");
        }
    </style>

    That context field turned out to be quite useful in other places, like path strings in Javascript code, which I also use.