Merge pull request #73 from pawroman/tweak-config-for-new-rss

Tweak default config to follow RSS generation changes after Zola 0.19

README.md

@@ -8,7 +8,9 @@
 See the live demo (of the default configuration) here:
 https://pawroman.github.io/zola-theme-terminimal/
 
-Tested with Zola v0.17.2. Please note that earlier versions might not work because of breaking changes across Zola versions.
+Tested with Zola v0.19.2.
+
+Please note that earlier (and older) versions might not work because of breaking changes across Zola versions.
 
 #### Fork disclaimer
 
@@ -86,7 +88,7 @@ Example:
 
 Same as `image`, but with a few extra optional arguments:
 
-- **`caption`**
+- **`caption`** (supports markdown)
 - **`caption_position`** (center \[default\] | left | right)
 - **`caption_style`**
 
@@ -97,12 +99,44 @@ Example:
           style="width: 25%;",
           position="right",
           caption_position="left",
-          caption="Ferris, the (unofficial) Rust mascot",
-          caption_style="font-weight: bold; font-style: italic;") }}
+          caption="**Ferris**, the (unofficial) Rust mascot",
+          caption_style="font-style: italic;") }}
+```
+
+## OpenGraph
+
+To add an image to a post, set the `og_image` extra option to the desired image
+in the same directory of the markdown file:
+
+```toml
+[extra]
+og_image = "colocated_image.png"
+```
+
+Additionally, for the section pages and for posts to have a fallback image, add
+`default_og_image` to the `[extra]` section:
+
+```toml
+[extra]
+default_og_image = "static/ocean.jpg"
 ```
 
 ## Configuration
 
+### Only show the post's description
+
+On each post you can specify the following:
+
+```toml
+description = "test description"
+
+[extra]
+show_only_description = true
+```
+
+This will render `test description` under this
+particular post on the homepage instead of a summary.
+
 ### Colors
 
 Both the accent colors and background colors are
@@ -118,13 +152,14 @@ of your `config.toml`:
 [extra]
 
 # One of: blue, green, orange, pink, red.
-# Defaults to blue. 
+# Defaults to blue.
+# Append -light for light themes, e.g. blue-light
+# Or append -auto, e.g. blue-auto
 accent_color = "green"
 
-# One of: blue, dark, green, orange, pink, red.
-# Enabling dark background will also modify primary font color
-# to be darker.
-# Defaults to accent color (or, if not accent color specified, to blue). 
+# One of: blue, dark, green, orange, pink, red, light, auto
+# Enabling dark background will also modify primary font color to be darker.
+# Defaults to accent color (or, if not accent color specified, to blue).
 background_color = "dark"
 ```
 
