feat: add support for giscus & utterances comments

This commit is contained in:
welpo
2023-07-12 18:44:28 +02:00
parent 93c8b577b8
commit 19d120019b
17 changed files with 333 additions and 99 deletions

View File

@@ -6,6 +6,7 @@
{% import "macros/set_title.html" as macros_set_title %}
{% import "macros/paginate.html" as macros_paginate %}
{% import "macros/format_date.html" as macros_format_date %}
{% import "macros/add_comments.html" as macros_add_comments %}
<!DOCTYPE html>
<html lang="{{ lang }}">

View File

@@ -0,0 +1,64 @@
{%- macro add_comments() -%}
{% set giscus_enabled = config.extra.giscus.enabled_for_all_posts or page.extra.giscus %}
{% set utterances_enabled = config.extra.utterances.enabled_for_all_posts or page.extra.utterances %}
{# Ensure only one comment system is enabled #}
{% if giscus_enabled and utterances_enabled %}
{{ throw(message="ERROR: Multiple comment systems have been enabled for the same page. Check your config.toml and individual page settings to ensure only one comment system is activated at a time.") }}
{% elif giscus_enabled %}
{# Create a div to host giscus comments #}
<div class="comments"
{# Store required giscus data attributes in the div #}
data-repo="{{ config.extra.giscus.repo }}"
data-repo-id="{{ config.extra.giscus.repo_id }}"
data-category="{{ config.extra.giscus.category }}"
data-category-id="{{ config.extra.giscus.category_id }}"
{% if config.extra.giscus.mapping == "slug" %}
data-mapping="specific"
data-term="{{ page.slug }}"
{% else %}
data-mapping="{{ config.extra.giscus.mapping }}"
{% endif %}
data-strict="{{ config.extra.giscus.strict_title_matching }}"
data-reactions-enabled="{{ config.extra.giscus.enable_reactions }}"
{% if config.extra.giscus.comment_box_above_comments %}
data-input-position="top"
{% else %}
data-input-position="bottom"
{% endif %}
data-light-theme="{{ config.extra.giscus.light_theme }}"
data-dark-theme="{{ config.extra.giscus.dark_theme }}"
{% if config.extra.giscus.lang %}
data-lang="{{ config.extra.giscus.lang }}"
{% else %}
data-lang="{{ lang }}"
{% endif %}
data-lazy-loading="{{ config.extra.giscus.lazy_loading | default(value=true) }}">
</div>
{# giscus script to load the widget #}
<script src="{{ get_url(path='js/giscus_min.js', trailing_slash=false) | safe }}"/></script>
{% elif utterances_enabled %}
{# Create a div to host utterances comments #}
<div class="comments"
{# Store required utterances data attributes in the div #}
data-repo="{{ config.extra.utterances.repo }}"
{% if config.extra.utterances.issue_term == "slug" %}
data-issue-term="{{ page.slug }}"
{% else %}
data-issue-term="{{ config.extra.utterances.issue_term }}"
{% endif %}
data-label="{{ config.extra.utterances.label }}"
data-light-theme="{{ config.extra.utterances.light_theme }}"
data-dark-theme="{{ config.extra.utterances.dark_theme }}"
data-lazy-loading="{{ config.extra.utterances.lazy_loading | default(value=true) }}">
</div>
{# utterances script to load the widget #}
<script src="{{ get_url(path='js/utterances_min.js', trailing_slash=false) | safe }}"/></script>
{% endif %}
{%- endmacro add_comments -%}

View File

@@ -80,26 +80,9 @@
{{ page.content | safe }}
</section>
{# Add comments if they are enabled #}
{{ macros_add_comments::add_comments() }}
</article>
{# giscus / utterances comments #}
{% if config.extra.giscus.enabled_for_all_posts or page.extra.giscus %}
{# TODO: HERE GOES GISCUS SUPPORT #}
{% elif config.extra.utterances.enabled_for_all_posts or page.extra.utterances %}
<div class="comments">
<script src="https://utteranc.es/client.js"
repo="{{ config.extra.utterances.repo }}"
issue-term="{{ config.extra.utterances.issue_term }}"
label="{{ config.extra.utterances.label }}"
theme="{{ config.extra.utterances.theme }}"
{%- if config.extra.utterances.lazy_loading -%}
data-loading="lazy"
{%- endif -%}
crossorigin="anonymous"
async>
</script>
</div>
{% endif %}
</main>
{% endmacro content %}

View File

@@ -14,7 +14,7 @@
<link rel=icon href='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg" viewBox="0 0 105 55"><text y=".7em" font-size="90">{{ config.extra.favicon_emoji }}</text></svg>'>
{% endif %}
{# RSS #}
{# Feed #}
<link rel="alternate" type="application/atom+xml" title="{{ config.title }}" href="{{ get_url(path="atom.xml",
trailing_slash=false) }}">
@@ -36,7 +36,16 @@
{% endfor %}
{% endif %}
<meta name="description" content="{{ config.description }}">
<meta name="color-scheme" content="light dark">
{%- if page.description %}
<meta name="description" content="{{ page.description }}" />
{%- elif page.summary %}
<meta name="description" content="{{ page.summary }}" />
{%- else %}
<meta name="description" content="{{ config.description }}" />
{%- endif %}
{% if is_404 %}
<meta name="robots" content="noindex, follow">
{% else %}
@@ -61,11 +70,18 @@
content="default-src 'self'
{%- if config.extra.allowed_domains -%}
;
{%- set utterances_enabled = config.extra.utterances.enabled_for_all_posts or page.extra.utterances -%}
{%- set giscus_enabled = config.extra.giscus.enabled_for_all_posts or page.extra.giscus -%}
{%- for domain in config.extra.allowed_domains -%}
{{ domain.directive }} {{ domain.domains | join(sep=' ') }}
{{ domain.directive }} {{ domain.domains | join(sep=' ') -}}
{% if utterances_enabled -%}
{%- if domain.directive == "style-src" %} 'unsafe-inline'
{%- endif -%}
{% endif -%}
{# Automatically allow giscus/utterances, if enabled #}
{%- if domain.directive == "script-src" or domain.directive == "frame-src" or domain.directive == "style-src" -%}
{%- if domain.directive == "script-src" or domain.directive == "frame-src" -%}
{%- if config.extra.giscus.enabled_for_all_posts or page.extra.giscus %} giscus.app
{%- elif config.extra.utterances.enabled_for_all_posts or page.extra.utterances%} utteranc.es
{%- endif %}
@@ -77,8 +93,8 @@
{%- endif -%}">
{%- if config.extra.theme_switcher and config.extra.theme_switcher == true -%}
<script type="text/javascript" src="{{ get_url(path='js/initialize_theme_min.js') | safe }}"></script>
<script defer src="{{ get_url(path='js/main_min.js', trailing_slash=false) | safe }}"/></script>
<script type="text/javascript" src="{{ get_url(path='js/initializeTheme_min.js') | safe }}"></script>
<script defer src="{{ get_url(path='js/themeSwitcher_min.js', trailing_slash=false) | safe }}"/></script>
{%- endif -%}
</head>