forked from mavoweb/mavo.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tpl.html
170 lines (144 loc) · 7.75 KB
/
index.tpl.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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
@@include('_head.html', {
"rootclass": "home",
"title": "Mavo: A new, approachable way to create Web applications",
"includes": "<link rel='stylesheet' href='style.css'>"
})
<body>
<header>
<div class="masthead">
<h1 class="logo"><img src="logo.svg" alt="Mavo"></h1>
@@include('_nav.html')
</div>
<div class="promo">
<strong class="tagline">A new, approachable way to create Web applications</strong>
<p>Create complex, reactive, persistent web applications by just writing HTML & CSS, without a single line of JavaScript and no server backend.
<br />Developed in the <a href="http://haystack.csail.mit.edu">Haystack Group</a> at <a href="http://csail.mit.edu">MIT CSAIL</a> and led by <a href="http://lea.verou.me">Lea Verou</a>.
</p>
<a href="/get" class="call-to-action button">Get Mavo</a>
</div>
</header>
<section id="what">
<h1>What is Mavo?</h1>
<ul>
<li>Mavo extends the syntax of HTML to describe Web applications that manage, store, and transform data.</li>
<li>Store data in the cloud, locally, or not at all by just changing <a href="/docs/primer/#mv-storage">an HTML attribute</a></li>
<li><a href="/docs/primer/#property">Edit data</a> right in the website, with an intuitive, auto-generated, customizable interface. No more wrestling with CMSes and servers!</li>
<li>Multimedia uploads in your page via drag & drop, pasting, or browsing, without a single line of code.</li>
<li>Perform <a href="/docs/primer/#expressions">calculations</a> right in the HTML, that update when needed. No need to write JavaScript!</li>
</ul>
</section>
<section id="pros">
<article>
<h1>Approachable</h1>
<p>Mavo uses familiar <strong>HTML-based syntax</strong> and can be used even by people with no programming experience.
This is not wishful thinking; <a href="http://dl.acm.org/citation.cfm?id=2984551">it’s published, peer-reviewed research</a>.</p>
</article>
<article>
<h1>Learnable</h1>
<p>Mavo’s core functionality can be learned in <a href="docs">a few minutes</a>, and is enough to create a vast variety of applications that manage, store, and transform small-scale data.</p>
</article>
<article>
<h1>Flexible</h1>
<p>Design your application with the <strong>same design freedom and tools as a static webpage</strong>. Mavo works with your markup, not against it.</p>
</article>
<article>
<h1>Extensible</h1>
<p>Mavo has been designed for extensibility from the ground up. <a href="https://plugins.mavo.io">Plugins</a> can modify almost every aspect of its behavior and add new powerful functionality.</p>
</article>
<article>
<h1>Accessible</h1>
<p>Mavo apps are keyboard accessible and screen reader friendly out of the box.</p>
</article>
<article>
<h1>Free and Open Source</h1>
<p>We created Mavo because we thought that creating Web applications should be easier than it is today. Monetization is not among our priorities.</p>
</article>
</section>
<section class="language-markup" id="at-a-glance">
<h1>Mavo at a glance</h1>
<h2 id="homepage"><a href="/demos/homepage">Editable homepage</a></h2>
<p>To try out editing, log in to GitHub or watch the <a href="/demos/homepage/video.mp4" target="_blank">video</a>.</p>
<section class="manual example side-by-side">
<div class="demo-container">
<pre><code>
<main <a href="/docs/primer/#mv-app" aria-label="Give your app a name and tell Mavo to be active on this portion of the page.">mv-app="homepage"</a>
<a href="/docs/primer/#mv-storage" aria-label="mv-storage tells Mavo where to store the data, in this case on GitHub.">mv-storage="https://github.com/mavoweb/data"</a>
<a href="http://plugins.mavo.io/plugin/tinymce" aria-label="Load the TinyMCE plugin for rich text editing">mv-plugins="tinymce"</a>>
<h1>
<img <a href="/docs/primer/#property" aria-label="Name important elements. Makes elements editable and saveable when that makes sense.">property</a>="image" alt="">
<span property="name">Your Name</span>
</h1>
<p property="description" <a href="http://plugins.mavo.io/plugin/tinymce" aria-label="This tells the TinyMCE plugin to be active on this property, i.e. that this property should be edited as rich text.">class="tinymce"</a>></p>
<div class="links">
<a <a href="/docs/primer/#property" aria-label="Note that property doesn’t need a value if it’s the same as its first class (or id, or name, or itemprop)">property</a> class="twitter" title="Twitter">🐦</a>
<a property class="facebook" title="Facebook">f</a>
<a property class="wikipedia" title="Wikipedia">W</a>
</div>
</main>
</code></pre>
<div class="example-container embedded">
<iframe src="/demos/homepage/?lite"></iframe>
</div>
</div>
</section>
<h2 id="todo"><a href="/demos/todo/">Simple To-Do list</a></h2>
<p><a href="/demos/todo/video.mp4" target="_blank">Watch Video</a>.</p>
<section class="manual example side-by-side">
<div class="demo-container">
<pre><code>
<main mv-app="todo" <a href="/docs/primer/#mv-storage" aria-label="Store data locally, in the browser">mv-storage="local"</a> <a href="/docs/properties/#mv-mode" aria-label="Make entire app always editable, no need for a separate editing mode here" class="right">mv-mode="edit"</a>>
<header>
<h1>My tasks</h1>
<p><a href="/docs/primer/#expressions" aria-label="Use brackets to refer to current values of properties and perform calculations. Mavo will automatically update this every time the “done” property changes in any item.">[count(done)]</a> done out of [count(task)] total</p>
</header>
<ul>
<li property="task" <a href="docs/primer/#mv-multiple" aria-label="mv-multiple turns an element into an editable collection of items, complete with controls to add and delete items, reorder items via drag and drop, and even keyboard shortcuts for all these!">mv-multiple</a>>
<label>
<input property="done" type="checkbox" />
<span property="taskTitle">Do stuff</span>
</label>
</li>
<button <a href="/docs/actions" aria-label="When this button is pressed, delete all tasks whose done property is checked">mv-action="delete(task where done)"</a>>
Clear Completed
</button>
</ul>
</main>
</code></pre>
<div class="example-container embedded">
<iframe src="/demos/todo/?lite"></iframe>
</div>
</div>
</section>
<h2 id="portfolio"><a href="/demos/portfolio">Editable portfolio</a></h2>
<p>To try out editing, log in to GitHub or watch the <a href="/demos/portfolio/video.mp4" target="_blank">video</a>.</p>
<section class="manual example side-by-side">
<div class="demo-container">
<pre><code>
<main mv-app="portfolio"
mv-storage="http://github.com/mavoweb/data/portfolio">
<header>
<h1><a href="http://julesmuck.com">muck</a></h1>
</header>
<div>
<a property="painting" mv-multiple mv-attribute="none">
<img property="image" />
<p property="name"
<a aria-label="mv-default allows setting default values for properties. As evidenced here, these could be dynamic, set via expressions.">mv-default</a>="<a href="" aria-label="Expression that uses Mavo functions to extract a default description for the image from its URL">[readable(to(filename(image), '.'))]</a>">
</p>
</a>
</div>
</main>
</code></pre>
<div class="example-container embedded">
<iframe src="/demos/portfolio/?lite"></iframe>
</div>
</div>
</section>
<p class="buttons">
<a href="/docs/primer" class="call-to-action button">Learn More</a>
<a href="/demos" class="call-to-action button">More Demos</a>
</p>
</section>
@@include('_footer.html')
</body>
</html>