chore: add web UI screenshots

Raw PNG screenshots are saved in assets/screenshots/raw/ folder. The
update-branding script is renamed update-assets. Its purpose is extended
to generate shadowed versions of screenshots compressed in webp format.

Symlinks are added in documentation folder to use these assets.

Author: florianLSP

Diff for: assets/README.md

@@ -1,14 +1,18 @@
 # RacksDB assets
 
-All assets are generated based on the content of `branding.svg` by running this
-command:
+All assets are generated based on the content of `branding.svg` and
+`screenshots/raw/` by running this command:
 
 ```sh
-$ ./update-branding
+$ ./update-assets
 ```
 
-This automatically generates the SVG files in `scalables/` folder, PNG files (in
-various sizes) and favicon in `bitmaps/` folder.
+This automatically generates:
+
+- Scalable SVG files of the logo in `scalables/` folder,
+- Bitmaps PNG files (in various sizes) of the logo in `bitmaps/` folder,
+- Favicon in `bitmaps/` folder,
+- Shadowed and Webp compressed versions of raw PNG screenshots.
 
 The script has some requirements:
 
@@ -22,6 +26,7 @@ The script has some requirements:
 * [Inkscape](https://inkscape.org/)
 * [RFL build package](https://github.com/rackslab/RFL/tree/main/src/build)
 * [Scour Python package](https://github.com/scour-project/scour/tree/master)
+* [ImageMagick](https://imagemagick.org/index.php)
 
 All the generated files are commited and pushed in Git repository to allow
 direct usage by documentation site, main `README.md` file, etc…

Diff for: assets/bitmaps/logo_full_dark_large.png

@@ -0,0 +1,10 @@
+---
+# List raw screenshots for which versions with dropped shadow must be generated.
+shadowed:
+- home.png
+- datacenters.png
+- rooms.png
+- racks.png
+- infrastructures.png
+- infrastructure.png
+- infrastructure_filters.png

Diff for: assets/bitmaps/logo_full_dark_medium.png

@@ -10,6 +10,7 @@ import glob
 import itertools
 from pathlib import Path
 
+import yaml
 from rfl.build.ninja import NinjaBuilder
 
 # Combination of logo and background colors available in branding reference file
@@ -22,6 +23,9 @@ INKSCAPE_COMMON_OPTS = "--export-overwrite"
 FAVICON_DIR = "favicon"
 BITMAPS_DIR = "bitmaps"
 SCALABLES_DIR = "scalables"
+SCREENSHOTS_DIR = "screenshots"
+RAW_DIR = "raw"
+SHADOWED_DIR = "shadowed"
 FAVICON_SIZES = [256, 64, 48, 32, 16]
 
 
@@ -78,6 +82,28 @@ def main():
 
     ico = branding.parent / BITMAPS_DIR / "favicon.ico"
     builder.build(outputs=[ico], rule="favicon", inputs=[branding])
+
+    with open(Path(SCREENSHOTS_DIR)/ "build.yaml") as fh:
+        rules = yaml.safe_load(fh.read())
+
+    builder.rule(
+        name="shadow",
+        command=(
+            "convert $in -gravity 'northwest' -background 'rgba(255,255,255,0)' "
+            "-splice '10x10' "
+            "\( +clone -background black -shadow \"30x3-1-1\" \) +swap "
+            "-background none -mosaic +repage \( +clone "
+            "-background black -shadow \"30x8+5+5\" \) +swap "
+            "-background none -mosaic +repage $out"
+        ),
+    )
+
+    raws = rules["shadowed"]
+    for raw_s in raws:
+        raw = Path(SCREENSHOTS_DIR) / RAW_DIR / raw_s
+        shadowed = (Path(SCREENSHOTS_DIR) / SHADOWED_DIR / raw.stem).with_suffix(".webp")
+        builder.build(outputs=[shadowed], rule="shadow", inputs=[raw])
+
     builder.run()
 
 

Diff for: assets/bitmaps/logo_full_dark_small.png

@@ -0,0 +1 @@
+../../../../assets/screenshots/raw

Diff for: assets/bitmaps/logo_full_dark_tiny.png

@@ -0,0 +1 @@
+../../../../assets/screenshots/shadowed