Add the 'generators' for categories and tags

_config.yml

@@ -29,7 +29,7 @@ gitlab_username:  foo-dogsquared
 linkedin_username: gabriel-arazas
 twitter_username: foo_dogsquared
 paginate: 10
-paginate_path: '/page:num/'
+paginate_path: 'page/:num/'
 
 # Enabling Disqus
 disqus:
@@ -48,15 +48,27 @@ pinpost: ["A Freebie's Resource List (Mostly Related to Programming)"]
 
 google_analytics: UA-126718538-1
 
+collections:
+  generators:
+    output: true
+    permalink: data/:name
+
 # Default settings
 defaults:
   -
     scope:
-      path: ""
+      path: "_posts"
       type: "posts"
     values:
       permalink: posts/:title
+      layout: post
       comments: true
+  -
+    scope:
+      path: "_generators"
+      type: "generators"
+    values:
+      layout: generator
 
 # Exclude from processing.
 # The following items will not be processed, by default. Create a custom list

_generators/categories.md

@@ -0,0 +1,4 @@
+---
+data: categories
+title: Categories
+---

_generators/tags.md

@@ -0,0 +1,4 @@
+---
+data: tags
+title: Tags
+---

_includes/libraries.html

@@ -1,2 +1,14 @@
 <!-- Mathjax -->
 <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML"></script>
+<script type="text/x-mathjax-config">
+    MathJax.Hub.Config({
+      tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]},
+      CommonHTML: {
+        scale: 100,
+        minScaleAdjust: 40,
+        linebreaks: {
+          automatic: true, 
+          width: "container"
+      }}
+    });
+</script>

_includes/post_meta.html

@@ -1,18 +1,21 @@
 <p class="post-meta">
+    {%- assign page = include.page -%}
+    {%- assign include_link = include.include_link -%}
     <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
