HTML/CSS only tabs (#678)

* Fix pre tag margin top so it looks good inside containers

* Bind to 0.0.0.0 for docker container support

* Add HTML only tabs shortcode

Makefile

@@ -6,7 +6,7 @@ build:
 	$(HUGO_BIN) --themesDir=../.. --source=exampleSite
 
 demo:
-	$(HUGO_BIN) server -D --themesDir=../.. --source=exampleSite
+	$(HUGO_BIN) server -D --themesDir=../.. --source=exampleSite --bind 0.0.0.0
 
 release: build
 	rm -rf ./resources && cp -r ./exampleSite/resources ./resources

assets/scss/_base.scss

@@ -136,7 +136,7 @@ strong {
 
 .highlight>div,
 .highlight>pre {
-  margin: 0 0 2rem;
+  margin: 2rem 0 2rem;
   padding: 1rem;
   border-radius: 1rem;
 }

assets/scss/_tabs.scss

@@ -0,0 +1,77 @@
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 2rem 0 2rem 0;
+  position: relative;
+
+  &.tabs-left {
+    justify-content: flex-start;
+
+    label.tab-label {
+      margin-right: 0.5rem;
+    }
+
+    .tab-content {
+      border-radius: 0px 4px 4px 4px;
+    }
+  }
+
+  &.tabs-right {
+    justify-content: flex-end;
+
+    label.tab-label {
+      margin-left: 0.5rem;
+    }
+
+    .tab-content {
+      border-radius: 4px 0px 4px 4px;
+    }
+  }
+
+  input.tab-input {
+    display: none;
+  }
+
+  label.tab-label {
+    background-color: $alt-bg-color;
+    border-color: $darker-alt-bg-color;
+    border-radius: 4px 4px 0px 0px;
+
+    border-style: solid;
+    border-bottom-style: hidden;
+
+    border-width: 1px;
+    cursor: pointer;
+    display: inline-block;
+    order: 1;
+    padding: 0.3rem 0.6rem;
+    position: relative;
+    top: 1px;
+    user-select: none;
+  }
+
+  input.tab-input:checked + label.tab-label {
+    background-color: $bg-color;
+  }
+
+  .tab-content {
+    background-color: $bg-color;
+    border-color: $darker-alt-bg-color;
+    border-style: solid;
+    border-width: 1px;
+    display: none;
+    order: 2;
+    padding: 1rem;
+    width: 100%;
+  }
+
+  &.tabs-code {
+    .tab-content {
+      padding: 0.5rem;
+
+      pre {
+        margin: 0;
+      }
+    }
+  }
+}

assets/scss/_tabs_dark.scss

@@ -0,0 +1,27 @@
+@mixin tabs_dark {
+  .tabs {
+    label.tab-label {
+      background-color: $alt-bg-color-dark;
+      border-color: $lighter-alt-bg-color-dark;
+    }
+
+    input.tab-input:checked + label.tab-label {
+      background-color: $bg-color-dark;
+    }
+
+    .tab-content {
+      background-color: $bg-color-dark;
+      border-color: $lighter-alt-bg-color-dark;
+    }
+  }
+}
+
+body.colorscheme-dark {
+  @include tabs_dark();
+}
+
+body.colorscheme-auto {
+  @media (prefers-color-scheme: dark) {
+    @include tabs_dark();
+  }
+}

assets/scss/_variables.scss

@@ -25,6 +25,7 @@ $bg-color: #fafafa !default;
 $fg-color: #212121 !default;
 $alt-bg-color: #e0e0e0 !default;
 $alt-fg-color: #000 !default;
+$darker-alt-bg-color: #ccc !default;
 $link-color: #1565c0 !default;
 
 // Dark colors
@@ -32,6 +33,7 @@ $bg-color-dark: #212121 !default;
 $fg-color-dark: #dadada !default;
 $alt-bg-color-dark: #424242 !default;
 $alt-fg-color-dark: #dadada !default;
+$lighter-alt-bg-color-dark: #4f4f4f !default;
 $link-color-dark: #42a5f5 !default;
 
 // Notice colors

assets/scss/coder-dark.scss

@@ -3,6 +3,7 @@
 @import "content_dark";
 @import "notices_dark";
 @import "navigation_dark";
+@import "tabs_dark";
 @import "taxonomies_dark";
 @import "footer_dark";
 @import "float_dark";

assets/scss/coder.scss

@@ -6,6 +6,7 @@
 @import "notices";
 @import "navigation";
 @import "pagination";
+@import "tabs";
 @import "taxonomies";
 @import "footer";
 @import "float";

exampleSite/content/posts/html-and-css-only-tabs.md

@@ -0,0 +1,133 @@
++++
+author = "Hugo Authors"
+title = "HTML and CSS only tabs"
+date = "2022-05-15"
+description = "Sample article showcasing shortcodes for HTML/CSS only tabs"
+tags = [
+    "markdown",
+    "css",
+    "html",
+]
+categories = [
+    "themes",
+    "syntax",
+]
+series = ["Themes Guide"]
+aliases = ["migrate-from-jekyl"]
++++
+
+## Basic shortcodes
+
+The following content:
+
+```markdown
+{{</* tabgroup */>}}
+  {{</* tab name="Hello" */>}}
+  Hello World!
+  {{</* /tab */>}}
+
+  {{</* tab name="Goodbye" */>}}
+  Goodbye Everybody!
+  {{</* /tab */>}}
+{{</* /tabgroup */>}}
+```
+
+Will generate:
+
+{{< tabgroup >}}
+  {{< tab name="Hello" >}}
+  Hello World!
+  {{< /tab >}}
+
+  {{< tab name="Goodbye" >}}
+  Goodbye Everybody!
+  {{< /tab >}}
+{{< /tabgroup >}}
+
+## Right alighment
+
+You can also align the tabs to the right:
+
+```markdown
+{{</* tabgroup align="right" */>}}
+  {{</* tab name="Hello" */>}}
+  Hello World!
+  {{</* /tab */>}}
+
+  {{</* tab name="Goodbye" */>}}
+  Goodbye Everybody!
+  {{</* /tab */>}}
+{{</* /tabgroup */>}}
+```
+
+Giving you this look:
+
+{{< tabgroup align="right" >}}
+  {{< tab name="Hello" >}}
+  Hello World!
+  {{< /tab >}}
+
+  {{< tab name="Goodbye" >}}
+  Goodbye Everybody!
+  {{< /tab >}}
+{{< /tabgroup >}}
+
+## Markdown content
+
+Any valid markdown can be used inside the tab:
+
+~~~markdown
+{{</* tabgroup align="right" style="code" */>}}
+  {{</* tab name="Ruby" */>}}
+
+```ruby
+puts 'Hello'
+```
+
+  {{</* /tab */>}}
+  {{</* tab name="Python" */>}}
+
+```python
+print('Hello')
+```
+
+  {{</* /tab */>}}
+  {{</* tab name="JavaScript" */>}}
+
+```js
+console.log('Hello')
+```
+
+  {{</* /tab */>}}
+{{</* /tabgroup */>}}
+
+~~~
+
+And you get this lovely content:
+
+{{< tabgroup align="right" style="code" >}}
+  {{< tab name="Ruby" >}}
+
+```ruby
+puts 'Hello'
+```
+
+  {{< /tab >}}
+  {{< tab name="Python" >}}
+
+```python
+print('Hello')
+```
+
+  {{< /tab >}}
+  {{< tab name="JavaScript" >}}
+
+```js
+console.log('Hello')
+```
+
+  {{< /tab >}}
+{{< /tabgroup >}}
+
+In this case `style="code"` makes it look a little nicer for scenarios where
+your content purely a code block.

exampleSite/resources/_gen/assets/scss/scss/coder-dark.scss_9e20ccd2d8034c8e0fd83b11fb6e2bd5.content

@@ -233,6 +233,27 @@ body.colorscheme-dark .navigation .menu-button i:hover, body.colorscheme-dark .n
   body.colorscheme-auto .navigation .menu-button i:hover, body.colorscheme-auto .navigation .menu-button i:focus {
     color: #dadada; } }
 
+body.colorscheme-dark .tabs label.tab-label {
+  background-color: #424242;
+  border-color: #4f4f4f; }
+
+body.colorscheme-dark .tabs input.tab-input:checked + label.tab-label {
+  background-color: #212121; }
+
+body.colorscheme-dark .tabs .tab-content {
+  background-color: #212121;
+  border-color: #4f4f4f; }
+
+@media (prefers-color-scheme: dark) {
+  body.colorscheme-auto .tabs label.tab-label {
+    background-color: #424242;
+    border-color: #4f4f4f; }
+  body.colorscheme-auto .tabs input.tab-input:checked + label.tab-label {
+    background-color: #212121; }
+  body.colorscheme-auto .tabs .tab-content {
+    background-color: #212121;
+    border-color: #4f4f4f; } }
+
 body.colorscheme-dark .taxonomy-element {
   background-color: #424242; }
   body.colorscheme-dark .taxonomy-element a {

exampleSite/resources/_gen/assets/scss/scss/coder.scss_fd4b5b3f9a48bc0c7f005d2f7a4cc30f.content

@@ -3147,7 +3147,7 @@ strong {
 
 .highlight > div,
 .highlight > pre {
-  margin: 0 0 2rem;
+  margin: 2rem 0 2rem;
   padding: 1rem;
   border-radius: 1rem; }
 
@@ -3576,6 +3576,55 @@ figure {
         text-align: center;
         width: 3.2rem; }
 
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 2rem 0 2rem 0;
+  position: relative; }
+  .tabs.tabs-left {
+    justify-content: flex-start; }
+    .tabs.tabs-left label.tab-label {
+      margin-right: 0.5rem; }
+    .tabs.tabs-left .tab-content {
+      border-radius: 0px 4px 4px 4px; }
+  .tabs.tabs-right {
+    justify-content: flex-end; }
+    .tabs.tabs-right label.tab-label {
+      margin-left: 0.5rem; }
+    .tabs.tabs-right .tab-content {
+      border-radius: 4px 0px 4px 4px; }
+  .tabs input.tab-input {
+    display: none; }
+  .tabs label.tab-label {
+    background-color: #e0e0e0;
+    border-color: #ccc;
+    border-radius: 4px 4px 0px 0px;
+    border-style: solid;
+    border-bottom-style: hidden;
+    border-width: 1px;
+    cursor: pointer;
+    display: inline-block;
+    order: 1;
+    padding: 0.3rem 0.6rem;
+    position: relative;
+    top: 1px;
+    user-select: none; }
+  .tabs input.tab-input:checked + label.tab-label {
+    background-color: #fafafa; }
+  .tabs .tab-content {
+    background-color: #fafafa;
+    border-color: #ccc;
+    border-style: solid;
+    border-width: 1px;
+    display: none;
+    order: 2;
+    padding: 1rem;
+    width: 100%; }
+  .tabs.tabs-code .tab-content {
+    padding: 0.5rem; }
+    .tabs.tabs-code .tab-content pre {
+      margin: 0; }
+
 .taxonomy li {
   display: inline-block;
   margin: 0.9rem; }

layouts/shortcodes/tab.html

@@ -0,0 +1,17 @@
+{{ $group := .Page.Scratch.Get "tabGroupIndex" | default 0 }}
+{{ $index := .Page.Scratch.Get "tabElementIndex" | default 0 }}
+{{ $name := .Get "name" | default "Name Me!" }}
+
+<style>
+  .tabs input#tab-{{ $group }}-{{ $index }}:checked ~ .tab-content-{{ $group }}-{{ $index }} {
+    display: block;
+  }
+</style>
+
+<input type="radio" class="tab-input" name="tab-select-{{ $group }}" id="tab-{{ $group }}-{{ $index }}" {{ if eq $index 0 }}checked{{ end }}/>
+<label for="tab-{{ $group }}-{{ $index }}" class="tab-label">{{ $name }}</label>
+<div class="tab-content tab-content-{{ $group }}-{{ $index }}">
+  {{ .Inner | markdownify }}
+</div>
+
+{{ .Page.Scratch.Set "tabElementIndex" (add 1 $index) }}

layouts/shortcodes/tabgroup.html

@@ -0,0 +1,10 @@
+{{ $align := .Get "align" | default "left" }}
+{{ $style := .Get "style" | default "markdown" }}
+{{ $group := .Page.Scratch.Get "tabGroupIndex" | default 0 }}
+{{ $index := .Page.Scratch.Set "tabElementIndex" 0 }}
+
+<div class="tabs {{ if eq $style "code" }}tabs-code {{ end }}tabs-{{ $align }}">
+  {{ .Inner }}
+</div>
+
+{{ .Page.Scratch.Set "tabGroupIndex" (add 1 $group) }}

resources/_gen/assets/scss/scss/coder-dark.scss_1fcd9040f1144c65015c77e7b93bc5ac.json

@@ -1 +1 @@
-{"Target":"css/coder-dark.min.002ee2378e14c7a68f1f0a53d9694ed252090987c4e768023fac694a4fc5f793.css","MediaType":"text/css","Data":{"Integrity":"sha256-AC7iN44Ux6aPHwpT2WlO0lIJCYfE52gCP6xpSk/F95M="}}
+{"Target":"css/coder-dark.min.39e41a7f16bdf8cb16e43cae7d714fa1016f1d2d2898a5b3f27f42c9979204e2.css","MediaType":"text/css","Data":{"Integrity":"sha256-OeQafxa9+MsW5DyufXFPoQFvHS0omKWz8n9CyZeSBOI="}}

resources/_gen/assets/scss/scss/coder-dark.scss_9e20ccd2d8034c8e0fd83b11fb6e2bd5.content

@@ -233,6 +233,27 @@ body.colorscheme-dark .navigation .menu-button i:hover, body.colorscheme-dark .n
   body.colorscheme-auto .navigation .menu-button i:hover, body.colorscheme-auto .navigation .menu-button i:focus {
     color: #dadada; } }
 
+body.colorscheme-dark .tabs label.tab-label {
+  background-color: #424242;
+  border-color: #4f4f4f; }
+
+body.colorscheme-dark .tabs input.tab-input:checked + label.tab-label {
+  background-color: #212121; }
+
+body.colorscheme-dark .tabs .tab-content {
+  background-color: #212121;
+  border-color: #4f4f4f; }
+
+@media (prefers-color-scheme: dark) {
+  body.colorscheme-auto .tabs label.tab-label {
+    background-color: #424242;
+    border-color: #4f4f4f; }
+  body.colorscheme-auto .tabs input.tab-input:checked + label.tab-label {
+    background-color: #212121; }
+  body.colorscheme-auto .tabs .tab-content {
+    background-color: #212121;
+    border-color: #4f4f4f; } }
+
 body.colorscheme-dark .taxonomy-element {
   background-color: #424242; }
   body.colorscheme-dark .taxonomy-element a {

resources/_gen/assets/scss/scss/coder.scss_5e1eb8e37c42cdfb6215b61e44dcfa5f.json

@@ -1 +1 @@
-{"Target":"css/coder.min.d9fddbffe6f27e69985dc5fe0471cdb0e57fbf4775714bc3d847accb08f4a1f6.css","MediaType":"text/css","Data":{"Integrity":"sha256-2f3b/+byfmmYXcX+BHHNsOV/v0d1cUvD2Eesywj0ofY="}}
+{"Target":"css/coder.min.6b1a4fbc48955b72aea7913e43fabeb45e8bc120da5aa41b598dd33adcac4b59.css","MediaType":"text/css","Data":{"Integrity":"sha256-axpPvEiVW3Kup5E+Q/q+tF6LwSDaWqQbWY3TOtysS1k="}}

resources/_gen/assets/scss/scss/coder.scss_fd4b5b3f9a48bc0c7f005d2f7a4cc30f.content

@@ -3147,7 +3147,7 @@ strong {
 
 .highlight > div,
 .highlight > pre {
-  margin: 0 0 2rem;
+  margin: 2rem 0 2rem;
   padding: 1rem;
   border-radius: 1rem; }
 
@@ -3576,6 +3576,55 @@ figure {
         text-align: center;
         width: 3.2rem; }
 
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 2rem 0 2rem 0;
+  position: relative; }
+  .tabs.tabs-left {
+    justify-content: flex-start; }
+    .tabs.tabs-left label.tab-label {
+      margin-right: 0.5rem; }
+    .tabs.tabs-left .tab-content {
+      border-radius: 0px 4px 4px 4px; }
+  .tabs.tabs-right {
+    justify-content: flex-end; }
+    .tabs.tabs-right label.tab-label {
+      margin-left: 0.5rem; }
+    .tabs.tabs-right .tab-content {
+      border-radius: 4px 0px 4px 4px; }
+  .tabs input.tab-input {
+    display: none; }
+  .tabs label.tab-label {
+    background-color: #e0e0e0;
+    border-color: #ccc;
+    border-radius: 4px 4px 0px 0px;
+    border-style: solid;
+    border-bottom-style: hidden;
+    border-width: 1px;
+    cursor: pointer;
+    display: inline-block;
+    order: 1;
+    padding: 0.3rem 0.6rem;
+    position: relative;
+    top: 1px;
+    user-select: none; }
+  .tabs input.tab-input:checked + label.tab-label {
+    background-color: #fafafa; }
+  .tabs .tab-content {
+    background-color: #fafafa;
+    border-color: #ccc;
+    border-style: solid;
+    border-width: 1px;
+    display: none;
+    order: 2;
+    padding: 1rem;
+    width: 100%; }
+  .tabs.tabs-code .tab-content {
+    padding: 0.5rem; }
+    .tabs.tabs-code .tab-content pre {
+      margin: 0; }
+
 .taxonomy li {
   display: inline-block;
   margin: 0.9rem; }