Update giscus setup via github action (#1792)

giscus settings in `_config.yml` had al-folio repo specified by default.
many users kept these defaults in their own repos, which resulted in
getting comments from blog posts of different users posted to al-folio
discussions. this is undesirable, since users lose control over the
discussions in their blogs.

this PR solves the issue:
- first, we set `giscus.repo` to blank in `_config.yml`. if the field is
kept blank, when the website is built locally, the user will see a
warning saying that giscus comments are misconfigured.
- second, we add a step to the `deploy` workflow that writes repository
name to `giscus.repo` in `_config.yml`. that way, even if `giscus.repo`
field is left black or set to an incorrect repo, it gets correctly
populated at deployment time.

other small changes in this PR are small stylistic adjustments.

.github/workflows/deploy.yml

@@ -26,6 +26,13 @@ jobs:
       with:
         ruby-version: '3.2.2'
         bundler-cache: true
+    - name: Update _config.yml ⚙️
+      uses: fjogeleit/yaml-update-action@v0.13.1
+      with:
+        commitChange: false
+        valueFile: '_config.yml'
+        propertyPath: 'giscus.repo'
+        value: ${{ github.repository }}
     - name: Install and Build 🔧
       run: |
         pip3 install --upgrade jupyter

_config.yml

@@ -137,10 +137,8 @@ related_blog_posts:
 # Follow instructions on https://giscus.app/ to setup for your repo to fill out
 # the information below.
 giscus:
-  repo: alshedivat/al-folio      # <your-github-user-name>/<your-github-repo-name>
+  repo:                          # <your-github-user-name>/<your-github-repo-name>
-  repo_id: MDEwOlJlcG9zaXRvcnk2MDAyNDM2NQ==
   category: Comments             # name of the category under which discussions will be created
-  category_id: DIC_kwDOA5PmLc4CTBt6
   mapping: title                 # identify discussions by post title
   strict: 1                      # use strict identification mode
   reactions_enabled: 1           # enable (1) or disable (0) emoji reactions

_includes/giscus.html

@@ -1,4 +1,5 @@
-<div id="giscus_thread" style="max-width: {{ site.max_width }}; margin: 0 auto;">
+<div id="giscus_thread">
+  {%- if site.giscus.repo -%}
   <script>
     let giscusTheme = localStorage.getItem("theme");
     let giscusAttributes = {
@@ -24,4 +25,12 @@
     document.getElementById("giscus_thread").appendChild(giscusScript);
   </script>
   <noscript>Please enable JavaScript to view the <a href="http://giscus.app/?ref_noscript">comments powered by giscus.</a></noscript>
+  {%- else -%}
+  {% capture giscus_warning %}
+  > ##### giscus comments misconfigured
+  > Please follow instructions at [http://giscus.app](http://giscus.app) and update your giscus configuration.
+  {: .block-danger }
+  {% endcapture %}
+  {{ giscus_warning | markdownify }}
+  {%- endif -%}
 </div>

_layouts/page.html

@@ -2,26 +2,26 @@
 layout: default
 ---
 <!-- page.html -->
-        <div class="post">
+<div class="post">
 
-          <header class="post-header">
+  <header class="post-header">
-            <h1 class="post-title">{{ page.title }}</h1>
+    <h1 class="post-title">{{ page.title }}</h1>
-            <p class="post-description">{{ page.description }}</p>
+    <p class="post-description">{{ page.description }}</p>
-          </header>
+  </header>
 
-          <article>
+  <article>
-            {{ content }}
+    {{ content }}
-          </article>
+  </article>
 
-          {%- if page.related_publications != null and page.related_publications.size > 0 -%}
+  {%- if page.related_publications != null and page.related_publications.size > 0 -%}
-          {% assign publications = page.related_publications | replace: ", ", "," | split: "," | join: "|" %}
+  {% assign publications = page.related_publications | replace: ", ", "," | split: "," | join: "|" %}
-          <h2>References</h2>
+  <h2>References</h2>
-          <div class="publications">
+  <div class="publications">
-            {% bibliography -f {{ site.scholar.bibliography }} -q @*[key^={{ publications }}]* %}
+    {% bibliography -f {{ site.scholar.bibliography }} -q @*[key^={{ publications }}]* %}
-          </div>
+  </div>
-          {%- endif %}
+  {%- endif %}
 
-          {%- if site.giscus.repo and page.giscus_comments -%}
+  {%- if site.giscus and page.giscus_comments -%}
-            {% include giscus.html %}
+    {% include giscus.html %}
-          {%- endif -%}
+  {%- endif -%}
-        </div>
+</div>

_layouts/post.html

@@ -68,7 +68,7 @@ layout: default
   {%- if site.disqus_shortname and page.disqus_comments -%}
     {% include disqus.html %}
   {%- endif %}
-  {%- if site.giscus.repo and page.giscus_comments -%}
+  {%- if site.giscus and page.giscus_comments -%}
     {% include giscus.html %}
   {%- endif -%}
 

_sass/_base.scss

@@ -62,10 +62,54 @@ img {
 
 blockquote {
   background: var(--global-bg-color);
-  border-left: 2px solid var(--global-theme-color);
+  border-left: 5px solid var(--global-theme-color);
-  margin: 1.5em 10px;
+  margin: 1.5em 0;
-  padding: 0.5em 10px;
+  padding: 1em;
   font-size: 1.2rem;
+
+  p {
+    margin-bottom: 0;
+  }
+
+  /* Tips, warnings, and dangers blockquotes */
+  &.block-tip {
+    border-color: var(--global-tip-block);
+    background-color: var(--global-tip-block-bg);
+
+    p {
+      color: var(--global-tip-block-text);
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: var(--global-tip-block-title);
+    }
+  }
+
+  &.block-warning {
+    border-color: var(--global-warning-block);
+    background-color: var(--global-warning-block-bg);
+
+    p {
+      color: var(--global-warning-block-text);
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: var(--global-warning-block-title);
+    }
+  }
+
+  &.block-danger {
+    border-color: var(--global-danger-block);
+    background-color: var(--global-danger-block-bg);
+
+    p {
+      color: var(--global-danger-block-text);
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: var(--global-danger-block-title);
+    }
+  }
 }
 
 // Math
@@ -814,17 +858,6 @@ html.transition *:after {
       }
     }
   }
-
-  .post-content {
-    blockquote {
-      border-left: 5px solid var(--global-theme-color);
-      padding: 8px;
-
-      p {
-        margin-bottom: 0;
-      }
-    }
-  }
 }
 
 progress {
@@ -994,48 +1027,6 @@ nav[data-toggle="toc"] {
   }
 }
 
-/* Tips, warnings, and dangers blockquotes */
-.post .post-content blockquote {
-  &.block-tip {
-    border-color: var(--global-tip-block);
-    background-color: var(--global-tip-block-bg);
-
-    p {
-      color: var(--global-tip-block-text);
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-      color: var(--global-tip-block-title);
-    }
-  }
-
-  &.block-warning {
-    border-color: var(--global-warning-block);
-    background-color: var(--global-warning-block-bg);
-
-    p {
-      color: var(--global-warning-block-text);
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-      color: var(--global-warning-block-title);
-    }
-  }
-
-  &.block-danger {
-    border-color: var(--global-danger-block);
-    background-color: var(--global-danger-block-bg);
-
-    p {
-      color: var(--global-danger-block-text);
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-      color: var(--global-danger-block-title);
-    }
-  }
-}
-
 .featured-posts {
   a {
     color: var(--global-text-color-light);

_sass/_distill.scss

@@ -34,6 +34,9 @@ d-article {
   b i {
     display: inline;
   }
+  blockquote {
+    border-left: 2px solid var(--global-theme-color) !important;
+  }
 
   // Style taken from code blocks
   details {