Merge pull request #3 from sofianlak/feature/add-giscus

feat: add giscus, fix some issues on config, change YT contact

Author: sofianlak

_config.yml

@@ -52,8 +52,6 @@ webmaster_verifications:
 analytics:
   google:
     id: G-LXE8NNY5CR
-  goatcounter:
-    id: sofianlak
   umami:
     id: # fill in your Umami ID
     domain: # fill in your Umami domain
@@ -98,7 +96,7 @@ toc: true
 
 comments:
   # Global switch for the post comment system. Keeping it empty means disabled.
-  provider: # [disqus | utterances | giscus]
+  provider: giscus # [disqus | utterances | giscus]
   # The provider options are as follows:
   disqus:
     shortname: sofianlak # fill with the Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
@@ -108,14 +106,15 @@ comments:
     issue_term: # < url | pathname | title | ...>
   # Giscus options › https://giscus.app
   giscus:
-    repo: # <gh-username>/<repo>
-    repo_id:
-    category:
-    category_id:
-    mapping: # optional, default to 'pathname'
-    input_position: # optional, default to 'bottom'
-    lang: # optional, default to the value of `site.lang`
-    reactions_enabled: # optional, default to the value of `1`
+    repo: sofianlak/sofianlak.github.io
+    repo_id: R_kgDOLsWVGA
+    category: General
+    category_id: DIC_kwDOLsWVGM4CzeUO
+    mapping: pathname
+    input_position: bottom
+    theme: light
+    lang: en
+    reactions_enabled: 1
 
 # Self-hosted static assets, optional › https://github.com/cotes2020/chirpy-static-assets
 assets:
@@ -189,7 +188,7 @@ defaults:
     values:
       swcache: true
 
-ass:
+sass:
   style: compressed
   sourcemap: never
   quiet_deps: true

_data/contact.yml

@@ -4,13 +4,12 @@
   icon: "fab fa-github"
 
 - type: linkedin
-  icon: "fab fa-linkedin"   # icons powered by <https://fontawesome.com/>
-  url:  "https://www.linkedin.com/in/sofianlakhdar/"  # Fill with your Linkedin homepage
-
+  icon: "fab fa-linkedin" # icons powered by <https://fontawesome.com/>
+  url: "https://www.linkedin.com/in/sofianlakhdar/" # Fill with your Linkedin homepage
 
 - type: youtube
   icon: "fab fa-youtube"
-  url: "https://www.youtube.com/@sre-and-cie"
+  url: "https://www.youtube.com/@sofianlak"
 
 #- type: twitter
 #  icon: "fa-brands fa-x-twitter"

_includes/comments/giscus.html

@@ -0,0 +1,55 @@
+<!-- Custom giscus embed (light theme forced) based on Chirpy default -->
+<script>
+  (function () {
+    // Force light theme for giscus regardless of site theme
+    const themeMapper = Theme.getThemeMapper('light', 'light');
+    const initTheme = themeMapper[Theme.visualState];
+
+    let lang = '{{ site.comments.giscus.lang | default: lang }}';
+    if (lang.length > 2 && !lang.startsWith('zh')) {
+      lang = lang.slice(0, 2);
+    }
+
+    const giscusAttributes = {
+      src: 'https://giscus.app/client.js',
+      'data-repo': '{{ site.comments.giscus.repo}}',
+      'data-repo-id': '{{ site.comments.giscus.repo_id }}',
+      'data-category': '{{ site.comments.giscus.category }}',
+      'data-category-id': '{{ site.comments.giscus.category_id }}',
+      'data-mapping': '{{ site.comments.giscus.mapping | default: 'pathname' }}',
+      'data-strict' : '{{ site.comments.giscus.strict | default: '0' }}',
+      'data-reactions-enabled': '{{ site.comments.giscus.reactions_enabled | default: '1' }}',
+      'data-emit-metadata': '0',
+      'data-theme': initTheme,
+      'data-input-position': '{{ site.comments.giscus.input_position | default: 'bottom' }}',
+      'data-lang': lang,
+      'data-loading': 'lazy',
+      crossorigin: 'anonymous',
+      async: ''
+    };
+
+    const giscusNode = document.createElement('script');
+    Object.entries(giscusAttributes).forEach(([key, value]) =>
+      giscusNode.setAttribute(key, value)
+    );
+
+    const $footer = document.querySelector('footer');
+    $footer.insertAdjacentElement("beforebegin", giscusNode);
+
+    addEventListener('message', (event) => {
+      if (event.source === window && event.data && event.data.id === Theme.ID) {
+        const newTheme = themeMapper[Theme.visualState];
+
+        const message = {
+          setConfig: {
+            theme: newTheme
+          }
+        };
+
+        const giscus =
+          document.getElementsByClassName('giscus-frame')[0].contentWindow;
+        giscus.postMessage({ giscus: message }, 'https://giscus.app');
+      }
+    });
+  })();
+</script>