pandoc-markdown-jekyll-theme 0.17.0 → 0.18.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ba2ae9b2976f1e8212a1fe746b206537c187dc18215f5995fd69fa3ac0e20648
-  data.tar.gz: 2d53c489bb87c067e02455475484c88db41b9bc9718fc0eb571324e20f05be2b
+  metadata.gz: a1fb4315d91a346a9532a927c78c5f9b56263e2d97b143413ffa1657237d80d7
+  data.tar.gz: e07267942451ae7d51e4dc6db584792eceb098eb2bad4fbdd8702dfe33f99f31
 SHA512:
-  metadata.gz: 2cc6b3a6bd3abfea6efcda3803792a5abf962c7764cd898fa60fe1af310049916ba8930586f6f2d6069d1db6621d8bb5b2774f20e4050c585ff0169b86e1fd24
-  data.tar.gz: e66a08121a5b4a7a8f8379cda04e316b2c014f01db7c88d0d40ce2ee3624b2b9a809205e719f8f66dd0b1e6f7f5c47e738a5360c270798334250546f6c1f8745
+  metadata.gz: 2ff21effbf9a3154ec070af2c774b4b046390e373c83eb9457c82cfa5191fa2c933c9f2ee6699ea3eb7b5e9906434282c2b945713576a0ae9745055f5ed38a7c
+  data.tar.gz: 81163cabead49cd6a2babeae1b6d5cd9781b16f3fbab04949236873910537b72bfc64bc927458d61a1f78d9536a1cb5ef2b7817e04d45ef13bcb65eb8ddab24d

data/README.md

@@ -17,7 +17,10 @@ installation is as easy as:
 
 ```bash
 brew install pandoc
-brew install jez/formulae/pandoc-sidenote
+
+curl --remote-name --no-clobber --create-dirs \
+  --output-dir "${XDG_DATA_DIR:-$HOME/.local/share/}/pandoc/filters" \
+  -sSL "https://github.com/jez/pandoc-sidenote/raw/refs/heads/master/pandoc-sidenote.lua"
 ```
 
 Next, add this line to your Jekyll site's Gemfile:
@@ -55,7 +58,7 @@ markdown: Pandoc
 pandoc:
   extensions:
     - from: 'markdown+smart+tex_math_single_backslash'
-    - filter: 'pandoc-sidenote'
+    - lua-filter: 'pandoc-sidenote.lua'
     - template: '_template'
     - katex
     - toc
@@ -109,9 +112,10 @@ The following variables are used by this theme.
 - `page.dir`
   - Sets the HTML dir attribute. Default: `'ltr'`
 
-You can also define:
+You can also define either of:
 
 - `_includes/enable_checkboxes.html`
+- `_includes/block_based_side_notes.html`
 
 to be an empty file in your project to remove the only non-math JavaScript.
 

data/_includes/block_based_side_notes.html

@@ -0,0 +1 @@
+  <script src="{{ site.baseurl }}/assets/js/block_based_side_notes.js"></script>

data/_includes/default.html

@@ -11,6 +11,7 @@
 
   {% include footer.html %}
   {% include enable_checkboxes.html %}
+  {% include block_based_side_notes.html %}
   {% include after.html %}
 </body>
 </html>

data/assets/css/theme.css

@@ -206,22 +206,36 @@ body {
   margin-top: var(--side-note-baseline-offset);
 }
 
+:is(.sidenote, .marginnote) figcaption {
+  font-size: var(--side-note-font-size);
+  line-height: var(--side-note-line-height);
+}
+
 .sidenote code,
 .marginnote code {
   color: var(--color-sidenote);
 }
 
+/* Make paragraph breaks within sidenotes smaller. */
+main > .sidenote-wrapper > :is(.marginnote, .sidenote) {
+  margin-bottom: var(--side-note-line-height);
+}
+
 main {
-  counter-reset: sidenote-counter;
+  counter-reset: sidenote-counter-anchor sidenote-counter;
 }
 
