Add breadcrumbs, giscus, reading time & UI

Introduce breadcrumbs, Giscus-based comments, and a reading-time include; wire them into layouts (default, post, page, home, archive, tags) and add styles. Upgrade Jekyll and related gems, adjust gemspec/Gemfile and add .bundle config for Windows builds. Add code-copy buttons (JS + syntax styles), theme-toggle animation, and defensive event handling. Add example post and documentation (Giscus setup, todos, Windows setup) and assorted Sass tweaks for categories, comments, and UI refinements.

Author: riffpointer

.bundle/config

@@ -0,0 +1,2 @@
+---
+BUNDLE_BUILD__WDM: "-- --with-cflags=-Wno-implicit-function-declaration"

Gemfile

@@ -8,7 +8,7 @@ source "https://rubygems.org"
 #
 # This will help ensure the proper Jekyll version is running.
 # Happy Jekylling!
-gem "jekyll", "~> 4.1.0"
+gem "jekyll", "~> 4.3.4"
 
 # This is the default theme for new Jekyll sites. You may change this to anything you like.
 
@@ -18,16 +18,23 @@ gem "jekyll", "~> 4.1.0"
 
 # If you have any plugins, put them here!
 group :jekyll_plugins do
-  gem 'jekyll-feed', '~> 0.13'
+  gem 'jekyll-feed', '~> 0.17'
   gem 'jekyll-sitemap', '~> 1.4'
-  gem 'jekyll-compose', '~> 0.12.0'
+  gem 'jekyll-compose', '~> 0.12'
   gem 'jekyll-postfiles', '~> 3.1'
 end
 
+gem "jekyll-sass-converter", "~> 2.2.0"
+gem "sassc", "~> 2.4"
+
+gem "csv"
+gem "base64"
+gem "bigdecimal"
+
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
 gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
 
 # Performance-booster for watching directories on Windows
-gem "wdm", "~> 0.1.0" if Gem.win_platform?
+# gem "wdm", "~> 0.1.0" if Gem.win_platform?
 
-gem "webrick", "~> 1.7"
+gem "webrick", "~> 1.9"

_config.yml

@@ -8,6 +8,21 @@ image: assets/img/ogp.png # This image used for Open Graph more info https://ogp
 repo: https://github.com/piharpi/jekyll-klise # site repo [optional]
 mode: dark # default theme "dark" | "light"
 
+# Comments
+giscus:
+  repo: riffpointer/riffpointer.github.io
+  repo_id: R_kgDORtuMVg
+  category: Giscus Comments
+  category_id: DIC_kwDORtuMVs4C9B22
+  mapping: og:title
+  strict: 0
+  reactions_enabled: 1
+  emit_metadata: 0
+  input_position: bottom
+  theme: preferred_color_scheme # follows the visitor's system/theme preference
+  lang: en
+  loading: lazy
+
 # Profile settings
 author:
   name: RiffPointer # author name
@@ -42,9 +57,15 @@ kramdown:
 defaults:
   - scope:
       path: ""
+      type: posts
     values:
       layout: post
-      comments: false
+      comments: true
+  - scope:
+      path: ""
+      type: pages
+    values:
+      comments: true
 
 # Jekyll Compose default front matter
 jekyll_compose:
@@ -59,6 +80,7 @@ jekyll_compose:
 
 # Homepage limit posts
 number_of_posts: 5
+reading_time_words_per_minute: 200
 
 # Build settings
 # theme: klise

_includes/breadcrumbs.html

@@ -0,0 +1,22 @@
+{%- unless page.url == "/" -%}
+  {%- assign crumbs = page.url | remove_first: "/" | split: "/" -%}
+  {%- assign crumb_url = "" -%}
+  <nav class="breadcrumbs" aria-label="Breadcrumb">
+    <a href="/">Home</a>
+    {%- for crumb in crumbs -%}
+      {%- unless crumb == "" -%}
+        {%- assign crumb_url = crumb_url | append: "/" | append: crumb -%}
+        <span class="breadcrumb-separator" aria-hidden="true">/</span>
+        {%- if forloop.last -%}
+          {%- if page.title -%}
+            <span aria-current="page">{{ page.title | escape }}</span>
+          {%- else -%}
+            <span aria-current="page">{{ crumb | replace: "-", " " | capitalize }}</span>
+          {%- endif -%}
+        {%- else -%}
+          <a href="{{ crumb_url }}/">{{ crumb | replace: "-", " " | capitalize }}</a>
+        {%- endif -%}
+      {%- endunless -%}
+    {%- endfor -%}
+  </nav>
+{%- endunless -%}

_includes/comments.html