-            <img src="{{ 'assets/main/icons/calendar.svg' | relative_url }}" style="width: 1.5em; height: 1.5em">
+        <img src="{{ 'assets/main/icons/calendar.svg' | relative_url }}" class="post-meta-icons">
         {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
         <span title="{{ page.date }}">{{ page.date | date: date_format }}</span>
     </time>
 
     <span class="reading-minutes" style="margin-left: 1.25em">
-            <img src="{{ 'assets/main/icons/time-clock.svg' | relative_url }}" style="width: 1.5em; height: 1.5em;"> <span class="no-of-mins">{{ page.content | number_of_words }}</span> minutes
+        <img src="{{ 'assets/main/icons/time-clock.svg' | relative_url }}" class="post-meta-icons"><span class="no-of-mins">{{ page.content | number_of_words }}</span> minutes
     </span>
 
     {%- if page.categories -%}
     <span class="post-category" style="margin-left: 1.25em">
-          <img src="{{ 'assets/main/icons/categories.svg' | relative_url }}" style="width: 1.5em; height: 1.5em;">
+        <img src="{{ 'assets/main/icons/categories.svg' | relative_url }}" class="post-meta-icons">
-          {{ page.categories }}  
+        {%- if include_link -%}<a href="{{ site.baseurl }}/data/categories#{{ page.categories }}">{{ page.categories }}</a>
+        {%- else -%}<span>{{ page.categories }}</span>{%- endif -%}
     </span>
     {%- endif -%}
 

_layouts/generator.html

@@ -0,0 +1,57 @@
+---
+layout: default
+---
+
+{%- if content -%}
+    {{ content }}
+{%- endif -%}
+
+<!-- 
+    CREDITS to codinfox for this code
+    https://codinfox.github.io/dev/2015/03/06/use-tags-and-categories-in-your-jekyll-based-github-pages/
+ -->
+{%- if page.data -%}
+    {% assign page_data = page.data %}
+    {% assign rawdata = "" %}
+    {% for post in site.posts %}
+        {% assign tdata = post[page_data] | join:'|' | append:'|' %}
+        {% assign rawdata = rawdata | append:tdata %}
+    {% endfor %}
+    {% assign rawdata = rawdata | split:'|' | sort %}
+
+    {% assign data = "" %}
+    {% for datum in rawdata %}
+        {% if datum != "" %}
+            {% if data == "" %}
+                {% assign data = datum | split:'|' %}
+            {% endif %}
+            {% unless data contains datum %}
+                {% assign data = data | join:'|' | append:'|' | append:datum | split:'|' %}
+            {% endunless %}
+        {% endif %}
+    {% endfor %}
+
+<div class="keyword__grid">
+    {% for datum in data %}<a class="keywords" href="#{{ datum | slugify }}"> {{ datum }} </a>{% endfor %}
+</div>
+
+{% for datum in data %}
+<div class="datum__post_list">
+    <h2 id="{{ datum | slugify }}">{{ datum }}</h2>
+    <ul>
+    {% for post in site.posts %}
+    {% if post[page_data] contains datum %}
+    <li>
+        <h3>
+            <a href="{{site.url}}{{site.baseurl}}{{ post.url }}">
+                {{ post.title }}
+            </a>
+            <small>{{ post.date | date_to_string }}</small>
+        </h3>
+    </li>
+    {% endif %}
+    {% endfor %}
+    </ul>
+</div>
+{% endfor %}
+{%- endif -%}

_layouts/home.html

@@ -23,32 +23,7 @@ layout: default
     {% for post in paginator.posts %}
     <div class="home-post">
       <h2><a href="{{ post.url | relative_url }}" class="post-link">{{ post.title }}</a></h2>
-      <p class="post-meta">
+      {%- include post_meta.html page=post include_link=true -%}
-        <time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}" itemprop="datePublished">
-            <img src="{{ 'assets/main/icons/calendar.svg' | relative_url }}" style="width: 1.5em; height: 1.5em">
-            {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
-            <span title="{{ post.date }}"> {{ post.date | date: date_format }}</span>
-        </time>
-
-        <span class="reading-minutes" style="margin-left: 1.25em">
-            <img src="{{ 'assets/main/icons/time-clock.svg' | relative_url }}" style="width: 1.5em; height: 1.5em;"> <span class="no-of-mins">{{ post.content | number_of_words }}</span> minutes
-        </span>
-
-        {%- if post.categories -%}
-        <span class="home-post-category" style="margin-left: 1.25em">
-          <img src="{{ 'assets/main/icons/categories.svg' | relative_url }}" style="width: 1.5em; height: 1.5em;">
-          {{ post.categories }}  
-        </span>
-        {%- endif -%}
-
-        {%- if post.updatedOn -%}
-        <span class="dt-updated" style="margin-left: 1.25em">
-          <img src="{{ 'assets/main/icons/update.svg' | relative_url }}" style="width: 1.5em; height: 1.5em;">
-          {{ post.updatedOn }}
-        </span>
-        {%- endif -%}
-        
-      </p>
     </div>
     {% endfor %}
     <script>

_layouts/post.html

@@ -6,7 +6,7 @@ layout: default
   <header class="post-header">
     <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}{% if page.subtitle %}: <span class="post-subtitle">{{ page.subtitle | escape }}</span>{% endif %}
     </h1>
-    {%- include post_meta.html -%}
+    {%- include post_meta.html page=page include_link=false -%}
   </header>
 
   <div class="post-content e-content" itemprop="articleBody">
@@ -23,7 +23,7 @@ layout: default
   <div class="post-tags">
     <img src="{{ 'assets/main/icons/tag.svg' | relative_url }}" style="width: 2em; height: 2em">
     {% for tag in page.tags %}
-    <a class="link-tag" href="{{site.baseurl}}/tags/#{{tag|slugize}}">{{tag}}</a>
+    <a class="link-tag" href="{{site.baseurl}}/data/tags#{{tag|slugize}}">{{tag}}</a>
     {% unless forloop.last %}&nbsp;{% endunless %}
     {% endfor %}
   </div>

_layouts/tags.html

@@ -1,24 +0,0 @@
----
-layout: page
-permalink: /tags/
-title: tags
----
-
-
-<div id="archives">
-{% for tag in site.tags %}
-  <div class="archive-group">
-    {% capture tag_name %}{{ tag | first }}{% endcapture %}
-    <div id="#{{ tag_name | slugize }}"></div>
-    <p></p>
-    
-    <h3 class="tag-head">{{ tag_name }}</h3>
-    <a name="{{ tag_name | slugize }}"></a>
-    {% for post in site.tags[tag_name] %}
-    <article class="archive-item">
-      <h4><a href="{{ site.baseurl }}{{ post.url }}">{{post.title}}</a></h4>
-    </article>
-    {% endfor %}
-  </div>
-{% endfor %}
-</div>

