Nhsuk styling (#1)

* Rework styling to incorporate nhsuk styling

* Resolve styling issues

* Updates to reference nhsdigital container registry

Author: LeeGathercole

.github/workflows/pr.yml

@@ -55,8 +55,8 @@ jobs:
           file: ./Dockerfile
           platforms: linux/amd64,linux/arm64/v8
           tags: |
-            ghcr.io/avisi-cloud/${{ env.IMAGE_NAME }}:${{ env.VERSION }}
-            ghcr.io/avisi-cloud/${{ env.IMAGE_NAME }}:latest
+            ghcr.io/nhsdigital/${{ env.IMAGE_NAME }}:${{ env.VERSION }}
+            ghcr.io/nhsdigital/${{ env.IMAGE_NAME }}:latest
           labels: |
             org.opencontainers.image.title=${{ github.event.repository.name }}
             org.opencontainers.image.description=${{ github.event.repository.description }}

.github/workflows/release.yml

@@ -72,8 +72,8 @@ jobs:
           file: ./Dockerfile
           platforms: linux/amd64,linux/arm64/v8
           tags: |
-            ghcr.io/avisi-cloud/${{ env.IMAGE_NAME }}:${{ github.ref_name }}
-            ghcr.io/avisi-cloud/${{ env.IMAGE_NAME }}:latest
+            ghcr.io/nhsdigital/${{ env.IMAGE_NAME }}:${{ github.ref_name }}
+            ghcr.io/nhsdigital/${{ env.IMAGE_NAME }}:latest
           labels: |
             org.opencontainers.image.title=${{ github.event.repository.name }}
             org.opencontainers.image.description=${{ github.event.repository.description }}
@@ -83,20 +83,20 @@ jobs:
             org.opencontainers.image.version=${{ github.ref_name }}
       - name: sign container image
         run: |
-          cosign sign --yes --key env://COSIGN_KEY ghcr.io/avisi-cloud/${{ env.IMAGE_NAME }}:${{ github.ref_name }}@${{ steps.build_push.outputs.digest }}
+          cosign sign --yes --key env://COSIGN_KEY ghcr.io/nhs-digital/${{ env.IMAGE_NAME }}:${{ github.ref_name }}@${{ steps.build_push.outputs.digest }}
         shell: bash
         env:
           COSIGN_KEY: ${{secrets.COSIGN_KEY}}
           COSIGN_PASSWORD: ${{secrets.COSIGN_PASSWORD}}
 
       - name: Check images
         run: |
-          docker buildx imagetools inspect ghcr.io/avisi-cloud/${IMAGE_NAME}:${{ github.ref_name }}
-          docker pull ghcr.io/avisi-cloud/${IMAGE_NAME}:${{ github.ref_name }}
-          cosign verify --key cosign.pub ghcr.io/avisi-cloud/${IMAGE_NAME}:${{ github.ref_name }}
+          docker buildx imagetools inspect ghcr.io/nhsdigital/${IMAGE_NAME}:${{ github.ref_name }}
+          docker pull ghcr.io/nhsdigital/${IMAGE_NAME}:${{ github.ref_name }}
+          cosign verify --key cosign.pub ghcr.io/nhsdigital/${IMAGE_NAME}:${{ github.ref_name }}
       - uses: anchore/sbom-action@v0
         with:
-          image: ghcr.io/avisi-cloud/${{ env.IMAGE_NAME }}:${{ github.ref_name }}
+          image: ghcr.io/nhsdigital/${{ env.IMAGE_NAME }}:${{ github.ref_name }}
 
   create-draft-release:
     runs-on: ubuntu-latest
@@ -122,57 +122,3 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: gh release upload ${{ github.ref_name }} ./build/distributions/*
-
-  generate-example-site:
-    runs-on: ubuntu-latest
-    needs: build-gradle
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - uses: actions/setup-java@v4
-        with:
-          distribution: temurin
-          java-version: 21
-
-      - name: Download binaries
-        uses: actions/download-artifact@v4
-        with:
-          name: binaries
-          path: build/install
-
-      - name: Set up environment
-        run: |
-          sudo apt-get install -y graphviz
-          chmod +x build/install/structurizr-site-generatr/bin/structurizr-site-generatr
-
-      - name: Generate example site
-        run: >
-          build/install/structurizr-site-generatr/bin/structurizr-site-generatr generate-site
-          --git-url https://github.com/avisi-cloud/structurizr-site-generatr.git
-          --workspace-file docs/example/workspace.dsl
-          --assets-dir docs/example/assets
-          --branches main
-          --default-branch main
-          --version ${{ github.ref_name }}
-
-      - name: Upload example site as GitHub Pages artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: ./build/site
-
-  publish-example-site:
-    runs-on: ubuntu-latest
-    needs: generate-example-site
-
-    permissions:
-      pages: write
-      id-token: write
-
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-
-    steps:
-      - name: Deploy example site to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4

README.md

@@ -100,14 +100,14 @@ Then to download our packaged image, consider the
 the version you wish to use. Then, in your terminal, execute the following:
 
 ```shell
-docker pull ghcr.io/avisi-cloud/structurizr-site-generatr
+docker pull ghcr.io/nhsdigital/structurizr-site-generatr
 ```
 
 Once downloaded, you can execute Structurizr Site Generatr via a temporary Docker container by executing the
 following in your terminal:
 
 ```shell
-docker run -it --rm ghcr.io/avisi-cloud/structurizr-site-generatr --help
+docker run -it --rm ghcr.io/nhsdigital/structurizr-site-generatr --help
 ```
 
 #### [Optional] Verify the Structurizr Site Generatr image with [CoSign](https://github.com/sigstore/cosign)
@@ -118,13 +118,13 @@ cat cosign.pub
 MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEzezKl0vAWSHosQ0JLEsDzNBd2nGm
 08KqX+imYqq2avlbH+ehprJFMqKK0/I/bY0q5W9hQC8SLzTRJ9Q5dB9UiQ==
 -----END PUBLIC KEY-----
-cosign verify --key cosign.pub ghcr.io/avisi-cloud/structurizr-site-generatr
+cosign verify --key cosign.pub ghcr.io/nhsdigital/structurizr-site-generatr
 ```
 
 Or by using the Github repo url:
 
 ```shell
- cosign verify --key https://github.com/avisi-cloud/structurizr-site-generatr ghcr.io/avisi-cloud/structurizr-site-generatr
+ cosign verify --key https://github.com/nhsdigital/structurizr-site-generatr ghcr.io/avisi-cloud/structurizr-site-generatr
  ```
 
 ## Usage
@@ -142,7 +142,7 @@ To learn about available commands, or parameters for individual commands, call S
 ```shell
 installed> structurizr-site-generatr --help
 
-   docker> docker run -it --rm ghcr.io/avisi-cloud/structurizr-site-generatr --help
+   docker> docker run -it --rm ghcr.io/nhsdigital/structurizr-site-generatr --help
 
 Usage: structurizr-site-generatr options_list
 Subcommands:
@@ -161,7 +161,7 @@ To query the version of Structurizr Site Generatr installed / used.
 ```shell
 installed> structurizr-site-generatr version
 
-   docker> docker run -it --rm ghcr.io/avisi-cloud/structurizr-site-generatr version
+   docker> docker run -it --rm ghcr.io/nhsdigital/structurizr-site-generatr version
 
 Structurizr Site Generatr v1.1.3
 ```
@@ -176,7 +176,7 @@ This is the primary use case of Structurizr Site Generatr -- to generate a websi
 ```shell
 installed> structurizr-site-generatr generate-site --workspace-file workspace.dsl --assets-dir assets
 
-   docker> docker run -it --rm -v c:/projects/c4:/var/model ghcr.io/avisi-cloud/structurizr-site-generatr generate-site --workspace-file workspace.dsl --assets-dir assets
+   docker> docker run -it --rm -v c:/projects/c4:/var/model ghcr.io/nhsdigital/structurizr-site-generatr generate-site --workspace-file workspace.dsl --assets-dir assets
 ```
 
 Here, the `--workspace-file` or `-w` parameter specifies the input
@@ -204,7 +204,7 @@ To explicitly name the branches that you want to build sites from you can use th
 
 ```shell
 structurizr-site-generatr generate-site
-    --git-url https://github.com/avisi-cloud/structurizr-site-generatr.git
+    --git-url https://github.com/nhsdigital/structurizr-site-generatr.git
     --workspace-file docs/example/workspace.dsl
     --assets-dir docs/example/assets
     --branches main,future,old
@@ -215,7 +215,7 @@ or you can choose to build all branches that are found in the repository and exc
 
 ```shell
 structurizr-site-generatr generate-site
-    --git-url https://github.com/avisi-cloud/structurizr-site-generatr.git
+    --git-url https://github.com/nhsdigital/structurizr-site-generatr.git
     --workspace-file docs/example/workspace.dsl
     --assets-dir docs/example/assets
     --all-branches
@@ -235,7 +235,7 @@ web server can be reviewed using the `--help` operator.
 ```shell
 installed> structurizr-site-generatr serve -w workspace.dsl
 
-   docker> docker run -it --rm -v c:/projects/c4:/var/model -p 8080:8080 ghcr.io/avisi-cloud/structurizr-site-generatr serve --workspace-file workspace.dsl --assets-dir assets
+   docker> docker run -it --rm -v c:/projects/c4:/var/model -p 8080:8080 ghcr.io/nhsdigital/structurizr-site-generatr serve --workspace-file workspace.dsl --assets-dir assets
 ```
 
 By default, a development web server will be started and accessible at http://localhost:8080/ (if available).

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

@@ -14,7 +14,7 @@ class SoftwareSystemHomePageViewModel(generatorContext: GeneratorContext, softwa
     private fun SoftwareSystem.info() = documentation.sections
         .minByOrNull { it.order }
         ?.content
-        ?: "# Description${System.lineSeparator()}${description}"
+        ?: "### Description${System.lineSeparator()}${description}"
 
     private fun SoftwareSystem.format() = documentation.sections
         .minByOrNull { it.order }

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

@@ -3,7 +3,7 @@ package nl.avisi.structurizr.site.generatr.site.views
 import kotlinx.html.*
 
 fun DIV.contentDiv(block: DIV.() -> Unit) {
-    div(classes = "content p-3") {
+    div() {
         block()
     }
 }

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

@@ -8,12 +8,12 @@ fun FlowContent.diagram(viewModel: DiagramViewModel) {
         val dialogId = "${viewModel.key}-modal"
         val svgId = "${viewModel.key}-svg"
 
-        figure {
+        figure ("nhsuk-image") {
             style = "width: min(100%, ${viewModel.diagramWidthInPixels}px);"
             attributes["id"] = viewModel.key
             rawHtml(viewModel.svg)
-            figcaption {
-                a {
+            figcaption ("nhsuk-image__caption") {
+                a{
                     onClick = "openSvgModal('$dialogId', '$svgId')"
                     +viewModel.title
                     if (!viewModel.description.isNullOrBlank()) {
@@ -37,6 +37,7 @@ fun FlowContent.diagram(viewModel: DiagramViewModel) {
                 +"]"
             }
         }
+
     } else
         div(classes = "notification is-danger") {
             +"No view with key"

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

@@ -2,6 +2,7 @@ package nl.avisi.structurizr.site.generatr.site.views
 
 import kotlinx.html.*
 import nl.avisi.structurizr.site.generatr.site.model.HomePageViewModel
+import java.io.Console
 
 fun HTML.homePage(viewModel: HomePageViewModel) {
     page(viewModel) {

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

@@ -6,25 +6,19 @@ import nl.avisi.structurizr.site.generatr.site.model.ImageViewViewModel
 fun FlowContent.image(viewModel: ImageViewViewModel) {
     val dialogId = "${viewModel.key}-modal"
 
-    figure {
+    figure ("nhsuk-image") {
         style = "width: fit-content;"
         attributes["id"] = viewModel.key
 
         p(classes = "has-text-weight-bold") { +viewModel.title }
-        img { src = viewModel.content }
-        figcaption {
-            a {
-                onClick = "openModal('$dialogId')"
-                +viewModel.title
-                if (!viewModel.description.isNullOrBlank()) {
-                    br
-                    +viewModel.description
-                }
+        img("nhsuk-image__img") { src = viewModel.content }
+        figcaption ("nhsuk-image__caption") {
+            +viewModel.title
+            if (!viewModel.description.isNullOrBlank()) {
+                br
+                +viewModel.description
             }
+
         }
     }
-    modal(dialogId) {
-        img(classes = "modal-box-content modal-image") { src = viewModel.content }
-        div(classes = "has-text-centered") { +viewModel.title }
-    }
 }

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

@@ -6,8 +6,8 @@ import nl.avisi.structurizr.site.generatr.site.model.LinkViewModel
 
 fun FlowOrPhrasingContent.link(viewModel: LinkViewModel, classes: String = "") {
     a(
-        href = viewModel.relativeHref,
-        classes = "$classes ${if (viewModel.active) "is-active" else ""}".trim()
+            href = viewModel.relativeHref,
+            classes = "$classes ${if (viewModel.active) "is-active" else ""}".trim()
     ) {
         +viewModel.title
     }

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

@@ -6,33 +6,33 @@ import nl.avisi.structurizr.site.generatr.site.model.MenuNodeViewModel
 import nl.avisi.structurizr.site.generatr.site.model.MenuViewModel
 
 fun DIV.menu(viewModel: MenuViewModel, nestGroups: Boolean) {
-    aside(classes = "menu p-3") {
+    nav(){
         generalSection(viewModel.generalItems)
         softwareSystemsSection(viewModel, nestGroups)
     }
 }
 
-private fun ASIDE.generalSection(items: List<LinkViewModel>) {
-    p(classes = "menu-label") { +"General" }
+private fun NAV.generalSection(items: List<LinkViewModel>) {
+    h2("app-side-nav__heading") { +"General" }
     menuItemLinks(items)
 }
 
-private fun ASIDE.softwareSystemsSection(viewModel: MenuViewModel, nestGroups: Boolean) {
-    p(classes = "menu-label") { +"Software systems" }
+private fun NAV.softwareSystemsSection(viewModel: MenuViewModel, nestGroups: Boolean) {
+    h2("app-side-nav__heading") { +"Software systems" }
     if (nestGroups) {
-        ul(classes = "listree menu-list has-site-branding") {
+        ul(classes = "nhsuk-list app-side-nav__list") {
             buildHtmlTree(viewModel.softwareSystemNodes(), viewModel).invoke(this)
         }
     } else {
         menuItemLinks(viewModel.softwareSystemItems)
     }
 }
 
-private fun ASIDE.menuItemLinks(items: List<LinkViewModel>) {
-    ul(classes = "menu-list has-site-branding") {
-        li {
-            items.forEach {
-                link(it)
+private fun NAV.menuItemLinks(items: List<LinkViewModel>) {
+    ul(classes = "nhsuk-list app-side-nav__list") {
+        items.forEach {
+            li(classes="app-side-nav__item " + if (it.active) "app-side-nav__item--current" else "")  {
+                link(it, "app-side-nav__link")
             }
         }
     }