klise 1.0.1 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a7b9e5a649c9061c3bc5b95f9ec5e35d3b64142f2b5e2e9ed1c877a9dc9e3d34
-  data.tar.gz: 1fdb701edc67a471a1200c2429f9e4bcc0264c9e22d5193f609fef06e7fb307f
+  metadata.gz: dc8b52939500630b7e1e4fc48e93f7b3aecf28e824234b79717c7f6fa6e31120
+  data.tar.gz: 31d160ae8043ee92676cc2a33bb02e3038cfd2861af1b8e7cd52947ba5318774
 SHA512:
-  metadata.gz: 3980a7ee19dae324802266181ffddc007cc6dd94b971f12bcb33e925e28a87448d5b3db726219401da37cdb48350fdec3e3451a8e713116016b778296debcf2d
-  data.tar.gz: 9a6cf5513628c915d4e9eea29b0a0f99ebb9e637b5ca92cd4fce1b14ea60777d1e9d66d9d9674a4af4de232b1b453664e9ea4dd1b0fee97b369f38f019204956
+  metadata.gz: 67c5dc052e8feb591e3127f03adbb2053a3c7fd402c62a507c6c37a43e9ee68de76c9b79d4ec2d12c7a69d7bcf6e9991c4307e43eeabb63f0b0ccb5b8603f22a
+  data.tar.gz: 0d7bf3fbd21f4c1019f4e74047a9281e8be649e323998d10c78b40b329aae25653079f6aebe6abcde1a945bc7f60c069b65c2cfde6a323b6f96fcc35182e9ccf

data/README.md

@@ -5,15 +5,20 @@ For demo <a href="https://klise.now.sh" target="_blank" rel="noopener">klise.now
 
 ## Features
 
-- [x] Light & Dark Mode support :waxing_crescent_moon:
+- [x] Light & Dark Mode support, follows OS preference by default :waxing_crescent_moon:
 - [x] Customizable (using `.scss`)
 - [x] Responsive (desktop, tab and mobile)
+- [x] RTL / LTR text direction support
 - [x] Mobile First Design
 - [x] SEO Optimized
