From 7f371ffb8baa6fde1afdf619606bf82ddfdfb4b3 Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Wed, 2 Sep 2026 09:32:38 +0800
Subject: [PATCH] Added a Bluesky share button to the published post modal
 (#30356)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref https://linear.app/ghost/issue/DES-1367/add-bluesky-share-button-to-published-post-popup

Bluesky is already offered in Portal's native share, so this brings the
admin modal in line — same intent URL and payload, placed last so the existing
buttons keep their order.

Also fixes the social buttons leaving a gap on the right when the footer
stacks on mobile — they now fill the row at that width.
---
 .../src/shared/analytics/post-share-modal.tsx    |  5 +++++
 .../app/components/modal-post-success.hbs        |  3 +++
 apps/ember-admin/app/styles/app-dark.css         |  4 ++--
 .../app/styles/components/publishmenu.css        | 16 +++++++---------
 .../public/assets/icons/social-bluesky.svg       |  4 ++++
 .../components/patterns/share-modal.stories.tsx  |  5 +++++
 .../src/components/patterns/share-modal.tsx      | 15 +++++++++++++--
 7 files changed, 39 insertions(+), 13 deletions(-)
 create mode 100644 apps/ember-admin/public/assets/icons/social-bluesky.svg

diff --git a/apps/admin/src/shared/analytics/post-share-modal.tsx b/apps/admin/src/shared/analytics/post-share-modal.tsx
index 5ba56fbd45b..9eb422245cf 100644
--- a/apps/admin/src/shared/analytics/post-share-modal.tsx
+++ b/apps/admin/src/shared/analytics/post-share-modal.tsx
@@ -67,6 +67,11 @@ const PostShareModal: React.FC<PostShareModalProps> = ({
           label: 'Share on LinkedIn',
           service: 'linkedin',
         },
+        {
+          href: `https://bsky.app/intent/compose?text=${encodedPostURLTitle}`,
+          label: 'Share on Bluesky',
+          service: 'bluesky',
+        },
       ];
 
   return (
diff --git a/apps/ember-admin/app/components/modal-post-success.hbs b/apps/ember-admin/app/components/modal-post-success.hbs
index 91b5c17a290..82be2e1e6cd 100644
--- a/apps/ember-admin/app/components/modal-post-success.hbs
+++ b/apps/ember-admin/app/components/modal-post-success.hbs
@@ -161,6 +161,9 @@
                 <a href="http://www.linkedin.com/shareArticle?mini=true&title={{this.encodedTitle}}&url={{this.encodedUrl}}" class="gh-btn linkedin" target="_blank" rel="noopener noreferrer" title="Share on LinkedIn">
                     <span>{{svg-jar "social-linkedin"}}</span>
                 </a>
+                <a href="https://bsky.app/intent/compose?text={{this.encodedTitleAndUrl}}" class="gh-btn bluesky" target="_blank" rel="noopener noreferrer" title="Share on Bluesky">
+                    <span>{{svg-jar "social-bluesky"}}</span>
+                </a>
             </div>
                 <GhTaskButton
                     @showIcon={{true}}
diff --git a/apps/ember-admin/app/styles/app-dark.css b/apps/ember-admin/app/styles/app-dark.css
index 234b8a84f93..bf41216388d 100644
--- a/apps/ember-admin/app/styles/app-dark.css
+++ b/apps/ember-admin/app/styles/app-dark.css
@@ -1170,11 +1170,11 @@ kbd {
 /* ---------------------------------
 Publish flow: Share modal */
 
-.modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin) {
+.modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin, .bluesky) {
     background: var(--lightgrey-l1)!important;
 }
 
-.modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin, .copy-link, .copy-preview-link):hover {
+.modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin, .bluesky, .copy-link, .copy-preview-link):hover {
     background: var(--lightgrey-l2)!important;
 }
 
diff --git a/apps/ember-admin/app/styles/components/publishmenu.css b/apps/ember-admin/app/styles/components/publishmenu.css
index d08729d40a2..75337bb2301 100644
--- a/apps/ember-admin/app/styles/components/publishmenu.css
+++ b/apps/ember-admin/app/styles/components/publishmenu.css
@@ -1047,7 +1047,8 @@
 
 .modal-post-success .modal-footer .share-buttons {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
     align-items: center;
     gap: 16px;
 }
@@ -1084,17 +1085,18 @@
     flex-grow: 1;
 }
 
-.modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin) {
+.modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin, .bluesky) {
     width: 56px;
+    min-width: 0;
     background: var(--whitegrey-l1);
     border-color: transparent;
 }
 
