✨ feat: add support for giscus and utterances

templates/macros/add_comments.html

@@ -8,8 +8,7 @@
     {{ 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" 
+    <div class="comments centered-text"
         {# Store required giscus data attributes in the div #}
         data-repo="{{ config.extra.giscus.repo }}"
         data-repo-id="{{ config.extra.giscus.repo_id }}"
@@ -36,14 +35,17 @@
             data-lang="{{ lang }}"
         {% endif %}
         data-lazy-loading="{{ config.extra.giscus.lazy_loading | default(value=true) }}">
+
+        {% if config.extra.giscus.automatic_loading %}
+            <script src="{{ get_url(path='js/giscus_min.js', trailing_slash=false) | safe }}" async></script>
+        {% else %}
+            <button id="load-comments" class="load-comments-button" data-script-src="{{ get_url(path='js/giscus_min.js', trailing_slash=false) | safe }}">{%- if lang != config.default_language %} {{ trans(key="load_comments" | safe, lang=lang) }}{% else %} Load comments {%- endif -%}</button>
+            <script src="{{ get_url(path='js/loadComments_min.js', trailing_slash=false) | safe }}" async></script>
+        {% endif %}
     </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" 
+    <div class="comments centered-text"
         {# Store required utterances data attributes in the div #}
         data-repo="{{ config.extra.utterances.repo }}"
         {% if config.extra.utterances.issue_term == "slug" %}
@@ -55,10 +57,15 @@
         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) }}">
+
+        {% if config.extra.utterances.automatic_loading %}
+            <script src="{{ get_url(path='js/utterances_min.js', trailing_slash=false) | safe }}" async></script>
+        {% else %}
+            <button id="load-comments" class="load-comments-button" data-script-src="{{ get_url(path='js/utterances_min.js', trailing_slash=false) | safe }}">{%- if lang != config.default_language %} {{ trans(key="load_comments" | safe, lang=lang) }}{% else %} Load comments {%- endif -%}</button>
+            <script src="{{ get_url(path='js/loadComments_min.js', trailing_slash=false) | safe }}" async></script>
+        {% endif %}
     </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 -%}

templates/macros/content.html

@@ -82,6 +82,7 @@
 
         {# Add comments if they are enabled #}
         {{ macros_add_comments::add_comments() }}
+
     </article>
 </main>