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>
kushalarora · Oct 30, 2021 · 1c52125 · 1c52125
1 parent 174024e
commit 1c52125
Show file tree

Hide file tree

Showing 15 changed files with 217 additions and 9 deletions.
diff --git 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
@@ -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
 # -----------------------------------------------------------------------------

diff --git a/_layouts/archive-category.html 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 %}
diff --git 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
@@ -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
@@ -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>