From 47b982bd0dd5c8be600d70023a7aa7ac54750543 Mon Sep 17 00:00:00 2001 From: Abhilesh Dhawanjewar <2447878+abhilesh@users.noreply.github.com> Date: Wed, 16 Jul 2025 19:07:42 +0100 Subject: [PATCH] Add sidenote examples, related posts and giscus to distill posts (#3103) This PR adds a few stylistic improvements to the distill-style blog posts: - Update distill blog post example to showcase sidenotes as an alternative to styles in PR #3077 - Showcase equations in sidenotes (closes #1242) - Add `overrides.js` to match footnotes and citation styles with global theme styling - Add "related posts" sections if enabled to distill style posts - Add "giscus" section if enabled to distill style posts https://github.com/user-attachments/assets/b19a9cd9-779d-4d89-a4fb-eb14fb384480 --- _includes/distill_scripts.liquid | 3 ++ _includes/giscus.liquid | 11 ++++- _includes/related_posts.liquid | 17 ++++--- _layouts/distill.liquid | 17 +++++-- _posts/2018-12-22-distill.md | 71 +++++++++++++++++++++++++++--- assets/img/rhino.png | Bin 0 -> 1648028 bytes assets/js/distillpub/overrides.js | 27 ++++++++++++ 7 files changed, 129 insertions(+), 17 deletions(-) create mode 100644 assets/img/rhino.png create mode 100644 assets/js/distillpub/overrides.js diff --git a/_includes/distill_scripts.liquid b/_includes/distill_scripts.liquid index 12d365d..8a8aa1f 100644 --- a/_includes/distill_scripts.liquid +++ b/_includes/distill_scripts.liquid @@ -13,6 +13,9 @@ crossorigin="anonymous" > + + + {% if page.mermaid and page.mermaid.enabled %} ``` @@ -1248,9 +1248,9 @@ The rendered output is shown below, displayed as a vector graphic： \draw[dashed, color=gray] (1.5,1.5) -- (1.5,0) node[below, black] {$\cos \theta$}; \draw[dashed, color=gray] (1.5,1.5) -- (0,1.5) node[left, black] {$\sin \theta$}; - \node at (2.2, 0) [below] {1}; - \node at (0, 2.2) [left] {$i$}; - \node at (1.5,1.5) [above right, color=blue] {$(\cos \theta \, \sin \theta)$}; + \node at (2.2, 0) [below] {1}; + \node at (0, 2.2) [left] {$i$}; + \node at (1.5,1.5) [above right, color=blue] {$(\cos \theta \, \sin \theta)$}; \end{tikzpicture} @@ -1334,6 +1334,65 @@ It does not interrupt the normal flow of `.l-body` sized text except on mobile s --- +## Sidenotes + +Distill supports sidenotes, which are like footnotes but placed in the margin of the page. +They are useful for providing additional context or references without interrupting the flow of the main text. + +There are two main ways to create a sidenote: + +**Using the `