-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
80 lines (60 loc) · 7.36 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE HTML><html dir="ltr" lang="en"><head><meta charset="utf-8" /><meta content="width=device-width, initial-scale=1" name="viewport" /><meta content="Joy Web Framework" name="title" /><meta content="The full stack janet web framework" name="description" /><title>Joy Framework</title><link rel="stylesheet" href="css/atom-one-light.css" /><link rel="stylesheet" href="css/tailwind.min.css" /><link rel="stylesheet" href="css/app.css" /><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /></head><body><div class="container p-4 mx-auto"><div class="self-stretch flex-row block mb-16 sm:flex"><a href="index.html" class="text-indigo-500 underline"><img src="[email protected]" class="w-16 md:w-32 mx-auto md:mx-0"></img></a><div class="flex-1"></div><div class="self-stretch flex-row lg:flex sm:block md:block space-x-4 text-center md:text-left lg:text-left"><a href="https://github.com/joy-framework/joy/blob/master/docs/introduction.md" class="text-indigo-500 underline">Docs</a><a href="https://github.com/joy-framework/joy" class="text-indigo-500 underline">Github</a></div></div><div class="self-stretch flex-row lg:flex sm:block md:block lg:space-x-4"><div class="flex-1"><div class="flex flex-col self-stretch flex-auto space-y-2"><h1 class="text-5xl text-gray-800">Joy</h1><h2 class="text-3xl tracking-tight text-gray-800">A maximalist web framework for lisp aficionados</h2><h4 class="text-l text-gray-800">Use the <a href="https://janet-lang.org" class="text-indigo-500 underline">janet</a> programming language to build web apps faster with less code and very low memory usage.</h4><div class="mt-4"><a href="https://github.com/joy-framework/joy/blob/master/docs/introduction.md" class="inline-block my-6 px-5 py-3 rounded-lg bg-indigo-500 text-white shadow-lg hover:bg-indigo-700">Read the docs</a></div></div></div><div class="flex-1"><pre><code class="rounded-lg p-6 clojure">(import joy :prefix "")
(route :get "/" :home)
(defn home [request]
(text/plain "You found joy!"))
(def app (app))
(server app 9001)</code></pre></div></div></div><div class="bg-gray-100 py-4 mt-6"><div class="container p-4 mx-auto"><h3 class="text-2xl text-gray-800">Installation on macOS</h3><div class="mt-4"><div class="flex flex-col self-stretch flex-auto space-y-4"><div><div class="text-gray-600">Janet can be installed with homebrew:</div><div class="mt-2 inline-block rounded-lg border border-gray-500 p-2">brew install janet</div></div><div><div class="text-gray-600">Then to install joy:</div><div class="mt-2 inline-block rounded-lg border border-gray-500 p-2">jpm install joy</div></div><div class="text-gray-600">More installation options for janet <a href="https://janet-lang.org/docs/index.html" class="text-indigo-500 underline">here</a></div></div></div></div></div><div class="lg:mt-16"><div class="container p-4 mx-auto"><div class="flex flex-col self-stretch flex-auto space-y-16"><div class="lg:grid lg:grid-flow-col lg:grid-cols-2 gap-10"><div class="flex flex-col self-stretch flex-auto space-y-4"><h3 class="text-2xl text-gray-800">HTML is data</h3><div class="text-gray-800">Joy uses <a href="https://github.com/swlkr/janet-html" class="text-indigo-500 underline">hiccup</a> syntax to render html. There is no separate template language to learn! You have all of janet's power when writing html!</div></div><div class="flex flex-col self-stretch flex-auto space-y-4"><pre><code class="rounded-lg p-6 clojure">[:form
[:input {:type "text" :placeholder "Your name"}]
[:input {:type "email" :placeholder "Your email"}]
[:input {:type "submit" :value "Submit"}]]
</code></pre><pre><code class="rounded-lg p-6 html"><form>
<input type="text" placeholder="Your name" />
<input type="email" placeholder="Your email" />
<input type="submit" value="Submit" />
</form>
</code></pre></div></div><div class="lg:grid lg:grid-flow-col lg:grid-cols-2 gap-10"><div class="text-gray-800">Use html inside of janet, not the other way around</div><div class="flex flex-col self-stretch flex-auto space-y-4"><pre><code class="rounded-lg p-6 clojure">(let [groceries [{:name "eggs"}
{:name "milk"}
{:name "tomatoes"}]]
[:ul
(foreach [g groceries]
[:li (g :name)])])
</code></pre><pre><code class="rounded-lg p-6 html"><ul>
<li>eggs</li>
<li>milk</li>
<li>tomatoes</li>
</ul></code></pre></div></div><div class="lg:grid lg:grid-flow-col lg:grid-cols-2 gap-10"><div class="text-gray-800">There is a shorthand for css classes too! Great for atomic css!</div><div class="flex flex-col self-stretch flex-auto space-y-4"><pre><code class="rounded-lg p-6 clojure">[:h1.text-2xl.text-gray-400
"You found joy!"]
</code></pre><pre><code class="rounded-lg p-6 html"><h1 class="text-2xl text-gray-400">You found joy!</h1></code></pre></div></div><div class="lg:grid lg:grid-flow-col lg:grid-cols-2 gap-10"><div class="text-gray-800">The real beauty of having a regular old data structure represent your html is that you can assign it to a variable and create your own names without changing the rendered html!</div><div class="flex flex-col self-stretch flex-auto space-y-4"><pre><code class="rounded-lg p-6 clojure"> (def h1 :h1.text-2xl.text-gray-400)
[h1 "You found joy!"]</code></pre><pre><code class="rounded-lg p-6 html"><h1 class="text-2xl text-gray-400">You found joy!</h1></code></pre></div></div></div></div></div><div class="lg:mt-16"><div class="container p-4 mx-auto"><div class="flex flex-col self-stretch flex-auto space-y-16"><div class="lg:grid lg:grid-flow-col lg:grid-cols-2 gap-10"><div class="flex-1"><div class="flex flex-col self-stretch flex-auto space-y-4"><h3 class="text-2xl text-gray-800">Everything is a function</h3><div class="text-gray-800">Joy doesn't uses objects or classes. Everything is a function that takes a request and outputs a response</div></div></div><div class="flex-1"><div class="flex flex-col self-stretch flex-auto space-y-4"><pre><code class="rounded-lg p-6 clojure">(use joy)
(route :get "/posts" :index)
(route :get "/posts/new" :new)
(route :post "/posts" :create)
(def body
(body :posts
(validates [:title :body] :required true)
(permit :title :body)))
(defn index [request]
(let [posts (db/from :posts)]
[:ul
(foreach [p posts]
[:li
[:h1 (p :title)]
[:p (p :body)]])]))
(defn new [request &opt errors]
(let [post (body request)]
[:form {:method :post :action "/posts"}
[:input {:type "text" :name "name" :value (post :name)}]
[:div
(errors :name)]
[:textarea {:name "body"}
(post :body)]
[:div
(errors :body)]
[:input {:type "submit" :value "Save"}]]))
(defn create [request]
(let [post (-> (body request)
(db/save))]
(if (saved? post)
(redirect-to :home)
(new request (errors post)))))
</code></pre></div></div></div></div></div></div><script src="js/highlight.pack.js"></script><script>hljs.initHighlightingOnLoad();</script></body></html>