Re: [libvirt PATCH] docs: introduce a more interesting 404 error page
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(a)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/...
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.