From: Kai Moritz <kai@juplo.de>
Date: Wed, 10 Dec 2025 18:51:38 +0000 (+0100)
Subject: Templating für das Juplo-Layout überarbeitet
X-Git-Tag: frontend--hugo--todo~22
X-Git-Url: https://juplo.de/gitweb/?a=commitdiff_plain;h=cfb033c8409bffc7aa80421da488b43f5f41b484;p=website

Templating für das Juplo-Layout überarbeitet
---

diff --git a/layouts/_partials/breadcrumb.html b/layouts/_partials/breadcrumb.html
new file mode 100644
index 00000000..aeeceb88
--- /dev/null
+++ b/layouts/_partials/breadcrumb.html
@@ -0,0 +1,14 @@
+<div id="breadcrumb">
+  <strong class="b title">You are here:</strong>
+  <ol class="b" th:include="~{::#crumbs}?:_">
+    <li class="b"><a class="b" href="../index.html" th:href="@{/index.html}">Home</a></li>
+    <li class="b" th:each="crumb: ${crumbs}">
+      <a class="b" href="../projects.html" th:href="@{${crumb}}" th:text="${_titles.get(crumb)}">Projects</a>
+    </li>
+    <!--/*-->
+    <li class="b"><strong class="b" th:text="${title}">Fix SWF</strong></li>
+    <!--*/-->
+  </ol>
+  <a class="hide" href="#nav" title="Show navigation menu">Jump to navigation</a>
+  <hr class="b" />
+</div>
diff --git a/layouts/_partials/footer.html b/layouts/_partials/footer.html
index a7cd916d..08fad685 100644
--- a/layouts/_partials/footer.html
+++ b/layouts/_partials/footer.html
@@ -1 +1,8 @@
-<p>Copyright {{ now.Year }}. All rights reserved.</p>
+<footer id="footer">
+  <hr class="f" />
+  <ul id="footerlinks" th:include="~{::#links}?:_">
+    <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
+    <li class="f"><a class="f" href="../impressum.html" th:href="@{/impressum.html}">Impressum</a></li>
+    <li class="f"><a class="f" href="../datenschutz.html" th:href="@{/datenschutz.html}">Datenschutz</a></li>
+  </ul>
+</footer>
diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html
index 7980a00e..78e6631a 100644
--- a/layouts/_partials/header.html
+++ b/layouts/_partials/header.html
@@ -1,2 +1,5 @@
-<h1>{{ site.Title }}</h1>
-{{ partial "menu.html" (dict "menuID" "main" "page" .) }}
+<header id="header"><!-- TODO: Vereinfachung -> für uri == index.html a gegen strong ausstauschen -->
+  <h1 id="logo"><a href="../index.html" th:href="@{/}" title="Home" class="l" ><img class="l" src="/img/logo.svg" alt="juplo"/></a></h1>
+  <span id="slogan"><strong>Java</strong> bits from nerds for nerds</span>
+  <hr class="h" />
+</header>
diff --git a/layouts/_partials/marginalcontent.html b/layouts/_partials/marginalcontent.html
new file mode 100644
index 00000000..94f3697f
--- /dev/null
+++ b/layouts/_partials/marginalcontent.html
@@ -0,0 +1,20 @@
+<aside class="m" th:insert="${marginalcontent}?:~{}">
+<!--/* the following  is only visible during natural templating -->
+  <h1>Other nasty but marginal stuff</h1>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+    ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+    aliquip ex ea commodo consequat. Duis aute irure dolor in
+    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+    culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+</aside>
+<aside class="m">
+  <h1>More nasty stuff</h1>
+  <p>
+    This one is really short!
+  </p>
+<!--*/-->
+</aside>
diff --git a/layouts/_partials/menu.html b/layouts/_partials/menu.html
index 14245b55..a8d39bd1 100644
--- a/layouts/_partials/menu.html
+++ b/layouts/_partials/menu.html
@@ -1,51 +1,77 @@
-{{- /*
-Renders a menu for the given menu ID.
-
-@context {page} page The current page.
-@context {string} menuID The menu ID.
-
-@example: {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
-*/}}
-
 {{- $page := .page }}
 {{- $menuID := .menuID }}
 
