Hookify render-notebook component

nextjournal · Jan 15, 2024 · 0f457c8 · 0f457c8
1 parent 306b839
commit 0f457c8
Showing 1 changed file with 17 additions and 15 deletions.
diff --git a/src/nextjournal/clerk/render.cljs b/src/nextjournal/clerk/render.cljs
@@ -107,21 +107,23 @@
 
 (declare clerk-eval)
 
-(defn render-notebook [{:as doc xs :blocks :keys [package doc-css-class sidenotes? toc toc-visibility header footer]}
-                       {:as render-opts :keys [!expanded-at expandable-toc?]}]
-  (hooks/use-effect (fn []
-                      (swap! !expanded-at merge (navbar/->toc-expanded-at toc toc-visibility)))
-                    [toc toc-visibility])
-  (r/with-let [!mobile-toc? (r/atom (navbar/mobile?))
-               root-ref-fn (fn [el]
-                             (when (and el (exists? js/document))
-                               (code/setup-dark-mode!)
-                               (when-some [heading (when (and (exists? js/location) (not= :single-file package))
-                                                     (try (some-> js/location .-hash not-empty js/decodeURI (subs 1) js/document.getElementById)
-                                                          (catch js/Error _
-                                                            (js/console.warn (str "Clerk render-notebook, invalid hash: "
-                                                                                  (.-hash js/location))))))]
-                                 (js/requestAnimationFrame #(.scrollIntoViewIfNeeded heading)))))]
+(defn scroll-to-location-hash! []
+  (when-some [heading (when (and (exists? js/location))
+                        (try (some-> js/location .-hash not-empty js/decodeURI (subs 1) js/document.getElementById)
+                             (catch js/Error _
+                               (js/console.warn (str "Clerk render-notebook, invalid hash: "
+                                                     (.-hash js/location))))))]
+    (js/requestAnimationFrame #(.scrollIntoViewIfNeeded heading))))
+
+(defn render-notebook [{xs :blocks :keys [package doc-css-class sidenotes? toc toc-visibility header footer]}
+                       {:as render-opts :keys [!expanded-at]}]
+  (hooks/use-effect #(swap! !expanded-at merge (navbar/->toc-expanded-at toc toc-visibility)) [toc toc-visibility])
+  (let [!mobile-toc? (hooks/use-state (navbar/mobile?))
+        root-ref-fn (hooks/use-callback (fn [el]
+                                          (when (and el (exists? js/document))
+                                            (code/setup-dark-mode!)
+                                            (when (not= :single-file package)
+                                              (scroll-to-location-hash!)))))]
     [:div.flex
      {:ref root-ref-fn}
      [:div.fixed.top-2.left-2.md:left-auto.md:right-2.z-10