@@ -357,7 +392,7 @@ This theme has been forked from https://github.com/panr/hugo-theme-terminal
   - Prism.js syntax highlighting is not supported (you can use
     [Zola's](https://www.getzola.org/documentation/content/syntax-highlighting/)).
 
-- All references to social media (e.g. Twitter, OpenGraph) have been removed.
+- All references to social media (e.g. Twitter) have been removed.
 
 - All references to external URLs (e.g. Google CDN) have been removed.
   This theme's static assets are meant to be served from where it's hosted.

config.toml

@@ -5,6 +5,12 @@ title = "Zola Terminimal theme"
 # Sass compilation is required
 compile_sass = true
 
+# The theme supports feeds (RSS and ATOM)
+generate_feeds = true
+
+# Use `rss.xml` for RSS feeds and `atom.xml` for ATOM.
+feed_filenames = ["rss.xml", "atom.xml"]
+
 # Optional: enable tags
 taxonomies = [
     {name = "tags"}
@@ -19,11 +25,12 @@ highlight_theme = "boron"
 
 # One of: blue, green, orange, pink, red.
 # Defaults to blue.
+# Append -light for light themes, e.g. blue-light
+# Or append -auto, e.g. blue-auto
 accent_color = "blue"
 
-# One of: blue, dark, green, orange, pink, red.
-# Enabling dark background will also modify primary font color
-# to be darker.
+# One of: blue, dark, green, orange, pink, red, light, auto
+# Enabling dark background will also modify primary font color to be darker.
 # Defaults to accent color (or, if not accent color specified, to blue).
 background_color = "blue"
 
@@ -89,3 +96,8 @@ use_full_hack_font = false
 #
 # Note that the main (index) page only has the main title.
 page_titles = "main_only"
+
+# Optional: default image to use for OpenGraph.
+#           If the page doesnt set og_image, use this one as fallback. Usefull
+#           for indexes and taxonomies' pages.
+#default_og_image = "static/ocean.jpg"

content/welcome-terminimal-theme.md

@@ -77,7 +77,7 @@ figure(src="http://rustacean.net/assets/rustacean-flat-gesture.png",
        style="width: 25%;",
        position="center",
        caption_position="left",
-       caption="Ferris, the (unofficial) Rust mascot",
+       caption="**Ferris**, the (unofficial) Rust mascot",
        caption_style="font-weight: bold; font-style: italic;")
 ```
 
@@ -85,8 +85,8 @@ figure(src="http://rustacean.net/assets/rustacean-flat-gesture.png",
           style="width: 25%;",
           position="center",
           caption_position="left",
-          caption="Ferris, the (unofficial) Rust mascot",
-          caption_style="font-weight: bold; font-style: italic;") }}
+          caption="**Ferris**, the (unofficial) Rust mascot",
+          caption_style="font-style: italic;") }}
 
 ---
 

sass/color/background_auto.scss

@@ -0,0 +1,14 @@
+:root {
+
+  @media (prefers-color-scheme: light) {
+    --background: white;
+  
+    --color: #101010;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    --background: #101010;
+  
+    --color: #A9B7C6;
+  }
+}

sass/color/background_light.scss

@@ -0,0 +1,3 @@
+:root {
+  --background: #f0f0f0;
+}

sass/color/blue-auto.scss

@@ -0,0 +1,29 @@
+:root {
+  @media (prefers-color-scheme: dark) {
+    --accent: rgb(35,176,255);
+    --accent-alpha-70: rgba(35,176,255,.7);
+    --accent-alpha-20: rgba(35,176,255,.2);
+
+    --background: #101010;
+    --color: #f0f0f0;
+    --border-color: rgba(255,240,224,.125);
+
+    div.logo {
+      color: black;
+    }
+  
+  }
+  @media (prefers-color-scheme: light) {
+    --accent: rgb(32,128,192);
+    --accent-alpha-70: rgba(32,128,192,.7);
+    --accent-alpha-20: rgba(32,128,192,.2);
+
+    --background: white;
+    --color: #201030;
+    --border-color: rgba(0,0,16,.125);
+    
+    div.logo {
+      color: white;
+    }
+  }
+}

sass/color/blue-light.scss

@@ -0,0 +1,12 @@
+:root {
+  --accent: rgb(32,128,192);
+  --accent-alpha-70: rgba(32,128,192,.7);
+  --accent-alpha-20: rgba(32,128,192,.2);
+
+  --background: white;
+  --color: #1D212C;
+  --border-color: rgba(0, 0, 0, .1);
+  div.logo {
+    color: white;
+  }
+}

sass/color/green-auto.scss

@@ -0,0 +1,29 @@
+:root {
+  @media (prefers-color-scheme: dark) {
+    --accent: rgb(120,226,160);
+    --accent-alpha-70: rgba(120,226,160,.7);
+    --accent-alpha-20: rgba(120,226,160,.2);
+  
+    --background: #101010;
+    --color: #f0f0f0;
+    --border-color: rgba(255,240,224,.125);
+    
+    div.logo {
+      color: black;
+    }
+  
+  }
+  @media (prefers-color-scheme: light) {
+    --accent: rgb(24, 192, 128);
+    --accent-alpha-70: rgba(24, 192, 128,.7);
+    --accent-alpha-20: rgba(24, 192, 128,.2);
+
+    --background: white;
+    --color: #201030;
+    --border-color: rgba(0,0,16,.125);
+    
+    div.logo {
+      color: white;
+    }
+  }
+}

sass/color/green-light.scss

@@ -0,0 +1,12 @@
+:root {
+  --accent: rgb(24, 192, 128);
+  --accent-alpha-70: rgba(24, 192, 128,.7);
+  --accent-alpha-20: rgba(24, 192, 128,.2);
+
+  --background: white;
+  --color: #1D212C;
+  --border-color: rgba(0, 0, 0, .1);
+  div.logo {
+    color: white;
+  }
+}

sass/color/orange-auto.scss

@@ -0,0 +1,29 @@
+:root {
+  @media (prefers-color-scheme: dark) {
+    --accent: rgb(255,168,106);
+    --accent-alpha-70: rgba(255,168,106,.7);
+    --accent-alpha-20: rgba(255,168,106,.2);
+  
+    --background: #101010;
+    --color: #f0f0f0;
+    --border-color: rgba(255,240,224,.125);
+    
+    div.logo {
+      color: black;
+    }
+  
+  }
+  @media (prefers-color-scheme: light) {
+    --accent: rgb(240,128,48);
+    --accent-alpha-70: rgba(240,128,48,.7);
+    --accent-alpha-20: rgba(240,128,48,.2);
+  
+    --background: white;
+    --color: #201030;
+    --border-color: rgba(0,0,16,.125);
+
+    div.logo {
+      color: white;
+    }
+  }
+}

sass/color/orange-light.scss

@@ -0,0 +1,12 @@
+:root {
+  --accent: rgb(240,128,48);
+  --accent-alpha-70: rgba(240,128,48,.7);
+  --accent-alpha-20: rgba(240,128,48,.2);
+
+  --background: white;
+  --color: #1D212C;
+  --border-color: rgba(0, 0, 0, .1);
+  div.logo {
+    color: white;
+  }
+}

sass/color/pink-auto.scss

@@ -0,0 +1,29 @@
+:root {
+  @media (prefers-color-scheme: dark) {
+    --accent: rgb(224,64,192);
+    --accent-alpha-70: rgba(224,64,192);
+    --accent-alpha-20: rgba(224,64,192,.2);
+
+    --background: #101010;
+    --color: #f0f0f0;
+    --border-color: rgba(255,240,224,.125);
+    
+    div.logo {
+      color: black;
+    }
+  
+  }
+  @media (prefers-color-scheme: light) {
+    --accent: rgb(238,114,241);
+    --accent-alpha-70: rgba(238,114,241,.7);
+    --accent-alpha-20: rgba(238,114,241,.2);
+  
+    --background: white;
+    --color: #201030;
+    --border-color: rgba(0,0,16,.125);
+    
+    div.logo {
+      color: white;
+    }
+  }
+}

sass/color/pink-light.scss

@@ -0,0 +1,12 @@
+:root {
+  --accent: rgb(224,64,192);
+  --accent-alpha-70: rgba(224,64,192);
+  --accent-alpha-20: rgba(224,64,192,.2);
+
+  --background: white;
+  --color: #1D212C;
+  --border-color: rgba(0, 0, 0, .1);
+  div.logo {
+    color: white;
+  }
+}

sass/color/red-auto.scss

@@ -0,0 +1,29 @@
+:root {
+  @media (prefers-color-scheme: dark) {
+    --accent: rgb(255,98,102);
+    --accent-alpha-70: rgba(255,98,102,.7);
+    --accent-alpha-20: rgba(255,98,102,.2);
+
+    --background: #101010;
+    --color: #f0f0f0;
+    --border-color: rgba(255,240,224,.125);
+    
+    div.logo {
+      color: black;
+    }
+  
+  }
+  @media (prefers-color-scheme: light) {
+    --accent: rgb(240,48,64);
+    --accent-alpha-70: rgba(240,48,64,.7);
+    --accent-alpha-20: rgba(240,48,64,.2);
+  
+    --background: white;
+    --color: #201030;
+    --border-color: rgba(0,0,16,.125);
+    
+    div.logo {
+      color: white;
+    }
+  }
+}

sass/color/red-light.scss

@@ -0,0 +1,12 @@
+:root {
+  --accent: rgb(240,48,64);
+  --accent-alpha-70: rgba(240,48,64,.7);
+  --accent-alpha-20: rgba(240,48,64,.2);
+
+  --background: white;
+  --color: #1D212C;
+  --border-color: rgba(0, 0, 0, .1);
+  div.logo {
+    color: white;
+  }
+}

templates/404.html

@@ -1,7 +1,7 @@
 {% extends "index.html" %}
 
 {% block title %}
-404
+404 | {{ config.title }}
 {% endblock title %}
 
 {% block header_menu %}

templates/index.html

@@ -11,9 +11,20 @@
     <title>{%- block title %}{{ config.title }}{% endblock title -%}</title>
     {{ head_macros::head(config=config) }}
 
-    {%- if config.generate_feed %}
-        <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path="rss.xml") | safe }}">
-    {% endif -%}
+    {%- block open_graph %}{{ head_macros::open_graph(config=config) }}{% endblock open_graph -%}
+
+    {%- if config.generate_feeds %}
+        {%- for feed in config.feed_filenames %}
+            {%- if feed is containing('atom') %}
+                <link rel="alternate" type="application/atom+xml" title="{{ config.title }} Atom Feed" href="{{ get_url(path=feed, trailing_slash=false, lang=lang) | safe }}" />
+            {%- endif %}
+
+            {%- if feed is containing('rss') %}
+                <link rel="alternate" type="application/rss+xml" title="{{ config.title }} RSS Feed" href="{{ get_url(path=feed, trailing_slash=false, lang=lang) | safe }}" />
+            {%- endif %}
+
+        {%- endfor %}
+    {%- endif -%}
 
     {%- if config.extra.favicon %}
         <link rel="shortcut icon" type="{{ config.extra.favicon_mimetype | default(value="image/x-icon") | safe }}" href="{{ config.extra.favicon | safe }}">
@@ -66,7 +77,8 @@
             {%- for page in show_pages %}
                 <div class="post on-list">
                     {{ post_macros::header(page=page) }}
-                    {{ post_macros::content(page=page, summary=true) }}
+
+                    {{ post_macros::content(page=page, summary=true, show_only_description=page.extra.show_only_description | default(value=false)) }}
                 </div>
             {% endfor -%}
             <div class="pagination">

templates/macros/head.html

@@ -1,3 +1,5 @@
+{% import "macros/title.html" as title_macros -%}
+
 {% macro head(config) %}
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
@@ -24,3 +26,69 @@
 {% endif -%}
 
 {% endmacro head %}
+
+
+{# Extra Meta tags for OpenGraph and Twitter cards #}
+{% macro open_graph(config) %}
+{%- if page %}
+    {%- set permalink = page.permalink %}
+    {%- set title = title_macros::title(page_title=page.title, main_title=config.title) %}
+    {%- set description = page.description %}
+    {%- set type = "article" %}
+    {%- if page.extra and page.extra.og_image %}
+        {%- if page.colocated_path %}
+            {%- set og_image = page.path ~ page.extra.og_image %}
+        {%- else %}
+            {%- set og_image = page.extra.og_image %}
+        {% endif %}
+    {%- elif config.extra.default_og_image %}
+        {%- set og_image = config.extra.default_og_image %}
+    {%- endif %}
+{%- elif section %}
+    {%- set permalink = section.permalink %}
+    {%- set title = title_macros::title(page_title=section.title, main_title=config.title) %}
+    {%- set description = section.description | default(value=config.description) %}
+    {%- set type = "website" %}
+    {%- if section.extra and section.extra.og_image %}
+        {%- set og_image = section.extra.og_image %}
+    {%- elif config.extra.default_og_image %}
+        {%- set og_image = config.extra.default_og_image %}
+    {%- endif %}
+{%- else %}
+    {# For 404 and taxonomy pages #}
+    {%- if taxonomy %}
+        {% if term %}
+            {%- set permalink = term.permalink %}
+            {%- set title = title_macros::title(page_title=term.name, main_title=config.title) %}
+            {%- set description = "All posts tagged " ~ term.name %}
+        {% else %}
+            {%- set permalink = config.base_url ~ "/" ~ taxonomy.slug %}
+            {%- set title = title_macros::title(page_title=taxonomy.name, main_title=config.title) %}
+            {%- set description = "All " ~ taxonomy.name %}
+        {% endif %}
+    {%- else %}
+        {%- set permalink = config.base_url %}
+        {%- set title = title_macros::title(page_title="404", main_title=config.title) %}
+        {%- set description = "Page not found" %}
+    {%- endif %}
+    {%- set type = "website" %}
+    {%- if config.extra.default_og_image %}
+        {%- set og_image = config.extra.default_og_image %}
+    {%- endif %}
+{%- endif -%}{# #}
+    <meta name="description" content="{{ description | safe }}">
+
+    <meta property="og:description" content="{{ description | safe }}">
+    <meta property="og:title" content="{{ title | safe }}">
+    <meta property="og:type" content="{{ type }}">
+    <meta property="og:url" content="{{ permalink | safe }}">
+{% if og_image %}
+    <meta property="og:image" content="{{ get_url(path=og_image) }}">
+    <meta name="twitter:image" content="{{ get_url(path=og_image) }}">
+{% endif %}
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:description" content="{{ description | safe }}">
+    <meta name="twitter:title" content="{{ title | safe }}">
+    <meta property="twitter:domain" content="{{ config.base_url | replace(from="https://", to="") }}">
+    <meta property="twitter:url" content="{{ permalink | safe }}">
+{% endmacro open_graph %}

templates/macros/post.html

@@ -1,5 +1,9 @@
-{% macro content(page, summary) %}
-    {%- if summary and page.summary %}
+{% macro content(page, summary, show_only_description) %}
+    {%- if show_only_description %}
+        <div class="post-content">
+            {{ page.description | safe }}
+        </div>
+    {% elif summary and page.summary %}
         <div class="post-content">
             {{ page.summary | safe }}
         </div>
@@ -11,6 +15,7 @@
             </a>
         </div>
     {% else %}
+        {#- full content -#}
         <div class="post-content">
             {{ page.content | safe }}
         </div>
@@ -28,31 +33,33 @@
 
 
 {% macro earlier_later(page) %}
-    {%- if config.extra.enable_post_view_navigation and page.lower or page.higher %}
-        <div class="pagination">
-            <div class="pagination__title">
-                <span class="pagination__title-h">{{ config.extra.post_view_navigation_prompt }}</span>
-                <hr />
+    {%- if config.extra.enable_post_view_navigation %}
+        {%- if page.lower or page.higher %}
+            <div class="pagination">
+                <div class="pagination__title">
+                    <span class="pagination__title-h">{{ config.extra.post_view_navigation_prompt }}</span>
+                    <hr />
+                </div>
+                <div class="pagination__buttons">
+                    {%- if page.higher %}
+                        <span class="button previous">
+                            <a href="{{ page.higher.permalink | safe }}">
+                                <span class="button__icon">←</span>&nbsp;
+                                <span class="button__text">{{ page.higher.title }}</span>
+                            </a>
+                        </span>
+                    {% endif %}
+                    {% if page.lower %}
+                        <span class="button next">
+                            <a href="{{ page.lower.permalink | safe }}">
+                                <span class="button__text">{{ page.lower.title }}</span>&nbsp;
+                                <span class="button__icon">→</span>
+                            </a>
+                        </span>
+                    {% endif -%}
+                </div>
             </div>
-            <div class="pagination__buttons">
-                {%- if page.higher %}
-                    <span class="button previous">
-                        <a href="{{ page.higher.permalink | safe }}">
-                            <span class="button__icon">←</span>&nbsp;
-                            <span class="button__text">{{ page.higher.title }}</span>
-                        </a>
-                    </span>
-                {% endif %}
-                {% if page.lower %}
-                    <span class="button next">
-                        <a href="{{ page.lower.permalink | safe }}">
-                            <span class="button__text">{{ page.lower.title }}</span>&nbsp;
-                            <span class="button__icon">→</span>
-                        </a>
-                    </span>
-                {% endif -%}
-            </div>
-        </div>
+        {% endif -%}
     {% endif -%}
 {% endmacro earlier_later %}
 

templates/page.html

@@ -7,7 +7,7 @@
 {% block content %}
     <div class="post">
         {{ post_macros::header(page=page) }}
-        {{ post_macros::content(page=page, summary=false) }}
+        {{ post_macros::content(page=page, summary=false, show_only_description=false) }}
         {{ post_macros::earlier_later(page=page) }}
     </div>
 {% endblock content %}

templates/shortcodes/figure.html

@@ -1,8 +1,8 @@
 {% if src %}
   <figure class="{% if position %}{{ position }}{% else -%} center {%- endif %}" >
-    <img src="{{ src | safe }}"{% if alt %} alt="{{ alt }}"{% endif %}{% if style %} style="{{ style }}"{% endif %} />
+    <img src="{{ src | safe }}"{% if alt %} alt="{{ alt }}"{% endif %}{% if style %} style="{{ style }}"{% endif %} decoding="async" loading="lazy"/>
     {% if caption %}
-      <figcaption class="{% if caption_position %}{{ caption_position }}{% else -%} center {%- endif %}"{% if caption_style %} style="{{ caption_style | safe }}"{% endif %}>{{ caption }}</figcaption>
+      <figcaption class="{% if caption_position %}{{ caption_position }}{% else -%} center {%- endif %}"{% if caption_style %} style="{{ caption_style | safe }}"{% endif %}>{{ caption | markdown() | safe }}</figcaption>
     {% endif %}
   </figure>
 {% endif %}

templates/shortcodes/image.html

@@ -4,5 +4,5 @@
     {# ... then prepend the site's base URL to the image's URL. #}
     {% set src = config.base_url ~ src %}
   {% endif %}
-  <img src="{{ src | safe }}"{% if alt %} alt="{{ alt }}"{% endif %} class="{% if position %}{{ position }}{% else -%} center {%- endif %}" {%- if style %} style="{{ style | safe }}" {%- endif %} />
+  <img src="{{ src | safe }}"{% if alt %} alt="{{ alt }}"{% endif %} class="{% if position %}{{ position }}{% else -%} center {%- endif %}" {%- if style %} style="{{ style | safe }}" {%- endif %} decoding="async" loading="lazy"/>
 {% endif %}

templates/tags/single.html

@@ -12,7 +12,7 @@
             ({{ term.pages | length }} post{{ term.pages | length | pluralize }})
         </h1>
 
-        <a href="{{ config.base_url | safe }}/tags">
+        <a href="{{ config.base_url | safe }}/tags/">
             Show all tags
         </a>
 

theme.toml

@@ -20,11 +20,13 @@ repo = "https://github.com/panr/hugo-theme-terminal"
 [extra]
 
 # One of: blue, green, orange, pink, red.
+# Defaults to blue.
+# Append -light for light themes, e.g. blue-light
+# Or append -auto, e.g. blue-auto
 accent_color = "blue"
 
-# One of: blue, dark, green, orange, pink, red.
-# Enabling dark background will also modify primary font color
-# to be darker.
+# One of: blue, dark, green, orange, pink, red, light, auto
+# Enabling dark background will also modify primary font color to be darker.
 # Defaults to accent color (or, if not accent color specified, to blue).
 background_color = "blue"