Sidbare-Elemente in widget-Partials ausgelagert

2022-11-23 00:41:16 +01:00 · 2022-11-23 00:41:16 +01:00 · 9827bb7ba7
commit 9827bb7ba7
parent ca19ee452b
15 changed files with 151 additions and 120 deletions
--- a/archetypes/default.md
+++ b/archetypes/default.md
@ -1,2 +1,7 @@
-+++
-+++
+---
+title: "{{ replace .Name "-" " " | title }}"
+description: "Descripe {{ title }}"
+date: {{ .Date }}
+draft: true
+---
+
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -11,7 +11,7 @@
          <div id="content" class="col-md-8 border rounded shadow-lg p-3 mb-2">
            {{- block "main" . -}}{{- end }}
          </div>
-          <div id="sidebar" class="col-md-4">
+          <div id="sidebar" class="col-md-4 px-3">
            {{- block "sidebar" . -}}{{- end }}
          </div>
        </div>
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@ -1,70 +1,22 @@
 {{ define "main" }}
-<h1>{{ .Title }}</h1>
-{{ range .Pages.ByPublishDate.Reverse }}
-<p>
-  <h3><a class="title" href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
-  {{ partial "metadata.html" . }}
-  <a class="summary" href="{{ .RelPermalink }}">
-    <p>{{ .Summary }}</p>
-  </a>
-</p>
+  {{ range .Pages.ByTitle }}
+  <article class="border-bottom">
+    <h1 class="mb-3">
+      <a href="{{ .RelPermalink | relURL }}">{{ .Title }}</a>
+    </h1>
+    <p>{{ .Description }}</p>
+  </article>
+  {{ end }}
 {{ end }}
-{{ end }}
-

 {{ define "sidebar" }}
-  <div class="position-sticky" style="top: 2rem;">
-    <div class="p-4 mb-3 bg-light rounded">
-      <h4 class="py-1 mb-3 fst-italic text-bg-dark text-center">About Me</h4>
-      {{ with .Site.Params.Avatar }}
-        <div class="py-1 text-center">
-          <img class="rounded-circle" src="{{ . }}" alt="Ansprechendes Bild"/>
-        </div>
-      {{ end }}
-      <!-- Über config beschreibbar machen -->
-      {{ with .Site.Params.Description }}
-        <div class="py-1">
-          {{ . }}
-        </div>
-      {{ end }}
+  <div class="position-sticky" style="top: 0.5rem;">
+    {{- partial "widget/header.html" (dict "title" "About Me") -}}
+    {{- partial "widget/aboutme.html" (dict "avatar" .Site.Params.Avatar "description" .Site.Params.Description) -}}

