Sidenotes (nextjournal#389)

Using the [pandoc footnotes extension](https://pandoc.org/MANUAL.html#footnotes)

Co-authored-by: Philippa Markovics <philippa@markovics.com>

notebooks/viewers/markdown.clj

@@ -17,7 +17,7 @@ It's [Markdown](https://daringfireball.net/projects/markdown/), like you know it
    A heading and a paragraph as result")
 
 (clerk/md
-  "### A heading and a paragraph as result, separated by a newline
+ "### A heading and a paragraph as result, separated by a newline
 
    A heading and a paragraph as result, separated by a newline")
 
@@ -30,4 +30,35 @@ It's [Markdown](https://daringfireball.net/projects/markdown/), like you know it
 
 ;; > If the recursion point was a `fn` method, then it rebinds the params.
 ;; >
-;; > — Special Forms
+;; > — Special Forms
+
+;; ## Sidenotes
+
+;; One of the most distinctive features of Tufte’s style is his extensive use
+;; of sidenotes [^sidenote]. This is a sidenote. Sidenotes are like footnotes,
+;; except they don’t force the reader to jump their eye to the bottom of the
+;; page, but instead display off to the side in the margin. Perhaps you have
+;; noticed their use in this document already. You are very astute.
+;; 
+;; [^sidenote]: This is a sidenote. The purpose of this text is to
+;; merely demonstrate the use of sidenotes. All text was originally published
+;; 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
+;; 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
+;; 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
+;; ideas in the main text.
+
+
+
+
+
+
+
+
+

resources/stylesheets/viewer.css

@@ -295,24 +295,18 @@
 /* --------------------------------------------------------------- */
 
 .sidenote-ref {
-  @apply top-[-3px] inline-flex justify-center items-center w-[18px] h-[18px]
-    rounded-full bg-slate-100 border border-slate-300 hover:bg-slate-200 hover:border-slate-300
-    m-0 ml-[4px] cursor-pointer;
+  @apply top-[-0.5em] w-auto h-auto inline border-0 bg-transparent m-0 pointer-events-none;
 }
 .sidenote {
-  @apply hidden float-left clear-both mx-[2.5%] my-4 text-xs relative w-[95%];
-}
-.sidenote-ref.expanded + .sidenote {
-  @apply block;
+    @apply block w-full float-left clear-both relative font-sans text-xs my-4 bg-slate-100 p-4;
 }
 @media (min-width: 860px) {
-  .sidenote-ref {
-    @apply top-[-0.5em] w-auto h-auto inline border-0 bg-transparent m-0 pointer-events-none;
-  }
   .sidenote sup { @apply inline; }
-  .viewer-markdown .contains-sidenotes p { @apply max-w-[65%]; }
-  .viewer-markdown p .sidenote {
-    @apply mr-[-54%] mt-[0.2rem] w-1/2 float-right clear-right relative block;
+  .sidenote {
+    @apply -mt-[20px] w-[165px] float-right clear-right absolute right-0 p-0 bg-transparent;
+  }
+  .sidenotes-layout .viewer-markdown p {
+      @apply relative pr-[205px];
   }
 }
 .viewer-code + .viewer:not(.viewer-markdown):not(.viewer-code):not(.viewer-code-folded),

src/nextjournal/clerk/parser.cljc

@@ -246,7 +246,7 @@
         (assoc :md-context doc)
         (update :blocks conj {:type :markdown
                               :doc (-> doc
-                                       (select-keys [:type :content])
+                                       (select-keys [:type :content :sidenotes?])
                                        ;; take only new nodes, keep context intact
                                        (update :content subvec (inc index)))}))))
 
@@ -255,7 +255,7 @@
   ([{:as opts :keys [doc?]} s]
    (let [doc (parse-clojure-string opts {:blocks [] :md-context (markdown-context)} s)]
      (select-keys (cond-> doc doc? (merge (:md-context doc)))
-                  [:blocks :title :toc])))
+                  [:blocks :title :toc :sidenotes?])))
   ([{:as _opts :keys [doc?]} initial-state s]
    (loop [{:as state :keys [nodes blocks add-comment-on-line?]} (assoc initial-state :nodes (:children (p/parse-string-all s)))]
      (if-let [node (first nodes)]
@@ -301,7 +301,7 @@
          ::md-slice []))
 
 (defn parse-markdown-string [{:as opts :keys [doc?]} s]
-  (let [{:as ctx :keys [content toc title]} (parse-markdown (markdown-context) s)]
+  (let [{:as ctx :keys [content]} (parse-markdown (markdown-context) s)]
     (loop [{:as state :keys [nodes] ::keys [md-slice]} {:blocks [] ::md-slice [] :nodes content :md-context ctx}]
       (if-some [node (first nodes)]
         (recur
@@ -314,7 +314,8 @@
         (-> state
             (update :blocks #(cond-> % (seq md-slice) (conj {:type :markdown :doc {:type :doc :content md-slice}})))
             (select-keys [:blocks :visibility])
-            (merge (when doc? {:title title :toc toc})))))))
+            (merge (when doc?
+                     (select-keys ctx [:sidenotes? :title :toc]))))))))
 
 #_(parse-markdown-string {:doc? true} "# Hello\n```\n1\n;; # 1️⃣ Hello\n2\n\n```\nhey\n```\n3\n;; # 2️⃣ Hello\n4\n```\n")
 

src/nextjournal/clerk/render.cljs

@@ -114,7 +114,7 @@
 
 (defonce !eval-counter (r/atom 0))
 
-(defn render-notebook [{:as _doc xs :blocks :keys [bundle? css-class toc toc-visibility]}]
+(defn render-notebook [{:as _doc xs :blocks :keys [bundle? css-class sidenotes? toc toc-visibility]}]
   (r/with-let [local-storage-key "clerk-navbar"
                navbar-width 220
                !state (r/atom {:toc (toc-items (:children toc))
@@ -165,7 +165,8 @@
           :initial (when toc-visibility {:margin-left doc-inset})
           :animate (when toc-visibility {:margin-left doc-inset})
           :transition navbar/spring
-          :class (or css-class "flex flex-col items-center viewer-notebook flex-auto")}
+          :class (str (or css-class "flex flex-col items-center viewer-notebook flex-auto ")
+                      (when sidenotes? "sidenotes-layout"))}
          (doall
           (map-indexed (fn [idx x]
                          (let [{viewer-name :name} (viewer/->viewer x)

src/nextjournal/clerk/viewer.cljc

@@ -606,7 +606,9 @@
 #_(datafy-scope #'datafy-scope)
 
 (def markdown-viewers
-  [{:name :nextjournal.markdown/doc :transform-fn (into-markup [:div.viewer-markdown])}
+  [{:name :nextjournal.markdown/doc
+    :transform-fn (into-markup (fn [{:keys [sidenotes?]}]
+                                 [(keyword (str "div.viewer-markdown" (when sidenotes? ".contains-sidenotes")))]))}
 
    ;; blocks
    {:name :nextjournal.markdown/heading
@@ -970,6 +972,7 @@
                     :blocks :bundle?
                     :css-class
                     :open-graph
+                    :sidenotes?
                     :title
                     :toc
                     :toc-visibility])