Fix overlapping sidenotes (#573)

Sidenotes that are longer than the content they are anchored to will now push their subsequent content down instead of overlapping with it. Note: This uses `display: flex` now instead of positioning the sidenotes absolutely, thus preventing margin collapse with subsequent nodes that don’t have sidenotes. The layout adjusts for this now. Closes #564.
nextjournal · Nov 9, 2023 · 8b804e7 · 8b804e7
1 parent fe69278
commit 8b804e7
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,8 @@ Changes can be:
 
 * 🐞 Fix `row` and `col` viewers not showing a first map argument, fixes [#567](https://github.com/nextjournal/clerk/issues/567) @teodorlu
 
+* 🐞 Fix long sidenotes overlapping with subsequent content, fixes [#564](https://github.com/nextjournal/clerk/issues/564) @hlship
+
 ## 0.15.957 (2023-09-28)
 
 * 🔌 Offline support

diff --git a/notebooks/viewers/markdown.clj b/notebooks/viewers/markdown.clj
@@ -78,9 +78,11 @@ It's [Markdown](https://daringfireball.net/projects/markdown/), like you know it
 ;; on the [Tufte CSS website](https://edwardtufte.github.io/tufte-css/).
 ;;
 ;; Sidenotes are a great example of the web not being like print. On sufficiently
-;; large viewports, Tufte CSS uses the margin for sidenotes, margin notes, and
+;; large viewports, Tufte CSS^[Cascading Style Sheets] uses the margin for sidenotes, margin notes, and
 ;; small figures. On smaller viewports, elements that would go in the margin are
-;; hidden until the user toggles them into view. The goal is to present related
+;; hidden until the user toggles them into view.
+;;
+;; The goal is to present related
 ;; but not necessary information such as asides or citations as close as possible
 ;; to the text that references them. At the same time, this secondary information
 ;; should stay out of the way of the eye, not interfering with the progression of
@@ -98,6 +100,18 @@ It's [Markdown](https://daringfireball.net/projects/markdown/), like you know it
 ;; And it can be followed by lists so the list layout also has to adapt to the
 ;; new content width once a sidenote is present in the document:
 ;;
+;; ### Long sidenotes
+;;
+;; Sometimes sidenotes can be longer than the content they are anchored to. [^long]
+;;
+;; [^long]: In this case they should push their proximate content down instead of
+;; overlapping with it. This would be especially glaring when the subsequent element
+;; is a code cell, which spans both the main contentn col and sidenote col.
+
+;; ```clj
+;; (comment "Here is a Clojure code listing to be pushed down by the sidenote.")
+;; ```
+
 ;; Things to do:
 
 ;; * Hire two private investigators. Get them to follow each other.

diff --git a/resources/stylesheets/viewer.css b/resources/stylesheets/viewer.css
@@ -14,7 +14,7 @@
   .font-condensed { font-family: "Fira Sans Condensed", sans-serif; }
   .font-inter     { font-family: "Inter", sans-serif; }
   body {
-    @apply font-serif antialiased text-gray-900 sm:overscroll-y-none;
+    @apply font-serif antialiased text-gray-900 sm:overscroll-y-none pb-8;
   }
   code, .code {
     @apply font-mono text-sm text-gray-900 bg-slate-50 px-0.5 py-px rounded dark:bg-gray-800;
@@ -320,10 +320,20 @@
 .sidenote-container {
   @apply mb-4;
 }
+.sidenote-main-col *:last-child {
+  @apply mb-0;
+}
+.sidenote-main-col {
+  @apply w-full;
+}
+.sidenote-main-col > ul > li:first-child,
+.sidenote-main-col > ol > li:first-child {
+  @apply mt-0;
+}
 @media (min-width: 860px) {
   .sidenote sup { @apply inline; }
   .sidenote-column {
-    @apply w-[165px] absolute right-0 top-0 -mr-[205px];
+    @apply w-[165px] -mr-[205px] flex-shrink-0;
   }
   .sidenote {
     @apply bg-transparent dark:bg-transparent p-0;
@@ -335,7 +345,13 @@
     @apply pr-[241px];
   }
   .sidenote-container {
-    @apply relative mb-0;
+    @apply relative flex justify-between;
+  }
+  .sidenote-container > *:not(.sidenote-column) {
+    margin-right: 40px;
+  }
+  .sidenote:last-of-type {
+
   }
   .sidenotes-layout h1 {
     @apply w-[756px] !important;

diff --git a/src/nextjournal/clerk/viewer.cljc b/src/nextjournal/clerk/viewer.cljc
@@ -333,6 +333,15 @@
       (throw (ex-info "no type given for with-md-viewer" {:wrapped-value wrapped-value})))
     (with-viewer (keyword "nextjournal.markdown" (name type)) wrapped-value)))
 
+(defn apply-viewers-to-md [viewers doc x]
+  (-> (ensure-wrapped-with-viewers viewers (assoc x ::doc doc))
+      (with-md-viewer)
+      (apply-viewers)
+      (as-> w
+          (if (= `markdown-node-viewer (:name (->viewer w)))
+            (->value w)
+            [(inspect-fn) (process-wrapped-value w)]))))
+
 (defn into-markup [markup]
   (fn [{:as wrapped-value :nextjournal/keys [viewers render-opts]}]
     (-> (with-viewer {:name `markdown-node-viewer :render-fn 'identity} wrapped-value)
@@ -341,14 +350,7 @@
                 (fn [{:as node :keys [text content] ::keys [doc]}]
                   (into (cond-> markup (fn? markup) (apply [(merge render-opts node)]))
                         (cond text [text]
-                              content (mapv #(-> (ensure-wrapped-with-viewers viewers (assoc % ::doc doc))
-                                                 (with-md-viewer)
-                                                 (apply-viewers)
-                                                 (as-> w
-                                                     (if (= `markdown-node-viewer (:name (->viewer w)))
-                                                       (->value w)
-                                                       [(inspect-fn) (process-wrapped-value w)])))
-                                            content))))))))
+                              content (mapv (partial apply-viewers-to-md viewers doc) content))))))))
 
 ;; A hack for making Clerk not fail in the precense of
 ;; programmatically generated keywords or symbols that cannot be read.
@@ -780,7 +782,17 @@
    {:name :nextjournal.markdown/toc :transform-fn (into-markup [:div.toc])}
 
    ;; sidenotes
-   {:name :nextjournal.markdown/sidenote-container :transform-fn (into-markup [:div.sidenote-container])}
+   {:name :nextjournal.markdown/sidenote-container
+    :transform-fn (fn [{:as wrapped-value :nextjournal/keys [viewers render-opts]}]
+                    (-> (with-viewer {:name `markdown-node-viewer :render-fn 'identity} wrapped-value)
+                        mark-presented
+                        (update :nextjournal/value
+                                (fn [{:as node :keys [text content] ::keys [doc]}]
+                                  [:div.sidenote-container
+                                   (into [:div.sidenote-main-col]
+                                         (map (partial apply-viewers-to-md viewers doc))
+                                         (drop-last content))
+                                   (apply-viewers-to-md viewers doc (last content))]))))}
    {:name :nextjournal.markdown/sidenote-column :transform-fn (into-markup [:div.sidenote-column])}
    {:name :nextjournal.markdown/sidenote
     :transform-fn (into-markup (fn [{:keys [ref]}]