+- [x] schema.org structured data (JSON-LD)
 - [x] Images of post Organized ([`jekyll-postfiles`](https://github.com/nhoizey/jekyll-postfiles))
+- [x] Image lightbox (click an image in a post to zoom, no dependencies)
+- [x] Image gallery (`<div class="gallery">`) — neat responsive rows of images
 - [x] Generate Sitemap ([`jekyll-sitemap`](https://github.com/jekyll/jekyll-sitemap))
 - [x] RSS Feed ([`jekyll-feed`](https://github.com/jekyll/jekyll-feed))
 - [x] Syntax Highlighter ([`rouge`](https://github.com/rouge-ruby/rouge))
+- [x] Table of contents, opt-in per post with `toc: true`
 - [x] Next & Previous Post
 - [x] Comment layout, enable in frontmatter if you wish
 - [x] Google analytics
@@ -23,37 +28,59 @@ For demo <a href="https://klise.now.sh" target="_blank" rel="noopener">klise.now
 
 ![Lighthouse Result](./lighthouse.png)
 
-## Backlogs
-
-- [ ] Intergrated with PhotoSwipe.
-- [ ] Add schema.org meta information.
-- [ ] Transform class selector to BEM metodology.
-
 ## Installation
 
+Requires **Ruby >= 3.0** and **Jekyll ~> 4.4**.
+
 Run local server:
 
 ```bash
-git clone https://github.com/piharpi/jekyll-klise.git
-cd jekyll-klise
-bundle install
-bundle exec jekyll serve
+$ git clone https://github.com/piharpi/jekyll-klise.git
+$ cd jekyll-klise
+$ bundle install
+$ bundle exec jekyll serve
 ```
 
 Navigate to `localhost:4000`. You're Welcome, Fork and be Stargazer.
 
-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/piharpi/jekyll-klise) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/piharpi/jekyll-klise)
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/piharpi/jekyll-klise) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/piharpi/jekyll-klise) [![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=javascript-0000-jopapa#create/Microsoft.StaticApp)
+
+## Table of contents
+
+Add `toc: true` to a post's front matter to render an automatic table of
+contents (built from its `h2`/`h3` headings) above the article:
+
+```yaml
+---
+title: My post
+toc: true
+---
+```
+
+## Text direction (RTL)
+
+Set the site-wide direction in `_config.yml`:
+
+```yaml
+direction: rtl # "ltr" (default) | "rtl"
+```
+
+You can override it per page/post in the front matter with `direction: rtl`.
+Post content also resolves its direction per paragraph, so an LTR site can
+host individual RTL posts (and vice versa) without extra markup.
 
 ## Limitation
 
-- Since [`jekyll-postfiles`](https://github.com/nhoizey/jekyll-postfiles#compatibility) plugin isn't supported by github pages, this cause will make your site problems, path broken or post images won't show up, you can host alternatively using likes [netlify.com](https://netlify.com), [vercel.com](https://vercel.com) or [surge.sh](https://surge.sh) services, which support 3rd party.
+- Since [`jekyll-postfiles`](https://github.com/nhoizey/jekyll-postfiles#compatibility) plugin isn't supported by github pages, this cause will make your site problems, path broken or post images won't show up, you can host alternatively using likes [netlify.com](https://netlify.com), [vercel.com](https://vercel.com), [azure.com](https://docs.microsoft.com/azure/static-web-apps/publish-jekyll) or [surge.sh](https://surge.sh) services, which support 3rd party.
 
 ## Contributing
 
 If you see any typos or formatting errors in a post, or want to helping reduce backlogs or any other issue that needs to be addressed, please do not hesitate to open a pull request and fix it!, please read [contributing](./CONTRIBUTING.md) before PR.
 
 Yeaaa feel free to open a pull request.
+## Support
 
+[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/W7W7MJ4X) [![saweria.co](./assets/img/saweria-button.png)](https://saweria.co/piharpi)
 ## License
 
 This project is open source and available under the [MIT License](LICENSE).

data/_includes/footer.html

@@ -18,12 +18,20 @@
   </small>
 </footer>
 <script src="/assets/js/main.js" defer="defer"></script>
-
-{%- if page.google_analytics -%}
-  <script src="/assets/js/galite.js"></script>
+{%- if site.google_analytics -%}
+  <!-- Google tag (gtag.js) -->
+  <script
+  async
+  src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"
+  ></script>
   <script>
-    var galite = galite || {};
-    galite.UA = "{{ site.google_analytics }}";
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag("js", new Date());
+
+    gtag("config", "{{ site.google_analytics }}");
   </script>
 {%- endif -%}
 {%- if page.url == '/archive/' -%}

data/_includes/header.html

@@ -59,13 +59,13 @@
   <meta
     property="og:site_name"
     content="{% if page.title %}{{ page.title | escape }} | {{
-      site.author.facebook
+      site.author.name
     }}{% else %}{{ site.title | escape }}{% endif %}"
   />
   <meta
     property="og:title"
     content="{% if page.title %}{{ page.title | escape }} | {{
-      site.author.facebook
+      site.author.name
     }}{% else %}{{ site.title | escape }}{% endif %}"
   />
   {% if page.location %}
@@ -161,4 +161,17 @@
   <meta name="theme-color" content="#2c2c2c" />
 
   <link rel="stylesheet" href="/assets/css/style.css" />
+
+  <!-- for mathjax support -->
+  {% if page.usemathjax %}
+    <script type="text/x-mathjax-config">
+      MathJax.Hub.Config({
+      TeX: { equationNumbers: { autoNumber: "AMS" } }
+      });
+    </script>
+    <script type="text/javascript" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js?config=TeX-AMS-MML_HTMLorMML"></script>
+  {% endif %}
+
+  {% include schema.html %}
+
 </head>

data/_includes/schema.html

@@ -0,0 +1,56 @@
+{%- comment -%}
+  schema.org structured data (JSON-LD).
+  Emits BlogPosting for posts and WebSite for every other page.
+{%- endcomment -%}
+{%- capture description -%}
+  {{ page.description | default: page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 200 }}
+{%- endcapture -%}
+{%- assign description = description | strip -%}
+{%- if page.image -%}
+  {%- assign page_image = page.image | absolute_url -%}
+{%- else -%}
+  {%- assign page_image = site.image | absolute_url -%}
+{%- endif -%}
+
+<script type="application/ld+json">
+{%- if page.layout == 'post' -%}
+{
+  "@context": "https://schema.org",
+  "@type": "BlogPosting",
+  "mainEntityOfPage": {
+    "@type": "WebPage",
+    "@id": {{ page.url | absolute_url | jsonify }}
+  },
+  "headline": {{ page.title | jsonify }},
+  "description": {{ description | jsonify }},
+  "image": {{ page_image | jsonify }},
+  "datePublished": {{ page.date | date_to_xmlschema | jsonify }},
+  "dateModified": {{ page.modified | default: page.date | date_to_xmlschema | jsonify }},
+  "author": {
+    "@type": "Person",
+    "name": {{ site.author.name | jsonify }},
+    "url": {{ site.url | append: site.baseurl | jsonify }}
+  },
+  "publisher": {
+    "@type": "Organization",
+    "name": {{ site.author.name | jsonify }},
+    "logo": {
+      "@type": "ImageObject",
+      "url": {{ site.author.avatar | default: site.image | absolute_url | jsonify }}
+    }
+  }
+}
+{%- else -%}
+{
+  "@context": "https://schema.org",
+  "@type": "WebSite",
+  "name": {{ site.title | jsonify }},
+  "url": {{ site.url | append: site.baseurl | jsonify }},
+  "description": {{ description | jsonify }},
+  "author": {
+    "@type": "Person",
+    "name": {{ site.author.name | jsonify }}
+  }
+}
+{%- endif -%}
+</script>

data/_includes/toc.html

@@ -0,0 +1,34 @@
+{% comment %}
+  Builds a table of contents from the h2/h3 headings in the given HTML.
+
+  Usage:
+    {% include toc.html html=content %}
+
+  Optional parameters:
+    * title (string) : "Table of Contents" - heading shown above the list
+{% endcomment %}
+
+{%- assign toc_nodes = include.html | split: '<h' -%}
+{%- capture toc_items -%}
+  {%- for node in toc_nodes -%}
+    {%- assign level = node | slice: 0, 1 -%}
+    {%- if level == '2' or level == '3' -%}
+      {%- assign heading = node | split: '</h' | first -%}
+      {%- if heading contains 'id="' -%}
+        {%- assign id = heading | split: 'id="' | last | split: '"' | first -%}
+        {%- assign text = heading | split: '>' | last | strip_html | strip -%}
+        <li class="toc-item toc-h{{ level }}"><a href="#{{ id }}">{{ text }}</a></li>
+      {%- endif -%}
+    {%- endif -%}
+  {%- endfor -%}
+{%- endcapture -%}
+{%- assign toc_items = toc_items | strip -%}
+
+{%- if toc_items != '' -%}
+<nav class="toc" aria-label="Table of contents">
+  <p class="toc-title">{{ include.title | default: 'Table of Contents' }}</p>
+  <ul class="toc-list">
+    {{ toc_items }}
+  </ul>
+</nav>
+{%- endif -%}

data/_layouts/404.html

@@ -3,10 +3,32 @@ layout: compress
 ---
 
 <!DOCTYPE html>
-<html lang="{{ page.lang | default: site.lang | default: " en " }}">
+<html lang="{{ page.lang | default: site.lang | default: " en " }}" dir="{{ page.direction | default: site.direction | default: 'ltr' }}">
 
 {% include header.html %}
-<body>
+<body data-theme="{{ site.mode }}" class="notransition">
+
+  <script>
+    const body = document.body;
+
+    const initTheme = (state) => {
+      if (state === "dark") {
+        body.setAttribute("data-theme", "dark");
+      } else if (state === "light") {
+        body.removeAttribute("data-theme");
+      } else {
+        // No stored preference yet: follow the OS color scheme.
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? body.setAttribute("data-theme", "dark")
+          : body.removeAttribute("data-theme");
+      }
+    };
+ 
+    initTheme(localStorage.getItem("theme"));
+    
+    setTimeout(() => body.classList.remove("notransition"), 75);
+  </script>
+
   {% include navbar.html %}
   <div class="wrapper">
     <main aria-label="Content">

data/_layouts/default.html

@@ -2,10 +2,32 @@
 layout: compress
 ---
 <!DOCTYPE html>
-<html lang="{{ page.lang | default: site.lang | default: " en " }}">
+<html lang="{{ page.lang | default: site.lang | default: " en " }}" dir="{{ page.direction | default: site.direction | default: 'ltr' }}">
 {% include header.html %}
 
-<body data-theme="{{ site.mode }}">
+<body data-theme="{{ site.mode }}" class="notransition">
+
+  <script>
+    const body = document.body;
+
+    const initTheme = (state) => {
+      if (state === "dark") {
+        body.setAttribute("data-theme", "dark");
+      } else if (state === "light") {
+        body.removeAttribute("data-theme");
+      } else {
+        // No stored preference yet: follow the OS color scheme.
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? body.setAttribute("data-theme", "dark")
+          : body.removeAttribute("data-theme");
+      }
+    };
+ 
+    initTheme(localStorage.getItem("theme"));
+    
+    setTimeout(() => body.classList.remove("notransition"), 75);
+  </script>
+
   {% include navbar.html %}
   <div class="wrapper">
     {% include author.html %}

data/_layouts/page.html

@@ -3,11 +3,33 @@ layout: compress
 ---
 
 <!DOCTYPE html>
-<html lang="{{ page.lang | default: site.lang | default: " en " }}">
+<html lang="{{ page.lang | default: site.lang | default: " en " }}" dir="{{ page.direction | default: site.direction | default: 'ltr' }}">
 
 {% include header.html %}
 
-<body data-theme="{{ site.mode }}">
+<body data-theme="{{ site.mode }}" class="notransition">
+
+  <script>
+    const body = document.body;
+
+    const initTheme = (state) => {
+      if (state === "dark") {
+        body.setAttribute("data-theme", "dark");
+      } else if (state === "light") {
+        body.removeAttribute("data-theme");
+      } else {
+        // No stored preference yet: follow the OS color scheme.
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? body.setAttribute("data-theme", "dark")
+          : body.removeAttribute("data-theme");
+      }
+    };
+ 
+    initTheme(localStorage.getItem("theme"));
+    
+    setTimeout(() => body.classList.remove("notransition"), 75);
+  </script>
+
   {% include navbar.html %}
   <div class="wrapper">
     <header class="header">

data/_layouts/post.html

@@ -3,11 +3,33 @@ layout: compress
 ---
 
 <!DOCTYPE html>
-<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+<html lang="{{ page.lang | default: site.lang | default: "en" }}" dir="{{ page.direction | default: site.direction | default: 'ltr' }}">
 
 {% include header.html %}
 
-<body data-theme="{{ site.mode }}">
+<body data-theme="{{ site.mode }}" class="notransition">
+
+  <script>
+    const body = document.body;
+
+    const initTheme = (state) => {
+      if (state === "dark") {
+        body.setAttribute("data-theme", "dark");
+      } else if (state === "light") {
+        body.removeAttribute("data-theme");
+      } else {
+        // No stored preference yet: follow the OS color scheme.
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? body.setAttribute("data-theme", "dark")
+          : body.removeAttribute("data-theme");
+      }
+    };
+ 
+    initTheme(localStorage.getItem("theme"));
+    
+    setTimeout(() => body.classList.remove("notransition"), 75);
+  </script>
+
   {% include navbar.html %}
   <div class="wrapper post">
     <main class="page-content" aria-label="Content">
@@ -44,6 +66,10 @@ layout: compress
           {% endif %}
         </header>
 
+        {% if page.toc %}
+          {% include toc.html html=content %}
+        {% endif %}
+
         <div class="page-content" itemprop="articleBody">
           {% include anchor_headings.html html=content anchorClass="anchor-head" beforeHeading=true h_min=1 h_max=4 %}
           {% if page.tweet %}
@@ -55,7 +81,7 @@ layout: compress
       </article>
     
       {% if page.comments %}
-        {% include comments.html%}
+        {% include comments.html %}
       {% endif %}
 
     </main>
@@ -71,4 +97,4 @@ layout: compress
   </div>
 </body>
 
-</html>
+</html>

data/_sass/klise/_base.scss

@@ -7,9 +7,28 @@
   transition: background-color 75ms ease-in, border-color 75ms ease-in;
 }
 
+.notransition {
+  -webkit-transition: none;
+  -moz-transition: none; 
+  -ms-transition: none;
+  -o-transition: none;
+  transition: none;
+}
+
 html {
   overflow-x: hidden;
+  overflow-y: scroll;
   width: 100%;
+  // Give the canvas its own background. Safari does not always propagate
+  // the body background to the canvas when the body has `overflow-x:
+  // hidden`, which left the area below short pages blank (#45).
+  background-color: $white;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    background-color: $dark-black;
+  }
 }
 
 body,
@@ -139,7 +158,7 @@ ul {
     top: -1px;
     width: 1.2em;
     position: relative;
-    margin-left: -1.3em;
+    margin-inline-start: -1.3em;
     font-weight: 700;
   }
 }
@@ -154,10 +173,9 @@ ol {
       content: counter(li);
       display: inline-block;
       width: 1em;
-      margin-right: 0.5em;
-      margin-left: -1.6em;
-      text-align: right;
-      direction: rtl;
+      margin-inline-end: 0.5em;
+      margin-inline-start: -1.6em;
+      text-align: end;
       font-weight: $bold-weight;
       font-size: $small-font-size;
     }
@@ -167,7 +185,7 @@ ol {
 ul,
 ol {
   margin-top: 0;
-  margin-left: $spacing-full;
+  margin-inline-start: $spacing-full;
 }
 
 li {

data/_sass/klise/_dark.scss

@@ -234,12 +234,31 @@ body[data-theme="dark"] {
     .solution:hover {
       color: $dark-text-link-blue-active;
     }
-  }
+  }  
 
   .search-article {
     input[type="search"] {
       color: $dark-text-base-color;
+      &::-webkit-input-placeholder {
+        color: rgba(128,128,128,0.8);
+      }
     }
   }
 
+  // Table of contents
+  .toc {
+    border-color: $dark-light;
+
+    .toc-title {
+      color: $dark-gray;
+    }
+
+    .toc-item a {
+      color: $dark-text-base-color;
+
+      &:hover {
+        color: $dark-text-link-blue;
+      }
+    }
+  }
 }

data/_sass/klise/_fonts.scss

@@ -710,3 +710,17 @@
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
     U+FEFF, U+FFFD;
 }
+
+// Arabic / Farsi subset (Vazirmatn) mapped onto the Roboto family so RTL
+// content renders with proper glyphs. Credit: @srezasm (PR #94).
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/vazirmatn/v13/Dxxo8j6PP2D_kU2muijlGMWWMmk.woff2)
+    format("woff2");
+  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
+    U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
+    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
+}

