Skip to content

Commit ece4f1d

Browse files
antonmedvantonmedv
committed
first commit
1 parent fcebb92 commit ece4f1d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+3641
-834
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
_site/
2+
/node_modules/
3+
.jekyll-metadata

‎CNAME

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
monkberry.js.org

‎README.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Monkberry Site and Documentation
2+
3+
To start site locally install npm packages and jekyll. Next command will start gulp watch, webpack and jekyll server.
4+
5+
```
6+
gulp
7+
```
8+
9+
To start jekyll server separately:
10+
11+
```
12+
gulp watch
13+
14+
jekyll s
15+
```
16+
17+
To build production version:
18+
19+
```
20+
gulp build
21+
```

‎_config.yml

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
markdown: kramdown
2+
kramdown:
3+
input: GFM
4+
hard_wrap: false
5+
syntax_highlighter_opts:
6+
disable: true
7+
exclude:
8+
- node_modules
9+
- src
10+
- style
11+
- CNAME
12+
- package.json
13+
- README.md

‎_layouts/default.liquid

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>{{ page.title }} — Monkberry</title>
6+
<meta name="author" content="Anton Medvedev">
7+
{% if page.description %}
8+
<meta name="description" content="{{ page.description }}">
9+
{% endif %}
10+
<meta name="viewport" content="width=device-width, initial-scale=1">
11+
{% assign url = "http://monkberry.js.org" | append: page.url %}
12+
<meta property="og:url" content="{{ url }}">
13+
<meta property="og:type" content="website">
14+
<meta property="og:title" content="Monkberry – a JavaScript library for building web user interfaces">
15+
<meta property="og:description" content="Monkberry is blazingly fast, small 1kb and simple JavaScript library for building web user interfaces.">
16+
<meta property="og:image" content="http://monkberry.js.org/assets/monkberry-opengraph.png">
17+
<link rel="canonical" href="{{ url }}">
18+
<link rel="shortcut icon" href="/favicon.ico">
19+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
20+
<link rel="stylesheet" href="/dist/bundle.css">
21+
<script>
22+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
23+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
24+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
25+
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
26+
ga('create', 'UA-72802692-1', 'auto');
27+
ga('send', 'pageview');
28+
</script>
29+
</head>
30+
<body>
31+
<nav>
32+
<a href="/" {% if page.url == "/" %}class="-active"{% endif %}>
33+
Monkberry
34+
</a>
35+
<a href="/docs/getting-started" {% if page.url contains "/docs" %}{% unless page.url contains "/docs/api" %}class="-active"{% endunless %}{% endif %}>
36+
Guide
37+
</a>
38+
<a href="/docs/api" {% if page.url contains "/docs/api" %}class="-active"{% endif %}>
39+
API
40+
</a>
41+
<a href="https://github.com/monkberry/monkberry">
42+
<svg class="icon-github" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M9 0C4.03 0 0 4.045 0 9.036a9.034 9.034 0 0 0 6.155 8.573c.45.083.615-.196.615-.435 0-.215-.008-.783-.013-1.537-2.503.546-3.032-1.211-3.032-1.211-.408-1.044-.999-1.321-.999-1.321-.817-.561.062-.55.062-.55.903.064 1.378.931 1.378.931.804 1.381 2.107.982 2.62.75.082-.583.314-.981.572-1.207-2-.228-4.1-1.003-4.1-4.465a3.5 3.5 0 0 1 .926-2.425c-.092-.23-.401-1.147.088-2.391 0 0 .756-.243 2.475.926.719-.2 1.488-.3 2.254-.305a8.618 8.618 0 0 1 2.253.305c1.718-1.17 2.472-.926 2.472-.926.491 1.244.182 2.162.09 2.39.577.633.925 1.439.925 2.426 0 3.47-2.104 4.234-4.11 4.458.324.28.612.83.612 1.673 0 1.208-.012 2.183-.012 2.479 0 .242.162.523.62.434A9.035 9.035 0 0 0 18 9.036C18 4.046 13.97 0 9 0" fill="#747474" fill-rule="evenodd"/></svg>
43+
GitHub
44+
</a>
45+
46+
<a class="share -right" href="http://www.facebook.com/sharer/sharer.php?u=http://monkberry.js.org" target="_blank">
47+
<svg class="icon-facebook" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M9.614 18H.994A.993.993 0 0 1 0 17.006V.993C0 .445.445 0 .993 0h16.014c.548 0 .993.445.993.993v16.013a.994.994 0 0 1-.993.994H12.42v-6.97h2.34l.35-2.717h-2.69V6.578c0-.786.218-1.322 1.346-1.322h1.438v-2.43a19.23 19.23 0 0 0-2.096-.107c-2.074 0-3.494 1.266-3.494 3.59v2.004H7.27v2.716h2.345V18z" fill="#FFF" fill-rule="evenodd"/></svg>
48+
Share
49+
</a>
50+
<a class="share" href="https://twitter.com/intent/tweet?url=http://monkberry.js.org&text=Monkberry%20–%20a%20JavaScript%20library%20for%20building%20web%20user%20interfaces" target="_blank">
51+
<svg class="icon-twitter" width="18" height="15" viewBox="0 0 18 15" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M18 1.776a7.213 7.213 0 0 1-2.12.596A3.778 3.778 0 0 0 17.503.277a7.273 7.273 0 0 1-2.346.918A3.642 3.642 0 0 0 12.462 0C10.424 0 8.77 1.696 8.77 3.787c0 .296.032.585.095.862-3.069-.158-5.79-1.664-7.612-3.958a3.856 3.856 0 0 0-.5 1.906c0 1.313.652 2.472 1.643 3.152a3.626 3.626 0 0 1-1.673-.473v.047c0 1.835 1.273 3.366 2.963 3.713-.31.089-.636.133-.973.133-.238 0-.47-.023-.695-.067.47 1.504 1.833 2.599 3.45 2.628A7.292 7.292 0 0 1 0 13.3 10.282 10.282 0 0 0 5.66 15c6.794 0 10.508-5.77 10.508-10.774 0-.164-.003-.329-.01-.49A7.58 7.58 0 0 0 18 1.776" fill="#FFF" fill-rule="evenodd"/></svg>
52+
Tweet
53+
</a>
54+
</nav>
55+
{{ content }}
56+
<footer>
57+
<div class="with-love">
58+
Made with
59+
<svg class="icon-love" width="21" height="17" viewBox="0 0 21 17" xmlns="http://www.w3.org/2000/svg"><title>love</title><path d="M14.725.032a5.31 5.31 0 0 0-4.687 2.814 5.312 5.312 0 0 0-10 2.498c0 4.763 5.834 7.397 10 11.564 4.306-4.306 10-6.76 10-11.563A5.312 5.312 0 0 0 14.725.032z" fill="#E82F2F" fill-rule="evenodd"/></svg>
60+
<span class="from">from</span>
61+
<a href="https://www.facebook.com/groups/230631430637122/">Phuket, Thailand</a>
62+
</div>
63+
{% if page.url contains "/docs" %}
64+
<div class="fork-and-fix">
65+
Found a typo? Just <a href="https://github.com/monkberry/monkberry.github.io/edit/master{{ page.url }}.md">edit it</a>!
66+
</div>
67+
{% endif %}
68+
</footer>
69+
<script src="/dist/bundle.js"></script>
70+
<!-- Yandex.Metrika counter -->
71+
<script type="text/javascript">
72+
(function (d, w, c) {
73+
(w[c] = w[c] || []).push(function() {
74+
try {
75+
w.yaCounter38134075 = new Ya.Metrika({
76+
id:38134075,
77+
clickmap:true,
78+
trackLinks:true,
79+
accurateTrackBounce:true,
80+
webvisor:false
81+
});
82+
} catch(e) { }
83+
});
84+
85+
var n = d.getElementsByTagName("script")[0],
86+
s = d.createElement("script"),
87+
f = function () { n.parentNode.insertBefore(s, n); };
88+
s.type = "text/javascript";
89+
s.async = true;
90+
s.src = "https://mc.yandex.ru/metrika/watch.js";
91+
92+
if (w.opera == "[object Opera]") {
93+
d.addEventListener("DOMContentLoaded", f, false);
94+
} else { f(); }
95+
})(document, window, "yandex_metrika_callbacks");
96+
</script>
97+
<noscript><div><img src="https://mc.yandex.ru/watch/38134075" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
98+
<!-- /Yandex.Metrika counter -->
99+
</body>
100+
</html>

