renderer: add classes for icons and link directives

core/shared/src/main/scala/laika/directive/api.scala

@@ -777,7 +777,8 @@ object Links {
     */
   def eval (directiveName: String)(f: (String, DocumentCursor) => Either[String, SpanLink]): Directive = new Directive {
     override def name = directiveName
-    override def apply (linkId: String, cursor: DocumentCursor): Either[String, SpanLink] = f(linkId, cursor)
+    override def apply (linkId: String, cursor: DocumentCursor): Either[String, SpanLink] = 
+      f(linkId, cursor).map(_.withStyles(directiveName))
   }
 
 }

core/shared/src/main/scala/laika/directive/std/StandardDirectives.scala

@@ -229,14 +229,16 @@ object StandardDirectives extends DirectiveRegistry {
   /** Implementation of the `icon` directive for span elements in markup documents.
     */
   lazy val iconSpan: Spans.Directive  = Spans.create("icon") {
-    (Spans.dsl.attribute(0).as[String], Spans.dsl.source).mapN(IconReference(_, _))
+    (Spans.dsl.attribute(0).as[String], Spans.dsl.source).mapN { (ref, src) =>
+      IconReference(ref, src, Styles(ref))
+    }
   }
 
   /** Implementation of the `icon` directive for span elements in templates.
     */
   lazy val iconTemplate: Templates.Directive  = Templates.create("icon") {
     (Templates.dsl.attribute(0).as[String], Templates.dsl.source).mapN { (ref, src) =>
-      TemplateElement(IconReference(ref, src))
+      TemplateElement(IconReference(ref, src, Styles(ref)))
     }
   }
 

core/shared/src/test/scala/laika/directive/SpanDirectiveAPISpec.scala

@@ -467,7 +467,7 @@ class SpanDirectiveAPISpec extends FunSuite with TestSourceBuilders with RenderP
       val input = "aa @:rfc(222) bb"
       run(
         Text("aa "),
-        SpanLink.external("http://tools.ietf.org/html/rfc222")("RFC 222"),
+        SpanLink.external("http://tools.ietf.org/html/rfc222")("RFC 222").withStyles("rfc"),
         Text(" bb")
       )
     }
@@ -478,7 +478,7 @@ class SpanDirectiveAPISpec extends FunSuite with TestSourceBuilders with RenderP
       val input = "aa [RFC-222][@:rfc(222)] bb"
       assertEquals(parseAsMarkdown(input), Right(Paragraph(
         Text("aa "),
-        SpanLink.external("http://tools.ietf.org/html/rfc222")("RFC-222"),
+        SpanLink.external("http://tools.ietf.org/html/rfc222")("RFC-222").withStyles("rfc"),
         Text(" bb")
       )))
     }

core/shared/src/test/scala/laika/directive/std/LinkDirectiveSpec.scala