_sass/_custom.scss

@@ -3,15 +3,9 @@ html {
     scroll-behavior: smooth
 }
 
-a,
-a:hover,
-a:visited {
-    color: $light-brown; // Specified settings for the headers in 'post.html'
-}
-
 blockquote {
     font-family: "Georgia", $base-font-family;
-    border-left: $brown solid 5px;
+    border-left: $brand-color solid 5px;
     color: $grey-color-dark;
     font-style: italic;
     padding: 1em;
@@ -50,7 +44,7 @@ ul.social-media-list > li, #list-container > ul > li {
 // Table custom properties
 table:not(.rouge-table) {
     th {
-        background: linear-gradient(to bottom, lighten($brown, 25%), $light-brown);
+        background: linear-gradient(to bottom, lighten($brand-color, 25%), $brand-color_l);
         color: $super-platinum;
     }
     tr {
@@ -59,11 +53,11 @@ table:not(.rouge-table) {
             color: $text-color;
         }
         &:nth-child(odd) {
-            background: linear-gradient(to right, $dark-brown, $brown);
+            background: linear-gradient(to right, $brand-color_d, $brand-color);
             color: $super-platinum;
         }
         &:nth-child(even) {
-            background: linear-gradient(to right, $dark-brown, $light-brown);
+            background: linear-gradient(to right, $brand-color_d, $brand-color_l);
             color: $super-platinum;
         }
     }
@@ -100,9 +94,10 @@ figure.highlight {
     }
 }
 
-// Mathjax
+.mathjax {
-.mjx-chtml {
+    &-text {
-    font-size: 1.4em !important;
+        font-family: "Georgia", $base-font-family;
+    }
 }
 
 // custom properties for several layout items

_sass/custom_elems/_pinned_posts.scss

@@ -1,6 +1,6 @@
 #pinned-section {
-    background: linear-gradient(75deg, $dark-brown, $brown, $light-brown);
+    background: linear-gradient(75deg, $brand-color_d, $brand-color, $brand-color_l);
-    border: $brown 4px solid;
+    border: $brand-color 4px solid;
     border-top: 0;
     border-bottom: 0;
     color: white;

_sass/custom_layout/_footer.scss

@@ -1,5 +1,5 @@
 .site-footer {
-    background: linear-gradient(75deg, $dark-brown, $brown, $light-brown);
+    background: linear-gradient(75deg, $brand-color_d, $brand-color, $brand-color_l);
     border-top: 1px solid $grey-color-light;
     color: $platinum;
     padding: $spacing-unit 0;
@@ -48,7 +48,7 @@
         margin: 0;
     }
 
-    a {
+    a, a:hover, a:visited {
         color: $footer-link;
     }
 

_sass/custom_layout/_header.scss

@@ -1,6 +1,6 @@
 .site-header {
-    background: linear-gradient(75deg, $dark-brown, $brown, $light-brown);
+    background: linear-gradient(75deg, $brand-color_d, $brand-color, $brand-color_l);
-    border-top: 5px solid $dark-brown;
+    border-top: 5px solid $brand-color_d;
     border-bottom: 1px solid $grey-color-light;
     color: $super-platinum;
 }

_sass/minima.scss

@@ -12,7 +12,10 @@ $spacing-unit:     30px !default;
 
 $text-color:       #111 !default;
 $background-color: #fdfdfd !default;
-$brand-color:      #2a7ae2 !default;
+
+$brand-color:      #b3411d !default;
+$brand-color_l:      lighten($brand-color, 10%) !default;
+$brand-color_d:      darken($brand-color, 20%) !default;
 
 $grey-color:       #504f4f !default;
 $grey-color-light: lighten($grey-color, 40%) !default;
@@ -27,11 +30,6 @@ $on-palm:          600px !default;
 $on-laptop:        800px !default;
 $on-small-phone:   400px !default;
 
-// Custom variable are added here
-$brown:          #b3411d !default;
-$dark-brown:     darken($brown, 20%) !default;
-$light-brown:    lighten($brown, 10%) !default;
-
 $platinum:       #e8ebe4;
 $super-platinum:  lighten($platinum, 15%) !default;
 

_sass/minima/_base.scss

@@ -97,21 +97,18 @@ h1, h2, h3, h4, h5, h6 {
   font-weight: $base-font-weight;
 }
 
-
-
 /**
  * Links
  */
 a {
-  color: $brand-color;
+  color: $brand-color_l;
   text-decoration: none;
 
   &:visited {
-    color: darken($brand-color, 15%);
+    color: $brand-color;
   }
 
   &:hover {
-    color: $text-color;
     text-decoration: underline;
   }
 

_sass/minima/_layout.scss

@@ -18,10 +18,7 @@
   margin-bottom: 0;
   float: left;
 
-  &,
+  &, &:visited {color: $grey-color-dark;}
-  &:visited {
-    color: $grey-color-dark;
-  }
 }
 
 .site-nav {
@@ -41,9 +38,7 @@
     line-height: $base-line-height;
 
     // Gaps between nav items, but not on the last one
-    &:not(:last-child) {
+    &:not(:last-child) {margin-right: 20px;}
-      margin-right: 20px;
-    }
   }
 
   @include media-query($on-palm) {
@@ -73,9 +68,7 @@
       padding-top: 10px;
       text-align: center;
 
-      > svg {
+      > svg {fill: $grey-color-dark;}
-        fill: $grey-color-dark;
-      }
     }
 
     input ~ .trigger {
@@ -190,14 +183,17 @@
   margin-left: 0;
   list-style: none;
 
-  > li {
+  > li {margin-bottom: $spacing-unit;}
-    margin-bottom: $spacing-unit;
-  }
 }
 
 .post-meta {
+  display: flex;
+  flex-flow: row wrap;
   font-size: $small-font-size;
   color: $grey-color;
+  margin: .25em;
+
+  a:visited, a:hover {color: $brand-color_l}
 }
 
 .post-link {

_sass/pages/classification_pages.scss

@@ -0,0 +1,30 @@
+.keyword__grid {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    margin-bottom: 2em;
+}
+
+.keywords {
+        border: $brand-color 1px solid;
+    background: lighten($brand-color_l, 20%);
+    color: white;
+    margin: .2em;
+    padding: .2em;
+
+    &:hover, &:visited {color: white;}
+}
+
+.datum__post_list:not(:last-of-type){
+    margin-bottom: 4em;
+
+    > ul {
+        > li {
+            padding: .5em;
+            &:nth-of-type(even) {background: lighten($brand-color_l, 40%)}
+
+            > * {margin: 0}
+        }
+        
+    }
+}

_sass/pages/index.scss

@@ -1,3 +1,4 @@
 @import
+    "classification_pages",
     "notes"
 ;

_sass/pages/notes.scss

@@ -5,7 +5,7 @@
     margin: .25em;
     padding: .5em;
     &:nth-child(odd) {
-        background: lighten($brown, 50%);
+        background: lighten($brand-color, 50%);
     }
     &:last-child {
         margin-bottom: 1em;

_sass/post_content/_list_container.scss

@@ -1,5 +1,5 @@
 #list-container {
-    border: 3px $brown dashed;
+    border: 3px $brand-color dashed;
     border-left: 0px;
     border-right: 0px;
     color: $grey-color;

_sass/post_content/_post.scss

@@ -22,6 +22,12 @@
   h2 {
     @include relative-font-size(2);
 
+    &::after {
+      content: "";
+      display: block;
+      border-bottom: 2px solid black;
+    }
+
     @include media-query($on-laptop) {
       @include relative-font-size(1.75);
     }
@@ -88,3 +94,9 @@
       }
   }
 }
+
+.post-meta-icons {
+  width: 1.5em; 
+  height: 1.5em;
+  padding: 0 .2em;
+}

_sass/post_content/_post_links.scss

@@ -15,6 +15,6 @@
 }
 
 .post-link:visited {
-    color: $brown;
+    color: $brand-color;
 }
 

_sass/post_content/_tags.scss

@@ -19,6 +19,6 @@
     color: $grey-color-dark;
     font-size: $small-font-size;
     .link-tag {
-        color: $brown;
+        color: $brand-color;
     }
 }