I am using ClojureScript Reagent. Which provides hiccup-like HTML generation.
I have a String with HTML:
(def code "<b>hello world</b>")
When passed to Hiccup it will be escaped and I get no bold text on my page:
[:div code]
How to pass code to my HTML output so it will be integrated there without being escaped?
Reagent
Use the dangerouslysetInnerHTML native React call
[:div {:dangerouslySetInnerHTML {:__html code}}])
Also see:
Issue #14
(real) Hiccup
You need to use the raw-string function from hiccup.utils:
[:div (raw-string code)]
Related
I'm trying to put a simple site together to demonstrate a ClojureScript library with a couple of "pages", each of which contains several examples.
I used a leiningen template to make a project with devcards, routing etc.
I now have the default boilerplate :
(defn home-page []
[:div [:h2 "Welcome to site"]
[:div [:a {:href "/about"} "go to about page"]]] )
(defn about-page []
[:div [:h2 "About site"]
[:div [:a {:href "/"} "go to the home page"]]])
I now want to put some devcards into these "pages".
However, just putting a defcard either next to or inside one of these functions doesn't seem to add it to the page.
So can devcards be used in this context? If so, where / how do I put them?
HTML5 allows <meta> tags to appear in the body, but Enlive does not seem to support this:
(deftest test-enlive
(testing "enlive"
(let [html-as-string "<!DOCTYPE html><html lang=\"en\"><body><div><meta foo=\"bar\"><span>the content</span></body></html>"
parsed-html (enlive/html-resource (java.io.StringReader. html-as-string))
span (enlive/select parsed-html [ :div :span ])
content (first (map enlive/text span))]
(is (= "the content" content)))))
This test fails, but will pass if you remove the meta tag.
This old thread led me to realize that it was the meta tag that was causing a problem.
I realize that Enlive depends on Tagsoup, but when I switch it out for JSoup (which claims to support HTML5) I get the same result.
I'm trying to do something simple with Clojure Enlive lib: I want the top menu of my page to be different based on language selected by the user (English or Japanese). I can't find how to implement this basic feature.
I have a "template/header.html" template with 2 sections (one per language):
<div class="header en-US">...</div>
<div class="header ja-JP">...</div>
I created 2 corresponding snippets in my templating code:
(:require [net.cgrand.enlive-html :as html])
...
(html/defsnippet header-ja-JP "templates/header.html" [:div.header.ja-JP] [])
(html/defsnippet header-en-US "templates/header.html" [:div.header.en-US] [])
Now when I load my main template (index.html) I want to populate my header menu code into my nav tag.
Below, the argument 'lang' value is either "en-US" or "ja-JP":
(defn process-template
[lang]
(let [header-selector (str “header-“ lang)
header-content (#(resolve (symbol header-selector)))]
(apply str
(html/emit*
(html/at
(html/html-resource "templates/index.html")
[:nav] (html/content (header-content)))))))
It throws a java.lang.NullPointerException
If I replace the last line by
[:nav] (html/content (header-ja-JP)))))))
or
[:nav] (html/content (header-en-US)))))))
it works fine (so the snippets work), but I've tried lots of different syntaxes and can't make the dynamic header work based on language.
The above code (let part) seems ok if I execute it manually in REPL, the header-content is JSON object containing the correct content so I don't understand why I get a NullPointerException.
Ideally I think I should have only one snippet taking the language as argument and returning the corresponding HTML section, but didn't manage to do that either.
I'm very new at Clojure so I'm probably missing something obvious here; if someone could point me to what's wrong in the code above or another way to make this work that will be awesome.
Thanks,
Olivier
If we want to do it differently as cgrand suggests, there are many, many ways to accomplish this. I have a hard time imagining how he'd do it with maps, but I'd do it this way:
(defn process-template [lang]
(html/select (html/html-snippet
"<html>
<head></head>
<body>
<nav>
<div class=\"en\"></div>
<div class=\"jp\"></div>
</nav>
</body>
</html>")
[(keyword (str "div." lang))]))
(apply str (html/emit* (process-template "en")))
=> "<div class=\"en\"></div>"
Of course read it from file instead of HTML in a string. The function plucks out the matching HTML node according to a selector.
Your (#(resolve (symbol header-selector))) returns a value.
(resolve (symbol header-selector)) returns a function.
[:nav] (html/content (header-content))))))) calls header-content as a function.
Replace (#(resolve (symbol header-selector))) with (resolve (symbol header-selector)).
I'm fuzzy on what html/at and html/html-resource do so if other problems crop up you might need to cram in clojure.java.io/file in there.
Why does the following snippet does not work?
(html/select (:body (client/post "http://www.web.onpe.gob.pe/modElecciones/elecciones/elecciones2011/2davuelta/onpe/presidente/extras/provincias.php" {:form-params {"elegido" "010000"}})) [:option])
Do I have to do something with the html-string to turn it into a clojure datastructure first or something like that?
Yep - you can use html/html-snippet to turn a raw html string into something enlive can use,
or html/html-resource to use an entire html file.
Try the following:
(html/select
(html/html-snippet
(:body (client/post "<your-website>" {:form-params {"elegido" "010000"}}))
[:option])
I'm a Rails dev getting my feet wet in Clojure. I'm trying to do something which was very simple with ERB but I can't for the life of me figure it out in enlive.
Say I have a simple layout file for a website in layout.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
And I have these snippets, for instance, header.html and footer.html and this simple route.
(deftemplate layout "layout.html" [])
(defroutes home-routes
(GET "/" [] layout))
How can I make it so whenever a request goes to "/" it transforms the layout and inserts the header and footer snippets into it?
defsnippet only matches a specific part of your html (which is why it takes a selector as an argument), and transforms it. deftemplate takes the entire html, and transforms it. Also, defsnippet returns a Clojure data structure while deftemplates returns a vector of strings, so a defsnippet is usually used within a deftemplate.
To give you an idea of what the data returned by a snippet (or selector) look like:
(enlive/html-snippet "<div id='foo'><p>Hello there</p></div>")
;=({:tag :div, :attrs {:id "foo"}, :content ({:tag :p, :attrs nil, :content ("Hello there")})})
In your case you want something like:
header.html:
<div id="my-header-root">
...
</div>
Clojure code:
(enlive/defsnippet header "path/to/header.html" [:#my-header-root] []
identity)
(enlive/defsnippet footer "path/to/footer.html" [enlive/root] []
identity)
(enlive/deftemplate layout "layout.html" [header footer]
[:head] (enlive/content header)
[:body] (enlive/append footer))
(defroutes home-routes
(GET "/" [] (layout (header) (footer))
The identity function used in the snippets returns it's argument, which in this case is the data structure selected by the :#my-header-root selector (we don't do any transformation). If you want to include everything in i.e head.html you can use the root selector-step that comes with enlive.
You can view the html generated from a defsnippet using something like this:
(print (apply str (enlive/emit* (my-snippet))))
I also recommend the tutorial: https://github.com/swannodette/enlive-tutorial/
and the one by Brian Marick for some more details of how the defsnippet and deftemplate macros work.
Last tip, you can experiment with selectors and transformations using the sniptest macro that comes with enlive:
(enlive/sniptest "<p>Replace me</p>"
[:p] (enlive/content "Hello world!"))
;= "<p>Hello world!</p>"
There is great answer with examples in the enlive tutorial.
Warning. All source files links seem broken. You need to insert enlive-tutorial/blob/master/ after https://github.com/swannodette/ in all links or just open them directly from tutorial project.