[ENGBLOG-3] Add categories to articles (#10)

* [ENGBLOG-3] Add categories to articles

* Remove unnecessary dependencies

* Disable Vale for catchphrase in about.md

* Improve navigation CSS

* Project clean up

Author: robinsonzimmermann

Gemfile

@@ -15,7 +15,7 @@ gem "minima", "~> 2.5"
 # gem "github-pages", group: :jekyll_plugins
 # If you have any plugins, put them here!
 group :jekyll_plugins do
-  gem "jekyll-feed", "~> 0.12"
+  gem "jekyll-category-pages"
 end
 
 # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem

Gemfile.lock

@@ -63,6 +63,9 @@ GEM
       rouge (~> 3.0)
       safe_yaml (~> 1.0)
       terminal-table (~> 2.0)
+    jekyll-category-pages (1.1.1)
+      jekyll (~> 4.0)
+      jekyll-paginate (~> 1.1, >= 1.0.0)
     jekyll-feed (0.15.1)
       jekyll (>= 3.7, < 5.0)
     jekyll-gist (1.5.0)
@@ -178,7 +181,7 @@ PLATFORMS
 DEPENDENCIES
   bootstrap (~> 5.0.0.beta3)
   jekyll (~> 4.2.0)
-  jekyll-feed (~> 0.12)
+  jekyll-category-pages
   jekyll_asset_pipeline (~> 0.6.2)
   minima (~> 2.5)
   minimal-mistakes-jekyll

_config.yml

@@ -19,14 +19,18 @@
 # in the templates via {{ site.myvariable }}.
 
 title: Backbase Engineering
-email: your-email@example.com
 description: >- # this means to ignore newlines until "baseurl:"
   Backbase is a global fintech company creating the best digital banking solutions on the planet.
   We are a young-spirited, diverse (45+ nationalities), fast-growing and leading company in our niche.
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "https://backbase.github.io" # the base hostname & protocol for your site, e.g. http://example.com
-twitter_username: jekyllrb
-github_username:  jekyll
+
+categories:
+  - Backend
+  - Frontend
+  - Mobile
+  - DevOps
+  - Architecture
 
 # Build settings
 theme: minimal-mistakes-jekyll
@@ -37,6 +41,13 @@ footer_scripts:
 atom_feed:
   hide: true
 
+plugins:
+  - jekyll-category-pages
+
+permalink: /:year/:month/:day/:title
+
+category_layout: category.html
+
 footer:
   links:
     - label: YouTube

_data/navigation.yml

@@ -1,7 +1,7 @@
 # main links links
 main:
-  - title: "Blog"
-    url: /
+  - title: "Categories"
+    id: categories
   - title: "About"
     url: /about
   - title: "Jobs"

_includes/archive-single.html

@@ -10,7 +10,7 @@
   {% assign title = post.title %}
 {% endif %}
 
-<div class="grid__item col-12 {% if include.type == 'grid' %}col-md{% if include.columns %}-{{ 12 | divided_by: include.columns }}{% endif %}{% endif %} mb-4">
+<div class="grid__item col-12 {% if include.type == 'grid' %}{% if include.class %}{{ include.class }}{% else %}col-md{% endif %}{% endif %} mb-4">
   <article class="archive__item card" itemscope itemtype="https://schema.org/CreativeWork">
     {% if include.type == "grid" and teaser %}
       <div class="archive__item-teaser">

_includes/footer.html

@@ -37,4 +37,3 @@
 
 <div class="page__footer-copyright">&copy; {{ site.time | date: '%Y' }} {{ site.name | default: site.title }}. {{ site.data.ui-text[site.locale].powered_by | default: "Powered by" }} <a href="https://jekyllrb.com" rel="nofollow">Jekyll</a> &amp; <a href="https://mademistakes.com/work/minimal-mistakes-jekyll-theme/" rel="nofollow">Minimal Mistakes</a>.</div>
 
-{% include scripts.html %}

_includes/head.html

@@ -25,9 +25,27 @@
     <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
       <ul class="navbar-nav">
         {%- for item in site.data.navigation.main -%}
-          <li class="nav-item">
-            <a class="nav-link" href="{{ item.url | relative_url }}"{% if item.description %} title="{{ item.description }}"{% endif %} {% if item.external %}target="_blank"{% endif %}>{{ item.title }}</a>
-          </li>
+          {% if item.id == 'categories' %}
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" id="navbarCategoriesDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                <span>{{ item.title }}</span>
+              </a>
+              <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarCategoriesDropdownMenuLink">
+                {%- for category in site.categories %}
+                  {% assign category_name = category | first %}
+                  <a class="nav-link" href="/{{ site.category_path | default: 'category' }}/{{ category_name | slugify }}">
+                    <span>{{ category_name }}</span>
+                  </a>
+                {% endfor %}
+              </ul>
+            </li>
+          {% else %}
+            <li class="nav-item">
+              <a class="nav-link" href="{{ item.url | relative_url }}"{% if item.description %} title="{{ item.description }}"{% endif %} {% if item.external %}target="_blank"{% endif %}>
+                <span>{{ item.title }}</span>
+              </a>
+            </li>
+          {% endif %}
         {%- endfor -%}
       </ul>
     </div>