Add favicon.rake (+ regen favicons)

README.md

@@ -19,6 +19,16 @@ installed to build the website from source:
 * NodeJS v18.15 (or later)
 * [tidy-html5](https://github.com/htacg/tidy-html5)
 
+### Optional
+
+The following tools are used during the generation of the
+website's favicons. The favicons generally do not change
+and unless you're working with the favicons directly you
+won't need to install these tools:
+
+* rsgv-convert (via [libsvg2](https://gnome.pages.gitlab.gnome.org/librsvg/Rsvg-2.0/overview.html))
+* convert (via [ImageMagick](https://imagemagick.org/))
+
 ### Examples
 
     # Clone repository

Rakefile.rb

@@ -19,4 +19,5 @@ load "rake/tasks/nanoc.rake"
 load "rake/tasks/t.rake"
 load "rake/tasks/ci.rake"
 load "rake/tasks/server.rake"
+load "rake/tasks/favicon.rake"
 task default: "nanoc:build"

rake/tasks/favicon.rake

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+namespace :favicon do
+  task :png do
+    %w[256 128 64 48 32 16].each do |size|
+      infile  = File.join(dirs.root, "src", "images", "favicon.svg")
+      outfile = File.join(dirs.root, "src", "images", "favicon-#{size}x#{size}.png")
+      argv = ["-h", size, "-w", size, "-a", "-f", "png", infile, "-o", outfile]
+      sh "rsvg-convert", *argv
+    end
+  end
+
+  task :ico do
+    png = Dir.glob File.join(dirs.root, "src", "images", "favicon-*.png")
+    ico = File.join(dirs.root, "src", "favicon.ico")
+    sh "convert", *png, ico
+  end
+end
+
+desc "Generate favicons"
+task favicon: %i[favicon:png favicon:ico]

share/al-quran.reflectslight.io/CHANGELOG

@@ -2,6 +2,14 @@
 
 * vNEXT
 
+** Add ~favicon.rake~
+The new rake task ~favicon~ can generate the favicon set
+from ~favicon.svg~ in a way that's reproducible and automated.
+
+In the process the favicons have been regenerated, and
+the misalignment that existed in ~favicon.svg~ has been
+fixed
+
 ** Large screen optimization
 On large screens - the content now has a maximum height
 of ~$breakpoint-md~, and the content is both vertically

src/images/favicon.svg

@@ -1,17 +1,16 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 457.43 358.056">
+  <g id="Calque_2" data-name="Calque 2" transform="translate(15, 50) scale(1.0)">
-  <g id="Calque_2" data-name="Calque 2" transform="scale(0.9) translate(0, 15)">
+    <g id="_01-_quran" data-name="01- quran" transform="translate(15, 40)">
-    <g id="_01-_quran" data-name="01- quran" transform="scale(0.9) translate(0, 15)">
+      <path d="m198.551 46.33s11.042-28.077 41.994-46.33l178.721 13.64-123.041 144.872s-94.415-64.169-97.674-112.182z" fill="#f0e3e7" stroke="black" stroke-width="0.5" />
-      <path d="m198.551 46.33s11.042-28.077 41.994-46.33l178.721 13.64-123.041 144.872s-94.415-64.169-97.674-112.182z" fill="#f0e3e7" stroke="black" stroke-width="0.5"/>
+      <path d="m445.23 41.488-112.33 125.012-28.95 16.59-223.09-70.512-.07-.02-79.87-30.73 5.49-67.45s78.88-3.87 155.26 6.09c0 0 74.38 42.59 134.29 129.43 0 0 10.48-88.32 123.31-136.26z" fill="#fcf4f6" stroke="black" stroke-width="0.5" />
-      <path d="m445.23 41.488-112.33 125.012-28.95 16.59-223.09-70.512-.07-.02-79.87-30.73 5.49-67.45s78.88-3.87 155.26 6.09c0 0 74.38 42.59 134.29 129.43 0 0 10.48-88.32 123.31-136.26z" fill="#fcf4f6" stroke="black" stroke-width="0.5"/>
+      <path d="m161.67 20.468c-9.99 51.44-28.46 75.41-28.46 75.41l-52.35 16.7-.07-.02-79.87-30.73 5.49-67.45s78.88-3.87 155.26 6.09z" fill="#f0e3e7" stroke="black" stroke-width="0.5" />
-      <path d="m161.67 20.468c-9.99 51.44-28.46 75.41-28.46 75.41l-52.35 16.7-.07-.02-79.87-30.73 5.49-67.45s78.88-3.87 155.26 6.09z" fill="#f0e3e7" stroke="black" stroke-width="0.5"/>
+      <path d="m457.43 51.128-53.92 52.83-77.28 109.3-239.83-80.9-58.69-19.8-27.71-5.28.92-25.45 132.29 14.05 176.46 83.93 135.56-138.32z" fill="#ffb48d" stroke="black" stroke-width="0.5" />
-      <path d="m457.43 51.128-53.92 52.83-77.28 109.3-239.83-80.9-58.69-19.8-27.71-5.28.92-25.45 132.29 14.05 176.46 83.93 135.56-138.32z" fill="#ffb48d" stroke="black" stroke-width="0.5"/>
+      <path d="m133.21 95.878-4.17 38.18-42.64-1.7-58.69-19.8-27.71-5.28.92-25.45z" fill="#f5a27e" stroke="black" stroke-width="0.5" />
-      <path d="m133.21 95.878-4.17 38.18-42.64-1.7-58.69-19.8-27.71-5.28.92-25.45z" fill="#f5a27e" stroke="black" stroke-width="0.5"/>
+      
-      <!-- Manually added stroke for blue areas -->
+      <path d="m453.57 268.438-17.75 30.05h-78.91l-337.34-157.37 8.14-28.56 137.84 18.72z" fill="#3383C3" stroke="black" stroke-width="0.5" />
-      <path d="m453.57 268.438-17.75 30.05h-78.91l-337.34-157.37 8.14-28.56 137.84 18.72z" fill="#3383C3" stroke="black" stroke-width="0.5"/>
+      <path d="m435.82 298.488h-78.91l-337.34-157.37 130.2 19.4z" fill="#3383C3" stroke="black" stroke-width="0.5" />
-      <path d="m435.82 298.488h-78.91l-337.34-157.37 130.2 19.4z" fill="#3383C3" stroke="black" stroke-width="0.5"/>
+      <path d="m290.414 228.353-84.615 121.474-145.539-54.202 107.307-85.463h.005z" fill="#3383C3" stroke="black" stroke-width="0.5" />
-      <path d="m290.414 228.353-84.615 121.474-145.539-54.202 107.307-85.463h.005z" fill="#3383C3" stroke="black" stroke-width="0.5"/>
+      <path d="m424.967 128.549-216.751 229.507-147.956-35.248v-27.183l141.298 30.459 201.955-222.13z" fill="#3383C3" stroke="black" stroke-width="0.5" />
-      <path d="m424.967 128.549-216.751 229.507-147.956-35.248v-27.183l141.298 30.459 201.955-222.13z" fill="#3383C3" stroke="black" stroke-width="0.5"/>
     </g>
   </g>
 </svg>