vitamix/404.html at main · aemsites/vitamix · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>

<head>
  <title>Page not found</title>
  <script type="text/javascript">
    window.isErrorPage = true;
    window.errorCode = '404';
  </script>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:title" content="Page not found">
  <script>
    function getCountryAndLanguage() {
      if (!window.location.pathname.match(/^\/[a-z]{2}\/[a-z]{2}_[a-z]{2}\//)) {
        return { locale: 'us', language: 'en_us' };
      }
      const pathSegments = window.location.pathname.split('/').filter(Boolean);
      const locale = pathSegments[0] || 'us';
      const language = pathSegments[1] || 'en_us';
      return { locale, language };
    }

    function setMetadata(name, content) {
      const meta = document.createElement('meta');
      meta.name = name;
      meta.content = content;
      document.head.append(meta);
    }
    const { locale, language } = getCountryAndLanguage();
    setMetadata('nav', `/${locale}/${language}/nav/nav`);
    setMetadata('footer', `/${locale}/${language}/footer/footer`);
    setMetadata('nav-banners', `/${locale}/${language}/nav/nav-banners`);
    setMetadata('theme', 'text-center');

  </script>
  <script src="/scripts/scripts.js" type="module"></script>
  <script type="module">
    window.addEventListener('load', () => {
      if (document.referrer) {
        const { origin, pathname } = new URL(document.referrer);
        if (origin === window.location.origin) {
          const backBtn = document.createElement('a');
          backBtn.classList.add('button', 'error-button-back');
          backBtn.href = pathname;
          backBtn.textContent = 'Go back';
          backBtn.title = 'Go back';
          const btnContainer = document.querySelector('.button-container');
          btnContainer.append(backBtn);
        }
      }
    });
  </script>
  <script type="module">
    import { sampleRUM } from '/scripts/aem.js';
    sampleRUM('404', { source: document.referrer });
  </script>
  <style>
    main.error div.section {
      min-height: calc(100vh - var(--nav-height));
      align-items: center;
    }
  </style>
  <link rel="stylesheet" href="/styles/styles.css">
  <link rel="stylesheet" href="/styles/lazy-styles.css">
</head>

<body>
  <header></header>
  <main class="error">
    <div class="section">
      <h2 class="error-message">We're sorry that page is missing.</h2>
      <div class="fragment" style="display: none;">
        <a href="" data-fragment-path="/footer/404"></a>
      </div>
    </div>
  </main>
  <footer></footer>
</body>
<script>
  function getCountryAndLanguage() {
    const pathSegments = window.location.pathname.split('/').filter(Boolean);
    const country = pathSegments[0] || 'us';
    const language = pathSegments[1] || 'en_us';
    return { country, language };
  }

  function localizeErrorMessage() {
    const pathSegments = window.location.pathname.split('/').filter(Boolean);
    const language = (pathSegments[1] || navigator.language || '').toLowerCase();
    const lang = language.startsWith('fr') ? 'fr' : language.startsWith('es') ? 'es' : null;
    const el = document.querySelector('.error-message');
    if (!el || !lang) return;
    const messages = {
      es: "Lo sentimos, esa página no existe.",
      fr: "Nous sommes désolés, cette page est introuvable."
    };
    el.textContent = messages[lang];
  }
  localizeErrorMessage();

  (function setFragmentPath() {
    const { country, language } = getCountryAndLanguage();
    const path = `/${country}/${language}/footer/404`;
    const link = document.querySelector('.fragment a[data-fragment-path]');
    if (link) {
      link.href = path;
      link.textContent = path;
    }
  })();

  (function observeFragmentLoad() {
    const fragment = document.querySelector('.fragment');
    if (!fragment) return;
    const observer = new MutationObserver(function (mutations) {
      for (const mutation of mutations) {
        if (mutation.addedNodes.length) {
          fragment.style.display = '';
          observer.disconnect();
          return;
        }
      }
    });
    observer.observe(fragment, { childList: true, subtree: true });
  })();

</script>

</html>