Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- tachtler:haproxy_archlinux [2023/01/21 17:40] – [Beispiel-Szenario] klaus
+++ tachtler:haproxy_archlinux [2023/12/28 15:21] (aktuell) – [Maintenance-Konfiguration: /etc/haproxy/maintenance.htm] klaus
@@ Zeile 1328: / Zeile 1328: @@
 Als abschliessenden Konfigurationsschritt muss noch Sorge dafür getragen werden, das der **mount** der zuvor erstellen ''systemd''-unit-Datei **__vor__** dem Start des [[https://www.haproxy.org/|HAProxy]] erfolgt, was innerhalb der ''systemd''-unit-Start-Datei des [[https://www.haproxy.org/|HAProxy]] erfolgen kann. Die wird durch editieren der ''systemd''-unit-Start-Datei des [[https://www.haproxy.org/|HAProxy]] mit nachfolgendem Befehl durchgeführt:
+<code>
+# systemctl edit haproxy.service
+</code>
 <code>
 ### Editing /etc/systemd/system/haproxy.service.d/override.conf
@@ Zeile 1489: / Zeile 1492: @@
 Content-Type: text/html
-<!DOCTYPE HTML>
+<!DOCTYPE html>
-<title>Maintenance | Wartung</title>
+<html lang="de">
 <head>
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial scale=1.0, user-scalable=no">
+  <title data-i18n-key="app-title">Wartung</title>
+  <style>
+    html, body { padding: 0; margin: 0; width: 100%; height: 100%; }
+    * {box-sizing: border-box;}
+    body { text-align: center; padding: 0; background: #d6433b; color: #fff; font-family: Courier New; }
+    h1 { font-size: 24px; font-weight: 100; text-align: center;}
+    body { font-family: Courier New; font-weight: 100; font-size: 16px; color: #fff; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
+    article { display: block; width: 700px; padding: 50px; margin: 0 auto; }
+    b { color: #fff; font-weight: bold;}
+    svg { width: 75px; margin-top: 1em; }
+  </style>
 </head>
-<style>
+<body>
-  html, body { padding: 0; margin: 0; width: 100%; height: 100%; }
+  <article>
-  * {box-sizing: border-box;}
+    <div class="container">
-  body { text-align: center; padding: 0; background: #d6433b; color: #fff; font-family: Courier New; }
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.24 202.24"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Capa_1" data-name="Capa 1"><path class="cls-1" d="M101.12,0A101.12,101.12,0,1,0,202.24,101.12,101.12,101.12,0,0,0,101.12,0ZM159,148.76H43.28a11.57,11.57,0,0,1-10-17.34L91.09,31.16a11.57,11.57,0,0,1,20.06,0L169,131.43a11.57,11.57,0,0,1-10,17.34Z"/><path class="cls-1" d="M101.12,36.93h0L43.27,137.21H159L101.13,36.94Zm0,88.7a7.71,7.71,0,1,1,7.71-7.71A7.71,7.71,0,0,1,101.12,125.63Zm7.71-50.13a7.56,7.56,0,0,1-.11,1.3l-3.8,22.49a3.86,3.86,0,0,1-7.61,0l-3.8-22.49a8,8,0,0,1-.11-1.3,7.71,7.71,0,1,1,15.43,0Z"/></g></g></svg>
-  h1 { font-size: 24px; font-weight: 100; text-align: center;}
+      <h1 data-i18n-key="app-head">Wir sind bald wieder da!</h1>
-  body { font-family: Courier New; font-weight: 100; font-size: 16px; color: #fff; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
+      <p data-i18n-key="app-text">Bitte entschuldigen Sie die Unannehmlichkeiten.<br>Wir f&uuml;hren <b><u>im Moment Wartungsarbeiten</u></b> durch.<br>Wir sind in K&uuml;rze wieder f&uuml;r Sie da!</p>
-  article { display: block; width: 700px; padding: 50px; margin: 0 auto; }
+    </div>
-  b { color: #fff; font-weight: bold;}
+  </article>
-  svg { width: 75px; margin-top: 1em; }
+  <script>
-</style>
+  // The locale our app first shows
-<article>
+  const defaultLocale = "de";
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.24 202.24"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Capa_1" data-name="Capa 1"><path class="cls-1" d="M101.12,0A101.12,101.12,0,1,0,202.24,101.12,101.12,101.12,0,0,0,101.12,0ZM159,148.76H43.28a11.57,11.57,0,0,1-10-17.34L91.09,31.16a11.57,11.57,0,0,1,20.06,0L169,131.43a11.57,11.57,0,0,1-10,17.34Z"/><path class="cls-1" d="M101.12,36.93h0L43.27,137.21H159L101.13,36.94Zm0,88.7a7.71,7.71,0,1,1,7.71-7.71A7.71,7.71,0,0,1,101.12,125.63Zm7.71-50.13a7.56,7.56,0,0,1-.11,1.3l-3.8,22.49a3.86,3.86,0,0,1-7.61,0l-3.8-22.49a8,8,0,0,1-.11-1.3,7.71,7.71,0,1,1,15.43,0Z"/></g></g></svg>
+  const supportedLocales = ["de", "en"];
-  <h1>We&rsquo;ll be back soon!</h1>
+  // Check if locale ist supported
-  <div>
+  function isSupported(locale) {
-    <p>Sorry for the inconvenience.</br>We&rsquo;re performing <b><u>maintenance at the moment.</u></b></br>We&rsquo;ll be back up shortly!</p>
+    return supportedLocales.indexOf(locale) > -1;
-  <h1>Wir sind bald wieder da!</h1>
+  }
-  <div>
+  // Retrieve the first locale we support from the given
-    <p>Bitte entschuldigen Sie die Unannehmlichkeiten.</br>Wir f&uuml;hren <b><u>im Moment Wartungsarbeiten</u></b> durch.</br>Wir sind in K&uuml;rze wieder online!</p>
+  // array, or return our default locale
-  </div>
+  function supportedOrDefault(locales) {
-</article>
+    return locales.find(isSupported) || defaultLocale;
+  }
+  // Detect browser locale
+  function browserLocales(languageCodeOnly = false) {
+    return navigator.languages.map((locale) =>
+      languageCodeOnly ? locale.split("-")[0] : locale,
+    );
+  }
+  // Translations
+  const translations = {
+    // German translations
+    "de": {
+      "app-title": "Wartung",
+      "app-head": "Wir sind bald wieder da!",
+      "app-text": "Bitte entschuldigen Sie die Unannehmlichkeiten.</br>Wir f&uuml;hren <b><u>im Moment Wartungsarbeiten</u></b> durch.</br>Wir sind in K&uuml;rze wieder f&uuml;r Sie da!",
+    },
+    // English translations
+    "en": {
+      "app-title": "Maintenance",
+      "app-head": "We&rsquo;ll be back soon!",
+      "app-text": "Sorry for the inconvenience.</br>We&rsquo;re performing <b><u>maintenance at the moment.</u></b></br>We&rsquo;ll be back up shortly!",
+    },
+  };
+  // When the page content is ready
+  document.addEventListener("DOMContentLoaded", () => {
+    document
+      // Find all elements that have the key attribute
+      .querySelectorAll("[data-i18n-key]")
+      .forEach(translateElement);
+  });
+  // Replace the inner text of the given HTML element
+  // with the translation in the active locale,
+  // corresponding to the element's data-i18n-key
+  function translateElement(element) {
+    const key = element.getAttribute("data-i18n-key");
+    const initialLocale = supportedOrDefault(browserLocales(true));
+    const translation = translations[initialLocale][key];
+    element.innerHTML = translation;
+  }
+  </script>
+</body>
+</html>
 </code>
@@ Zeile 1759: / Zeile 1814: @@
 code: 200, check duration: 8ms, status: 3/3 UP
 </code>
-FIXME **Hier geht es weiter... / To be continued ...**