@@ -1,10 +1,51 @@
-<!-- unnecessary file, however you can still use for comment section, e.g disqus -->
-<script
-  src="https://utteranc.es/client.js"
-  repo="username/reponame"
-  issue-term="pathname"
-  label="✨ comment ✨"
-  theme="github-light"
-  crossorigin="anonymous"
-  async
-></script>
+{% assign giscus_repo = site.giscus.repo | strip %}
+{% assign giscus_repo_id = site.giscus.repo_id | strip %}
+{% assign giscus_category = site.giscus.category | strip %}
+{% assign giscus_category_id = site.giscus.category_id | strip %}
+
+{% assign giscus_configured = false %}
+{% if giscus_repo != empty and giscus_repo_id != empty and giscus_category != empty and giscus_category_id != empty %}
+  {% assign giscus_configured = true %}
+{% endif %}
+
+{% assign missing_giscus_fields = "" | split: "," %}
+{% if giscus_repo == empty %}
+  {% assign missing_giscus_fields = missing_giscus_fields | push: "repo" %}
+{% endif %}
+{% if giscus_repo_id == empty %}
+  {% assign missing_giscus_fields = missing_giscus_fields | push: "repo_id" %}
+{% endif %}
+{% if giscus_category == empty %}
+  {% assign missing_giscus_fields = missing_giscus_fields | push: "category" %}
+{% endif %}
+{% if giscus_category_id == empty %}
+  {% assign missing_giscus_fields = missing_giscus_fields | push: "category_id" %}
+{% endif %}
+
+<section class="comments">
+  {% if giscus_configured %}
+    <div class="giscus"></div>
+    <script src="https://giscus.app/client.js"
+      data-repo="{{ giscus_repo }}"
+      data-repo-id="{{ giscus_repo_id }}"
+      data-category="{{ giscus_category }}"
+      data-category-id="{{ giscus_category_id }}"
+      data-mapping="{{ site.giscus.mapping | default: 'pathname' }}"
+      data-strict="{{ site.giscus.strict | default: 0 }}"
+      data-reactions-enabled="{{ site.giscus.reactions_enabled | default: 1 }}"
+      data-emit-metadata="{{ site.giscus.emit_metadata | default: 0 }}"
+      data-input-position="{{ site.giscus.input_position | default: 'bottom' }}"
+      data-theme="{{ site.giscus.theme | default: 'preferred_color_scheme' }}"
+      data-lang="{{ site.giscus.lang | default: site.lang | default: 'en' }}"
+      data-loading="{{ site.giscus.loading | default: 'lazy' }}"
+      crossorigin="anonymous"
+      async>
+    </script>
+  {% else %}
+    <div class="comments-warning" role="alert" aria-live="polite">
+      <strong>Comments are unavailable.</strong>
+      Configure Giscus in <code>_config.yml</code>. Missing field{% if missing_giscus_fields.size != 1 %}s{% endif %}:
+      <code>{{ missing_giscus_fields | join: ", " }}</code>
+    </div>
+  {% endif %}
+</section>

_includes/header.html

@@ -8,8 +8,8 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="#fff" />
   <meta name="apple-mobile-web-app-title" content="{{ site.title }}" />
   <title>
-    {% if page.title %}{{ page.title | escape }} - {{ site.title }}{% else %}{{
-    site.title | escape }}{% endif %}
+    {% if page.title %}{{ page.title }} - {{ site.title }}{% else %}{{
+    site.title }}{% endif %}
   </title>
   <link
     rel="alternate"
@@ -58,15 +58,11 @@
   <meta property="fb:app_id" content="{{ site.fb_appid }}" />
   <meta
     property="og:site_name"
-    content="{% if page.title %}{{ page.title | escape }} | {{
-      site.author.name
-    }}{% else %}{{ site.title | escape }}{% endif %}"
+    content="{{ site.title }}"
   />
   <meta
     property="og:title"
-    content="{% if page.title %}{{ page.title | escape }} | {{
-      site.author.name
-    }}{% else %}{{ site.title | escape }}{% endif %}"
+    content="{% if page.title %}{% if page.layout == 'post' %}Post{% else %}Page{% endif %} - {{ page.title }}{% else %}{{ site.title }}{% endif %}"
   />
   {% if page.location %}
   <meta property="og:type" content="article" />
@@ -104,9 +100,7 @@
   <meta name="twitter:card" content="summary" />
   <meta
     name="twitter:title"
-    content="{% if page.title %}{{ page.title | escape }} | {{
-      site.author.twitter
-    }}{% else %}{{ site.title | escape }}{% endif %}"
+    content="{{ page.title | default: site.title }}"
   />
   <meta
     name="twitter:url"

_includes/reading_time.html

@@ -0,0 +1,13 @@
+{%- assign words_per_minute = site.reading_time_words_per_minute | default: 200 -%}
+{%- assign text = include.content | strip_html -%}
+{%- assign words = text | number_of_words -%}
+{%- assign characters = text | size -%}
+{%- assign minutes = words | divided_by: words_per_minute -%}
+{%- assign remainder = words | modulo: words_per_minute -%}
+{%- if remainder > 0 -%}
+  {%- assign minutes = minutes | plus: 1 -%}
+{%- endif -%}
+{%- if minutes < 1 -%}
+  {%- assign minutes = 1 -%}
+{%- endif -%}
+<span class="{{ include.class | default: 'reading-time' }}" title="{{ words }} words, {{ characters }} characters" aria-label="{{ minutes }} min read, {{ words }} words, {{ characters }} characters">{{ minutes }} min read</span>

_layouts/default.html

@@ -28,6 +28,7 @@
 
   {% include navbar.html %}
   <div class="wrapper">
+    {% include breadcrumbs.html %}
     {% include author.html %}
     <main aria-label="Content">
       {{ content }}

_layouts/home.html

@@ -10,5 +10,6 @@ <h3 class="posts-item-note" aria-label="Recent Posts">Recent Posts</h3>
   <h4 class="post-item-title">
     <a href="{{ post.url }}">{{ post.title | escape }}</a>
   </h4>
+  {% include reading_time.html content=post.content class="post-item-reading-time" %}
 </article>
 {%- endfor -%}

_layouts/page.html

@@ -30,12 +30,16 @@
 
   {% include navbar.html %}
   <div class="wrapper">
+    {% include breadcrumbs.html %}
     <header class="header">
       <h1 class="header-title center" itemprop="headline">{{ page.title | escape }}.</h1>
     </header>
     <main class="page-content" aria-label="Content">
       {% include anchor_headings.html html=content anchorClass="anchor-head" beforeHeading=true h_min=4 h_max=4 %}
     </main>
+    {% if page.comments != false %}
+      {% include comments.html %}
+    {% endif %}
     {% include footer.html %}
   </div>
 </body>