data/_sass/klise/_layout.scss

@@ -338,18 +338,27 @@
   }
 
   input[type="search"] {
-    border: 0;
     top: 0;
     left: 0;
-    position: absolute;
+    border: 0;
     width: 100%;
+    height: 40px;
+    outline: none;
+    position: absolute;
     border-radius: 5px;
     padding: 10px 10px 10px 35px;
-    font-size: $base-font-size;
     color: $text-base-color;
+    -webkit-appearance: none;
+    font-size: $base-font-size;
     background-color: rgba(128, 128, 128, 0.1);
     border: 1px solid rgba(128, 128, 128, 0.1);
-    outline: none;
+    &::-webkit-input-placeholder {
+      color: #808080;
+    }
+    &::-webkit-search-decoration,
+    &::-webkit-search-results-decoration {
+      display: none;
+    }
   }
 }
 
@@ -368,4 +377,42 @@
     border: 1px solid rgba(128, 128, 128, 0.1);
     background-color: rgba(128, 128, 128, 0.1);
   }
+}
+
+// RTL adjustments: floats and relative offsets do not mirror on their
+// own, so flip the pieces that are positioned by physical side.
+[dir="rtl"] {
+  .menu {
+    a#mode {
+      float: right;
+      left: auto;
+      right: 8px;
+    }
+
+    .trigger {
+      float: left;
+    }
+
+    .menu-link:not(:last-child) {
+      margin-right: 0;
+      margin-left: 5px;
+    }
+
+    @include media-query($on-mobile) {
+      a#mode {
+        left: auto;
+        right: 10px;
+      }
+
+      .menu-icon {
+        right: auto;
+        left: 0;
+      }
+    }
+  }
+
+  .post-item .post-item-date {
+    padding-right: 0;
+    padding-left: 10px;
+  }
 }

