init

layouts/partials/autotooltips.html

@@ -0,0 +1,26 @@
+{{- $page := . -}}
+{{- $html := $page.Content -}}
+
+{{- $items := site.Data.tooltips.items -}}
+
+{{/* 1: placeholders zetten */}}
+{{- range $name, $cfg := $items }}
+  {{- $label := $cfg.label -}}
+  {{- $placeholder := printf "__TOOLTIP_%s__" $name -}}
+  {{- $pattern := printf `\b%s\b` $label -}}
+  {{- $html = replaceRE $pattern $placeholder $html -}}
+{{- end }}
+
+{{/* 2: placeholders vervangen door tooltip-woord */}}
+{{- range $name, $cfg := $items }}
+  {{- $label := $cfg.label -}}
+  {{- $key := $cfg.key -}}
+  {{- $text := i18n $key -}}
+  {{- $placeholder := printf "__TOOLTIP_%s__" $name -}}
+
+  {{- $replacement := printf `<span class="tooltip-word" data-tooltip="%s">%s</span>` $text $label -}}
+
+  {{- $html = replace $html $placeholder $replacement -}}
+{{- end }}
+
+{{- $html | safeHTML -}}

layouts/partials/page-transition.html

@@ -0,0 +1,98 @@
+<style>
+  :root{
+    --wipe-duration: .2s;
+    --wipe-ease: cubic-bezier(.22,.61,.36,1);
+    --wipe-color: #fff;
+  }
+
+  .wipe-overlay{
+    position: fixed; inset: 0;
+    background: var(--wipe-color);
+    z-index: 2147483647;
+    pointer-events: none;
+    transform: translateX(0);
+    transition: transform var(--wipe-duration) ease-in-out;
+  }
+
+  .wipe-overlay.no-trans{ transition: none; }
+
+  /* Tijdens reveal: schuif naar rechts uit beeld */
+  .wipe-overlay.is-revealing{ transform: translateX(100%); }
+
+  /* Bij binnenkomen nieuwe pagina: start links buiten beeld, schuif naar binnen */
+  .wipe-overlay.pre-enter{ transform: translateX(-100%); }
+  .wipe-overlay.is-covering{ transform: translateX(0); }
+
+  @media (prefers-reduced-motion: reduce){
+    .wipe-overlay{
+      transition: none !important;
+      transform: translateX(100%) !important;
+    }
+  }
+</style>
+
+<div class="wipe-overlay no-trans" id="wipe"></div>
+
+<script>
+(function () {
+  var wipe = document.getElementById('wipe');
+  if (!wipe) return;
+
+  function startReveal(){
+    wipe.classList.remove('no-trans');
+    requestAnimationFrame(function(){
+      wipe.classList.add('is-revealing');
+    });
+  }
+
+  window.addEventListener('pageshow', function () {
+    wipe.classList.add('no-trans');
+    wipe.classList.remove('pre-enter','is-covering','is-revealing');
+    requestAnimationFrame(startReveal);
+  });
+
+  function normPath(p){
+    if (!p) return '/';
+    p = p.replace(/\/index\.html?$/i, '/').replace(/\/+$/,'/');
+    return p || '/';
+  }
+
+  document.addEventListener('click', function (e) {
+    if (e.defaultPrevented) return;
+
+    var a = e.target.closest && e.target.closest('a');
+    if (!a) return;
+
+    var here = new URL(window.location.href);
+    var url  = new URL(a.href, here);
+
+    if (url.origin !== here.origin) return;
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+    if (a.target === '_blank' || a.hasAttribute('download')) return;
+
+    var samePath   = normPath(url.pathname) === normPath(here.pathname);
+    var sameSearch = url.search === here.search;
+
+    if (samePath && sameSearch) {
+      return;
+    }
+
+    e.preventDefault();
+
+    wipe.classList.add('no-trans');
+    wipe.classList.remove('is-revealing','is-covering');
+    wipe.classList.add('pre-enter');
+    void wipe.offsetHeight;
+
+    wipe.classList.remove('no-trans');
+    wipe.classList.remove('pre-enter');
+    wipe.classList.add('is-covering');
+
+    var go = function () {
+      wipe.removeEventListener('transitionend', go);
+      window.location.href = a.href;
+    };
+    wipe.addEventListener('transitionend', go);
+  }, { capture: true });
+})();
+</script>

layouts/partials/status-icon.html

@@ -0,0 +1,3 @@
+{{- $status := . -}}
+{{- $color := cond (eq $status "positive") "text-green-600" (cond (eq $status "neutral") "text-amber-500" "text-red-600") -}}
+<i class="fa-solid fa-house {{ $color }}"></i>

layouts/partials/town-status-icon.html

@@ -0,0 +1,14 @@
+{{/* 
+  Input: dict "status" "positive|neutral|negative" "icon" "fa-house" "title" "Mantelzorgwoning"
+*/}}
+
+{{- $status := .status -}}
+{{- $icon := .icon -}}
+{{- $title := .title -}}
+
+{{- $color := cond (eq $status "positive") "text-success" (cond (eq $status "neutral") "text-warning" "text-danger") -}}
+
+<div class="d-flex align-items-center mb-2">
+  <i class="fas {{ $icon }} me-2 {{ $color }}" aria-hidden="true"></i>
+  <span class="status-label">{{ $title }}</span>
+</div>