provide header variant with banner; work in progress: example site = cybercards documentation

LICENSE.md

@@ -1,6 +1,6 @@
 # The MIT License (MIT)
 
-Copyright (c) 2021 cyberconcepts.org team (team@cyberconcepts.org)
+Copyright (c) 2022 cyberconcepts.org team (team@cyberconcepts.org)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

archetypes/default.md

@@ -8,10 +8,11 @@ parents: []
 domains: []
 topics: []
 doctypes: []
-date: {{ .Date }}
+date: {{ time.Format "2006-01-02" .Date }}
 author: 
 draft: false
-weight: 50
+weight: 300
 ---
 
 ## First Headline
+

exampleSite/config.yaml

@@ -11,6 +11,8 @@ markup:
       unsafe: true
 
 params:
+  hideSectionArticles: true
+
   #defaultImage: 9609-motor2.jpg
   logo: logo-matrix.png
   favicon: icon-star.png
@@ -41,16 +43,6 @@ taxonomies:
   domain: domains
   topic: topics
 
-related:
-  includeNewer: true
-  indices:
-  - name: parents
-    weight: 100
-  - name: topics
-    weight: 100
-  threshold: 80
-  toLower: true
-
 menu:
   main:
   - identifier: home

exampleSite/content/posts/components.md

@@ -4,11 +4,30 @@ summary: The parts and components that make up the *cybercards* theme
 img: image-5.png
 pageid: components
 parents: [documentation]
-topics: [Documentation, Components]
+topics: [Documentation, Components, Zettelkasten]
-author: helmut
+author: helmutm
 date: 2022-02-19
 weight: 320
 ---
-Nulla vel ante sit amet leo imperdiet porta. Mauris pellentesque finibus ligula non dignissim. Sed sed vehicula velit. Ut eleifend velit maximus massa lobortis mattis. In dui quam, rutrum eu purus et, mattis consequat ex. Vivamus risus mauris, ultricies vel dolor eget, aliquet tristique est. Suspendisse odio urna, vehicula vel diam at, pulvinar porttitor metus. Sed ac ipsum et magna aliquam mattis in eleifend mi. Pellentesque porttitor diam nec hendrerit efficitur. In hac habitasse platea dictumst. Nam arcu enim, imperdiet quis molestie molestie, molestie non diam. Quisque pretium felis in lorem placerat rhoncus eu et lorem. Praesent tincidunt purus sed mi lacinia maximus. Curabitur rutrum tempus posuere. Donec quis fringilla enim. Nullam nisl nisl, vestibulum sed enim vel, tempor pulvinar ligula.
+## Layout Components
+
+### Header section
+
+### List page
+
+### Single page
+
+### Sidebar
+
+## Styling
+
+`_custom-vars.scss`
+
+`_custom.scss`
+
+## Shortcodes
+
+`ilink`
+
+`iimg`
 
-Mauris tincidunt ligula et erat ullamcorper varius. Nunc sit amet lacus ullamcorper, suscipit sem in, interdum dui. Nam ultricies, dui eget aliquet mollis, erat ipsum luctus eros, sed pulvinar nulla velit ut nibh. Mauris sed molestie turpis. Curabitur vehicula eros lectus, ac venenatis justo fringilla eget. Phasellus fringilla molestie diam vel aliquet. Nunc orci lorem, laoreet eget blandit nec, vestibulum eu urna. Ut gravida egestas massa, in auctor nisl iaculis id. In hac habitasse platea dictumst. Fusce nec massa ullamcorper, posuere nisl et, feugiat risus. Morbi metus risus, facilisis aliquam risus porta, volutpat viverra leo. Praesent vestibulum, orci in consectetur aliquet, lacus metus suscipit risus, a dignissim eros nibh sed purus. Nullam in magna non nulla ultricies aliquam. Nullam malesuada rhoncus est, in vehicula lacus mattis vel. Nam et velit dignissim, consectetur est ac, imperdiet nulla. Nunc feugiat facilisis ipsum, quis porttitor quam mattis in.

exampleSite/content/posts/install.md

