13hannes11/hugo-coder-timeline
1
0
Fork 0
mirror of https://github.com/13hannes11/hugo-coder-timeline.git synced 2024-09-04 00:50:58 +02:00
Code Issues Projects Releases Wiki Activity

HTML/CSS only tabs (#678)

Browse Source 
* 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
This commit is contained in:
Codruț Constantin Gușoi
2022-05-29 19:43:09 +01:00
committed by GitHub
parent 9ea82c5c82
commit 5e4e500cdf
19 changed files with 418 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

@@ -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

2
assets/scss/_base.scss
View File

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

77
assets/scss/_tabs.scss Normal file
View File

@@ -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;
}
}
}
}

27
assets/scss/_tabs_dark.scss Normal file
View File

@@ -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();
}
}

2
assets/scss/_variables.scss
View File

@@ -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

1
assets/scss/coder-dark.scss
View File

@@ -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";

1
assets/scss/coder.scss
View File

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

4
exampleSite/config.toml
View File

@@ -84,8 +84,8 @@ stylesrc = [
"https://cdn.jsdelivr.net/"
]
scriptsrc = [
"'self'",
"'unsafe-inline'",
"'self'",
"'unsafe-inline'",
"https://www.google-analytics.com",
"https://cdn.jsdelivr.net/"
]

133
exampleSite/content/posts/html-and-css-only-tabs.md Normal file
View File

@@ -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.

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

@@ -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 {

51
exampleSite/resources/_gen/assets/scss/scss/coder.scss_fd4b5b3f9a48bc0c7f005d2f7a4cc30f.content
View File

@@ -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; }

17
layouts/shortcodes/tab.html Normal file
View File

@@ -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) }}

10
layouts/shortcodes/tabgroup.html Normal file
View File

@@ -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) }}

2
resources/_gen/assets/scss/scss/coder-dark.scss_1fcd9040f1144c65015c77e7b93bc5ac.content
View File

File diff suppressed because one or more lines are too long

2
resources/_gen/assets/scss/scss/coder-dark.scss_1fcd9040f1144c65015c77e7b93bc5ac.json
View File

@@ -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="}}

21
resources/_gen/assets/scss/scss/coder-dark.scss_9e20ccd2d8034c8e0fd83b11fb6e2bd5.content
View File

@@ -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 {

2
resources/_gen/assets/scss/scss/coder.scss_5e1eb8e37c42cdfb6215b61e44dcfa5f.content
View File

File diff suppressed because one or more lines are too long

2
resources/_gen/assets/scss/scss/coder.scss_5e1eb8e37c42cdfb6215b61e44dcfa5f.json
View File

@@ -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="}}

51
resources/_gen/assets/scss/scss/coder.scss_fd4b5b3f9a48bc0c7f005d2f7a4cc30f.content
View File

@@ -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; }