jekyll-theme-doodle 5.1.8 → 5.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4748233467f5f2977302946ebbb1e4a9e3a99f0e86face1e207752c8de4d6943
-  data.tar.gz: 5157679940ba27bc2dad87e20d9d547ed7c5f4b0bc6b169ad78984b6205aac73
+  metadata.gz: 18a9a55074a8a22ed0b3e3bb3fa0e24a749217a71118ce4a8a864d4b07d54c6b
+  data.tar.gz: b8653371ee46f39f9cc01f78df94b7d04a36b99ba36c82baff4a3b4a03f60348
 SHA512:
-  metadata.gz: 8be9a0677ab819cafdac50cb4a39b7bed9b7b438334c156847969712f3b82c1637571bea4798f9569a35f88c99afd9aa4d1533ee119dbabf6ba7c183f0fbef69
-  data.tar.gz: 70b9de3e0d3066134e78a7f1be5915beaa6d8d07cad91d96ab815edc68fb9a00a26e70b85cd43ec210bfe01411557406f871ad223bee93d15286682db7486df7
+  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
 
@@ -149,6 +149,7 @@ icon: "/assets/icons/about.svg"
 - [ ] Add support for comments
 - [ ] Search functionality
 - [ ] automatic table of contents generation (button in mobile view/ sidebar in desktop view)
+- [ ] scroll progress indicator
 
 ## Contributing
 

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

