Merge pull request #142 from scicloj/accept-class-and-style-options

pass class and style from kindly/options #139

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Change Log
 All notable changes to this project will be documented in this file. This change log follows the conventions of [keepachangelog.com](http://keepachangelog.com/).
 
+## [2-beta16] - Pending
+- Class or style from kindly/options (#139)
+
 ## [2-beta15] - 2024-07-27
 - introducing code-and-value and horizontal layout - WIP (PR #127)
 - code cleanup (PR #131)

notebooks/index.clj

@@ -572,3 +572,36 @@
 ;; See the generated [test/index_generated_test.clj](https://github.com/scicloj/clay/blob/main/test/index_generated_test.clj).
 
 ;; For a detailed example using this mechanism, see [the source](https://github.com/scicloj/clojisr/blob/master/notebooks/clojisr/v1/tutorials/main.clj) of the [ClojisR tutorial](https://scicloj.github.io/clojisr/clojisr.v1.tutorials.main.html).
+
+;; ## CSS classes and styles
+;; ### Styling HTML visualizations
+
+;; Clay will transfer CSS classes and styles present in `:kindly/options` metadata to the visualization.
+;; The recommended way to prepare `:kindly/options` metadata is through the `kind` api:
+
+(kind/table {:column-names ["A" "B" "C"]
+             :row-vectors  [[1 2 3] [4 5 6]]}
+            {:class "table-responsive"
+             :style {:background "#f8fff8"}})
+
+;; See also the Kindly documentation on [passing options](https://scicloj.github.io/kindly-noted/kindly#passing-options).
+;; Optional class and style attributes will only be applied to hiccup elements (not markdown content).
+
+;; ### Styling Markdown content
+
+;; Quarto uses pandoc attributes (see https://quarto.org/docs/authoring/markdown-basics.html#sec-divs-and-spans) to attach classes.
+;; ```
+;; ::: {.alert .alert-primary}
+;; Example alert
+;; :::
+;; ```
+;; ::: {.alert .alert-primary}
+;; Example alert
+;; :::
+;; | A | B | C |
+;; |---|---|---|
+;; | 1 | 2 | 3 |
+;; | 4 | 5 | 6 |
+;; : This table is responsive {.responsive}
+
+;; Markdown styling is not currently handled when rendering direct to HTML.

src/scicloj/clay/v2/item.clj

@@ -130,7 +130,7 @@
                    (-> context
                        :kindly/options
                        :html/deps)
-                   ;; depracated:
+                   ;; deprecated:
                    (-> context
                        :kindly/options
                        :reagent/deps))}))

src/scicloj/clay/v2/prepare.clj

@@ -41,17 +41,23 @@
 (defn add-class-to-hiccup [hiccup cls]
   (if cls
     (if (-> hiccup second map?)
-      (update-in hiccup [1 :class] #(add-class-to-class-str % cls))
-      (vec (concat [(first hiccup)
-                    {:class cls}]
-                   (rest hiccup))))
+      (update-in hiccup [1 :class] add-class-to-class-str cls)
+      (into [(first hiccup) {:class cls}] (rest hiccup)))
+    hiccup))
+
+(defn merge-attrs [hiccup x]
+  (if x
+    (if (-> hiccup second map?)
+      (update-in hiccup [1] merge/deep-merge x)
+      (into [(first hiccup) x] (rest hiccup)))
     hiccup))
 
 (defn vector-that-starts-with? [v x]
   (and (vector? v)
        (-> v first (= x))))
 
-(defn item->hiccup [{:keys [hiccup html md
+(defn item->hiccup [{:as note
+                     :keys [hiccup html md
                             script
                             item-class
                             inside-a-table]}
@@ -79,6 +85,7 @@
                                               item/katex-hiccup)
                                           form)))))))
       (add-class-to-hiccup item-class)
+      (merge-attrs (some-> (:kindly/options note) (select-keys [:style :class])))
       (cond-> script
         (conj script))))
 
@@ -159,7 +166,8 @@
         [(-> complete-context
              preparer
              (update :hiccup limit-hiccup-height complete-context)
-             (update :md limit-md-height complete-context))]))))
+             (update :md limit-md-height complete-context)
+             (assoc :kindly/options (:kindly/options complete-context)))]))))
 
 
 

test/index_generated_test.clj

@@ -444,3 +444,13 @@
 
 
 (def var82 nil)
+
+
+(def
+ var83
+ (kind/table
+  {:column-names ["A" "B" "C"], :row-vectors [[1 2 3] [4 5 6]]}
+  {:class "table-responsive", :style {:background "#f8fff8"}}))
+
+
+(def var84 nil)