✨ feat: add support for webmentions (#485)

Co-authored-by: Jeremiah Russell <47631109+jerusdp@users.noreply.github.com>
Co-authored-by: Henri Bourcereau <henri.bourcereau@gmail.com>
Co-authored-by: welpo <welpo@users.noreply.github.com>

templates/page.html

@@ -102,10 +102,11 @@ Current section extra: {% if current_section %}{{ current_section.extra | json_e
 {# End debugging #}
 
 <main>
-    <article>
-        <h1 class="article-title">
+    <article class="h-entry">
+        <h1 class="p-name article-title">
             {{ page.title | markdown(inline=true) | safe }}
         </h1>
+        <a class="u-url u-uid" href="{{ page.permalink | safe }}"></a>
 
         <ul class="meta">
             {#- Draft indicator -#}
@@ -122,14 +123,17 @@ Current section extra: {% if current_section %}{{ current_section.extra | json_e
                 {%- endif -%}
 
                 {%- if author_list | length == 1 -%}
-                    {%- set author_string = author_list.0 -%}
+                    {%- set author_string = '<span class="p-author">' ~ author_list.0 ~ '</span>' -%}
                 {%- else -%}
                     {%- set last_author = author_list | last -%}
                     {%- set other_authors = author_list | slice(end=-1) -%}
                     {%- set author_separator = macros_translate::translate(key="author_separator", default=", ", language_strings=language_strings) -%}
+                   {%- set author_separator = '</span>' ~ author_separator ~ '<span class="p-author">' -%}
                     {%- set conjunction = macros_translate::translate(key="author_conjunction", default=" and ", language_strings=language_strings) -%}
+                    {%- set conjunction = '</span>' ~ conjunction ~ '<span class="p-author">' -%}
                     {%- set author_string = other_authors | join(sep=author_separator) -%}
                     {%- set author_string = author_string ~ conjunction ~ last_author -%}
+                    {%- set author_string = '<span class="p-author">' ~ author_string ~ '</span>' -%}
                 {%- endif -%}
 
                 {%- set by_author = macros_translate::translate(key="by_author", default="By $AUTHOR", language_strings=language_strings) -%}
@@ -145,7 +149,7 @@ Current section extra: {% if current_section %}{{ current_section.extra | json_e
 
             {#- Date -#}
             {% if page.date and macros_settings::evaluate_setting_priority(setting="show_date", page=page, default_global_value=true) == "true" %}
-                <li>{%- if previous_visible -%}{{ separator_with_class | safe }}{%- endif -%}{{ macros_format_date::format_date(date=page.date, short=true, language_strings=language_strings) }}</li>
+                <li><time class="dt-published" datetime="{{ page.date }}">{%- if previous_visible -%}{{ separator_with_class | safe }}{%- endif -%}{{ macros_format_date::format_date(date=page.date, short=true, language_strings=language_strings) }}</time></li>
                 {#- Variable to keep track of whether we've shown a section, to avoid separators as the first element -#}
                 {%- set previous_visible = true -%}
             {% endif %}
@@ -160,7 +164,7 @@ Current section extra: {% if current_section %}{{ current_section.extra | json_e
             {%- if page.taxonomies and page.taxonomies.tags -%}
                 <li class="tag">{%- if previous_visible -%}{{ separator_with_class | safe }}{%- endif -%}{{- macros_translate::translate(key="tags", default="tags", language_strings=language_strings) | capitalize -}}:&nbsp;</li>
                 {%- for tag in page.taxonomies.tags -%}
-                    <li class="tag"><a href="{{ get_taxonomy_url(kind='tags', name=tag, lang=lang) | safe }}">{{ tag }}</a>
+                    <li class="tag"><a class="p-category" href="{{ get_taxonomy_url(kind='tags', name=tag, lang=lang) | safe }}">{{ tag }}</a>
                     {%- if not loop.last -%}
                         ,&nbsp;
                     {%- endif -%}
@@ -175,7 +179,7 @@ Current section extra: {% if current_section %}{{ current_section.extra | json_e
                 {%- set formatted_date = macros_format_date::format_date(date=page.updated, short=true, language_strings=language_strings) -%}
                 {%- set updated_str = last_updated_str | replace(from="$DATE", to=formatted_date) -%}
                 {%- set previous_visible = true -%}
-                </ul><ul class="meta last-updated"><li>{{ updated_str }}</li>
+                </ul><ul class="meta last-updated"><li><time class="dt-updated" datetime="{{ page.updated }}">{{ updated_str }}</time></li>
                 {#- Show link to remote changes if enabled -#}
                 {%- if config.extra.remote_repository_url and macros_settings::evaluate_setting_priority(setting="show_remote_changes", page=page, default_global_value=true) == "true" -%}
                     <li>{%- if previous_visible -%}{{ separator_with_class | safe }}{%- endif -%}<a class="external" href="{% include "partials/history_url.html" %}" {{ blank_target }} rel="{{ rel_attributes }}">{{ macros_translate::translate(key="see_changes", default="See changes", language_strings=language_strings) }}</a></li>
@@ -227,7 +231,13 @@ Current section extra: {% if current_section %}{{ current_section.extra | json_e
             {{ macros_toc::toc(page=page, header=true, language_strings=language_strings) }}
         {% endif %}
 
-        <section class="body">
+        {#- Optional Summary paragraph for readers -#}
+        {% if page.description %}
+            <p class="p-summary" hidden>{{ page.description }}</p>
+        {%- endif -%}
+
+
+        <section class="e-content body">
             {#- Replace series_intro placeholder -#}
             {%- set content_with_intro = page.content -%}
             {%- if "<!-- series_intro -->" in page.content -%}
@@ -334,6 +344,14 @@ Current section extra: {% if current_section %}{{ current_section.extra | json_e
             {% include "partials/comments.html" %}
         {% endif %}
 
+        {#- Webmentions -#}
+        {%- set global_webmentions_enabled = config.extra.webmentions.enable | default(value=false) -%}
+        {%- set page_webmentions_enabled = page.extra.webmentions | default(value=global_webmentions_enabled) -%}
+        {%- set webmentions_enabled = global_webmentions_enabled and page_webmentions_enabled != false or page_webmentions_enabled == true -%}
+        {%- if webmentions_enabled -%}
+            {%- include "partials/webmentions.html" -%}
+        {%- endif -%}
+
     </article>
 </main>
 

templates/partials/content_security_policy.html

@@ -54,6 +54,11 @@ content="default-src 'self'
         {%- set script_src = script_src ~ " " ~ " cdn.jsdelivr.net" -%}
     {%- endif -%}
 
+    {#- Check if a webmention system is enabled to allow the necessary domains and directives -#}
+    {%- if config.extra.webmentions.enable -%}
+        {%- set connect_src = connect_src ~ " webmention.io" -%}
+    {%- endif -%}
+
     {#- Append WebSocket for Zola serve mode -#}
     {%- if config.mode == "serve" -%}
         {%- set connect_src = connect_src ~ " ws:" -%}

templates/partials/extra_features.html

@@ -21,9 +21,16 @@
             </div>
         {% endif %}
 
-        {# Button to go to the comment section #}
-        {% if comment_system %}
-            <a href="#comments" id="comments-button" class="no-hover-padding" title="{{ macros_translate::translate(key="go_to_comments", default="Go to comments section", language_strings=language_strings) }}">
+        {# Button to go to the comment/webmentions section #}
+        {% if comment_system or config.extra.webmentions.enable %}
+            {%- if comment_system -%}
+                {#- Comments are shown above webmentions -#}
+                {%- set comments_id = "comments" -%}
+            {%- else -%}
+                {%- set comments_id = "webmentions" -%}
+            {%- endif -%}
+
+            <a href="#{{- comments_id -}}" id="comments-button" class="no-hover-padding" title="{{ macros_translate::translate(key="go_to_comments", default="Go to comments section", language_strings=language_strings) }}">
                 <svg viewBox="0 0 20 20" fill="currentColor"><path d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" fill-rule="evenodd"/></svg>
             </a>
         {% endif %}

templates/partials/webmentions.html

@@ -0,0 +1,51 @@
+{# Incorporate webmention.io links and script into the page head.
+1. Provide the link to the webmention data in the at webmention.io.
+2. Link to the stylesheet for styling webmentions on a page.
+3. Add and configure the javascript to fetch and display the webmentions collected at webmention.io. #}
+
+<link rel="webmention" href="https://webmention.io/{{ config.extra.webmentions.domain }}/webmention" />
+
+{# Calculate the configured data for the script, if any #}
+
+{% set script_data = "" %}
+
+{% if config.extra.webmentions.id %}
+{% set script_data = script_data ~ "data-id=" ~ config.extra.webmentions.id %}
+{% endif %}
+
+{% if config.extra.webmentions.page_url %}
+{% set script_data = script_data ~ " data-page-url=" ~ config.extra.webmentions.page_url %}
+{% endif %}
+
+{% if config.extra.webmentions.add_urls %}
+{% set script_data = script_data ~ "data-add-urls=" ~ config.extra.webmentions.add_urls %}
+{% endif %}
+
+{% if config.extra.webmentions.wordcount %}
+{% set script_data = script_data ~ " data-wordcount=" ~ config.extra.webmentions.wordcount %}
+{% endif %}
+
+{% if config.extra.webmentions.max_webmentions %}
+{% set script_data = script_data ~ "data-max-webmentions=" ~ config.extra.webmentions.max_webmentions %}
+{% endif %}
+
+{% if config.extra.webmentions.prevent_spoofing %}
+{% set script_data = script_data ~ "data-prevent-spoofing=" ~ config.extra.webmentions.prevent_spoofing %}
+{% endif %}
+
+{% if config.extra.webmentions.sort_by %}
+{% set script_data = script_data ~ "data-sort-by=" ~ config.extra.webmentions.sort_by %}
+{% endif %}
+
+{% if config.extra.webmentions.sort_dir %}
+{% set script_data = script_data ~ "data-sort-dir=" ~ config.extra.webmentions.sort_dir %}
+{% endif %}
+
+{% if config.extra.webmentions.comments_are_reactions %}
+{% set script_data = script_data ~ " data-comments-are-reactions=" ~ config.extra.webmentions.comments_are_reactions %}
+{% endif %}
+
+<script async src="{{ get_url(path='js/webmention.min.js', trailing_slash=false, cachebust=true) | safe }}" {{ script_data }}>
+</script>
+
+<div class="webmentions-container" id="webmentions"></div>