Added support for featured blog posts (#1498)

Implementing #1440. Still not sure if the year should be shown there or
not. Also, I limited to be displayed at least 2 at most 3 elements on
the row of featured blog posts, since when having only 1 featured post
the card would occupy the whole row (and it looks weird). What do you
think @alshedivat? Also, idk how to force the cards to have the same
height. I think it would look nicer, but my lack of web dev skills made
a difference here.

Some current screenshots:


![image](https://github.com/alshedivat/al-folio/assets/31376482/11b280dd-70b6-4bc4-84b6-987aa6412d55)


![image](https://github.com/alshedivat/al-folio/assets/31376482/d94aac41-246d-4b4e-afd0-161aab5a9b88)

---------

Signed-off-by: George Araujo <[email protected]>
Co-authored-by: Maruan <[email protected]>

_posts/2015-07-15-code.md

@@ -5,6 +5,7 @@ date: 2015-07-15 15:09:00
 description: an example of a blog post with some code
 tags: formatting code
 categories: sample-posts
+featured: true
 ---
 This theme implements a built-in Jekyll feature, the use of Rouge, for syntax highlighting.
 It supports more than 100 languages.
@@ -37,6 +38,28 @@ int main(int argc, char const \*argv[])
 }
 ```
 
+For displaying code in a list item, you have to be aware of the indentation, as stated in this [Stackoverflow answer](https://stackoverflow.com/questions/34987908/embed-a-code-block-in-a-list-item-with-proper-indentation-in-kramdown/38090598#38090598). You must indent your code by **(3 * bullet_indent_level)** spaces. This is because kramdown (the markdown engine used by Jekyll) indentation for the code block in lists is determined by the column number of the first non-space character after the list item marker. For example:
+
+```markdown
+1. We can put fenced code blocks inside nested bullets, too.
+ 1. Like this:
+ ```c
+ printf("Hello, World!");
+ ```
+
+ 2. The key is to indent your fenced block in the same line as the first character of the line.
+```
+
+Which displays:
+
+1. We can put fenced code blocks inside nested bullets, too.
+ 1. Like this:
+ ```c
+ printf("Hello, World!");
+ ```
+
+ 2. The key is to indent your fenced block in the same line as the first character of the line.
+
 By default, it does not display line numbers. If you want to display line numbers for every code block, you can set `kramdown.syntax_highlighter_opts.block.line_numbers` to true in your `_config.yml` file.
 
 If you want to display line numbers for a specific code block, all you have to do is wrap your code in a liquid tag:

_posts/2018-12-22-distill.md

@@ -4,6 +4,7 @@ title: a distill-style blog post
 description: an example of a distill-style blog post and main elements
 giscus_comments: true
 date: 2021-05-22
+featured: true
 
 authors:
  - name: Albert Einstein
@@ -156,7 +157,7 @@ fig.write_html('assets/plotly/demo.html')
 
 ***
 
-## Details boxes 
+## Details boxes
 
 Details boxes are collapsible boxes which hide additional information from the user. They can be added with the `details` liquid tag:
 

_sass/_base.scss

@@ -1001,4 +1001,36 @@ nav[data-toggle="toc"] {
  color: var(--global-danger-block-title);
  }
  }
-}
+}
+
+.featured-posts {
+ a {
+ color: var(--global-text-color-light);
+ text-decoration: none;
+
+ .card-text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ &:hover {
+ color: var(--global-theme-color);
+
+ .card-title {
+ color: var(--global-theme-color);
+ }
+ }
+ }
+
+ .card-item {
+ margin-bottom: 10px;
+ }
+
+ .post-meta {
+ color: var(--global-text-color-light);
+ font-size: 0.875rem;
+ margin-bottom: 0;
+ padding-top: 0.5rem;
+ }
+}

blog/index.html

@@ -51,6 +51,49 @@ <h2>{{ site.blog_description }}</h2>
  </div>
  {% endif %}
 
+ {% assign featured_posts = site.posts | where: "featured", "true" %}
+ {% if featured_posts.size > 0 %}
+ <br>
+ <div class="container featured-posts">
+ {% assign is_even = featured_posts.size | modulo: 2 %}
+ <div class="row row-cols-{% if featured_posts.size <= 2 or is_even == 0 %}2{% else %}3{% endif %}">
+ {% for post in featured_posts %}
+ <div class="card-item col">
+ <a href="{{ post.url | relative_url }}">
+ <div class="card hoverable">
+ <div class="row g-0">
+ <div class="col-md-12">
+ <div class="card-body">
+ <div class="float-right">
+ <i class="fa-solid fa-thumbtack fa-xs"></i>
+ </div>
+ <h3 class="card-title text-lowercase">{{ post.title }}</h3>
+ <p class="card-text">{{ post.description }}</p>
+
+ {% if post.external_source == blank %}
+ {% assign read_time = post.content | number_of_words | divided_by: 180 | plus: 1 %}
+ {% else %}
+ {% assign read_time = post.feed_content | strip_html | number_of_words | divided_by: 180 | plus: 1 %}
+ {% endif %}
+ {% assign year = post.date | date: "%Y" %}
+
+ <p class="post-meta">
+ {{ read_time }} min read &nbsp; &middot; &nbsp;
+ <a href="{{ year | prepend: '/blog/' | prepend: site.baseurl}}">
+ <i class="fas fa-calendar fa-sm"></i> {{ year }} </a>
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </a>
+ </div>
+ {% endfor %}
+ </div>
+ </div>
+ <hr>
+ {% endif %}
+
  <ul class="post-list">
  {% for post in paginator.posts %}