From ec40eba63f7394953a91e4cc2cc54af33e0122ea Mon Sep 17 00:00:00 2001
From: Dinesh Natesan <AbstractGeek@users.noreply.github.com>
Date: Sun, 31 Oct 2021 02:28:42 +0530
Subject: [PATCH] Added Jekyll-Archives (for tags, categories) and Jekyll
 site-map (#346)

* Add webpage to academic pages list

* adding panelbear analytics

* added categories for projects and horizontal mode display for projects

* rewrote the code to ensure it works properly with current project definitions

* Style adjustments

* added blockquote format, jekyll-archives, tag, year archive pages, and reading time.

* added archive meta to blog posts list and individual posts.

* added sitemap

* stylistic modifications to jekyll-archive addition

* Minor fixes

Co-authored-by: Maruan Al-Shedivat <alshedivat.maruan@gmail.com>
---
 Gemfile                                   |  1 +
 _config.yml                               | 25 +++++++++++++-
 _layouts/archive-category.html            | 27 +++++++++++++++
 _layouts/archive-tag.html                 | 27 +++++++++++++++
 _layouts/archive-year.html                | 27 +++++++++++++++
 _layouts/post.html                        | 23 +++++++++++++
 _posts/2015-03-15-formatting-and-links.md |  2 ++
 _posts/2015-05-15-images.md               |  2 ++
 _posts/2015-07-15-code.md                 |  2 ++
 _posts/2015-10-20-comments.md             |  1 +
 _posts/2015-10-20-math.md                 |  2 ++
 _posts/2020-09-28-github-metadata.md      |  7 ++--
 _posts/2020-09-28-twitter.md              |  2 ++
 _sass/_base.scss                          | 38 +++++++++++++++++++++
 blog/index.html                           | 40 ++++++++++++++++++++---
 15 files changed, 217 insertions(+), 9 deletions(-)
 create mode 100644 _layouts/archive-category.html
 create mode 100644 _layouts/archive-tag.html
 create mode 100644 _layouts/archive-year.html

diff --git a/Gemfile b/Gemfile
index bac9010a0936..31a554ce2bec 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,6 +1,7 @@
 source 'https://rubygems.org'
 group :jekyll_plugins do
     gem 'jekyll'
+    gem 'jekyll-archives'
     gem 'jekyll-diagrams'
     gem 'jekyll-email-protect'
     gem 'jekyll-feed'
diff --git a/_config.yml b/_config.yml
index cdff539be7bd..6286aaa1bb6b 100644
--- a/_config.yml
+++ b/_config.yml
@@ -137,21 +137,44 @@ keep_files:
 
 # Plug-ins
 plugins:
-  - jekyll/scholar
+  - jekyll-archives
   - jekyll-diagrams
   - jekyll-email-protect
   - jekyll-feed
   - jekyll-github-metadata
   - jekyll-paginate-v2
   - jekyll-responsive-image
+  - jekyll/scholar
   - jekyll-sitemap
   - jekyll-target-blank
   - jekyll-twitter-plugin
   - jemoji
 
+# Sitemap settings
+defaults:
+  - scope:
+      path:            "assets/**/*.*"
+    values:
+      sitemap:         false
+
 # Extras
 github: [metadata]
 
+# -----------------------------------------------------------------------------
+# Jekyll Archives
+# -----------------------------------------------------------------------------
+
+jekyll-archives:
+  enabled: [year, tags, categories] # enables year, tag and category archives (remove if you need to disable one of them). 
+  layouts:
+    year: archive-year
+    tag: archive-tag
+    category: archive-category
+  permalinks:
+    year: '/blog/:year/'
+    tag: '/blog/tag/:name/'
+    category: '/blog/category/:name/'
+
 # -----------------------------------------------------------------------------
 # Jekyll Scholar
 # -----------------------------------------------------------------------------
diff --git a/_layouts/archive-category.html b/_layouts/archive-category.html
new file mode 100644
index 000000000000..79aad74f923e
--- /dev/null
+++ b/_layouts/archive-category.html
@@ -0,0 +1,27 @@
+---
+layout: default
+---
+
+<div class="post">
+
+  <header class="post-header">
+    <h1 class="post-title"> <i class="fas fa-tag fa-sm"></i> {{ page.title }} </h1>
+    <p class="post-description"> an archive of posts in this category </p>
+  </header>
+
+  <article>
+    <div class="table-responsive">
+      <table class="table table-sm table-borderless">
+        {% for post in page.posts %}
+        <tr>
+          <th scope="row">{{ post.date | date: "%b %-d, %Y" }}</th>
+          <td>
+              <a class="post-link" href="{{ post.url | relative_url }}">{{ post.title }}</a>
+          </td>
+        </tr>
+      {% endfor %}
+      </table>
+    </div>
+  </article>
+
+</div>
diff --git a/_layouts/archive-tag.html b/_layouts/archive-tag.html
new file mode 100644
index 000000000000..66abaebb7380
--- /dev/null
+++ b/_layouts/archive-tag.html
@@ -0,0 +1,27 @@
+---
+layout: default
+---
+
+<div class="post">
+
+  <header class="post-header">
+    <h1 class="post-title"> <i class="fas fa-hashtag fa-sm"></i> {{ page.title }} </h1>
+    <p class="post-description"> an archive of posts with this tag </p>
+  </header>
+
+  <article>
+    <div class="table-responsive">
+      <table class="table table-sm table-borderless">
+        {% for post in page.posts %}
+        <tr>
+          <th scope="row">{{ post.date | date: "%b %-d, %Y" }}</th>
+          <td>
+              <a class="post-link" href="{{ post.url | relative_url }}">{{ post.title }}</a>
+          </td>
+        </tr>
+      {% endfor %}
+      </table>
+    </div>
+  </article>
+
+</div>
diff --git a/_layouts/archive-year.html b/_layouts/archive-year.html
new file mode 100644
index 000000000000..8af1d29b2ddd
--- /dev/null
+++ b/_layouts/archive-year.html
@@ -0,0 +1,27 @@
+---
+layout: default
+---
+
+<div class="post">
+
+  <header class="post-header">
+    <h1 class="post-title"> <i class="fas fa-calendar fa-sm"></i> {{ page.date | date: "%Y" }} </h1>
+    <p class="post-description"> an archive of posts from this year </p>
+  </header>
+
+  <article>
+    <div class="table-responsive">
+      <table class="table table-sm table-borderless">
+        {% for post in page.posts %}
+        <tr>
+          <th scope="row">{{ post.date | date: "%b %-d, %Y" }}</th>
+          <td>
+              <a class="post-link" href="{{ post.url | relative_url }}">{{ post.title }}</a>
+          </td>
+        </tr>
+      {% endfor %}
+      </table>
+    </div>
+  </article>
+
+</div>
diff --git a/_layouts/post.html b/_layouts/post.html
index 70d595edcc43..a67b8ac33c4d 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -2,6 +2,10 @@
 layout: default
 ---
 
+{% assign year = page.date | date: "%Y" %}
+{% assign tags = page.tags | join: "" %}
+{% assign categories = page.categories | join: "" %}
+
 {% if page._styles %}
 <style type="text/css">
   {{ page._styles }}
@@ -13,6 +17,25 @@
   <header class="post-header">
     <h1 class="post-title">{{ page.title }}</h1>
     <p class="post-meta">{{ page.date | date: "%B %-d, %Y" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}</p>
+    <p class="post-tags">
+      <a href="{{ year | prepend: '/blog/' | prepend: site.baseurl}}"> <i class="fas fa-calendar fa-sm"></i> {{ year }} </a>
+      {% if tags != "" %}
+      &nbsp; &middot; &nbsp;
+        {% for tag in page.tags %}
+        <a href="{{ tag | prepend: '/blog/tag/' | prepend: site.baseurl}}">
+          <i class="fas fa-hashtag fa-sm"></i> {{ tag }}</a> &nbsp;
+          {% endfor %}
+      {% endif %}
+
+      {% if categories != "" %}
+      &nbsp; &middot; &nbsp;
+        {% for category in page.categories %}
+        <a href="{{ category | prepend: '/blog/category/' | prepend: site.baseurl}}">
+          <i class="fas fa-tag fa-sm"></i> {{ category }}</a> &nbsp;
+          {% endfor %}
+      {% endif %}
+
+    </p>
   </header>
 
   <article class="post-content">
diff --git a/_posts/2015-03-15-formatting-and-links.md b/_posts/2015-03-15-formatting-and-links.md
index 8edeba65e70c..0ecd30357aed 100644
--- a/_posts/2015-03-15-formatting-and-links.md
+++ b/_posts/2015-03-15-formatting-and-links.md
@@ -3,6 +3,8 @@ layout: post
 title:  a post with formatting and links
 date:   2015-03-15 16:40:16
 description: march & april, looking forward to summer
+tags: formatting links
+categories: sample-posts
 ---
 Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptown vinyl kitsch. Four loko meh 8-bit, tousled banh mi tilde forage Schlitz dreamcatcher twee 3 wolf moon. Chambray asymmetrical paleo salvia, sartorial umami four loko master cleanse drinking vinegar brunch. <a href="https://www.pinterest.com">Pinterest</a> DIY authentic Schlitz, hoodie Intelligentsia butcher trust fund brunch shabby chic Kickstarter forage flexitarian. Direct trade <a href="https://en.wikipedia.org/wiki/Cold-pressed_juice">cold-pressed</a> meggings stumptown plaid, pop-up taxidermy. Hoodie XOXO fingerstache scenester Echo Park. Plaid ugh Wes Anderson, freegan pug selvage fanny pack leggings pickled food truck DIY irony Banksy.
 
diff --git a/_posts/2015-05-15-images.md b/_posts/2015-05-15-images.md
index 1a43f7cde931..544bb2bc0319 100644
--- a/_posts/2015-05-15-images.md
+++ b/_posts/2015-05-15-images.md
@@ -3,6 +3,8 @@ layout: post
 title:  a post with images
 date: 2015-05-15 21:01:00
 description: this is what included images could look like
+tags: formatting images
+categories: sample-posts
 ---
 This is an example post with image galleries.
 
diff --git a/_posts/2015-07-15-code.md b/_posts/2015-07-15-code.md
index 2dc73ce640e5..675543df5eda 100644
--- a/_posts/2015-07-15-code.md
+++ b/_posts/2015-07-15-code.md
@@ -3,6 +3,8 @@ layout: post
 title: a post with code
 date: 2015-07-15 15:09:00
 description: an example of a blog post with some code
+tags: formatting code
+categories: sample-posts
 ---
 This theme implements a built-in Jekyll feature, the use of Rouge, for syntax highlighting.
 It supports more than 100 languages.
diff --git a/_posts/2015-10-20-comments.md b/_posts/2015-10-20-comments.md
index 55b900f907fc..33e08010305f 100644
--- a/_posts/2015-10-20-comments.md
+++ b/_posts/2015-10-20-comments.md
@@ -4,5 +4,6 @@ title: a post with comments
 date: 2015-10-20 11:59:00-0400
 description: an example of a blog post with comments
 comments: true
+categories: sample-posts external-services
 ---
 This post shows how to add DISQUS comments.
diff --git a/_posts/2015-10-20-math.md b/_posts/2015-10-20-math.md
index c7c2fa2a4f51..9417b8118178 100644
--- a/_posts/2015-10-20-math.md
+++ b/_posts/2015-10-20-math.md
@@ -3,6 +3,8 @@ layout: post
 title: a post with math
 date: 2015-10-20 11:12:00-0400
 description: an example of a blog post with some math
+tags: formatting math
+categories: sample-posts
 ---
 This theme supports rendering beautiful math in inline and display modes using [MathJax 3](https://www.mathjax.org/) engine. You just need to surround your math expression with `$$`, like `$$ E = mc^2 $$`. If you leave it inside a paragraph, it will produce an inline expression, just like $$ E = mc^2 $$.
 
diff --git a/_posts/2020-09-28-github-metadata.md b/_posts/2020-09-28-github-metadata.md
index 3f406310f295..e8eec3fff6eb 100644
--- a/_posts/2020-09-28-github-metadata.md
+++ b/_posts/2020-09-28-github-metadata.md
@@ -3,13 +3,14 @@ layout: post
 title:  a post with github metadata
 date: 2020-09-28 21:01:00
 description: a quick run down on accessing github metadata.
+categories: sample-posts external-services
 ---
 
 A sample blog page that demonstrates the accessing of github meta data.
 
 ## What does Github-MetaData do?
 * Propagates the site.github namespace with repository metadata
-* Setting site variables : 
+* Setting site variables :
   * site.title
   * site.description
   * site.url
@@ -28,7 +29,7 @@ A sample blog page that demonstrates the accessing of github meta data.
 * URL : {{ site.github.url }}
 * BaseURL : {{ site.github.baseurl }}
 * Archived : {{ site.github.archived}}
-* Contributors : 
+* Contributors :
 {% for contributor in site.github.contributors %}
   * {{ contributor.login }}
-{% endfor %}
\ No newline at end of file
+{% endfor %}
diff --git a/_posts/2020-09-28-twitter.md b/_posts/2020-09-28-twitter.md
index f67b191f3e2f..7de919155ba5 100644
--- a/_posts/2020-09-28-twitter.md
+++ b/_posts/2020-09-28-twitter.md
@@ -3,6 +3,8 @@ layout: post
 title: a post with twitter
 date: 2020-09-28 11:12:00-0400
 description: an example of a blog post with twitter
+tags: formatting
+categories: sample-posts external-services
 ---
 A sample blog page that demonstrates the inclusion of Tweets/Timelines/etc.
 
diff --git a/_sass/_base.scss b/_sass/_base.scss
index f85cfa0b7716..de92921419a1 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -276,6 +276,11 @@ footer.sticky-bottom {
       font-size: 0.875rem;
       margin-bottom: 0;
     }
+    .post-tags {
+      color: var(--global-text-color-light);
+      font-size: 0.875rem;
+      padding-top: 0.25rem;
+    }
     a {
       color: var(--global-text-color);
       text-decoration: none;
@@ -517,3 +522,36 @@ html.transition *:after {
   transition: all 750ms !important;
   transition-delay: 0 !important;
 }
+
+// Extra Markdown style (post Customization)
+.post{
+  .post-meta{
+    color: var(--global-text-color-light);
+    font-size: 0.875rem;
+    margin-bottom: 0;
+  }
+  .post-tags{
+    color: var(--global-text-color-light);
+    font-size: 0.875rem;
+    padding-bottom: 1rem;
+    a {
+      color: var(--global-text-color-light);
+      text-decoration: none;
+      &:hover {
+        color: var(--global-theme-color);
+      }
+    }
+  }
+  .post-content{
+        blockquote {
+          border-left: 5px solid var(--global-theme-color);
+          padding: 8px;
+      }
+}
+}
+
+.post-tags {
+  color: var(--global-text-color-light);
+  font-size: 0.875rem;
+  padding-top: 0.25rem;
+}
diff --git a/blog/index.html b/blog/index.html
index 7ccd524c02d6..200147bf0acd 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -23,11 +23,41 @@ <h2>{{ site.blog_description }}</h2>
 
   <ul class="post-list">
     {% for post in paginator.posts %}
-      <li>
-        <h3><a class="post-title" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></h3>
-        <p class="post-meta">{{ post.date | date: '%B %-d, %Y' }}</p>
-        <p>{{ post.description }}</p>
-      </li>
+
+    {% assign read_time = page.content | number_of_words | divided_by: 180 | plus: 1 %}
+    {% assign year = post.date | date: "%Y" %}
+    {% assign tags = post.tags | join: "" %}
+    {% assign categories = post.categories | join: "" %}
+
+    <li>
+      <h3><a class="post-title" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
+      </h3>
+      <p>{{ post.description }}</p>
+      <p class="post-meta"> {{read_time}} min read &nbsp; &middot; &nbsp;
+        {{ post.date | date: '%B %-d, %Y' }}
+      </p>
+      <p class="post-tags">
+        <a href="{{ year | prepend: '/blog/' | prepend: site.baseurl}}">
+          <i class="fas fa-calendar fa-sm"></i> {{ year }} </a>
+
+          {% if tags != "" %}
+          &nbsp; &middot; &nbsp;
+            {% for tag in post.tags %}
+            <a href="{{ tag | prepend: '/blog/tag/' | prepend: site.baseurl}}">
+              <i class="fas fa-hashtag fa-sm"></i> {{ tag }}</a> &nbsp;
+              {% endfor %}
+          {% endif %}
+
+          {% if categories != "" %}
+          &nbsp; &middot; &nbsp;
+            {% for category in post.categories %}
+            <a href="{{ category | prepend: '/blog/category/' | prepend: site.baseurl}}">
+              <i class="fas fa-tag fa-sm"></i> {{ category }}</a> &nbsp;
+              {% endfor %}
+          {% endif %}
+    </p>
+    </li>
+
     {% endfor %}
   </ul>