Update social shares

src/components.d.ts

@@ -114,6 +114,11 @@ export namespace Components {
     }
     interface UiScrollToTopButton {
     }
+    interface UiShareLinks {
+        "additionalLinks": HTMLLinkElement;
+        "shareText": string;
+        "shareUrl": string;
+    }
     interface UiSingleInput {
         "buttonLabel": string;
         "getCurrentValue": () => Promise<string>;
@@ -318,6 +323,12 @@ declare global {
         prototype: HTMLUiScrollToTopButtonElement;
         new (): HTMLUiScrollToTopButtonElement;
     };
+    interface HTMLUiShareLinksElement extends Components.UiShareLinks, HTMLStencilElement {
+    }
+    var HTMLUiShareLinksElement: {
+        prototype: HTMLUiShareLinksElement;
+        new (): HTMLUiShareLinksElement;
+    };
     interface HTMLUiSingleInputElement extends Components.UiSingleInput, HTMLStencilElement {
     }
     var HTMLUiSingleInputElement: {
@@ -357,6 +368,7 @@ declare global {
         "ui-modal": HTMLUiModalElement;
         "ui-pizza-list": HTMLUiPizzaListElement;
         "ui-scroll-to-top-button": HTMLUiScrollToTopButtonElement;
+        "ui-share-links": HTMLUiShareLinksElement;
         "ui-single-input": HTMLUiSingleInputElement;
     }
 }
@@ -475,6 +487,11 @@ declare namespace LocalJSX {
     }
     interface UiScrollToTopButton {
     }
+    interface UiShareLinks {
+        "additionalLinks"?: HTMLLinkElement;
+        "shareText"?: string;
+        "shareUrl"?: string;
+    }
     interface UiSingleInput {
         "buttonLabel"?: string;
         "label"?: string;
@@ -516,6 +533,7 @@ declare namespace LocalJSX {
         "ui-modal": UiModal;
         "ui-pizza-list": UiPizzaList;
         "ui-scroll-to-top-button": UiScrollToTopButton;
+        "ui-share-links": UiShareLinks;
         "ui-single-input": UiSingleInput;
     }
 }
@@ -555,6 +573,7 @@ declare module "@stencil/core" {
             "ui-modal": LocalJSX.UiModal & JSXBase.HTMLAttributes<HTMLUiModalElement>;
             "ui-pizza-list": LocalJSX.UiPizzaList & JSXBase.HTMLAttributes<HTMLUiPizzaListElement>;
             "ui-scroll-to-top-button": LocalJSX.UiScrollToTopButton & JSXBase.HTMLAttributes<HTMLUiScrollToTopButtonElement>;
+            "ui-share-links": LocalJSX.UiShareLinks & JSXBase.HTMLAttributes<HTMLUiShareLinksElement>;
             "ui-single-input": LocalJSX.UiSingleInput & JSXBase.HTMLAttributes<HTMLUiSingleInputElement>;
         }
     }

src/components/app-root/app-root.tsx

