feat: Add CommentBox.io and Disqus

reinhart1010 · May 31, 2023 · bb847e5 · bb847e5
1 parent cef63e7
commit bb847e5
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -117,12 +117,14 @@ ham:
  content: BBBBBB
  contributing: # Additional metadata for "Contribute to This Page" section on sidebar
  discuss: # For "Discuss" (or "Talk page" on MediaWiki)
- type: url | custom | facebook | giscus | telegram | utterances
+ type: url | custom | commentbox.io | disqus | facebook | giscus | telegram | utterances
  url: https://github.com/reinhart1010/HAM/discussions/
  view_source_base_url: https://github.com/reinhart1010/HAM/blob/main/ # The base URL to publicly view the original (Markdown) source code
  issue_url: https://github.com/reinhart1010/HAM/issues/ # The URL to report an issue related to site or content
 ```
 
+Note: You can also override the whole favicon settings (either to entirely remove, or adding mobile or browser-specific icon formats) by overriding `_includes/favicon.html`.
+
 ### Comments
 HAM provides built-in support for Facebook, Giscus, Telegram, and Utteranc.es widgets plugins. However, you can also add your own widgets or links by following these instructions.
 
@@ -147,6 +149,28 @@ ham:
  type: custom
 ```
 
+#### CommentBox.io
+To set up CommentBox.io for HAM, [follow their installation instructions](https://commentbox.io), and modify the `_config.yml` according to the values obtained from the generated HTML snippet.
+
+```yaml
+ham:
+ contributing:
+ discuss:
+ type: commentbox.io
+ project_id: CommentBox.io Project ID
+```
+
+#### Disqus
+To set up Disqus for HAM, [follow their installation instructions](https://commentbox.io), and modify the `_config.yml` according to the values obtained from the generated HTML snippet.
+
+```yaml
+ham:
+ contributing:
+ discuss:
+ type: disqus
+ forum_shortname: example-forum # Disqus forum shortname, such as `example-forum` from `https://example-forum.disqus.com`.
+```
+
 #### Facebook
 HAM includes an external JavaScript from Facebook in order to render the Facebook Comments Widget. You are also required to register your website as an app on Facebook, [switch from Development Mode to Live/Public Mode](https://developers.facebook.com/docs/development/build-and-test/app-modes), and insert your App ID and preferred language into the configuration below.
 

diff --git a/_includes/comments.html b/_includes/comments.html
@@ -1,50 +1,49 @@
-{% if page.contributing != null || site.ham.contributing != null %}
- {% if page.contributing.discuss.type != 'url' || site.ham.contributing.discuss.type != 'url' %}
+{% assign contributing = page.contributing | default: site.ham.contributing %}
+{% if contributing != null %}
+ {% if contributing.discuss.type != 'url' %}
  <h5 id="discuss" class="sidebar-title">Discuss this page</h5>
  <div class="sidebar-title">
- {% if page.contributing.discuss.type != null %}
- {% case page.contributing.discuss.type %}
- {% when 'custom' %}
- {% include custom-comments.html %}
- {% when 'facebook' %}
- {% if page.contributing.discuss.facebook_app_id != null %}
- <div id="fb-root"></div>
- <script async defer crossorigin="anonymous" src="https://connect.facebook.net/{{ page.contributing.discuss.lang }}/sdk.js#xfbml=1&version=v17.0&appId={{ page.contributing.discuss.facebook_app_id }}&autoLogAppEvents=1" nonce="mqsBinib"></script>
- <div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-width="" data-numposts="5"></div>
- {% endif %}
- {% when 'giscus' %}
- <script src="https://giscus.app/client.js" data-repo="{{ page.contributing.discuss.repo }}" data-repo-id="{{ page.contributing.discuss.repo_id }}" data-category="{{ page.contributing.discuss.category }}" data-category-id="{{ page.contributing.discuss.category_id }}" data-mapping="{{ page.contributing.discuss.mapping }}" data-reactions-enabled="{{ page.contributing.discuss.reactions_enabled | default: 1 }}" data-emit-metadata="{{ page.contributing.discuss.emit_metadata | default: 0 }}" data-theme="{{ page.contributing.discuss.theme | default: 'preferred_color_scheme' }}" data-lang="{{ page.contributing.discuss.lang | default: 'en' }}" crossorigin="anonymous" async></script>
- {% when 'telegram' %}
- <script src="https://telegram.org/js/telegram-widget.js?15" {% if page.contributing.discuss.telegram_discussion != null %} data-telegram-discussion="{{ page.contributing.discuss.telegram_discussion }}" {% endif %} data-comments-limit="{{ page.contributing.discuss.comments_limit | default: '5' }}" {% if page.contributing.discuss.height != null %} data-height="{{ page.contributing.discuss.height }}" {% endif %} data-color="{{ page.contributing.discuss.color | default: '319BE6' }}" data-dark-color="{{ page.contributing.discuss.color | default: '4BA3E2' }}" data-colorful="{{ page.contributing.discuss.colorful | default: 0 }}" data-dark="{{ page.contributing.discuss.dark | default: 0 }}" crossorigin="anonymous" async></script>
- {% when 'utterances' %}
- <script src="https://utteranc.es/client.js" repo="{{ page.contributing.discuss.repo }}" issue-term="{{ page.contributing.discuss.issue_term }}"
- {% if page.contributing.discuss.label != null %}
- label="{{ page.contributing.discuss.label }}"
- {% endif %}
- theme="{{ page.contributing.discuss.theme | default: 'preferred-color-scheme' }}" crossorigin="anonymous" async></script>
- {% endcase %}
- {% else %}
- {% case site.ham.contributing.discuss.type %}
- {% when 'custom' %}
- {% include custom-comments.html %}
- {% when 'facebook' %}
- {% if site.ham.contributing.discuss.facebook_app_id != null %}
- <div id="fb-root"></div>
- <script async defer crossorigin="anonymous" src="https://connect.facebook.net/{{ site.ham.contributing.discuss.lang }}/sdk.js#xfbml=1&version=v17.0&appId={{ site.ham.contributing.discuss.facebook_app_id }}&autoLogAppEvents=1" nonce="mqsBinib"></script>
- <div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-width="" data-numposts="5"></div>
- {% endif %}
- {% when 'giscus' %}
- <script src="https://giscus.app/client.js" data-repo="{{ site.ham.contributing.discuss.repo }}" data-repo-id="{{ site.ham.contributing.discuss.repo_id }}" data-category="{{ site.ham.contributing.discuss.category }}" data-category-id="{{ site.ham.contributing.discuss.category_id }}" data-mapping="{{ site.ham.contributing.discuss.mapping }}" data-reactions-enabled="{{ site.ham.contributing.discuss.reactions_enabled | default: 1 }}" data-emit-metadata="{{ site.ham.contributing.discuss.emit_metadata | default: 0 }}" data-theme="{{ site.ham.contributing.discuss.theme | default: 'preferred_color_scheme' }}" data-lang="{{ site.ham.contributing.discuss.lang | default: 'en' }}" crossorigin="anonymous" async></script>
- {% when 'telegram' %}
- <script src="https://telegram.org/js/telegram-widget.js?15" {% if site.ham.contributing.discuss.telegram_discussion != null %} data-telegram-discussion="{{ site.ham.contributing.discuss.telegram_discussion }}" {% endif %} data-comments-limit="{{ site.ham.contributing.discuss.comments_limit | default: '5' }}" {% if site.ham.contributing.discuss.height != null %} data-height="{{ site.ham.contributing.discuss.height }}" {% endif %} data-color="{{ site.ham.contributing.discuss.color | default: '319BE6' }}" data-dark-color="{{ site.ham.contributing.discuss.color | default: '4BA3E2' }}" data-colorful="{{ site.ham.contributing.discuss.colorful | default: 0 }}" data-dark="{{ site.ham.contributing.discuss.dark | default: 0 }}" crossorigin="anonymous" async></script>
- {% when 'utterances' %}
- <script src="https://utteranc.es/client.js" repo="{{ site.ham.contributing.discuss.repo }}" issue-term="{{ site.ham.contributing.discuss.issue_term }}"
- {% if site.ham.contributing.discuss.label != null %}
- label="{{ site.ham.contributing.discuss.label }}"
- {% endif %}
- theme="{{ site.ham.contributing.discuss.theme | default: 'preferred-color-scheme' }}" crossorigin="anonymous" async></script>
- {% endcase %}
- {% endif %}
+ {% case contributing.discuss.type %}
+ {% when 'custom' %}
+ {% include custom-comments.html %}
+ {% when 'commentbox.io %}
+ <div class="commentbox"></div>
+ <script src="https://unpkg.com/commentbox.io/dist/commentBox.min.js"></script>
+ <script>commentBox("{{ page.project_id }}")</script>
+ {% when 'disqus' %}
+ <div id="disqus_thread"></div>
+ <script>
+ var disqus_config = function () {
+ this.page.url = "{{ page.url }}";
+ this.page.identifier = "{{ page.url }}"; 
+ };
+ (function() { 
+ var d = document, s = d.createElement('script');
+ s.src = 'https://{{ contributing.discuss.forum_shortname }}.disqus.com/embed.js';
+ s.setAttribute('data-timestamp', +new Date());
+ (d.head || d.body).appendChild(s);
+ })();
+ </script>
+ {% when 'facebook' %}
+ {% if contributing.discuss.facebook_app_id != null %}
+ <div id="fb-root"></div>
+ <script async defer crossorigin="anonymous" src="https://connect.facebook.net/{{ contributing.discuss.lang }}/sdk.js#xfbml=1&version=v17.0&appId={{ contributing.discuss.facebook_app_id }}&autoLogAppEvents=1" nonce="mqsBinib"></script>
+ <div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-width="" data-numposts="5"></div>
+ {% endif %}
+ {% when 'giscus' %}
+ <script src="https://giscus.app/client.js" data-repo="{{ contributing.discuss.repo }}" data-repo-id="{{ contributing.discuss.repo_id }}" data-category="{{ contributing.discuss.category }}" data-category-id="{{ contributing.discuss.category_id }}" data-mapping="{{ contributing.discuss.mapping }}" data-reactions-enabled="{{ contributing.discuss.reactions_enabled | default: 1 }}" data-emit-metadata="{{ contributing.discuss.emit_metadata | default: 0 }}" data-theme="{{ contributing.discuss.theme | default: 'preferred_color_scheme' }}" data-lang="{{ contributing.discuss.lang | default: 'en' }}" crossorigin="anonymous" async></script>
+ {% when 'telegram' %}
+ <script src="https://telegram.org/js/telegram-widget.js?15" {% if contributing.discuss.telegram_discussion != null %} data-telegram-discussion="{{ contributing.discuss.telegram_discussion }}" {% endif %} data-comments-limit="{{ contributing.discuss.comments_limit | default: '5' }}" {% if contributing.discuss.height != null %} data-height="{{ contributing.discuss.height }}" {% endif %} data-color="{{ contributing.discuss.color | default: '319BE6' }}" data-dark-color="{{ contributing.discuss.color | default: '4BA3E2' }}" data-colorful="{{ contributing.discuss.colorful | default: 0 }}" data-dark="{{ contributing.discuss.dark | default: 0 }}" crossorigin="anonymous" async></script>
+ {% when 'utterances' %}
+ <script src="https://utteranc.es/client.js" repo="{{ contributing.discuss.repo }}" issue-term="{{ contributing.discuss.issue_term }}"
+ {% if contributing.discuss.label != null %}
+ label="{{ contributing.discuss.label }}"
+ {% endif %}
+ theme="{{ contributing.discuss.theme | default: 'preferred-color-scheme' }}" crossorigin="anonymous" async></script>
+ {% endcase %}
+ <noscript>
+ Please enable JavaScript to view comments and discussions
+ </noscript>
  </div>
  {% endif %}
 {% endif %}
diff --git a/_includes/navbar.html b/_includes/navbar.html
@@ -15,7 +15,7 @@
  <span class="navbar-text d-none d-sm-block">{{ site.tagline }}</span> <!-- text-monospace = font-family shifted to monospace -->
  {% endif %}
  <div class="ml-auto">
- <button onClick="halfmoon.toggleDarkMode()" class="btn btn-action bg-dark-lm bg-white-dm text-white-lm text-dark-dm">
+ <button onClick="halfmoon.toggleDarkMode()" class="btn btn-action">
  <i class="bi bi-moon-stars" aria-hidden="true"></i>
  <span class="sr-only">Toggle Dark Mode</span>
  </button>

diff --git a/assets/main.css b/assets/main.css
@@ -1,7 +1,9 @@
 /* TODO: Add your CSS here (Jekyll will override it) */
 :root {
- --font-family-sans: "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Cantarell, "Open Sans", "Noto Sans", Piboto, Ubuntu, "Roboto Flex", Roboto, Helvetica, FreeSans, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
- --font-family-serif: 'Linux Libertine', 'Linux Libertine Display O', Georgia, 'Noto Serif', 'Times New Roman', Times, serif;
+ --font-family-sans: "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Cantarell, "Open Sans", "Noto Sans", Piboto, Ubuntu, "Roboto Flex", Roboto, Helvetica, FreeSans, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Noto Emoji";
+ --font-family-sans-display: "Segoe UI Variable Display", -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Cantarell, "Open Sans", "Noto Sans", Piboto, Ubuntu, "Roboto Flex", Roboto, Helvetica, FreeSans, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Noto Emoji";
+ --font-family-serif: ui-serif, "Linux Libertine", 'Linux Libertine O', "Roboto Serif", Georgia, "Noto Serif", "Times New Roman", Times, serif;
+ --font-family-serif-display: ui-serif, "Linux Libertine Display", 'Linux Libertine Display O', "Roboto Serif", Georgia, "Noto Serif", "Times New Roman", Times, serif;
  --heading-font-weight: 700;
 }
 body {
@@ -22,11 +24,11 @@ body {
 
 /* Use serif font for headings (a-la MediaWiki) */
 .article-wrapper h1, .article-wrapper h2, .content-wrapper .h1, .content-wrapper .h2 {
- font-family: var(--font-family-serif);
+ font-family: var(--font-family-serif-display);
  font-weight: 400;
 }
 .article-sitesub {
- font-family: var(--font-family-serif);
+ font-family: var(--font-family-serif-display);
  font-style: italic;
 }
 

diff --git a/jekyll-ham.gemspec b/jekyll-ham.gemspec
@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
  spec.name = "jekyll-ham"
- spec.version = "0.3.1"
+ spec.version = "0.3.2"
  spec.authors = ["Reinhart Previano Koentjoro"]
  spec.email = ["[email protected]"]