Add Tap Inspector to book and homepage

Author: mk

CHANGELOG.md

@@ -20,6 +20,8 @@ Changes can be:
 
 * 📖 Improve Table of Contents design and fixing re-rendering issues. Also added suport for chapter expansion.
 
+* 📒 Mention Tap Inspector in Book of Clerk & on Homepage
+
 * 🛠 Upgrade `framer-motion` dep to `10.12.16`.
 
 * 💫 Assign `:name` to every viewer in `default-viewers`

book.clj

@@ -132,8 +132,6 @@
 ;; nmap <silent> <localleader>cs :execute ClerkShow()<CR>
 ;; ```
 
-
-
 ;; ## 🔍 Viewers
 
 ;; Clerk comes with a number of useful built-in viewers e.g. for
@@ -913,6 +911,20 @@ v/table-viewer
 
 ^{::clerk/budget nil ::clerk/auto-expand-results? true} rows
 
+;; ## 🚰 Tap Inspector
+
+;; Clerk comes with an inspector notebook for Clojure's tap system. Use the following form from your REPL to show it.
+
+;;```clojure
+;;(nextjournal.clerk/show! 'nextjournal.clerk.tap)
+;;```
+
+;; You can then call `tap>` from anywhere in your codebase and the Tap Inspector will show your value. This supports the full viewer api described above.
+
+;;```clojure
+;;(tap> (clerk/html [:h1 "Hello 🚰 Tap Inspector 👋"]))
+;;```
+
 ;; ## 🧱 Static Building
 
 ;; Clerk can make a static HTML build from a collection of notebooks.

notebooks/onwards.md

@@ -107,7 +107,7 @@ Notes about what currently breaks 💥 and what could be better tomorrow.
 ## 📖 Book Updates
 - [ ] Explain `render-opts` and `viewer-opts` in book
 - [ ] Add sync atoms to book
-- [ ] Add tap inspector to book
+- [x] Add tap inspector to book
 - [ ] Add customizing clerk: markdown backtick eval example to book
 - [ ] Add example for cross-document table of contents
 ## 💡 Ideas

src/nextjournal/clerk/home.clj

@@ -126,8 +126,8 @@
                             :placeholder "Type to filter…"
                             :value (:query @!state "")
                             :on-input (fn [e] (swap! !state #(-> %
-                                                                (assoc :query (.. e -target -value))
-                                                                (dissoc :selected-path))))
+                                                                 (assoc :query (.. e -target -value))
+                                                                 (dissoc :selected-path))))
                             :ref !input-el}]
                           [:div.text-slate-400.absolute
                            {:class "left-[10px] top-[11px]"}
@@ -139,6 +139,13 @@
                            {:class "right-[10px] top-[9px]"}
                            "⌘J"]]))))
 
+(defn code-highlight
+  ([code] (code-highlight {} code))
+  ([opts code]
+   [:span.font-mono.bg-white.bg-amber-100.border.border-amber-300.relative.dark:bg-slate-900.dark:border-slate-600.rounded.font-bold
+    {:class (str "px-[4px] py-[1px] -top-[1px] mx-[2px] " (:class opts))}
+    code]))
+
 {::clerk/visibility {:result :show}}
 
 ^{::clerk/css-class ["w-full" "m-0"]}
@@ -153,23 +160,29 @@
   [:div.rounded-lg.border-2.border-amber-100.bg-amber-50.dark:border-slate-600.dark:bg-slate-800.dark:text-slate-100.px-8.py-4.mx-auto.text-center.font-sans.mt-6.md:mt-4
    [:div.font-medium
     "Call "
-    [:span.font-mono.text-sm.bg-white.bg-amber-100.border.border-amber-300.relative.dark:bg-slate-900.dark:border-slate-600.rounded.font-bold
-     {:class "px-[4px] py-[1px] -top-[1px] mx-[2px]"}
-     "nextjournal.clerk/show!"]
+    (code-highlight {:class "text-sm"} "nextjournal.clerk/show!")
     " from your REPL to make a notebook appear!"]
    [:div.mt-2.text-sm "⚡️ This works best when you " [:a {:href "https://book.clerk.vision/#editor-integration"} "set up your editor to use a key binding for this!"]]]
-  [:div.rounded-lg.border-2.border-indigo-100.bg-indigo-50.dark:border-slate-600.dark:bg-slate-800.dark:text-slate-100.px-8.py-4.mt-6.text-center.font-sans
+  [:div.rounded-lg.border-2.border-indigo-100.bg-indigo-50.dark:border-slate-600.dark:bg-slate-800.dark:text-slate-100.px-8.py-4.mt-4.text-center.font-sans
    [:div.font-medium.md:flex.items-center.justify-center
-    [:span.text-xl.relative {:class "top-[2px] mr-2"} "📖"]
-    [:span "New to Clerk? Learn all about it in " [:a {:href "https://book.clerk.vision"} [:span.block.md:inline "The Book of Clerk."]]]]
+    [:span.text-xl.relative {:class "top-[2px] mr-2"} ""]
+    [:span "🌱 New to Clerk? Learn all about it in the " [:a {:href "https://book.clerk.vision"} [:span.block.md:inline "📖 Book of Clerk."]]]]
    #_
    [:div.mt-2.text-sm
     "Here are some handy links:"
     [:a.ml-3 {:href "#"} "🚀 Getting Started"]
     [:a.ml-3 {:href "#"} "🔍 Viewers"]
     [:a.ml-3 {:href "#"} "🙈 Controlling Visibility"]]]
+  [:div.rounded-lg.border-2.border-amber-100.bg-amber-50.dark:border-slate-600.dark:bg-slate-800.dark:text-slate-100.px-8.py-4.mx-auto.text-center.font-sans.mt-6.md:mt-4
+   [:div [:span.font-medium "💡 Tip:"] " Show the " [:a {:href "/'nextjournal.clerk.tap"} "🚰 Tap Inspector"] " to inspect values using " (code-highlight {:class "text-sm" }"tap>") "."]
+   [:div.mt-2.text-xs
+    (code-highlight {:class "text-sm"} "(nextjournal.clerk/show 'nextjournal.clerk.tap)")]]
   #_[:div.mt-6
-     (clerk/with-viewer filter-input-viewer `!filter)]
+     (clerk/with-viewer filter-input-viewer `!filter)]])
+
+^{::clerk/css-class ["w-full" "m-0"]}
+(clerk/html
+ [:div.max-w-prose.px-8.mx-auto.-mt-6
   [:div.flex.mt-6.border-t.dark:border-slate-700.font-sans
    [:div {:class (str "w-1/2 pt-6 " (when-not (seq @!filter) "pr-6 border-r dark:border-slate-700"))}
     [:h4.text-lg "All Notebooks"]
@@ -183,4 +196,5 @@
         (cond
           error [:div {:class "-mx-8"} (clerk/md error)]
           paths (let [{:keys [query]} @!filter]
-                  (clerk/with-viewer index-viewer {:paths (filter (partial query-fn query) paths)}))))])]])
+                  (clerk/with-viewer index-viewer {:paths (filter (partial query-fn query) paths)}))))])]]
+ )