From e6fcae0cf0e1dbffbe0f37b98597a8727b78ad92 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Thu, 1 Apr 2021 23:14:43 +0200
Subject: [PATCH] add error pages

---
 .env                                          |   1 +
 config/packages/twig.yaml                     |   1 +
 .../TwigBundle/Exception/error.html.twig      | 131 ++++++++++++++++++
 .../TwigBundle/Exception/error404.html.twig   |   7 +
 .../TwigBundle/Exception/error500.html.twig   |   7 +
 5 files changed, 147 insertions(+)
 create mode 100644 templates/bundles/TwigBundle/Exception/error.html.twig
 create mode 100644 templates/bundles/TwigBundle/Exception/error404.html.twig
 create mode 100644 templates/bundles/TwigBundle/Exception/error500.html.twig
diff --git a/.env b/.env
index 745f6aa..f2f40d1 100644
--- a/.env
+++ b/.env
@@ -36,3 +36,4 @@ MAILER_URL=null://localhost
 
 ASSET_BASE_URL=null
 UMAMI_URL=
+GIPHY_API_KEY=
diff --git a/config/packages/twig.yaml b/config/packages/twig.yaml
index c27a966..6ed5a02 100644
--- a/config/packages/twig.yaml
+++ b/config/packages/twig.yaml
@@ -7,3 +7,4 @@ twig:
         '%kernel.project_dir%/core/Resources/views/': Core
     globals:
         umami_url: '%env(UMAMI_URL)%'
+        giphy_api_key: '%env(GIPHY_API_KEY)%'
diff --git a/templates/bundles/TwigBundle/Exception/error.html.twig b/templates/bundles/TwigBundle/Exception/error.html.twig
new file mode 100644
index 0000000..091224e
--- /dev/null
+++ b/templates/bundles/TwigBundle/Exception/error.html.twig
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<!--
+       _==/          i     i          \==_
+     /XX/            |\___/|            \XX\
+   /XXXX\            |XXXXX|            /XXXX\
+  |XXXXXX\_         _XXXXXXX_         _/XXXXXX|
+ XXXXXXXXXXXxxxxxxxXXXXXXXXXXXxxxxxxxXXXXXXXXXXX
+|XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+|XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
+ XXXXXX/^^^^"\XXXXXXXXXXXXXXXXXXXXX/^^^^^\XXXXXX
+  |XXX|       \XXX/^^\XXXXX/^^\XXX/       |XXX|
+    \XX\       \X/    \XXX/    \X/       /XX/
+       "\       "      \X/      "      /"
+-->
+{% apply spaceless %}
+<html lang="fr">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <style>
+        html, body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+
+        body {
+            background-size: cover;
+            background-color: #000;
+            color: #fff;
+            font-family: Verdana;
+            font-weight: bold;
+            text-shadow: 1px 1px 2px #333;
+        }
+
+        #code {
+            font-size: 60px;
+        }
+
+        #message {
+            font-size: 40px;
+            padding-top: 20px;
+        }
+
+        #background-1 {
+            position: absolute;
+            width: 100%;
+            height: 100vh;
+            -webkit-filter: blur(10px);
+            -o-filter: blur(10px);
+            -ms-filter: blur(10px);
+            filter: blur(10px);
+            background-size: cover;
+            background-position: center center;
+        }
+
+        #background-2 {
+            text-align: center;
+            width: 100%;
+            position: absolute;
+        }
+
+        #background-2 img {
+            height: 100vh;
+        }
+
+
+        #content {
+            position: absolute;
+            padding: 30px;
+        }
+
+        a {
+            margin-top: 40px;
+            padding: 20px;
+            font-size: 20px;
+            border: 1px solid #fff;
+            color: #fff;
+            display: inline-block;
+            text-decoration: none;
+        }
+    </style>
+    <title>Erreur {% block code %}{% endblock %}</title>
+</head>
+<body>
+
+<div id="background-1"></div>
+<!-- <div id="background-2"><img src="{{ asset('build/images/blank.png') }}"></div> -->
+
+<div id="content">
+    <div id="code">
+        Erreur {{ block('code') }}
+    </div>
+
+    <div id="message">
+        {% block error %}{% endblock %}
+    
+        <br><a href="/">Aller sur le blog</a>
+    </div>
+</div>
+
+<script>
+const giphy = {
+    baseURL: 'https://api.giphy.com/v1/gifs/',
+    apiKey: '{{ giphy_api_key }}',
+    tag: '{% block tag %}error{% endblock %}',
+    type: 'random',
+    rating: 'pg-13'
+};
+
+const background1 = document.querySelector('#background-1');
+// const background2 = document.querySelector('#background-2 img');
+const giphyURL = encodeURI(giphy.baseURL + giphy.type + '?api_key=' + giphy.apiKey + '&tag=' + giphy.tag + '&rating=' + giphy.rating);
+const httpRequest = new XMLHttpRequest();
+
+httpRequest.onreadystatechange = function(data) {
+    if (httpRequest.readyState === 4 && httpRequest.status === 200) {
+        const json = JSON.parse(httpRequest.response);
+        const url = json.data.image_original_url;
+        background1.style.backgroundImage = 'url(' + url + ')';
+        // background2.src = url;
+    }
+};
+
+httpRequest.open('GET', giphyURL);
+httpRequest.send();
+</script>
+</body>
+</html>
+{% endapply %}
diff --git a/templates/bundles/TwigBundle/Exception/error404.html.twig b/templates/bundles/TwigBundle/Exception/error404.html.twig
new file mode 100644
index 0000000..df402e9
--- /dev/null
+++ b/templates/bundles/TwigBundle/Exception/error404.html.twig
@@ -0,0 +1,7 @@
+{% extends 'bundles/TwigBundle/Exception/error.html.twig' %}
+
+{% block code %}404{% endblock %}
+
+{% block error %}
+    Oops! Impossible de trouver cette page…
+{% endblock %}
diff --git a/templates/bundles/TwigBundle/Exception/error500.html.twig b/templates/bundles/TwigBundle/Exception/error500.html.twig
new file mode 100644
index 0000000..9fe7007
--- /dev/null
+++ b/templates/bundles/TwigBundle/Exception/error500.html.twig
@@ -0,0 +1,7 @@
+{% extends 'bundles/TwigBundle/Exception/error.html.twig' %}
+
+{% block code %}500{% endblock %}
+
+{% block error %}
+    Oops! Il y a eu une erreur…
+{% endblock %}
