Add MastodonDialog and ShareButtons components

rocky-linux · Feb 13, 2024 · 0e952ce · 0e952ce
1 parent cdd3ea2
commit 0e952ce
Show file tree

Hide file tree

Showing 2 changed files with 169 additions and 0 deletions.
diff --git a/components/shareButtons/MastodonDialog.tsx b/components/shareButtons/MastodonDialog.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import * as React from "react";
+import * as z from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Button } from "@/components/ui/button";
+
+const mastodonShareSchema = z.object({
+  instanceUrl: z
+    .string()
+    .regex(
+      /^(?:[a-zA-Z0-9\-_]+\.)+[a-zA-Z]{2,}$/,
+      "Please enter a valid Mastodon instance URL (without https://)"
+    ),
+});
+
+const MastodonDialog = () => {
+  const form = useForm<z.infer<typeof mastodonShareSchema>>({
+    resolver: zodResolver(mastodonShareSchema),
+    defaultValues: {
+      instanceUrl: "",
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof mastodonShareSchema>) {
+    const shareUrl = `https://${values.instanceUrl}/share?text=${encodeURIComponent(window.location.href)}`;
+
+    window.open(shareUrl, "_blank");
+  }
+  return (
+    <>
+      <Popover>
+        <PopoverTrigger>
+          <span className="sr-only">X</span>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            className="h-5"
+            viewBox="0 0 16 16"
+          >
+            <path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z" />
+          </svg>
+        </PopoverTrigger>
+        <PopoverContent>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)}>
+              <FormField
+                control={form.control}
+                name="instanceUrl"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Mastodon Instance URL</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="mastodon.social"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button
+                type="submit"
+                className="mt-4"
+              >
+                Share
+              </Button>
+            </form>
+          </Form>
+        </PopoverContent>
+      </Popover>
+    </>
+  );
+};
+
+export default MastodonDialog;
diff --git a/components/shareButtons/ShareButtons.tsx b/components/shareButtons/ShareButtons.tsx
@@ -0,0 +1,76 @@
+import Link from "next/link";
+import MastodonDialog from "./MastodonDialog";
+
+interface ShareButtonsProps {
+  slug: string;
+}
+
+const ShareButtons = ({ slug }: ShareButtonsProps) => {
+  const facebookLink =
+    "https://www.facebook.com/sharer/sharer.php?u=rockylinux.org/news/" + slug;
+  const xLink =
+    "https://twitter.com/intent/tweet?text=rockylinux.org/news/" + slug;
+  const linkedInLink =
+    "https://www.linkedin.com/sharing/share-offsite/?url=rockylinux.org/news/" +
+    slug;
+
+  return (
+    <>
+      <h3 className="text-sm text-center mb-2">Share:</h3>
+      <div className="flex space-x-6 justify-center mb-12">
+        <MastodonDialog />
+        <Link
+          href={facebookLink}
+          className="hover:text-primary"
+          target="_blank"
+        >
+          <span className="sr-only">Facebook</span>
+          <svg
+            fill="currentColor"
+            viewBox="0 0 24 24"
+            className="h-6 w-6"
+            aria-hidden="true"
+          >
+            <path
+              fillRule="evenodd"
+              d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </Link>
+        <Link
+          href={linkedInLink}
+          className="hover:text-primary"
+          target="_blank"
+        >
+          <span className="sr-only">LinkedIn</span>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            className="h-6 w-6"
+            aria-hidden="true"
+          >
+            <path d="M0 0v24h24v-24h-24zm8 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.397-2.586 7-2.777 7 2.476v6.759z" />
+          </svg>
+        </Link>
+        <Link
+          href={xLink}
+          className="hover:text-primary"
+          target="_blank"
+        >
+          <span className="sr-only">X</span>
+          <svg
+            fill="currentColor"
+            viewBox="0 0 24 24"
+            className="h-6 w-6"
+            aria-hidden="true"
+          >
+            <path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
+          </svg>
+        </Link>
+      </div>
+    </>
+  );
+};
+
+export default ShareButtons;