jekyll-theme-doodle 5.1.9 → 5.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cb7883ecaae0f182f8068c610a96a1e0b0693094a9c72fbfe6c217fd9d6db664
-  data.tar.gz: 8929366066eb7e901899dd32f74ec2f17fbb6cb8d4ff3f81ed9aac22c9b894c9
+  metadata.gz: 18a9a55074a8a22ed0b3e3bb3fa0e24a749217a71118ce4a8a864d4b07d54c6b
+  data.tar.gz: b8653371ee46f39f9cc01f78df94b7d04a36b99ba36c82baff4a3b4a03f60348
 SHA512:
-  metadata.gz: f1164ea9426b7412592b4cffef94295da6e89c2aab08cfa61260d94dce3eeffd0d3749880f97f20acd53920cf78d79bed9811f120482496e74996b61f124ba0c
-  data.tar.gz: 272b3b39b923c6f0d0f70604a98fb6712af42fdfd4170ed846db38461e92f03e624e25a731208aacb4d37e5531343141a5193a95ec8108e89337855472fd6eb1
+  metadata.gz: 833120d18cae14e8744d74357111c8d5bf8c8416485501e64725beeb4d0d19579b25a97112464a9730b1459d94f2cddc353d9c953065b4eb76b82efb71793381
+  data.tar.gz: 0b885e10752f19e9d1e0045ca4b35374dbef5900b514aea2eaf762f7167e63d42ea38bb2e9749b2bc3ec6745c74a608b0190f1b2181a5a19036a224b21ee7485

data/README.md

@@ -17,9 +17,9 @@
 
 ## Features
 
-- dark mode
-- 5 color schemes
-- pinned posts
+- automatic table of contents generation
+- dark mode with 5 color schemes
+- pinned/featured posts at top of home page
 - handwriting fonts
 - google analytics support
 

data/_layouts/post.html

@@ -1,35 +1,52 @@
 ---
 layout: default
 ---
+
 <div class="wrapper">
-  <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
+  <article
+    class="post h-entry"
+    itemscope
+    itemtype="http://schema.org/BlogPosting"
+  >
     <header class="post-header">
-      <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
+      <h1 class="post-title p-name" itemprop="name headline">
+        {{ page.title | escape }}
+      </h1>
       {%- if page.image -%}
-        <img src="{{- page.image | relative_url -}}" alt="" class="featured-image">
+      <img
+        src="{{- page.image | relative_url -}}"
+        alt=""
+        class="featured-image"
+      />
       {%- endif -%}
       <p class="post-meta">
-        <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
-          {%- assign date_format = site.minima.date_format | default: '%b %-d, %Y' -%}
-          {{ page.date | date: date_format }}
+        <time
+          class="dt-published"
+          datetime="{{ page.date | date_to_xmlschema }}"
+          itemprop="datePublished"
+        >
+          {%- assign date_format = site.minima.date_format | default: '%b %-d,
+          %Y' -%} {{ page.date | date: date_format }}
         </time>
-        {%- if page.author -%}
-          •
-          <span itemprop="author" itemscope itemtype="http://schema.org/Person"
-            ><span class="p-author h-card" itemprop="name">{{ page.author }}</span></span
-          >
+        {%- if page.author -%} •
+        <span itemprop="author" itemscope itemtype="http://schema.org/Person"
+          ><span class="p-author h-card" itemprop="name"
+            >{{ page.author }}</span
+          ></span
+        >
         {%- endif -%}
       </p>
+      <div id="toc">
+      </div>
     </header>
-  
+
     <div class="post-content e-content" itemprop="articleBody">
       {{ content }}
     </div>
-  
-    {%- if site.disqus.shortname -%}
-      {%- include disqus_comments.html -%}
-    {%- endif -%}
-  
+
+    {%- if site.disqus.shortname -%} {%- include disqus_comments.html -%} {%-
+    endif -%}
+
     <a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
   </article>
 </div>

data/_sass/minima/_base.scss

@@ -182,6 +182,8 @@ blockquote {
   }
   @include media-query($on-palm) {
     padding-left: $spacing-unit/2;
+    padding-left: 0px;
+    padding-right: 0px;
   }
 }
 

data/_sass/minima/_footer.scss

@@ -2,6 +2,8 @@
   padding: $spacing-unit 0;
   @include media-query($on-palm) {
     padding-bottom: 100px;
+    padding-left: 10px;
+    padding-right: 10px
   }
 }
 

data/_sass/minima/_posts.scss

@@ -36,6 +36,9 @@
   @include media-query($on-laptop) {
     @include relative-font-size(2.25);
   }
+  @include media-query($on-palm) {
+    margin: 12px;
+  }
 }
 .post {
   background: var(--md-sys-color-surface);

data/_sass/minima/_toc.scss

@@ -0,0 +1,41 @@
+#toc {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+  @media screen and (min-width: 1440px) {
+    position: fixed;
+    right: 12px;
+    top: 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: calc(100vw - 1230px);
+
+    height: 100vh;
+    overflow-y: scroll;
+  }
+}
+.toc {
+  list-style-type: none;
+  margin-left: 8px;
+  a {
+    color: var(--md-sys-color-tertiary);
+  }
+}
+.toc-H1 {
+  font-size: 17px;
+}
+
+.toc-H2 {
+  padding-left: 14px;
+  font-size: 16px;
+}
+.toc-H3 {
+  padding-left: 30px;
+  font-size: 16px;
+}

data/_sass/minima.scss

@@ -46,6 +46,6 @@ $on-laptop: 800px !default;
 
 // Import partials.
 @import "minima/fonts", "minima/theme", "minima/base", "minima/header",
-  "minima/page", "minima/posts", "minima/syntax-highlighting",
+  "minima/page", "minima/posts","minima/toc", "minima/syntax-highlighting",
   "minima/navigation-bar", "minima/pinned-post", "minima/theme-selector",
   "minima/footer";

data/assets/theme-assets/js/theme.js

@@ -39,4 +39,33 @@
     root.className = activeMode;
     window.localStorage.setItem("theme", activeMode);
   });
+
+  document.addEventListener("DOMContentLoaded", function () {
+    const toc = document.getElementById("toc");
+    if (toc) {
+      const content = document.querySelector(".post");
+      const headings = content.querySelectorAll("h1, h2, h3");
+
+      const ul = document.createElement("ul");
+      ul.className = "toc";
+
+      if (headings.length > 0) {
+        const title = document.createElement("h3");
+        title.innerText = "Table of contents";
+        toc.appendChild(title);
+
+        headings.forEach((heading) => {
+          const li = document.createElement("li");
+          const a = document.createElement("a");
+          a.href = "#" + heading.id;
+          a.textContent = heading.textContent;
+          li.appendChild(a);
+          li.className = `toc-${heading.tagName}`;
+          ul.appendChild(li);
+        });
+
+        toc.appendChild(ul);
+      }
+    }
+  });
 })();

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-doodle
 version: !ruby/object:Gem::Version
-  version: 5.1.9
+  version: 5.2.0
 platform: ruby
 authors:
 - Gul Noor
@@ -82,6 +82,7 @@ files:
 - _sass/minima/_syntax-highlighting.scss
 - _sass/minima/_theme-selector.scss
 - _sass/minima/_theme.scss
+- _sass/minima/_toc.scss
 - assets/main.scss
 - assets/minima-social-icons.svg
 - assets/theme-assets/js/theme.js