Transform plain containers to hiccup lists (#35)

---------

Co-authored-by: Michiel Borkent <[email protected]>

Author: zampino

.github/workflows/main.yml

@@ -25,10 +25,10 @@ jobs:
       - name: 🔧 Install clojure
         uses: DeLaGuardo/setup-clojure@master
         with:
-          cli: '1.10.3.943'
+          cli: '1.12.0.1530'
 
       - name: 🗝 maven cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: |
             ~/.m2
@@ -53,11 +53,8 @@ jobs:
         with:
           babashka-version: 0.7.8
 
-      - name: 🗝 Yarn Cache
-        uses: c-hive/gha-yarn-cache@v2
-
       - name: 🗝 Shadow compiler cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: .shadow-cljs
           key: ${{ runner.os }}-shadow-cljs-${{ github.sha }}
@@ -101,7 +98,7 @@ jobs:
           github-token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: 🗝 maven cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: |
             ~/.m2
@@ -111,16 +108,13 @@ jobs:
             ${{ runner.os }}-maven-
 
       - name: 🗝 Clerk Cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: .clerk
           key: ${{ runner.os }}-clerk-cache
 
-      - name: 🗝 Yarn Cache
-        uses: c-hive/gha-yarn-cache@v2
-
       - name: 🗝 Shadow compiler cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: .shadow-cljs
           key: ${{ runner.os }}-shadow-cljs-${{ github.sha }}
@@ -181,7 +175,7 @@ jobs:
           babashka-version: 0.8.156
 
       - name: 🗝 maven cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: |
             ~/.m2

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Unreleased
 
-...
+* Hiccup JVM compatibiltiy for fragments (see [#34](https://github.com/nextjournal/markdown/issues/34))
 
 ## 0.6.157
 

deps.edn

@@ -10,7 +10,7 @@
  :aliases
  {:nextjournal/clerk
   {:extra-paths ["notebooks" "dev"]
-   :extra-deps {io.github.nextjournal/clerk {:git/sha "80b3e0832d08b75e13e3b862bd46660cb1c66d5c"
+   :extra-deps {io.github.nextjournal/clerk {:git/sha "f4c5488e36c8df11fe352889544e7deb9af73cb7"
                                              :exclusions [io.github.nextjournal/markdown]}}
    :jvm-opts ["-Dclojure.main.report=stderr"
               #_"-Dclerk.resource_manifest={\"/js/viewer.js\" \"js/viewer.js\"}"] ;;
@@ -29,10 +29,14 @@
   {:jvm-opts ["-Dpolyglot.engine.WarnInterpreterOnly=false"]}
 
   :dev
-  {:extra-paths ["dev"]
+  {:extra-paths ["dev" "notebooks"]
    :extra-deps {org.babashka/http-client {:mvn/version "0.3.11"}
                 org.clojure/data.json {:mvn/version "2.4.0"}
                 org.clojure/test.check {:mvn/version "1.1.1"}
+                io.github.nextjournal/clerk {:git/sha "f4c5488e36c8df11fe352889544e7deb9af73cb7"
+                                             :exclusions [io.github.nextjournal/markdown]}
+                nubank/matcher-combinators {:mvn/version "3.8.3"}
+                hiccup/hiccup {:mvn/version "2.0.0-RC5"}
                 org.graalvm.js/js {:mvn/version "21.3.2.1"}}}
 
   :test

notebooks/tight_lists.clj

@@ -1,12 +1,13 @@
 ;; # Tight Lists
 (ns tight-lists
-  {:nextjournal.clerk/toc :collapsed
-   :nextjournal.clerk/no-cache true}
+  {:nextjournal.clerk/no-cache true}
   (:require [clojure.data.json :as json]
             [clojure.java.shell :as shell]
             [nextjournal.clerk :as clerk]
             [nextjournal.clerk.viewer :as v]
-            [nextjournal.markdown :as md]))
+            [nextjournal.markdown :as md]
+            [hiccup2.core :as h]
+            [nextjournal.markdown.transform :as md.transform]))
 
 ;; Markdown (commonmark) distingushes between [loose and tight lists](https://spec.commonmark.org/0.30/#loose)
 ;;
@@ -15,40 +16,27 @@
 ;; > Otherwise a list is tight. (The difference in HTML output is that paragraphs in a loose list are wrapped in `<p>` tags,
 ;; > while paragraphs in a tight list are not.)
 ;;
-;; We're solving this ambiguity by getting closer to Pandoc types: introduce a `:plain` type, that is a container for
-;; inline elemets which is not a paragraph. The advantage will be two-fold:
-;;
-;; * being able to distinguish among tight and loose lists via markup
-;; * get closer to the Pandoc and ease document format conversions
-;;
-;; ## Markdown-It
-;;
-;; Markdown-it hides handling of tight/loose behind an [obscure `:hidden` property on the token](https://github.com/markdown-it/markdown-it/blob/8bcc82aa74164a5e13a104f433c26671a92ed872/lib/token.js#L111-L116).
-;;
-;;     * Token#hidden -> Boolean
-;;     *
-;;     * If it's true, ignore this element when rendering. Used for tight lists
-;;     * to hide paragraphs.
-;;     **/
-;;     this.hidden = false
-
 ;; ## Pandoc to the Rescue
 ;;
 ;; To comply with this behaviour [Pandoc uses a `Plain` container type](https://github.com/jgm/pandoc-types/blob/694c383dd674dad97557eb9b97adda17079ebb2c/src/Text/Pandoc/Definition.hs#L275-L278), and I think we should follow their advice
 
+^{::clerk/visibility {:result :hide}}
 (defn ->pandoc-ast [text]
-  (json/read-str
-   (:out
-    (shell/sh "pandoc" "-f" "markdown" "-t" "json" :in text))
-   :key-fn keyword))
+  (clerk/html [:pre
+               (with-out-str
+                 (clojure.pprint/pprint
+                  (json/read-str
+                   (:out
+                    (shell/sh "pandoc" "-f" "markdown" "-t" "json" :in text))
+                   :key-fn keyword)))]))
 
-;; Again, tight
+;; tight
 (->pandoc-ast "
 - one
 - two
 ")
 
-;; and loose lists
+;; vs loose lists
 (->pandoc-ast "
 - one
 
@@ -68,44 +56,48 @@
 - two
 ")
 
-;; ## Adding Plain nodes
-;; We're pushing plain nodes into the document when encoutering a paragraph token wiht the `:hidden` flag.
+^{::clerk/visibility {:result :hide}}
+(defn example [md-string]
+  (v/html
+   [:div.flex-col
+    [:pre.code md-string]
+    [:pre.code (with-out-str
+                 (clojure.pprint/pprint
+                  (dissoc (md/parse md-string) :toc :title :footnotes)))]
+    [:pre.code (with-out-str
+                 (clojure.pprint/pprint
+                  (md/->hiccup md-string)))]
+    (v/html (md/->hiccup md-string))
+    ;; TODO: fix in clerk
+    #_
+    (v/html (str (h/html (md/->hiccup md-string))))]))
 
-(md/parse "
+(clerk/present!
+ (example "
 * this
 * is
-* tight!")
+* tight!"))
 
-(md/parse "
+(example "
 * this
 * is
   > very loose
 
   indeed
 * fin")
 
-;; in terms of Clerk support, that amounts to introduce a new viewer, the natural candidate for rendering plain nodes is
-;; the empty container `:<>`
-(clerk/add-viewers! [(update v/markdown-viewer
-                             :transform-fn (fn [tx-fn]
-                                             (fn [wv] (-> wv
-                                                          tx-fn
-                                                          (update :nextjournal/viewers
-                                                                  v/add-viewers [{:name ::md/plain
-                                                                                  :transform-fn (v/into-markup [:<>])}])))))])
+(example "* one \\
+  hardbreak
+* two")
 
-;; ## Rendering
-;; ### Tight Lists
-;; * one
-;; * two
-;; * three
-;;
-;; ### Loose Lists
-;; * one
-;;
-;;   one-two
-;; * two
-;; * three
-;;   * a tight list
-;;   * in a loose
-;;   * one
+(example "
+* one
+  softbreak
+* two")
+
+;; https://spec.commonmark.org/0.30/#example-314 (loose list)
+(example "- a\n- b\n\n- c")
+;; https://spec.commonmark.org/0.30/#example-319 (tight with loose sublist inside)
+(example "- a\n  - b\n\n    c\n- d\n")
+;; https://spec.commonmark.org/0.30/#example-320 (tight with blockquote inside)
+(example "* a\n  > b\n  >\n* c")

src/nextjournal/markdown/transform.cljc

@@ -68,7 +68,8 @@ a paragraph
   {:doc (partial into-markup [:div])
    :heading (fn [ctx {:as node :keys [attrs]}] (-> (heading-markup node) (conj attrs) (into-markup ctx node)))
    :paragraph (partial into-markup [:p])
-   :plain (partial into-markup [:<>])
+   :plain (fn [ctx {:keys [content]}]
+            (seq (mapv (partial ->hiccup ctx) content)))
    :text (fn [_ {:keys [text]}] text)
    :hashtag (fn [_ {:keys [text]}] [:a.tag {:href (str "/tags/" text)} (str "#" text)]) ;; TODO: make it configurable
    :blockquote (partial into-markup [:blockquote])
@@ -206,3 +207,41 @@ par two"
                      ;; wrap something around the default
                      :paragraph (fn [{:as ctx d :default} node] [:div.p-container (d ctx node)]))))
   )
+
+(comment
+  (require '[hiccup2.core :as h])
+
+  (-> "
+* one
+* two"
+      nextjournal.markdown/parse
+      ->hiccup
+      h/html str
+      )
+
+  (-> "
+* one
+
+* two"
+      nextjournal.markdown/parse
+      ->hiccup
+      h/html str
+      )
+
+  (-> "# foo
+- one \\
+  broken
+- two"
+      nextjournal.markdown/parse
+      ->hiccup
+      h/html str
+      )
+
+  ;; https://spec.commonmark.org/0.30/#example-319
+  (= (str "<div>"
+          "<ul><li>a<ul><li><p>b</p><p>c</p></li></ul></li><li>d</li></ul>"
+          "</div>")
+     (->> "- a\n  - b\n\n    c\n- d"
+          nextjournal.markdown/parse
+          (->hiccup default-hiccup-renderers)
+          h/html str)))