Resize static images to their target size

opatry · May 13, 2024 · 643d348 · 643d348
1 parent 9f54ac8
commit 643d348
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -32,7 +32,6 @@ $ ./node_modules/.bin/firebase deploy --only hosting
 
 ## TODO 
 - export data from SC/Babelio instead of scrapping
-- social image resize to target size
 - clean JS (use const & let instead of var, normalize quotes, colon etc)
 - clean CSS
 - avatar picture with real photo

diff --git a/Rules b/Rules
@@ -93,6 +93,19 @@ compile '/static/pwa-screenshot-*' do
   write item.identifier.to_s.gsub(%r/\d+\-/, '')
 end
 
+compile '/static/{babelio,senscritique}.*' do
+  filter :thumbnailize, width: @config[:social][:badge_size] unless @config[:dev]
+end
+
+%i[compact default].each do |repr|
+  compile '/static/avatar.*', rep: repr do
+    filter :thumbnailize, width: @config[:avatar_size][repr] #unless @config[:dev]
+
+    suffix = "-#{repr}" unless repr == :default
+    write "#{item.identifier.without_exts}#{suffix}.#{item[:extension]}"
+  end
+end
+
 compile '/static/**/*' do
   # don't filter or layout
 end

diff --git a/layouts/default.html.erb b/layouts/default.html.erb
@@ -89,14 +89,19 @@ is_home = @item.identifier =~ '/index.*'
   <meta name="generator" content="Nanoc <%= Nanoc::VERSION %>">
 </head>
 
+<%
+avatar = @items['/static/avatar.*']
+avatar_repr = is_home ? :default : :compact
+avatar_size = @config[:avatar_size][avatar_repr]
+%>
 <body>
 <div id="main" class="<%= is_home ? 'full' : 'compact' %>">
   <div id="header">
     <div class="profile-picture">
     <% unless is_home %>
       <a href="<%= @items['/index.*'].path %>" title="Retour à l'accueil…">
     <% end %>
-        <img src="<%= @items['/static/avatar.*'].path %>">
+        <img src="<%= avatar.path(rep: avatar_repr) %>" width="<%= avatar_size %>" height="<%= avatar_size %>">
     <% unless is_home %>
       </a>
     <% end %>
@@ -108,7 +113,7 @@ is_home = @item.identifier =~ '/index.*'
       </blockquote>
 
       <div id="social-badges">
-      <% @config[:social].each do |key, social| %>
+      <% @config[:social][:badges].each do |key, social| %>
         <div id="social-badge-<%= key %>" class="social-badge">
           <%#
           A bit hacky, but unfortunately, background-color: attr(data-tint color) won't work.
@@ -118,7 +123,7 @@ is_home = @item.identifier =~ '/index.*'
           See https://css-tricks.com/css-attr-function-got-nothin-custom-properties/
           %>
           <a href="<%= social[:url] %>" title="Mon profil <%= social[:label] %>" style="--social-tint-color: <%= hex_color_to_rgba(social[:tint], 0.2) %>">
-            <img src="<%= @items[social[:icon_identifier]].path %>" width="25" height="25">
+            <img src="<%= @items[social[:icon_identifier]].path %>" width="<%= @config[:social][:badge_size] %>" height="<%= @config[:social][:badge_size] %>">
           </a>
         </div>
       <% end %>

diff --git a/nanoc.yaml b/nanoc.yaml
@@ -23,18 +23,20 @@ site:
   description: Les livres que j'ai lu avec une note et un résumé rapide pour partager.
 
 social:
-  sc:
-    label: SensCritique
-    user: 'OlivYé'
-    icon_identifier: '/static/senscritique.*'
-    tint: '#60d16f'
-    url: https://www.senscritique.com/OlivYé/collection?universe=2&action=RATING&order=MY_RATING_DESC
-  babelio:
-    label: Babelio
-    user: 'olivierpatry'
-    icon_identifier: '/static/babelio.*'
-    tint: '#fbb91e'
-    url: https://www.babelio.com/bibliotheque.php?&s1=1&id_user=1664025&tri=note&sens=decroissant
+  badge_size: 25
+  badges:
+    sc:
+      label: SensCritique
+      user: 'OlivYé'
+      icon_identifier: '/static/senscritique.*'
+      tint: '#60d16f'
+      url: https://www.senscritique.com/OlivYé/collection?universe=2&action=RATING&order=MY_RATING_DESC
+    babelio:
+      label: Babelio
+      user: 'olivierpatry'
+      icon_identifier: '/static/babelio.*'
+      tint: '#fbb91e'
+      url: https://www.babelio.com/bibliotheque.php?&s1=1&id_user=1664025&tri=note&sens=decroissant
 
 pwa_screenshot_width:
   phone: 651
@@ -45,3 +47,6 @@ cover:
   width:
     mini: 50 # width of mini cover in main table (see content/index.html `formatterParams`)
     default: 150 # width of cover by default (see content/static/style.css `.book-cover`)
+avatar_size:
+  compact: 48
+  default: 128