Merge pull request #122 from Linaro/WEBDEV-1997

add social sharing buttons to blog post

src/components/sections/SocialsSharing.astro

@@ -0,0 +1,150 @@
+---
+import { Icon } from "astro-icon/components";
+import { getEntry } from "astro:content";
+
+type Props = {
+  size?: number;
+  color?: string;
+  outline?: boolean;
+  styles?: string;
+  description: string;
+};
+
+const { data: icons } = await getEntry("data", "socialsSharing");
+
+const url = Astro.request.url;
+
+const encodedUrl = encodeURIComponent(url);
+
+const links = [
+  {
+    name: "Facebook",
+    baseUrl: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}&src=sdkpreparse`,
+  },
+  {
+    name: "X",
+    baseUrl: `https://twitter.com/intent/tweet?url=${url}`,
+  },
+  {
+    name: "LinkedIn",
+    baseUrl: `http://www.linkedin.com/shareArticle?mini=true&url=${url}`,
+  },
+  {
+    name: "Mastodon",
+    baseUrl: "test",
+  },
+  { name: 'Threads',
+    baseUrl: `https://www.threads.net/intent/post?url=${encodedUrl}`
+  }
+];
+
+const iconMap = icons.reduce(
+  (acc: { [x: string]: any }, item: { label: string; icon: any }) => {
+    acc[item.label] = item.icon;
+    return acc;
+  },
+  {}
+);
+
+const mergedLists = links.map((item) => ({
+  ...item,
+  icon: iconMap[item.name],
+}));
+
+const { size, color, outline, styles, description } = Astro.props;
+const iconColor = color ? `text-${color}` : "text-white";
+const borderColor = color ? `border-${color}` : `border-white`;
+---
+
+<div class="mt-2">
+    <dialog id="mastodon-modal" class="bg-transparent rounded-xl mx-auto fixed top-0 md:top-[10%] right-0 left-0">
+        <div class="bg-black lg:min-w-[40rem] max-w-xl rounded-3xl px-8 py-4 w-full">
+        <form method="dialog" class="flex flex-col items-start gap-8">
+            <label for="instance-input" class="text-3xl text-white my-2 font-bold">Please enter Mastodon Instance:</label>
+            <input type="text" id="instance-input" name="instance-input" class="text-black pl-2 h-12 w-full" value="mastodon.social"></input>
+            <div class="flex gap-8">
+                <a href='#' target="_blank" id="submit" class="linaro-gradient-button">Submit</a>
+                <button type="button" id="cancelButton" class="text-white font-bold">Cancel</button>
+            </div>
+
+        </form>
+    </div>
+    </dialog>
+
+  <ul class:list={["not-prose flex flex-wrap", styles]}>
+    {
+      mergedLists.map(
+        ({
+          name,
+          baseUrl,
+          icon,
+        }: {
+          baseUrl: string;
+          icon: string;
+          name: string;
+        }) =>
+          name === "Mastodon" ? (
+            <li
+              class:list={[
+                borderColor,
+                outline ? `p-3 border-2 rounded-full` : "border-none",
+              ]}>
+              <button
+                aria-label={name}
+                class="mastodon-share"
+                id="mastodon-share-button">
+                <Icon
+                  name={icon}
+                  size={size || 20}
+                  class:list={[iconColor, "hover:text-linaro-yellow"]}
+                />
+              </button>
+            </li>
+            <script define:vars={{ description, url }}>
+                const dialog = document.getElementById('mastodon-modal');
+                const openDialogButton = document.getElementById('mastodon-share-button');
+                const cancelButton = document.getElementById('cancelButton');
+                const userInput = document.getElementById('instance-input');
+                const submit = document.getElementById('submit');
+                let input = '';
+
+                openDialogButton.addEventListener('click', () => {
+                    dialog.showModal();
+                });
+                cancelButton.addEventListener('click', () => {
+                    dialog.close();
+                });
+                dialog.addEventListener('close', () => {
+                    if (dialog.returnValue !== 'cancel') {
+                        input = userInput.ariaValueMax;
+                    }
+                });
+                submit.addEventListener('click', () => {
+                    const instance = userInput.value;
+                    if (instance) {
+                        submit.setAttribute('href', `https://${instance}/share?text=${encodeURIComponent(description)}%20${encodeURIComponent(url)}`);
+                    };
+                });
+            </script>
+
+
+          ) : (
+            <li
+              class:list={[
+                borderColor,
+                outline ? `p-3 border-2 rounded-full` : "border-none",
+              ]}>
+              <a href={baseUrl} target="_blank" aria-label={name}>
+                <Icon
+                  name={icon}
+                  size={size || 20}
+                  class:list={[iconColor, "hover:text-linaro-yellow"]}
+                />
+              </a>
+            </li>
+          )
+      )
+    }
+  </ul>
+</div>
+

src/content/data/socialsSharing.yaml

@@ -0,0 +1,10 @@
+- label: X
+  icon: X
+- label: Facebook
+  icon: facebook
+- label: LinkedIn
+  icon: linkedin
+- label: Mastodon
+  icon: mastodon
+- label: Threads
+  icon: threads

src/layouts/BlogLayout.astro

@@ -12,6 +12,7 @@ import stripMarkdown from "strip-markdown";
 import ArticleContent from "@/components/article/ArticleContent.astro";
 import { getCollection } from "astro:content";
 import BlogListing from "@/components/article/blog/BlogListing.astro";
+import SocialsSharing from "@/components/sections/SocialsSharing.astro";
 
 type Props = {
   post: CollectionEntry<"blogs">;
@@ -91,13 +92,11 @@ if (related.length > 0) {
   <main
     data-pagefind-body
     data-pagefind-filter={`type:${collection}`}
-    class="z-0"
-  >
+    class="z-0">
     <section
       class:list={[
         "relative hero-background-image pt-32 pb-16  container mx-auto max-w-5xl px-8 xl:px-0 z-[-1]",
-      ]}
-    >
+      ]}>
       <h1 class="text-5xl font-bold mb-16 max-w-4xl">
         {title}
       </h1>
@@ -127,6 +126,13 @@ if (related.length > 0) {
           class="block sm:inline-block sm:before:content-['|'] sm:before:mx-4"
           >{readTime}</span
         >
+        <SocialsSharing
+          size={20}
+          outline={false}
+          color="white"
+          styles="gap-6 justify-left"
+          description={description}
+        />
       </p>
       <ul class="flex flex-wrap gap-4 my-8">
         {
@@ -147,8 +153,7 @@ if (related.length > 0) {
   </main>
   <aside
     class="container mx-auto max-w-5xl px-8 xl:px-0 mb-24"
-    data-pagefind-ignore
-  >
+    data-pagefind-ignore>
     <h2 class="text-5xl text-linaro-yellow font-bold mb-16">Related Posts</h2>
     <ul class="flex flex-wrap gap-8 justify-center">
       {relatedPosts?.map((post) => <BlogListing {...post} />)}