commit 0ecfbdd71f756f9fe9f6b07f088c92938ae22848
parent c7bd73a0cf43cae99a5b0b960e24703b6924efdb
Author: Lou Woell <lou.woell@posteo.de>
Date: Sun, 21 Apr 2024 13:11:22 +0200
add tabbed container shortcode
Diffstat:
7 files changed, 168 insertions(+), 5 deletions(-)
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -17,3 +17,4 @@
@import "code";
@import "highlight";
+@import "tabbedContainer";
diff --git a/assets/css/tabbedContainer.css b/assets/css/tabbedContainer.css
@@ -0,0 +1,42 @@
+.tabContainer > .tabs > div:not(:first-child) {
+ display: none;
+}
+
+.tabContainer > .tabs * {
+ margin-top: 0px;
+ padding-top: 0.25em;
+}
+
+.tabContainer > .tabBar {
+ overflow: hidden;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: flex;
+}
+
+.tabContainer > .tabBar button {
+ border: 0px solid $background;
+ border-bottom: 1px solid $background;
+ text-decoration: none;
+ color: mix($background, $color, 60%);
+ margin: 0 .1em 0 0;
+ font: inherit;
+ font-weight: normal;
+ font-size: 1em;
+ flex: 1;
+ transition: all .35s ease;
+ background: $background;
+}
+
+.tabContainer > .tabBar button.active {
+ border-bottom: 1px solid $accent;
+ background: inherit;
+ color: mix($color, $background, 60%)
+}
+
+.tabContainer > .tabBar button:hover {
+ background: inherit;
+ color: $accent;
+}
diff --git a/assets/js/tabbedContainer.js b/assets/js/tabbedContainer.js
@@ -0,0 +1,18 @@
+function clickTab (evt) {
+
+ let tabName = evt.target.getAttribute("tabName");
+ let container = evt.currentTarget.parentElement;
+ let tabContent = container.getElementsByClassName("tabContent");
+ let tabBar = evt.currentTarget.children;
+
+ for (let i = 0; i < tabContent.length; i++){
+ tabContent[i].style.display = "none";
+ }
+
+ for (let i = 0; i < tabBar.length; i++){
+ tabBar[i].classList.remove("active")
+ }
+
+ tabContent.namedItem(tabName).style.display = "block";
+ evt.target.classList.add("active");
+}
diff --git a/exampleSite/content/showcase.md b/exampleSite/content/showcase.md
@@ -4,13 +4,84 @@ date: "2018-07-18"
author: "Hello Robot"
---
-## Header 2
+# Header 1: Some Formatting
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur ipsum dui, aliquet nec commodo at, tristique eget ante. **Donec quis dolor nec nunc mollis interdum vel in purus**. Sed vitae leo scelerisque, sollicitudin elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum
+metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur
+ipsum dui, aliquet nec commodo at, tristique eget ante. **Donec quis dolor nec
+nunc mollis interdum vel in purus**. Sed vitae leo scelerisque, sollicitudin
+elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique
+porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam.
+
+> Fusce pharetra suscipit orci nec tempor. Quisque vitae sem sit amet sem mollis
+> consequat. Sed at imperdiet lorem. Vestibulum pharetra faucibus odio, ac
+> feugiat tellus sollicitudin at. Pellentesque varius tristique mi imperdiet
+> dapibus. Duis orci odio, sodales lacinia venenatis sit amet, feugiat et diam.
-> Fusce pharetra suscipit orci nec tempor. Quisque vitae sem sit amet sem mollis consequat. Sed at imperdiet lorem. Vestibulum pharetra faucibus odio, ac feugiat tellus sollicitudin at. Pellentesque varius tristique mi imperdiet dapibus. Duis orci odio, sodales lacinia venenatis sit amet, feugiat et diam.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum
+metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur
+ipsum dui, aliquet nec commodo at, tristique eget ante. **Donec quis dolor nec
+nunc mollis interdum vel in purus**. Sed vitae leo scelerisque, sollicitudin
+elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique
+porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam.
-### Header 3
+## Header 2: Tabbed Containers
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur ipsum dui, aliquet nec commodo at, tristique eget ante. **Donec quis dolor nec nunc mollis interdum vel in purus**. Sed vitae leo scelerisque, sollicitudin elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam.
+
+{{< tabbed >}}
+{{% tab name="english" %}}
+> [I]t is unquestionable, as we remarked above, that every human action has its
+starting-point in a dissatisfaction, and thereby in a feeling of absence. We
+should not act if we did not set before ourselves an end, and we seek a thing
+only because we feel the lack of it. Our action proceeds thus from "nothing" to
+"something," and its very essence is to embroider "something" on the canvas of
+"nothing." The truth is that the "nothing" concerned here is the absence not so
+much of a thing as of a utility. If I bring a visitor into a room that I have
+not yet furnished, I say to him that "there is nothing in it." Yet I know the
+room is full of air; but, as we do not sit on air, the room truly contains
+nothing that at this moment, for the visitor and for myself, counts for
+anything. In a general way, human work consists in creating utility; and, as
+long as the work is not done, there is "nothing"-nothing that we want. Our life
+is thus spent in filling voids, which our intellect conceives under the
+influence, by no means intellectual, of desire and of regret, under the pressure
+of vital necessities; and if we mean by void an absence of utility and not of
+things, we may say, in this quite relative sense, that we are constantly going
+from the void to the full: such is the direction which our action takes.
+{{% /tab %}}
+{{% tab name="deutsch" %}}
+> Nun ist es aber unbestreitbar, daß, wie | schon oben bemerkt, jede menschliche
+Handlung ihren Ausgangspunkt in einer Unbefriedigtheit nimmt und also folglich
+in einem Gefühl von Abwesenheit. Man würde nicht handeln, wenn man nicht ein
+Ziel vor Augen hätte, und man sucht ein Ding nur zu erreichen, weil man spürt,
+daß es einem fehlt. Unsere Handlung schreitet also von »nichts« zu »etwas«, und
+ihr Wesen selbst besteht darin, »etwas« auf das Gitterleinen des »Nichts« zu
+sticken. Tatsächlich jedoch ist das Nichts, von dem hier die Rede ist, weniger
+die Abwesenheit eines Dinges als die einer Nützlichkeit. Wenn ich einen Besucher
+in ein noch unmöbliertes Zimmer führe, dann warne ich ihn vor, »daß es dort
+nichts gibt«. Ich weiß dabei sehr wohl, daß das Zimmer voll Luft ist, doch
+nachdem man auf Luft nicht sitzen kann, enthält das Zimmer tatsächlich nichts
+von dem, was in diesem Moment für den Besucher und für mich selbst irgend etwas
+zählen würde. Generell besteht menschliche Arbeit darin , Nützlichkeit zu
+erzeugen; und bis die Arbeit getan ist, gibt es »nichts« - nichts von dem, was
+man erreichen wollte. So verbringen wir unser Leben damit, von unserer
+Intelligenz unter dem außer-intellektuellen Einfluß des Verlangens und des
+Vermissens, unter dem Druck der vitalen Erfordernisse gedachte Leeren
+auszufüllen: Und wenn man unter Leere eine Abwesenheit von Nützlichkeit und
+nicht von Dingen versteht, dann darf m an in diesem ganz relativen Sinn sagen,
+daß wir beständig vom Leeren zum Vollen schreiten. Das ist die Richtung, in der
+sich unsere Handlung bewegt.
+{{% /tab %}}
+{{< /tabbed >}}
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum
+metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur
+ipsum dui, aliquet nec commodo at, tristique eget ante. **Donec quis dolor nec
+nunc mollis interdum vel in purus**. Sed vitae leo scelerisque, sollicitudin
+elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique
+porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam.
+
+### Header 3: Show Casing Syntax Highlighting
Nulla libero turpis, lacinia vitae cursus ut, auctor dictum nisl. Fusce varius felis nec sem ullamcorper, at convallis nisi vestibulum. Duis risus odio, porta sit amet placerat mollis, tincidunt non mauris. Suspendisse fringilla, `odio a dignissim pharetra`, est urna sollicitudin urna, eu scelerisque magna ex vitae tellus.
@@ -36,6 +107,8 @@ pre {
}
{{< /code >}}
+Nulla libero turpis, lacinia vitae cursus ut, auctor dictum nisl. Fusce varius felis nec sem ullamcorper, at convallis nisi vestibulum. Duis risus odio, porta sit amet placerat mollis, tincidunt non mauris. Suspendisse fringilla, `odio a dignissim pharetra`, est urna sollicitudin urna, eu scelerisque magna ex vitae tellus.
+
```common-lisp
(defun test (str)
(declare ignore str)
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -13,7 +13,8 @@
</footer>
{{ $menu := resources.Get "js/menu.js" | js.Build }}
-{{ $bundle := slice $menu | resources.Concat "bundle.js" | resources.Minify }}
+{{ $tabbedContainer := resources.Get "js/tabbedContainer.js" }}
+{{ $bundle := slice $tabbedContainer $menu | resources.Concat "bundle.js" }}
<script type="text/javascript" src="{{ $bundle.RelPermalink }}"></script>
diff --git a/layouts/shortcodes/tab.html b/layouts/shortcodes/tab.html
@@ -0,0 +1,11 @@
+{{ if .Parent }}
+ {{ $name := trim (.Get "name") " " }}
+ {{ if not (.Parent.Scratch.Get "tabs") }}
+ {{ .Parent.Scratch.Set "tabs" slice }}
+ {{ end }}
+ {{ with .Inner }}
+ {{ $.Parent.Scratch.Add "tabs" (dict "name" $name "content" . ) }}
+ {{ end }}
+{{ else }}
+ {{- errorf "[%s] %q: tab shortcode missing its parent" .Page.Path -}}
+{{ end}}
diff --git a/layouts/shortcodes/tabbed.html b/layouts/shortcodes/tabbed.html
@@ -0,0 +1,17 @@
+{{ with .Inner }}{{/* don't do anything, just call it */}}{{ end }}
+<div class="tabContainer">
+ <div class="tabBar" onclick="javascript:clickTab(event);">
+ {{ range $idx, $tab := .Scratch.Get "tabs" }}
+ <button tabName="{{ .name }}"
+ class="tabLink {{ cond (eq $idx 0) "active" ""}}">
+ {{ .name }}</button>
+ {{ end }}
+ </div>
+ <div class="tabs">
+ {{ range $idx, $tab := .Scratch.Get "tabs" }}
+ <div class="tabContent" id="{{ .name }}" >
+ {{ .content }}
+ </div>
+ {{ end }}
+ </div>
+</div>