arrowd arrowd - 1 month ago 5x
CSS Question

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
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
even if I move it into a
tag inside the page itself. How to solve this problem?


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");

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