Use Hiccup to render HTML instead of making a complicated static app
This commit is contained in:
Jeremy Dormitzer
parent
862851bdfd
commit
2f9eb55c36
26
project.clj
26
project.clj
@ -4,7 +4,6 @@
|
||||
:min-lein-version "2.0.0"
|
||||
:source-paths ["src_clj"]
|
||||
:dependencies [[org.clojure/clojure "1.8.0"]
|
||||
[org.clojure/clojurescript "1.10.238"]
|
||||
[compojure "1.6.0"]
|
||||
[ring/ring-defaults "0.3.1"]
|
||||
[ring-server "0.5.0"]
|
||||
@ -12,25 +11,6 @@
|
||||
[org.apache.commons/commons-math3 "3.6.1"]
|
||||
[org.clojure/core.async "0.4.474"]
|
||||
[quil "2.6.0"]
|
||||
[cljs-ajax "0.7.3"]
|
||||
[reagent "0.8.0-alpha2"]
|
||||
[re-frame "0.10.5"]
|
||||
[day8.re-frame/http-fx "0.1.6"]]
|
||||
:plugins [[lein-ring "0.9.7"]
|
||||
[lein-figwheel "0.5.15"]]
|
||||
:cljsbuild {:builds [{:id "dev"
|
||||
:source-paths ["src_cljs"]
|
||||
:figwheel true
|
||||
:compiler {:main "sketchbook.core"
|
||||
:optimizations :none
|
||||
:asset-path "js/generated/out"
|
||||
:output-to "resources/public/js/generated/index.js"
|
||||
:output-dir "resources/public/js/generated/out"}}]}
|
||||
:ring {:handler sketchbook.handler/app}
|
||||
:profiles
|
||||
{:dev {:source-paths ["src_cljs"]
|
||||
:dependencies [[javax.servlet/servlet-api "2.5"]
|
||||
[ring/ring-mock "0.3.0"]
|
||||
[figwheel-sidecar "0.5.8"]
|
||||
[com.cemerick/piggieback "0.2.2"]]
|
||||
:repl-options {:nrepl-middleware [cemerick.piggieback/wrap-cljs-repl]}}})
|
||||
[hiccup "1.0.5"]]
|
||||
:plugins [[lein-ring "0.9.7"]]
|
||||
:ring {:handler sketchbook.handler/app})
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="js/generated/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,12 +1,13 @@
|
||||
(ns sketchbook.handler
|
||||
(:require [compojure.core :refer :all]
|
||||
[compojure.route :as route]
|
||||
[ring.util.response :refer [response content-type]]
|
||||
[ring.util.response :refer [response content-type resource-response]]
|
||||
[ring.middleware.defaults :refer [wrap-defaults site-defaults]]
|
||||
[ring.middleware.json :refer [wrap-json-response]]
|
||||
[ring.server.standalone :refer [serve]]
|
||||
[clojure.core.async :refer [<!! <! go]]
|
||||
[sketchbook.sketches :as sketches])
|
||||
[sketchbook.sketches :as sketches]
|
||||
[sketchbook.views :as views])
|
||||
(:import [java.io ByteArrayInputStream]))
|
||||
|
||||
(defn sketch-handler
|
||||
@ -39,24 +40,18 @@
|
||||
|
||||
(defroutes app-routes
|
||||
(context "/api" []
|
||||
(GET "/sketches" []
|
||||
(content-type
|
||||
(response (sketches/get-sketches))
|
||||
"application/json"))
|
||||
(GET "/sketches/:sketch" [sketch width height] sketch-handler)
|
||||
(GET "/sketches/:sketch/:seed" [sketch seed width height] sketch-handler))
|
||||
(route/resources "/")
|
||||
(GET "/" [] (views/index))
|
||||
(GET "/:sketch" [sketch]
|
||||
(let [sketch-item ((keyword sketch) sketches/sketches)]
|
||||
(views/sketch-page (:title sketch-item) sketch)))
|
||||
(route/not-found "Not Found"))
|
||||
|
||||
(defn wrap-index [handler]
|
||||
(fn [request]
|
||||
(handler (update-in request [:uri] #(if (= "/" %) "/index.html" %)))))
|
||||
|
||||
(def app
|
||||
(-> app-routes
|
||||
(wrap-defaults site-defaults)
|
||||
(wrap-json-response)
|
||||
(wrap-index)))
|
||||
(wrap-json-response)))
|
||||
|
||||
(defn -main [& args]
|
||||
(serve app))
|
||||
|
||||
@ -5,7 +5,10 @@
|
||||
(def rng (ISAACRandom.))
|
||||
|
||||
(defn set-seed [seed]
|
||||
(.setSeed rng seed))
|
||||
(try
|
||||
(.setSeed rng seed)
|
||||
(catch ArrayIndexOutOfBoundsException e
|
||||
(set-seed seed))))
|
||||
|
||||
(defn random
|
||||
([max] (random 0 max))
|
||||
|
||||
@ -9,18 +9,11 @@
|
||||
(def sketches
|
||||
{:color {:setup sketchbook.sketches.color/setup
|
||||
:draw sketchbook.sketches.color/draw
|
||||
:title "Color Play"}
|
||||
:title "Pretty Colors"}
|
||||
:foo {:setup sketchbook.sketches.color/setup
|
||||
:draw sketchbook.sketches.color/draw
|
||||
:title "Foo"}})
|
||||
|
||||
(defn get-sketches []
|
||||
(map (fn [sketch]
|
||||
(let [path (name (first sketch))]
|
||||
{:path path
|
||||
:title (:title (second sketch))}))
|
||||
sketches))
|
||||
|
||||
(defn sketch-bytes [& {:keys [name size setup draw seed]}]
|
||||
(let [channel (chan)
|
||||
nonce (str (System/nanoTime))
|
||||
|
||||
36
src_clj/sketchbook/views.clj
Normal file
36
src_clj/sketchbook/views.clj
Normal file
@ -0,0 +1,36 @@
|
||||
(ns sketchbook.views
|
||||
(:require [hiccup.core :refer [html]]
|
||||
[sketchbook.sketches :refer [sketches]]))
|
||||
|
||||
(defn sketch-img
|
||||
"A sketch image"
|
||||
[name width height]
|
||||
(html
|
||||
[:img {:src (str "/api/sketches/" name "?width=" width "&height=" height)
|
||||
:width width
|
||||
:height height}]))
|
||||
|
||||
(defn sketch-thumbnail
|
||||
"A thumbnail of a sketch"
|
||||
[title name width height]
|
||||
(html
|
||||
[:h1 title]
|
||||
[:a {:href (str "/" name)}
|
||||
(sketch-img name width height)]))
|
||||
|
||||
(defn index
|
||||
"The index page"
|
||||
[]
|
||||
(html
|
||||
(map #(sketch-thumbnail (:title (second %))
|
||||
(name (first %))
|
||||
300
|
||||
300)
|
||||
sketches)))
|
||||
|
||||
(defn sketch-page
|
||||
"Page for an individual sketch"
|
||||
[title name]
|
||||
(html
|
||||
[:h1 title]
|
||||
(sketch-img name 768 768)))
|
||||
@ -1,35 +0,0 @@
|
||||
(ns sketchbook.core
|
||||
(:require [reagent.core :as r]
|
||||
[re-frame.core :refer [dispatch subscribe]]
|
||||
[sketchbook.events]
|
||||
[sketchbook.subs]))
|
||||
|
||||
(defn sketch [sketch-item width height]
|
||||
[:div {:key (:path sketch-item)}
|
||||
[:h1 (:title sketch-item)]
|
||||
[:img {:src (str "/api/sketches/"
|
||||
(:path sketch-item)
|
||||
"?width=" width
|
||||
"&height=" height)
|
||||
:width width
|
||||
:height height}]])
|
||||
|
||||
(defn sketches []
|
||||
(let [sketch-list @(subscribe [:sketches])
|
||||
loading @(subscribe [:loading-sketches])]
|
||||
(if loading
|
||||
[:div "Loading..."]
|
||||
(if (> (count sketch-list) 0)
|
||||
[:div
|
||||
(map #(sketch % 300 300) sketch-list)]
|
||||
[:div "No sketches found"]))))
|
||||
|
||||
(defn app []
|
||||
[:div
|
||||
[sketches]])
|
||||
|
||||
(dispatch [:initialize])
|
||||
(dispatch [:fetch-sketches])
|
||||
|
||||
(r/render [app]
|
||||
(.getElementById js/document "app"))
|
||||
@ -1,5 +0,0 @@
|
||||
(ns sketchbook.db)
|
||||
|
||||
(def initial-db
|
||||
{:sketches []
|
||||
:loading-sketches false})
|
||||
@ -1,27 +0,0 @@
|
||||
(ns sketchbook.events
|
||||
(:require [re-frame.core :refer [reg-event-db reg-event-fx]]
|
||||
[ajax.core :as ajax]
|
||||
[day8.re-frame.http-fx]
|
||||
[sketchbook.db :as db]))
|
||||
|
||||
(reg-event-db
|
||||
:initialize
|
||||
(fn [_ _]
|
||||
db/initial-db))
|
||||
|
||||
(reg-event-fx
|
||||
:fetch-sketches
|
||||
(fn [{db :db} _]
|
||||
{:http-xhrio {:method :get
|
||||
:uri "/api/sketches"
|
||||
:format (ajax/json-request-format)
|
||||
:response-format (ajax/json-response-format {:keywords? true})
|
||||
:on-success [:sketches-fetched]}
|
||||
:db (assoc db :loading-sketches true)}))
|
||||
|
||||
(reg-event-db
|
||||
:sketches-fetched
|
||||
(fn [db [_ response]]
|
||||
(-> db
|
||||
(assoc :loading-sketches false)
|
||||
(assoc :sketches (js->clj response)))))
|
||||
@ -1,12 +0,0 @@
|
||||
(ns sketchbook.subs
|
||||
(:require [re-frame.core :refer [reg-sub]]))
|
||||
|
||||
(reg-sub
|
||||
:sketches
|
||||
(fn [db _]
|
||||
(:sketches db)))
|
||||
|
||||
(reg-sub
|
||||
:loading-sketches
|
||||
(fn [db _]
|
||||
(:loading-sketches db)))
|
||||
Loading…
Reference in New Issue
Block a user