-.sidenote-number {
-  counter-increment: sidenote-counter;
+.sidenote-number:after {
+  counter-increment: sidenote-counter-anchor;
+  content: counter(sidenote-counter-anchor);
 }
 
-.sidenote-number:after,
 .sidenote:before {
+  counter-increment: sidenote-counter;
   content: counter(sidenote-counter);
+}
+.sidenote-number:after,
+.sidenote:before {
   position: relative;
 }
 
@@ -248,10 +262,11 @@ sup {
   font-weight: inherit;
 }
 
-/* Make the superscript hang. */
-.sidenote:before { left: var(--side-note-number-hang-left); }
-/* Get first first column of first row to line up with other rows. */
-.sidenote { text-indent: var(--side-note-text-indent); }
+/* Make the superscript hang in the margin. */
+.sidenote:before {
+  position: absolute;
+  right: calc(100% + 0.5ch);
+}
 
 /*}}} */
 /* --- Side note input controls --- {{{ */
@@ -345,18 +360,60 @@ h3 {
   font-weight: bold;
 }
 
-h1:not(.title) + *, h1:not(.title) + p { margin-top: var(--h1-margin-bottom); }
-h2 + *, h2 + p                         { margin-top: var(--h2-margin-bottom); }
-h3 + *, h3 + p                         { margin-top: 0; }
+/* No one should ever have more than 4 sidenotes immediately after a heading */
+/* 0 */ h1:not(.title) + :is(*:not(.sidenote-wrapper), p),
+/* 1 */ h1:not(.title) + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p),
+/* 2 */ h1:not(.title) + .sidenote-wrapper + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p),
+/* 3 */ h1:not(.title) + .sidenote-wrapper + .sidenote-wrapper + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p),
+/* 4 */ h1:not(.title) + .sidenote-wrapper + .sidenote-wrapper + .sidenote-wrapper + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p) {
+  margin-top: var(--h1-margin-bottom);
+}
+/* 0 */ h2 + :is(*:not(.sidenote-wrapper), p),
+/* 1 */ h2 + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p),
+/* 2 */ h2 + .sidenote-wrapper + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p),
+/* 3 */ h2 + .sidenote-wrapper + .sidenote-wrapper + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p),
+/* 4 */ h2 + .sidenote-wrapper + .sidenote-wrapper + .sidenote-wrapper + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p) {
+  margin-top: var(--h2-margin-bottom);
+}
+/* 0 */ h3 + :is(*:not(.sidenote-wrapper), p),
+/* 1 */ h3 + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p),
+/* 2 */ h3 + .sidenote-wrapper + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p),
+/* 3 */ h3 + .sidenote-wrapper + .sidenote-wrapper + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p),
+/* 4 */ h3 + .sidenote-wrapper + .sidenote-wrapper + .sidenote-wrapper + .sidenote-wrapper + :is(*:not(.sidenote-wrapper), p) {
+  margin-top: 0;
+}
 
 /* }}} */
 /* ----- Prose --------------------------------------------------------- {{{ */
 
