Structurizr files to hugo

.github/workflows/preview.yml

@@ -69,7 +69,11 @@ jobs:
 
       - name: Build site
         if: github.event.action != 'closed'
-        run: hugo --minify --baseURL "${{ steps.gh_pages_url.outputs.url }}"
+        run: |
+          chmod +x setup-dev.sh
+          ./setup-dev.sh
+          docker run --rm -v $(pwd)/structurizr:/usr/local/structurizr -v $(pwd)/static/diagrammen:/out structurizr/cli export --workspace workspace.dsl --format static --output /out
+          hugo --minify --baseURL "${{ steps.gh_pages_url.outputs.url }}"
 
       - name: Override robots.txt (disallow indexing)
         if: github.event.action != 'closed'

.gitignore

@@ -3,6 +3,11 @@ public
 resources
 tmp
 .hugo_build.lock
+.generated
+
+# Structurizr
+structurizr/diagrammen/
+static/diagrammen/
 
 # Editors
 .vscode/*

Containerfile

@@ -1,15 +1,28 @@
+FROM structurizr/cli:latest AS structurizr-export
+
+WORKDIR /usr/local/structurizr
+COPY structurizr/ ./
+
+RUN /usr/local/structurizr-cli/structurizr.sh export --workspace workspace.dsl --format static --output /out/diagrammen
+
 FROM alpine:3.21 AS builder
 
 ARG HUGO_VERSION=0.154.4
 
-RUN apk add --no-cache wget \
+RUN apk add --no-cache wget bash dos2unix \
     && wget -O hugo.tar.gz https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_linux-amd64.tar.gz \
     && tar -xzf hugo.tar.gz -C /usr/local/bin \
     && rm hugo.tar.gz
 
 WORKDIR /app
 COPY . .
 
+RUN dos2unix setup-dev.sh \
+    && chmod +x setup-dev.sh \
+    && ./setup-dev.sh
+
+COPY --from=structurizr-export /out/diagrammen /app/static/diagrammen
+
 ARG BASE_URL
 RUN if [ -n "$BASE_URL" ]; then \
       hugo --minify --baseURL "$BASE_URL"; \

README.md

@@ -18,18 +18,28 @@ Of volg de installatie-instructies voor [Hugo](https://gohugo.io/installation/)
 
 ### Development server starten
 
-```bash
+```
 just up
 ```
 
 Of direct met Hugo:
-
-```bash
-hugo server
+```
+bash
+./setup-dev.sh && hugo server
 ```
 
 De site is dan beschikbaar op [http://localhost:1313/](http://localhost:1313/) (of de host zoals vermeld in de terminal).
 
+
+#### Diagrammen
+Om C4 diagrammen in te laden en te gebruiken binnen dit project run het volgende commando:
+```
+docker run -it --rm -v $PWD/structurizr:/usr/local/structurizr structurizr/cli export --workspace workspace.dsl --format static --output ./diagrammen
+mkdir -p static/diagrammen/ && cp -r structurizr/diagrammen/* ./static/diagrammen/
+```
+Vervolgens kan je 
+`./setup-dev.sh && hugo server` weer draaien.
+
 ## Content toevoegen
 
 ### Weekly

assets/css/base.css

@@ -181,3 +181,12 @@ nav a {
     text-decoration: underline;
   }
 }
+
+.docs {
+  table {
+    float: left;
+    text-align: left;
+  padding-bottom: 2rem;
+    min-width: 100%;
+  }
+}

assets/css/components/card-grid.css

@@ -24,6 +24,7 @@
     img {
       height: 2.5rem;
       object-fit: contain;
+      width: 2.5rem;
     }
 
     h2 {

assets/css/layout.css

@@ -38,6 +38,7 @@ main > .content {
   max-width: var(--content-max-width);
   margin-left: auto;
   margin-right: auto;
+  width: 100%;
 }
 
 main > section,
@@ -47,10 +48,35 @@ main > .content {
   padding-top: 0;
 }
 
+main .content img {
+  max-width: 100%;
+  height: auto;
+}
+
+#main-content section img {
+  max-width: 100%;
+  height: auto;
+}
+
 main > article {
+  width: 100%;
   > * {
     max-width: var(--article-max-width);
   }
+
+  > .content {
+    max-width: 100%;
+
+    > * {
+      max-width: var(--article-max-width);
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    > :is(iframe, img) {
+      max-width: 100%;
+    }
+  }
 }
 
 /* Sidebar layout - grid met hoofdcontent en zijbalk */