@@ -5,7 +5,7 @@ img: image-1.png
 pageid: install
 parents: [documentation]
 topics: [Documentation, Installation]
-author: helmut
+author: helmutm
 date: 2022-02-19
 weight: 310
 ---

exampleSite/content/posts/overview.md

@@ -4,12 +4,20 @@ summary: What is this all about?
 img: image-4.png
 pageid: overview
 parents: [introduction]
-topics: [Hugo, Theme]
+topics: [Hugo, Theme, Zettelkasten, Documentation]
-author: helmut
+author: helmutm
-date: 2022-02-19
+date: 2022-02-20
 weight: 110
 ---
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris erat augue, eleifend nec est quis, iaculis suscipit lacus. In convallis ut mi ac volutpat. Integer feugiat lacinia purus, at condimentum enim tempus vitae. Fusce tempus tortor nibh, ut mollis sapien pulvinar at. Nam nec tortor ante. Phasellus lorem elit, placerat sit amet ligula ac, fermentum vulputate nibh. Quisque sed dapibus risus. Quisque sagittis iaculis maximus. Mauris lorem ligula, commodo in ullamcorper et, mollis ut dui.
+Based on [Hugo Cards](https://themes.gohugo.io/themes/hugo-cards)
 
-Integer ut turpis metus. Curabitur purus orci, sagittis non ultrices ac, elementum ut diam. Suspendisse fringilla dolor id sapien tincidunt, vitae tempor enim tempus. Ut quis varius tortor, ut molestie ante. Curabitur maximus quis nibh quis lacinia. Nullam ante nunc, mollis sed nibh quis, sagittis semper lectus. Morbi quis enim nibh. Vestibulum justo sem, placerat vitae cursus vel, hendrerit vitae nibh. Mauris id metus non lorem volutpat varius. Fusce dui lectus, imperdiet at felis at, tincidunt dapibus enim. Ut porttitor at magna molestie faucibus. Etiam sed dignissim lectus. Praesent interdum vulputate diam, non iaculis libero fringilla sit amet. Nunc dignissim vel ipsum sed tincidunt. Nullam id sapien quam.
+Makes heavy use of the Bootstrap *card* element, not only on overview pages but also when presenting meta data and links on the sidebar of a page.
+
+But the name *cybercards* is also related to another aspekt of the theme: It allows you to construct a complex directed graph of linked pages, that is something like [Niklas Lumann](https://en.wikipedia.org/wiki/Niklas_Luhmann)'s famous [Zettelkasten](https://en.wikipedia.org/wiki/Zettelkasten) (slip box), a - possibly fairly large (Luhmann's had about 90,000 cards) - collection of index cards that are interlinked by putting identifiers on each card that may then be referenced from other cards.
+
+There are three ways for linking  (see the {{< ilink pid="structures">}}*Structures*{{< /ilink >}} and {{< ilink pid="pageconfig">}}*Page Configuration*{{< /ilink >}} pages):
+
+- Use taxonomy, currently supported are *topics*. With the *cybercards* theme a topic may have parent topics, thus building a directed graph (sort of hierarchy, but with optionally more than one parent of an object, so more like a network) of topics. Pages belonging to the same topic as the current page are listed in the *Related Posts* section of the sidebar. Parent and child topics are shown page of a topic if there are explicit topic documents for these in the `content/topics` folder.
+- Connect pages via the `parents` parameter, that references other ("parent") pages via their `pageid`s. Parent and child pages of the current page are shown in corresponding sections of the sidebar. Alternatively you can show child pages (i.e. pages that link to the current one via their *parents* parameter) as cards directly on the parent page, depending on a setting in the site parameters. Pages that link to the same parent page as the current page are listed in the *Sibling Posts* section of the sidebar.
+- Link directly from a page's text to another page by inserting an `ilink` (internal link) shortcode that references the `pageid` of the other page (just like in a Wiki, but without the magic of CamelCase and automatic page creation). On the referenced page you get a list of *Backlinks* in the sidebar that shows which other pages link to it via an `ilink` shortcode.

exampleSite/content/posts/pageconfig.md

@@ -5,7 +5,7 @@ img: image-3.png
 pageid: pageconfig
 parents: [documentation]
 topics: [Documentation, Configuration]
-author: helmut
+author: helmutm
 date: 2022-02-19
 weight: 340
 ---

exampleSite/content/posts/structures.md

@@ -4,9 +4,9 @@ summary: How to build a linked index card structure using taxonomies and page re
 img: image-2.png
 pageid: structures
 parents: [documentation]
-topics: [Documentation, Structures, Graph, Taxonomy, Links]
+topics: [Documentation, Structures, Graph, Taxonomy, Links, Zettelkasten]
-author: helmut
+author: helmutm
-date: 2022-02-19
+date: 2022-02-20
 weight: 330
 ---
 

layouts/_default/baseof.html

@@ -16,7 +16,8 @@
   {{ block "config" . }}{{ end }}
 </head>
 <body>
-  {{ partial "header.html" . }}
+  {{ $header := or .Site.Params.layouts.partials.header "header" }}
+  {{ partial $header . }}
   <div class="container">
     <div class="wrapper">
       {{ block "main" . }} {{ end }}

layouts/partials/header-banner.html

@@ -0,0 +1,40 @@
+<header class="site-header">
+
+{{- $bgimage := (resources.Get (printf "img/%s" .Site.Params.logo)).Resize "1980x" -}}
+<div style="background-image: url({{ $bgimage.Permalink }}); height: 150px; background-size: cover; background-position: right 0 top -30px; background-repeat: no-repeat;">
+</div>
+<nav class="navbar navbar-expand-md navbar-light bg-info">
+<div class="container-fluid">
+
+  {{- with .Site.Params.Headline -}}
+    <h6 class="nav navbar-nav text text-muted fs-6 justify-content-start">
+      <a href="{{ site.BaseURL }}" 
+               class="nav-link">{{ . }}</a>
+    </h6>
+  {{- end -}}
+
+  <button type="button" class="navbar-toggler" 
+          data-bs-toggle="collapse" data-bs-target="#navbar1"
+          aria-controls="navbar1"
+          aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+  <div class="navbar-collapse collapse justify-content-end" id="navbar1">
+    <ul class="navbar-nav">
+      {{- $currentPage := . -}}
+      {{ range .Site.Menus.main }}
+        {{- $current := or ($currentPage.IsMenuCurrent "main" .) 
+                           ($currentPage.HasMenuCurrent "main" .) -}}
+        <li class="nav-item">
+          <a href="{{ .URL }}"
+             class="nav-link{{if $current }} active{{end}}"
+             title="{{ .Title  }}">{{ .Name }}</a>
+        </li>
+      {{- end }}
+    </ul>
+  </div>
+
+</div>
+</nav>
+</header>

layouts/partials/header.html

@@ -1,4 +1,4 @@
-  <header class="site-header">
+<header class="site-header">
 <nav class="navbar navbar-expand-md navbar-light bg-light">
 
   <a class="navbar-brand" href="{{ .Site.BaseURL }}"><img src="{{.Site.BaseURL}}img/{{.Site.Params.logo}}" alt="{{.Site.Title}}"></a>

theme.toml

@@ -5,9 +5,9 @@ license = "MIT"
 licenselink = "https://github.com/cyberconcepts/cybercards/blob/master/LICENSE.md"
 description = "A bootstrap based minimal hugo theme based on Hugo cards and webjeda-cards"
 homepage = "https://www.cyberconcepts.org"
-tags = ["bootstrap", "cards", "responsive", "jekyll", "blog"]
+tags = ["bootstrap", "docs", "light", "cards", "responsive", "jekyll", "blog"]
 features = []
-min_version = "0.91.0"
+min_version = "0.91.2"
 
 [author]
   name = "cyberconcepts.org team" 
@@ -17,4 +17,4 @@ min_version = "0.91.0"
 [original]
   name = "Hugo cards"
   homepage = "https://themes.gohugo.io/themes/hugo-cards/"
-  repo = ""
+  repo = "https://github.com/bul-ikana/hugo-cards"