-      <h4 class="py-1 mb-3 fst-italic text-bg-dark text-center">Contact Me</h4>
-      <div class="py-1 social">
-        <ul class="social-links">
-          {{ with .Site.Params.Social.Email }}
-            <li><a href="mailto:{{ . }}"><i data-feather="mail"></i>&nbsp;{{ . }}</a></li>
-          {{ end }}
-
-          {{ with .Site.Params.Social.Phone }}
-            <li><a href="tel:{{ . }}"><i class="bi" data-feather="phone"></i>&nbsp;{{ . }}</a></li>
-          {{ end }}
-
-          {{ with .Site.Params.Social.VoIP }}
-            <li><a href="sip:{{ . }}"><i data-feather="phone"></i>&nbsp;{{ . }}</a></li>
-          {{ end }}
-
-          {{ with .Site.Params.Social.Github }}
-            <li><a href="https://github.com/{{ . }}" target="_blank"><i data-feather="github"></i>&nbsp;{{ . }}</a></li>
-          {{ end }}
-
-          {{ with .Site.Params.Social.Twitter }}
-            <li><a href="https://twitter.com/{{ . }}" target="_blank"><i class="bi" data-feather="twitter"></i>&nbsp;{{ . }}</a></li>
-          {{ end }}
-
-          {{ with .Site.Params.Social.LinkedIn }}
-            <li><a href="https://linkedin.com/in/{{ . }}" target="_blank"><i class="bi" data-feather="linkedin"></i>&nbsp;{{ . }}</a></li>
-          {{ end }}
-
-          {{ with .Site.Params.Social.Matrix }}
-            <li><a href="https://matrix.to/#/{{ . }}" target="_blank"><img src="/img/matrix-badge.svg" alt="Chat on matrix">&nbsp;{{ . }}</a></li>
-          {{ end }}
-
-          {{ with .Site.Params.Social.RSS }}
-            <li><a href="{{ . }}"><i class="bi" data-feather="rss"></i>&nbsp;RSS</a></li>
-          {{ end }}
-        </ul>
-      </div>
-      <!-- Hier die Links zu Mail usw. vielleicht auch zum SIP Anschluss, vielleicht mit dem Icons aus faether oder Bootstrap -->
-    </div>
+    {{ with .Site.Params.Social }}
+      {{- partial "widget/header.html" (dict "title" "Contact Me") -}}
+      {{- partial "widget/socials.html" . -}}
+    {{ end }}
  </div>
 {{ end }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -1,6 +1,16 @@
 {{ define "main" }}
-<h1>{{ .Title }}</h1>
-{{ partial "metadata.html" . }}
-<br/><br/>
-{{ .Content }}
+  <h1 class="mb-4">{{ .Title }}</h1>
+  {{ .Content }}
+{{ end }}
+
+{{ define "sidebar" }}
+  <div class="position-sticky" style="top: 0.5rem;">
+    {{- partial "widget/header.html" (dict "title" "About Me") -}}
+    {{- partial "widget/aboutme.html" (dict "avatar" .Site.Params.Avatar "description" .Site.Params.Description) -}}
+
+    {{ with .Site.Params.Social }}
+      {{- partial "widget/header.html" (dict "title" "Contact Me") -}}
+      {{- partial "widget/socials.html" . -}}
+    {{ end }}
+  </div>
 {{ end }}
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@ -23,10 +23,9 @@
  {{/* Der Paginator wurde in den If-Blöcken zwar erstellt, aber die Variable ist auserhalb nicht sichtbar, daher hier explizit holen. 
    Dieser kann nach dem ersten erstellen auch nicht mehr verändert werden */}}
  {{ $pag := .Paginator }}
-  <h1>{{ .Title }}</h1>
  {{ range $pag.Pages }}
  <article class="blog-post">
-    <h2 class="blog-post-title mb-1"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+    <h3 class="blog-post-title_ mb-1"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
    <p class="blog-post-meta">{{ partial "metadata.html" . }}</p>
    <p>{{ .Summary }}</p>
  </article>
@ -36,52 +35,27 @@
 {{ end }}

 {{ define "sidebar" }}
-  <div class="position-sticky blog-sidebar" style="top: 2rem;">
-    <div class="p-4">
-      {{ $catIdent := .Site.Params.Blog.Categories | default "categories" }}
-      {{ $cats := (index $.Site.Taxonomies $catIdent)}}
-      {{ if $cats }}
-      <h4 class="fst-italic border-bottom border-dark mt-2">Kategorien</h4>
-      <div class="categories mb-2 d-inline-block">
-        {{ $parentLink := ($.Site.GetPage (printf "/categories")).Permalink }}
-        {{ range $key, $sites := $cats }}
-          <div class="m-1 d-inline-flex">
-            <a class="bg-dark text-white py-1 px-2 m-0 rounded-start" href="{{ (printf "%s%s" $parentLink $key) }}">{{ $key }}</a>
-            <div class="bg-danger text-white py-1 px-2 m-0 rounded-end">{{ $sites.Count }}</div>
-          </div>
-        {{ end }}
-      </div>
-      {{ end }}
+  <div class="position-sticky" style="top: 0.5rem;">
+    {{ $catIdent := .Site.Params.Blog.Categories | default "categories" }}
+    {{ $cats := (index $.Site.Taxonomies $catIdent)}}
+    {{ if $cats }}
+      {{- partial "widget/header.html" (dict "title" "Kategorien") -}}
+      {{- partial "widget/taglist.html" (dict "ident" $catIdent "tax" $cats) -}}
+    {{ end }}

-      {{/* https://mertbakir.gitlab.io/hugo/tag-cloud-in-hugo/ */}}
-      {{ $tagsIdent := .Site.Params.Blog.Tags | default "tags" }}
-      {{ $tags := (index $.Site.Taxonomies $tagsIdent)}}
-      {{ if $tags }}
-      <h4 class="fst-italic border-bottom border-dark mt-2">Schlagwortwolke</h4>
-      <div class="tag-cloud d-inline-block m-0 p-0">
-        {{ $parentLink := ($.Site.GetPage (printf "/%s" $tagsIdent)).Permalink }}
-        {{ $maxCnt := mul 1.0 (index $tags.ByCount 0).Count }}
-        {{ $minCnt := mul 1.0 (index $tags.ByCount.Reverse 0).Count }}
-        {{ $div := math.Max 1 (sub $maxCnt $minCnt) }}
-        {{ range $key, $sites := $tags }}
-        <!-- add (mul (math.Pow (div $sites.Count $maxCnt) 2.0) 14.0) 8.0  px -->
-          {{- (printf `<a class="tag-cloud-link m-1 p-1" style="font-size: %.3frem;" href="%s" aria-label="%s %d Einträge">%s<sup>%d</sup></a>`
-                (add (mul (math.Pow (div (sub $sites.Count $minCnt) $div) 2.0) 0.6) 0.8) 
-                ($key | relURL) $key $sites.Count $key $sites.Count
-              ) | safeHTML -}}
-          <!--<span class="badge">{{ $sites.Count }}</span>-->
-          
-        {{ end }}
-      </div>
-      {{ end }}
+    {{ $tagsIdent := .Site.Params.Blog.Tags | default "tags" }}
+    {{ $tags := (index $.Site.Taxonomies $tagsIdent)}}
+    {{ if $tags }}
+      {{- partial "widget/header.html" (dict "title" "Schlagwortwolke") -}}
+      {{- partial "widget/cloud.html" (dict "ident" $tagsIdent "tax" $tags) -}}
+    {{ end }}

-      <h4 class="fst-italic border-bottom border-dark mt-2">Archive</h4>
-      <div class="mb-2 list-group">
-        {{/* Hier explizit auf Type achten!! */}}
-        {{ range (where .Site.RegularPages "Type" "blog").GroupByDate "2006" }}
-          <a class="list-group-item list-group-item-action" href="/blog/{{ .Key }}">Jahr {{ .Key }}</a>
-        {{ end }}
-      </div>
+    {{- partial "widget/header.html" (dict "title" "Archive") -}}
+    <div class="mb-2 list-group">
+      {{/* Hier explizit auf Type achten!! */}}
+      {{ range (where .Site.RegularPages "Type" "blog").GroupByDate "2006" }}
+        <a class="list-group-item list-group-item-action" href="/blog/{{ .Key }}">Jahr {{ .Key }}</a>
+      {{ end }}
    </div>
  </div>
 {{ end }}
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@ -17,8 +17,9 @@


 {{ define "sidebar" }}
-  <aside class="position-sticky" style="top: 2rem;">
-    <div class="p-4">
+  <aside class="position-sticky" style="top: 0.5rem;">
+    {{- partial "widget/header.html" (dict "title" "Inhaltsverzeichnis")}}
+    <div>
      {{ .TableOfContents  }}
    </div>
  </aside>
--- a/layouts/knowhow/list.html
+++ b/layouts/knowhow/list.html
@ -0,0 +1,11 @@
+{{ define "main" }}
+  {{ range .Paginator.Pages.ByTitle }}
+  <article class="blog-post">
+    <h3 class="blog-post-title_ mb-1"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
+    <!--p class="blog-post-meta">{{ partial "metadata.html" . }}</p-->
+    <p>{{ .Summary }}</p>
+  </article>
+  {{ end }}
+
+  {{ template "partials/pagination.html" . }}
+{{ end }}
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -2,7 +2,7 @@
  <nav class="nav justify-content-center navbar-expand-md navbar-dark ">
    <a class="nav-link" href="#">Impressum & Datenschutz</a>
    {{ with .OutputFormats.Get "rss" -}}
-    <a class="nav-link" href="{{- .Permalink -}}">RSS-Feed</a>
+    <a class="nav-link" href="{{- .Permalink | relURL -}}">RSS-Feed</a>
    {{ end }}
  </nav>

--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@ -23,6 +23,6 @@
  {{ end }}

  {{ range .AlternativeOutputFormats -}}
-    {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
+    {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type (.Permalink | relURL) $.Site.Title | safeHTML }}
  {{ end }}
 </head>
--- a/layouts/partials/svgs/external-links.svg
+++ b/layouts/partials/svgs/external-links.svg
@ -0,0 +1,5 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     fill="{{ .fill }}" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 32 32" aria-label="External Link">
+  <path d="M25.152 16.576v5.696q0 2.144-1.504 3.648t-3.648 1.504h-14.848q-2.144 0-3.648-1.504t-1.504-3.648v-14.848q0-2.112 1.504-3.616t3.648-1.536h12.576q0.224 0 0.384 0.16t0.16 0.416v1.152q0 0.256-0.16 0.416t-0.384 0.16h-12.576q-1.184 0-2.016 0.832t-0.864 2.016v14.848q0 1.184 0.864 2.016t2.016 0.864h14.848q1.184 0 2.016-0.864t0.832-2.016v-5.696q0-0.256 0.16-0.416t0.416-0.16h1.152q0.256 0 0.416 0.16t0.16 0.416zM32 1.152v9.12q0 0.48-0.352 0.8t-0.8 0.352-0.8-0.352l-3.136-3.136-11.648 11.648q-0.16 0.192-0.416 0.192t-0.384-0.192l-2.048-2.048q-0.192-0.16-0.192-0.384t0.192-0.416l11.648-11.648-3.136-3.136q-0.352-0.352-0.352-0.8t0.352-0.8 0.8-0.352h9.12q0.48 0 0.8 0.352t0.352 0.8z">
+  </path>
+</svg>
--- a/layouts/partials/widget/aboutme.html
+++ b/layouts/partials/widget/aboutme.html
@ -0,0 +1,11 @@
+{{ with .avatar }}
+  <div class="py-1 text-center">
+    <img class="rounded-circle" src="{{ . }}" alt="Ansprechendes Bild"/>
+  </div>
+{{ end }}
+
+{{ with .description }}
+  <div class="py-1">
+    {{ . }}
+  </div>
+{{ end }}
--- a/layouts/partials/widget/cloud.html
+++ b/layouts/partials/widget/cloud.html
@ -0,0 +1,15 @@
+<div class="tag-cloud d-inline-block m-0 p-0">
+    {{ $parentLink := ($.Params.Site.GetPage (printf "/%s" .ident)).Permalink }}
+    {{ $maxCnt := mul 1.0 (index .tax.ByCount 0).Count }}
+    {{ $minCnt := mul 1.0 (index .tax.ByCount.Reverse 0).Count }}
+    {{ $div := math.Max 1 (sub $maxCnt $minCnt) }}
+    {{ range $key, $sites := .tax }}
+    <!-- add (mul (math.Pow (div $sites.Count $maxCnt) 2.0) 14.0) 8.0  px -->
+      {{- (printf `<a class="tag-cloud-link m-1 p-1" style="font-size: %.3frem;" href="%s" aria-label="%s %d Einträge">%s<sup>%d</sup></a>`
+            (add (mul (math.Pow (div (sub $sites.Count $minCnt) $div) 2.0) 0.6) 0.8) 
+            ((printf "%s%s" $parentLink $key) | relURL) $key $sites.Count $key $sites.Count
+          ) | safeHTML -}}
+      <!--<span class="badge">{{ $sites.Count }}</span>-->
+    {{ end }}
+</div>
+{{/* https://mertbakir.gitlab.io/hugo/tag-cloud-in-hugo/ */}}
--- a/layouts/partials/widget/header.html
+++ b/layouts/partials/widget/header.html
@ -0,0 +1,2 @@
+<h4 class="fst-italic border-bottom border-dark mt-2">{{ .title }}</h4>
+<!--h4 class="py-1 mb-3 fst-italic text-bg-dark text-center">{{ .title }}</h4-->
--- a/layouts/partials/widget/socials.html
+++ b/layouts/partials/widget/socials.html
@ -0,0 +1,36 @@
+<div class="py-1 social">
+  <ul class="social-links">
+    {{ with .Email }}
+      <li><a href="mailto:{{ . }}"><i data-feather="mail"></i>&nbsp;{{ . }}</a></li>
+    {{ end }}
+
+    {{ with .Phone }}
+      <li><a href="tel:{{ . }}"><i class="bi" data-feather="phone"></i>&nbsp;{{ . }}</a></li>
+    {{ end }}
+
+    {{ with .VoIP }}
+      <li><a href="sip:{{ . }}"><i data-feather="phone"></i>&nbsp;{{ . }}</a></li>
+    {{ end }}
+
+    {{ with .Github }}
+      <li><a href="https://github.com/{{ . }}" target="_blank"><i data-feather="github"></i>&nbsp;{{ . }}</a></li>
+    {{ end }}
+
+    {{ with .Twitter }}
+      <li><a href="https://twitter.com/{{ . }}" target="_blank"><i class="bi" data-feather="twitter"></i>&nbsp;{{ . }}</a></li>
+    {{ end }}
+
+    {{ with .LinkedIn }}
+      <li><a href="https://linkedin.com/in/{{ . }}" target="_blank"><i class="bi" data-feather="linkedin"></i>&nbsp;{{ . }}</a></li>
+    {{ end }}
+
+    {{ with .Matrix }}
+      <li><a href="https://matrix.to/#/{{ . }}" target="_blank"><img src="/img/matrix-badge.svg" alt="Chat on matrix">&nbsp;{{ . }}</a></li>
+    {{ end }}
+
+    {{ with .RSS }}
+      <li><a href="{{ . }}"><i class="bi" data-feather="rss"></i>&nbsp;RSS</a></li>
+    {{ end }}
+  </ul>
+</div>
+<!-- Hier die Links zu Mail usw. vielleicht auch zum SIP Anschluss, vielleicht mit dem Icons aus faether oder Bootstrap -->
--- a/layouts/partials/widget/taglist.html
+++ b/layouts/partials/widget/taglist.html
@ -0,0 +1,9 @@
+<div class="categories mb-2 d-inline-block">
+    {{ $parentLink := ($.Params.Site.GetPage (printf "/%s" .ident)).Permalink }}
+    {{ range $key, $sites := .tax }}
+      <div class="m-1 d-inline-flex">
+        <a class="bg-dark text-white py-1 px-2 m-0 rounded-start" href="{{ (printf "%s%s" $parentLink $key) | relURL }}">{{ $key }}</a>
+        <div class="bg-danger text-white py-1 px-2 m-0 rounded-end">{{ $sites.Count }}</div>
+      </div>
+    {{ end }}
+  </div>