Back
html5 (clj)
(source)macro
(html5 options & contents)
Create a HTML5 document with the supplied contents.
Examples
hiccup
(ns hiccup.page_test
(:require [clojure.test :refer :all]
[hiccup.page :refer :all])
(:import java.net.URI))
(deftest html5-test
(testing "HTML mode"
(is (= (html5 [:body [:p "Hello" [:br] "World"]])
"<!DOCTYPE html>\n<html><body><p>Hello<br>World</p></body></html>"))
(is (= (html5 {:lang "en"} [:body "Hello World"])
"<!DOCTYPE html>\n<html lang=\"en\"><body>Hello World</body></html>"))
(is (= (html5 {:prefix "og: http://ogp.me/ns#"}
[:body "Hello World"])
(str "<!DOCTYPE html>\n"
"<html prefix=\"og: http://ogp.me/ns#\">"
"<body>Hello World</body></html>")))
(is (= (html5 {:prefix "og: http://ogp.me/ns#"
:lang "en"}
[:body "Hello World"])
(str "<!DOCTYPE html>\n"
"<html lang=\"en\" prefix=\"og: http://ogp.me/ns#\">"
"<body>Hello World</body></html>"))))
(testing "XML mode"
(is (= (html5 {:xml? true} [:body [:p "Hello" [:br] "World"]])
(str "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n"
"<!DOCTYPE html>\n<html xmlns=\"http://www.w3.org/1999/xhtml\">"
"<body><p>Hello<br />World</p></body></html>")))
(is (= (html5 {:xml? true, :lang "en"} [:body "Hello World"])
(str "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n"
"<!DOCTYPE html>\n"
"<html lang=\"en\" xml:lang=\"en\" xmlns=\"http://www.w3.org/1999/xhtml\">"
"<body>Hello World</body></html>")))
(is (= (html5 {:xml? true,
"xml:og" "http://ogp.me/ns#"} [:body "Hello World"])
(str "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n"
"<!DOCTYPE html>\n"
"<html xml:og=\"http://ogp.me/ns#\" xmlns=\"http://www.w3.org/1999/xhtml\">"
"<body>Hello World</body></html>")))
(is (= (html5 {:xml? true, :lang "en"
"xml:og" "http://ogp.me/ns#"} [:body "Hello World"])
(str "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n"
"<!DOCTYPE html>\n"
"<html lang=\"en\" xml:lang=\"en\" xml:og=\"http://ogp.me/ns#\" xmlns=\"http://www.w3.org/1999/xhtml\">"
"<body>Hello World</body></html>")))))
prestancedesign/pingcrm-clojure
(ns pingcrm.templates.404
(:require [hiccup.page :as page]))
(def not-found
(page/html5
{:class "h-full bg-gray-100"}
[:head
[:meta {:charset "utf-8"}]
[:link {:rel "icon" :type "image/svg+xml" :href "/favicon.svg"}]
[:meta {:name "viewport" :content "width=device-width, initial-scale=1.0"}]
[:title "404 | Not found"]
(page/include-css "/css/app.css")]
[:body.antialiased
[:div.relative.flex.items-top.justify-center.min-h-screen.bg-gray-100.dark:bg-gray-900.sm:items-center.sm:pt-0
[:div.max-w-xl.mx-auto.sm:px-6.lg:px-8
[:div.flex.items-center.pt-8.sm:justify-start.sm:pt-0
[:div.px-4.text-lg.text-gray-500.border-r.border-gray-400.tracking-wider
"404"]
[:div.ml-4.text-lg.text-gray-500.uppercase.tracking-wider "Not Found"]]]]]))
practicalli/clojure-through-code
(require '[hiccup.page :refer [html5]])
;; Whilst you could use map to iterate over the hiccup data structure
(html5 (for [row player-data]
[:tr (map (fn [x] [:td (val x)]) row)]))
;; => "<!DOCTYPE html>\n<html><tr><td>Oliver</td><td>100</td></tr><tr><td>Revilo</td><td>50</td></tr></html>"
;; Its more idiomatic to use a let form to define local names that are then used in the hiccup data structure
(html5 (for [row player-data
:let [player (:name row)
score (:score row)]]
[:tr [:td player] [:td score]]))
;; => "<!DOCTYPE html>\n<html><tr><td>Oliver</td><td>100</td></tr><tr><td>Revilo</td><td>50</td></tr></html>"
cemerick/friend-demo
(ns ^{:name "Interactive form"
:doc "Typical username/password authentication + logout + a pinch of authorization functionality"}
cemerick.friend-demo.interactive-form
(:require [cemerick.friend-demo.misc :as misc]
[cemerick.friend-demo.users :as users :refer (users)]
[cemerick.friend :as friend]
(cemerick.friend [workflows :as workflows]
[credentials :as creds])
[compojure.core :as compojure :refer (GET POST ANY defroutes)]
(compojure [handler :as handler]
[route :as route])
[ring.util.response :as resp]
[hiccup.page :as h]
[hiccup.element :as e]))
(compojure/defroutes routes
(GET "/" req
(h/html5
misc/pretty-head
(misc/pretty-body
(misc/github-link req)
[:h2 "Interactive form authentication"]
[:p "This app demonstrates typical username/password authentication, and a pinch of Friend's authorization capabilities."]
[:h3 "Current Status " [:small "(this will change when you log in/out)"]]
[:p (if-let [identity (friend/identity req)]
(apply str "Logged in, with these roles: "
(-> identity friend/current-authentication :roles))
"anonymous user")]
login-form
[:h3 "Authorization demos"]
[:p "Each of these links require particular roles (or, any authentication) to access. "
"If you're not authenticated, you will be redirected to a dedicated login page. "
"If you're already authenticated, but do not meet the authorization requirements "
"(e.g. you don't have the proper role), then you'll get an Unauthorized HTTP response."]
[:ul [:li (e/link-to (misc/context-uri req "role-user") "Requires the `user` role")]
[:li (e/link-to (misc/context-uri req "role-admin") "Requires the `admin` role")]
[:li (e/link-to (misc/context-uri req "requires-authentication")
"Requires any authentication, no specific role requirement")]]
[:h3 "Logging out"]
[:p (e/link-to (misc/context-uri req "logout") "Click here to log out") "."])))
(GET "/login" req
(h/html5 misc/pretty-head (misc/pretty-body login-form)))
(GET "/logout" req
(friend/logout* (resp/redirect (str (:context req) "/"))))
(GET "/requires-authentication" req
(friend/authenticated "Thanks for authenticating!"))
(GET "/role-user" req
(friend/authorize #{::users/user} "You're a user!"))
(GET "/role-admin" req
(friend/authorize #{::users/admin} "You're an admin!")))
(def page (handler/site
(friend/authenticate
routes
{:allow-anon? true
:login-uri "/login"
:default-landing-uri "/"
:unauthorized-handler #(-> (h/html5 [:h2 "You do not have sufficient privileges to access " (:uri %)])
resp/response
(resp/status 401))
:credential-fn #(creds/bcrypt-credential-fn @users %)
:workflows [(workflows/interactive-form)]})))
cemerick/friend-demo
(ns ^{:name "#{Google, Yahoo, AOL, Wordpress, +} via OpenID"
:doc "Using OpenID to authenticate with various services."}
cemerick.friend-demo.openid
(:require [cemerick.friend-demo.misc :as misc]
[cemerick.friend :as friend]
[cemerick.friend.openid :as openid]
[compojure.core :refer (GET defroutes)]
(compojure [handler :as handler])
[ring.util.response :as resp]
[hiccup.page :as h]))
(defroutes routes
(GET "/" req
(h/html5
misc/pretty-head
(misc/pretty-body
(misc/github-link req)
[:h2 "Authenticating with various services using OpenID"]
[:h3 "Current Status " [:small "(this will change when you log in/out)"]]
(if-let [auth (friend/current-authentication req)]
[:p "Some information delivered by your OpenID provider:"
[:ul (for [[k v] auth
:let [[k v] (if (= :identity k)
["Your OpenID identity" (str (subs v 0 (* (count v) 2/3)) "…")]
[k v])]]
[:li [:strong (str (name k) ": ")] v])]]
[:div
[:h3 "Login with…"]
(for [{:keys [name url]} providers
:let [base-login-url (misc/context-uri req (str "/login?identifier=" url))
dom-id (str (gensym))]]
[:form {:method "POST" :action (misc/context-uri req "login")
:onsubmit (when (.contains ^String url "username")
(format "var input = document.getElementById(%s); input.value = input.value.replace('username', prompt('What is your %s username?')); return true;"
(str \' dom-id \') name))}
[:input {:type "hidden" :name "identifier" :value url :id dom-id}]
[:input {:type "submit" :class "button" :value name}]])
[:p "…or, with a user-provided OpenID URL:"]
[:form {:method "POST" :action (misc/context-uri req "login")}
[:input {:type "text" :name "identifier" :style "width:250px;"}]
[:input {:type "submit" :class "button" :value "Login"}]]])
[:h3 "Logging out"]
[:p [:a {:href (misc/context-uri req "logout")} "Click here to log out"] "."])))
(GET "/logout" req
(friend/logout* (resp/redirect (str (:context req) "/")))))
robert-stuttaford/demo-enfocus-pubsub-remote
(ns depr.views.main
(:require [noir.core :as noir]
[hiccup.page :as page]
[hiccup.element :as element]))
(noir/defpage "/" []
(page/html5
[:head
[:title "Demo: Enfocus, PubSub, Remote."]]
[:body
[:div#content]
[:button#add-item-button "Add item!"]
;; remove "-debug" to use production mode js
(js-app "depr-debug")]))