add jump to posts

config.toml

@@ -152,6 +152,11 @@ show_date = true
 # "both" - Show both the original date and the last updated date.
 post_listing_date = "date"
 
+# Show "Jump to posts" link next to series' title.
+# By default, the link appears automatically when a series description exceeds 2000 characters.
+# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
+# show_jump_to_posts = true
+
 # Determines if indexes should be increasing (false) or decreasing (true) in series' posts list.
 # It has only effect if the section uses indexes metadata (which is only the case for series as of now).
 # Can be set at section levels, following the hierarchy: section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy

content/blog/series/03-series-cheat-sheet/index.md

@@ -10,7 +10,11 @@ tags = ["showcase", "tutorial", "FAQ"]
 series_page_introduction_variables = { position = "third", foo = "FOO FOO FOO!!!"}
 
 +++
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+## Jump to Posts Feature
+
+When a series has a description over 2000 characters, a "Jump to posts" link automatically appears next to the series title:
+
+##### TODO: Add screenshot with final design
+
+To force the feature on or off, use the `show_jump_to_posts` option in the `[extra]` section of your section (series) or in `config.toml`. This setting follows [the hierarchy](@blog/mastering-tabi-settings/index.md#settings-hierarchy).

content/blog/series/_index.md

@@ -10,6 +10,7 @@ transparent = true
 [extra]
 series = true
 quick_navigation_buttons = true
+show_jump_to_posts = true
 post_listing_index_reversed = false
 
 series_page_introduction_placeholders = ["$POSITION", "$FOO", "$BAR"]

i18n/ar.toml

@@ -30,6 +30,7 @@ few_results = "تم العثور على $NUMBER نتائج"  # for 3 to 10 searc
 many_results = "تم العثور على $NUMBER نتيجة"  # 11 or more search results.
 
 # Navigation.
+jump_to_posts = "الانتقال إلى المنشورات"
 read_more = "إقرأ المزيد"
 one_posts = "تدوينة واحدة"  #One blog post.
 two_posts = "تدوينتين"  #Two blog posts.

i18n/ca.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER resultat"  # "1 result"
 many_results = "$NUMBER resultats"  # "3 results"
 
 # Navigation.
+jump_to_posts = "Saltar als articles"
 read_more = "Llegir més"
 one_posts = "$NUMBER entrada"
 many_posts = "$NUMBER entrades"

i18n/de.toml

@@ -27,6 +27,7 @@ one_results = "$NUMBER Ergebnis"  # "1 result"
 many_results = "$NUMBER Ergebnisse"  # "3 results"
 
 # Navigation.
+jump_to_posts = "Zu den Beiträgen springen"
 read_more = "Weiterlesen"
 one_posts = "$NUMBER Beitrag"
 many_posts = "$NUMBER Beiträge"

i18n/en.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER result"  # "1 result"
 many_results = "$NUMBER results"  # "3 results"
 
 # Navigation.
+jump_to_posts = "Jump to posts"
 read_more = "Read more"
 one_posts = "$NUMBER post"
 many_posts = "$NUMBER posts"  # "3 posts"

i18n/es.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER resultado"
 many_results = "$NUMBER resultados"
 
 # Navigation.
+jump_to_posts = "Saltar a las entradas"
 read_more = "Leer más"
 one_posts = "$NUMBER entrada"
 many_posts = "$NUMBER entradas"

i18n/et.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER tulemus"  # "1 result"
 many_results = "$NUMBER tulemust"  # "3 results"
 
 # Navigation.
+jump_to_posts = "Hüppa postitusteni"
 read_more = "Loe edasi"
 one_posts = "$NUMBER postitus"
 many_posts = "$NUMBER postitust"  # "3 posts"

i18n/fa.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER نتیجه"   # "1 result"
 many_results = "$NUMBER نتیجه"  # "3 results"
 
 # Navigation.
+jump_to_posts = "پرش به نوشته‌ها"
 read_more = "ادامه مطلب"
 one_posts = "$NUMBER مطلب"
 many_posts = "$NUMBER مطلب"  # "3 posts"

i18n/fr.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER résultat"  # "1 result"
 many_results = "$NUMBER résultats"  # "3 results"
 
 # Navigation.
+jump_to_posts = "Aller aux articles"
 read_more = "Lire plus"
 one_posts = "$NUMBER article"
 many_posts = "$NUMBER articles"

i18n/hi.toml

@@ -25,6 +25,7 @@ one_results = "$NUMBER परिणाम"  # "1 result"
 many_results = "$NUMBER परिणाम"  # "3 results"
 
 # Navigation.
+jump_to_posts = "पोस्ट पर जाएं"
 read_more = "और पढ़ें"
 one_posts = "$NUMBER पोस्ट"
 many_posts = "$NUMBER पोस्ट्स"

i18n/it.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER risultato"
 many_results = "$NUMBER risultati"
 
 # Navigation.
+jump_to_posts = "Vai ai post"
 read_more = "Leggi di più"
 one_posts = "$NUMBER post"
 many_posts = "$NUMBER post"

i18n/ja.toml

@@ -27,6 +27,7 @@ one_results = "$NUMBER 結果"  # "1 result"
 many_results = "$NUMBER 結果"  # "3 results"
 
 # Navigation.
+jump_to_posts = "投稿へジャンプ"
 read_more = "続きを読む"
 one_posts = "$NUMBER 投稿"
 many_posts = "$NUMBER 投稿"

i18n/ko.toml

@@ -27,6 +27,7 @@ one_results = "$NUMBER 결과"  # "1 result"
 many_results = "$NUMBER 결과"  # "3 results"
 
 # Navigation.
+jump_to_posts = "게시물로 이동"
 read_more = "더 읽기"
 one_posts = "$NUMBER 게시물"
 many_posts = "$NUMBER 게시물"

i18n/nl.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER resultaat"  # "1 result"
 many_results = "$NUMBER resultaten"  # "3 results"
 
 # Navigation.
+jump_to_posts = "Naar berichten springen"
 read_more = "Lees meer"
 one_posts = "$NUMBER bericht" # "1 post"
 many_posts = "$NUMBER berichten"  # "3 posts"

i18n/or.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER ପରିଣାମ"  # "1 result"
 many_results = "$NUMBER ପରିଣାମଗୁଡ଼ିକ"  # "3 results"
 
 # Navigation.
+jump_to_posts = "ପୋଷ୍ଟକୁ ଯାଆନ୍ତୁ"
 read_more = "ଆହୁରି ପଢ଼ନ୍ତୁ"
 one_posts = "$NUMBER ପୋଷ୍ଟ"
 many_posts = "$NUMBER ପୋଷ୍ଟଗୁଡ଼ିକ"  # "3 posts"

i18n/pt-PT.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER resultado"  # "1 result"
 many_results = "$NUMBER resultados"  # "3 results"
 
 # Navigation.
+jump_to_posts = "Ir para as publicações"
 read_more = "Ler mais"
 one_posts = "$NUMBER publicação"
 many_posts = "$NUMBER publicações"

i18n/ru.toml

@@ -28,6 +28,7 @@ few_results = "$NUMBER результата"  # 2, 3, 4 but not 12-14
 many_results = "$NUMBER результатов"  # 5-9, 0, 11-14, and others
 
 # Navigation.
+jump_to_posts = "Перейти к записям"
 read_more = "Читать далее"
 post = "пост"
 one_posts = "$NUMBER пост"

i18n/uk.toml

@@ -33,6 +33,7 @@ few_results = "$NUMBER результати"
 many_results = "$NUMBER результатів"
 
 # Navigation.
+jump_to_posts = "Перейти до дописів"
 read_more = "Читати далі"
 one_posts = "$NUMBER пост"
 few_posts = "$NUMBER пости"  # 2, 3, 4 but not 12-14

i18n/zh-Hans.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER 个结果"
 many_results = "$NUMBER 个结果"
 
 # Navigation.
+jump_to_posts = "跳转到文章"
 read_more = "阅读全文"
 one_posts = "$NUMBER 篇文章"
 many_posts = "$NUMBER 篇文章"

i18n/zh-Hant.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER 個結果"
 many_results = "$NUMBER 個結果"
 
 # Navigation.
+jump_to_posts = "跳轉到文章"
 read_more = "閱讀全文"
 one_posts = "$NUMBER 篇文章"
 many_posts = "$NUMBER 篇文章"

sass/parts/_misc.scss

@@ -237,3 +237,24 @@ details summary {
 .mermaid .node .label {
     max-width: none !important;
 }
+
+.title-with-jump {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.title-with-jump h1 {
+    flex: 1;
+}
+
+.jump-link {
+    flex-shrink: 0;
+    font-size: 0.9rem;
+}
+
+@media (max-width: 500px) {
+    .title-with-jump {
+        flex-direction: column;
+    }
+}

templates/series.html

@@ -13,7 +13,25 @@
     {%- include "partials/home_banner.html" -%}
 {% endif -%}
 
-    {{ macros_page_header::page_header(title=section.title) }}
+    {%- set show_jump = false -%}
+    {%- set setting_value = macros_settings::evaluate_setting_priority(setting="show_jump_to_posts", page=section) -%}
+    {%- if setting_value == "true" -%}
+        {%- set_global show_jump = true -%}
+    {%- elif setting_value != "false" -%}
+        {#- Default to true if the content is long and var is unset #}
+        {%- if section.content | length > 2000 -%}
+            {%- set_global show_jump = true -%}
+        {%- endif -%}
+    {%- endif -%}
+
+    {%- if show_jump -%}
+    <div class="title-with-jump bottom-divider">
+        <h1 class="title-container section-title">{{ section.title }}</h1>
+        <a href="#posts-list" class="jump-link">{{ macros_translate::translate(key="jump_to_posts", default="Jump to posts", language_strings=language_strings) }} ↓</a>
+    </div>
+    {%- else -%}
+        {{ macros_page_header::page_header(title=section.title) }}
+    {%- endif -%}
 
     <section class="body">
         {{ section.content | safe }}

theme.toml

@@ -109,6 +109,11 @@ show_date = true
 # "both" - Show both the original date and the last updated date.
 post_listing_date = "date"
 
+# Show "Jump to posts" link next to series' title.
+# By default, the link appears automatically when a series description exceeds 2000 characters.
+# Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
+# show_jump_to_posts = true
+
 # Determines if indexes should be increasing (false) or decreasing (true) in series' posts list.
 # It has only effect if the section uses indexes metadata (which is only the case for series as of now).
 # Can be set at section levels, following the hierarchy: section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy