From 3f9a330c239c3fa692bbbd8778d19c4d5c9bdf5b Mon Sep 17 00:00:00 2001 From: George <31376482+george-gca@users.noreply.github.com> Date: Thu, 29 Jun 2023 11:11:07 -0300 Subject: [PATCH] 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 Co-authored-by: Maruan --- _posts/2015-07-15-code.md | 23 +++++++++++++++++++ _posts/2018-12-22-distill.md | 3 ++- _sass/_base.scss | 34 +++++++++++++++++++++++++++- blog/index.html | 43 ++++++++++++++++++++++++++++++++++++ 4 files changed, 101 insertions(+), 2 deletions(-) diff --git a/_posts/2015-07-15-code.md b/_posts/2015-07-15-code.md index a86fa077c536..c7b9a4dc5a58 100644 --- 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 index ca0da2b4d283..49c60dd66ae3 100644 --- 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 index ae8189d8508d..0e7f0fc4e0e4 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -1001,4 +1001,36 @@ nav[data-toggle="toc"] { color: var(--global-danger-block-title); } } -} \ No newline at end of file +} + +.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 index 074545a6df61..3b5172017951 100644 --- a/blog/index.html +++ b/blog/index.html @@ -51,6 +51,49 @@

{{ site.blog_description }}

{% endif %} + {% assign featured_posts = site.posts | where: "featured", "true" %} + {% if featured_posts.size > 0 %} +
+
+ {% assign is_even = featured_posts.size | modulo: 2 %} +
+ {% for post in featured_posts %} +
+ +
+
+
+
+
+ +
+

{{ post.title }}

+

{{ post.description }}

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

+ {{ read_time }} min read   ·   + + {{ year }} +

+
+
+
+
+ +
+ {% endfor %} +
+
+
+ {% endif %} +