Custom CSS Capability

README.md

@@ -260,6 +260,7 @@ architecture model:
 | `generatr.style.colors.secondary`       | Secondary site color, used for font color in header bar and for active menu.                                                                                                                                                                                                         | `#cccccc` | `#ffffff`           |
 | `generatr.style.faviconPath`            | Site logo location relative to the configured `assets` folder. When configured, the logo image will be place on the left side in the header bar. This requires the `--assets-dir` switch when generating the site and the corresponding file to be available in the `assets` folder. |           | `site/favicon.ico`  |
 | `generatr.style.logoPath`               | Site favicon location relative to the configured `assets` folder. When configured, the favicon will be set for all generated pages. This requires the `--assets-dir` switch when generating the site and the corresponding file to be available in the `assets` folder.              |           | `site/logo.png`     |
+| `generatr.style.customCSSPath`          | Site custom css location relative to the configured `assets` folder. When configured this css file will be loaded for all pages. This requires the `--assets-dir` switch when generating the site and the corresponding file to be available in the `assets` folder.                 |           | `site/custom.css`   |
 | `generatr.search.language`              | Indexing/stemming language for the search index. See [Lunr language support](https://github.com/olivernn/lunr-languages)                                                                                                                                                             | `en`      | `nl`                |
 | `generatr.markdown.flexmark.extensions` | Additional extensions to the markdown generator to add new markdown capabilities. [More Details](https://avisi-cloud.github.io/structurizr-site-generatr/main/extended-markdown-features/)                                                                                           | Tables    | `Tables,Admonition` |
 | `generatr.svglink.target`               | Specifies the link target for element links in the exported svg                                                                                                                                                                                                                      | `_top`    | `_self`             |

docs/example/assets/site/custom.css

@@ -0,0 +1,12 @@
+svg g g[id^="link"]:hover path {
+    stroke:#FF0000 !important;
+    stroke-width: 2.0;
+}
+
+svg g g[id^="link"]:hover polygon {
+    stroke:#FF0000 !important;
+}
+
+svg g g[id^="link"]:hover text {
+    fill:#FF0000 !important;
+}

docs/example/workspace.dsl

@@ -161,6 +161,7 @@ workspace "Big Bank plc" "This is an example workspace to illustrate the key fea
             "generatr.style.colors.secondary" "#ffffff"
             "generatr.style.faviconPath" "site/favicon.ico"
             "generatr.style.logoPath" "site/logo.png"
+            "generatr.style.customCSSPath" "site/custom.css"
             "generatr.svglink.target" "_self"
 
             // full list of available "generatr.markdown.flexmark.extensions"

src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/CustomCSSViewModel.kt

@@ -0,0 +1,28 @@
+package nl.avisi.structurizr.site.generatr.site.model
+
+import nl.avisi.structurizr.site.generatr.site.GeneratorContext
+import nl.avisi.structurizr.site.generatr.site.asUrlToFile
+import java.io.File
+
+class CustomCSSViewModel(generatorContext: GeneratorContext, pageViewModel: PageViewModel) {
+    val url = customCSSPath(generatorContext)?.let { "/$it".asUrlToFile(pageViewModel.url) }
+    val type = extractType()
+    val includecustomCSS = url != null
+
+    private fun customCSSPath(generatorContext: GeneratorContext) =
+        generatorContext.workspace.views.configuration.properties
+            .getOrDefault(
+                "generatr.style.customCSSPath",
+                null
+            )
+
+    private fun extractType(): String? {
+        return url?.let {
+            val extension = File(it).extension.lowercase()
+            if (extension.isBlank() || !arrayOf("css").contains(extension))
+                throw IllegalArgumentException("Custom CSS must be a valid *.css file")
+
+            "image/$extension"
+        }
+    }
+}

src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/PageViewModel.kt

@@ -12,16 +12,13 @@ abstract class PageViewModel(protected val generatorContext: GeneratorContext) {
             pageSubTitle
     }
     val favicon by lazy { FaviconViewModel(generatorContext, this) }
+    val customCSS by lazy { CustomCSSViewModel(generatorContext, this) }
     val headerBar by lazy { HeaderBarViewModel(this, generatorContext) }
     val menu by lazy { MenuViewModel(generatorContext, this) }
     val includeAutoReloading = generatorContext.serving
-
-    val flexmarkConfig by lazy { 
-        buildFlexmarkConfig(generatorContext) 
-    }
+    val flexmarkConfig by lazy { buildFlexmarkConfig(generatorContext) }
     val includeAdmonition = flexmarkConfig.selectedExtensionMap.containsKey("Admonition")
     val includeKatex = flexmarkConfig.selectedExtensionMap.containsKey("GitLab")
-
     val configuration = generatorContext.workspace.views.configuration.properties
 
     abstract val url: String

src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/Page.kt

@@ -18,16 +18,10 @@ private fun HTML.headFragment(viewModel: PageViewModel) {
         meta(name = "viewport", content = "width=device-width, initial-scale=1")
         title { +viewModel.pageTitle }
         link(rel = "stylesheet", href = "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css")
-        link(
-            rel = "stylesheet",
-            href = "../" + "/style.css".asUrlToFile(viewModel.url)
-        )
-        link(
-            rel = "stylesheet",
-            href = "./" + "/style-branding.css".asUrlToFile(viewModel.url)
-        )
+        link(rel = "stylesheet", href = "../" + "/style.css".asUrlToFile(viewModel.url))
+        link(rel = "stylesheet", href = "./" + "/style-branding.css".asUrlToFile(viewModel.url))
 
-        if (viewModel.includeAdmonition) 
+        if (viewModel.includeAdmonition)
             markdownAdmonitionStylesheet(viewModel)
 
         if (viewModel.includeKatex)
@@ -42,6 +36,10 @@ private fun HTML.headFragment(viewModel: PageViewModel) {
 
         if (viewModel.includeAutoReloading)
             autoReloadScript(viewModel)
+
+        if (viewModel.customCSS.includecustomCSS){
+            link(rel = "stylesheet", href = "./" + viewModel.customCSS.url)
+        }
     }
 }