kienan
/
hugo-theme-zzo
mirror of https://github.com/zzossig/hugo-theme-zzo.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

tabs shortcode added

This commit is contained in:
zzossig 2020-01-24 02:46:03 +09:00
parent 541bbd576d
commit d314aa4f85
19 changed files with 264 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
README.ko.md
View File

@ -1056,7 +1056,7 @@ Some markdown contents
{{< /boxmd >}}
```
### code / codes => Tabbed code-block. indentation matters.
### code / codes => 코드를 여러 버전으로 제공할 때 쓰세요. 들여쓰기 잘못하면 이상하게 나와요.
`````
{{< codes java javascript >}}
@ -1071,4 +1071,32 @@ Some markdown contents
```
{{< /code >}}
{{< /codes >}}
`````
### tab / tabs => 여러 버전의 뷰를 제공할 때 쓰세요
`````
{{< tabs Windows MacOS Ubuntu >}}
{{< tab >}}
### Windows section
```javascript
console.log('Hello World!');
```
{{< /tab >}}
{{< tab >}}
### MacOS section
Hello world!
{{< /tab >}}
{{< tab >}}
### Ubuntu section
Great!
{{< /tab >}}
{{< /tabs >}}
`````

28
README.md
View File

@ -1065,3 +1065,31 @@ Some markdown contents
{{< /code >}}
{{< /codes >}}
`````
### tab / tabs => Tabs make it easy to explore and switch between different views
`````
{{< tabs Windows MacOS Ubuntu >}}
{{< tab >}}
### Windows section
```javascript
console.log('Hello World!');
```
{{< /tab >}}
{{< tab >}}
### MacOS section
Hello world!
{{< /tab >}}
{{< tab >}}
### Ubuntu section
Great!
{{< /tab >}}
{{< /tabs >}}
`````

59
assets/sass/components/_codetab.scss Normal file
View File

@ -0,0 +1,59 @@
.codetab {
position: relative;
&__links {
position: absolute;
top: 0;
left: 0;
height: 30px;
z-index: z('clipboard');
border-top-left-radius: 0.25rem;
@include flexbox();
@include align-items(center);
@include justify-content(flex-start);
@include themify($codeblock) {
background-color: themed('content-pre-header-background-color');
}
}
&__link {
height: 30px;
border: none;
outline: none;
cursor: pointer;
font-size: 13.8px;
font-family: $title-font;
text-transform: capitalize;
padding: 0.25rem 0.5rem;
&:first-child {
border-top-left-radius: 0.25rem;
}
@include transition(all, 0.2s, ease-in);
@include themify($themes) {
color: themed('navbar-title-color');
border-top: 1px solid transparent;
&.active {
border-top: 1px solid themed('content-pre-header-background-color');
}
}
@include themify($codeblock) {
background-color: themed('content-pre-header-background-color');
&.active {
background-color: themed('content-pre-background-color');
}
@include on-event {
background-color: themed('content-pre-background-color');
}
}
}
&__content {
display: none;
}
}

8
assets/sass/components/_donation.scss
View File

@ -16,6 +16,7 @@
&__message {
padding: 0.5rem;
font-size: 18px;
line-height: 18px;
font-weight: bold;
font-family: $title-font;
@ -26,8 +27,7 @@
&__item {
font-family: $title-font;
font-size: 0.8rem;
padding: 0.125rem;
padding-right: 0.25rem;
padding: 0.1rem 0.325rem 0.1rem 0.25rem;
cursor: pointer;
border-radius: 0.25rem;
margin: 0.25rem;
@ -46,6 +46,10 @@
@include transition(color, 0.2s, ease);
}
}
svg {
margin-right: 0.25rem;
}
}
&__dropup {

43
assets/sass/components/_tab.scss
View File

@ -1,59 +1,58 @@
.tab {
position: relative;
padding: 0.5rem 0;
margin: 2rem 0;
&__links {
position: absolute;
top: 0;
left: 0;
height: 30px;
z-index: z('clipboard');
border-top-left-radius: 0.25rem;
@include flexbox();
@include align-items(center);
@include justify-content(flex-start);
@include themify($codeblock) {
background-color: themed('content-pre-header-background-color');
@include themify($themes) {
}
}
&__link {
height: 30px;
border: none;
outline: none;
border: none;
cursor: pointer;
font-size: 13.8px;
font-family: $title-font;
text-transform: capitalize;
padding: 0.25rem 0.5rem;
&:first-child {
border-top-left-radius: 0.25rem;
}
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
@include transition(all, 0.2s, ease-in);
@include themify($themes) {
color: themed('navbar-title-color');
border-top: 1px solid transparent;
&.active {
border-top: 1px solid themed('content-pre-header-background-color');
}
}
@include themify($codeblock) {
background-color: themed('content-pre-header-background-color');
background-color: themed('body-background-color');
&.active {
background-color: themed('content-pre-background-color');
height: 32px;
background-color: themed('body-background-color');
border: 1px solid themed('hr-color');
border-bottom: none;
}
@include on-event {
background-color: themed('content-pre-background-color');
color: themed('navbar-title-hover-color');
background-color: themed('content-pre-header-background-color');
}
}
}
&__content {
display: none;
padding: 0 0.5rem;
border-radius: 0.25rem;
border-top-left-radius: 0;
@include themify($themes) {
border: 1px solid themed('hr-color');
background-color: themed('body-background-color');
}
}
}

6
assets/sass/layout/_grid.scss
View File

@ -71,9 +71,11 @@ $grid_column_gap: $grid_column_gap_width + $grid_column_gap_unit;
grid-column-gap: 16px;
grid-row-gap: 0px;
@if $sidebar_position == "left" {
&[data-sidebar-position="left"] {
grid-template-columns: 266px 1fr 1fr;
} @else {
}
&[data-sidebar-position="right"] {
grid-template-columns: 1fr 1fr 266px;
}
}

5
assets/sass/main.scss
View File

@ -9,8 +9,6 @@ $grid_column_gap_unit: {{ .Site.Data.grid.grid_column_gap_unit }};
$grid_navbar_height: {{ .Site.Data.grid.grid_navbar_height }};
$grid_row_gap: {{ .Site.Data.grid.grid_row_gap }};
$sidebar_position: {{ .Site.Params.sidebarPosition }};
$theme_light_chroma: {{ .Site.Data.skin.theme_light_chroma }};
$theme_dark_chroma: {{ .Site.Data.skin.theme_dark_chroma }};
$theme_hacker_chroma: {{ .Site.Data.skin.theme_hacker_chroma }};
@ -70,8 +68,9 @@ $cursive-font: {{ .Site.Data.font.cursive_font }};
@import 'components/donation';
@import 'components/box';
@import 'components/modal';
@import 'components/tab';
@import 'components/codetab';
@import 'components/ie';
@import 'components/tab';
@import 'pages/404';
@import 'pages/about';

2
assets/sass/themes/_hacker.scss
View File

@ -6,7 +6,7 @@ $hacker: (
title-color: #A1AD64,
meta-color: #CDF5CC,
body-color: #1FFF2A,
hr-color: #C7BA00,
hr-color: #6B6B6B,
body-background-color: #151715,
backdrop-background-color: #111,
dropdown-border-top-color: #6B6B6B,

2
exampleSite/resources/_gen/assets/scss/sass/main.scss_b4f67ac5085b89b62b54c1923e5a9145.content
View File

File diff suppressed because one or more lines are too long

2
layouts/_default/list.html
View File

@ -3,7 +3,7 @@
{{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
<script src="{{ $enquire.RelPermalink }}"></script>
<main class="main inner">
<main class="main inner" data-sidebar-position="{{ $.Param "sidebarPosition" }}">
<div class="list__main {{ if $.Param "enableSidebar" }}{{ if eq .Site.Params.sidebarPosition "left" }}mr{{ else }}lm{{ end }}{{ else }}lmr{{ end }}">
{{ partial "body/breadcrumb" . }}
<header class="list__header">

2
layouts/_default/taxonomy.html
View File

@ -3,7 +3,7 @@
{{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
<script src="{{ $enquire.RelPermalink }}"></script>
<main class="main inner">
<main class="main inner" data-sidebar-position="{{ $.Param "sidebarPosition" }}">
<div class="list__main {{ if $.Param "enableSidebar" }}{{ if eq .Site.Params.sidebarPosition "left" }}mr{{ else }}lm{{ end }}{{ else }}lmr{{ end }}">
{{ partial "body/breadcrumb" . }}
<header class="list__header">

2
layouts/index.html
View File

@ -5,7 +5,7 @@
{{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
<script src="{{ $enquire.RelPermalink }}"></script>
<main class="main inner">
<main class="main inner" data-sidebar-position="{{ $.Param "sidebarPosition" }}">
<div class="list__main {{ if $.Param "enableSidebar" }}{{ if eq .Site.Params.sidebarPosition "left" }}mr{{ else }}lm{{ end }}{{ else }}lmr{{ end }}">
<div class="summary__container">
{{ $filteredPages := .Site.RegularPages }}

18
layouts/partials/body/share.html
View File

@ -10,42 +10,42 @@
{{ range $.Param "share.options" }}
{{ if eq (lower .) "facebook" }}
<a href="https://www.facebook.com/sharer/sharer.php?u={{ $ctx.Permalink | absLangURL }}" title="{{ . }}" aria-label="{{ . }}" class="donation__item" target="_blank" rel="noreferrer">
{{ partial "svgs/share/facebook.svg" (dict "width" 22 "height" 22) }}
{{ partial "svgs/share/facebook.svg" (dict "width" 23 "height" 23) }}
{{ i18n "facebook" | default "Facebook" }}
</a>
{{ else if eq (lower .) "twitter" }}
<a href="https://twitter.com/intent/tweet?text={{ $ctx.Title }}" title="{{ . }}" aria-label="{{ . }}" class="donation__item" target="_blank" rel="noreferrer">
{{ partial "svgs/share/twitter.svg" (dict "width" 22 "height" 22) }}
<a href="https://twitter.com/intent/tweet?text={{ $ctx.Title }}&url={{ $ctx.Permalink | absLangURL }}{{ with $ctx.Params.tags }}&hashtags={{ delimit . "," }}{{ end }}{{ with $ctx.Params.author }}&via={{ . }}{{ end }}" title="{{ . }}" aria-label="{{ . }}" class="donation__item" target="_blank" rel="noreferrer">
{{ partial "svgs/share/twitter.svg" (dict "width" 23 "height" 23) }}
{{ i18n "twitter" | default "Twitter" }}
</a>
{{ else if eq (lower .) "reddit" }}
<a href="https://www.reddit.com/submit?url={{ $ctx.Permalink | absLangURL }}&amp;title={{ $ctx.Title }}" target="_blank" rel="noreferer" title="{{ . }}" onclick="window.open('http://www.reddit.com/submit?url=' + encodeURIComponent(document.URL) + '&amp;title=' + encodeURIComponent(document.title)); return false;" class="donation__item">
{{ partial "svgs/share/reddit.svg" (dict "width" 22 "height" 22) }}
{{ partial "svgs/share/reddit.svg" (dict "width" 23 "height" 23) }}
{{ i18n "reddit" | default "Reddit" }}
</a>
{{ else if eq (lower .) "linkedin" }}
<a href="https://www.linkedin.com/shareArticle?mini=true&url={{ $ctx.Permalink | absLangURL }}&title={{ $ctx.Title }} &summary={{ $ctx.Description }}&source={{ $site.Params.Description }}" target="_blank" rel="noreferer" title="{{ . }}" class="donation__item">
{{ partial "svgs/share/linkedin.svg" (dict "width" 22 "height" 22) }}
{{ partial "svgs/share/linkedin.svg" (dict "width" 23 "height" 23) }}
{{ i18n "linkedin" | default "LinkedIn" }}
</a>
{{ else if eq (lower .) "tumblr" }}
<a href="http://tumblr.com/widgets/share/tool?canonicalUrl={{ $ctx.Permalink | absLangURL }}&data-title={{ $ctx.Title }}&data-content={{ $ctx.Description }}" class="donation__item" target="_blank" rel="noreferer">
{{ partial "svgs/share/tumblr.svg" (dict "width" 22 "height" 22) }}
{{ partial "svgs/share/tumblr.svg" (dict "width" 23 "height" 23) }}
{{ i18n "tumblr" | default "Tumblr" }}
</a>
{{ else if eq (lower .) "weibo" }}
<a href="javascript:void(function(){var d=document,e=encodeURIComponent,s1=window.getSelection,s2=d.getSelection,s3=d.selection,s=s1?s1():s2?s2():s3?s3.createRange().text:'',r='http://service.weibo.com/share/share.php?url='+e(d.location.href)+'&title='+e(d.title),x=function(){if(!window.open(r,'weibo','toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330'))location.href=r+'&r=1'};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})()" class="donation__item" target="_blank" rel="noreferer">
{{ partial "svgs/share/weibo.svg" (dict "width" 22 "height" 22) }}
{{ partial "svgs/share/weibo.svg" (dict "width" 23 "height" 23) }}
{{ i18n "weibo" | default "Weibo" }}
</a>
{{ else if eq (lower .) "douban" }}
<a href="javascript:void(function(){var d=document,e=encodeURIComponent,s1=window.getSelection,s2=d.getSelection,s3=d.selection,s=s1?s1():s2?s2():s3?s3.createRange().text:'',r='https://www.douban.com/recommend/?url='+e(d.location.href)+'&title='+e(d.title)+'&sel='+e(s)+'&v=1',w=450,h=330,x=function(){if(!window.open(r,'douban','toolbar=0,resizable=1,scrollbars=yes,status=1,width='+w+',height='+h+',left='+(screen.width-w)/2+',top='+(screen.height-h)/2))location.href=r+'&r=1'};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})()" class="donation__item" target="_blank" rel="noreferer">
{{ partial "svgs/share/douban.svg" (dict "width" 22 "height" 22) }}
{{ partial "svgs/share/douban.svg" (dict "width" 23 "height" 23) }}
{{ i18n "douban" | default "Douban" }}
</a>
{{ else if eq (lower .) "line" }}
<a href="https://social-plugins.line.me/lineit/share?url={{ $ctx.Permalink | absLangURL }}" class="donation__item" target="_blank" rel="noreferer">
{{ partial "svgs/share/line.svg" (dict "width" 22 "height" 22) }}
{{ partial "svgs/share/line.svg" (dict "width" 23 "height" 23) }}
{{ i18n "line" | default "Line" }}
</a>
{{ end }}

31
layouts/partials/head/scripts.html
View File

@ -105,6 +105,35 @@
// =============================================================
// ========================== codetab ==========================
document.querySelectorAll('.codetab') ?
document.querySelectorAll('.codetab').forEach(function(elem, idx) {
var containerId = elem.getAttribute('id');
var containerElem = elem;
var codetabLinks = elem.querySelectorAll('.codetab__link');
var codetabContents = elem.querySelectorAll('.codetab__content');
var ids = [];
codetabLinks && codetabLinks.length > 0 ?
codetabLinks.forEach(function(link, index, self) {
link.onclick = function(e) {
for (var i = 0; i < self.length; i++) {
if (index === parseInt(i, 10)) {
if (!self[i].classList.contains('active')) {
self[i].classList.add('active');
codetabContents[i].style.display = 'block';
}
} else {
self[i].classList.remove('active');
codetabContents[i].style.display = 'none';
}
}
}
}) : null;
}) : null;
// =============================================================
// ========================= go to top =========================
var gttBtn = document.getElementById("gtt");
gttBtn.style.display = "none";
@ -281,8 +310,6 @@
// ========================== navbar ==========================
var navbarBurgerElem = document.querySelector('.navbar__burger');
var navbarMenuElem = document.querySelector('.navbar__menu');
console.log(navbarBurgerElem);
console.log(navbarMenuElem);
navbarBurgerElem ?
navbarBurgerElem.addEventListener('click', function () {
if (navbarBurgerElem.classList.contains('is-active')) {

2
layouts/shortcodes/code.html
View File

@ -1,4 +1,4 @@
{{ $id := substr (md5 .Inner) 0 16 }}
<div id="{{ $id }}" class="tab__content">
<div id="{{ $id }}" class="codetab__content">
{{ .Inner | markdownify }}
</div>

38
layouts/shortcodes/codes.html
View File

@ -1,8 +1,8 @@
{{ $id := substr (md5 .Inner) 0 16 }}
<div id="{{ $id }}" class="tab">
<div class="tab__links">
<div id="{{ $id }}" class="codetab">
<div class="codetab__links">
{{ range .Params }}
<button class="tab__link" aria-label="Tab link">{{ . }}</button>
<button class="codetab__link" aria-label="Tab link">{{ . }}</button>
{{ end }}
</div>
{{ .Inner }}
@ -13,35 +13,35 @@
var containerId = JSON.parse({{ $id | jsonify }});
var containerElem = document.getElementById(containerId);
var tabLinks = null;
var tabContents = null;
var codetabLinks = null;
var codetabContents = null;
var ids = [];
if (containerElem) {
tabLinks = containerElem.querySelectorAll('.tab__link');
tabContents = containerElem.querySelectorAll('.tab__content');
codetabLinks = containerElem.querySelectorAll('.codetab__link');
codetabContents = containerElem.querySelectorAll('.codetab__content');
}
for (var i = 0; i < tabContents.length; i++) {
ids = ids.concat(tabContents[i].getAttribute('id'));
tabContents[i].style.display = 'none';
for (var i = 0; i < codetabContents.length; i++) {
ids = ids.concat(codetabContents[i].getAttribute('id'));
codetabContents[i].style.display = 'none';
if (0 === parseInt(i, 10) && !tabContents[i].classList.contains('active')) {
tabContents[i].classList.add('active');
if (0 === parseInt(i, 10) && !codetabContents[i].classList.contains('active')) {
codetabContents[i].classList.add('active');
}
}
for (var i = 0; i < tabLinks.length; i++) {
tabLinks[i].setAttribute('id', ids[i]);
for (var i = 0; i < codetabLinks.length; i++) {
codetabLinks[i].setAttribute('id', ids[i]);
if (0 === parseInt(i, 10) && !tabLinks[i].classList.contains('active')) {
tabLinks[i].classList.add('active');
if (0 === parseInt(i, 10) && !codetabLinks[i].classList.contains('active')) {
codetabLinks[i].classList.add('active');
} else {
tabLinks[i].classList.remove('active');
codetabLinks[i].classList.remove('active');
}
}
if (tabContents.length > 0) {
tabContents[0].style.display = 'block';
if (codetabContents.length > 0) {
codetabContents[0].style.display = 'block';
}
</script>

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

@ -0,0 +1,4 @@
{{ $id := substr (md5 .Inner) 0 16 }}
<div id="{{ $id }}" class="tab__content">
{{ .Inner | markdownify }}
</div>

47
layouts/shortcodes/tabs.html Normal file
View File

@ -0,0 +1,47 @@
{{ $id := substr (md5 .Inner) 0 16 }}
<div id="{{ $id }}" class="tab">
<div class="tab__links">
{{ range .Params }}
<button class="tab__link" aria-label="Tab link">{{ . }}</button>
{{ end }}
</div>
{{ .Inner }}
</div>
<script>
'use strict';
var containerId = JSON.parse({{ $id | jsonify }});
var containerElem = document.getElementById(containerId);
var tabLinks = null;
var tabContents = null;
var ids = [];
if (containerElem) {
tabLinks = containerElem.querySelectorAll('.tab__link');
tabContents = containerElem.querySelectorAll('.tab__content');
}
for (var i = 0; i < tabContents.length; i++) {
ids = ids.concat(tabContents[i].getAttribute('id'));
tabContents[i].style.display = 'none';
if (0 === parseInt(i, 10) && !tabContents[i].classList.contains('active')) {
tabContents[i].classList.add('active');
}
}
for (var i = 0; i < tabLinks.length; i++) {
tabLinks[i].setAttribute('id', ids[i]);
if (0 === parseInt(i, 10) && !tabLinks[i].classList.contains('active')) {
tabLinks[i].classList.add('active');
} else {
tabLinks[i].classList.remove('active');
}
}
if (tabContents.length > 0) {
tabContents[0].style.display = 'block';
}
</script>

2
layouts/showcase/list.html
View File

@ -1,5 +1,5 @@
{{ define "main" }}
<main class="main showcase inner">
<main class="main showcase inner" data-sidebar-position="{{ $.Param "sidebarPosition" }}">
{{ if .Params.enableBio }}
<aside class="{{ if eq .Site.Params.sidebarPosition "left" }}l{{ else }}r{{ end }}">
<div class="showcase__bio">