@@ -77,30 +77,30 @@ class LinkDirectiveSpec extends FunSuite with ParagraphCompanionShortcuts with T
   }
 
   test("api directive - span link based on the default base URI") {
-    Api.runType("def.bar.Baz", SpanLink.external("https://default.api/def/bar/Baz.html")("Baz"))
+    Api.runType("def.bar.Baz", SpanLink.external("https://default.api/def/bar/Baz.html")("Baz").withStyles("api"))
   }
 
   test("api directive - strip the $ postfix from the link text") {
-    Api.runType("def.bar.Baz$", SpanLink.external("https://default.api/def/bar/Baz$.html")("Baz"))
+    Api.runType("def.bar.Baz$", SpanLink.external("https://default.api/def/bar/Baz$.html")("Baz").withStyles("api"))
   }
 
   test("api directive - span link based on the longest prefix match") {
-    Api.runType("foo.bar.Baz", SpanLink.external("https://bar.api/foo/bar/Baz.html")("Baz"))
+    Api.runType("foo.bar.Baz", SpanLink.external("https://bar.api/foo/bar/Baz.html")("Baz").withStyles("api"))
   }
 
   test("api directive - span link based on the shorter prefix match") {
-    Api.runType("foo.baz.Baz", SpanLink.external("https://foo.api/foo/baz/Baz.html")("Baz"))
+    Api.runType("foo.baz.Baz", SpanLink.external("https://foo.api/foo/baz/Baz.html")("Baz").withStyles("api"))
   }
 
   test("api directive - span link to a method") {
     Api.runType(
       "foo.baz.Baz#canEqual(that:Any\\):Boolean", 
-      SpanLink.external("https://foo.api/foo/baz/Baz.html#canEqual(that:Any):Boolean")("Baz.canEqual")
+      SpanLink.external("https://foo.api/foo/baz/Baz.html#canEqual(that:Any):Boolean")("Baz.canEqual").withStyles("api")
     )
   }
 
   test("api directive - span link for a package") {
-    Api.runType("foo.bar.package", SpanLink.external("https://bar.api/foo/bar/index.html")("foo.bar"))
+    Api.runType("foo.bar.package", SpanLink.external("https://bar.api/foo/bar/index.html")("foo.bar").withStyles("api"))
   }
 
   test("api directive - fail for an internal link to a missing target") {
@@ -120,15 +120,15 @@ class LinkDirectiveSpec extends FunSuite with ParagraphCompanionShortcuts with T
 
   test("api directive - as the only element of a block".ignore) {
     // TODO - this fails right now, might need auto-promotion of span directives without body to block directives
-    Api.runTypeBlock("@:api(foo.bar.Baz)", SpanLink.external("https://bar.api/foo/bar/Baz.html")("Baz"))
+    Api.runTypeBlock("@:api(foo.bar.Baz)", SpanLink.external("https://bar.api/foo/bar/Baz.html")("Baz").withStyles("api"))
   }
 
   test("api directive - as the first element of a block") {
-    Api.runTypeBlock("@:api(foo.bar.Baz) bb", SpanLink.external("https://bar.api/foo/bar/Baz.html")("Baz"), Text(" bb"))
+    Api.runTypeBlock("@:api(foo.bar.Baz) bb", SpanLink.external("https://bar.api/foo/bar/Baz.html")("Baz").withStyles("api"), Text(" bb"))
   }
 
   test("api directive - as the first line of a block".ignore) {
-    Api.runTypeBlock("@:api(foo.bar.Baz)\nbb", SpanLink.external("https://bar.api/foo/bar/Baz.html")("Baz"), Text(" bb"))
+    Api.runTypeBlock("@:api(foo.bar.Baz)\nbb", SpanLink.external("https://bar.api/foo/bar/Baz.html")("Baz").withStyles("api"), Text(" bb"))
   }
 
   object Source {
@@ -161,15 +161,15 @@ class LinkDirectiveSpec extends FunSuite with ParagraphCompanionShortcuts with T
   }
 
   test("source directive - span link based on the default base URI") {
-    Source.runType("def.bar.Baz", SpanLink.external("https://default.source/def/bar/Baz.scala")("Baz"))
+    Source.runType("def.bar.Baz", SpanLink.external("https://default.source/def/bar/Baz.scala")("Baz").withStyles("source"))
   }
 
   test("source directive - span link based on the longest prefix match") {
-    Source.runType("foo.bar.Baz", SpanLink.external("https://bar.source/foo/bar/Baz.java")("Baz"))
+    Source.runType("foo.bar.Baz", SpanLink.external("https://bar.source/foo/bar/Baz.java")("Baz").withStyles("source"))
   }
 
   test("source directive - span link based on the shorter prefix match") {
-    Source.runType("foo.baz.Baz", SpanLink.external("https://foo.source/foo/baz/Baz.scala")("Baz"))
+    Source.runType("foo.baz.Baz", SpanLink.external("https://foo.source/foo/baz/Baz.scala")("Baz").withStyles("source"))
   }
 
   test("source directive - fail when there is no matching base URI defined") {

core/shared/src/test/scala/laika/directive/std/StandardDirectiveSpec.scala

@@ -350,7 +350,7 @@ class StandardDirectiveSpec extends FunSuite
 
 
   test("icon directive - success") {
-    val icon = IconStyle("open")
+    val icon = IconStyle("open").withStyles("foo")
     val config = ConfigBuilder.empty.withValue(IconRegistry("foo"->icon)).build
     val input = """aa @:icon(foo) bb"""
     runTemplate(input, config,

io/src/main/scala/laika/helium/config/HeliumIcon.scala

@@ -32,24 +32,24 @@ import laika.rewrite.link.IconRegistry
   */
 object HeliumIcon {
 
-  private val iconFontStyle = Styles("icofont-laika")
+  private def glyphStyles (iconRef: String) = Styles("icofont-laika", iconRef)
 
-  val navigationMenu: Icon = IconGlyph('\uefa2', Some("Navigation"), iconFontStyle)
-  val home: Icon           = IconGlyph('\uef47', Some("Home"), iconFontStyle)
-  val link: Icon           = IconGlyph('\uef71', None, iconFontStyle)
-  val close: Icon          = IconGlyph('\ueedd', Some("Close"), iconFontStyle)
-  val check: Icon          = IconGlyph('\ueed7', None, iconFontStyle)
-  val chat: Icon           = IconGlyph('\ueed5', Some("Chat"), iconFontStyle)
-  val settings: Icon       = IconGlyph('\uefb0', Some("Settings"), iconFontStyle)
-  val edit: Icon           = IconGlyph('\uef10', Some("Edit"), iconFontStyle)
-  val demo: Icon           = IconGlyph('\ueeea', Some("Demo"), iconFontStyle)
-  val download: Icon       = IconGlyph('\uef08', Some("Download"), iconFontStyle)
-  val info: Icon           = IconGlyph('\uef4e', None, iconFontStyle)
-  val warning: Icon        = IconGlyph('\uf026', None, iconFontStyle)
-  val error: Icon          = IconGlyph('\ueedd', None, iconFontStyle)
-  val twitter: Icon        = IconGlyph('\ued7a', Some("Twitter"), iconFontStyle)
-  val api: Icon            = InlineSVGIcon(SVGIcons.apiIcon, Some("API"))
-  val github: Icon         = InlineSVGIcon(SVGIcons.githubIcon, Some("Source Code"))
+  val navigationMenu: Icon = IconGlyph('\uefa2', Some("Navigation"), glyphStyles("navigationMenu"))
+  val home: Icon           = IconGlyph('\uef47', Some("Home"), glyphStyles("home"))
+  val link: Icon           = IconGlyph('\uef71', None, glyphStyles("link"))
+  val close: Icon          = IconGlyph('\ueedd', Some("Close"), glyphStyles("close"))
+  val check: Icon          = IconGlyph('\ueed7', None, glyphStyles("check"))
+  val chat: Icon           = IconGlyph('\ueed5', Some("Chat"), glyphStyles("chat"))
+  val settings: Icon       = IconGlyph('\uefb0', Some("Settings"), glyphStyles("settings"))
+  val edit: Icon           = IconGlyph('\uef10', Some("Edit"), glyphStyles("edit"))
+  val demo: Icon           = IconGlyph('\ueeea', Some("Demo"), glyphStyles("demo"))
+  val download: Icon       = IconGlyph('\uef08', Some("Download"), glyphStyles("download"))
+  val info: Icon           = IconGlyph('\uef4e', None, glyphStyles("info"))
+  val warning: Icon        = IconGlyph('\uf026', None, glyphStyles("warning"))
+  val error: Icon          = IconGlyph('\ueedd', None, glyphStyles("error"))
+  val twitter: Icon        = IconGlyph('\ued7a', Some("Twitter"), glyphStyles("twitter"))
+  val api: Icon            = InlineSVGIcon(SVGIcons.apiIcon, Some("API"), Styles("api"))
+  val github: Icon         = InlineSVGIcon(SVGIcons.githubIcon, Some("Source Code"), Styles("github"))
 
   val registry: IconRegistry = IconRegistry(
     "navigationMenu" -> navigationMenu,

io/src/test/scala/laika/helium/HeliumDownloadPageSpec.scala

@@ -89,10 +89,10 @@ class HeliumDownloadPageSpec extends CatsEffectSuite with InputBuilder with Resu
                      |<header id="top-bar">
                      |<div class="row">
                      |<a id="nav-icon">
-                     |<i class="icofont-laika" title="Navigation">&#xefa2;</i>
+                     |<i class="icofont-laika navigationMenu" title="Navigation">&#xefa2;</i>
                      |</a>
                      |</div>
-                     |<a class="icon-link" href="index.html"><i class="icofont-laika" title="Home">&#xef47;</i></a>
+                     |<a class="icon-link" href="index.html"><i class="icofont-laika home" title="Home">&#xef47;</i></a>
                      |<div class="row links">
                      |</div>
                      |</header>

io/src/test/scala/laika/helium/HeliumHTMLNavSpec.scala

@@ -124,7 +124,7 @@ class HeliumHTMLNavSpec extends CatsEffectSuite with InputBuilder with ResultExt
         |<li class="level1 nav-title-page"><a href="#section-2">Section 2</a></li>
         |<li class="level2 nav-leaf-entry"><a href="#section-2-1">Section 2.1</a></li>
         |</ul>
-        |<p class="footer"><a href="https://github.com/my-project/doc-1.md"><i class="icofont-laika" title="Edit">&#xef10;</i>Source for this page</a></p>""".stripMargin
+        |<p class="footer"><a href="https://github.com/my-project/doc-1.md"><i class="icofont-laika edit" title="Edit">&#xef10;</i>Source for this page</a></p>""".stripMargin
     val helium = Helium.defaults.site.markupEditLinks("Source for this page", "https://github.com/my-project").site.landingPage()
     transformAndExtract(inputs, helium, "<nav id=\"page-nav\">", "</nav>").assertEquals(expected)
   }
@@ -146,10 +146,10 @@ class HeliumHTMLNavSpec extends CatsEffectSuite with InputBuilder with ResultExt
     val expected =
       """<div class="row">
         |<a id="nav-icon">
-        |<i class="icofont-laika" title="Navigation">&#xefa2;</i>
+        |<i class="icofont-laika navigationMenu" title="Navigation">&#xefa2;</i>
         |</a>
         |</div>
-        |<a class="icon-link" href="index.html"><i class="icofont-laika" title="Home">&#xef47;</i></a>
+        |<a class="icon-link" href="index.html"><i class="icofont-laika home" title="Home">&#xef47;</i></a>
         |<div class="row links">
         |</div>""".stripMargin
     transformAndExtract(inputs, Helium.defaults.site.landingPage(), "<header id=\"top-bar\">", "</header>").assertEquals(expected)
@@ -159,12 +159,12 @@ class HeliumHTMLNavSpec extends CatsEffectSuite with InputBuilder with ResultExt
     val expected =
       """<div class="row">
         |<a id="nav-icon">
-        |<i class="icofont-laika" title="Navigation">&#xefa2;</i>
+        |<i class="icofont-laika navigationMenu" title="Navigation">&#xefa2;</i>
         |</a>
         |</div>
         |<a class="image-link" href="index.html"><img src="home.png" alt="Homepage" title="Home"></a>
         |<div class="row links">
-        |<a class="icon-link" href="doc-2.html"><i class="icofont-laika" title="Demo">&#xeeea;</i></a>
+        |<a class="icon-link" href="doc-2.html"><i class="icofont-laika demo" title="Demo">&#xeeea;</i></a>
         |<a class="button-link" href="http://somewhere.com/">Somewhere</a>
         |</div>""".stripMargin
     val imagePath = Root / "home.png"
@@ -182,7 +182,7 @@ class HeliumHTMLNavSpec extends CatsEffectSuite with InputBuilder with ResultExt
     val expected =
       """<div class="row">
         |<a id="nav-icon">
-        |<i class="icofont-laika" title="Navigation">&#xefa2;</i>
+        |<i class="icofont-laika navigationMenu" title="Navigation">&#xefa2;</i>
         |</a>
         |</div>
         |<a class="image-link" href="index.html"><img src="home.png" alt="Homepage" title="Home"></a>
@@ -219,7 +219,7 @@ class HeliumHTMLNavSpec extends CatsEffectSuite with InputBuilder with ResultExt
     val expected =
       """<div class="row">
         |<a id="nav-icon">
-        |<i class="icofont-laika" title="Navigation">&#xefa2;</i>
+        |<i class="icofont-laika navigationMenu" title="Navigation">&#xefa2;</i>
         |</a>
         |<div class="menu-container version-menu">
         |<a class="text-link menu-toggle" href="#">Version: 0.42.x</a>
@@ -229,7 +229,7 @@ class HeliumHTMLNavSpec extends CatsEffectSuite with InputBuilder with ResultExt
         |</nav>
         |</div>
         |</div>
-        |<a class="icon-link" href="../"><i class="icofont-laika" title="Home">&#xef47;</i></a>
+        |<a class="icon-link" href="../"><i class="icofont-laika home" title="Home">&#xef47;</i></a>
         |<div class="row links">
         |</div>""".stripMargin
     val config = Root / "directory.conf" -> "laika.versioned = true"
@@ -245,7 +245,7 @@ class HeliumHTMLNavSpec extends CatsEffectSuite with InputBuilder with ResultExt
     val expected =
       """<div class="row">
         |<a id="nav-icon">
-        |<i class="icofont-laika" title="Navigation">&#xefa2;</i>
+        |<i class="icofont-laika navigationMenu" title="Navigation">&#xefa2;</i>
         |</a>
         |<div class="menu-container version-menu">
         |<a class="text-link menu-toggle" href="#">Choose Version</a>
@@ -256,7 +256,7 @@ class HeliumHTMLNavSpec extends CatsEffectSuite with InputBuilder with ResultExt
         |</nav>
         |</div>
         |</div>
-        |<a class="icon-link" href="index.html"><i class="icofont-laika" title="Home">&#xef47;</i></a>
+        |<a class="icon-link" href="index.html"><i class="icofont-laika home" title="Home">&#xef47;</i></a>
         |<div class="row links">
         |</div>""".stripMargin
     transformAndExtract(inputs, helium, "<header id=\"top-bar\">", "</header>").assertEquals(expected)

io/src/test/scala/laika/helium/HeliumLandingPageSpec.scala

@@ -113,7 +113,7 @@ class HeliumLandingPageSpec extends CatsEffectSuite with InputBuilder with Resul
                      |</div>
                      |<p class="medium"><a class="text-link" href="doc-1.html">Text Link</a></p>
                      |<p class="medium"><a class="button-link" href="http://somewhere.com/">Somewhere</a></p>
-                     |<p class="medium"><span class="row links"><a class="icon-link" href="doc-2.html"><i class="icofont-laika" title="Demo">&#xeeea;</i></a><a class="icon-link" href="doc-3.md"><i class="icofont-laika">&#xef4e;</i></a></span></p>
+                     |<p class="medium"><span class="row links"><a class="icon-link" href="doc-2.html"><i class="icofont-laika demo" title="Demo">&#xeeea;</i></a><a class="icon-link" href="doc-3.md"><i class="icofont-laika info">&#xef4e;</i></a></span></p>
                      |</div>
                      |</div>
                      |$teaserHTML
@@ -174,7 +174,7 @@ class HeliumLandingPageSpec extends CatsEffectSuite with InputBuilder with Resul
                      |<div id="header-right">
                      |<p>Latest Release</p>
                      |<p class="large">2.3.5</p>
-                     |<p class="medium"><a class="icon-link" href="doc-2.html"><i class="icofont-laika" title="Demo">&#xeeea;</i></a></p>
+                     |<p class="medium"><a class="icon-link" href="doc-2.html"><i class="icofont-laika demo" title="Demo">&#xeeea;</i></a></p>
                      |<p class="medium"><a class="button-link" href="http://somewhere.com/">Somewhere</a></p>
                      |</div>
                      |</div>

io/src/test/scala/laika/helium/HeliumRenderOverridesSpec.scala

@@ -115,7 +115,7 @@ class HeliumRenderOverridesSpec extends CatsEffectSuite with InputBuilder with R
       """.stripMargin
     val expected = 
       s"""<div class="callout warning">
-         |<i class="icofont-laika">${entity(HeliumIcon.warning)}</i>
+         |<i class="icofont-laika warning">${entity(HeliumIcon.warning)}</i>
          |<p>You really should not do this.</p>
          |</div>""".stripMargin
     transformAndExtract(input).assertEquals(expected)
@@ -134,14 +134,14 @@ class HeliumRenderOverridesSpec extends CatsEffectSuite with InputBuilder with R
   test("anchors for headers - left placement (default)") {
     val expected = 
       s"""<h1 id="title" class="title">Title</h1>
-         |<h2 id="some-headline" class="section"><a class="anchor-link left" href="#some-headline"><i class="icofont-laika">${entity(HeliumIcon.link)}</i></a>Some Headline</h2>""".stripMargin
+         |<h2 id="some-headline" class="section"><a class="anchor-link left" href="#some-headline"><i class="icofont-laika link">${entity(HeliumIcon.link)}</i></a>Some Headline</h2>""".stripMargin
     transformAndExtract(headlineInput).assertEquals(expected)
   }
 
   test("anchors for headers - right placement") {
     val expected =
       s"""<h1 id="title" class="title">Title</h1>
-         |<h2 id="some-headline" class="section">Some Headline<a class="anchor-link right" href="#some-headline"><i class="icofont-laika">${entity(HeliumIcon.link)}</i></a></h2>""".stripMargin
+         |<h2 id="some-headline" class="section">Some Headline<a class="anchor-link right" href="#some-headline"><i class="icofont-laika link">${entity(HeliumIcon.link)}</i></a></h2>""".stripMargin
     val layout = Helium.defaults.siteSettings.layout
     val helium = heliumBase.site.layout(layout.contentWidth, layout.navigationWidth, layout.topBarHeight,
       layout.defaultBlockSpacing, layout.defaultLineHeight, AnchorPlacement.Right)

io/src/test/scala/laika/helium/HeliumTocPageSpec.scala

@@ -76,10 +76,10 @@ class HeliumTocPageSpec extends CatsEffectSuite with InputBuilder with ResultExt
                      |<header id="top-bar">
                      |<div class="row">
                      |<a id="nav-icon">
-                     |<i class="icofont-laika" title="Navigation">&#xefa2;</i>
+                     |<i class="icofont-laika navigationMenu" title="Navigation">&#xefa2;</i>
                      |</a>
                      |</div>
-                     |<a class="icon-link" href="index.html"><i class="icofont-laika" title="Home">&#xef47;</i></a>
+                     |<a class="icon-link" href="index.html"><i class="icofont-laika home" title="Home">&#xef47;</i></a>
                      |<div class="row links">
                      |</div>
                      |</header>