-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
326 lines (264 loc) · 18.9 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
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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Spontaneous CMS</title>
<link href="http://fonts.googleapis.com/css?family=News+Cycle:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/splash2.css" />
<link rel="stylesheet" href="css/gist.css" />
<script type="text/javascript">
var h=window.location.host;
if (h && h !== "localhost" && h !== "127.0.0.1") {
var _gaq=[['_setAccount','UA-37900566-1'],['_trackPageview']];
(function(d, s) {
var t=d.getElementsByTagName(s)[0],g=d.createElement(s);g.async=1;g.src='//www.google-analytics.com/ga.js';t.parentNode.insertBefore(g,t);
})(document, "script");
}
</script>
</head>
<body onload="setupZoom()">
<div id="contents">
<div id="logo"></div>
<div id="strap">The next-generation online content management system.</div>
<div class="hero">
<p>Spontaneous is an <strong>open-source</strong> content management framework written in <strong>Ruby</strong> that has two main goals:</p>
<ul>
<li>To provide a <strong>powerful</strong> and flexible API to developers that will allow them to create <strong>richer, more beautiful</strong> websites, and </li>
<li>Give site editors a <strong>intuitive and responsive editing interface</strong> and workflow that will free them to concentrate on what they’re trying to say, not the tools they’re using to say it.</li>
</ul>
</div>
<h3>The Next Generation Now</h3>
<p>Online content management is not a solved problem. The web is
evolving. Websites have to do more than ever before and technology is
constantly improving yet the basic assumptions & design of current
CMS systems haven’t changed.</p>
<p>Spontaneous takes a radically different approach.</p>
<p>Its sophisticated code-driven metadata system straddles the line
between a web application framework and a more traditional content
management system. It allows developers to model complex relational data
yet provides editors with a consistent and intuitive user interface.</p>
<p> The following is a quick tour of the features that make Spontaneous
the best CMS in the world. </p>
<h3>Metadata in Code, Not the Database</h3>
<p> Spontaneous is highly structured. You build a site by writing Ruby
classes that define content types and the relations between them much
like you would between tables in a database. </p>
<p>In Spontaneous this collection of Ruby classes is called the ‘schema’.
It is what makes the system as a whole so powerful and flexible.</p>
<script src="https://gist.github.com/4587221.js"></script>
<div class="figure">
<p class="image">
<a href="figures/screenshot-basic-editing.png" class="zoom"><img src="figures/screenshot-basic-editing.thumb.png" alt="" /></a>
</p>
<div class="caption">
<h4>The schema above generates this editing interface.</h4>
<p>At the top is a navigation and toolbar. Below that is the page information, its title and URL. Then the page’s fields, in this case it’s title, welcome text and image. Next is the list of ‘boxes’ which are where you build the page content and children. Each box has a list of content types that it accepts, in this simple example we have only allowed the addition of ‘Blog Section’ pages.</p>
</div>
<div class="clear"></div>
</div>
<h3>Cutting Edge User Interface</h3>
<p>Instead of relying on a WYSIWYG editor and placing the burden of layout on the content editor, Spontaneous instead has a content model based on multiple lists of simple content “pieces”.</p>
<p>Defined within the schema, each site can have as many content types as necessary and each can have as many ‘fields’ as needed. These fields are laid out within templates coded by the developer. </p>
<p>By adding a piece of content and filling in its fields with text and images, editors are adding a beautifully and consistently styled element to their web-page without having to even think about layout.</p>
<p>Spontaneous uses feature detection to ensure that only the most capable browsers are able to access the editing interface. This means that it is free to lay on a rich layer of cutting-edge HTML5 features to make the editing experience as pleasant as possible:</p>
<ul>
<li>
<strong>A perfect preview.</strong> The preview mode shows you the site exactly as it will appear once any changes are published. There is no CMS specific code inserted that might alter the way the page looks or behaves. The preview is identical right down to the HTML (barring certain desirable exceptions such as analytics tracking code).
</li>
<li>
<strong>Clean, clear, attractive and uncluttered design.</strong> It’s all about removing buttons, not adding them.
<div class="figure">
<p class="image">
<a href="figures/screenshot-basic-editing.png" class="zoom"><img src="figures/screenshot-basic-editing.thumb.png" alt="" /></a>
</p>
<div class="caption">
<h4>Nothing Between You and Your Site</h4>
<p>Spontaneous’s way of breaking complex pages down into simple pieces means that content composition is a series of simple steps. Because almost everything about the site is specific to the requirements of that site there is no need for lots of generic buttons, pulldowns and choices. The only text in this screenshot that wasn’t decided by the site’s developer are the words ‘publish’ and ‘preview’...</p>
</div>
<div class="clear"></div>
</div>
</li>
<li>
<strong>Simple actions leading to predictable outcomes.</strong> WYSIWYG is a lie. Reliability and predicitability are worth more than a live preview.
</li>
<li>
<strong>Sophisticated context-sensitive Markdown editor.</strong> Because layout is handled by the CMS through templates, the text editor is only needed to add simple text styles.
<div class="figure">
<p class="image">
<a href="figures/screenshot-markdown-editor.png" class="zoom"><img src="figures/screenshot-markdown-editor.thumb.png" alt="" /></a>
</p>
<div class="caption">
<h4>Smart Editing</h4>
<p>Markdown is perfect for basic styling of text and Spontaneous’s editor is perfect for Markdown. It is smart enough to know when your cursor is within a bold, italic, headline or link section so allows you to edit or toggle these styles without having to painstakingly re-select the marked text. It’s also smart enough to translate ‘@spontaneouscms’ into a link to the <a href="https://twitter.com/spontaneouscms">relevant Twitter profile</a>.</p>
</div>
<div class="clear"></div>
</div>
</li>
<li>
<strong>Resumable and verified uploads.</strong> Large files are uploaded in pieces. Each piece has its integrity verified using a SHA checksum and the final file is reassembled from these pieces.
<p><span class="strike">If</span> When you lose internet connectivity or your browser crashes half-way uploading a 700Mb video over your rural ADSL connection<sup>*</sup> Spontaneous will re-use nearly all the data you uploaded the next time you try.</p>
<p>
<sup>*</sup> A real situation.
</p>
<div class="figure">
<p class="image">
<a href="figures/screenshot-image-upload.png" class="zoom"><img src="figures/screenshot-image-upload.thumb.png" alt="" /></a>
</p>
<div class="caption">
<h4>Drag & Drop Uploading</h4>
<p>Simply drop a file onto an image preview to upload it — you will be rewarded with an accurate progress meter. Multiple files will be queued and uploaded one at a time and are processed asynchronously on the server so you can carry on editing whilst your images are processed (and perhaps uploaded to the cloud).</p>
</div>
<div class="clear"></div>
</div>
</li>
<li>
<strong>Publishing progress indicator.</strong> Watch your changes go live in real time.
<div class="figure">
<p class="image">
<a href="figures/screenshot-publish-progress.png" class="zoom"><img src="figures/screenshot-publish-progress.thumb.png" alt="" /></a>
</p>
<div class="caption">
<h4>Worth the (Short) Wait</h4>
<p>The separate publishing step transforms your changes into static pages<sup>*</sup> and indexes the site. This is run in the background using a low-priority process so that it doesn’t affect the performance of the site but you recieve progress updates in real time.</p>
<p>
<sup>*</sup> Unless they contain some dynamic component.
</p>
</div>
<div class="clear"></div>
</div>
</li>
</ul>
<h3>Multiple outputs</h3>
<p>HTML is no longer enough. </p>
<p>Each page type in the Spontaneous schema can declare multiple outputs. Starting with a default HTML view you can add any number & mix of alternate HTML, XML based syndication feeds, JSON and plain text versions. This means your content is available in the browser but also in that native mobile application you want to provide. In future the aim is to extend this system to support more complex formats such as PDF, MOBI and EPUB (to name but a few).</p>
<script src="https://gist.github.com/4605834.js"></script>
<p>You can also define your own outputs such as one that inserts rows in a database, or communicates with an external service so they can also form a part of integrating Spontaneous into a larger system.</p>
<h3>Powerful Search</h3>
<p>Built in to the CMS and configured within the content schema is a powerful search system based upon <a href="http://xapian.org/">Xapian</a>.</p>
<p>Each Spontaneous site can have multiple search indexes encompassing a subset of content types.</p>
<p>
<script src="https://gist.github.com/4587894.js"></script>
</p>
<h3>Content Aliases</h3>
<p>Need to reference one bit of content from another? Want to include a list of features or favorites on your homepage? Easy.</p>
<p>Spontaneous’s alias system lets you create links to any bit of content on your site. Define your alias type in the schema (in Ruby as usual) and editors are presented with a dialogue that lets them pick the item they want to link to. The alias then has access to all their targets fields and templates as well has being able to have their own.</p>
<script src="https://gist.github.com/4594056.js"></script>
<p>These aliases are like symbolic links in UNIX speak and are one of the most powerful aspects of Spontaneous’s type system. Although Spontaneous has no concept of a "media library" where commonly used images or files are kept, you can easily create an equivalent system using aliases. In fact you can create multiple simultaneous libraries, each with its own content logic.</p>
<div class="figure">
<p class="image">
<a href="figures/screenshot-alias-picker.png" class="zoom"><img src="figures/screenshot-alias-picker.thumb.png" alt="" /></a>
</p>
<div class="caption">
<h4>Picking a Target for Your Alias</h4>
<p>The alias picker interface allows you to search for the target you want. The Ruby API provides flexible options for filtering including limiting to a sub-set of content types, selecting only from a single page, single box or even a completely custom list (such as rows from an external database).</p>
</div>
<div class="clear"></div>
</div>
<p>Example uses (taken from actual projects) include:</p>
<ul>
<li>
<strong>Create custom showreels.</strong> Film-makers often want to present a very specific sub-set of their oeuvre to present to a prospective client. Using aliases this is easy. <a href="http://prechezer.com/commercials">Example</a>
</li>
<li>
<strong>Promote content on your homepage.</strong> Like the example above, you can create any number of links within a page. <a href="http://soda.co.uk">Example</a>
</li>
<li>
<strong>Create category systems.</strong> Because each item knows about all the aliases that point to it, you can use aliases to categorize content and then present visitors with a list of all members of that category <code>members = category.aliases.map(&:page)</code>. Like every other page these category pages are generated as part of the publishing step and will be served lighting fast to your site visitors. <a href="http://kitmonsters.com/kit/guitar">Example</a>
</li>
</ul>
<h3>A Content Management <em>Framework</em>?</h3>
<p>Spontaneous is as much a framework as a CMS. It’s schema system, backed by a solid relational database, is as much like coding an app as a content hierarchy.</p>
<p>Each content model can also provide its own set of controllers if you want to provide some dynamic functionality to a page. For example if you wanted to allow users to posts comments on each blog page you could add a comments controller:</p>
<script src="https://gist.github.com/4587957.js"></script>
<p>If the page at <code>/blog/my-first-post</code> is a <code>BlogPost</code> page then GET-ing the URL <code>/blog/my-first-post/@comments</code> will return the list of comments and POST-ing to <code>/blog/my-first-post/@comments/like/23</code> will like post with ID 23.</p>
<h3>Version 3…</h3>
<p>The current version of Spontaneous comes from a solid pedigree of earlier closed-source systems that have been in active use since 2006. Although the entire system has been re-written from scratch (the first versions were based on Rails 1.1.6…) the fundamental concept (pages, pieces, boxes & fields) hasn’t altered, simply because it was so successful.</p>
<p>The original brief was for a CMS that would enable beautiful design, rather than hinder it, whilst removing any technical/design burden from the site editors.</p>
<div class="figure">
<p class="image">
<a href="figures/screenshot-version-1.png" class="zoom"><img src="figures/screenshot-version-1.thumb.png" alt="" /></a>
</p>
<div class="caption">
<h4>Version 1 — 2006</h4>
<p>Developed quickly and utilising then-revolutionary technologies such as Ruby on Rails and an AJAX driven interface powered by Prototype, version 1 is still in active use on some high profile & busy sites 6 years after it was first deployed.</p>
</div>
<div class="clear"></div>
</div>
<div class="figure">
<p class="image">
<a href="figures/screenshot-version-2.png" class="zoom"><img src="figures/screenshot-version-2.thumb.png" alt="" /></a>
</p>
<div class="caption">
<h4>Version 2 — 2008</h4>
<p>Version 2 centres around a re-design of the user-interface and some enhancements to the back-end code. It is still in active use on multiple sites.</p>
</div>
<div class="clear"></div>
</div>
<div class="figure">
<p class="image">
<a href="figures/screenshot-basic-editing.png" class="zoom"><img src="figures/screenshot-basic-editing.thumb.png" alt="" /></a>
</p>
<div class="caption">
<h4>Version 3 — 2012</h4>
<p>A complete ground-up rewrite focussing on taking the best features of versions 1 & 2 and improving them beyond all recognition.</p>
</div>
<div class="clear"></div>
</div>
<h3>And More...</h3>
<p>Some other features include:</p>
<ul>
<li><strong>Image post processing.</strong> Image fields can define multiple output sizes, each of which can be processed separately using ImageMagick:
<script src="https://gist.github.com/4593797.js"></script>
</li>
<li>
<strong>Host your media in the cloud.</strong> Spontaneous uses <a href="http://fog.io">Fog</a> to integrate with cloud services.
</li>
<li>
<strong>DRY templates using inheritance.</strong> Spontaneous has its <a href="https://docs.djangoproject.com/en/dev/topics/templates/">own template engine</a> that supports template inheritance <a href="https://docs.djangoproject.com/en/dev/topics/templates/">á la Django</a>. It also allows you to write two-pass templates, or templates that generate templates if you will, which are rendered dynamically.
<li><strong>Search engine friendly by design.</strong> Page URLs are 100% hand crafted, there are no human-opaque IDs or parameters to hide or work around.</li>
</li>
</ul>
<p>This is just the start. The system is in active development with a plan for exciting features that’s already a mile long. However the aim is not for a constantly moving set of features but instead concentrate on honing and refining the core with an eye to making the developer’s life simpler and the system more robust. The goal is for extensions and customisations to be made available through external plugins interfacing with a clear and well-documented API.</p>
<h3>In Production</h3>
<p>Spontaneous currently powers the following websites:</p>
<ul class="in-production">
<li>
<p class="image"><a href="http://kitmonsters.com/" class="screenshot"><img src="figures/screenshot-kitmonsters.thumb.png" alt="" /></a></p>
<p class="caption">
<a href="http://kitmonsters.com">Kitmonsters</a>. Hot bands, cool kit, monstrously simple. Music-makers show and tell how they get their sound – the gear they use and what they do with it. Interviews, tips and how-to’s, plus the latest from kit-makers.
</p>
<div class="clear"></div>
</li>
<li>
<p class="image">
<a href="http://soda.co.uk/" class="zoom"><img src="figures/screenshot-soda.thumb.png" alt="" /></a>
</p>
<p class="caption"><a href="http://soda.co.uk">Soda</a>. Mashing up the physical and digital worlds for culture and learning.</p>
<div class="clear"></div>
</li>
<li>
<p class="image">
<a href="http://quib.ly/" class="zoom"><img src="figures/screenshot-quibly.thumb.png" alt="" /></a>
</p>
<div class="caption">
<p>
<a href="http://quib.ly">Quibly</a>. Parenting + Technology.
</p>
<p>Here Spontaneous is integrated into a larger Python-powered web application as the editorial content editing system.</p>
</div>
<div class="clear"></div>
</li>
</ul>
<p>If you use Spontaneous to make your site, <a href="mailto:[email protected]">let us know</a>...</p>
<h3>All that Sounds Great...</h3>
<p>If you’d like to give it a spin then do the following:</p>
<script src="https://gist.github.com/4587976.js"></script>
<p>Unfortunately the documentation ends there currently. </p>
<h3>Get Involved</h3>
<p>If you’d like to contribute to Spontaneous’s development then head over to the <a href="https://github.com/SpontaneousCMS/spontaneous">Github page</a>. Spontaneous is currently the work of a <a href="https://github.com/SpontaneousCMS/spontaneous/graphs/contributors">single developer</a>. Any help greatly appreciated.</p>
</div>
<a href="https://github.com/SpontaneousCMS/spontaneous"><img style="position: absolute; top: 0; right: 0; border: 0;" src="img/forkme_right_white_FF6C03.png" alt="Fork me on GitHub"></a>
<script type="text/javascript" src="js/FancyZoom.js" async></script>
<script type="text/javascript" src="js/FancyZoomHTML.js" async></script>
</body>
</html>