-p, main > ul, main > ol, div.sourceCode, main > pre, img, table {
+p, main > ul, main > ol, .wide, :not(.wide) > div.sourceCode, main > pre, img, table, blockquote {
   margin-top: var(--line-height);
   margin-bottom: var(--line-height)
 }
 
+:is(.marginnote, .sidenote) :is(p, main > ul, main > ol, .wide, :not(.wide) > div.sourceCode, main > pre, img, table, blockquote) {
+  margin-top: var(--side-note-font-size);
+  margin-bottom: var(--side-note-font-size);
+}
+
+/* Block-style sidenotes will have `p` tags in them, but we need to not have extra margins. */
+.sidenote-wrapper > :is(.marginnote, .sidenote) > :is(p, main > ul, main > ol, .wide, :not(.wide) > div.sourceCode, main > pre, img, table, blockquote):first-child {
+  margin-top: 0;
+}
+.sidenote-wrapper > :is(.marginnote, .sidenote) > :is(p, main > ul, main > ol, .wide, :not(.wide) > div.sourceCode, main > pre, img, table, blockquote):last-child {
+  margin-bottom: 0;
+}
+
+.wide > p:first-child,
+.wide > table:first-child,
+:is(p, figure) > img:first-child {
+  margin-top: 0;
+}
+.wide > p:last-child,
+:is(p, figure) > img:last-child {
+  margin-bottom: 0;
+}
+
 ul:not(.task-list) {
   margin-left: var(--ul-indent-size);
 }
@@ -782,11 +839,19 @@ figure {
   margin-bottom: var(--captioned-figure-gap);
 }
 
-figure + p {
+/* No one should ever have more than 4 sidenotes immediately after an image */
+/* 0 */ figure + p,
+/* 1 */ figure + .sidenote-wrapper + p,
+/* 2 */ figure + .sidenote-wrapper + .sidenote-wrapper + p,
+/* 3 */ figure + .sidenote-wrapper + .sidenote-wrapper + .sidenote-wrapper + p,
+/* 4 */ figure + .sidenote-wrapper + .sidenote-wrapper + .sidenote-wrapper + .sidenote-wrapper + p {
   margin-top: var(--captioned-figure-gap);
 }
 
-figure > img, figure > pre, figure > div.sourceCode {
+figure > img, figure > pre, figure > div.sourceCode, figure:not(.wide) > div.sourceCode {
+  margin-bottom: var(--figcaption-gap);
+}
+:is(.sidenote, .marginnote) :is(figure > img, figure > pre, figure > div.sourceCode, figure:not(.wide) > div.sourceCode) {
   margin-bottom: var(--figcaption-gap);
 }
 
@@ -1184,6 +1249,11 @@ nav#TOC > input:checked + ul {
 
   .wide {
     width: var(--main-width);
+  }
+  .sidenote-wrapper .wide {
+    width: 100%;
+  }
+  .wide {
     overflow-x: auto;
     overflow-y: hidden;
   }
@@ -1220,10 +1290,20 @@ nav#TOC > input:checked + ul {
     margin-right: var(--line-height);
   }
 
-  .sidenote,
-  .marginnote {
+  .margin-toggle:not(:checked) + .marginnote {
     display: none;
   }
+  .margin-toggle:not(:checked) + .sidenote {
+    /* .sidenote is special because .sidenote:before tracks the counter,
+     * and counters don't increment for display: none;
+     * https://stackoverflow.com/a/36600119
+     * */
+    position: absolute;
+    left: -9999px;
+    max-height: 0px;
+    overflow: hidden;
+    opacity: 0;
+  }
 
   .margin-toggle:checked + .sidenote,
   .margin-toggle:checked + .marginnote {

data/assets/js/block_based_side_notes.js

@@ -0,0 +1,46 @@
+;(function() {
+  function hoistAbove() {
+    const toHoist = document.querySelectorAll('main > .sidenote-wrapper + :not(.sidenote-wrapper)');
+    for (let i = toHoist.length - 1; i >= 0; i--) {
+      const source = toHoist[i];
+      let target = source.previousElementSibling;
+      while (target.previousElementSibling?.classList.contains('sidenote-wrapper')) {
+        target = target.previousElementSibling;
+      }
+      source.parentNode.insertBefore(source, target);
+    }
+  }
+
+  function sinkBelow() {
+    const toHoist = document.querySelectorAll('main > :not(.sidenote-wrapper) + .sidenote-wrapper');
+    for (let i = 0; i < toHoist.length; i++) {
+      const source = toHoist[i].previousElementSibling;
+      let target = source.nextElementSibling;
+      while (target.classList.contains('sidenote-wrapper')) {
+        target = target.nextElementSibling;
+      }
+      source.parentNode.insertBefore(source, target);
+    }
+  }
+
+  if (window.matchMedia('screen')) {
+    if (window.innerWidth <= 796) {
+      hoistAbove();
+    }
+    let prevSize = window.innerWidth;
+    // Needs to mirror breakpoints in :root settings in CSS variables
+    // 745px = --main-width-narrow
+    // 26px = --line-height
+    // 169px = side note min width narrow
+    const breakpoint = 26 + 550 + 26 + 169 + 26 - 1;
+    window.addEventListener('resize', function() {
+      const newSize = window.innerWidth;
+      if (prevSize >= breakpoint && newSize < breakpoint) {
+        hoistAbove();
+      } else if (prevSize < breakpoint && newSize >= breakpoint) {
+        sinkBelow();
+      }
+      prevSize = newSize;
+    });
+  }
+})();

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: pandoc-markdown-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 0.17.0
+  version: 0.18.1
 platform: ruby
 authors:
 - Jake Zimmerman
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-11-03 00:00:00.000000000 Z
+date: 2026-01-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll-pandoc
@@ -66,7 +66,7 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '10.0'
-description: 
+description:
 email:
 - zimmerman.jake@gmail.com
 executables: []
@@ -76,6 +76,7 @@ files:
 - README.md
 - _includes/after.html
 - _includes/before.html
+- _includes/block_based_side_notes.html
 - _includes/default.html
 - _includes/enable_checkboxes.html
 - _includes/footer.html
@@ -88,6 +89,7 @@ files:
 - _template.html5
 - assets/css/skylighting-solarized-theme.css
 - assets/css/theme.css
+- assets/js/block_based_side_notes.js
 - assets/js/enable_checkboxes.js
 - assets/js/enable_katex.js
 - assets/libs/KaTeX/0.11.1/fonts/KaTeX_AMS-Regular.ttf
@@ -156,7 +158,7 @@ homepage: https://github.com/jez/pandoc-markdown-jekyll-theme
 licenses:
 - BlueOak-1.0.0
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -171,8 +173,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.3.1
-signing_key: 
+rubygems_version: 3.1.2
+signing_key:
 specification_version: 4
 summary: A Jekyll theme based on jez/pandoc-markdown-css-theme
 test_files: []