feat: enable optional Diagrams List Index

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

@@ -0,0 +1,8 @@
+package nl.avisi.structurizr.site.generatr.site.model
+
+
+data class DiagramIndexViewModel(
+    val diagrams: List<DiagramViewModel>,
+    val images: List<ImageViewViewModel>) {
+    val visible: Boolean = (diagrams.count() + images.count()) > 1
+}

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

@@ -5,6 +5,7 @@ import com.structurizr.view.View
 data class DiagramViewModel(
     val key: String,
     val name: String,
+    val title: String?,
     val description: String?,
     val svg: String?,
     val diagramWidthInPixels: Int?,
@@ -14,19 +15,21 @@ data class DiagramViewModel(
 ) {
     companion object {
         fun forView(pageViewModel: PageViewModel, view: View, svgFactory: (key: String, url: String) -> String?) =
-            forView(pageViewModel, view.key, view.name, view.description.ifBlank { null }, svgFactory)
+            forView(pageViewModel, view.key, view.name, view.title, view.description.ifBlank { null }, svgFactory)
 
         fun forView(
             pageViewModel: PageViewModel,
             key: String,
             name: String,
+            title: String?,
             description: String?,
             svgFactory: (key: String, url: String) -> String?
         ): DiagramViewModel {
             val svg = svgFactory(key, pageViewModel.url)
             return DiagramViewModel(
                 key,
                 name,
+                title,
                 description,
                 svg,
                 extractDiagramWidthInPixels(svg),

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

@@ -16,7 +16,7 @@ class SoftwareSystemContainerComponentCodePageViewModel(generatorContext: Genera
     val visible = images.isNotEmpty()
     val containerTabs = createContainersCodeTabViewModel(generatorContext, container.softwareSystem)
     val componentTabs = createComponentsTabViewModel(generatorContext, container)
-
+    val diagramIndex = DiagramIndexViewModel(emptyList(), images)
     companion object {
         fun url(container: Container, component: Component?) = "${url(container.softwareSystem, Tab.CODE)}/${container.name.normalize()}/${component?.name?.normalize()}"
     }

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

@@ -21,6 +21,7 @@ class SoftwareSystemContainerComponentsPageViewModel(generatorContext: Generator
     val propertiesTable = createPropertiesTableViewModel(container.includedProperties)
     val visible = diagrams.isNotEmpty() or images.isNotEmpty() or hasProperties
     val containerTabs = createContainersComponentTabViewModel(generatorContext, container.softwareSystem)
+    val diagramIndex = DiagramIndexViewModel(diagrams, images)
     companion object {
         fun url(container: Container) = "${url(container.softwareSystem, Tab.COMPONENT)}/${container.name.normalize()}"
     }

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

@@ -15,4 +15,5 @@ class SoftwareSystemContainerPageViewModel(generatorContext: GeneratorContext, s
         .sortedBy { it.key }
         .map { ImageViewViewModel(it) }
     val visible = generatorContext.workspace.views.hasContainerViews(generatorContext.workspace, softwareSystem) || images.isNotEmpty()
+    val diagramIndex = DiagramIndexViewModel(diagrams, images)
 }

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

@@ -11,4 +11,5 @@ class SoftwareSystemContextPageViewModel(generatorContext: GeneratorContext, sof
         .sortedBy { it.key }
         .map { DiagramViewModel.forView(this, it, generatorContext.svgFactory) }
     val visible = generatorContext.workspace.views.hasSystemContextViews(softwareSystem)
+    val diagramIndex = DiagramIndexViewModel(diagrams, emptyList())
 }

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

@@ -11,4 +11,5 @@ class SoftwareSystemDeploymentPageViewModel(generatorContext: GeneratorContext,
         .sortedBy { it.key }
         .map { DiagramViewModel.forView(this, it, generatorContext.svgFactory) }
     val visible = generatorContext.workspace.views.hasDeploymentViews(softwareSystem)
+    val diagramIndex = DiagramIndexViewModel(diagrams, emptyList())
 }

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

@@ -11,4 +11,5 @@ class SoftwareSystemDynamicPageViewModel(generatorContext: GeneratorContext, sof
         .sortedBy { it.key }
         .map { DiagramViewModel.forView(this, it, generatorContext.svgFactory) }
     val visible = generatorContext.workspace.views.hasDynamicViews(softwareSystem)
+    val diagramIndex = DiagramIndexViewModel(diagrams, emptyList())
 }

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

@@ -168,7 +168,7 @@ fun Element.transformEmbeddedDiagramElements(
         val key = it.attr("src").substring(embedPrefix.length)
         val name = it.attr("alt").ifBlank { key }
         val html = createHTML().div {
-            diagram(DiagramViewModel.forView(pageViewModel, key, name, null, svgFactory))
+            diagram(DiagramViewModel.forView(pageViewModel, key, name, null, null, svgFactory))
         }
 
         it.parent()?.append(html)

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

@@ -10,7 +10,7 @@ fun FlowContent.diagram(viewModel: DiagramViewModel) {
 
         figure {
             style = "width: min(100%, ${viewModel.diagramWidthInPixels}px);"
-
+            attributes["id"] = viewModel.key
             rawHtml(viewModel.svg)
             figcaption {
                 a {

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

@@ -0,0 +1,28 @@
+package nl.avisi.structurizr.site.generatr.site.views
+
+import kotlinx.html.*
+import nl.avisi.structurizr.site.generatr.site.model.DiagramIndexViewModel
+
+fun FlowContent.diagramIndex(viewModel: DiagramIndexViewModel) {
+    if(viewModel.visible) {
+        h6 {
+            +"Jump to: "
+        }
+        ul {
+            viewModel.diagrams.forEach {
+                li {
+                    a(href = "#${it.key}") {
+                        +(it.title ?: it.name)
+                    }
+                }
+            }
+            viewModel.images.forEach {
+                li {
+                    a(href = "#${it.key}") {
+                        +it.title
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -8,7 +8,8 @@ fun FlowContent.image(viewModel: ImageViewViewModel) {
 
     figure {
         style = "width: fit-content;"
-
+        attributes["id"] = viewModel.key
+
         p(classes = "has-text-weight-bold") { +viewModel.title }
         img { src = viewModel.content }
         figcaption {

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

@@ -29,6 +29,7 @@ fun HTML.softwareSystemContainerComponentCodePage(viewModel: SoftwareSystemConta
                         }
                 }
             }
+            diagramIndex(viewModel.diagramIndex)
             viewModel.images.forEach { image(it) }
         }
     } else

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

@@ -16,6 +16,7 @@ fun HTML.softwareSystemContainerComponentsPage(viewModel: SoftwareSystemContaine
                         }
                 }
             }
+            diagramIndex(viewModel.diagramIndex)
             viewModel.diagrams.forEach { diagram(it) }
             viewModel.images.forEach { image(it) }
 

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

@@ -6,6 +6,7 @@ import nl.avisi.structurizr.site.generatr.site.model.SoftwareSystemContainerPage
 fun HTML.softwareSystemContainerPage(viewModel: SoftwareSystemContainerPageViewModel) {
     if (viewModel.visible)
         softwareSystemPage(viewModel) {
+            diagramIndex(viewModel.diagramIndex)
             viewModel.diagrams.forEach { diagram(it) }
             viewModel.images.forEach { image(it) }
         }

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

@@ -6,9 +6,8 @@ import nl.avisi.structurizr.site.generatr.site.model.SoftwareSystemContextPageVi
 fun HTML.softwareSystemContextPage(viewModel: SoftwareSystemContextPageViewModel) {
     if (viewModel.visible)
         softwareSystemPage(viewModel) {
-            viewModel.diagrams.forEach {
-                diagram(it)
-            }
+            diagramIndex(viewModel.diagramIndex)
+            viewModel.diagrams.forEach { diagram(it) }
         }
     else
         redirectUpPage()

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

@@ -6,9 +6,8 @@ import nl.avisi.structurizr.site.generatr.site.model.SoftwareSystemDeploymentPag
 fun HTML.softwareSystemDeploymentPage(viewModel: SoftwareSystemDeploymentPageViewModel) {
     if (viewModel.visible)
         softwareSystemPage(viewModel) {
-            viewModel.diagrams.forEach {
-                diagram(it)
-            }
+            diagramIndex(viewModel.diagramIndex)
+            viewModel.diagrams.forEach { diagram(it) }
         }
     else
         redirectUpPage()

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

@@ -6,9 +6,8 @@ import nl.avisi.structurizr.site.generatr.site.model.SoftwareSystemDynamicPageVi
 fun HTML.softwareSystemDynamicPage(viewModel: SoftwareSystemDynamicPageViewModel) {
     if (viewModel.visible)
         softwareSystemPage(viewModel) {
-            viewModel.diagrams.forEach {
-                diagram(it)
-            }
+            diagramIndex(viewModel.diagramIndex)
+            viewModel.diagrams.forEach { diagram(it) }
         }
     else
         redirectUpPage()

src/test/kotlin/nl/avisi/structurizr/site/generatr/site/model/AsciidocToHtmlTest.kt

@@ -206,7 +206,7 @@ class AsciidocToHtmlTest : ViewModelTest() {
             <div class="imageblock content">
              <div class="content">
               <div>
-               <figure style="width: min(100%, 800px);">
+               <figure style="width: min(100%, 800px);" id="SystemLandscape">
                 <div>
                  <svg viewBox="0 0 800 900"></svg>
                 </div>

src/test/kotlin/nl/avisi/structurizr/site/generatr/site/model/MarkdownToHtmlTest.kt

@@ -288,7 +288,7 @@ class MarkdownToHtmlTest : ViewModelTest() {
             """
                 <p>
                  <div>
-                  <figure style="width: min(100%, 800px);">
+                  <figure style="width: min(100%, 800px);" id="SystemLandscape">
                    <div>
                     <svg viewBox="0 0 800 900"></svg>
                    </div>

src/test/kotlin/nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemContainerComponentCodePageViewModelTest.kt

@@ -107,4 +107,18 @@ class SoftwareSystemContainerComponentCodePageViewModelTest : ViewModelTest() {
 
         assertThat(viewModel.visible).isFalse()
     }
+
+    @Test
+    fun `no index`() {
+        val viewModel = SoftwareSystemContainerComponentCodePageViewModel(generatorContext, backendContainer, backendComponent)
+        assertThat(viewModel.diagramIndex.visible).isFalse()
+    }
+
+    @Test
+    fun `index visible`() {
+        createImageView(generatorContext.workspace, backendComponent, "other-imageview")
+        val viewModel = SoftwareSystemContainerComponentCodePageViewModel(generatorContext, backendContainer, backendComponent)
+
+        assertThat(viewModel.diagramIndex.visible).isTrue()
+    }
 }

src/test/kotlin/nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemContainerComponentsPageViewModelTest.kt

@@ -72,6 +72,7 @@ class SoftwareSystemContainerComponentsPageViewModelTest : ViewModelTest() {
             DiagramViewModel(
                 "component-1-backend",
                 "Software system - Backend - Components",
+                null,
                 "Component view 1 - Backend",
                 """<svg viewBox="0 0 800 900"></svg>""",
                 800,
@@ -82,6 +83,7 @@ class SoftwareSystemContainerComponentsPageViewModelTest : ViewModelTest() {
             DiagramViewModel(
                 "component-2-backend",
                 "Software system - Backend - Components",
+                null,
                 "Component view 2 - Backend",
                 """<svg viewBox="0 0 800 900"></svg>""",
                 800,
@@ -97,6 +99,7 @@ class SoftwareSystemContainerComponentsPageViewModelTest : ViewModelTest() {
             DiagramViewModel(
                 "component-1-frontend",
                 "Software system - Frontend - Components",
+                null,
                 "Component view 1 - Frontend",
                 """<svg viewBox="0 0 800 900"></svg>""",
                 800,
@@ -107,6 +110,7 @@ class SoftwareSystemContainerComponentsPageViewModelTest : ViewModelTest() {
             DiagramViewModel(
                 "component-2-frontend",
                 "Software system - Frontend - Components",
+                null,
                 "Component view 2 - Frontend",
                 """<svg viewBox="0 0 800 900"></svg>""",
                 800,
@@ -144,4 +148,10 @@ class SoftwareSystemContainerComponentsPageViewModelTest : ViewModelTest() {
         val viewModel = SoftwareSystemContainerComponentsPageViewModel(generatorContext, softwareSystem.addContainer("Container"))
         assertThat(viewModel.visible).isFalse()
     }
+
+    @Test
+    fun `has index`() {
+        val viewModel = SoftwareSystemContainerComponentsPageViewModel(generatorContext, backendContainer)
+        assertThat(viewModel.diagramIndex.visible).isTrue()
+    }
 }

src/test/kotlin/nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemContainerPageViewModelTest.kt

@@ -35,6 +35,7 @@ class SoftwareSystemContainerPageViewModelTest : ViewModelTest() {
             DiagramViewModel(
                 "container-1",
                 "Software system - Containers",
+                null,
                 "Container view 1",
                 """<svg viewBox="0 0 800 900"></svg>""",
                 800,
@@ -45,6 +46,7 @@ class SoftwareSystemContainerPageViewModelTest : ViewModelTest() {
             DiagramViewModel(
                 "container-2",
                 "Software system - Containers",
+                null,
                 "Container view 2",
                 """<svg viewBox="0 0 800 900"></svg>""",
                 800,
@@ -73,4 +75,10 @@ class SoftwareSystemContainerPageViewModelTest : ViewModelTest() {
 
         assertThat(viewModel.visible).isFalse()
     }
+
+    @Test
+    fun `has index`() {
+        val viewModel = SoftwareSystemContainerPageViewModel(generatorContext, softwareSystem)
+        assertThat(viewModel.diagramIndex.visible).isTrue()
+    }
 }

src/test/kotlin/nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemContextPageViewModelTest.kt

@@ -3,6 +3,7 @@ package nl.avisi.structurizr.site.generatr.site.model
 import assertk.assertThat
 import assertk.assertions.containsExactly
 import assertk.assertions.isFalse
+import assertk.assertions.isTrue
 import com.structurizr.model.SoftwareSystem
 import kotlin.test.Test
 
@@ -22,6 +23,7 @@ class SoftwareSystemContextPageViewModelTest : ViewModelTest() {
             DiagramViewModel(
                 "context-1",
                 "Software system - System Context",
+                null,
                 "System context view 1",
                 """<svg viewBox="0 0 800 900"></svg>""",
                 800,
@@ -32,6 +34,7 @@ class SoftwareSystemContextPageViewModelTest : ViewModelTest() {
             DiagramViewModel(
                 "context-2",
                 "Software system - System Context",
+                null,
                 "System context view 2",
                 """<svg viewBox="0 0 800 900"></svg>""",
                 800,
@@ -51,4 +54,10 @@ class SoftwareSystemContextPageViewModelTest : ViewModelTest() {
 
         assertThat(viewModel.visible).isFalse()
     }
+
+    @Test
+    fun `has index`() {
+        val viewModel = SoftwareSystemContextPageViewModel(generatorContext, softwareSystem)
+        assertThat(viewModel.diagramIndex.visible).isTrue()
+    }
 }

src/test/kotlin/nl/avisi/structurizr/site/generatr/site/model/SoftwareSystemDeploymentPageViewModelTest.kt

@@ -4,6 +4,7 @@ import assertk.assertThat
 import assertk.assertions.containsExactly
 import assertk.assertions.isEqualTo
 import assertk.assertions.isFalse
+import assertk.assertions.isTrue
 import com.structurizr.model.SoftwareSystem
 import kotlin.test.Test
 
@@ -31,6 +32,7 @@ class SoftwareSystemDeploymentPageViewModelTest : ViewModelTest() {
             DiagramViewModel(
                 "deployment-1",
                 "Software system - Deployment - Default",
+                null,
                 "Deployment view 1",
                 """<svg viewBox="0 0 800 900"></svg>""",
                 800,
@@ -41,6 +43,7 @@ class SoftwareSystemDeploymentPageViewModelTest : ViewModelTest() {
             DiagramViewModel(
                 "deployment-2",
                 "Software system - Deployment - Default",
+                null,
                 "Deployment view 2",
                 """<svg viewBox="0 0 800 900"></svg>""",
                 800,
@@ -60,4 +63,10 @@ class SoftwareSystemDeploymentPageViewModelTest : ViewModelTest() {
 
         assertThat(viewModel.visible).isFalse()
     }
+
+    @Test
+    fun `has index`() {
+        val viewModel = SoftwareSystemDeploymentPageViewModel(generatorContext, softwareSystem)
+        assertThat(viewModel.diagramIndex.visible).isTrue()
+    }
 }