From 40790180903a522e1479dea32a04aa4f389c8c81 Mon Sep 17 00:00:00 2001 From: Jens Peters Date: Wed, 11 Sep 2024 09:56:00 +0200 Subject: [PATCH 1/8] Fix test signature Co-authored-by: LunarN0va --- .../nl/avisi/structurizr/site/generatr/site/views/CDNTest.kt | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/test/kotlin/nl/avisi/structurizr/site/generatr/site/views/CDNTest.kt b/src/test/kotlin/nl/avisi/structurizr/site/generatr/site/views/CDNTest.kt index 4405dca0..8ebbd966 100644 --- a/src/test/kotlin/nl/avisi/structurizr/site/generatr/site/views/CDNTest.kt +++ b/src/test/kotlin/nl/avisi/structurizr/site/generatr/site/views/CDNTest.kt @@ -10,11 +10,11 @@ import org.junit.jupiter.api.TestFactory class CDNTest { @TestFactory - fun `cdn locations`() { + fun `cdn locations`() : List { val workspace = Workspace("workspace name", "") val cdn = CDN(workspace) - listOf( + return listOf( cdn.bulmaCss() to "/css/bulma.min.css", cdn.katexJs() to "/dist/katex.min.js", cdn.katexCss() to "/dist/katex.min.css", From 50f6d7d1c146cc8a33078b6176d5d34907579ef1 Mon Sep 17 00:00:00 2001 From: Jens Peters Date: Wed, 11 Sep 2024 10:12:31 +0200 Subject: [PATCH 2/8] Add experimental dark mode Co-authored-by: LunarN0va --- README.md | 1 + docs/example/workspace.dsl | 1 + .../site/generatr/site/SiteGenerator.kt | 7 ++++++ .../generatr/site/model/HeaderBarViewModel.kt | 1 + .../site/generatr/site/model/PageViewModel.kt | 1 + .../site/generatr/site/views/Page.kt | 10 ++++++--- .../site/generatr/site/views/PageHeader.kt | 9 ++++++++ src/main/resources/assets/css/style.css | 12 ++++++++++ src/main/resources/assets/js/toggle-theme.js | 18 +++++++++++++++ .../site/model/HeaderBarViewModelTest.kt | 22 +++++++++++++++++++ 10 files changed, 79 insertions(+), 3 deletions(-) create mode 100644 src/main/resources/assets/js/toggle-theme.js diff --git a/README.md b/README.md index 4da7891d..d504b4d6 100644 --- a/README.md +++ b/README.md @@ -273,6 +273,7 @@ architecture model: | `generatr.site.externalTag` | Software systems containing this tag will be considered external | | | | `generatr.site.nestGroups` | Will show software systems in the left side navigator in collapsable groups | `false` | `true` | | `generatr.site.cdn` | Specifies the CDN base location for fetching NPM packages for browser runtime dependencies. Defaults to jsDelivr, but can be changed to e.g. an on-premise location. | `https://cdn.jsdelivr.net/npm` | `https://cdn.my-company/npm` | +| `generatr.site.darkMode` | Experimental: will show a dark mode menu item to switch between light and dark mode on the website. If turned off, the site will be shown in light mode and this menu item will not be shown. | `false` | `true` | See the included example for usage of some those properties in the [C4 architecture model example](https://github.com/avisi-cloud/structurizr-site-generatr/blob/main/docs/example/workspace.dsl#L163). diff --git a/docs/example/workspace.dsl b/docs/example/workspace.dsl index ce0c94d6..6ad8ea23 100644 --- a/docs/example/workspace.dsl +++ b/docs/example/workspace.dsl @@ -186,6 +186,7 @@ workspace "Big Bank plc" "This is an example workspace to illustrate the key fea "generatr.site.externalTag" "External System" "generatr.site.nestGroups" "false" "generatr.site.cdn" "https://cdn.jsdelivr.net/npm" + "generatr.site.darkMode" "true" } systemlandscape "SystemLandscape" { diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/SiteGenerator.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/SiteGenerator.kt index 201ef461..c64660be 100644 --- a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/SiteGenerator.kt +++ b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/SiteGenerator.kt @@ -27,6 +27,7 @@ fun copySiteWideAssets(exportDir: File) { copySiteWideAsset(exportDir, "/css/treeview.css") copySiteWideAsset(exportDir, "/js/treeview.js") copySiteWideAsset(exportDir, "/js/katex-render.js") + copySiteWideAsset(exportDir, "/js/toggle-theme.js") } private fun copySiteWideAsset(exportDir: File, asset: String) { @@ -116,6 +117,12 @@ private fun generateStyle(context: GeneratorContext, branchDir: File) { color: dimgrey!important; background-color: white!important; } + body.dark-theme .input.has-site-branding { + background-color: #1b212c!important; + } + i .has-site-branding { + color: $secondary!important + } .input.has-site-branding:focus { border-color: $secondary!important; box-shadow: 0 0 0 0.125em $secondary; diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/HeaderBarViewModel.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/HeaderBarViewModel.kt index 4626bf7e..005f825c 100644 --- a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/HeaderBarViewModel.kt +++ b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/HeaderBarViewModel.kt @@ -12,6 +12,7 @@ class HeaderBarViewModel(pageViewModel: PageViewModel, generatorContext: Generat .map { BranchHomeLinkViewModel(pageViewModel, it) } val currentBranch = generatorContext.currentBranch val version = generatorContext.version + val allowToggleTheme = pageViewModel.allowToggleTheme private fun logoPath(generatorContext: GeneratorContext) = generatorContext.workspace.views.configuration.properties diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/PageViewModel.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/PageViewModel.kt index 9d79b8af..2d0a0520 100644 --- a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/PageViewModel.kt +++ b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/PageViewModel.kt @@ -25,6 +25,7 @@ abstract class PageViewModel(protected val generatorContext: GeneratorContext) { val includedSoftwareSystems = generatorContext.workspace.includedSoftwareSystems val configuration = generatorContext.workspace.views.configuration.properties val includeTreeview = configuration.getOrDefault("generatr.site.nestGroups", "false").toBoolean() + val allowToggleTheme = configuration.getOrDefault("generatr.site.darkMode", "false").toBoolean() abstract val url: String abstract val pageSubTitle: String diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/Page.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/Page.kt index 5b63f6fc..71e0bec3 100644 --- a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/Page.kt +++ b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/Page.kt @@ -6,8 +6,10 @@ import nl.avisi.structurizr.site.generatr.site.model.PageViewModel fun HTML.page(viewModel: PageViewModel, block: DIV.() -> Unit) { attributes["lang"] = "en" - attributes["data-theme"] = "light" - classes = setOf("has-background-light") + if (!viewModel.allowToggleTheme) { + attributes["data-theme"] = "light" + classes = setOf("has-background-light") + } headFragment(viewModel) bodyFragment(viewModel, block) @@ -24,6 +26,8 @@ private fun HTML.headFragment(viewModel: PageViewModel) { script(type = ScriptType.textJavaScript, src = "../" + "/modal.js".asUrlToFile(viewModel.url)) { } script(type = ScriptType.textJavaScript, src = "../" + "/svg-modal.js".asUrlToFile(viewModel.url)) { } script(type = ScriptType.textJavaScript, src = viewModel.cdn.svgpanzoomJs()) { } + if (viewModel.allowToggleTheme) + script(type = ScriptType.textJavaScript, src = "../" + "/toggle-theme.js".asUrlToFile(viewModel.url)) { } if (viewModel.includeTreeview) link(rel = "stylesheet", href = "../" + "/treeview.css".asUrlToFile(viewModel.url)) @@ -59,7 +63,7 @@ private fun HTML.bodyFragment(viewModel: PageViewModel, block: DIV.() -> Unit) { div(classes = "site-layout") { id = "site" menu(viewModel.menu, viewModel.includeTreeview) - div(classes = "container is-fluid has-background-white") { + div(classes = "container is-fluid") { block() } } diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/PageHeader.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/PageHeader.kt index c362dfbd..4f899937 100644 --- a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/PageHeader.kt +++ b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/PageHeader.kt @@ -46,6 +46,15 @@ fun BODY.pageHeader(viewModel: HeaderBarViewModel) { +branchLink.title } } + if (viewModel.allowToggleTheme) { + hr(classes = "navbar-divider") + a( + classes = "navbar-item", + ) { + onClick = "toggleTheme()" + +"Toggle theme" + } + } hr(classes = "navbar-divider") div(classes = "navbar-item has-text-grey-light") { span { +"v" } diff --git a/src/main/resources/assets/css/style.css b/src/main/resources/assets/css/style.css index b6e6a5fe..cea7b9e0 100644 --- a/src/main/resources/assets/css/style.css +++ b/src/main/resources/assets/css/style.css @@ -69,3 +69,15 @@ a.navbar-item:hover { color: #485fc7; border-bottom-color: #485fc7; } + +body.dark-theme .tabs li a { + border-bottom-color: #696969; +} + +body.dark-theme .tabs li.is-active a { + color: #7585ff; + border-bottom-color: #7585ff; +} +body.dark-theme .text { + fill: #ebecf0 +} diff --git a/src/main/resources/assets/js/toggle-theme.js b/src/main/resources/assets/js/toggle-theme.js new file mode 100644 index 00000000..b17f385a --- /dev/null +++ b/src/main/resources/assets/js/toggle-theme.js @@ -0,0 +1,18 @@ +if (!localStorage.getItem("data-theme")) { + const prefersDarkMode = window.matchMedia && + window.matchMedia('(prefers-color-scheme: dark)').matches; + + localStorage.setItem("data-theme", prefersDarkMode ? "dark" : "light"); +} + +document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme")); + +function toggleTheme() { + if (localStorage.getItem("data-theme") === "light") { + document.documentElement.setAttribute("data-theme", "dark"); + localStorage.setItem("data-theme", "dark"); + } else { + document.documentElement.setAttribute("data-theme", "light"); + localStorage.setItem("data-theme", "light"); + } +} diff --git a/src/test/kotlin/nl/avisi/structurizr/site/generatr/site/model/HeaderBarViewModelTest.kt b/src/test/kotlin/nl/avisi/structurizr/site/generatr/site/model/HeaderBarViewModelTest.kt index 5dab8acb..1fab706c 100644 --- a/src/test/kotlin/nl/avisi/structurizr/site/generatr/site/model/HeaderBarViewModelTest.kt +++ b/src/test/kotlin/nl/avisi/structurizr/site/generatr/site/model/HeaderBarViewModelTest.kt @@ -67,4 +67,26 @@ class HeaderBarViewModelTest : ViewModelTest() { assertThat(viewModel.hasLogo).isFalse() } + + @Test + fun `dark mode`() { + val viewModel = HeaderBarViewModel(pageViewModel, generatorContext) + + assertThat(viewModel.allowToggleTheme).isFalse() + } + + @Test + fun `no dark mode`() { + generatorContext.workspace.views.configuration.addProperty( + "generatr.site.darkMode", + "true" + ) + + val viewModel = HeaderBarViewModel(object : PageViewModel(generatorContext) { + override val url: String = "/master/system" + override val pageSubTitle: String = "subtitle" + }, generatorContext) + + assertThat(viewModel.allowToggleTheme).isTrue() + } } From 92901dd2635be765b1d6a647fa69cad36885178b Mon Sep 17 00:00:00 2001 From: Jens Peters Date: Wed, 11 Sep 2024 13:51:00 +0200 Subject: [PATCH 3/8] Convert dark mode setting into a three way state --- README.md | 2 +- docs/example/workspace.dsl | 2 +- .../site/generatr/site/model/PageViewModel.kt | 10 ++++- .../site/generatr/site/model/Theme.kt | 5 +++ .../site/generatr/site/views/Page.kt | 13 ++++-- .../site/model/HeaderBarViewModelTest.kt | 41 ++++++++++--------- 6 files changed, 47 insertions(+), 26 deletions(-) create mode 100644 src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/Theme.kt diff --git a/README.md b/README.md index d504b4d6..d99287fc 100644 --- a/README.md +++ b/README.md @@ -273,7 +273,7 @@ architecture model: | `generatr.site.externalTag` | Software systems containing this tag will be considered external | | | | `generatr.site.nestGroups` | Will show software systems in the left side navigator in collapsable groups | `false` | `true` | | `generatr.site.cdn` | Specifies the CDN base location for fetching NPM packages for browser runtime dependencies. Defaults to jsDelivr, but can be changed to e.g. an on-premise location. | `https://cdn.jsdelivr.net/npm` | `https://cdn.my-company/npm` | -| `generatr.site.darkMode` | Experimental: will show a dark mode menu item to switch between light and dark mode on the website. If turned off, the site will be shown in light mode and this menu item will not be shown. | `false` | `true` | +| `generatr.site.theme` | Experimental: allows to force a light or dark theme or allows to switch between light and dark mode on the website with browser preference or menu item. Possible values are 'light', 'dark' or 'auto'. | `light` | `auto` | See the included example for usage of some those properties in the [C4 architecture model example](https://github.com/avisi-cloud/structurizr-site-generatr/blob/main/docs/example/workspace.dsl#L163). diff --git a/docs/example/workspace.dsl b/docs/example/workspace.dsl index 6ad8ea23..d9b94e33 100644 --- a/docs/example/workspace.dsl +++ b/docs/example/workspace.dsl @@ -186,7 +186,7 @@ workspace "Big Bank plc" "This is an example workspace to illustrate the key fea "generatr.site.externalTag" "External System" "generatr.site.nestGroups" "false" "generatr.site.cdn" "https://cdn.jsdelivr.net/npm" - "generatr.site.darkMode" "true" + "generatr.site.theme" "auto" } systemlandscape "SystemLandscape" { diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/PageViewModel.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/PageViewModel.kt index 2d0a0520..61c4f04b 100644 --- a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/PageViewModel.kt +++ b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/PageViewModel.kt @@ -25,8 +25,16 @@ abstract class PageViewModel(protected val generatorContext: GeneratorContext) { val includedSoftwareSystems = generatorContext.workspace.includedSoftwareSystems val configuration = generatorContext.workspace.views.configuration.properties val includeTreeview = configuration.getOrDefault("generatr.site.nestGroups", "false").toBoolean() - val allowToggleTheme = configuration.getOrDefault("generatr.site.darkMode", "false").toBoolean() + val theme = configuration.getOrDefault("generatr.site.theme", "light").toTheme() + val allowToggleTheme = theme == Theme.AUTO abstract val url: String abstract val pageSubTitle: String } + +fun String.toTheme() = when (this) { + "light" -> Theme.LIGHT + "dark" -> Theme.DARK + "auto" -> Theme.AUTO + else -> throw IllegalArgumentException("Unknown theme '$this', allowed values are 'light', 'dark' or 'auto'") +} diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/Theme.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/Theme.kt new file mode 100644 index 00000000..4ea31210 --- /dev/null +++ b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/model/Theme.kt @@ -0,0 +1,5 @@ +package nl.avisi.structurizr.site.generatr.site.model + +enum class Theme { + LIGHT, DARK, AUTO +} diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/Page.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/Page.kt index 71e0bec3..261b7c93 100644 --- a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/Page.kt +++ b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/Page.kt @@ -3,12 +3,19 @@ package nl.avisi.structurizr.site.generatr.site.views import kotlinx.html.* import nl.avisi.structurizr.site.generatr.site.asUrlToFile import nl.avisi.structurizr.site.generatr.site.model.PageViewModel +import nl.avisi.structurizr.site.generatr.site.model.Theme fun HTML.page(viewModel: PageViewModel, block: DIV.() -> Unit) { attributes["lang"] = "en" - if (!viewModel.allowToggleTheme) { - attributes["data-theme"] = "light" - classes = setOf("has-background-light") + when (viewModel.theme) { + Theme.LIGHT -> { + attributes["data-theme"] = "light" + classes = setOf("has-background-light") + } + Theme.DARK -> { + attributes["data-theme"] = "dark" + } + Theme.AUTO -> { } } headFragment(viewModel) diff --git a/src/test/kotlin/nl/avisi/structurizr/site/generatr/site/model/HeaderBarViewModelTest.kt b/src/test/kotlin/nl/avisi/structurizr/site/generatr/site/model/HeaderBarViewModelTest.kt index 1fab706c..71fa6939 100644 --- a/src/test/kotlin/nl/avisi/structurizr/site/generatr/site/model/HeaderBarViewModelTest.kt +++ b/src/test/kotlin/nl/avisi/structurizr/site/generatr/site/model/HeaderBarViewModelTest.kt @@ -5,6 +5,8 @@ import assertk.assertions.containsExactly import assertk.assertions.isEqualTo import assertk.assertions.isFalse import assertk.assertions.isTrue +import org.junit.jupiter.api.DynamicTest +import org.junit.jupiter.api.TestFactory import kotlin.test.Test class HeaderBarViewModelTest : ViewModelTest() { @@ -68,25 +70,24 @@ class HeaderBarViewModelTest : ViewModelTest() { assertThat(viewModel.hasLogo).isFalse() } - @Test - fun `dark mode`() { - val viewModel = HeaderBarViewModel(pageViewModel, generatorContext) - - assertThat(viewModel.allowToggleTheme).isFalse() - } - - @Test - fun `no dark mode`() { - generatorContext.workspace.views.configuration.addProperty( - "generatr.site.darkMode", - "true" - ) - - val viewModel = HeaderBarViewModel(object : PageViewModel(generatorContext) { - override val url: String = "/master/system" - override val pageSubTitle: String = "subtitle" - }, generatorContext) - - assertThat(viewModel.allowToggleTheme).isTrue() + @TestFactory + fun `no dark mode`() = listOf( + "light" to false, + "dark" to false, + "auto" to true, + ).map { (theme, allowToggle) -> + DynamicTest.dynamicTest(theme) { + generatorContext.workspace.views.configuration.addProperty( + "generatr.site.theme", + theme + ) + + val viewModel = HeaderBarViewModel(object : PageViewModel(generatorContext) { + override val url: String = "/master/system" + override val pageSubTitle: String = "subtitle" + }, generatorContext) + + assertThat(viewModel.allowToggleTheme).isEqualTo(allowToggle) + } } } From 8333e83e172695c032487a4de827257f2d064f4b Mon Sep 17 00:00:00 2001 From: Jens Peters Date: Wed, 11 Sep 2024 15:46:04 +0200 Subject: [PATCH 4/8] Add note about exporter --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d99287fc..9daccb6e 100644 --- a/README.md +++ b/README.md @@ -273,7 +273,7 @@ architecture model: | `generatr.site.externalTag` | Software systems containing this tag will be considered external | | | | `generatr.site.nestGroups` | Will show software systems in the left side navigator in collapsable groups | `false` | `true` | | `generatr.site.cdn` | Specifies the CDN base location for fetching NPM packages for browser runtime dependencies. Defaults to jsDelivr, but can be changed to e.g. an on-premise location. | `https://cdn.jsdelivr.net/npm` | `https://cdn.my-company/npm` | -| `generatr.site.theme` | Experimental: allows to force a light or dark theme or allows to switch between light and dark mode on the website with browser preference or menu item. Possible values are 'light', 'dark' or 'auto'. | `light` | `auto` | +| `generatr.site.theme` | Experimental: allows to force a light or dark theme or allows to switch between light and dark mode on the website with browser preference or menu item. Possible values are 'light', 'dark' or 'auto'. Note that the 'structurizr' exporter (see 'generatr.site.exporter' setting) generally works better for the dark theme. | `light` | `auto` | See the included example for usage of some those properties in the [C4 architecture model example](https://github.com/avisi-cloud/structurizr-site-generatr/blob/main/docs/example/workspace.dsl#L163). From 70aff79412bee7e515c531da8164e21052018c20 Mon Sep 17 00:00:00 2001 From: Jens Peters Date: Wed, 11 Sep 2024 16:18:56 +0200 Subject: [PATCH 5/8] Remove not needed styles --- .../structurizr/site/generatr/site/SiteGenerator.kt | 6 ------ .../structurizr/site/generatr/site/views/Page.kt | 1 - src/main/resources/assets/css/style.css | 12 ------------ 3 files changed, 19 deletions(-) diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/SiteGenerator.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/SiteGenerator.kt index c64660be..7895b11c 100644 --- a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/SiteGenerator.kt +++ b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/SiteGenerator.kt @@ -117,12 +117,6 @@ private fun generateStyle(context: GeneratorContext, branchDir: File) { color: dimgrey!important; background-color: white!important; } - body.dark-theme .input.has-site-branding { - background-color: #1b212c!important; - } - i .has-site-branding { - color: $secondary!important - } .input.has-site-branding:focus { border-color: $secondary!important; box-shadow: 0 0 0 0.125em $secondary; diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/Page.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/Page.kt index 261b7c93..ab0b4254 100644 --- a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/Page.kt +++ b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/Page.kt @@ -10,7 +10,6 @@ fun HTML.page(viewModel: PageViewModel, block: DIV.() -> Unit) { when (viewModel.theme) { Theme.LIGHT -> { attributes["data-theme"] = "light" - classes = setOf("has-background-light") } Theme.DARK -> { attributes["data-theme"] = "dark" diff --git a/src/main/resources/assets/css/style.css b/src/main/resources/assets/css/style.css index cea7b9e0..b6e6a5fe 100644 --- a/src/main/resources/assets/css/style.css +++ b/src/main/resources/assets/css/style.css @@ -69,15 +69,3 @@ a.navbar-item:hover { color: #485fc7; border-bottom-color: #485fc7; } - -body.dark-theme .tabs li a { - border-bottom-color: #696969; -} - -body.dark-theme .tabs li.is-active a { - color: #7585ff; - border-bottom-color: #7585ff; -} -body.dark-theme .text { - fill: #ebecf0 -} From 00d8b0e346472039c5cf0121d8a3fb1fbe855514 Mon Sep 17 00:00:00 2001 From: Jens Peters Date: Wed, 11 Sep 2024 16:55:19 +0200 Subject: [PATCH 6/8] Restore placeholder color Also move static styling to styles.css. --- .../avisi/structurizr/site/generatr/site/SiteGenerator.kt | 4 ---- .../structurizr/site/generatr/site/views/PageHeader.kt | 2 +- src/main/resources/assets/css/style.css | 8 ++++++++ 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/SiteGenerator.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/SiteGenerator.kt index 7895b11c..bf54ea80 100644 --- a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/SiteGenerator.kt +++ b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/SiteGenerator.kt @@ -113,10 +113,6 @@ private fun generateStyle(context: GeneratorContext, branchDir: File) { color: $secondary!important; background-color: $primary!important; } - .input.has-site-branding { - color: dimgrey!important; - background-color: white!important; - } .input.has-site-branding:focus { border-color: $secondary!important; box-shadow: 0 0 0 0.125em $secondary; diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/PageHeader.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/PageHeader.kt index 4f899937..bfe1cbc0 100644 --- a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/PageHeader.kt +++ b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/PageHeader.kt @@ -24,7 +24,7 @@ fun BODY.pageHeader(viewModel: HeaderBarViewModel) { div(classes = "navbar-menu has-site-branding") { div(classes = "navbar-end") { div(classes = "navbar-item") { - input(classes = "input is-small is-rounded has-site-branding") { + input(classes = "input is-small is-rounded") { id = "search" type = InputType.search size = "30" diff --git a/src/main/resources/assets/css/style.css b/src/main/resources/assets/css/style.css index b6e6a5fe..b338513f 100644 --- a/src/main/resources/assets/css/style.css +++ b/src/main/resources/assets/css/style.css @@ -69,3 +69,11 @@ a.navbar-item:hover { color: #485fc7; border-bottom-color: #485fc7; } + +.input { + color: dimgrey!important; + background-color: white!important; +} +.input::placeholder { + color: darkgrey!important; +} From 160e8ee94dab1c3c3146c35efa69af8eb2ec0099 Mon Sep 17 00:00:00 2001 From: Jens Peters Date: Thu, 12 Sep 2024 08:39:23 +0200 Subject: [PATCH 7/8] Set export for example to structurizr Plays slightly better with the dark theme, --- docs/example/workspace.dsl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/example/workspace.dsl b/docs/example/workspace.dsl index d9b94e33..b13f0555 100644 --- a/docs/example/workspace.dsl +++ b/docs/example/workspace.dsl @@ -182,7 +182,7 @@ workspace "Big Bank plc" "This is an example workspace to illustrate the key fea // default behaviour, if no generatr.markdown.flexmark.extensions property is specified, is to load the Tables extension only "generatr.markdown.flexmark.extensions" "Abbreviation,Admonition,AnchorLink,Attributes,Autolink,Definition,Emoji,Footnotes,GfmTaskList,GitLab,MediaTags,Tables,TableOfContents,Typographic" - "generatr.site.exporter" "c4" + "generatr.site.exporter" "structurizr" "generatr.site.externalTag" "External System" "generatr.site.nestGroups" "false" "generatr.site.cdn" "https://cdn.jsdelivr.net/npm" From 9d8939bcef4895ad85394e79101684919ff58012 Mon Sep 17 00:00:00 2001 From: Jens Peters Date: Tue, 1 Oct 2024 16:09:35 +0200 Subject: [PATCH 8/8] Use bold fonts for tab headers Works better for the dark theme. --- src/main/resources/assets/css/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/main/resources/assets/css/style.css b/src/main/resources/assets/css/style.css index b338513f..525c53ab 100644 --- a/src/main/resources/assets/css/style.css +++ b/src/main/resources/assets/css/style.css @@ -70,6 +70,10 @@ a.navbar-item:hover { border-bottom-color: #485fc7; } +.tabs li { + font-weight: bold; +} + .input { color: dimgrey!important; background-color: white!important;