Skip to content

Commit 0a13a58

Browse files
hurlatundehurlatunde
committed
added new doc for view
1 parent fa2fd5e commit 0a13a58

File tree

8 files changed

+344
-131
lines changed

8 files changed

+344
-131
lines changed

‎.idea/workspace.xml‎

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

‎_config.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,3 +62,7 @@ owner:
6262
weibo: #username
6363
flickr: #username
6464
codepen: #username
65+
data:
66+
first: Olatunde
67+
last: Owokoniran
68+
country: Nigeria

‎assets/css/style.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2513,4 +2513,12 @@ footer p {
25132513

25142514
.content-36 h2 {
25152515
width: 88%;
2516+
}
2517+
2518+
.highlight {
2519+
padding: 9px 14px;
2520+
margin: 14px 0;
2521+
background-color: #f7f7f9;
2522+
border: 0px solid #e1e1e8;
2523+
border-radius: 4px;
25162524
}

‎assets/img/render.png‎

151 KB
Loading

‎assets/img/server-side.png‎

27.9 KB
Loading

‎documentation-beta/doc.html‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -58,25 +58,18 @@ <h3> SwallowJs Intro </h3>
5858
<!--Build-->
5959
<div id="tutorial_blog_firebase">
6060
<h3>Build a Blog</h3>
61-
<p>Get started with the <strong><a href="/doc/blog">blog tutorial</a></strong> . You’ll learn the use of SwallowJs, and build a blog in the process.</p>
61+
<p>Get started with the blog tutorial for both <a href="/doc/tutorial-firebase"> Firebase </a> and your regular <a href="/doc/tutorial-server-side"> Sever-side </a>. You’ll
62+
learn the use of SwallowJs, and build a blog in the process. </p>
6263
<div class="row" style="padding: 20px 0;">
6364
<div class="col-md-12">
6465
<div class="col-md-6">
6566
<div class="text-center">
6667
<img src="../assets/img/firebase.png" class="img-responsive"/>
67-
<div>
68-
<a href="/doc/tutorial-firebase" class="btn btn-inverse"> Blog build
69-
with cloud
70-
services provider</a>
71-
</div>
7268
</div>
7369
</div>
7470
<div class="col-md-6">
7571
<div class="text-center">
76-
<img src="../assets/img/firebase.png" class="img-responsive"/>
77-
<div>
78-
<a href="#" class="btn btn-danger"> Blog build with server side </a>
79-
</div>
72+
<img src="../assets/img/server-side.png" class="img-responsive" style="margin-top: 15px;width: 100%; padding: 55px;"/>
8073
</div>
8174
</div>
8275
</div>
@@ -87,7 +80,7 @@ <h3>Build a Blog</h3>
8780
<div id="services">
8881
<h3> Services </h3>
8982
<p> Services are the heart of your application. storage and retrieval of your data read more on<a href="/doc/services-firebase"> Firebase services </a> or
90-
read more on <a href="/doc/services-derver-side"> Server Side services </a>
83+
read more on <a href="/doc/services-server-side"> Server Side services </a>
9184
</p>
9285
</div>
9386

‎documentation-beta/tutorial-firebase.html‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,24 +49,40 @@ <h3> SwallowJs Blog Tutorial </h3>
4949
project, and creating enough
5050
application logic to list, add, edit, and delete blog posts.</p>
5151
<br>
52-
<div class="panel panel-default">
53-
<div class="panel-body">
52+
<div class="panel panel-dwefault">
53+
<div class="panel-bowdy">
5454
<p>Here’s what you’ll need:</p>
55+
<br>
5556
<div>
5657
<ol>
57-
<li>Basic Javascript knowledge. but fear not if you’re a procedural fan.
58-
</li>
59-
<li>Basic Javascript knowledge. but fear not if you’re a procedural fan.
58+
<li>IDE (Sublime text, Webstorm or Atom)</li>
59+
<li>
60+
Thing to know to use SwallowJs
61+
<ol>
62+
<li> Basic Javascript knowledge. but fear not if you’re a procedural fan. </li>
63+
<li> A good understanding of Html/css </li>
64+
<li> A basic understanding of javascript </li>
65+
<li> A basic understanding of Web components </li>
66+
</ol>
6067
</li>
6168
</ol>
6269
</div>
6370

6471
</div>
6572
</div>
6673

74+
<!--Browser Compatibility-->
75+
<!--Desktop-->
76+
<!--Chrome: (Current - 1) and Current-->
77+
<!--Edge: (Current - 1) and Current-->
78+
<!--Firefox: (Current - 1) and Current-->
79+
<!--Internet Explorer: 9+-->
80+
<!--Safari: (Current - 1) and Current-->
81+
<!--Opera: Current-->
82+
6783
<p>Check here for help with Jquery <br>
6884
<code>http://lab.abhinayrathore.com/jquery-standards/</code>
69-
<code>https://code.tutsplus.com/tutorials/14-helpful-jquery-tricks-notes-and-best-practices--net-14405</code>
85+
<!--<code>https://code.tutsplus.com/tutorials/14-helpful-jquery-tricks-notes-and-best-practices&#45;&#45;net-14405</code>-->
7086
<code>http://tutorialzine.com/2011/06/15-powerful-jquery-tips-and-tricks-for-developers/</code>
7187
</p>
7288
</div>
@@ -272,6 +288,14 @@ <h3> Firebase Database Configuration </h3>
272288

273289
<p>And also head to DocumentRoot/app/index.html uncomment <code>line 28</code>, This is to help include Firebase into your project. </p>
274290
<p>Now that you made connection to</p>
291+
292+
Deploy To An HTTPS Host
293+
The Firebase commands run in this example are:
294+
295+
firebase login to authenticate with Firebase
296+
firebase init to initialize our Firebase project
297+
firebase deploy to upload our application to Firebase
298+
275299
</div>
276300

277301
</div>

‎documentation-beta/views.html‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,134 @@ <h3 style="font-size: 37px;margin-bottom: 5px;"> Views </h3>
6060
</div>
6161

6262
</div>
63+
<div id="layout">
64+
<h3> Declare Layout </h3>
65+
<p> Layout in SwallowJs has to be declared in <code>config.js</code> under the variable of
66+
layout, each layout has to be in the layout object array </p>
67+
{% highlight html %}
68+
var SwallowJs = {
69+
'main_container': 'swallow',
70+
};
71+
72+
// Templates
73+
var layout = {
74+
'template_name': 'layouts/template_name.html',
75+
};
76+
77+
var container = $('#' + CONFIG.private('main_container'));
78+
var template_name = $('#' + CONFIG.layoutTemplate('template_name'));
79+
{% endhighlight %}
80+
</div>
81+
<div id="templates">
82+
<h3> View Templates </h3>
83+
<p> View files are stored in <code>layouts/</code> folder, template renders it with
84+
data and helper functions and returns the HTML in the template, Quick example of how to use
85+
SwallowJS templates below</p>
86+
<img src="../assets/img/render.png" class="img-responsive" style="padding: 44px 0;"/>
87+
</div>
88+
<div id="extending">
89+
<h3> Extending Views </h3>
90+
<p> Below is a quick example how to use mustache.js in swalllowJs </p>
91+
<p>Data:</p>
92+
{% highlight html %}
93+
data = {
94+
"name": {
95+
"first": "John",
96+
"last": "Foo"
97+
},
98+
"country": "Nigeria"
99+
}
100+
{% endhighlight %}
101+
<p>Template:</p>
102+
<figure class="highlight">
103+
<pre>
104+
&#123;&#123; #data &#125;&#125; <br>
105+
* &#123;&#123; name.first &#125;&#125; &#123;&#123; name.last &#125;&#125; <br>
106+
* &#123;&#123; #age &#125;&#125; <br>
107+
&#123;&#123; /data &#125;&#125; <br>
108+
</pre>
109+
</figure>
110+
<p>Output:</p>
111+
{% highlight html %}
112+
* John Foo
113+
* Nigeria
114+
{% endhighlight %}
115+
<br>
116+
<h4> Statement </h4>
117+
<p>A statement begins with a pound and ends with a slash. That is, {{#data}} begins a person section, while {{/data}} ends it.</p>
118+
<p> The behavior of the statement is determined by the value of the key <strong>False Values or Empty Lists</strong> </p>
119+
120+
<p>If the data key does not exist, or exists and has a value of null, undefined, false, 0, or NaN, or is an empty string or an empty list, the block will not be rendered.</p>
121+
<p>Data:</p>
122+
{% highlight html %}
123+
data = {
124+
"person": false
125+
}
126+
{% endhighlight %}
127+
<p>Template:</p>
128+
129+
<figure class="highlight">
130+
<pre>
131+
Shown.<br>
132+
&#123;&#123; #data &#125;&#125; <br>
133+
Never shown! <br>
134+
&#123;&#123; /data &#125;&#125; <br>
135+
</pre>
136+
</figure>
137+
<p>Output:</p>
138+
{% highlight html %}
139+
Shown.
140+
{% endhighlight %}
141+
</div>
142+
<br>
143+
<h4> More Example </h4>
144+
<p>If the value of a section variable is a function, it will be called in the context of the current item in the list on each iteration.</p>
145+
<p>View:</p>
146+
{% highlight html %}
147+
data = {
148+
"beatles": [
149+
{ "firstName": "John", "lastName": "Lennon" },
150+
{ "firstName": "Paul", "lastName": "McCartney" },
151+
{ "firstName": "George", "lastName": "Harrison" },
152+
{ "firstName": "Ringo", "lastName": "Starr" }
153+
],
154+
"name": function () {
155+
return this.firstName + " " + this.lastName;
156+
}
157+
}
158+
{% endhighlight %}
159+
<p>Template:</p>
160+
{% highlight html %}
161+
{{#data.beatles}}
162+
* {{name}}
163+
{{/data.beatles}}
164+
{% endhighlight %}
165+
<p>Output:</p>
166+
{% highlight html %}
167+
* John Lennon
168+
* Paul McCartney
169+
* George Harrison
170+
* Ringo Starr
171+
{% endhighlight %}
172+
<br>
173+
<h4> Inverted Sections </h4>
174+
<p>An inverted section opens with <code>{{^section}}</code> instead of <code>{{#section}}</code>. The block of an inverted section is rendered only if the value of that section's tag is null, undefined, false, falsy or an empty list.</p>
175+
<p>View:</p>
176+
{% highlight html %}
177+
{
178+
"data": []
179+
}
180+
{% endhighlight %}
181+
<p>Template:</p>
182+
{% highlight html %}
183+
{{#data}} **{{name}}** {{/data}}
184+
{{^data}}No Data :({{/data}}
185+
{% endhighlight %}
186+
<p>Output:</p>
187+
{% highlight html %}
188+
No Data :(
189+
{% endhighlight %}
190+
63191
</div>
64192
</div>
65193
<div class="col-sm-3">
@@ -69,6 +197,9 @@ <h3 style="font-size: 37px;margin-bottom: 5px;"> Views </h3>
69197
<br>
70198
<ul id="navbar-doc-side">
71199
<li class=""><a href="#view"> Views </a></li>
200+
<li class=""><a href="#layout"> Layout </a></li>
201+
<li class=""><a href="#templates"> Extending Views </a></li>
202+
<li class=""><a href="#extending"> Templates </a></li>
72203
<li class=""><a href="#top" style="font-size: 13px;"> Back to top </a></li>
73204
</ul>
74205
</div>

0 commit comments

Comments
 (0)