-.modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin, .copy-link, .copy-preview-link):hover {
+.modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin, .bluesky, .copy-link, .copy-preview-link):hover {
     background: var(--whitegrey);
 }
 
-.modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin) span {
+.modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin, .bluesky) span {
     font-size: 0;
 }
 
@@ -1122,10 +1124,6 @@
         flex-direction: column;
     }
 
-    .modal-post-success .modal-footer .share-buttons {
-        grid-template-columns: repeat(2, 1fr);
-    }
-
     .modal-post-success .modal-footer .copy-link,
     .modal-post-success .modal-footer .copy-preview-link {
         width: 100%!important;
@@ -1137,7 +1135,7 @@
         flex-direction: column;
     }
 
-    .modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin) {
+    .modal-post-success .modal-footer .gh-btn:is(.twitter, .threads, .facebook, .linkedin, .bluesky) {
         width: auto;
     }
 }
diff --git a/apps/ember-admin/public/assets/icons/social-bluesky.svg b/apps/ember-admin/public/assets/icons/social-bluesky.svg
new file mode 100644
index 00000000000..00be90edb1a
--- /dev/null
+++ b/apps/ember-admin/public/assets/icons/social-bluesky.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 -33.5 568 568" fill="none" xmlns="http://www.w3.org/2000/svg">
+<title>social-bluesky</title>
+<path d="M123.121 33.664C188.241 82.553 258.281 181.681 284 234.873c25.719-53.192 95.759-152.32 160.879-201.209C491.866-1.612 568-28.906 568 57.946c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748 114.875 19.551 144.097 84.311 80.986 149.071-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.889-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.292 0 57.946 0-28.906 76.135-1.612 123.121 33.664z" fill="#0085ff" class="bluesky"/>
+</svg>
diff --git a/apps/shade/src/components/patterns/share-modal.stories.tsx b/apps/shade/src/components/patterns/share-modal.stories.tsx
index 016d2c0e158..13eb2c90835 100644
--- a/apps/shade/src/components/patterns/share-modal.stories.tsx
+++ b/apps/shade/src/components/patterns/share-modal.stories.tsx
@@ -45,6 +45,11 @@ const postSocialLinks: ShareModalSocialLink[] = [
     label: 'Share on LinkedIn',
     service: 'linkedin',
   },
+  {
+    href: `https://bsky.app/intent/compose?text=${encodedPostTitleAndUrl}`,
+    label: 'Share on Bluesky',
+    service: 'bluesky',
+  },
 ];
 
 const publicationSocialLinks: ShareModalSocialLink[] = [
diff --git a/apps/shade/src/components/patterns/share-modal.tsx b/apps/shade/src/components/patterns/share-modal.tsx
index 46e4aafb59e..bed7f140242 100644
--- a/apps/shade/src/components/patterns/share-modal.tsx
+++ b/apps/shade/src/components/patterns/share-modal.tsx
@@ -13,7 +13,7 @@ import {
 } from '@/components/ui/dialog';
 import { cn } from '@/lib/utils';
 
-type ShareService = 'x' | 'threads' | 'facebook' | 'linkedin';
+type ShareService = 'x' | 'threads' | 'facebook' | 'linkedin' | 'bluesky';
 
 export type ShareModalSocialLink = {
   href: string;
@@ -198,6 +198,17 @@ function SocialIcon({ service }: { service: ShareService }) {
     );
   }
 
+  if (service === 'bluesky') {
+    return (
+      <svg fill="none" viewBox="0 -33.5 568 568">
+        <path
+          d="M123.121 33.664C188.241 82.553 258.281 181.681 284 234.873c25.719-53.192 95.759-152.32 160.879-201.209C491.866-1.612 568-28.906 568 57.946c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748 114.875 19.551 144.097 84.311 80.986 149.071-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.889-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.292 0 57.946 0-28.906 76.135-1.612 123.121 33.664z"
+          fill="#0085ff"
+        ></path>
+      </svg>
+    );
+  }
+
   return (
     <svg aria-hidden="true" viewBox="0 0 24 24">
       <path
@@ -247,7 +258,7 @@ function SocialLinks({ className, layout = 'footer', links, ...props }: SocialLi
         <a
           key={link.id ?? link.href}
           aria-label={link.label}
-          className="flex h-(--control-height) w-14 items-center justify-center rounded-xs bg-muted px-3 hover:bg-muted-foreground/20 [&_svg]:h-4"
+          className="flex h-(--control-height) flex-1 items-center justify-center rounded-xs bg-muted px-3 hover:bg-muted-foreground/20 sm:w-14 sm:flex-none [&_svg]:h-4"
           href={link.href}
           rel="noopener noreferrer"
           target="_blank"