Truncato gem を使って「前の作品」「次の作品」のタイトルを一部表示

Author: yasulab

Gemfile

@@ -3,6 +3,7 @@ source "https://rubygems.org"
 gem "jekyll"
 gem 'rake'       # Enable Rakefile to run tasks
 gem 'rinku'      # Enable to add links in texts
+gem 'truncato'   # Enable to truncate long text
 gem 'mini_racer' # Enable to run 'docker-compose up'
 
 group :jekyll_plugins do

Gemfile.lock

@@ -41,6 +41,7 @@ GEM
       yell (~> 2.0)
       zeitwerk (~> 2.5)
     htmlcompressor (0.4.0)
+    htmlentities (4.3.4)
     http_parser.rb (0.8.0)
     i18n (1.14.1)
       concurrent-ruby (~> 1.0)
@@ -97,11 +98,11 @@ GEM
     mercenary (0.4.0)
     mini_racer (0.8.0)
       libv8-node (~> 18.16.0.0)
-    nokogiri (1.15.3-aarch64-linux)
+    nokogiri (1.15.4-aarch64-linux)
       racc (~> 1.4)
-    nokogiri (1.15.3-arm64-darwin)
+    nokogiri (1.15.4-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.15.3-x86_64-linux)
+    nokogiri (1.15.4-x86_64-linux)
       racc (~> 1.4)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
@@ -133,6 +134,9 @@ GEM
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
     timers (4.3.5)
+    truncato (0.7.12)
+      htmlentities (~> 4.3.1)
+      nokogiri (>= 1.7.0, <= 2.0)
     ttfunk (1.7.0)
     typhoeus (1.4.0)
       ethon (>= 0.9.0)
@@ -160,6 +164,7 @@ DEPENDENCIES
   mini_racer
   rake
   rinku
+  truncato
 
 BUNDLED WITH
    2.4.3

tasks/upsert_project_pages_by_data.rb

@@ -1,8 +1,10 @@
 #!/usr/bin/env ruby
 
 # require 'pry' unless ENV['JEKYLL_ENV'] == 'production'
-require 'yaml'  # https://docs.ruby-lang.org/ja/latest/library/yaml.html
-require 'rinku' # https://github.com/vmg/rinku
+require 'yaml'     # https://docs.ruby-lang.org/ja/latest/library/yaml.html
+require 'rinku'    # https://github.com/vmg/rinku
+require 'truncato' # https://github.com/jorgemanrubia/truncato
+t = Truncato
 
 # Remove existing files and re-generate them
 # NOTE: もしファイルパスを変更して過去ファイルを消したい場面があれば使う
@@ -66,9 +68,16 @@
     </div>
 
     <div class="article-navigation" style="margin-bottom: 100px;">
-      <a href="/expo/#{project_prev[:id]}" class="previous-article">&lt; 前の作品へ</a>
-      &nbsp;・&nbsp;
-      <a href="/expo/#{project_next[:id]}" class="next-article">次の作品へ &gt;</a>
+      <a href="/expo/#{project_prev[:id]}" title="#{project_prev[:title]}" style="margin-right: 20px;">
+        <i class="fas fa-arrow-left"></i>
+        前の作品へ<br>
+        <span style="font-size: 8px;">#{t.truncate project_prev[:title], max_length: 11}</span>
+      </a>
+      <a href="/expo/#{project_next[:id]}" title="#{project_next[:title]}" style="margin-left: 20px;">
+        次の作品へ
+        <i class="fas fa-arrow-right"></i><br>
+        <span style="font-size: 8px;">#{t.truncate project_next[:title], max_length: 11}</span>
+      </a>
     </div>
 
     <style type="text/css">