Merge branch 'al-folio-main'

Gemfile

@@ -14,6 +14,7 @@ group :jekyll_plugins do
     gem 'jekyll-polyglot'
     gem 'jekyll-scholar'
     gem 'jekyll-sitemap'
+    gem 'jekyll-tabs'
     gem 'jekyll-toc'
     gem 'jekyll-twitter-plugin'
     gem 'jemoji'

_config.yml

@@ -236,6 +236,7 @@ plugins:
   - jekyll-polyglot
   - jekyll/scholar
   - jekyll-sitemap
+  - jekyll-tabs
   - jekyll-toc
   - jekyll-twitter-plugin
   - jemoji

_includes/scripts/jekyll_tabs.liquid

@@ -0,0 +1,3 @@
+{% if page.tabs %}
+  <script src="{{ '/assets/js/tabs.min.js' | relative_url | bust_file_cache }}"></script>
+{% endif %}

_layouts/default.liquid

@@ -75,5 +75,6 @@
     {% include scripts/progressBar.liquid %}
     {% include scripts/wechatModal.liquid %}
     {% include scripts/imageLayouts.liquid %}
+    {% include scripts/jekyll_tabs.liquid %}
   </body>
 </html>

_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 %}

_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;
+}

_sass/_themes.scss

@@ -57,7 +57,7 @@ html[data-theme="dark"] {
   --global-bg-color: #{$grey-color-dark};
   --global-code-bg-color: #{$code-bg-color-dark};
   --global-text-color: #{$grey-color-light};
-  --global-text-color-light: #{$grey-color-light};
+  --global-text-color-light: #{$grey-color};
   --global-theme-color: #{$cyan-color};
   --global-hover-color: #{$cyan-color};
   --global-hover-text-color: #{$white-color};

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",