Fix too large margins between content that has sidenotes and content …

…without them
nextjournal · Nov 9, 2023 · aee782a · aee782a
1 parent 12272ec
commit aee782a
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 12 deletions.
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,6 +320,16 @@
 .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 {
@@ -335,13 +345,13 @@
     @apply pr-[241px];
   }
   .sidenote-container {
-    @apply relative mb-0 flex justify-between;
+    @apply relative flex justify-between;
   }
   .sidenote-container > *:not(.sidenote-column) {
     margin-right: 40px;
   }
   .sidenote:last-of-type {
-    margin-bottom: 1rem;
+
   }
   .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,18 @@
    {: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]}]
+                                  (let [main-col (filter #(not= (:type %) :sidenote-column) content)
+                                        sidenote-col (filter #(= (:type %) :sidenote-column) content)]
+                                    (into
+                                     [:div.sidenote-container
+                                      (into [:div.sidenote-main-col] (mapv (partial apply-viewers-to-md viewers doc) main-col))]
+                                     (mapv (partial apply-viewers-to-md viewers doc) sidenote-col)))))))}
    {:name :nextjournal.markdown/sidenote-column :transform-fn (into-markup [:div.sidenote-column])}
    {:name :nextjournal.markdown/sidenote
     :transform-fn (into-markup (fn [{:keys [ref]}]