✨ feat: allow showcasing featured projects on homepage (#297)

content/_index.ca.md

@@ -8,6 +8,9 @@ template = "section.html"
 header = {title = "Hola! Soc tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, l'autor de tabi" }
 section_path = "blog/_index.ca.md"
 max_posts = 4
+projects_path = "projects/_index.ca.md"
+max_projects = 3
+show_projects_first = false
 social_media_card = "social_cards/ca.jpg"
 +++
 

content/_index.es.md

@@ -8,6 +8,9 @@ template = "section.html"
 header = {title = "¡Hola! Soy tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, el autor de tabi" }
 section_path = "blog/_index.es.md"
 max_posts = 4
+projects_path = "projects/_index.es.md"
+max_projects = 3
+show_projects_first = false
 social_media_card = "social_cards/es.jpg"
 +++
 

content/_index.md

@@ -8,6 +8,9 @@ template = "section.html"
 header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, the theme's author" }
 section_path = "blog/_index.md"
 max_posts = 4
+projects_path = "projects/_index.md"
+max_projects = 3
+show_projects_first = false
 social_media_card = "social_cards/index.jpg"
 +++
 

content/blog/mastering-tabi-settings/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Domina la configuració de tabi: guia completa"
 date = 2023-09-18
-updated = 2024-03-15
+updated = 2024-04-23
 description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
 
 [taxonomies]
@@ -99,6 +99,8 @@ La [pàgina principal](/) d'aquesta demo té una capçalera amb una imatge, un t
 
 {{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/header_light.webp", dark_src="blog/mastering-tabi-settings/img/header_dark.webp", alt="Capçalera de la pàgina principal") }}
 
+#### Capçalera
+
 Per configurar la imatge i el títol, pots utilitzar la variable `header` al front matter de l'arxiu `_index.md` de la secció. Per exemple:
 
 ```toml
@@ -108,6 +110,8 @@ header = {title = "Hola! Soc tabi~", img = "img/main.webp", img_alt = "Óscar Fe
 
 La descripció és contingut Markdown normal, escrit fora del front matter.
 
+#### Mostrant publicacions recents
+
 Si vols mostrar publicacions a la pàgina principal, primer necessites decidir si la seva ruta serà `/` o quelcom diferent, com ara `/blog/`.
 
 Si vols servir les publicacions des de `/`, necessites configurar `paginate_by = 5` al front matter del teu arxiu `_index.md`. **Nota**: això no es configura a l'apartat `[extra]`, sinó al front matter principal. Exemple:
@@ -138,6 +142,21 @@ Fixa't que si configures `section_path`, no cal que configuris `paginate_by`. Po
 
 El `title` és el títol que apareix a sobre de les publicacions.
 
+#### Llistat de Projectes
+
+Pots mostrar una selecció de projectes a la teva pàgina principal. Per fer això, primer necessitaràs configurar el directori `projects`.
+
+Un cop fet això, configura la ruta als projectes a la secció `[extra]` del teu fitxer `_index.md`:
+
+```toml
+[extra]
+projects_path = "projects/_index.md"
+```
+
+Això mostrarà els 3 projectes de major prioritat (amb menor pes; el mateix ordre que a Projectes). Per mostrar més o menys projectes, configura `max_projects` a `[extra]`.
+
+Per defecte, la secció de projectes es mostrarà a la part inferior de la pàgina principal, sota les publicacions. Si prefereixes mostrar-la a la part superior, configura `show_projects_first = true`.
+
 ### Commutador de mode clar i fosc
 
 | Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |

content/blog/mastering-tabi-settings/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Domina la configuración de tabi: guía completa"
 date = 2023-09-18
-updated = 2024-03-15
+updated = 2024-04-23
 description = "Descubre las múltiples maneras en que puedes personalizar tabi."
 
 [taxonomies]
@@ -99,6 +99,8 @@ La [página principal](/) de esta demo tiene un encabezado con una imagen, un t
 
 {{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/header_light.webp", dark_src="blog/mastering-tabi-settings/img/header_dark.webp", alt="Encabezado de la página principal") }}
 
+#### Cabecera
+
 Para configurar la imagen y el título, puedes usar la variable `header` en el front matter del archivo `_index.md` de la sección. Por ejemplo:
 
 ```toml
@@ -108,6 +110,8 @@ header = {title = "¡Hola! Soy tabi~", img = "blog/mastering-tabi-settings/img/m
 
 La descripción es contenido Markdown normal, escrito fuera del front matter.
 
+#### Mostrando publicaciones recientes
+
 Si deseas mostrar publicaciones en la página principal, primero necesitas decidir si su ruta será `/` o algo como `/blog`.
 
 Si quieres servir las publicaciones desde `/`, necesitas configurar `paginate_by = 5` en el front matter de tu archivo `_index.md`. **Nota**: esto no se configura en el apartado `[extra]`, sino en el front matter principal. Ejemplo:
@@ -138,6 +142,21 @@ Fíjate que si configuras `section_path`, no necesitas configurar `paginate_by`.
 
 El `title` es el encabezado que aparece sobre las publicaciones.
 
+#### Listado de proyectos
+
+Puedes mostrar una selección de proyectos en tu página principal. Para hacer esto, primero necesitarás configurar el directorio `projects`.
+
+Una vez hecho esto, configura la ruta a los proyectos en la sección `[extra]` de tu archivo `_index.md`:
+
+```toml
+[extra]
+projects_path = "projects/_index.md"
+```
+
+Esto mostrará los 3 proyectos de mayor prioridad (con menor peso; el mismo orden que en Proyectos). Para mostrar más o menos proyectos, puedes establecer `max_projects` en `[extra]`.
+
+Por defecto, la sección de proyectos se mostrará en la parte inferior de la página principal, bajo los posts. Si prefieres que aparezca en la parte superior, establece `show_projects_first = true`.
+
 ### Interruptor de modo claro y oscuro
 
 | Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |

content/blog/mastering-tabi-settings/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Mastering tabi Settings: A Comprehensive Guide"
 date = 2023-09-18
-updated = 2024-03-15
+updated = 2024-04-23
 description = "Discover the many ways you can customise your tabi site."
 
 [taxonomies]
@@ -99,6 +99,8 @@ The [main page](/) of this demo has a header with an image, a title and descript
 
 {{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/header_light.webp", dark_src="blog/mastering-tabi-settings/img/header_dark.webp", alt="Main page header") }}
 
+#### Heading
+
 To set the image and title, you can use the `header` variable in the front matter of the section's `_index.md` file. For example:
 
 ```toml
@@ -108,6 +110,8 @@ header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Óscar F
 
 The description is regular Markdown content, set outside the front matter.
 
+#### Listing Recent Posts
+
 If you'd like to show posts on the main page, you first need to decide whether their path will be `/` or something like `/blog`.
 
 If you want to serve the posts from `/`, you need to set `paginate_by = 5` in the front matter of your `_index.md` file. **Note**: this is not in the `[extra]` section, but in the main front matter. Example:
@@ -138,6 +142,21 @@ Notice how if you set `section_path`, you don't need to set `paginate_by`. You c
 
 The `title` is the header that appears above the posts.
 
+#### Listing Projects
+
+You can showcase a selection of projects on your main page. To do this, you'll need to set up the `projects` directory first.
+
+Once that's done, you configure the path to the projects in the `[extra]` section of your `_index.md` file:
+
+```toml
+[extra]
+projects_path = "projects/_index.md"
+```
+
+By default, this will show the 3 projects with the highest priority (smallest weight; same sorting as Projects page). To show more or fewer projects, you can set `max_projects` in the `[extra]` section.
+
+By default, the featured projects will be shown after the posts. If you want to show the projects before the posts, set `show_projects_first = true`.
+
 ### Light and Dark Mode Switcher
 
 | Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |

i18n/ar.toml

@@ -40,6 +40,8 @@ next = "التالي"  # As in "Next" page.
 of = "من"  # E.g. Page 1 "of" 3
 all_posts = "جميع التدوينات"
 all_tags = "جميع الوسوم"
+all_projects = "جميع المشاريع"
+featured_projects = "المشاريع المميزة"
 language_selection = "تحديد اللغة"
 toggle_mode = "تبديل الاوضاع $MODE"  # $MODE will be replaced by a value (or both) below.
 dark = "داكن"

i18n/ca.toml

@@ -31,6 +31,8 @@ next = "Següent"  # As in "Next" page.
 of = "de"  # E.g. Page 1 "of" 3
 all_posts = "Totes les entrades"
 all_tags = "Totes les etiquetes"
+all_projects = "Tots els projectes"
+featured_projects = "Projectes destacats"
 language_selection = "Selecció d'idioma"
 toggle_mode = "Canvia el mode $MODE"  # $MODE will be replaced by a value (or both) below.
 dark = "obscur"

i18n/de.toml

@@ -35,6 +35,8 @@ next = "Nächst"  # As in "Next" page.
 of = "von"  # E.g. Page 1 "of" 3
 all_posts = "Alle Beiträge"
 all_tags = "Alle Tags"
+all_projects = "Alle Projekte"
+featured_projects = "Empfohlene Projekte"
 language_selection = "Sprachauswahl"
 toggle_mode = "Wechsle in den $MODE Modus"  # $MODE will be replaced by a value (or both) below.
 dark = "dunkel"

i18n/en.toml

@@ -31,6 +31,8 @@ next = "Next"  # As in "Next" page.
 of = "of"  # E.g. Page 1 "of" 3
 all_posts = "All posts"
 all_tags = "All tags"
+all_projects = "All projects"
+featured_projects = "Featured projects"
 language_selection = "Language selection"
 toggle_mode = "Toggle $MODE mode"  # $MODE will be replaced by a value (or both) below.
 dark = "dark"

i18n/es.toml

@@ -31,6 +31,8 @@ next = "Siguiente"  # As in "Next" page.
 of = "de"  # E.g. Page 1 "of" 3
 all_posts = "Todas las entradas"
 all_tags = "Todas las etiquetas"
+all_projects = "Todos los proyectos"
+featured_projects = "Proyectos destacados"
 language_selection = "Selección de idioma"
 toggle_mode = "Cambiar a modo $MODE"  # $MODE will be replaced by a value (or both) below.
 dark = "oscuro"

i18n/fa.toml

@@ -31,6 +31,8 @@ next = "بعدی"   # As in "Next" page.
 of = "از"  # E.g. Page 1 "of" 3
 all_posts = "همه مطالب"
 all_tags = "همه برچسب‌ها"
+all_projects = "همه پروژه‌ها"
+featured_projects = "پروژه‌های برجسته"
 language_selection = "انتخاب زبان"
 toggle_mode = "تغییر حالت $MODE"  # $MODE will be replaced by a value (or both) below.
 dark = "تیره"

i18n/fr.toml

@@ -31,6 +31,8 @@ next = "Suivant"  # As in "Next" page.
 of = "sur"  # E.g. Page 1 "of" 3
 all_posts = "Tous les articles"
 all_tags = "Toutes les étiquettes"
+all_projects = "Tous les projets"
+featured_projects = "Projets à la une"
 language_selection = "Sélection de la langue"
 toggle_mode = "Basculer en mode $MODE"  # $MODE will be replaced by a value (or both) below.
 dark = "sombre"

i18n/hi.toml

@@ -33,6 +33,8 @@ next = "अगला"  # As in "Next" page.
 of = "का"  # E.g. Page 1 "of" 3
 all_posts = "सभी पोस्ट्स"
 all_tags = "सभी टैग्स"
+all_projects = "सभी प्रोजेक्ट"
+featured_projects = "विशेष प्रोजेक्ट"
 language_selection = "भाषा चयन"
 toggle_mode = "$MODE मोड में टॉगल करें"  # $MODE will be replaced by a value (or both) below.
 dark = "अंधेरा"

i18n/it.toml

@@ -31,6 +31,8 @@ next = "Successivo"  # As in "Next" page.
 of = "di"  # E.g. Page 1 "of" 3
 all_posts = "Tutti i post"
 all_tags = "Tutti i tag"
+all_projects = "Tutti i progetti"
+featured_projects = "Progetti in evidenza"
 language_selection = "Selezione della lingua"
 toggle_mode = "Passa alla modalità $MODE"  # $MODE will be replaced by a value (or both) below.
 dark = "scuro"

i18n/ja.toml

@@ -35,6 +35,8 @@ next = "次"  # As in "Next" page.
 of = "中"  # E.g. Page 1 "of" 3
 all_posts = "すべての投稿"
 all_tags = "すべてのタグ"
+all_projects = "全てのプロジェクト"
+featured_projects = "注目のプロジェクト"
 language_selection = "言語選択"
 toggle_mode = "$MODE モードに切り替え"  # $MODE will be replaced by a value (or both) below.
 dark = "暗い"

i18n/ko.toml

@@ -35,6 +35,8 @@ next = "다음"  # As in "Next" page.
 of = "중"  # E.g. Page 1 "of" 3
 all_posts = "모든 게시물"
 all_tags = "모든 태그"
+all_projects = "모든 프로젝트"
+featured_projects = "추천 프로젝트"
 language_selection = "언어 선택"
 toggle_mode = "$MODE 모드로 전환"  # $MODE will be replaced by a value (or both) below.
 dark = "어두운"

i18n/nl.toml

@@ -31,6 +31,8 @@ next = "Volgende"  # As in "Next" page. - Volgende pagina
 of = "van"  # E.g. Page 1 "of" 3
 all_posts = "Alle berichten"
 all_tags = "Alle labels"
+all_projects = "Alle projecten"
+featured_projects = "Aanbevolen projecten"
 language_selection = "Selecteer taal"
 toggle_mode = "Schakel de $MODE-modus in"  # $MODE will be replaced by a value (or both) below.
 dark = "donker"

i18n/pt-PT.toml

@@ -31,6 +31,8 @@ next = "Seguinte"  # As in "Next" page.
 of = "de"  # E.g. Page 1 "of" 3
 all_posts = "Todas as publicações"
 all_tags = "Todas as etiquetas"
+all_projects = "Todos os projetos"
+featured_projects = "Projetos em destaque"
 language_selection = "Seleção de idioma"
 toggle_mode = "Alternar para o modo $MODE"  # $MODE will be replaced by a value (or both) below.
 dark = "escuro"

i18n/ru.toml

@@ -38,6 +38,8 @@ next = "След."  # As in "Next" page.
 of = "из"  # E.g. Page 1 "of" 3
 all_posts = "Все посты"
 all_tags = "Все теги"
+all_projects = "Все проекты"
+featured_projects = "Избранные проекты"
 language_selection = "Выбор языка"
 toggle_mode = "Переключить на режим $MODE"  # $MODE will be replaced by a value (or both) below.
 dark = "тёмный"

i18n/uk.toml

@@ -42,6 +42,8 @@ next = "Наст."  # As in "Next" page.
 of = "з"  # E.g. Page 1 "of" 3
 all_posts = "Всі пости"
 all_tags = "Всі теги"
+all_projects = "Усі проекти"
+featured_projects = "Обрані проекти"
 language_selection = "Вибір мови"
 toggle_mode = "Перемкнути в режим $MODE"  # $MODE will be replaced by a value (or both) below.
 dark = "темний"

i18n/zh-Hans.toml

@@ -31,6 +31,8 @@ next = "下一页"  # As in "Next" page.
 of = "/"  # E.g. Page 1 "of" 3
 all_posts = "所有文章"
 all_tags = "所有标签"
+all_projects = "所有项目"  # Machine translated.
+featured_projects = "特色项目"  # Machine translated.
 language_selection = "语言选择"  # Machine translated.
 toggle_mode = "切换到$MODE模式"  # $MODE will be replaced by a value (or both) below. Machine translated.
 dark = "暗"  # Machine translated.

i18n/zh-Hant.toml

@@ -31,6 +31,8 @@ next = "下一頁"  # As in "Next" page.
 of = "/"  # E.g. Page 1 "of" 3
 all_posts = "所有文章"
 all_tags = "所有標籤"
+all_projects = "所有項目"  # Machine translated.
+featured_projects = "精選項目"  # Machine translated.
 language_selection = "語言選擇"  # Machine translated.
 toggle_mode = "切換到$MODE模式"  # $MODE will be replaced by a value (or both) below. Machine translated.
 dark = "暗"  # Machine translated.

sass/parts/_posts_list.scss

@@ -72,6 +72,18 @@
     font-size: 1.3rem;
 }
 
+#all-projects {
+    margin-top: 2rem;
+}
+
+.posts-first #featured-projects {
+    margin-top: 4rem;
+}
+
+.projects-first #all-projects {
+    margin-bottom: 4rem;
+}
+
 @media only screen and (max-width: 1100px) {
     .bloglist-row {
         flex-direction: column;

templates/partials/cards_pages.html

@@ -1,6 +1,11 @@
 {%- set rel_attributes = macros_rel_attributes::rel_attributes() | trim -%}
+{%- set max_projects = max_projects | default(value=999999) -%}
 <div class="cards">
     {%- for page in show_pages %}
+        {# Used only in main page #}
+        {% if loop.index > max_projects %}
+            {% break %}
+        {% endif %}
         {# Determine which URL to use, default is page.permalink #}
         {%- if page.extra.link_to and config.markdown.external_links_target_blank -%}
             {%- set blank_target = "target=_blank" -%}

templates/partials/main_page_posts_list.html

@@ -0,0 +1,18 @@
+<div class="list">
+    <div>
+        {{ macros_page_header::page_header(title=section.title) }}
+    </div>
+
+    {%- if paginator %}
+        {%- set pages = paginator.pages -%}
+    {% else %}
+        {%- set pages = extra_section.pages -%}
+    {% endif -%}
+
+	{% set max_posts = section.extra.max_posts | default(value=999999) %}
+    {{ macros_list_posts::list_posts(posts=pages, max=max_posts, language_strings=language_strings, section_path=path) }}
+</div>
+
+{% if paginator %}
+    {%- include "partials/paginate.html" -%}
+{% endif %}

templates/partials/main_page_projects_list.html

@@ -0,0 +1,17 @@
+{% if section.extra.projects_path %}
+    {%- set projects_section = get_section(path=section.extra.projects_path) -%}
+    {%- if projects_section -%}
+        <div id="featured-projects" class="list">
+            {{ macros_page_header::page_header(title=macros_translate::translate(key="featured_projects", default="Featured projects", language_strings=language_strings)) }}
+        </div>
+        {%- set show_pages = projects_section.pages -%}
+        {%- set max_projects = section.extra.max_projects | default(value=3) -%}
+        {%- include "partials/cards_pages.html" -%}
+    {%- endif -%}
+    {%- if show_pages | length > max_projects -%}
+        <div class="all-posts {{ first_section }}-first" id="all-projects">
+            <a href="{{ get_url(path=projects_section.path, lang=lang) }}/">{{ macros_translate::translate(key="all_projects", default="All projects", language_strings=language_strings) }}&nbsp;<span class="arrow">⟶</span></a>
+        </div>
+    {%- endif -%}
+    </div>
+{% endif %}

templates/section.html

@@ -2,7 +2,18 @@
 
 {% block main_content %}
 
-<main>
+{%- set show_projects_first = section.extra.show_projects_first | default(value=false) -%}
+{%- if show_projects_first -%}
+    {%- set first_section = "projects" -%}
+{%- else -%}
+    {%- set first_section = "posts" -%}
+{%- endif -%}
+
+<main class={{ first_section }}-first>
+{%- if section.extra.header %}
+    {%- include "partials/home_banner.html" -%}
+{% endif -%}
+
 {% if section.extra.section_path -%}
     {% set extra_section = get_section(path=section.extra.section_path) %}
 {% endif -%}
@@ -13,28 +24,13 @@
     {% set path = section.path %}
 {% endif -%}
 
-{%- if section.extra.header %}
+{%- if show_projects_first -%}
-    {%- include "partials/home_banner.html" -%}
+    {%- include "partials/main_page_projects_list.html" -%}
-{% endif -%}
+    {%- include "partials/main_page_posts_list.html" -%}
-
+{%- else -%}
-<div class="list">
+    {%- include "partials/main_page_posts_list.html" -%}
-    <div>
+    {%- include "partials/main_page_projects_list.html" -%}
-        {{ macros_page_header::page_header(title=section.title) }}
+{%- endif -%}
-    </div>
-
-    {%- if paginator %}
-        {%- set pages = paginator.pages -%}
-    {% else %}
-        {%- set pages = extra_section.pages -%}
-    {% endif -%}
-
-	{% set max = section.extra.max_posts | default(value=999999) %}
-    {{ macros_list_posts::list_posts(posts=pages, max=max, language_strings=language_strings, section_path=path) }}
-</div>
 </main>
 
-{% if paginator %}
-    {%- include "partials/paginate.html" -%}
-{% endif %}
-
 {% endblock main_content %}