feat:ReplyByEmail button

simplified and updated component

quartz/components/ReplyByEmail.tsx

@@ -2,17 +2,13 @@ import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } fro
 import { classNames } from "../util/lang"
 
 interface ReplyByEmailOptions {
-  username?: string
-  domain?: string
+  email: string
   includeTitles?: string[]
   excludeTitles?: string[]
   buttonLabel?: string
 }
 
-// Default options will be used if not provided in the layout file
-const defaultOptions: ReplyByEmailOptions = {
-  username: "Y29udGFjdA==", // "contact" encoded in base64, as in contact@example.com
-  domain: "ZXhhbXBsZS5jb20=", // "example.com" encoded in base64, as in contact@example.com
+const defaultOptions: Partial<ReplyByEmailOptions> = {
   includeTitles: [],
   excludeTitles: [],
   buttonLabel: "Reply by email"
@@ -21,17 +17,15 @@ const defaultOptions: ReplyByEmailOptions = {
 const ReplyByEmail: QuartzComponent = ({
   fileData,
   displayClass,
-  username,
-  domain,
+  email,
   includeTitles,
   excludeTitles,
   buttonLabel
 }: QuartzComponentProps & ReplyByEmailOptions) => {
   const title = fileData.frontmatter?.title
 
-  // Use provided values or defaults
-  const encodedPart1 = username || defaultOptions.username
-  const encodedPart2 = domain || defaultOptions.domain
+  const encodedEmail = btoa(email)
+
   const includeList = includeTitles || defaultOptions.includeTitles
   const excludeList = excludeTitles || defaultOptions.excludeTitles
   const label = buttonLabel || defaultOptions.buttonLabel
@@ -47,15 +41,22 @@ const ReplyByEmail: QuartzComponent = ({
   if (shouldDisplay) {
     return (
       <div class="center-wrapper">
-        <button
-          class={classNames(displayClass, "reply-by-email-button")}
-          data-username={encodedPart1}
-          data-domain={encodedPart2}
-          data-title={encodeURIComponent(title)}
+      <button
+      class={classNames(displayClass, "reply-by-email-button")}
+      data-email={encodedEmail}
+      data-title={encodeURIComponent(title)}
+      onclick={`
+        const encodedEmail = this.getAttribute('data-email');
+        const email = atob(encodedEmail);
+        const title = this.getAttribute('data-title');
+        const mailtoLink = 'mailto:' + email + '?subject=' + title;
+        window.location.href = mailtoLink;
+        return false;
+        `}
         >
-          {label}
+        {label}
         </button>
-      </div>
+        </div>
     )
   } else {
     return null
@@ -87,61 +88,22 @@ ReplyByEmail.css = `
 }
 `
 
-// Script that works with SPA navigation
-ReplyByEmail.beforeDOMLoaded = `
-// Function to attach email button handlers
-function attachEmailHandlers() {
-  document.querySelectorAll('.reply-by-email-button').forEach(function(button) {
-    // Remove existing event listeners first to prevent duplicates
-    button.removeEventListener('click', handleEmailButtonClick);
-    // Add fresh event listener
-    button.addEventListener('click', handleEmailButtonClick);
-  });
-}
-
-// Handler function for the email button click
-function handleEmailButtonClick(e) {
-  e.preventDefault();
-
-  // Get data attributes
-  const username = atob(this.getAttribute('data-username'));
-  const domain = atob(this.getAttribute('data-domain'));
-  const title = this.getAttribute('data-title');
-
-  // Create email address and mailto link
-  const email = username + '@' + domain;
-  const mailtoLink = 'mailto:' + email + '?subject=' + title;
-
-  // Open email client
-  window.location.href = mailtoLink;
-}
-
-// Initial attachment when the page loads
-document.addEventListener('DOMContentLoaded', attachEmailHandlers);
-
-// Re-attach handlers after SPA navigation
-document.addEventListener('nav', function() {
-  // Small delay to ensure the new buttons are in the DOM
-  setTimeout(attachEmailHandlers, 10);
-});
-`
-
 export default ((opts?: ReplyByEmailOptions) => {
-  // Component constructor that accepts options
+  if (!opts?.email) {
+    throw new Error("ReplyByEmail component requires an email parameter")
+  }
+
   const component: QuartzComponent = (props) => {
     return ReplyByEmail({
       ...props,
-      username: opts?.username,
-      domain: opts?.domain,
+      email: opts.email,
       includeTitles: opts?.includeTitles,
       excludeTitles: opts?.excludeTitles,
       buttonLabel: opts?.buttonLabel
     })
   }
 
-  // Pass through the CSS and beforeDOMLoaded
   component.css = ReplyByEmail.css
-  component.beforeDOMLoaded = ReplyByEmail.beforeDOMLoaded
 
   return component
 }) satisfies QuartzComponentConstructor