‎_layouts/docs.liquid

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
layout: default
3+
title: page.title
4+
---
5+
<div class="table-of-contents">
6+
<a href="/docs/getting-started" {% if page.url contains "/docs/getting-started" %}class="-active"{% endif %}>Getting Started</a>
7+
<a href="/docs/installation" {% if page.url contains "/docs/installation" %}class="-active"{% endif %}>Installation</a>
8+
<a href="/docs/templating" {% if page.url contains "/docs/templating" %}class="-active"{% endif %}>Templating</a>
9+
<a href="/docs/event-handling" {% if page.url contains "/docs/event-handling" %}class="-active"{% endif %}>Event handling</a>
10+
<a href="/docs/components" {% if page.url contains "/docs/components" %}class="-active"{% endif %}>Components</a>
11+
<a href="/docs/directives" {% if page.url contains "/docs/directives" %}class="-active"{% endif %}>Directives</a>
12+
<a href="/docs/api" {% if page.url contains "/docs/api" %}class="-active"{% endif %}>API Reference</a>
13+
</div>
14+
<div class="content docs">
15+
{{ content }}
16+
</div>
17+
<div class="clear-both"></div>

‎assets/Monkberry.svg

Lines changed: 3 additions & 0 deletions
Loading

‎assets/monkberry-opengraph.png

18.2 KB
Loading

