template.html

<!doctype html>
<html lang="$lang$">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
  <meta name="author" content="$author$" />
  <meta name="description" content="$description$" />

  <link rel="preconnect" href="https://fonts.bunny.net">

  $for(css)$
  <link rel="stylesheet" href="$css$" />
  $endfor$

  <title>$title$</title>
</head>

<body>
  <header>
    <h1>$author$</h1>
    <span><i aria-hidden="true">📫</i><a href="mailto:$email$">$email$</a></span>
    <p>$role$</p>
    <span><i aria-hidden="true">📞</i><a href="tel:$phone$">$phone$</a></span>
    <address><i aria-hidden="true">📍</i>$address$</address>
  </header>

  <main>
    $body$
  </main>

  <footer>
    <p>$footer$ $updated$</p>

    <a href="$linkedin$" aria-label="Linkedin">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
        <path
          d="M100 448H7V149h93zM54 108C24 108 0 84 0 54a54 54 0 0 1 108 0c0 29-25 54-54 54zm394 340h-93V302c0-34-1-79-48-79-48 0-56 38-56 77v148h-93V149h89v41h2c12-24 42-49 88-49 94 0 111 62 111 143v164z" />
      </svg>
    </a>

    <a href="$github$" aria-label="GitHub">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
        <path
          d="M166 397c0 2-2 4-5 4-4 0-6-1-6-4 0-2 2-3 5-3 3-1 6 1 6 3zm-31-4c-1 2 1 4 4 5s6 0 6-2-1-5-4-5c-3-1-5 0-6 2zm44-2c-3 1-5 3-5 5 1 2 3 3 6 3 3-1 5-3 5-5s-3-3-6-3zM245 8A240 240 0 0 0 0 252c0 111 70 206 170 239 12 2 17-5 17-12v-61s-70 15-85-30c0 0-12-29-28-37 0 0-23-15 2-15 0 0 24 2 38 26 22 38 59 27 73 21 2-16 9-28 16-34-56-6-112-14-112-111 0-27 7-41 23-59-2-6-11-33 3-67 21-7 69 27 69 27a237 237 0 0 1 126 0s48-34 69-27c13 34 5 61 2 67 16 18 26 32 26 59 0 97-59 105-115 111 9 8 17 23 17 46v84c0 6 5 14 17 12a248 248 0 0 0 168-239C496 113 384 8 245 8zM97 353c-1 1-1 3 1 5 1 2 4 2 5 1s1-3-1-5c-1-2-4-2-5-1zm-11-8 3 4c1 1 3 0 4-1s0-3-2-4-4 0-5 1zm33 35c-2 2-1 5 1 7s5 2 7 1c1-2 0-5-2-7s-5-2-6-1zm-12-14v6c2 2 5 3 6 2 2-1 2-4 0-6-1-3-4-4-6-2z" />
      </svg>
    </a>
  </footer>

  <a href="/en" lang="it" hidden><i aria-hidden="true">🇺🇸</i><span class="sr-only">Cambia lingua</span></a>
  <a href="/it" lang="en" hidden><i aria-hidden="true">🇮🇹</i><span class="sr-only">Change language</span></a>

  <script>
    function localize() {
      document.querySelectorAll('[lang]')
        .forEach(el => el.lang === document.documentElement.lang ? el.removeAttribute('hidden') : el.setAttribute('hidden', ''))
    }

    new MutationObserver(localize).observe(document.documentElement, { attributeFilter: ['lang'] })

    document.querySelectorAll('[data-lang]')
      .forEach(el => {
        el.addEventListener('mouseenter', () => document.documentElement.setAttribute('lang', el.dataset.lang))
        el.addEventListener('click', () => localStorage.setItem('lang', document.documentElement.lang))
      })

    localize();

    addEventListener('beforeprint', () =>
      document.querySelectorAll('details:not([open])').forEach(el => {
        el.setAttribute('open-for-print', '');
        el.setAttribute('open', '');
      })
    );

    addEventListener('afterprint', () =>
      document.querySelectorAll('details[open-fro-print]').forEach(el => {
        el.removeAttribute('open-for-print');
        el.removeAttribute('open');
      })
    );
  </script>
</body>

</html>