@@ -131,8 +131,8 @@ export class AppRoot {
               <div class="right">
                 <ul class="social">
                   <li>
-                    <a class="twitter" href="https://twitter.com/pizzatothepolls" target="blank">
-                      <img class="icon" alt="Twitter" src="/images/icons/twitter.svg" />
+                    <a class="x" href="https://x.com/pizzatothepolls" target="blank">
+                      <img class="icon" alt="X" src="/images/icons/x.svg" />
                     </a>
                   </li>
                   <li>
@@ -145,6 +145,21 @@ export class AppRoot {
                       <img class="icon" alt="Instagram" src="/images/icons/instagram.svg" />
                     </a>
                   </li>
+                  <li>
+                    <a class="tiktok" href="https://www.tiktok.com/@pizzatothepolls/" target="blank">
+                      <img class="icon" alt="TikTok" src="/images/icons/tiktok.svg" />
+                    </a>
+                  </li>
+                  <li>
+                    <a class="threads" href="https://www.threads.net/@pizzatothepolls/" target="blank">
+                      <img class="icon" alt="Threads" src="/images/icons/threads.svg" />
+                    </a>
+                  </li>
+                  <li>
+                    <a class="bluesky" href="https://bsky.app/profile/polls.pizza" target="blank">
+                      <img class="icon" alt="Bluesky" src="/images/icons/bluesky.svg" />
+                    </a>
+                  </li>
                 </ul>
               </div>
             </div>

src/components/form-donate/form-donate.scss

@@ -78,42 +78,6 @@ form-donate {
     }
   }
 
-  .share-donation-link-container {
-    &.can-native-share {
-      // Hide on mobile if native sharing is supported
-      display: none;
-      // Show if not on mobile regardless
-      @media ($tablet) {
-        display: block;
-      }
-    }
-  }
-
-  .share-donation-links {
-    padding: 0;
-
-    li {
-      display: block;
-      margin: 0 auto 10px;
-
-      @media ($tablet) {
-        display: inline-block;
-        margin: 0 10px 0 0;
-      }
-
-      .share-donation-link {
-        img,
-        span {
-          pointer-events: none; // important
-        }
-
-        img {
-          margin-right: 8px;
-        }
-      }
-    }
-  }
-
   #donation-error {
     margin-bottom: 1rem;
     h2 {

src/components/form-donate/form-donate.tsx

@@ -1,4 +1,4 @@
-import { Build, Component, h, Host, Prop, State } from "@stencil/core";
+import { Component, h, Host, Prop, State } from "@stencil/core";
 
 import { PizzaApi } from "../../api";
 
@@ -18,7 +18,6 @@ export class FormDonate {
   @State() private donationType: string = "donation";
   @State() private amount?: number | null;
   @State() private enteredOther?: boolean = false;
-  @State() private canNativeShare: boolean = false;
   @State() private error?: string | null;
 
   public componentWillLoad() {
@@ -51,11 +50,6 @@ export class FormDonate {
   }
 
   public render() {
-    if (Build.isBrowser) {
-      // Determine if `navigator.share` is supported in browser (native device sharing)
-      this.canNativeShare = navigator && navigator.share ? true : false;
-    }
-
     const activateCustomAmountRadio = () => {
       this.enteredOther = true;
 
@@ -120,48 +114,6 @@ export class FormDonate {
     const shareText = "I just donated" + shareAmount + " to Pizza to the Polls to help keep Democracy Delicious this year - you should too! #democracyisdelicious";
     const shareUrl = "https://polls.pizza/donate"; // add URL tracking parameters here, if desired
 
-    // Native sharing on device via `navigator.share` - supported on mobile, tablets, and some browsers
-    const nativeShare = async () => {
-      if (!navigator || !navigator.share) {
-        this.canNativeShare = false;
-        return;
-      }
-
-      try {
-        await navigator.share({
-          title: shareText,
-          text: shareText,
-          url: shareUrl,
-        });
-      } catch (error) {
-        console.log("Sharing failed", error);
-      }
-    };
-
-    // Fallback if native sharing is not available
-    let metaDescription = document.querySelector("meta[name='description']");
-    let shareDescription = "";
-    if (metaDescription) {
-      shareDescription = metaDescription.getAttribute("content") || "";
-    }
-
-    const shareTwitterLink = `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${shareUrl}&via=PizzaToThePolls`;
-
-    const shareFacebookLink = `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}&title=${encodeURIComponent(shareText)}&description=${encodeURIComponent(
-      shareDescription,
-    )}&quote=${encodeURIComponent(shareText)}`;
-
-    const openSharePopup = (e: Event) => {
-      e.preventDefault();
-      const linkTarget = e.target as HTMLLinkElement;
-      const targetURL = linkTarget.getAttribute("href");
-      if (!targetURL) {
-        return;
-      }
-      window.open(targetURL, "popup", "width=600,height=600");
-      return;
-    };
-
     return (
       <Host>
         {!this.showConfirmation && (
@@ -233,54 +185,21 @@ export class FormDonate {
         )}
 
         {this.showConfirmation && (
-          <div id="donate-confirmation">
+          <ui-share-links
+            shareText={shareText}
+            shareUrl={shareUrl}
+            additionalLinks={
+              <li>
+                <stencil-route-link url="/donate" class="button is-fullwidth-mobile color-white" exact={true}>
+                  Make another donation
+                </stencil-route-link>
+              </li>
+            }
+          >
             <h3>Thanks for helping to make the pizza magic happen!</h3>
 
             <p>Help spread the word by sharing your donation!</p>
-
-            {this.canNativeShare && (
-              <button id="share-donation" onClick={nativeShare} class="button is-blue is-fullwidth-mobile">
-                <img class="icon" alt="Share" src="/images/icons/share.svg" />
-                <span>Share your donation!</span>
-              </button>
-            )}
-
-            <div class={"share-donation-link-container " + (this.canNativeShare ? "can-native-share" : "")}>
-              <ul class="share-donation-links">
-                <li>
-                  <a
-                    class="share-donation-link button is-twitter is-fullwidth-mobile"
-                    href={shareTwitterLink}
-                    rel="noopener noreferrer"
-                    target="popup"
-                    onClick={openSharePopup}
-                    title="Share to Twitter"
-                  >
-                    <img class="icon" alt="Twitter" src="/images/icons/twitter.svg" />
-                    <span>Share on Twitter</span>
-                  </a>
-                </li>
-                <li>
-                  <a
-                    class="share-donation-link button is-facebook is-fullwidth-mobile"
-                    href={shareFacebookLink}
-                    rel="noopener noreferrer"
-                    target="popup"
-                    onClick={openSharePopup}
-                    title="Share to Facebook"
-                  >
-                    <img class="icon" alt="Facebook" src="/images/icons/facebook.svg" />
-                    <span>Share on Facebook</span>
-                  </a>
-                </li>
-                <li>
-                  <stencil-route-link url="/donate" class="button is-fullwidth-mobile" exact={true}>
-                    Make another donation
-                  </stencil-route-link>
-                </li>
-              </ul>
-            </div>
-          </div>
+          </ui-share-links>
         )}
       </Host>
     );