Skip to content

Instantly share code, notes, and snippets.

@sooop

sooop/blog.html Secret

Last active January 16, 2018 03:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sooop/330ab9187f32c998eed9109cce456519 to your computer and use it in GitHub Desktop.
Save sooop/330ab9187f32c998eed9109cce456519 to your computer and use it in GitHub Desktop.
Download ZIP
single page blog with LiveScript + Mithril
Raw
blog.html
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.3/mithril.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/livescript/1.4.0/livescript-min.js"></script>
<script src="./blog.ls" type="text/ls"></script>
<script>require('LiveScript').go();</script>
</head>
<body>
<div id="main">loading</div>
</body>
</html>
Raw
blog.ls
class Post
(args) ->
@title = args?.title || ''
@content = args?.content || ''
@timestamp = args?.timestamp || new Date!get-time!
storage = do
save: (post) !-> local-storage.set-item post.timestamp, JSON.stringify post
load: (key) -> new Post JSON.parse local-storage.get-item key
writer = do
oninit: (vnode) ->
vnode.state = if k = m.route.param \key then post: storage.load k else post: new Post!
view: (vnode) ->
m \.writer,
* \title
m \input,
oninput: m.with-attr \value, !~> vnode.state.post.title = it
value: vnode.state.post.title
m \br
m \textarea, do
onkeyup: m.with-attr \value, !~> vnode.state.post.content = it
value: vnode.state.post.content
m \br
m \button, do
onclick: !~>
storage.save vnode.state.post
m.route.set \/
, \save
lister = do
view: (vnode) ->
m \.lister,
* m \ul, [0 til local-storage.length].map (i) ->
k = local-storage.key i
t = storage.load k .title
m \li, m "a", {href:"/view/#k", oncreate: m.route.link}, t
m \button, {onclick: !-> m.route.set \/edit/_}, \write
viewer = do
oninit: (vn) ->
if k = m.route.param \key then vn.state.post = storage.load
else m.route.set \/add/new
view: (vn) ->
post = vn.state.post
m \.wrapper,
* m \h1, post.title
m \.content post.content
m \button {onclick: !~> m.route.set "/edit/#{vn.state.post.timestamp}"}, \edit
m \button {onclick: !-> m.route.set \/}, \list
m.route document.body, \/, do
\/ : lister
'/edit/:key' : writer
'/view/:key' : viewer
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment