-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathindex.html
430 lines (403 loc) · 22.1 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
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>Contenta CMS | The Decoupled Drupal Distribution</title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-122302933-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-122302933-1');
</script>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<nav class="light-blue" role="navigation">
<div class="nav-wrapper container"><div id="logo-container" href="#" class="brand-logo"><img style="height: 50px; padding-top: 10px" src="assets/logo.png"></div>
<ul class="right hide-on-med-and-down">
<li><a href="https://github.com/contentacms">Demos</a></li>
<li><a href="http://contentacms.readthedocs.io">Documentation</a></li>
<li><a href="https://drupal.slack.com/messages/C5A70F7D1">Get Involved</a></li>
<li><a href="https://github.com/contentacms">View on GitHub</a></li>
<li><a href="http://twitter.com/contentacms">Follow Us</a></li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li><a href="https://github.com/contentacms">Demos</a></li>
<li><a href="http://contentacms.readthedocs.io">Documentation</a></li>
<li><a href="https://drupal.slack.com/messages/C5A70F7D1">Get Involved</a></li>
<li><a href="https://github.com/contentacms">View on GitHub</a></li>
<li><a href="http://twitter.com/contentacms">Follow Us</a></li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
</div>
</nav>
<div class="section light-blue hero no-pad-bot" id="index-banner">
<div class="container">
<br><br>
<h1 class="header center white-text">Contenta is an API-First Drupal distribution.</h1>
<h2 class="header center white-text"></h2>
<div class="row center">
<h5 class="header light">It's all about your content everywhere.</h5>
</div>
<div class="row center">
<a href="https://medium.com/@mateu.aguilo.bosch/contenta-makes-your-content-happy-6f76bbe0cdae" id="download-button" class="btn-large waves-effect waves-light grey darken-4">Learn more</a>
</div>
<div class="row center">
<img class="hero-icon" src="assets/icon-1.png">
<img class="hero-icon" src="assets/icon-2.png">
<img class="hero-icon" src="assets/icon-3.png">
<img class="hero-icon" src="assets/icon-4.png">
</div>
<div class="row center">
<div class="col m8 offset-m2 s12">
<h6 class="header white-text">"Take control of your headless CMS with Contenta"</h6>
<p class="video-container"><iframe src="https://www.youtube.com/embed/_xWoJtPF6gU?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe></p>
</div>
</div>
<br>
</div>
</div>
<div class="section summary" id="summary">
<div class="container">
<div class="row center">
<h5 class="header light">Ready to use <span class="indicator"></span></h5>
</div>
<!-- Icon Section -->
<div class="row">
<div class="col s12 m3">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="material-icons">code</i></h2>
<h5 class="center">API <br>ready</h5>
<p class="light">An HTTP API provided ready to use with full auto-generated documentation.</p>
</div>
</div>
<div class="col s12 m3">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="material-icons">layers</i></h2>
<h5 class="center">Example <br>content</h5>
<p class="light">Example content to help you understand how all works. This can be removed all in one click.</p>
</div>
</div>
<div class="col s12 m3">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="material-icons">file_download</i></h2>
<h5 class="center">Example <br>consumers</h5>
<p class="light">Many consumers in different technologies can show you how easy is to build a Contenta project.</p>
</div>
</div>
<div class="col s12 m3">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="material-icons">invert_colors</i></h2>
<h5 class="center">By the <br>community</h5>
<p class="light">A community of experts is ready to guide with Contenta and solve common challenges together.</p>
</div>
</div>
</div>
</div>
<br><br>
</div>
<div class="section mission" id="mission">
<div class="container">
<div class="row white-text">
<div class="col offset-m1 m3 s12 center"><i class="material-icons">language</i></div>
<div class="col m7 s12 thin">
<h5 class="header light">Our Mission <span class="indicator"></span></h5>
<p>Contenta is the community driven API distribution for Drupal 8.</p>
<p>It provides a standard platform that is API ready along with demo content and example front-end applications. Contenta intends to ease the pain of using, or simply trying, decoupled Drupal.</p>
<p>Read more about Contenta’s mission in <a href="https://medium.com/@mateu.aguilo.bosch/contenta-makes-your-content-happy-6f76bbe0cdae">this blog post</a>, or watch a <a href="https://www.youtube.com/watch?v=-KiMgk4wx2c">presentation</a> about it.</p>
</div>
</div>
<div class="row">
<div class="col s12 white-text">
<dl>
<dt>Forget about Drupal</dt>
<dd class="thin">Non-drupalistas can get the Drupal part done quick and focus on their framework of choice.</dd>
<dt>Ready to try decoupled Drupal</dt>
<dd class="thin">Contenta comes with everything (code and content) installed so you can start checking decoupled Drupal right away.</dd>
<dt>Find all the docs</dt>
<dd class="thin">The <a href="http://cms.contentacms.io/help/tutorials">knowledge hub</a> is a manually curated list of good resources on decoupled Drupal.</dd>
<dt>Industry ready</dt>
<dd class="thin">The Contenta CMS community accumulates a lot of experience in real projects. Contenta ships with many gotchas solved.</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="section compare" id="compare">
<div class="container">
<div class="row">
<div class="col m7 s12 thin">
<h5 class="header light">Compare With Other Decoupled CMS <span class="indicator"></span></h5>
<p>There are other options in for decoupled CMS. We believe that Contenta CMS provides advantages over its alternatives.</p>
<ul class="collection">
<li class="collection-item">Contenta CMS is fully Free Open Source Software. With a <a href="https://github.com/contentacms/contenta_jsonapi/blob/8.x-3.x/LICENSE.txt">GPL v2.0 license</a>. This means that you have no limitations. No more pricing plans or maximum number of requests.</li>
<li class="collection-item">We have the best content modeling tools in the world, because it's based on Drupal.</li>
<li class="collection-item">You host your Contenta CMS installation how you need. That allows you to choose the best setup for your use case (choose your CDN, hosting provider, etc.).</li>
<li class="collection-item">We provide <acronym title="Free Open Source Software">FOSS</acronym> examples for consumers in different technologies.</li>
<li class="collection-item">Contenta CMS is actively supported by an open community.</li>
</ul>
<p>But this is not just us saying this! Read <a href="https://medium.com/@krynsky/my-headless-decoupled-cms-comparison-matrix-98c926f5378d">an independent comparison</a> between Contenta CMS and other alternatives.</p>
<div class="center">
<a href="https://docs.google.com/spreadsheets/d/1iyW_yxd9rwNV8GAgmDxqN96AlC8fGVxOh4_XjZSoetw/edit#gid=0" class="btn-large waves-effect waves-light grey darken-4">Compare!</a>
</div>
</div>
<div class="col m3 s12 center"><i class="material-icons">compare</i></div>
</div>
</div>
</div>
<div class="section install" id="install">
<div class="container">
<div class="row">
<div class="col s12">
<h5 class="header light">Quick Install <span class="indicator"></span></h5>
<h6 class="header col s12 light">Local development only</h6>
</div>
<div class="col m5 s12">
<p class="video-container"><iframe src="https://www.youtube.com/embed/bqzhgSMO6BM?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe></p>
</div>
<div class="col m7 s12 thin">
<p>The installer needs Composer 1.7 or higher.</p>
<p>The quick installation is intended for local development only. For this to work you will need to have composer installed in your local machine. See get composer for more details. Also, make sure that the sqlite-extension is installed (sudo apt-get install php-sqlite3 in debian/ubuntu).</p>
<pre class="code"><code>
php -r "readfile('https://raw.githubusercontent.com/contentacms/contenta_jsonapi/8.x-2.x/installer.sh');" > contentacms-quick-installer.sh
chmod a+x contentacms-quick-installer.sh
./contentacms-quick-installer.sh
</code></pre>
</div>
</div>
<div class="row">
<div class="col s12">
<h5 class="header light">Installation <span class="indicator"></span></h5>
</div>
<div class="col s12 thin">
<p>The installer needs Composer 1.7 or higher.</p>
<ol>
<li><a href="https://getcomposer.org/" title="Install and Configure Composer">Get Composer</a></li>
<li>
Create a new project using a command like this. This will pull down the installation profile + core + modules, so maybe get a cup of tea:
<pre class="code"><code>
php -r "readfile('https://raw.githubusercontent.com/contentacms/contenta_jsonapi_project/8.x-2.x/scripts/download.sh');" > download-contentacms.sh
chmod a+x download-contentacms.sh
./download-contentacms.sh /path/to/new-dir-for-contenta
</code></pre>
</li>
<li>
After that, copy <code>.env.example</code> into <code>.env</code> and add the database connection details. <strong>NOTE:</strong> it is highly recommended to use <code>.env.local</code> to store your credentials, since that file is ignored by git.
<pre class="code"><code>
# Example .env file.
SITE_MAIL=admin@localhost
ACCOUNT_MAIL=admin@localhost
SITE_NAME='Contenta CMS Demo'
ACCOUNT_NAME=admin
MYSQL_DATABASE=contenta
MYSQL_HOSTNAME=localhost
MYSQL_PORT=3306
MYSQL_USER=contenta
</code></pre>
<pre class="code"><code>
# Example .env.local file.
MYSQL_PASSWORD=contenta
ACCOUNT_PASS=admin
</code></pre>
</li>
<li>
Once you have added your database connection details you can:
<pre class="code"><code>
composer run-script install:with-mysql
</code></pre>
</li>
</ol>
</div>
</div>
</div>
</div>
<div class="section contentajs" id="contentajs">
<div class="container">
<div class="row">
<div class="col s12">
<h5 class="header light">Contenta JS <span class="indicator"></span></h5>
</div>
<div class="col m5 s12">
<p class="video-container"><iframe src="https://www.youtube.com/embed/6bdbqo2tETg?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe></p>
</div>
<div class="col m7 s12 thin">
<p><strong>Contenta JS</strong> is a project that integrates with Contenta CMS to provide an ultra high performing headless CMS. It also provides a nodejs application where to host your Server Side Rendering and custom code integrations.</p>
<p><strong>Contenta CMS</strong> (aka <em>the Drupal part</em>) is designed to serve your project’s content. ContentaJS (aka the node.js part) is designed to serve the requests to your client side applications. Some of those requests will end up requesting data from Contenta CMS, others won’t.</p>
<p>You may need <strong>Contenta JS</strong> because for many reasons <strong>you will end up needing a node.js server for your project anyways. You may as well use an opinionated and optimized starter kit that will solve many of your needs without effort.</p>
<div class="center">
<a href="https://github.com/contentacms/contentajs#readme" class="btn-large waves-effect waves-light grey darken-4">GitHub repo</a>
</div>
</div>
</div>
</div>
</div>
<div class="section help-share" id="help-share">
<div class="container">
<div class="row">
<div class="col m7 s12 thin">
<h5 class="header light">Help Spread the Word <span class="indicator"></span></h5>
<p>Have you created a digital experience with Contenta CMS? We would love to know! We can help promote your project and you can help us showcase the power of Contenta. <a href="https://twitter.com/intent/tweet?screen_name=contentacms">Send us a tweet</a> or a <a href="https://www.drupal.org/user/550110/contact">private message</a> to know about your project.</p>
<p>If you are planning to talk about Contenta CMS at a local event, we have <a href="assets/contenta-makes-your-content-happy.pdf">slide decks</a> and ideas we can share with you.</p>
<div class="center">
<a href="https://twitter.com/intent/tweet?screen_name=contentacms" class="btn-large waves-effect waves-light grey darken-4">Tell us more</a>
</div>
</div>
<div class="col m3 s12 center"><i class="material-icons">share</i></div>
</div>
</div>
</div>
<div class="section demos grey lighten-3" id="demos">
<div class="container">
<div class="row">
<div class="col m4 s12 center"><img src="assets/images/umami.jpg" title="Umami magazine" alt="Umami magazine"></div>
<div class="col m8 s12 thin">
<h5 class="header light">Demos <span class="indicator"></span></h5>
<p>An integral part of Contenta is to provide an out of the box content model and demo content ready for you to start working with it. The demo chosen by the community is a <a href="https://www.drupal.org/node/2818741">recipe magazine</a>.</p>
<p>With this in mind, every demo consumer will implement this recipe magazine site with the goal in mind to compare the different implementations.</p>
</div>
</div>
<div class="row">
<h5 class="header col s12 light">Example Consumers <span class="indicator"></span></h5>
</div>
<div class="row">
<div class="col m6 s12 thin">
<p>Choosing your own front-end technology is one of common reasons to choose a decoupled approach. In a decoupled architecture you can also have multiple front-ends at the same time. Contenta gives you examples on how to build a consumer application in different technologies.</p>
<p>We will implement the <a href="https://www.drupal.org/node/2818741#comment-12122841">same wireframes</a> as the Out of the Box Initiative, so all the demo applications can be compared. Even though all applications will have the same structure, each one will choose their look and feel. Angular may use <a href="https://material.io/guidelines/material-design/introduction.html">material design</a>, elm may use <a href="http://getbootstrap.com/">bootstrap</a>, etc.</p>
</div>
<div class="col m6 s12 thin">
<table>
<thead>
<tr>
<th>Front-end</th>
<th>Status</th>
<th>Example</th>
<th>Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>Angular</td>
<td>Running demo</td>
<td><a href="https://contenta-angular.firebaseapp.com/">Website</a></td>
<td><a href="https://github.com/contentacms/contenta_angular">Repo</a></td>
</tr>
<tr>
<td>Elm</td>
<td>Running demo</td>
<td><a href="https://contenta-elm.firebaseapp.com/">Website</a></td>
<td><a href="https://github.com/contentacms/contenta_jsonapi__elm">Repo</a></td>
</tr>
<tr>
<td>Ember</td>
<td>No demo</td>
<td>No demo</td>
<td><a href="https://github.com/contentacms/contenta_ember">Repo</a></td>
</tr>
<tr>
<td>Ionic </td>
<td>Running demo</td>
<td>Not yet</td>
<td><a href="https://github.com/contentacms/contenta_ionic">Repo</a></td>
</tr>
<tr>
<td>React + Next.js</td>
<td>Running demo</td>
<td><a href="https://contenta-react-next.now.sh/">Website</a></td>
<td><a href="https://github.com/contentacms/contenta_react_next">Repo</a></td>
</tr>
<tr>
<td>Vue.js + Nuxt.js</td>
<td>Running demo</td>
<td><a href="https://contentanuxt.now.sh/">Website</a></td>
<td><a href="https://github.com/contentacms/contenta_vue_nuxt">Repo</a></td>
</tr>
<tr>
<td>Chatbot</td>
<td>Running demo</td>
<td><a href="https://medium.com/@dawehner/im-hungry-but-i-can-t-decide-a-small-chatbot-based-upon-contenta-cms-9f8c0bb1d48f">Blog post</a></td>
<td><a href="https://github.com/contentacms/contenta-bot">Repo</a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col s12 thin">
<p>If you want to contribute to any of the demo apps above or add a new one, join <a href="https://drupal.slack.com/messages/C5A70F7D1">the Slack channel</a> and become part of the project!</p>
</div>
</div>
</div>
</div>
<div class="section development" id="development">
<div class="container">
<div class="row">
<div class="col s12 thin">
<h5 class="header light">Development <span class="indicator"></span></h5>
<p>Join the discussion in the <a href="https://drupal.slack.com/messages/C5A70F7D1">#contenta Slack channel</a>.</p>
<p>For documentation on the development on <code>contenta_jsonapi</code> itself, see <a href="https://contentacms.readthedocs.io/en/latest/development/">docs/development</a>.</p>
</div>
</div>
</div>
</div>
<div class="section presentations grey lighten-3" id="presentations">
<div class="container">
<div class="row">
<h5 class="header col s12 light">Presentations <span class="indicator"></span></h5>
<div class="col l4 m12 thin">
<h6 class="header">Drupal Summer Barcelona</h6>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/gTAvdC3WUOM?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="col l4 m12 thin">
<h6 class="header">Decoupled Dev Days NYC</h6>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/-KiMgk4wx2c?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="col l4 m12 thin">
<h6 class="header">DrupalCon Vienna 2017</h6>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/KKGDIgu3CC8?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<footer class="page-footer cyan">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">About us</h5>
<p class="grey-text text-lighten-4">Contenta is developed by a community passionate about CMS and decoupled architectures. Our main goal is to help everyone succeed in their decoupled Drupal projects.</p>
</div>
<div class="col push-l3 l3 s12">
<h5 class="white-text">Connect</h5>
<ul>
<li><a class="white-text" href="https://github.com/contentacms">Demos</a></li>
<li><a class="white-text" href="http://contentacms.readthedocs.io">Documentation</a></li>
<li><a class="white-text" href="https://drupal.slack.com/messages/C5A70F7D1">Get Involved</a></li>
<li><a class="white-text" href="https://github.com/contentacms">View on GitHub</a></li>
<li><a class="white-text" href="http://twitter.com/contentacms">Follow Us</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made by <a class="cyan-text text-lighten-3" href="https://drupal.slack.com/messages/C5A70F7D1">Humans</a>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
</body>
</html>