@@ -143,44 +143,24 @@ a {
  * Blockquotes
  */
 blockquote {
-  color: var(--md-sys-color-primary);
-  border-left: 3px solid $grey-color-light;
-  padding-left: $spacing-unit / 2;
-  margin-left: 12px;
-  margin-right: 12px;
+  background-color: var(--md-sys-color-tertiary-container);
+  color: var(--md-sys-color-on-tertiary-container);
+  padding: $spacing-unit;
+  margin-left: 10px;
+  margin-right: 10px;
+  border-radius: 16px;
   @include relative-font-size(1.125);
   letter-spacing: -1px;
 
   > :last-child {
     margin-bottom: 0;
   }
+  > p {
+    text-align: left;
+  }
 }
 
-/**
- * Code formatting
- */
-pre,
-code {
-  @include relative-font-size(0.9375);
-  border: 1px solid var(--md-sys-color-outline);
-  border-radius: 3px;
-  background-color: var(--md-sys-color-surface-container-high);
-}
-
-code {
-  padding: 1px 5px;
-}
-
-pre {
-  padding: 8px 12px;
-  overflow-x: auto;
 
-  > code {
-    border: 0;
-    padding-right: 0;
-    padding-left: 0;
-  }
-}
 
 /**
  * Wrapper
@@ -202,6 +182,8 @@ pre {
   }
   @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/_navigation-bar.scss

@@ -120,6 +120,7 @@
   flex-direction: column;
   width: 100%;
   justify-content: center;
+  text-align: center;
   align-items: center;
   color: var(--md-sys-color-on-surface);
 }

data/_sass/minima/_pinned-post.scss

@@ -59,6 +59,7 @@
   flex-wrap: wrap;
   justify-content: space-around;
   padding-top: 12px;
+  gap:8px;
   list-style: none;
   background-color: var(--md-sys-color-surface-container-highest);
   border-radius: 24px;

data/_sass/minima/_posts.scss

@@ -36,22 +36,26 @@
   @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);
   border-radius: 24px;
   padding: 24px;
-  @include media-query($on-palm){
+  @include media-query($on-palm) {
     padding: 8px;
   }
 }
+
+p {
+  text-align: justify;
+}
 .post-content {
   margin-bottom: $spacing-unit;
 
   // text-align: justify;
-  p {
-    text-align: justify;
-  }
 
   h2 {
     @include relative-font-size(2);
@@ -76,6 +80,9 @@
       @include relative-font-size(1.125);
     }
   }
+  a{
+    text-decoration: underline;
+  }
 }
 
 .post-list {

data/_sass/minima/_syntax-highlighting.scss

@@ -1,68 +1,299 @@
+pre,
+code {
+  @include relative-font-size(0.9375);
+  border: 1px solid var(--md-sys-color-outline);
+  border-radius: 3px;
+  background-color: var(--md-sys-color-surface-container);
+}
+
+code {
+  padding: 1px 5px;
+}
+
+pre {
+  padding: 8px 12px;
+  overflow-x: auto;
+
+  > code {
+    border: 0;
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
 .highlight {
-  background: var(--md-sys-color-surface-container-high);
+  background: var(--md-sys-color-surface-container);
   @extend %vertical-rhythm;
 
   .highlighter-rouge & {
-  background: var(--md-sys-color-surface-container-high);
+    background: var(--md-sys-color-surface-container);
   }
+}
+// .language-plaintext{
+//   background-color: var(--md-sys-color-secondary-container);
+//   color: var(--md-sys-color-on-secondary-container);
+// }
+:root {
+  /* Light mode colors */
+  --light-comment: #8e908c;
+  --light-error: #c82829;
+  --light-keyword: #8959a8;
+  --light-operator: #3e999f;
+  --light-comment-preproc: #eab700;
+  --light-deleted: #c82829;
+  --light-deleted-bg: #ffdad9;
+  --light-inserted: #718c00;
+  --light-inserted-bg: #e6ffed;
+  --light-output: #4d4d4c;
+  --light-prompt: #8959a8;
+  --light-strong: #000000;
+  --light-traceback: #c82829;
+  --light-number: #f5871f;
+  --light-string: #718c00;
+  --light-attribute: #3e999f;
+  --light-builtin: #4271ae;
+  --light-class: #8959a8;
+  --light-constant: #f5871f;
+  --light-entity: #3e999f;
+  --light-exception: #c82829;
+  --light-function: #4271ae;
+  --light-namespace: #4d4d4c;
+  --light-tag: #c82829;
+  --light-variable: #f5871f;
+  --light-whitespace: #ffffff;
+  --light-regex: #3e999f;
+  --light-symbol: #8959a8;
+
+  /* Dark mode colors */
+  --dark-comment: #999999;
+  --dark-error: #ff6c6b;
+  --dark-error-bg: #2c2c2c;
+  --dark-keyword: #c5a5c5;
+  --dark-operator: #56b6c2;
+  --dark-comment-preproc: #e6c07b;
+  --dark-deleted: #e06c75;
+  --dark-deleted-bg: #3c2a2a;
+  --dark-inserted: #98c379;
+  --dark-inserted-bg: #2a3c2a;
+  --dark-output: #5c6370;
+  --dark-prompt: #c678dd;
+  --dark-strong: #e6c07b;
+  --dark-traceback: #e06c75;
+  --dark-number: #d19a66;
+  --dark-string: #98c379;
+  --dark-attribute: #56b6c2;
+  --dark-builtin: #61aeee;
+  --dark-class: #c678dd;
+  --dark-constant: #d19a66;
+  --dark-entity: #56b6c2;
+  --dark-exception: #e06c75;
+  --dark-function: #61aeee;
+  --dark-namespace: #abb2bf;
+  --dark-tag: #e06c75;
+  --dark-variable: #d19a66;
+  --dark-whitespace: #5c6370;
+  --dark-regex: #56b6c2;
+  --dark-symbol: #c678dd;
+}
+
+.light-pink,
+.light-yellow,
+.light-cyan,
+.light-blue,
+.light-green {
+  /* Light mode (default) */
 
-  .c     { color: #999; font-style: italic } // Comment
-  .err   { color: #ff6c6b; background-color: #2c2c2c } // Error
-  .k     { font-weight: bold; color: #c5a5c5 } // Keyword
-  .o     { font-weight: bold; color: #56b6c2 } // Operator
-  .cm    { color: #999; font-style: italic } // Comment.Multiline
-  .cp    { color: #e6c07b; font-weight: bold } // Comment.Preproc
-  .c1    { color: #999; font-style: italic } // Comment.Single
-  .cs    { color: #999; font-weight: bold; font-style: italic } // Comment.Special
-  .gd    { color: #e06c75; background-color: #3c2a2a } // Generic.Deleted
-  .gd .x { color: #e06c75; background-color: #3c2a2a } // Generic.Deleted.Specific
-  .ge    { font-style: italic; color: #abb2bf } // Generic.Emph
-  .gr    { color: #e06c75 } // Generic.Error
-  .gh    { color: #e6c07b } // Generic.Heading
-  .gi    { color: #98c379; background-color: #2a3c2a } // Generic.Inserted
-  .gi .x { color: #98c379; background-color: #2a3c2a } // Generic.Inserted.Specific
-  .go    { color: #5c6370 } // Generic.Output
-  .gp    { color: #c678dd } // Generic.Prompt
-  .gs    { font-weight: bold; color: #e6c07b } // Generic.Strong
-  .gu    { color: #56b6c2 } // Generic.Subheading
-  .gt    { color: #e06c75 } // Generic.Traceback
-  .kc    { font-weight: bold; color: #c5a5c5 } // Keyword.Constant
-  .kd    { font-weight: bold; color: #c5a5c5 } // Keyword.Declaration
-  .kp    { font-weight: bold; color: #c5a5c5 } // Keyword.Pseudo
-  .kr    { font-weight: bold; color: #c5a5c5 } // Keyword.Reserved
-  .kt    { color: #c678dd; font-weight: bold } // Keyword.Type
-  .m     { color: #d19a66 } // Literal.Number
-  .s     { color: #98c379 } // Literal.String
-  .na    { color: #56b6c2 } // Name.Attribute
-  .nb    { color: #61aeee } // Name.Builtin
-  .nc    { color: #c678dd; font-weight: bold } // Name.Class
-  .no    { color: #d19a66 } // Name.Constant
-  .ni    { color: #56b6c2 } // Name.Entity
-  .ne    { color: #e06c75; font-weight: bold } // Name.Exception
-  .nf    { color: #61aeee; font-weight: bold } // Name.Function
-  .nn    { color: #abb2bf } // Name.Namespace
-  .nt    { color: #e06c75 } // Name.Tag
-  .nv    { color: #d19a66 } // Name.Variable
-  .ow    { font-weight: bold; color: #56b6c2 } // Operator.Word
-  .w     { color: #5c6370 } // Text.Whitespace
-  .mf    { color: #d19a66 } // Literal.Number.Float
-  .mh    { color: #d19a66 } // Literal.Number.Hex
-  .mi    { color: #d19a66 } // Literal.Number.Integer
-  .mo    { color: #d19a66 } // Literal.Number.Oct
-  .sb    { color: #98c379 } // Literal.String.Backtick
-  .sc    { color: #98c379 } // Literal.String.Char
-  .sd    { color: #98c379 } // Literal.String.Doc
-  .s2    { color: #98c379 } // Literal.String.Double
-  .se    { color: #98c379 } // Literal.String.Escape
-  .sh    { color: #98c379 } // Literal.String.Heredoc
-  .si    { color: #98c379 } // Literal.String.Interpol
-  .sx    { color: #98c379 } // Literal.String.Other
-  .sr    { color: #56b6c2 } // Literal.String.Regex
-  .s1    { color: #98c379 } // Literal.String.Single
-  .ss    { color: #c678dd } // Literal.String.Symbol
-  .bp    { color: #e06c75 } // Name.Builtin.Pseudo
-  .vc    { color: #d19a66 } // Name.Variable.Class
-  .vg    { color: #d19a66 } // Name.Variable.Global
-  .vi    { color: #d19a66 } // Name.Variable.Instance
-  .il    { color: #d19a66 } // Literal.Number.Integer.Long
+  --comment: var(--light-comment);
+  --error: var(--light-error);
+  --keyword: var(--light-keyword);
+  --operator: var(--light-operator);
+  --comment-preproc: var(--light-comment-preproc);
+  --deleted: var(--light-deleted);
+  --deleted-bg: var(--light-deleted-bg);
+  --inserted: var(--light-inserted);
+  --inserted-bg: var(--light-inserted-bg);
+  --output: var(--light-output);
+  --prompt: var(--light-prompt);
+  --strong: var(--light-strong);
+  --traceback: var(--light-traceback);
+  --number: var(--light-number);
+  --string: var(--light-string);
+  --attribute: var(--light-attribute);
+  --builtin: var(--light-builtin);
+  --class: var(--light-class);
+  --constant: var(--light-constant);
+  --entity: var(--light-entity);
+  --exception: var(--light-exception);
+  --function: var(--light-function);
+  --namespace: var(--light-namespace);
+  --tag: var(--light-tag);
+  --variable: var(--light-variable);
+  --whitespace: var(--light-whitespace);
+  --regex: var(--light-regex);
+  --symbol: var(--light-symbol);
+}
+
+/* Dark mode */
+.dark-pink,
+.dark-yellow,
+.dark-cyan,
+.dark-blue,
+.dark-green {
+  --comment: var(--dark-comment);
+  --error: var(--dark-error);
+  --error-bg: var(--dark-error-bg);
+  --keyword: var(--dark-keyword);
+  --operator: var(--dark-operator);
+  --comment-preproc: var(--dark-comment-preproc);
+  --deleted: var(--dark-deleted);
+  --deleted-bg: var(--dark-deleted-bg);
+  --inserted: var(--dark-inserted);
+  --inserted-bg: var(--dark-inserted-bg);
+  --output: var(--dark-output);
+  --prompt: var(--dark-prompt);
+  --strong: var(--dark-strong);
+  --traceback: var(--dark-traceback);
+  --number: var(--dark-number);
+  --string: var(--dark-string);
+  --attribute: var(--dark-attribute);
+  --builtin: var(--dark-builtin);
+  --class: var(--dark-class);
+  --constant: var(--dark-constant);
+  --entity: var(--dark-entity);
+  --exception: var(--dark-exception);
+  --function: var(--dark-function);
+  --namespace: var(--dark-namespace);
+  --tag: var(--dark-tag);
+  --variable: var(--dark-variable);
+  --whitespace: var(--dark-whitespace);
+  --regex: var(--dark-regex);
+  --symbol: var(--dark-symbol);
+}
+
+/* Syntax highlighting classes */
+.c,
+.cm,
+.c1 {
+  color: var(--comment);
+  font-style: italic;
+}
+.err {
+  color: var(--error);
+  background-color: var(--error-bg);
+}
+.k,
+.kc,
+.kd,
+.kp,
+.kr {
+  font-weight: bold;
+  color: var(--keyword);
+}
+.o,
+.ow {
+  font-weight: bold;
+  color: var(--operator);
+}
+.cp {
+  color: var(--comment-preproc);
+  font-weight: bold;
+}
+.cs {
+  color: var(--comment);
+  font-weight: bold;
+  font-style: italic;
+}
+.gd,
+.gd .x {
+  color: var(--deleted);
+  background-color: var(--deleted-bg);
+}
+.gi,
+.gi .x {
+  color: var(--inserted);
+  background-color: var(--inserted-bg);
+}
+.go {
+  color: var(--output);
+}
+.gp {
+  color: var(--prompt);
+}
+.gs {
+  font-weight: bold;
+  color: var(--strong);
+}
+.gu {
+  color: var(--builtin);
+}
+.gt {
+  color: var(--traceback);
+}
+.kt {
+  color: var(--class);
+  font-weight: bold;
+}
+.m,
+.mf,
+.mh,
+.mi,
+.mo,
+.il {
+  color: var(--number);
+}
+.s,
+.sb,
+.sc,
+.sd,
+.s2,
+.se,
+.sh,
+.si,
+.sx,
+.s1 {
+  color: var(--string);
+}
+.na {
+  color: var(--attribute);
+}
+.nb {
+  color: var(--builtin);
+}
+.nc {
+  color: var(--class);
+  font-weight: bold;
+}
+.no {
+  color: var(--constant);
+}
+.ni {
+  color: var(--entity);
+}
+.ne {
+  color: var(--exception);
+  font-weight: bold;
+}
+.nf {
+  color: var(--function);
+  font-weight: bold;
+}
+.nn {
+  color: var(--namespace);
+}
+.nt {
+  color: var(--tag);
+}
+.nv,
+.vc,
+.vg,
+.vi {
+  color: var(--variable);
+}
+.w {
+  color: var(--whitespace);
+}
+.sr {
+  color: var(--regex);
+}
+.ss {
+  color: var(--symbol);
 }

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

@@ -4,7 +4,7 @@
 $base-font-family: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI",
   Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
   "Segoe UI Symbol" !default;
-$base-font-size: 18px !default;
+$base-font-size: 17px !default;
 $base-font-weight: 400 !default;
 $small-font-size: $base-font-size * 0.875 !default;
 $base-line-height: 1.5 !default;
@@ -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.8
+  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