First post, authors, tags

Author: Arcadio Garcia Salvadores

README.md

@@ -1,2 +1,2 @@
 # ClockworkBlog
-The official blog for the CLockwork Platform
+The official blog for the Clockwork Platform

_config.yml

@@ -12,7 +12,7 @@ description: > # this means to ignore newlines until "baseurl:"
   The official blog for the Clockwork game development platform. 
   Learn how to make awesome modular multiplatform games using JavaScript.
 baseurl: "" # the subpath of your site, e.g. /blog
-url: "http://clockwork.js.org/" # the base hostname & protocol for your site
+url: "https://clockworkdev.github.io/ClockworkBlog" # the base hostname & protocol for your site
 twitter_username: clockworkjs
 github_username:  ClockworkDev
 

_data/authors.yml

@@ -0,0 +1,8 @@
+arcadio:
+    name: Arcadio Garcia
+    pic: https://avatars0.githubusercontent.com/u/9416356?v=3&s=460
+    twitter: arcadio_g_s
+silvia:
+    name: Silvia Barbero
+    pic: https://avatars0.githubusercontent.com/u/9416356?v=3&s=460
+    twitter: SilviShinyStar

_includes/header.html

@@ -19,8 +19,8 @@
       </a>
 
       <div class="trigger">
-        {% for my_page in site.pages %} {% if my_page.title %}
-        <a class="page-link" href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a> {% endif %} {% endfor
+        {% for my_page in site.pages %} {% if my_page.title %} {% if my_page.showHeader %}
+        <a class="page-link" href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a> {% endif %} {% endif %}  {% endfor
         %}
         <a class="page-link" href="http://clockwork.js.org/">Clockwork</a>
       </div>

_layouts/post.html

@@ -1,15 +1,26 @@
 ---
 layout: default
 ---
+{% assign author = site.data.authors[page.author] %}
 <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
 
   <header class="post-header">
     <h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
-    <p class="post-meta"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%b %-d, %Y" }}</time>{% if page.author %} • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span>{% endif %}</p>
+    <p class="post-meta">
+      <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%b %-d, %Y" }}</time>{% if page.author %}
+       <span itemprop="author" itemscope itemtype="http://schema.org/Person"><img src="{{ author.pic }}" style="height:40px;border-radius:20px;margin-left:30px;"/> <a href="{{ site.baseurl }}/authors#{{ author.name }}"><span itemprop="name">{{ author.name }}</span></a> (<a href="http://twitter.com/{{ author.twitter }}">@{{ author.twitter }}</a>)</span>{%
+      endif %}</p>
   </header>
 
   <div class="post-content" itemprop="articleBody">
     {{ content }}
   </div>
 
-</article>
+  <div class="categories">
+    Tags:
+    {% for category in page.categories %}
+      <a href="{{ site.baseurl }}/tags#{{ category }}"> {{ category }} </a>
+    {% endfor %}
+  </div>
+
+</article>

_posts/2017-06-08-welcome-to-jekyll.markdown

@@ -0,0 +1,54 @@
+---
+layout: post
+title:  "Shoot 'em up tutorial: 1 - Getting started"
+date:   2017-6-10 18:45:11 +0200
+author: arcadio
+categories: tutorial shootemup
+heropic: /pictures/shootemup0.png
+---
+
+It is time to get our hands dirty and develop our first Clockwork game! Don’t worry if you have no previous experience with JavaScript and/or game development, this tutorial will guide you through every step.
+
+We are going to develop the “ShootEmUp” game you can find in the Clockwork demos, if you get lost remember that you can find the full source code of the game at [the git repo containing the demos](https://github.com/ClockworkDev/ClockworkDemos/tree/master/ShootEmUp) and more information at [the online documentation ](http://clockwork.js.org/documentation.html). 
+
+First of all, you will need to get the Clockwork Runtime and tools, [here you can find instructions for doing so](http://clockwork.js.org/getstarted.html).
+
+Once you are ready open Visual Studio Code and go to `File > Open folder` and select an empty folder, where you will store your project. Then, press F1 to open the VS Code command window and execute `Create Clockwork Project` (start writing the command and it will autosuggest it). It will prompt you for a project name (be creative!) and create a starter project.
+
+You can now try to deploy your project to the Clockwork Runtime (press F1 > `Deploy Clockwork Project`), and if you have everything set up correctly you should see how the Clockwork Runtime launches and the game is installed (If you run this sample game, a cute dog will greet you!). If something fails, this means you might have missed some installation step, so please go back and check everything.
+
+Now, it is time to get rid of the unnecessary assets that came with the starter project. Feel free to delete `dog.png` and edit some files.
+
+![Deleting a file in VS Code]({{ site.baseurl }}/pictures/shootemup1.png)
+
+In levels.xml, delete this line:
+
+{% highlight xml %}
+<object name="JakeTheDog" type="talkingDog" x="200" y="200" ></object>
+{% endhighlight %}
+
+In spritesheets.xml, delete the dog spritesheet so you are left with this:
+
+{% highlight xml %}
+<?xml version="1.0" encoding="utf-8"?>
+<spritesheets>
+</spritesheets>
+{% endhighlight %}
+
+
+In components.js, delete the dog component so you are left with this:
+{% highlight js %}
+CLOCKWORKRT.components.register([
+]);
+{% endhighlight %}
+
+
+Next, we will download the game assets. Open the folder with the file explorer and replace tileIcon.png with [the image found here](https://raw.githubusercontent.com/ClockworkDev/ClockworkDemos/master/ShootEmUp/gameFiles/tileIcon.png)  and copy [the image found here](https://raw.githubusercontent.com/ClockworkDev/ClockworkDemos/master/ShootEmUp/gameFiles/images/spaceships.png) inside the `images` folder, with the name `spaceships.png`. Feel free to modify this pictures with your favorite image editor to give your game a unique feel!
+
+Now, go to `manifest.json` and make some changes:
+
+  - Change the background color to `#000` (black)
+  - Set both the engine fps (frames per second) and the animation frames per second to `30`. This will instruct the engine to execute your game logic and redraw the game 30 times each second.
+
+
+We are now ready to start working in our game, keep reading [part 2 of this tutorial]({{ site.baseurl }}{% post_url 2017-6-10-shootemup2 %}) to learn how to implement the player's ship!

_posts/2017-6-10-shootemup1.1.md

@@ -0,0 +1,9 @@
+---
+layout: post
+title:  "Shoot 'em up tutorial: 2 - The player's ship"
+date:   2017-6-10 18:46:11 +0200
+author: arcadio
+categories: tutorial shootemup
+heropic: /pictures/shootemup0.png
+---
+

_posts/2017-6-10-shootemup2.md

@@ -204,3 +204,20 @@ pre {
         }
     }
 }
+
+
+
+.postLink{
+    display:block;
+    border: 1px black solid;
+}
+
+.postLink img{
+    width:200px;
+}
+
+.postLink .details{
+    vertical-align: middle;
+    display:inline-block;
+    margin-left:20px;
+}

_sass/_base.scss

@@ -0,0 +1,36 @@
+---
+layout: page
+title: Authors
+permalink: /authors/
+---
+
+{% for author in site.data.authors  %}
+
+ <a href="http://twitter.com/{{ author[1]["twitter"] }}"> 
+  <h3 id="{{ author[1]["name"] }}">Posts by <img src="{{ author[1]["pic"] }}" style="height:60px;border-radius:30px;"/> <b>{{ author[1]["name"] }}</b></h3>
+ </a>
+   
+  {% assign posts = site.posts | where: "author", author[0] %}
+<ul class="post-list"> 
+    {% for post in posts %}
+               <li>
+      <div class="postLink">
+        <img src="{{ site.baseurl }}{{ post.heropic }}" />
+        <div class="details">
+          <h2>
+            <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
+          </h2>
+          <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
+          <div>
+              Tags:
+                {% for category in post.categories %}
+                  <a href="{{ site.baseurl }}/tags#{{ category }}"> {{ category }} </a>
+                {% endfor %}
+          </div>
+        </div>
+      </div>
+    </li>
+    {% endfor %}
+    </ul>
+
+{% endfor %}

authors.html

@@ -8,16 +8,26 @@ <h1 class="page-heading">Posts</h1>
 
   <ul class="post-list">
     {% for post in site.posts %}
-      <li>
-        <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
-
-        <h2>
-          <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
-        </h2>
-      </li>
+    <li>
+      <div class="postLink">
+        <img src="{{ site.baseurl }}{{ post.heropic }}" />
+        <div class="details">
+          <h2>
+            <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
+          </h2>
+          <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
+          <div>
+              Tags:
+                {% for category in post.categories %}
+                  <a href="{{ site.baseurl }}/tags#{{ category }}"> {{ category }} </a>
+                {% endfor %}
+          </div>
+        </div>
+      </div>
+    </li>
     {% endfor %}
   </ul>
 
-  <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>
+  <p class="rss-subscribe">subscribe <a href="{{ " /feed.xml " | prepend: site.baseurl }}">via RSS</a></p>
 
-</div>
+</div>

index.html

@@ -0,0 +1,32 @@
+---
+layout: page
+title: News
+permalink: /news/
+showHeader: true
+---
+
+The latest news related to the Clockwork platform:
+
+<ul class="post-list"> 
+  {% for post in site.posts %}
+  {% if post.categories contains "news" %}
+  <li>
+      <div class="postLink">
+        <img src="{{ site.baseurl }}{{ post.heropic }}" />
+        <div class="details">
+          <h2>
+            <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
+          </h2>
+          <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
+          <div>
+              Tags:
+                {% for category in post.categories %}
+                  <a href="{{ site.baseurl }}/tags#{{ category }}"> {{ category }} </a>
+                {% endfor %}
+          </div>
+        </div>
+      </div>
+    </li>
+  {% endif %}
+  {% endfor %}
+</ul>

news.html

@@ -0,0 +1,32 @@
+---
+layout: page
+title: Packages
+permalink: /packages/
+showHeader: true
+---
+
+These posts will teach you how to use some of the most popular Clockwork packages:
+
+<ul class="post-list"> 
+  {% for post in site.posts %}
+  {% if post.categories contains "packages" %}
+ <li>
+      <div class="postLink">
+        <img src="{{ site.baseurl }}{{ post.heropic }}" />
+        <div class="details">
+          <h2>
+            <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
+          </h2>
+          <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
+          <div>
+              Tags:
+                {% for category in post.categories %}
+                  <a href="{{ site.baseurl }}/tags#{{ category }}"> {{ category }} </a>
+                {% endfor %}
+          </div>
+        </div>
+      </div>
+    </li>
+  {% endif %}
+  {% endfor %}
+</ul>

news.md

@@ -0,0 +1,33 @@
+---
+layout: page
+title: Tags
+permalink: /tags/
+---
+{% for category in site.categories %}
+  <h3 id="{{ category | first }}">Posts tagged <b>{{ category | first }}</b></h3> 
+<ul class="post-list"> 
+    {% for posts in category %}
+      {% for post in posts %}
+      {% if post.title %}
+ <li>
+      <div class="postLink">
+        <img src="{{ site.baseurl }}{{ post.heropic }}" />
+        <div class="details">
+          <h2>
+            <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
+          </h2>
+          <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
+          <div>
+              Tags:
+                {% for category in post.categories %}
+                  <a href="{{ site.baseurl }}/tags#{{ category }}"> {{ category }} </a>
+                {% endfor %}
+          </div>
+        </div>
+      </div>
+    </li>
+      {% endif %}
+      {% endfor %}
+    {% endfor %}
+    </ul>
+{% endfor %}