Enable categories in blog

Define a variable for splitting the blog posts in categories on the
home page. Add categories instructions to README.md

6 files changed, 101 insertions, 9 deletions

diff --git a/README.md b/README.md
index 31cdf10..106b49d 100644
--- a/README.md
+++ b/README.md
@@ -92,6 +92,46 @@ Markdown). Por ejemplo:
     echo "Aguante texto-plano"
     ```
 
+#### Clasificar los posts en categorias
+
+Este template nos permite clasificar nuestras entradas de blogs en categorías
+o secciones. Por ejemplo, supongamos que vamos a mantener dos categorías: `Blog
+personal` y `Tutoriales`. A la hora de escribir una nueva entrada del blog,
+vamos a especificar la categoría a la cual este pertenece a través del
+parámetro `categories`. Por ejemplo, creamos un post para nuestro `Blog
+personal`:
+
+    ---
+    title: Mi primer posteo
+    layout: post
+    categories: Blog personal
+    excerpt: |
+        Este es un resumen de mi posteo
+    ---
+
+
+Y otro para la sección `Tutoriales`:
+
+    ---
+    title: ¿Cómo usar Jekyll?
+    layout: post
+    categories: Tutoriales
+    excerpt: |
+        Este es mi tutorial
+    ---
+
+No nos olvidemos de editar nuestro `_config.yml`, activando las categorías en
+el home:
+
+```
+# Split the blog posts in categories
+show_categories: true
+```
+
+Cuando construyamos el sitio, nuestro home mostrará todos los posts del blog,
+pero divididos en sus correspondientes categorías.
+
+
 ### Construir el sitio
 
 Una vez que generamos contenido nuevo, vamos a proceder a construir el sitio
diff --git a/_config.yml b/_config.yml
index df12cef..691d429 100644
--- a/_config.yml
+++ b/_config.yml
@@ -11,3 +11,6 @@ show-excerpt: true
 
 # Exclude the following files from being part of the website
 exclude: [Makefile, README.md]
+
+# Split the blog posts in categories
+show_categories: true
diff --git a/_layouts/home.html b/_layouts/home.html
index 654be00..26d255c 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -15,6 +15,25 @@ layout: base
 
   <h1>Blog</h1>
 
+  {% if site.show_categories %}
+  <ul class="categories-list">
+    {% for category in site.categories %}
+        {% capture category_name %}{{ category | first }}{% endcapture %}
+      <li>
+        <h2 class="category">{{ category_name }}</h2>
+        <ul class="posts-list">
+        {% for post in site.categories[category_name] %}
+            <li>
+              <h3><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h3>
+              <p><em>{{ post.date | date: "%Y-%m-%d"}}</em></p>
+              {% if site.show-excerpt %}<p>{{ post.excerpt }}</p>{% endif %}
+            <li>
+        {% endfor %}
+        </ul>
+        </li>
+    {% endfor %}
+  </ul>
+  {% else %}
   <ul class="posts-list">
     {% for post in site.posts %}
     <li>
@@ -24,6 +43,7 @@ layout: base
     </li>
     {% endfor %}
   </ul>
+  {% endif %}
 
   {{ content }}
 </main>
diff --git a/_posts/2021-03-22-mi-entrada-del-blog.md b/_posts/2021-03-22-mi-entrada-del-blog.md
index 313019c..dffa6a1 100644
--- a/_posts/2021-03-22-mi-entrada-del-blog.md
+++ b/_posts/2021-03-22-mi-entrada-del-blog.md
@@ -1,6 +1,7 @@
 ---
 title: Mi primera entrada del blog
 layout: post
+category: Blog personal
 excerpt: |
     Este es un resumen de mi entrada del blog
 ---
diff --git a/_posts/2021-03-27-otra-entrada.md b/_posts/2021-03-27-otra-entrada.md
new file mode 100644
index 0000000..da31f84
--- /dev/null
+++ b/_posts/2021-03-27-otra-entrada.md
@@ -0,0 +1,17 @@
+---
+title: Un tutorial
+layout: post
+category: Tutoriales
+excerpt: |
+    Este es un tutorial
+---
+
+Acá podemos escribir el contenido de mi entrada del blog utilizando
+[Markdown](https://es.wikipedia.org/wiki/Markdown)
+
+Recordá colocar `layout: post` en el header de cada entrada del blog
+y colocar la fecha de publicación en su nombre, por ejemplo:
+
+```
+2021-03-22-un-nombre-sencillo.md
+```
diff --git a/css/style.css b/css/style.css
index 1498a9c..9a3f695 100644
--- a/css/style.css
+++ b/css/style.css
@@ -54,7 +54,7 @@ h3 {
 p {
   font-size: 0.95em;
   line-height: 1.5em;
-  margin-top: 12px;
+  margin-top: 0px;
   margin-bottom: 12px;
 }
 
@@ -165,26 +165,37 @@ header h2 {
 /* Home */
 /* ---- */
 
-ul.posts-list {
+.blog h2,
+.blog h3 {
+}
+
+ul.posts-list,
+ul.categories-list {
   list-style: none;
   padding-left: 0px;
 }
 
-ul.posts-list h2 {
-  margin-top: 10px;
-  margin-bottom: 10px;
+ul.posts-list h2,
+ul.posts-list h3,
+ul.posts-list p {
+  margin-top: 5px;
+  margin-bottom: 5px;
 }
 
 ul.posts-list li {
-  margin-top: 40px;
+  margin-top: 0px;
   margin-bottom: 40px;
 }
 
-ul.posts-list p {
-  margin-top: 10px;
-  margin-bottom: 10px;
+ul.categories-list li {
+  margin-top: 0px;
+  margin-bottom: 60px;
 }
 
+/* ----- */
+/* Posts */
+/* ----- */
+
 .date {
   text-align: right;
 }