add social media section to home page
This commit is contained in:
Leo Horie
parent
d24754dd2d
commit
917f1e1d6b
42 changed files with 272 additions and 76 deletions
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
@ -45,9 +44,6 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="community">Community</h2>
|
||||
<h3 id="projects-and-snippets">Projects and Snippets</h3>
|
||||
<p>A collection of projects and snippets created by Mithril users. A great place to find useful tools.</p>
|
||||
<p>Go to the <a href="https://github.com/lhorie/mithril.js/wiki/Community-Projects-and-Snippets">Mithril wiki</a></p>
|
||||
<h3 id="blog">Blog</h3>
|
||||
<p>Read Mithril tutorials and articles about web app development. Join the discussion!</p>
|
||||
<p>Go to the <a href="http://lhorie.github.io/mithril-blog">Mithril Blog</a></p>
|
||||
|
|
@ -56,6 +52,10 @@
|
|||
<p>Got questions about Mithril? Suggestions?</p>
|
||||
<p>Feel free to post on the <a href="https://groups.google.com/forum/#!forum/mithriljs">mailing list</a></p>
|
||||
<hr>
|
||||
<h3 id="projects-and-snippets">Projects and Snippets</h3>
|
||||
<p>A collection of projects and snippets created by Mithril users. A great place to find useful tools.</p>
|
||||
<p>Go to the <a href="https://github.com/lhorie/mithril.js/wiki/Community-Projects-and-Snippets">Mithril wiki</a></p>
|
||||
<hr>
|
||||
<h3 id="bug-tracker">Bug Tracker</h3>
|
||||
<p>You can file bugs in the <a href="https://github.com/lhorie/mithril.js/issues?state=open">issues page on Github</a></p>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
@ -40,6 +39,10 @@
|
|||
</section>
|
||||
|
||||
<section class="features">
|
||||
<div class="container">
|
||||
<h2>What is Mithril?</h2>
|
||||
<p>Mithril is a client-side MVC framework - a tool to organize code in a way that is easy to think about and to maintain.</p>
|
||||
</div>
|
||||
<div class="container row">
|
||||
<div class="feature col(4,4,12)">
|
||||
<h2>Light-weight</h2>
|
||||
|
|
@ -83,13 +86,20 @@ app.PageList = function() {
|
|||
//controller
|
||||
app.controller = function() {
|
||||
this.pages = app.PageList();
|
||||
|
||||
this.rotate = function() {
|
||||
this.pages.push(this.pages.shift())
|
||||
}.bind(this)
|
||||
};
|
||||
|
||||
//view
|
||||
app.view = function(ctrl) {
|
||||
return ctrl.pages().map(function(page) {
|
||||
return m("a", {href: page.url}, page.title);
|
||||
});
|
||||
return [
|
||||
ctrl.pages().map(function(page) {
|
||||
return m("a", {href: page.url}, page.title);
|
||||
}),
|
||||
m("a", {onclick: ctrl.rotate}, "Rotate links")
|
||||
];
|
||||
};
|
||||
|
||||
//initialize
|
||||
|
|
@ -99,10 +109,6 @@ m.module(document.getElementById("example"), app);</code></pre>
|
|||
<div class="col(4,4,12)">
|
||||
<h2>Output</h2>
|
||||
<div id="example" class="example output">
|
||||
<noscript>
|
||||
<a href="getting-started.html">Getting Started</a>
|
||||
<a href="mithril.html">Documentation</a></div>
|
||||
</noscript>
|
||||
<script src="mithril.min.js"></script>
|
||||
<script>
|
||||
//namespace
|
||||
|
|
@ -116,13 +122,20 @@ app.PageList = function() {
|
|||
//controller
|
||||
app.controller = function() {
|
||||
this.pages = app.PageList();
|
||||
|
||||
this.rotate = function() {
|
||||
this.pages().push(this.pages().shift())
|
||||
}.bind(this)
|
||||
};
|
||||
|
||||
//view
|
||||
app.view = function(ctrl) {
|
||||
return ctrl.pages().map(function(page) {
|
||||
return m("a", {href: page.url}, page.title);
|
||||
});
|
||||
return [
|
||||
ctrl.pages().map(function(page) {
|
||||
return m("a", {href: page.url}, page.title);
|
||||
}),
|
||||
m("button", {onclick: ctrl.rotate}, "Rotate links")
|
||||
];
|
||||
};
|
||||
|
||||
//initialize
|
||||
|
|
@ -197,6 +210,29 @@ m.module(document.getElementById("example"), app);
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="socialmedia">
|
||||
<div class="container row">
|
||||
<div class="col(8,12,12)">
|
||||
<h2>Social Media</h2>
|
||||
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Mithril.js m.prop feature is plain brilliant. I spent years yearning for an approach that lightweight <a href="http://t.co/KgzOxoa2WR">http://t.co/KgzOxoa2WR</a></p>— Xavier Via (@xaviervia) <a href="https://twitter.com/xaviervia/statuses/454635992360554497">April 11, 2014</a></blockquote>
|
||||
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Mithril: The newest JavaScript MVC library 3Kb. <a href="http://twitter.com/LeoHorie">@LeoHorie</a> got it right: It's all about good guides/docs: <a href="http://lhorie.github.io/mithril/comparison.html">lhorie.github.io/mithril/comparison.html</a></p> — David Corbacho (@dcorbacho) <a href="https://twitter.com/dcorbacho/status/446926407843991552">March 21, 2014</a></blockquote>
|
||||
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Mithril: Another MVC JS Framework << there's always room for one more, especially when they're this small... <a href="http://t.co/gDp3kyUkxL">http://t.co/gDp3kyUkxL</a></p>— Graham Ashton (@grahamashton) <a href="https://twitter.com/grahamashton/statuses/446353031677100033">March 19, 2014</a></blockquote>
|
||||
|
||||
<script async src="http://platform.twitter.com/widgets.js"></script>
|
||||
</div>
|
||||
<div class="col(4,12,12)">
|
||||
<div class="callout">
|
||||
<h3>Want to hear more?</h3>
|
||||
<p>Subscribe to the <a href="http://lhorie.github.io/mithril-blog">Mithril blog</a>. It's updated weekly with articles about how to use Mithril (and Javascript in general) to their full potential.</p>
|
||||
<p>There's also a <a href="https://groups.google.com/forum/#!forum/mithriljs">mailing list</a>, where you can post questions and discuss Mithril related topics.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="container">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
[
|
||||
{"title": "Getting Started", "url": "getting-started.html"},
|
||||
{"title": "Documentation", "url": "mithril.html"}
|
||||
{"title": "Documentation", "url": "mithril.html"},
|
||||
{"title": "Mithril Blog", "url": "http://lhorie.github.io/mithril-blog/"},
|
||||
{"title": "Mailing List", "url": "https://groups.google.com/forum/#!forum/mithriljs"}
|
||||
]
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -28,10 +28,10 @@ nav a {color:#fff;display:inline-block;padding:10px;}
|
|||
nav a:visited {color:#ddd;}
|
||||
footer {text-align:center;padding:10px 0;}
|
||||
footer,footer a,footer a:visited {color:#fff;}
|
||||
h1,h2 {font-family:Palatino;margin:0 0 10px;}
|
||||
h1 {font-size:3em;text-shadow:0.024em 0.024em #777, -0.024em -0.024em #fff;}
|
||||
h1,h2 {font-family:Verdana;margin:0 0 10px;}
|
||||
h1 {font-size:3em;}
|
||||
h1 span {animation:logo 2s;display:inline-block;-webkit-animation:logo 2s;}
|
||||
h2 {color:#888;font-style:italic;}
|
||||
h2 {color:#888;font-weight:normal;}
|
||||
h3 {margin:10px 0;}
|
||||
p {margin:15px 0;}
|
||||
ul {margin:15px 0;padding:0 0 0 1em;}
|
||||
|
|
@ -55,11 +55,11 @@ linear-gradient(#ededed 25%, #eaeaea 25%, #eaeaea 50%, rgba(255,255,255,0) 50%,
|
|||
background-color: #e3e3e3;
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
.logo {color:#d3d3d3;font-family:Georgia;font-style:italic;}
|
||||
.logo {color:#5a5;font-family:Georgia;font-style:italic;}
|
||||
.logo span {font-family:Arial;font-style:normal;}
|
||||
.logo :before {content:"\25CB";position:absolute;margin:-0.17em 0 0 -0.10em;}
|
||||
.logo :after {content:"\25CB";position:absolute;margin:-0.17em 0 0 -0.5em;}
|
||||
.button,.button:visited {background:#5a5;border-radius:5px;box-shadow:1px 1px #777, -1px -1px #fff;color:#fff;display:inline-block;font:normal bold 16px Helvetica;margin:0 10px 10px;padding:10px 30px;text-decoration:none;}
|
||||
.button,.button:visited {background:#5a5;color:#fff;display:inline-block;font:normal bold 16px Helvetica;margin:0 10px 10px;padding:10px 30px;text-decoration:none;}
|
||||
.features {background:#fff;padding:30px 0 0;}
|
||||
.feature {margin:0 0 30px;padding:0 20px 0 0;}
|
||||
.sample {background:#f5f5f5;padding:30px 0 10px;}
|
||||
|
|
@ -69,11 +69,12 @@ background-size: 20px 20px;
|
|||
.more {background:#ddd;padding:30px 0;}
|
||||
.output a,.more a {display:block;margin:0 0 10px;}
|
||||
.output a:after,.more a:after {content:" \bb";}
|
||||
.performance {background:#fff;padding:30px 0;}
|
||||
.performance,.socialmedia {background:#fff;padding:30px 0;}
|
||||
.performance td:first-child {text-align:right;width:1%;}
|
||||
.bar {background:red;height:4px;float:left;margin:0.5em 1em 0 0;}
|
||||
.security {background:#f5f5f5;padding:30px 0;}
|
||||
.success {color:#383;}
|
||||
.callout {background:#84db84;padding:1em;}
|
||||
.error {color:#f00;}
|
||||
.content {background:#f5f5f5;padding:30px 0;}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
13
background.html
Normal file
13
background.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<script src="mithril.js"></script>
|
||||
<script type="text/javascript">
|
||||
var app = {}
|
||||
app.controller = function() {
|
||||
this.index = 0
|
||||
m.request({method: "GET", url: "/test.html"})
|
||||
}
|
||||
app.view = function(ctrl) {
|
||||
return m("div", "hello" + ctrl.index)
|
||||
}
|
||||
|
||||
m.render(document, app)
|
||||
</script>
|
||||
98
chain.html
Normal file
98
chain.html
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Don't break the chain</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="mithril.js"></script>
|
||||
<script>
|
||||
//our app's namespace
|
||||
var chain = {};
|
||||
|
||||
//model
|
||||
chain.save = function(list) {
|
||||
localStorage["chain-app.list"] = JSON.stringify(list);
|
||||
};
|
||||
chain.load = function() {
|
||||
return JSON.parse(localStorage["chain-app.list"] || "[]");
|
||||
};
|
||||
|
||||
chain.today = function() {
|
||||
var now = new Date();
|
||||
return new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);
|
||||
}
|
||||
chain.resetDate = function() {
|
||||
return localStorage["chain-app.start-date"] = chain.today().getTime();
|
||||
}
|
||||
chain.startDate = function() {
|
||||
return new Date(parseInt(localStorage["chain-app.start-date"] || chain.resetDate()));
|
||||
}
|
||||
chain.dateAt = function(index) {
|
||||
var date = new Date(chain.startDate());
|
||||
date.setDate(date.getDate() + index);
|
||||
return date;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//controller
|
||||
chain.controller = function() {
|
||||
var list = chain.load();
|
||||
|
||||
this.isChecked = function(index) {
|
||||
return list[index]
|
||||
};
|
||||
this.check = function(index, status) {
|
||||
if (chain.dateAt(index).getTime() <= chain.today().getTime()) {
|
||||
list[index] = status;
|
||||
chain.save(list);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
|
||||
//view
|
||||
chain.view = function(ctrl) {
|
||||
return m("table", chain.seven(function(y) {
|
||||
return m("tr", chain.seven(function(x) {
|
||||
var index = chain.indexAt(x, y)
|
||||
return m("td", chain.highlights(index), [
|
||||
m("input[type=checkbox]", chain.checks(ctrl, index))
|
||||
]);
|
||||
}));
|
||||
}));
|
||||
};
|
||||
|
||||
chain.seven = function(subject) {
|
||||
var output = [];
|
||||
for (var i = 0; i < 7; i++) output.push(subject(i));
|
||||
return output;
|
||||
};
|
||||
|
||||
chain.checks = function(ctrl, index) {
|
||||
return {
|
||||
onclick: function() {
|
||||
ctrl.check(index, this.checked);
|
||||
},
|
||||
checked: ctrl.isChecked(index)
|
||||
};
|
||||
};
|
||||
|
||||
chain.highlights = function(index) {
|
||||
return {
|
||||
style: {
|
||||
background: chain.dateAt(index).getTime() == chain.today().getTime() ? "silver" : ""
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
chain.indexAt = function(x, y) {
|
||||
return y * 7 + x;
|
||||
}
|
||||
|
||||
//render it
|
||||
m.module(document.body, chain);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,11 +1,5 @@
|
|||
## Community
|
||||
|
||||
### Projects and Snippets
|
||||
|
||||
A collection of projects and snippets created by Mithril users. A great place to find useful tools.
|
||||
|
||||
Go to the [Mithril wiki](https://github.com/lhorie/mithril.js/wiki/Community-Projects-and-Snippets)
|
||||
|
||||
### Blog
|
||||
|
||||
Read Mithril tutorials and articles about web app development. Join the discussion!
|
||||
|
|
@ -22,6 +16,14 @@ Feel free to post on the [mailing list](https://groups.google.com/forum/#!forum/
|
|||
|
||||
---
|
||||
|
||||
### Projects and Snippets
|
||||
|
||||
A collection of projects and snippets created by Mithril users. A great place to find useful tools.
|
||||
|
||||
Go to the [Mithril wiki](https://github.com/lhorie/mithril.js/wiki/Community-Projects-and-Snippets)
|
||||
|
||||
---
|
||||
|
||||
### Bug Tracker
|
||||
|
||||
You can file bugs in the [issues page on Github](https://github.com/lhorie/mithril.js/issues?state=open)
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
|
@ -40,6 +39,10 @@
|
|||
</section>
|
||||
|
||||
<section class="features">
|
||||
<div class="container">
|
||||
<h2>What is Mithril?</h2>
|
||||
<p>Mithril is a client-side MVC framework - a tool to organize code in a way that is easy to think about and to maintain.</p>
|
||||
</div>
|
||||
<div class="container row">
|
||||
<div class="feature col(4,4,12)">
|
||||
<h2>Light-weight</h2>
|
||||
|
|
@ -83,13 +86,20 @@ app.PageList = function() {
|
|||
//controller
|
||||
app.controller = function() {
|
||||
this.pages = app.PageList();
|
||||
|
||||
this.rotate = function() {
|
||||
this.pages.push(this.pages.shift())
|
||||
}.bind(this)
|
||||
};
|
||||
|
||||
//view
|
||||
app.view = function(ctrl) {
|
||||
return ctrl.pages().map(function(page) {
|
||||
return m("a", {href: page.url}, page.title);
|
||||
});
|
||||
return [
|
||||
ctrl.pages().map(function(page) {
|
||||
return m("a", {href: page.url}, page.title);
|
||||
}),
|
||||
m("a", {onclick: ctrl.rotate}, "Rotate links")
|
||||
];
|
||||
};
|
||||
|
||||
//initialize
|
||||
|
|
@ -99,10 +109,6 @@ m.module(document.getElementById("example"), app);</code></pre>
|
|||
<div class="col(4,4,12)">
|
||||
<h2>Output</h2>
|
||||
<div id="example" class="example output">
|
||||
<noscript>
|
||||
<a href="getting-started.html">Getting Started</a>
|
||||
<a href="mithril.html">Documentation</a></div>
|
||||
</noscript>
|
||||
<script src="mithril.min.js"></script>
|
||||
<script>
|
||||
//namespace
|
||||
|
|
@ -116,13 +122,20 @@ app.PageList = function() {
|
|||
//controller
|
||||
app.controller = function() {
|
||||
this.pages = app.PageList();
|
||||
|
||||
this.rotate = function() {
|
||||
this.pages().push(this.pages().shift())
|
||||
}.bind(this)
|
||||
};
|
||||
|
||||
//view
|
||||
app.view = function(ctrl) {
|
||||
return ctrl.pages().map(function(page) {
|
||||
return m("a", {href: page.url}, page.title);
|
||||
});
|
||||
return [
|
||||
ctrl.pages().map(function(page) {
|
||||
return m("a", {href: page.url}, page.title);
|
||||
}),
|
||||
m("button", {onclick: ctrl.rotate}, "Rotate links")
|
||||
];
|
||||
};
|
||||
|
||||
//initialize
|
||||
|
|
@ -197,6 +210,29 @@ m.module(document.getElementById("example"), app);
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="socialmedia">
|
||||
<div class="container row">
|
||||
<div class="col(8,12,12)">
|
||||
<h2>Social Media</h2>
|
||||
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Mithril.js m.prop feature is plain brilliant. I spent years yearning for an approach that lightweight <a href="http://t.co/KgzOxoa2WR">http://t.co/KgzOxoa2WR</a></p>— Xavier Via (@xaviervia) <a href="https://twitter.com/xaviervia/statuses/454635992360554497">April 11, 2014</a></blockquote>
|
||||
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Mithril: The newest JavaScript MVC library 3Kb. <a href="http://twitter.com/LeoHorie">@LeoHorie</a> got it right: It's all about good guides/docs: <a href="http://lhorie.github.io/mithril/comparison.html">lhorie.github.io/mithril/comparison.html</a></p> — David Corbacho (@dcorbacho) <a href="https://twitter.com/dcorbacho/status/446926407843991552">March 21, 2014</a></blockquote>
|
||||
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Mithril: Another MVC JS Framework << there's always room for one more, especially when they're this small... <a href="http://t.co/gDp3kyUkxL">http://t.co/gDp3kyUkxL</a></p>— Graham Ashton (@grahamashton) <a href="https://twitter.com/grahamashton/statuses/446353031677100033">March 19, 2014</a></blockquote>
|
||||
|
||||
<script async src="http://platform.twitter.com/widgets.js"></script>
|
||||
</div>
|
||||
<div class="col(4,12,12)">
|
||||
<div class="callout">
|
||||
<h3>Want to hear more?</h3>
|
||||
<p>Subscribe to the <a href="http://lhorie.github.io/mithril-blog">Mithril blog</a>. It's updated weekly with articles about how to use Mithril (and Javascript in general) to their full potential.</p>
|
||||
<p>There's also a <a href="https://groups.google.com/forum/#!forum/mithriljs">mailing list</a>, where you can post questions and discuss Mithril related topics.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="container">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
[
|
||||
{"title": "Getting Started", "url": "getting-started.html"},
|
||||
{"title": "Documentation", "url": "mithril.html"}
|
||||
{"title": "Documentation", "url": "mithril.html"},
|
||||
{"title": "Mithril Blog", "url": "http://lhorie.github.io/mithril-blog/"},
|
||||
{"title": "Mailing List", "url": "https://groups.google.com/forum/#!forum/mithriljs"}
|
||||
]
|
||||
|
|
@ -28,10 +28,10 @@ nav a {color:#fff;display:inline-block;padding:10px;}
|
|||
nav a:visited {color:#ddd;}
|
||||
footer {text-align:center;padding:10px 0;}
|
||||
footer,footer a,footer a:visited {color:#fff;}
|
||||
h1,h2 {font-family:Palatino;margin:0 0 10px;}
|
||||
h1 {font-size:3em;text-shadow:0.024em 0.024em #777, -0.024em -0.024em #fff;}
|
||||
h1,h2 {font-family:Verdana;margin:0 0 10px;}
|
||||
h1 {font-size:3em;}
|
||||
h1 span {animation:logo 2s;display:inline-block;-webkit-animation:logo 2s;}
|
||||
h2 {color:#888;font-style:italic;}
|
||||
h2 {color:#888;font-weight:normal;}
|
||||
h3 {margin:10px 0;}
|
||||
p {margin:15px 0;}
|
||||
ul {margin:15px 0;padding:0 0 0 1em;}
|
||||
|
|
@ -55,11 +55,11 @@ linear-gradient(#ededed 25%, #eaeaea 25%, #eaeaea 50%, rgba(255,255,255,0) 50%,
|
|||
background-color: #e3e3e3;
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
.logo {color:#d3d3d3;font-family:Georgia;font-style:italic;}
|
||||
.logo {color:#5a5;font-family:Georgia;font-style:italic;}
|
||||
.logo span {font-family:Arial;font-style:normal;}
|
||||
.logo :before {content:"\25CB";position:absolute;margin:-0.17em 0 0 -0.10em;}
|
||||
.logo :after {content:"\25CB";position:absolute;margin:-0.17em 0 0 -0.5em;}
|
||||
.button,.button:visited {background:#5a5;border-radius:5px;box-shadow:1px 1px #777, -1px -1px #fff;color:#fff;display:inline-block;font:normal bold 16px Helvetica;margin:0 10px 10px;padding:10px 30px;text-decoration:none;}
|
||||
.button,.button:visited {background:#5a5;color:#fff;display:inline-block;font:normal bold 16px Helvetica;margin:0 10px 10px;padding:10px 30px;text-decoration:none;}
|
||||
.features {background:#fff;padding:30px 0 0;}
|
||||
.feature {margin:0 0 30px;padding:0 20px 0 0;}
|
||||
.sample {background:#f5f5f5;padding:30px 0 10px;}
|
||||
|
|
@ -69,11 +69,12 @@ background-size: 20px 20px;
|
|||
.more {background:#ddd;padding:30px 0;}
|
||||
.output a,.more a {display:block;margin:0 0 10px;}
|
||||
.output a:after,.more a:after {content:" \bb";}
|
||||
.performance {background:#fff;padding:30px 0;}
|
||||
.performance,.socialmedia {background:#fff;padding:30px 0;}
|
||||
.performance td:first-child {text-align:right;width:1%;}
|
||||
.bar {background:red;height:4px;float:left;margin:0.5em 1em 0 0;}
|
||||
.security {background:#f5f5f5;padding:30px 0;}
|
||||
.success {color:#383;}
|
||||
.callout {background:#84db84;padding:1em;}
|
||||
.error {color:#f00;}
|
||||
.content {background:#f5f5f5;padding:30px 0;}
|
||||
|
||||
|
|
|
|||
35
gnimmelf.html
Normal file
35
gnimmelf.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<script src="mithril.js"></script>
|
||||
<script type="text/javascript">
|
||||
//model
|
||||
var identity = function(value) {return value}
|
||||
var page = function(url) {
|
||||
return m.request({method: "GET", url: url, deserialize: identity})
|
||||
.then(marked)
|
||||
.then(m.trust)
|
||||
}
|
||||
|
||||
//controllers
|
||||
var home = function(ctrl) {
|
||||
this.title = "Home"
|
||||
this.body = m.trust("hello home")//page("home.html")
|
||||
}
|
||||
var about = function(ctrl) {
|
||||
this.title = "Home"
|
||||
this.body = m.trust("hello about")//page("about.html")
|
||||
}
|
||||
|
||||
//view
|
||||
var layout = function(ctrl) {
|
||||
return m("html", [
|
||||
m("body", [
|
||||
m("h1", ctrl.title),
|
||||
m("#app", ctrl.body)
|
||||
])
|
||||
])
|
||||
}
|
||||
|
||||
m.route(document, "/", {
|
||||
"/": {controller: home, view: layout},
|
||||
"/about": {controller: about, view: layout}
|
||||
})
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue