From cd821de380eac625b5fe72d97b76b0c7a9d10fa8 Mon Sep 17 00:00:00 2001 From: George <31376482+george-gca@users.noreply.github.com> Date: Thu, 2 May 2024 14:34:48 -0300 Subject: [PATCH] Added support for jekyll-tabs (#2380) Added support for [jekyll-tabs](https://github.com/Ovski4/jekyll-tabs), implemented #1977. Light: ![image](https://github.com/alshedivat/al-folio/assets/31376482/a3efdd92-1c0b-4ce7-8b34-2b052b75351b) Dark: ![image](https://github.com/alshedivat/al-folio/assets/31376482/d0fb7091-8776-4838-8e70-c07435463e0a) --------- Signed-off-by: George Araujo --- Gemfile | 1 + _config.yml | 1 + _includes/scripts/jekyll_tabs.liquid | 3 + _layouts/default.liquid | 1 + _posts/2024-05-01-tabs.md | 122 +++++++++++++++++++++++++++ _sass/_tabs.scss | 48 +++++++++++ assets/css/main.scss | 1 + assets/js/tabs.min.js | 5 ++ 8 files changed, 182 insertions(+) create mode 100644 _includes/scripts/jekyll_tabs.liquid create mode 100644 _posts/2024-05-01-tabs.md create mode 100644 _sass/_tabs.scss create mode 100644 assets/js/tabs.min.js diff --git a/Gemfile b/Gemfile index 46ff643db862..453c17edeb38 100644 --- a/Gemfile +++ b/Gemfile @@ -13,6 +13,7 @@ group :jekyll_plugins do gem 'jekyll-paginate-v2' gem 'jekyll-scholar' gem 'jekyll-sitemap' + gem 'jekyll-tabs' gem 'jekyll-toc' gem 'jekyll-twitter-plugin' gem 'jemoji' diff --git a/_config.yml b/_config.yml index f3c8113bc252..531e3c622aea 100644 --- a/_config.yml +++ b/_config.yml @@ -245,6 +245,7 @@ plugins: - jekyll-paginate-v2 - jekyll/scholar - jekyll-sitemap + - jekyll-tabs - jekyll-toc - jekyll-twitter-plugin - jemoji diff --git a/_includes/scripts/jekyll_tabs.liquid b/_includes/scripts/jekyll_tabs.liquid new file mode 100644 index 000000000000..57d08ac91205 --- /dev/null +++ b/_includes/scripts/jekyll_tabs.liquid @@ -0,0 +1,3 @@ +{% if page.tabs %} + +{% endif %} diff --git a/_layouts/default.liquid b/_layouts/default.liquid index 0a5337d2b560..b4251d2fffc2 100644 --- a/_layouts/default.liquid +++ b/_layouts/default.liquid @@ -70,5 +70,6 @@ {% include scripts/progressBar.liquid %} {% include scripts/wechatModal.liquid %} {% include scripts/imageLayouts.liquid %} + {% include scripts/jekyll_tabs.liquid %} diff --git a/_posts/2024-05-01-tabs.md b/_posts/2024-05-01-tabs.md new file mode 100644 index 000000000000..f3d6e2d2211e --- /dev/null +++ b/_posts/2024-05-01-tabs.md @@ -0,0 +1,122 @@ +--- +layout: post +title: a post with tabs +date: 2024-05-01 00:32:13 +description: this is what included tabs in a post could look like +tags: formatting code +categories: sample-posts +tabs: true +--- + +This is how a post with [tabs](https://github.com/Ovski4/jekyll-tabs) looks like. Note that the tabs could be used for different purposes, not only for code. + +## First tabs + +To add tabs, use the following syntax: + +{% raw %} + +```liquid +{% tabs group-name %} + +{% tab group-name tab-name-1 %} + +Content 1 + +{% endtab %} + +{% tab group-name tab-name-2 %} + +Content 2 + +{% endtab %} + +{% endtabs %} +``` + +{% endraw %} + +With this you can generate visualizations like: + +{% tabs log %} + +{% tab log php %} + +```php +var_dump('hello'); +``` + +{% endtab %} + +{% tab log js %} + +```javascript +console.log("hello"); +``` + +{% endtab %} + +{% tab log ruby %} + +```javascript +pputs 'hello' +``` + +{% endtab %} + +{% endtabs %} + +## Another example + +{% tabs data-struct %} + +{% tab data-struct yaml %} + +```yaml +hello: + - "whatsup" + - "hi" +``` + +{% endtab %} + +{% tab data-struct json %} + +```json +{ + "hello": ["whatsup", "hi"] +} +``` + +{% endtab %} + +{% endtabs %} + +## Tabs for something else + +{% tabs something-else %} + +{% tab something-else text %} + +Regular text + +{% endtab %} + +{% tab something-else quote %} + +> A quote + +{% endtab %} + +{% tab something-else list %} + +Hipster list + +- brunch +- fixie +- raybans +- messenger bag + +{% endtab %} + +{% endtabs %} diff --git a/_sass/_tabs.scss b/_sass/_tabs.scss new file mode 100644 index 000000000000..107007ed813e --- /dev/null +++ b/_sass/_tabs.scss @@ -0,0 +1,48 @@ +.tab { + display: flex; + flex-wrap: wrap; + margin-left: -20px; + padding: 0; + list-style: none; + position: relative; +} + +.tab > * { + flex: none; + padding-left: 20px; + position: relative; +} + +.tab > * > a { + display: block; + text-align: center; + padding: 9px 20px; + color: var(--global-text-color-light); + border-bottom: 2px solid transparent; + border-bottom-color: transparent; + font-size: 12px; + text-transform: uppercase; + transition: color 0.1s ease-in-out; + line-height: 20px; +} + +.tab > .active > a { + color: var(--global-text-color); + border-color: var(--global-theme-color); +} + +.tab > li > a { + text-decoration: none; + cursor: pointer; +} + +.tab-content { + padding: 0; +} + +.tab-content > li { + display: none; +} +.tab-content > li.active { + display: block; +} diff --git a/assets/css/main.scss b/assets/css/main.scss index b2160f62b1b2..8fa1d3cbfd1b 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -13,6 +13,7 @@ $max-content-width: {{ site.max_width }}; "base", "distill", "cv", + "tabs", "typograms", "font-awesome/fontawesome", "font-awesome/brands", diff --git a/assets/js/tabs.min.js b/assets/js/tabs.min.js new file mode 100644 index 000000000000..0c86ebe763ee --- /dev/null +++ b/assets/js/tabs.min.js @@ -0,0 +1,5 @@ +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.jekyllTabs=t():e.jekyllTabs=t()}(self,(()=>(()=>{"use strict";var e={973:(e,t,o)=>{o.r(t),o.d(t,{addClass:()=>r,createElementFromHTML:()=>s,findElementsWithTextContent:()=>n,getChildPosition:()=>a});const a=e=>{const t=e.parentNode;for(let o=0;o{const o=document.querySelectorAll(e),a=[];for(let e=0;e{const t=document.createElement("template");return t.innerHTML=e.trim(),t.content.firstChild},r=(e,t,o)=>{e.className=e.className?`${e.className} ${t}`:t,setTimeout((()=>{e.className=e.className.replace(t,"").trim()}),o)}},39:(e,t,o)=>{o.r(t),o.d(t,{activateTabFromUrl:()=>d,addCopyToClipboardButtons:()=>u,appendToastMessageHTML:()=>b,copyToClipboard:()=>c,handleTabClicked:()=>i,removeActiveClasses:()=>l,syncTabsWithSameLabels:()=>y,updateUrlWithActiveTab:()=>p});const{getChildPosition:a,createElementFromHTML:n,findElementsWithTextContent:s,addClass:r}=o(973),l=e=>{const t=e.querySelectorAll("ul > li");Array.prototype.forEach.call(t,(e=>{e.classList.remove("active")}))},i=e=>{const t=e.parentNode,o=t.parentNode,n=a(t);if(t.className.includes("active"))return;const s=o.getAttribute("data-tab");if(!s)return;const r=document.getElementById(s);l(o),l(r),r.querySelectorAll("ul.tab-content > li")[n].classList.add("active"),t.classList.add("active")},c=(e,t)=>{if(navigator.clipboard&&window.isSecureContext)navigator.clipboard.writeText(e);else{const t=document.createElement("textarea");t.value=e,t.style.position="absolute",t.style.left="-999999px",document.body.prepend(t),t.select();try{document.execCommand("copy")}catch(e){console.error(e)}finally{t.remove()}}"function"==typeof t&&t()},d=()=>{var e;const t=null===(e=window.location.hash)||void 0===e?void 0:e.substring(1);if(!t)return;const o=document.getElementById(t);if(!o)return;const a=new URLSearchParams(window.location.search).get("active_tab");if(!a)return;const n=o.querySelector("li#"+a+" > a");n&&i(n)},p=e=>{const t=e.parentNode,o=t.parentNode,a=new URLSearchParams(window.location.search);a.set("active_tab",t.id);const n=window.location.pathname+"?"+a.toString()+"#"+o.id;history.replaceState(null,"",n)},u=({buttonHTML:e,showToastMessageOnCopy:t,toastDuration:o})=>{const a=document.querySelectorAll("ul.tab-content > li pre");for(let s=0;s{m(o)}),i.addEventListener("click",(()=>{c(r.innerText,d)}))}},b=e=>{const t=document.createElement("div");t.id="jekyll-tabs-copy-to-clipboard-message",t.textContent=e,document.getElementsByTagName("body")[0].appendChild(t)},m=e=>{r(document.getElementById("jekyll-tabs-copy-to-clipboard-message"),"show",e)},y=e=>{const t=s("a",e.textContent);for(let o=0;o{for(var a in t)o.o(t,a)&&!o.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{o.r(a),o.d(a,{init:()=>i});const{activateTabFromUrl:e,updateUrlWithActiveTab:t,handleTabClicked:n,addCopyToClipboardButtons:s,syncTabsWithSameLabels:r,appendToastMessageHTML:l}=o(39),i=(o={})=>{const a={syncTabsWithSameLabels:!1,activateTabFromUrl:!1,addCopyToClipboardButtons:!1,copyToClipboardSettings:{buttonHTML:"",showToastMessageOnCopy:!1,toastMessage:"Code copied to clipboard",toastDuration:3e3}},i=Object.assign(Object.assign(Object.assign({},a),o),{copyToClipboardSettings:Object.assign(Object.assign({},a.copyToClipboardSettings),o.copyToClipboardSettings)}),c=document.querySelectorAll("ul.tab > li > a");if(Array.prototype.forEach.call(c,(e=>{e.addEventListener("click",(o=>{o.preventDefault(),n(e),i.activateTabFromUrl&&t(e),i.syncTabsWithSameLabels&&r(e)}),!1)})),i.addCopyToClipboardButtons){const e=i.copyToClipboardSettings;s(e),e.showToastMessageOnCopy&&l(e.toastMessage)}i.activateTabFromUrl&&e()}})(),a})())); + +window.addEventListener('load', function () { + jekyllTabs.init(); +}); \ No newline at end of file