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,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'

_config.yml

@@ -138,21 +138,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
 # -----------------------------------------------------------------------------

_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>

_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>

_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>

_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 @@ layout: default
   <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">

_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.
 

_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.
 

_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.

_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.

_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 $$.
 

_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 %}
+{% endfor %}

_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.
 

_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;
+}

blog/index.html

@@ -23,11 +23,41 @@ pagination:
 
   <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>