Use alter-var-root to inject fonts into head

index.clj

@@ -6,10 +6,21 @@
     :description "Clerk takes a Clojure namespace and turns it into a notebook."
     :image "https://cdn.nextjournal.com/data/QmX6rTcD59yVWjLkTdAwAJbzyDDqLZNHrdWtLxF7XQVvbW?filename=clerk-og-image.png&content-type=image/png"}}
   (:require [clojure.string :as str]
-            [nextjournal.clerk :as clerk])
+            [nextjournal.clerk :as clerk]
+            [nextjournal.clerk.view :as clerk.view])
   (:import (javax.imageio ImageIO)
            (java.net URL)))
 
+(alter-var-root #'clerk.view/include-css+js
+                (fn [include-css+js-orig extra-includes]
+                  (fn [state]
+                    (concat (include-css+js-orig state)
+                            extra-includes)))
+                (list [:link {:rel "preconnect" :href "https://fonts.bunny.net"}]
+                      [:link {:rel "stylesheet" :href "https://fonts.bunny.net/css?family=inter:400,600"}]
+                      [:link {:rel "preconnect" :href "https://ntk148v.github.io"}]
+                      [:link {:rel "stylesheet" :href "https://ntk148v.github.io/iosevkawebfont/latest/iosevka.css"}]))
+
 (def clerk-type
   [:svg.flex-shrink-0 {:width "135", :height "62", :viewbox "0 0 135 62", :fill "none", :xmlns "http://www.w3.org/2000/svg" :alt "Clerk"}
    [:path {:fill-rule "evenodd", :clip-rule "evenodd", :d "M19.9531 39.1211V52.569C19.9531 57.4591 17.4589 59.9042 12.4707 59.9042H9.88746C4.81011 59.9042 2.31598 57.4591 2.31598 52.569V9.43099C2.31598 4.54084 4.81011 2.09577 9.88746 2.09577H12.3816C17.3699 2.09577 19.864 4.54084 19.864 9.43099V21.0451H22.18V9.43099C22.18 3.23099 18.8842 0 12.3816 0H9.88746C3.38489 0 0 3.23099 0 9.43099V52.4817C0 58.8563 3.29582 62 9.88746 62H12.4707C18.9732 62 22.2691 58.8563 22.2691 52.4817V39.1211H19.9531ZM31.6784 0.436619V61.5634H48.3357V59.4676H33.9944V0.436619H31.6784ZM55.4263 61.5634V0.436619H72.7962V2.53239H57.7423V29.4282H72.3508V31.5239H57.7423V59.4676H72.9744V61.5634H55.4263ZM102.974 22.093V9.95493C102.974 3.58028 99.6778 0.436619 93.1752 0.436619H82.2188V61.5634H84.5348V32.9211C84.6073 32.9206 84.6794 32.9202 84.7513 32.9197L92.5106 46.0464L100.538 61.179H103.197L87.204 32.9086C88.7195 32.9043 90.2316 32.9043 92.0172 32.9043C97.7395 32.9043 102.974 30.0625 102.974 22.093ZM100.658 22.3549C100.658 28.031 97.8072 30.8253 92.0172 30.8253H84.5348V2.53239H93.0861C98.1635 2.53239 100.658 4.97747 100.658 9.86761V22.3549ZM118.165 30.5634L134.644 61.5634H132.15L124.044 46.2817L115.938 31V61.5634H113.622V31V0.436619H115.938V30.4761L132.595 0.436619H135L118.165 30.5634Z", :fill "currentColor"}]])
@@ -135,10 +146,7 @@ a:hover { color: white; }
 .link-hairline { border-bottom: 1px solid var(--greenish-60); }
 .link-hairline:hover { border-color: white; }
 .twitter-card iframe { border: 3px solid var(--greenish-30); border-radius: 15px; overflow: hidden; margin-top: -10px;"}}]
-  [:link {:rel "preconnect" :href "https://fonts.bunny.net"}]
-  [:link {:rel "stylesheet" :href "https://fonts.bunny.net/css?family=inter:400,600"}]
-  [:link {:rel "preconnect" :href "https://ntk148v.github.io"}]
-  [:link {:rel "stylesheet" :href "https://ntk148v.github.io/iosevkawebfont/latest/iosevka.css"}]])
+  ])
 
 ^{::clerk/width :full}
 (clerk/html