chore: replace screenshots set by generated asset

Replace externally generated jpg set of screenshots by source SVG asset
linked to raw screenshots and generate PNG/webp bitmaps used in
README.md and docs. This way, update raw screenshots and running
update-assets is enough to keep all assets aligned.

Author: rezib

Diff for: README.md

@@ -62,8 +62,8 @@ RacksDB provides multiple interfaces to request the database with its
 
 <p align="center">
 <img
-  src="assets/racksdb_web_ui.jpg"
-  alt="RacksDB Web-UI"
+  src="assets/screenshots/assemblies/bitmaps/screenshots-small.webp"
+  alt="RacksDB web UI"
   width="600px"
   style="margin: 0 auto;">
 <p>

Diff for: assets/racksdb_web_ui.jpg

@@ -1,4 +1,9 @@
 ---
+# Define DPI/sizes for which PNG bitmaps version of assemblies must be
+# generated.
+assemblies:
+  screenshots.svg:
+  - small
 # List raw screenshots for which versions with dropped shadow must be generated.
 shadowed:
 - home.png

Diff for: assets/screenshots/assemblies/bitmaps/screenshots-small.png

@@ -25,6 +25,7 @@ BITMAPS_DIR = "bitmaps"
 SCALABLES_DIR = "scalables"
 SCREENSHOTS_DIR = "screenshots"
 RAW_DIR = "raw"
+ASSEMBLIES_DIR = "assemblies"
 SHADOWED_DIR = "shadowed"
 FAVICON_SIZES = [256, 64, 48, 32, 16]
 
@@ -49,8 +50,10 @@ def main():
         builder.build(outputs=[svg], rule=f"svg-plain-{output}", inputs=[branding])
     builder.run()
 
-    # Then generate bitmaps and favicon
+    # Generate bitmaps and favicon
     builder = NinjaBuilder()
+
+    # Rules for bitmaps
     for size, dpi in DPI_SIZES.items():
         builder.rule(
             name=f"png-{size}",
@@ -83,6 +86,7 @@ def main():
     ico = branding.parent / BITMAPS_DIR / "favicon.ico"
     builder.build(outputs=[ico], rule="favicon", inputs=[branding])
 
+    # Load assemblies and bitmaps generation rules
     with open(Path(SCREENSHOTS_DIR) / "build.yaml") as fh:
         rules = yaml.safe_load(fh.read())
 
@@ -98,6 +102,11 @@ def main():
         ),
     )
 
+    builder.rule(
+        name="convert",
+        command=("convert $in $out"),
+    )
+
     raws = rules["shadowed"]
     for raw_s in raws:
         raw = Path(SCREENSHOTS_DIR) / RAW_DIR / raw_s
@@ -106,6 +115,16 @@ def main():
         )
         builder.build(outputs=[shadowed], rule="shadow", inputs=[raw])
 
+    # Generate bitmaps versions of assemblies
+    assemblies = rules["assemblies"]
+    for assembly_s, sizes in assemblies.items():
+        assembly = Path(SCREENSHOTS_DIR) / ASSEMBLIES_DIR / assembly_s
+        for size in sizes:
+            png = assembly.parent / BITMAPS_DIR / f"{assembly.stem}-{size}.png"
+            webp = png.with_suffix(".webp")
+            builder.build(outputs=[png], rule=f"png-{size}", inputs=[assembly])
+            builder.build(outputs=[webp], rule="convert", inputs=[png])
+
     builder.run()
 
 

Diff for: assets/screenshots/assemblies/bitmaps/screenshots-small.webp

@@ -0,0 +1 @@
+../../../../assets/screenshots/assemblies/bitmaps/screenshots-small.webp

Diff for: assets/screenshots/assemblies/screenshots.svg

@@ -56,7 +56,7 @@ Once the database is defined, data can be searched and extracted using the
 xref:usage:racksdb.adoc[`racksdb` CLI]. A xref:usage:ui.adoc[Web UI] is also
 available to explore its content.
 
-image::overview:racksdb_web_ui.jpg[RacksDB Web UI,width=400]
+image::overview:racksdb_web_ui_screenshots.webp[RacksDB Web UI,width=600]
 
 For full integration with your software, a xref:usage:lib.adoc[Python library]
 and a xref:usage:rest.adoc[REST API] can also be used to stay continuously

Diff for: assets/screenshots/build.yaml

@@ -23,4 +23,4 @@ Advanced detailed informations are available:
 * icon:mouse-pointer[] xref:usage:ui.adoc[Web UI user guide]
 * icon:maximize[] xref:db:ext.adoc[Schema extension howto]
 
-image::overview:racksdb_web_ui.jpg[RacksDB Web UI]
+image::overview:racksdb_web_ui_screenshots.webp[RacksDB Web UI]