Updated Form with E-Mail and JS-obfuscation

layouts/_default/wedding.html

@@ -65,8 +65,7 @@ body {
   }
 
   .countdown {
-    text-align: center;
-    margin-bottom: 2rem;
+    text-align: center; margin-bottom: 2rem;
     font-size: 5rem;
   }
 
@@ -145,9 +144,6 @@ body {
   <!--   {{ with .Params.rsvp.deadline }} -->
   <!--     <p>{{ i18n "rsvp_deadline" }} <strong>{{ . }}</strong>.</p> -->
   <!--   {{ end }} -->
-  <!--   {{ with .Params.rsvp.email }} -->
-  <!--     <p>{{ i18n "rsvp_email" }}: <a href="mailto:{{ . }}">{{ . }}</a></p> -->
-  <!--   {{ end }} -->
   <!--   {{ with .Params.rsvp.form }} -->
   <!--     <p><a href="{{ . }}" target="_blank">{{ i18n "rsvp_form" }}</a></p> -->
   <!--   {{ end }} -->
@@ -158,6 +154,9 @@ body {
   {{ with .Params.rsvp.deadline }}
     <p>{{ i18n "rsvp_deadline" }} <strong>{{ . }}</strong>.</p>
   {{ end }}
+  {{ with .Params.rsvp.email }}
+    <p>{{ i18n "rsvp_email" }}: {{ partial "obfuscate_email.html" . }}</p>
+  {{ end }}
 
   <!-- RSVP Form -->
   <form action="/rsvp-submit.php" method="POST">

layouts/partials/obfuscate_email.html

@@ -0,0 +1,17 @@
+{{ $email := . }}
+<span class="email"><b>{{ i18n "javascript" }}</b></span>
+<script>
+  (function() {
+    var email = "{{ $email }}";
+    var user = email.split('@')[0];
+    var domain = email.split('@')[1];
+    var link = document.createElement('a');
+    link.href = 'mailto:' + user + '@' + domain;
+    link.textContent = user + '@' + domain;
+
+    // Replace the placeholder text with the actual link
+    var span = document.currentScript.previousElementSibling;
+    span.textContent = ""; // clear the fallback text
+    span.appendChild(link);
+  })();
+</script>

layouts/shortcodes/email.html

@@ -0,0 +1,8 @@
+// layouts/shortcodes/email.html
+{{ $user := .Get "user" }}
+{{ $domain := .Get "domain" }}
+
+<script>
+  const e = '{{ $user }}' + '@' + '{{ $domain }}';
+  document.write('<a href="mailto:' + e + '">' + e + '</a>');
+</script>