@@ -82,10 +108,6 @@ body:has(main > .article-layout) .breadcrumb {
 
 /* Artikel met inhoudsopgave (TOC) */
 main:has(.toc) {
-  .toc {
-    display: none;
-  }
-
   @media (min-width: 950px) {
     max-width: var(--content-max-width);
     display: grid;
@@ -96,7 +118,6 @@ main:has(.toc) {
     margin: 0 auto;
 
     .toc {
-      display: block;
       position: sticky;
       top: 1rem;
       align-self: start;

content/documentatie/_index.md

@@ -0,0 +1,3 @@
+---
+title: "Documentatie"
+---

content/documentatie/beslissingen/_index.md

@@ -0,0 +1,3 @@
+---
+title: "Beslissingen"
+---

content/documentatie/diagrammen/_index.md

@@ -0,0 +1,6 @@
+---
+title: "Diagrammen"
+---
+Hieron ziet u de structuur van alle system in C4, u kunt op een diagram klikken om meer informatie te krijgen.
+{{< diagram "SysteemLandschap" >}}
+

hugo.yaml

@@ -1,6 +1,19 @@
 title: MijnOverheid Zakelijk
 defaultContentLanguage: nl
 
+module:
+  mounts:
+    - source: content
+      target: content
+    - source: .generated
+      target: content
+    - source: static
+      target: static
+    - source: assets
+      target: assets
+    - source: layouts
+      target: layouts
+
 params:
   description: Bij MijnOverheid Zakelijk staan ondernemers centraal. Elk uur minder aan gedoe, is een uur meer ondernemen. We zorgen voor overzicht en makkelijk zaken doen. Met elkaar bouwen we zo aan nieuwe digitale snelwegen.
 
@@ -38,9 +51,12 @@ menus:
     - name: Onderwerpen
       pageRef: /onderwerpen
       weight: 4
+    - name: Documentatie
+      pageRef: /documentatie
+      weight: 5
     - name: Contact
       pageRef: /contact
-      weight: 5
+      weight: 6
 
   footer:
     - name: Privacy

justfile

@@ -7,14 +7,23 @@ default:
 
 # Start development server
 up:
+    ./setup-dev.sh
+    docker run -it --rm -v $PWD/structurizr:/usr/local/structurizr structurizr/cli export --workspace workspace.dsl --format static --output ./diagrammen
+    mkdir -p static/diagrammen/ && cp -r structurizr/diagrammen/* ./static/diagrammen/
     hugo server
 
 # Bouw de site
 build:
+    ./setup-dev.sh
+    docker run -it --rm -v $PWD/structurizr:/usr/local/structurizr structurizr/cli export --workspace workspace.dsl --format static --output ./diagrammen
+    mkdir -p static/diagrammen/ && cp -r structurizr/diagrammen/* ./static/diagrammen/
     rm -rf public && hugo --minify --gc --logLevel warn
 
 # Controleer op broken links
 check:
+    ./setup-dev.sh
+    docker run -it --rm -v $PWD/structurizr:/usr/local/structurizr structurizr/cli export --workspace workspace.dsl --format static --output ./diagrammen
+    mkdir -p static/diagrammen/ && cp -r structurizr/diagrammen/* ./static/diagrammen/
     rm -rf .htmltest && hugo --minify --quiet --destination .htmltest/public && htmltest && rm -rf .htmltest
 
 # Voer pre-commit checks uit

layouts/_default/_markup/render-image.html

@@ -0,0 +1,2 @@
+{{- $url := .Destination -}}
+<img src="{{ $url | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }}>

layouts/documentatie/IAM/list.html

@@ -0,0 +1,25 @@
+{{ define "main" }}
+<article class="docs">
+  {{ if .Title }}
+  <h1>{{ .Title  | strings.FirstUpper }}</h1>
+  {{ end }}
+
+  <div class="content">{{ .Content }}</div>
+
+</article>
+{{- $toc := .TableOfContents -}}
+{{ if and $toc (ne .Params.toc false) (gt (len (findRE "<li>" $toc)) 0) }}
+  <aside class="toc">
+    <h2>Op deze pagina</h2>
+    {{ $toc }}
+  </aside>
+  {{ end }}
+  {{ end }}
+
+  {{ define "scripts" }}
+  {{- $toc := .TableOfContents -}}
+  {{ if and $toc (ne .Params.toc false) (gt (len (findRE "<li>" $toc)) 0) }}
+  {{ $tocScript := resources.Get "js/toc.js" | fingerprint "md5" }}
+  <script src="{{ $tocScript.RelPermalink }}"></script>
+  {{ end }}
+{{ end }}

layouts/documentatie/beslissingen/list.html

@@ -0,0 +1,31 @@
+{{ define "main" }}
+  <article>
+    <header>
+      <h1>{{.Title}}</h1>
+    </header>
+
+    <table style="max-width: 100%; border-collapse: collapse; margin: 20px 0;">
+      <thead>
+      <tr style="background-color: #f5f5f5; border-bottom: 2px solid #ddd;">
+        <th style="padding: 12px; text-align: left; font-weight: bold;">Beslissing</th>
+        <th style="padding: 12px; text-align: left; font-weight: bold;">Datum</th>
+        <th style="padding: 12px; text-align: left; font-weight: bold;">Status</th>
+      </tr>
+      </thead>
+      <tbody>
+      {{ range .Pages.Reverse }}
+      {{ $content := .RawContent }}
+      {{ $title := index (findRE "(?m)^# .*" $content 1) 0 | replaceRE "^# " "" }}
+      {{ $date := index (findRE "(?m)^Date: .*" $content 1) 0 | replaceRE "^Date: " "" }}
+      {{ $status := index (findRE "(?s)## Status\\s+\\w+" $content 1) 0 | replaceRE "(?s)## Status\\s+" "" }}
+      <tr style="border-bottom: 1px solid #eee;">
+        <td style="padding: 12px;"><a href="{{.Permalink}}" style="color: #0066cc; text-decoration: none;">{{ $title
+          }}</a></td>
+        <td style="padding: 12px;">{{ $date }}</td>
+        <td style="padding: 12px;">{{ $status }}</td>
+      </tr>
+      {{ end }}
+      </tbody>
+    </table>
+  </article>
+{{ end }}

layouts/documentatie/list.html

@@ -0,0 +1,17 @@
+{{ define "main" }}
+<article>
+  {{ if .Title }}
+  <h1>{{ .Title  | strings.FirstUpper }}</h1>
+  {{ end }}
+  <div >{{ .Content }}</div>
+  {{ with .Pages.ByWeight }}
+  <ul>
+    {{ range . }}
+    <li><a href="{{ .RelPermalink }}">{{ .Title | strings.FirstUpper}}</a></li>
+    {{ end }}
+  </ul>
+  {{ end }}
+
+
+</article>
+  {{ end }}

layouts/documentatie/notificatieservice/list.html

@@ -0,0 +1,25 @@
+{{ define "main" }}
+<article class="docs">
+  {{ if .Title }}
+  <h1>{{ .Title  | strings.FirstUpper }}</h1>
+  {{ end }}
+
+  <div class="content">{{ .Content }}</div>
+
+</article>
+{{- $toc := .TableOfContents -}}
+{{ if and $toc (ne .Params.toc false) (gt (len (findRE "<li>" $toc)) 0) }}
+  <aside class="toc">
+    <h2>Op deze pagina</h2>
+    {{ $toc }}
+  </aside>
+  {{ end }}
+  {{ end }}
+
+  {{ define "scripts" }}
+  {{- $toc := .TableOfContents -}}
+  {{ if and $toc (ne .Params.toc false) (gt (len (findRE "<li>" $toc)) 0) }}
+  {{ $tocScript := resources.Get "js/toc.js" | fingerprint "md5" }}
+  <script src="{{ $tocScript.RelPermalink }}"></script>
+  {{ end }}
+{{ end }}

layouts/documentatie/portaal/list.html

@@ -0,0 +1,25 @@
+{{ define "main" }}
+<article class="docs">
+  {{ if .Title }}
+  <h1>{{ .Title  | strings.FirstUpper }}</h1>
+  {{ end }}
+
+  <div class="content">{{ .Content }}</div>
+
+</article>
+{{- $toc := .TableOfContents -}}
+{{ if and $toc (ne .Params.toc false) (gt (len (findRE "<li>" $toc)) 0) }}
+  <aside class="toc">
+    <h2>Op deze pagina</h2>
+    {{ $toc }}
+  </aside>
+  {{ end }}
+  {{ end }}
+
+  {{ define "scripts" }}
+  {{- $toc := .TableOfContents -}}
+  {{ if and $toc (ne .Params.toc false) (gt (len (findRE "<li>" $toc)) 0) }}
+  {{ $tocScript := resources.Get "js/toc.js" | fingerprint "md5" }}
+  <script src="{{ $tocScript.RelPermalink }}"></script>
+  {{ end }}
+{{ end }}