status-im
/
reagent
mirror of https://github.com/status-im/reagent.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Move page generation to ClojureScript

This commit is contained in:
Dan Holmsand 2014-01-19 12:13:19 +01:00
parent 8fc6bf3e6e
commit 446e05adec
4 changed files with 67 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -1,6 +1,6 @@
index.html index.html
site/demo.js assets/
site/democss.css news/
target target
pom.xml pom.xml
.lein-repl-history .lein-repl-history

2
Makefile
View File

@ -32,9 +32,11 @@ preclean:
rm -rf repl .repl target out rm -rf repl .repl target out
clean: preclean clean: preclean
rm -rf news assets
lein -o clean lein -o clean
setup: preclean copyjs setup: preclean copyjs
mkdir -p news assets
show-outdated: show-outdated:
lein ancient :all lein ancient :all

51
bin/gen-site.js
View File

@ -3,42 +3,33 @@
var fs = require("fs"); var fs = require("fs");
var vm = require('vm'); var vm = require('vm');
var srcFile = "target/cljs-client.js";
var src = fs.readFileSync(srcFile);
vm.runInThisContext(src, srcFile);
console.log('Generating page');
var main = demo.genpage();
var ts = '?' + Date.now();
var cssFiles = ['examples/todomvc/todos.css', var cssFiles = ['examples/todomvc/todos.css',
'examples/todomvc/todosanim.css', 'examples/todomvc/todosanim.css',
'examples/simple/example.css', 'examples/simple/example.css',
'site/demo.css']; 'site/demo.css'];
var head = ['<head>', var srcFile = "target/cljs-client.js";
'<meta charset="utf-8">', var src = fs.readFileSync(srcFile);
'<title>Cloact: Minimalistic React for ClojureScript</title>',
'<meta name="viewport" content="width=device-width, initial-scale=1.0" />',
'<link rel="stylesheet" href="site/democss.css' + ts + '">',
'</head>'].join('\n');
var body = ['<body>', var clj_genpages = function (profile) {
main, if (typeof demo === 'undefined') {
'<script type="text/javascript" src="site/demo.js' + ts + '"></script>', vm.runInThisContext(src, srcFile);
'<script type="text/javascript">', }
'setTimeout(demo.mountdemo, 200);', return demo.genpages(profile);
'</script>', }
'</body>'].join('\n');
var html = ['<!doctype html>', '<html>', head, body, '</html>'].join('\n'); var generate = function () {
var pages = clj_genpages();
Object.keys(pages).map(function (page) {
fs.writeFileSync(page, pages[page]);
});
fs.writeFileSync("assets/demo.js", src);
fs.writeFileSync("assets/demo.css",
cssFiles.map(function (x) {
return fs.readFileSync(x);
}).join("\n"));
console.log('Wrote site');
}
console.log('Writing site'); console.log('Writing site');
fs.writeFileSync("index.html", html); generate();
fs.writeFileSync("site/demo.js", src);
fs.writeFileSync("site/democss.css",
cssFiles.map(function (x) {
return fs.readFileSync(x);
}).join("\n"));
console.log('Wrote site');

47
demo/demo.cljs
View File

@ -8,9 +8,16 @@
[reagent.debug :refer-macros [dbg println]])) [reagent.debug :refer-macros [dbg println]]))
(def page rpage/page) (def page rpage/page)
(def title-atom (atom "Reagent: Minimalistic React for ClojureScript"))
(defn prefix [href]
(let [depth (-> #"/" (re-seq @page) count)
pref (->> "../" (repeat depth) (apply str))]
(str pref href)))
(defn link [props children] (defn link [props children]
(apply vector :a (assoc props (apply vector :a (assoc props
:href (-> props :href prefix)
:on-click (if rpage/history :on-click (if rpage/history
(fn [e] (fn [e]
(.preventDefault e) (.preventDefault e)
@ -29,16 +36,46 @@
[:div [:div
[:div [:div
[:ul [:ul
[:li [link {:href "news.html"} "News"]] [:li [link {:href "news/index.html"} "News"]]
[:li [link {:href "index.html"} "Intro"]]]] [:li [link {:href "index.html"} "Intro"]]]]
(case (dbg @page) (case (dbg @page)
"index.html" [intro/main] "index.html" [intro/main]
"news.html" [news/main] "news/index.html" [news/main]
"news/cloact-reagent-undo-demo.html" [news/main]
"news/" [news/main]
[intro/main]) [intro/main])
[github-badge]]) [github-badge]])
(defn ^:export mountdemo [] (defn ^:export mountdemo [p]
(when p (reset! page p))
(reagent/render-component [demo] (.-body js/document))) (reagent/render-component [demo] (.-body js/document)))
(defn ^:export genpage [] (defn gen-page [p timestamp]
(reagent/render-component-to-string [demo])) (reset! page p)
(let [body (reagent/render-component-to-string [demo])
title @title-atom]
(str "<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>" title "</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<link rel='stylesheet' href='" (prefix "assets/demo.css") timestamp "'>
</head>
<body>
" body "
<script type='text/javascript'
src='" (prefix "assets/demo.js") timestamp "'></script>
<script type='text/javascript'>
setTimeout(function() {demo.mountdemo('" p "')}, 200);
</script>
</body>
</html>")))
(defn ^:export genpages []
(let [timestamp (str "?" (.now js/Date))]
(->> ["index.html" "news/index.html"
"news/cloact-reagent-undo-demo.html"]
(map #(vector % (gen-page % timestamp)))
(into {})
clj->js)))