‎dist/bundle.css

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/bundle.css.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/bundle.js

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/bundle.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/api.md

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
---
2+
layout: docs
3+
permalink: /docs/api
4+
title: API Reference
5+
---
6+
{% raw %}
7+
# API Reference
8+
9+
Monkberry API strictly follows [semantic versioning](http://semver.org).
10+
11+
### Monkberry.render(template, node[, options])
12+
13+
Returns a new `Monkberry` template instance, a "view".
14+
15+
* `template` — `Monkberry` template object,
16+
* `node` — `Element` DOM node where to attach the rendered template,
17+
* `options` — `Object` optional options.
18+
19+
```js
20+
const view = Monkberry.render(Template, document.body);
21+
```
22+
23+
Options object:
24+
25+
* `noCache` — `Boolean` to use the pool of prerendered templates or not,
26+
* `context` — `Object` this will pass through every component hierarchy,
27+
* `filters` — `Object` filters to template,
28+
* `directives` — `Object` of directives.
29+
30+
31+
### Monkberry.prerender(template, times)
32+
33+
Prerender template for future usage.
34+
35+
* `template` — `Monkberry` - template object
36+
* `times` — `Number` - how many times
37+
38+
```js
39+
Monkberry.prerender(Template, 10);
40+
41+
// Will return view with already created DOM nodes.
42+
const view = Monkberry.render(Template, document.body);
43+
```
44+
45+
This can be very useful. For example you can prerender templates while waiting for an XHR response.
46+
47+
### Monkberry.prototype.appendTo(toNode)
48+
49+
Append rendered view to the specified node.
50+
51+
* `toNode` — `Element` - DOM node
52+
53+
### Monkberry.prototype.insertBefore(toNode)
54+
55+
Insert rendered view before the specified node.
56+
57+
* `toNode` — `Element` - DOM node.
58+
59+
### Monkberry.prototype.createDocument()
60+
61+
Return view's nodes. Note that if your template contains more than one root element, `createDocument` will return `DocumentFragment` that contains all of those nodes. If you have only one root node, it will be returned as is.
62+
63+
### Monkberry.prototype.update(state)
64+
65+
Update rendered template with a new state. You can specify only a part of state to update or you can update the entire state.
66+
67+
* `state` — `Object` - values to update in template
68+
69+
Example:
70+
71+
```js
72+
const state = {
73+
title: 'Title #1',
74+
content: '...'
75+
};
76+
77+
view.update(state);
78+
79+
// Update only title.
80+
view.update({title: 'Title #2'});
81+
```
82+
83+
### Monkberry.prototype.remove()
84+
85+
Remove view's nodes from document, and put it to pool for future reuse.
86+
87+
### Monkberry.prototype.querySelector(query)
88+
89+
Select node by query.
90+
91+
* `query` — `String` query to select node
92+
93+
> Note that this function uses [Element.matches()](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches) for checking root nodes. Include polyfill for matches if you use it.
94+
95+
If your template contains more than one node on first level, `querySelector` will search all subtrees. Array of all top level nodes can be accessed with `view.nodes[]` array.
96+
97+
> Note that querySelector cannot work with template which has if/for/custom node on first level.
98+
>
99+
> ```monk
100+
> {% if cond %}
101+
> ...
102+
> {% endif %}
103+
> ```
104+
>
105+
> You will get an exception like this:
106+
> `Cannot use querySelector with non-element nodes on first level.`
107+
>
108+
> You can solve this by wrapping everything into another node:
109+
>
110+
> ```monk
111+
> <div>
112+
> {% if cond %}
113+
> ...
114+
> {% endif %}
115+
> </div>
116+
> ```
117+
>
118+
{% endraw %}

‎docs/components.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
layout: docs
3+
permalink: /docs/components
4+
title: Components
5+
---
6+
{% raw %}
7+
# Components
8+
9+
Monkberry compiles templates into JavaScript classes, so you can extend them.
10+
11+
```js
12+
import ToDo from './ToDo.monk';
13+
14+
export default class extends Todo {
15+
constructor() {
16+
super();
17+
18+
// Define internal state of your compenent if you need to.
19+
this.state = {
20+
text: '',
21+
complete: false
22+
};
23+
24+
// Add event listeners.
25+
this.on('click', '.edit', this.onEdit.bind(this));
26+
}
27+
28+
update(state) {
29+
// Define actions to do on state updates.
30+
Object.assign(this.state, state);
31+
32+
// Call update of view itself.
33+
super.update(state);
34+
}
35+
36+
onEdit(event) {
37+
// ...
38+
}
39+
}
40+
```
41+
42+
Now you can use it inside of another template:
43+
44+
```monk
45+
{% import ToDo from './ToDo' %}
46+
47+
<ol>
48+
{% for todo of todos %}
49+
<ToDo todo={{ todo }}/>
50+
{% endfor %}
51+
</ol>
52+
```
53+
54+
> Note that in this template we import `./ToDo`, not `./ToDo.monk`.
55+
56+
Full example of this todo app with all components can be found on [monkberry/todomvc](https://github.com/monkberry/todomvc).
57+
This example uses [redux](http://redux.js.org/index.html) for manipulating state.
58+
59+
[Next →](/docs/directives)
60+
{% endraw %}

0 commit comments

Comments
 (0)