Added support for featured blog posts (alshedivat#1498)

Implementing alshedivat#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]>
Mia11939 · Jun 29, 2023 · 3f9a330 · 3f9a330
1 parent f7ef922
commit 3f9a330
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 2 deletions.
diff --git a/_posts/2015-07-15-code.md b/_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:

diff --git a/_posts/2018-12-22-distill.md b/_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:
 

diff --git a/_sass/_base.scss b/_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;
+  }
+}
diff --git a/blog/index.html b/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 %}