data/_sass/klise/_miscellaneous.scss

@@ -39,3 +39,48 @@
     position: absolute;
   }
 }
+
+// Image lightbox
+.page-content img.zoomable {
+  cursor: zoom-in;
+}
+
+body.lightbox-open {
+  overflow: hidden;
+}
+
+.lightbox-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  cursor: zoom-out;
+  background-color: rgba(0, 0, 0, 0.85);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+
+  &.is-open {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .lightbox-image {
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: 2px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lightbox-overlay {
+    transition: none;
+  }
+}

data/_sass/klise/_post.scss

@@ -71,6 +71,22 @@
 .page-content {
   padding-top: 8px;
 
+  // Resolve direction per block from its own text, so a mostly-LTR
+  // theme can still host RTL content (and vice versa) without manual
+  // markup. In LTR text this behaves exactly like the defaults.
+  p,
+  li,
+  blockquote,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    unicode-bidi: plaintext;
+    text-align: start;
+  }
+
   iframe {
     text-align: center;
   }
@@ -157,7 +173,7 @@
       &::before {
         content: "#";
         position: absolute;
-        right: -3px;
+        inset-inline-end: -3px;
         width: 1em;
         font-weight: $bold-weight;
       }
@@ -191,6 +207,83 @@
   }
 }
 
