[libvirt PATCH] docs: introduce a more interesting 404 error page

[Peter Krempa]

On Thu, Feb 16, 2023 at 14:53:13 +0000, Daniel P. Berrangé wrote:
> Our 404 error page is a little bit too boring. The solution is to
> add more penguins !
> 
> This relies on MIT licensed javascript code imported from
> 
>   https://github.com/VincentGarreau/particles.js
> 
> The image is extracted from the existing libvirt logo SVG file.
> 
> Signed-off-by: Daniel P. Berrangé <berrange at redhat.com>
> ---
>  docs/404.html.in       |    7 +-
>  docs/css/libvirt.css   |   12 +
>  docs/js/app.js         |  108 +++
>  docs/js/meson.build    |    2 +
>  docs/js/particles.js   | 1541 ++++++++++++++++++++++++++++++++++++++++
>  docs/logos/meson.build |    2 +
>  docs/logos/penguin.png |  Bin 0 -> 4236 bytes
>  docs/logos/penguin.svg |  358 ++++++++++
>  docs/page.xsl          |    8 +
>  9 files changed, 2035 insertions(+), 3 deletions(-)
>  create mode 100644 docs/js/app.js
>  create mode 100644 docs/js/particles.js
>  create mode 100644 docs/logos/penguin.png
>  create mode 100644 docs/logos/penguin.svg
> 
> Yes, this could easily be considered an April Fools' joke, but at
> the same time it is common to have a bit of fun with 404 error
> pages, so it is also a real suggestion :-)
> 
> Live example rendering is at:
> 
>   https://berrange.gitlab.io/-/libvirt/-/jobs/3749944370/artifacts/website/404.html
> 
> The main "cost" of the fun is a few 10's of KB more in the dist
> from the JS/SVG/PNG

TBH ...

> diff --git a/docs/js/app.js b/docs/js/app.js
> new file mode 100644
> index 0000000000..79fae27c2e
> --- /dev/null
> +++ b/docs/js/app.js
> @@ -0,0 +1,108 @@
> +particlesJS('particles-js',
> +  {
> +    "particles": {
> +      "number": {
> +        "value": 20,
> +        "density": {
> +          "enable": true,
> +          "value_area": 800
> +        }
> +      },
> +      "color": {
> +        "value": "#ff0000"
> +      },
> +      "shape": {
> +        "type": "image",

> +          "src": "logos/penguin.png",
> +          "width": 73,
> +          "height": 138
> +        }
> +      },
> +      "opacity": {
> +        "value": 0.5,
> +        "random": true,
> +        "anim": {
> +          "enable": true,
> +          "speed": 1,
> +          "opacity_min": 0.1,
> +          "sync": false
> +        }
> +      },
> +      "size": {
> +        "value": 50,
> +        "random": true,
> +        "anim": {
> +          "enable": false,
> +          "speed": 40,
> +          "size_min": 0.1,
> +          "sync": false
> +        }
> +      },
> +      "line_linked": {
> +        "enable": false,
> +      },
> +      "move": {
> +        "enable": true,
> +        "speed": 6,
> +        "direction": "none",
> +        "random": false,
> +        "straight": false,
> +        "out_mode": "bounce",
> +        "attract": {
> +          "enable": true,
> +          "rotateX": 600,
> +          "rotateY": 1200
> +        }
> +      }
> +    },
> +    "interactivity": {
> +      "detect_on": "canvas",
> +      "events": {
> +        "onhover": {
> +          "enable": true,
> +          "mode": "repulse"
> +        },
> +        "onclick": {
> +          "enable": true,
> +          "mode": "push"
> +        },
> +        "resize": true
> +      },

... distributing all of this and more to put on a page which you should
not even see in the first place is not something I'd like to see.

Additionally I've planned to convert also the 404 page to rST
eventually to go with the rest of the web. The only reason I didn't do
so yet is the use of <del> which rST doesn't support and I didn't bother
to come up with a different text yet.