add: share options to blog posts.

src/lib/constants.ts

@@ -14,6 +14,40 @@ export type Social = {
     link: string;
 };
 
+export type SocialShareOption = {
+    icon: string;
+    label: string;
+    link: string;
+    type: 'link' | 'copy';
+};
+
+export const sharingOptions: Array<SocialShareOption> = [
+    {
+        icon: 'web-icon-x',
+        label: 'Twitter',
+        link: 'https://x.com/intent/post?text={TITLE}\n&url={URL}',
+        type: 'link'
+    },
+    {
+        icon: 'web-icon-linkedin',
+        label: 'LinkedIn',
+        link: 'https://www.linkedin.com/sharing/share-offsite?text={TITLE}\n&url={URL}',
+        type: 'link'
+    },
+    {
+        icon: 'web-icon-ycombinator',
+        label: 'YCombinator',
+        link: 'https://news.ycombinator.com/submitlink?t={TITLE}\n&u={URL}',
+        type: 'link'
+    },
+    {
+        icon: 'web-icon-copy',
+        label: 'Copy',
+        link: '',
+        type: 'copy'
+    }
+]
+
 export const socials: Array<Social> = [
     {
         icon: 'web-icon-discord',

src/markdoc/layouts/Post.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
     import { Media } from '$lib/UI';
     import { scroll } from '$lib/animations';
-    import { Article, FooterNav, MainFooter, Newsletter } from '$lib/components';
+    import { Article, FooterNav, MainFooter, Newsletter, Tooltip } from '$lib/components';
     import { Main } from '$lib/layouts';
     import { formatDate } from '$lib/utils/date';
     import { DEFAULT_HOST } from '$lib/utils/metadata';
     import type { AuthorData, CategoryData, PostsData } from '$routes/blog/content';
     import { BLOG_TITLE_SUFFIX } from '$routes/titles';
     import { getContext } from 'svelte';
+    import { type SocialShareOption, sharingOptions } from '$lib/constants';
+    import { copy } from '$lib/utils/copy';
+    import { page } from '$app/stores';
 
     export let title: string;
     export let description: string;
@@ -32,6 +35,35 @@
     }
 
     let readPercentage = 0;
+
+    enum CopyStatus {
+        Copy = 'Copy URL',
+        Copied = 'Copied!'
+    }
+
+    let copyText = CopyStatus.Copy;
+    async function handleCopy(content: string) {
+        await copy(content);
+
+        copyText = CopyStatus.Copied;
+        setTimeout(() => {
+            copyText = CopyStatus.Copy;
+        }, 1000);
+    }
+
+    async function handleShareClick(shareOption: SocialShareOption){
+        const blogPostUrl = encodeURI(`https://appwrite.io${$page.url.pathname}`)
+
+        if (shareOption.type === 'copy') {
+            await handleCopy(blogPostUrl);
+        } else if (shareOption.type === 'link') {
+            const shareableLink = shareOption.link
+                .replace('{TITLE}', title + '.')
+                .replace('{URL}', blogPostUrl);
+
+            window.open(shareableLink, '_blank', 'noopener, noreferrer');
+        }
+    }
 </script>
 
 <svelte:head>
@@ -152,6 +184,38 @@
 										</ul> -->
                                     </div>
                                 {/if}
+
+                                <div class="share-post-section u-flex u-gap-16 u-margin-block-start-16">
+                                    <span
+                                        class="u-font-size-16 u-padding-inline-end-8"
+                                        style:font-weight="500">
+                                        SHARE
+                                    </span>
+
+                                    <ul class="u-flex u-gap-8">
+                                        {#each sharingOptions as sharingOption}
+                                            <li class="share-list-item">
+                                                <Tooltip placement="bottom" disableHoverableContent={true}>
+                                                    <button
+                                                        class="web-icon-button"
+                                                        aria-label={sharingOption.label}
+                                                        on:click="{() => handleShareClick(sharingOption)}"
+                                                    >
+                                                        <span class={sharingOption.icon} aria-hidden="true" />
+                                                    </button>
+
+                                                    <svelte:fragment slot="tooltip">
+                                                        {
+                                                            sharingOption.type === 'copy'
+                                                                ? copyText
+                                                                : `Share on ${sharingOption.label}`
+                                                        }
+                                                    </svelte:fragment>
+                                                </Tooltip>
+                                            </li>
+                                        {/each}
+                                    </ul>
+                                </div>
                             </header>
                             {#if cover}
                                 <div class="web-media-container">
@@ -221,4 +285,17 @@
         background: hsl(var(--web-color-accent));
         z-index: 10000;
     }
+
+    @media (min-width: 1024px) {
+      .web-main-article-header {
+        padding-block-end: 0;
+        border-block-end: unset;
+      }
+    }
+
+    .share-post-section {
+      padding: 16px 0;
+      border-block-end: solid 0.0625rem hsl(var(--web-color-border));
+      border-block-start: solid 0.0625rem hsl(var(--web-color-border));
+    }
 </style>