+// Table of contents
+.toc {
+  margin-top: $spacing-full;
+  padding: 15px 20px;
+  border: 1px solid $light;
+  border-radius: 4px;
+
+  .toc-title {
+    margin: 0 0 8px;
+    color: $gray;
+    font-weight: $bold-weight;
+    font-size: $small-font-size;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+  }
+
+  .toc-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .toc-item {
+    line-height: 1.6;
+
+    &::before {
+      content: none;
+    }
+
+    a {
+      color: $text-base-color;
+      text-decoration: none;
+
+      &:hover {
+        color: $text-link-blue;
+      }
+    }
+  }
+
+  .toc-h3 {
+    padding-left: 18px;
+    font-size: $small-font-size;
+  }
+}
+
+// Image gallery: a neat, responsive row of equal-height images.
+// Wrap images in <div class="gallery"> … </div>; each stays zoomable.
+.page-content .gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 10px;
+  margin-top: $spacing-full - 15;
+  margin-bottom: $spacing-full - 15;
+
+  img {
+    width: 100%;
+    height: 180px;
+    margin: 0;
+    object-fit: cover;
+    border-radius: 2px;
+  }
+
+  figure {
+    margin: 0;
+  }
+}
+
+// Images inside list items render as small, aligned thumbnails so the
+// list stays tidy. They remain zoomable via the lightbox.
+.page-content li img {
+  max-height: 2.4em;
+  width: auto;
+  margin: 0 0.3em;
+  vertical-align: middle;
+  border-radius: 2px;
+}
+
 .post-nav {
   display: flex;
   position: relative;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: klise
 version: !ruby/object:Gem::Version
-  version: 1.0.1
+  version: 1.1.0
 platform: ruby
 authors:
 - Mahendrata Harpi
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-08-29 00:00:00.000000000 Z
+date: 2026-10-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -16,28 +16,28 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '4.1'
+        version: '4.4'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '4.1'
+        version: '4.4'
 - !ruby/object:Gem::Dependency
   name: jekyll-feed
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '0.13'
+        version: '0.18'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '0.13'
+        version: '0.18'
 - !ruby/object:Gem::Dependency
   name: jekyll-sitemap
   requirement: !ruby/object:Gem::Requirement
@@ -58,14 +58,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.12.0
+        version: '0.12'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.12.0
+        version: '0.12'
 - !ruby/object:Gem::Dependency
   name: jekyll-postfiles
   requirement: !ruby/object:Gem::Requirement
@@ -80,6 +80,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.1'
+- !ruby/object:Gem::Dependency
+  name: webrick
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.8'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.8'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -94,7 +108,7 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '2.1'
-description: 
+description:
 email:
 - justharpi@gmail.com
 executables: []
@@ -111,6 +125,8 @@ files:
 - _includes/navbar.html
 - _includes/navigation.html
 - _includes/pagination.html
+- _includes/schema.html
+- _includes/toc.html
 - _layouts/404.html
 - _layouts/compress.html
 - _layouts/default.html
@@ -130,7 +146,7 @@ licenses:
 - MIT
 metadata:
   plugin_type: theme
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -145,8 +161,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.2
-signing_key: 
+rubygems_version: 3.5.22
+signing_key:
 specification_version: 4
 summary: "\U0001F3D6 Klisé is a minimalist Jekyll theme for running a personal site
   or blog, light & dark mode support."