-{{- with index site.Menus $menuID }}
-  <nav>
-    <ul>
-      {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
-    </ul>
-  </nav>
-{{- end }}
-
-{{- define "_partials/inline/menu/walk.html" }}
-  {{- $page := .page }}
-  {{- range .menuEntries }}
-    {{- $attrs := dict "href" .URL }}
-    {{- if $page.IsMenuCurrent .Menu . }}
-      {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
-    {{- else if $page.HasMenuCurrent .Menu .}}
-      {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
-    {{- end }}
-    {{- $name := .Name }}
-    {{- with .Identifier }}
-      {{- with T . }}
-        {{- $name = . }}
-      {{- end }}
+<nav id="nav">
+  <hr class="n"/>
+  <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
+  <h1 class="nav">Navigation</h1>
+  <h2 class="nav menu">Section-Menu</h2>
+  <ul id="menu" class="cf">
+    {{- range $page.Site.MainSections }}
+    {{- $section := site.GetPage "section" . }}
+    <li class="m {{ . }}">
+      <a href="{{ $section.RelPermalink }}" class="{{ cond (eq $page.Section .) "m selected" "m" }}">{{ $section.LinkTitle }}</a>
+    </li>
     {{- end }}
-    <li>
-      <a
-        {{- range $k, $v := $attrs }}
-          {{- with $v }}
-            {{- printf " %s=%q" $k $v | safeHTMLAttr }}
-          {{- end }}
-        {{- end -}}
-      >{{ $name }}</a>
-      {{- with .Children }}
-        <ul>
-          {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
-        </ul>
+  </ul>
+  <h2 class="nav submenu">
+    <a class="s selected" href="{{ site.Home.RelPermalink }}">Home</a>
+  </h2>
+  <ul id="submenu" class="submenu selected">
+  {{- partial "inline/menu/tree.html" (dict "pages" $page.Site.Sections "page" $page) }}
+  {{- define "_partials/inline/menu/tree.html" }}
+    {{- $page := .page -}}
+    {{- range .pages -}}
+    {{- $parent := index .Ancestors 0 -}}
+    {{- $isCurrent := eq . $page -}}
+    {{- $isAncestor := $page.IsDescendant . -}}
+    {{- $isChild := $parent.Eq $page }}
+    {{- $isSibling := $parent.Eq (index $page.Ancestors 0) }}
+    <li class="s{{ if or .Pages .Sections}} sub{{ end }}{{ if not (or $isCurrent $isAncestor (and $isSibling (not $page.IsNode)) $isChild) }} off{{ end }}">
+      <!--
+        th:with="
+            child=${pos == len},
+            hidden=${!child && _canonical.get(crumbs.get(pos)) == entry},
+            entry=${hidden?crumbs.get(pos):entry},
+            selected=${(child and crumbs.get(pos-1) + '?about' == entry) or (!child and (crumbs.get(pos) == entry or hidden))},
+            leaf=${pos >= (len - 1) and not selected},
+            sibling=${pos + 1 == len and (_childs.get(uri) == null or uri == parent)},
+            childs=${entry == parent ? null : _childs.get(entry)}
+            "
+        class="s sub"
+        th:class="'s' + (${childs} ? ' sub' : '') + (${selected or sibling or child} ? '' : ' off')"
+      -->
+      <a  href="{{ .RelPermalink }}"
+          class="s {{ if (or $isCurrent $isAncestor) }} selected{{ end }}"
+          >{{ .LinkTitle }}</a>
+      <!--
+      <ul>
+        <li>.: {{ .Path }}</li>
+        <li>$parent: {{ $parent.Path }}</li>
+        <li>$page: {{ $page.Path }}</li>
+        <li>$page.IsNode: {{ $page.IsNode }}</li>
+        <li>$isCurrent: {{ $isCurrent }}</li>
+        <li>$isAncestor: {{ $isAncestor }}</li>
+        <li>$isSibling: {{ $isSibling }}</li>
+        <li>$isChild: {{ $isChild }}</li>
+        <li>.Eq $page: {{ .Eq $page }}</li>
+        <li>.IsAncestor $page: {{ .IsAncestor $page }}</li>
+        <li>.IsDescendant $page: {{ .IsDescendant $page }}</li>
+      </ul>
+      -->
+      {{ if or .Pages .Sections }}
+      <ul class="s{{ if (or $isCurrent $isAncestor) }} active{{ end }}">
+        {{- if .Pages }}
+          {{- partial "inline/menu/tree.html" (dict
+              "pages" .Pages
+              "page" $page
+          ) }}
+        {{- end }}
+      </ul>
       {{- end }}
     </li>
+    {{- end }}
   {{- end }}
-{{- end }}
+  </ul>
+  <hr class="n"/>
+</nav>
diff --git a/layouts/baseof.html b/layouts/baseof.html
index 39dcbec6..0bb66c6e 100644
--- a/layouts/baseof.html
+++ b/layouts/baseof.html
@@ -3,15 +3,21 @@
 <head>
   {{ partial "head.html" . }}
 </head>
-<body>
-  <header>
-    {{ partial "header.html" . }}
-  </header>
-  <main>
-    {{ block "main" . }}{{ end }}
-  </main>
-  <footer>
-    {{ partial "footer.html" . }}
-  </footer>
+<body id="top" class="menu" onload="prettyPrint()">
+  <div id="page" class="cf">
+    {{- partial "header.html" . }}
+    {{- partial "breadcrumb.html" . }}
+    <main class="content cf">
+        <article id="content" class="main">
+          <header><h1>{{ .Title }}</h1></header>
+          {{- block "main" . }}{{ end }}
+        </article>
+        <div class="marginal">
+          {{- partial "menu.html" (dict "menuID" "main" "page" .) }}
+          {{- partial "marginalcontent.html" . }}
+        </div>
+    </main>
+    {{- partial "footer.html" . }}
+  </div>
 </body>
 </html>
diff --git a/layouts/page.html b/layouts/page.html
index 7e286c80..30fcf482 100644
--- a/layouts/page.html
+++ b/layouts/page.html
@@ -1,6 +1,4 @@
 {{ define "main" }}
-  <h1>{{ .Title }}</h1>
-
   {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
   {{ $dateHuman := .Date | time.Format ":date_long" }}
   <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
diff --git a/layouts/section.html b/layouts/section.html
index 4cfd224d..e0e83081 100644
--- a/layouts/section.html
+++ b/layouts/section.html
@@ -1,4 +1,3 @@
 {{ define "main" }}
-  <h1>{{ .Title }}</h1>
   {{ .Content }}
 {{ end }}
diff --git a/layouts/term.html b/layouts/term.html
index c2e78751..7c5437dd 100644
--- a/layouts/term.html
+++ b/layouts/term.html
@@ -1,5 +1,4 @@
 {{ define "main" }}
-  <h1>{{ .Title }}</h1>
   {{ .Content }}
   {{ range .Pages }}
     <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>