From 73e0ed070307af0dfb9674458672dc666c898a62 Mon Sep 17 00:00:00 2001
From: nick-funk <code@nickfunk.com>
Date: Thu, 28 Nov 2024 14:05:39 -0700
Subject: [PATCH 01/14] update types across the server and client to support
 Bluesky

something weird is still going on, the oembeds don't show
up properly in preview or when embedded in the media view
---
 .../sections/General/MediaLinksConfig.tsx     | 23 +++++++++++
 .../client/framework/components/Frame.tsx     |  2 +-
 .../stream/common/Media/BlueskyMedia.tsx      | 30 ++++++++++++++
 .../MediaConfirmation/MediaConfirmPrompt.tsx  | 18 ++++++++
 .../MediaConfirmation/MediaPreview.tsx        |  3 ++
 .../Stream/CommentForm/CommentForm.tsx        | 10 ++++-
 .../Stream/CommentForm/MediaField.tsx         |  2 +-
 .../PostCommentFormContainer.tsx              |  3 ++
 common/lib/helpers/findMediaLinks.ts          |  7 +++-
 locales/en-US/stream.ftl                      |  2 +
 .../core/server/app/handlers/api/oembed.ts    |  2 +-
 .../resolvers/BlueskyMediaConfiguration.ts    | 12 ++++++
 .../server/graph/resolvers/CommentMedia.ts    |  2 +
 .../src/core/server/graph/resolvers/index.ts  |  2 +
 .../core/server/graph/schema/schema.graphql   | 41 +++++++++++++++++++
 .../core/server/models/comment/revision.ts    |  7 ++++
 .../src/core/server/models/tenant/helpers.ts  |  4 +-
 .../core/server/services/comments/media.ts    | 32 +++++++++++----
 .../src/core/server/services/oembed/oembed.ts |  8 +++-
 server/src/core/server/stacks/editComment.ts  |  3 +-
 20 files changed, 194 insertions(+), 19 deletions(-)
 create mode 100644 client/src/core/client/stream/common/Media/BlueskyMedia.tsx
 create mode 100644 server/src/core/server/graph/resolvers/BlueskyMediaConfiguration.ts

diff --git a/client/src/core/client/admin/routes/Configure/sections/General/MediaLinksConfig.tsx b/client/src/core/client/admin/routes/Configure/sections/General/MediaLinksConfig.tsx
index 51b7738d1e..d1d5b7d759 100644
--- a/client/src/core/client/admin/routes/Configure/sections/General/MediaLinksConfig.tsx
+++ b/client/src/core/client/admin/routes/Configure/sections/General/MediaLinksConfig.tsx
@@ -41,6 +41,9 @@ graphql`
       twitter {
         enabled
       }
+      bluesky {
+        enabled
+      }
       youtube {
         enabled
       }
@@ -90,6 +93,26 @@ const MediaLinksConfig: FunctionComponent<Props> = ({ disabled }) => {
         />
       </FormField>
 
+      <FormField>
+        <Localized id="configure-general-embedLinks-enableBlueskeyEmbeds">
+          <Label component="legend">Allow Bluesky post embeds</Label>
+        </Localized>
+        <OnOffField
+          name="media.bluesky.enabled"
+          disabled={disabled}
+          onLabel={
+            <Localized id="configure-general-embedLinks-On">
+              <span>Yes</span>
+            </Localized>
+          }
+          offLabel={
+            <Localized id="configure-general-embedLinks-Off">
+              <span>No</span>
+            </Localized>
+          }
+        />
+      </FormField>
+
       <FormField>
         <Localized id="configure-general-embedLinks-enableYouTubeEmbeds">
           <Label component="legend">Allow YouTube embeds</Label>
diff --git a/client/src/core/client/framework/components/Frame.tsx b/client/src/core/client/framework/components/Frame.tsx
index f24a4603c8..7734070389 100644
--- a/client/src/core/client/framework/components/Frame.tsx
+++ b/client/src/core/client/framework/components/Frame.tsx
@@ -22,7 +22,7 @@ interface Props {
   isToggled?: boolean;
   width?: string;
   showFullHeight?: boolean;
-  type?: "twitter" | "youtube" | "external_media";
+  type?: "twitter" | "bsky" | "youtube" | "external_media";
   mobile?: boolean;
 }
 
diff --git a/client/src/core/client/stream/common/Media/BlueskyMedia.tsx b/client/src/core/client/stream/common/Media/BlueskyMedia.tsx
new file mode 100644
index 0000000000..6f3d681688
--- /dev/null
+++ b/client/src/core/client/stream/common/Media/BlueskyMedia.tsx
@@ -0,0 +1,30 @@
+import React, { FunctionComponent } from "react";
+
+import Frame from "coral-framework/components/Frame";
+
+interface Props {
+  id?: string;
+  url: string;
+  siteID: string;
+  isToggled?: boolean;
+}
+
+const BlueskyMedia: FunctionComponent<Props> = ({
+  id,
+  url,
+  siteID,
+  isToggled,
+}) => {
+  const component = encodeURIComponent(url);
+  return (
+    <Frame
+      id={id}
+      width="100%"
+      src={`/api/oembed?type=bsky&url=${component}&siteID=${siteID}`}
+      isToggled={isToggled}
+      type="bsky"
+    />
+  );
+};
+
+export default BlueskyMedia;
diff --git a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmPrompt.tsx b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmPrompt.tsx
index e05c1df6a7..b37c156ff9 100644
--- a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmPrompt.tsx
+++ b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmPrompt.tsx
@@ -51,6 +51,13 @@ const MediaConfirmPrompt: FunctionComponent<Props> = ({
                 </p>
               </Localized>
             )}
+            {media.type === "bsky" && (
+              <Localized id="comments-postComment-confirmMedia-bsky">
+                <p className={styles.prompt}>
+                  Add this post to the end of your comment?
+                </p>
+              </Localized>
+            )}
             <p className={styles.url}>{media.url}</p>
           </div>
         </div>
@@ -76,6 +83,17 @@ const MediaConfirmPrompt: FunctionComponent<Props> = ({
               </Button>
             </Localized>
           )}
+          {media.type === "bsky" && (
+            <Localized id="comments-postComment-confirmMedia-add-bsky">
+              <Button
+                color="mono"
+                onClick={onConfirm}
+                className={styles.promptButton}
+              >
+                Add post
+              </Button>
+            </Localized>
+          )}
           {media.type === "youtube" && (
             <Localized id="comments-postComment-confirmMedia-add-video">
               <Button
diff --git a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaPreview.tsx b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaPreview.tsx
index 3a5368f35a..9e812f417e 100644
--- a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaPreview.tsx
+++ b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaPreview.tsx
@@ -7,6 +7,7 @@ import {
   TwitterMedia,
   YouTubeMedia,
 } from "coral-stream/common/Media";
+import BlueskyMedia from "coral-stream/common/Media/BlueskyMedia";
 import { RemoveIcon, SvgIcon } from "coral-ui/components/icons";
 import { Flex, HorizontalGutter, MatchMedia } from "coral-ui/components/v2";
 import { Button } from "coral-ui/components/v3";
@@ -66,6 +67,8 @@ const MediaPreview: FunctionComponent<Props> = ({
               <ExternalMedia url={media.url} siteID={siteID} />
             ) : media.type === "twitter" ? (
               <TwitterMedia url={media.url} siteID={siteID} />
+            ) : media.type === "bsky" ? (
+              <BlueskyMedia url={media.url} siteID={siteID} />
             ) : media.type === "youtube" ? (
               <YouTubeMedia url={media.url} siteID={siteID} isToggled={true} />
             ) : null}
diff --git a/client/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx b/client/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx
index 909c3eda43..4550a61497 100644
--- a/client/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx
+++ b/client/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx
@@ -73,6 +73,9 @@ interface MediaConfig {
   twitter: {
     enabled: boolean;
   };
+  bluesky: {
+    enabled: boolean;
+  };
   youtube: {
     enabled: boolean;
   };
@@ -199,7 +202,9 @@ const CommentForm: FunctionComponent<Props> = ({
         // if there is a pending or selected twitter or youtube url
         if (
           existingLink &&
-          (existingLink.type === "twitter" || existingLink.type === "youtube")
+          (existingLink.type === "twitter" ||
+            existingLink.type === "youtube" ||
+            existingLink.type === "bsky")
         ) {
           const links = findMediaLinks(html);
           // ensure the text still contains the link
@@ -241,7 +246,8 @@ const CommentForm: FunctionComponent<Props> = ({
         link &&
         mediaConfig &&
         ((link.type === "twitter" && mediaConfig.twitter.enabled) ||
-          (link.type === "youtube" && mediaConfig.youtube.enabled))
+          (link.type === "youtube" && mediaConfig.youtube.enabled) ||
+          (link.type === "bsky" && mediaConfig.bluesky.enabled))
       ) {
         setPastedMedia({ ...link });
       }
diff --git a/client/src/core/client/stream/tabs/Comments/Stream/CommentForm/MediaField.tsx b/client/src/core/client/stream/tabs/Comments/Stream/CommentForm/MediaField.tsx
index 47ba774383..28f273fc86 100644
--- a/client/src/core/client/stream/tabs/Comments/Stream/CommentForm/MediaField.tsx
+++ b/client/src/core/client/stream/tabs/Comments/Stream/CommentForm/MediaField.tsx
@@ -41,7 +41,7 @@ interface Props {
 
 interface Media {
   id?: string;
-  type: "giphy" | "tenor" | "twitter" | "youtube" | "external";
+  type: "giphy" | "tenor" | "twitter" | "bsky" | "youtube" | "external";
   url: string;
   width?: string;
   height?: string;
diff --git a/client/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormContainer.tsx b/client/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormContainer.tsx
index 2f9b126872..91981223d7 100644
--- a/client/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormContainer.tsx
+++ b/client/src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentFormContainer.tsx
@@ -411,6 +411,9 @@ const enhanced = withFragmentContainer<Props>({
         twitter {
           enabled
         }
+        bluesky {
+          enabled
+        }
         youtube {
           enabled
         }
diff --git a/common/lib/helpers/findMediaLinks.ts b/common/lib/helpers/findMediaLinks.ts
index 4ece009f96..fe7a5625c2 100644
--- a/common/lib/helpers/findMediaLinks.ts
+++ b/common/lib/helpers/findMediaLinks.ts
@@ -1,4 +1,4 @@
-type MediaType = "twitter" | "youtube" | "external";
+type MediaType = "twitter" | "youtube" | "external" | "bsky";
 
 export interface MediaLink {
   type: MediaType;
@@ -43,6 +43,11 @@ const patterns: ReadonlyArray<{ type: MediaType; pattern: RegExp }> = [
     pattern:
       /(https?:\/\/)?(www\.|mobile\.)?(x\.com\/[a-zA-z0-9]+\/status\/[0-9]+)/g,
   },
+  {
+    type: "bsky",
+    pattern:
+      /(https?:\/\/)?(bsky\.app)?(\/profile\/[a-zA-z0-9\.]+\/post\/[a-zA-z0-9\.]+)/g,
+  }
 ];
 
 export function findMediaLinks(body: string): MediaLink[] {
diff --git a/locales/en-US/stream.ftl b/locales/en-US/stream.ftl
index dcaa5b8557..2da430d3a8 100644
--- a/locales/en-US/stream.ftl
+++ b/locales/en-US/stream.ftl
@@ -133,8 +133,10 @@ comments-postComment-insertImage = Insert
 
 comments-postComment-confirmMedia-youtube = Add this YouTube video to the end of your comment?
 comments-postComment-confirmMedia-twitter = Add this post to the end of your comment?
+comments-postComment-confirmMedia-bsky = Add this post to the end of your comment?
 comments-postComment-confirmMedia-cancel = Cancel
 comments-postComment-confirmMedia-add-tweet = Add post
+comments-postComment-confirmMedia-add-bsky = Add post
 comments-postComment-confirmMedia-add-video = Add video
 comments-postComment-confirmMedia-remove = Remove
 comments-commentForm-gifPreview-remove = Remove
diff --git a/server/src/core/server/app/handlers/api/oembed.ts b/server/src/core/server/app/handlers/api/oembed.ts
index a4976fffd2..181bf9e337 100644
--- a/server/src/core/server/app/handlers/api/oembed.ts
+++ b/server/src/core/server/app/handlers/api/oembed.ts
@@ -20,7 +20,7 @@ const OEmbedQuerySchema = Joi.object().keys({
 });
 
 interface OEmbedQuery {
-  type: "twitter" | "youtube";
+  type: "twitter" | "youtube" | "bsky";
   url: string;
   maxWidth?: number;
   commentID?: string;
diff --git a/server/src/core/server/graph/resolvers/BlueskyMediaConfiguration.ts b/server/src/core/server/graph/resolvers/BlueskyMediaConfiguration.ts
new file mode 100644
index 0000000000..4f071271a0
--- /dev/null
+++ b/server/src/core/server/graph/resolvers/BlueskyMediaConfiguration.ts
@@ -0,0 +1,12 @@
+import {
+  GQLBlueskyMediaConfiguration,
+  GQLBlueskyMediaConfigurationTypeResolver,
+} from "coral-server/graph/schema/__generated__/types";
+
+export const BlueskyMediaConfiguration: Required<
+  GQLBlueskyMediaConfigurationTypeResolver<
+    Partial<GQLBlueskyMediaConfiguration>
+  >
+> = {
+  enabled: ({ enabled = false }) => enabled,
+};
diff --git a/server/src/core/server/graph/resolvers/CommentMedia.ts b/server/src/core/server/graph/resolvers/CommentMedia.ts
index 7ea2d346f5..0aa9165716 100644
--- a/server/src/core/server/graph/resolvers/CommentMedia.ts
+++ b/server/src/core/server/graph/resolvers/CommentMedia.ts
@@ -14,6 +14,8 @@ const resolveType: GQLCommentMediaTypeResolver<comment.CommentMedia> = (
       return "YouTubeMedia";
     case "twitter":
       return "TwitterMedia";
+    case "bsky":
+      return "BlueskyMedia";
     case "external":
       return "ExternalMedia";
     default:
diff --git a/server/src/core/server/graph/resolvers/index.ts b/server/src/core/server/graph/resolvers/index.ts
index 2f409e177d..2089055f1e 100644
--- a/server/src/core/server/graph/resolvers/index.ts
+++ b/server/src/core/server/graph/resolvers/index.ts
@@ -10,6 +10,7 @@ import { AuthenticationTargetFilter } from "./AuthenticationTargetFilter";
 import { AuthIntegrations } from "./AuthIntegrations";
 import { BanStatus } from "./BanStatus";
 import { BanStatusHistory } from "./BanStatusHistory";
+import { BlueskyMediaConfiguration } from "./BlueskyMediaConfiguration";
 import { CloseCommenting } from "./CloseCommenting";
 import { Comment } from "./Comment";
 import { CommentCounts } from "./CommentCounts";
@@ -161,6 +162,7 @@ const Resolvers: GQLResolver = {
   Tag,
   Time,
   TwitterMediaConfiguration,
+  BlueskyMediaConfiguration,
   User,
   UserDeletionHistory,
   UserDeletionStatus,
diff --git a/server/src/core/server/graph/schema/schema.graphql b/server/src/core/server/graph/schema/schema.graphql
index 6630358328..4c9268fbd2 100644
--- a/server/src/core/server/graph/schema/schema.graphql
+++ b/server/src/core/server/graph/schema/schema.graphql
@@ -1539,6 +1539,7 @@ type GifMediaConfiguration {
   """
   key: String
 }
+
 type TwitterMediaConfiguration {
   """
   enabled is true when twitter media objects are enabled.
@@ -1546,6 +1547,13 @@ type TwitterMediaConfiguration {
   enabled: Boolean!
 }
 
+type BlueskyMediaConfiguration {
+  """
+  enabled is true when Bluesky media objects are enabled.
+  """
+  enabled: Boolean!
+}
+
 type YouTubeMediaConfiguration {
   """
   enabled is true when youtube media objects are enabled.
@@ -1566,6 +1574,11 @@ type MediaConfiguration {
   """
   twitter: TwitterMediaConfiguration!
 
+  """
+  bluesky is the configuration for Bluesky support.
+  """
+  bluesky: BlueskyMediaConfiguration!
+
   """
   youtube is the configuration for YouTube support.
   """
@@ -4091,6 +4104,21 @@ type TwitterMedia {
   width: Int
 }
 
+"""
+BlueskyMedia is a specific Bluesky Tweet.
+"""
+type BlueskyMedia {
+  """
+  url is the URL of a Bluesky tweet.
+  """
+  url: String!
+
+  """
+  width is the width of the Bluesky tweet in pixels.
+  """
+  width: Int
+}
+
 """
 YouTubeMedia is a specific YouTube video.
 """
@@ -4152,6 +4180,7 @@ union CommentMedia =
   | YouTubeMedia
   | ExternalMedia
   | TenorMedia
+  | BlueskyMedia
 
 type CommentRevision {
   """
@@ -6428,6 +6457,13 @@ input TwitterMediaConfigurationInput {
   enabled: Boolean
 }
 
+input BlueskyMediaConfigurationInput {
+  """
+  enabled is true when Bluesky media objects are enabled.
+  """
+  enabled: Boolean
+}
+
 input YouTubeMediaConfigurationInput {
   """
   enabled is true when youtube media objects are enabled.
@@ -6463,6 +6499,11 @@ input MediaConfigurationInput {
   """
   twitter: TwitterMediaConfigurationInput
 
+  """
+  bluesky is the configuration for Twitter support.
+  """
+  bluesky: BlueskyMediaConfigurationInput
+
   """
   youtube is the configuration for YouTube support.
   """
diff --git a/server/src/core/server/models/comment/revision.ts b/server/src/core/server/models/comment/revision.ts
index d6151cc920..31a596323a 100644
--- a/server/src/core/server/models/comment/revision.ts
+++ b/server/src/core/server/models/comment/revision.ts
@@ -112,6 +112,12 @@ export interface TwitterMedia {
   width?: number;
 }
 
+export interface BlueskyMedia {
+  type: "bsky";
+  url: string;
+  width?: number;
+}
+
 export interface YouTubeMedia {
   type: "youtube";
   url: string;
@@ -132,6 +138,7 @@ export type CommentMedia =
   | GiphyMedia
   | TenorMedia
   | TwitterMedia
+  | BlueskyMedia
   | YouTubeMedia
   | ExternalMedia;
 
diff --git a/server/src/core/server/models/tenant/helpers.ts b/server/src/core/server/models/tenant/helpers.ts
index 4ddf27d79a..ac2ff440b3 100644
--- a/server/src/core/server/models/tenant/helpers.ts
+++ b/server/src/core/server/models/tenant/helpers.ts
@@ -108,13 +108,15 @@ export function getWebhookEndpoint(
 
 export function supportsMediaType(
   tenant: Pick<Tenant, "media" | "featureFlags">,
-  type: "twitter" | "youtube" | "giphy" | "tenor" | "external"
+  type: "twitter" | "bsky" | "youtube" | "giphy" | "tenor" | "external"
 ): tenant is Omit<Tenant, "media"> & Required<Pick<Tenant, "media">> {
   switch (type) {
     case "external":
       return hasFeatureFlag(tenant, GQLFEATURE_FLAG.EXTERNAL_MEDIA);
     case "twitter":
       return !!tenant.media?.twitter.enabled;
+    case "bsky":
+      return !!tenant.media?.bluesky.enabled;
     case "youtube":
       return !!tenant.media?.youtube.enabled;
     case "giphy":
diff --git a/server/src/core/server/services/comments/media.ts b/server/src/core/server/services/comments/media.ts
index 632e5d5898..5128d95cbe 100644
--- a/server/src/core/server/services/comments/media.ts
+++ b/server/src/core/server/services/comments/media.ts
@@ -2,6 +2,7 @@ import { findMediaLinks } from "coral-common/common/lib/helpers/findMediaLinks";
 import validateImagePathname from "coral-common/common/lib/helpers/validateImagePathname";
 import { WrappedInternalError } from "coral-server/errors";
 import {
+  BlueskyMedia,
   ExternalMedia,
   GiphyMedia,
   TenorMedia,
@@ -113,10 +114,10 @@ async function attachExternalMedia(
 }
 
 async function attachOEmbedMedia(
-  type: "twitter" | "youtube",
+  type: "twitter" | "youtube" | "bsky",
   url: string,
   body: string
-): Promise<YouTubeMedia | TwitterMedia | undefined> {
+): Promise<YouTubeMedia | TwitterMedia | BlueskyMedia | undefined> {
   // Find all the media links in the body.
   const links = findMediaLinks(body);
   if (!links) {
@@ -157,19 +158,31 @@ async function attachOEmbedMedia(
       };
     }
 
-    // Return the formed TwitterMedia.
-    return {
-      type: "twitter",
-      url,
-      width,
-    };
+    if (type === "twitter") {
+      // Return the formed TwitterMedia.
+      return {
+        type: "twitter",
+        url,
+        width,
+      };
+    }
+
+    if (type === "bsky") {
+      return {
+        type: "bsky",
+        url,
+        width,
+      };
+    }
+
+    return undefined;
   } catch (err) {
     throw new WrappedInternalError(err as Error, "cannot attach oEmbed Media");
   }
 }
 
 export interface CreateCommentMediaInput {
-  type: "giphy" | "tenor" | "twitter" | "youtube" | "external";
+  type: "giphy" | "tenor" | "twitter" | "bsky" | "youtube" | "external";
   url: string;
   id?: string;
   width?: string;
@@ -206,6 +219,7 @@ export async function attachMedia(
       return attachExternalMedia(input.url, input.width, input.height);
     case "twitter":
     case "youtube":
+    case "bsky":
       return attachOEmbedMedia(input.type, input.url, body);
     default:
       throw new Error("invalid media type");
diff --git a/server/src/core/server/services/oembed/oembed.ts b/server/src/core/server/services/oembed/oembed.ts
index c72a6af1b3..a53929143b 100644
--- a/server/src/core/server/services/oembed/oembed.ts
+++ b/server/src/core/server/services/oembed/oembed.ts
@@ -27,7 +27,7 @@ export interface OEmbedResponse {
 const fetch = createFetch({ name: "oEmbed-fetch" });
 
 export async function fetchOEmbedResponse(
-  type: "twitter" | "youtube",
+  type: "twitter" | "youtube" | "bsky",
   url: string,
   maxWidth?: number
 ) {
@@ -45,7 +45,11 @@ export async function fetchOEmbedResponse(
     }
     case "twitter": {
       uri = `https://publish.twitter.com/oembed?url=${encodeURIComponent(url)}`;
-
+      break;
+    }
+    case "bsky": {
+      console.log(url);
+      uri = `https://embed.bsky.app/oembed?url=${encodeURIComponent(url)}`;
       break;
     }
     default:
diff --git a/server/src/core/server/stacks/editComment.ts b/server/src/core/server/stacks/editComment.ts
index 25a17421ff..ab69f0b7ea 100644
--- a/server/src/core/server/stacks/editComment.ts
+++ b/server/src/core/server/stacks/editComment.ts
@@ -17,8 +17,8 @@ import {
   EncodedCommentActionCounts,
   filterDuplicateActions,
 } from "coral-server/models/action/comment";
-
 import {
+  BlueskyMedia,
   editComment,
   EditCommentInput,
   ExternalMedia,
@@ -164,6 +164,7 @@ export default async function edit(
     | GiphyMedia
     | TenorMedia
     | TwitterMedia
+    | BlueskyMedia
     | YouTubeMedia
     | ExternalMedia
     | undefined;

From 3d93f0d9077712497e922e0390a8291a813fc3fa Mon Sep 17 00:00:00 2001
From: nick-funk <code@nickfunk.com>
Date: Thu, 28 Nov 2024 14:51:51 -0700
Subject: [PATCH 02/14] update a few more things to get bluesky embeds working

the preview is still trying to use GifPreview for some
reason?
---
 .../MediaConfirmation/MediaPreview.tsx        | 13 +++++----
 .../MediaSection/MediaSectionContainer.tsx    | 28 ++++++++++++++++++-
 locales/en-US/stream.ftl                      |  3 ++
 .../core/server/app/handlers/api/oembed.ts    |  2 +-
 .../src/core/server/services/oembed/oembed.ts |  1 -
 5 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaPreview.tsx b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaPreview.tsx
index 9e812f417e..1c598d9e7b 100644
--- a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaPreview.tsx
+++ b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaPreview.tsx
@@ -63,15 +63,18 @@ const MediaPreview: FunctionComponent<Props> = ({
             </Flex>
 
             {/* Show the actual media. */}
-            {media.type === "external" ? (
+            {media.type === "external" && (
               <ExternalMedia url={media.url} siteID={siteID} />
-            ) : media.type === "twitter" ? (
+            )}
+            {media.type === "twitter" && (
               <TwitterMedia url={media.url} siteID={siteID} />
-            ) : media.type === "bsky" ? (
+            )}
+            {media.type === "bsky" && (
               <BlueskyMedia url={media.url} siteID={siteID} />
-            ) : media.type === "youtube" ? (
+            )}
+            {media.type === "youtube" && (
               <YouTubeMedia url={media.url} siteID={siteID} isToggled={true} />
-            ) : null}
+            )}
           </HorizontalGutter>
 
           {/* On extra small screens, move the remove button to the bottom! */}
diff --git a/client/src/core/client/stream/tabs/Comments/Comment/MediaSection/MediaSectionContainer.tsx b/client/src/core/client/stream/tabs/Comments/Comment/MediaSection/MediaSectionContainer.tsx
index 3d82675c24..28adbb7bf3 100644
--- a/client/src/core/client/stream/tabs/Comments/Comment/MediaSection/MediaSectionContainer.tsx
+++ b/client/src/core/client/stream/tabs/Comments/Comment/MediaSection/MediaSectionContainer.tsx
@@ -26,6 +26,7 @@ import { MediaSectionContainer_comment } from "coral-stream/__generated__/MediaS
 import { MediaSectionContainer_settings } from "coral-stream/__generated__/MediaSectionContainer_settings.graphql";
 import { MediaSectionContainerLocal } from "coral-stream/__generated__/MediaSectionContainerLocal.graphql";
 
+import BlueskyMedia from "coral-stream/common/Media/BlueskyMedia";
 import styles from "./MediaSectionContainer.css";
 
 interface Props {
@@ -84,7 +85,9 @@ const MediaSectionContainer: FunctionComponent<Props> = ({
     (media.__typename === "TwitterMedia" && !settings.media.twitter.enabled) ||
     (media.__typename === "YouTubeMedia" && !settings.media.youtube.enabled) ||
     (media.__typename === "GiphyMedia" && !settings.media.gifs.enabled) ||
-    (media.__typename === "ExternalMedia" && !settings.media.external.enabled)
+    (media.__typename === "ExternalMedia" &&
+      !settings.media.external.enabled) ||
+    (media.__typename === "BlueskyMedia" && !settings.media.bluesky.enabled)
   ) {
     return null;
   }
@@ -103,6 +106,9 @@ const MediaSectionContainer: FunctionComponent<Props> = ({
         {media.__typename === "TwitterMedia" && (
           <Localized id="comments-embedLinks-show-twitter">Show post</Localized>
         )}
+        {media.__typename === "BlueskyMedia" && (
+          <Localized id="comments-embedLinks-show-bluesky">Show post</Localized>
+        )}
         {media.__typename === "YouTubeMedia" && (
           <Localized id="comments-embedLinks-show-youtube">
             Show video
@@ -144,6 +150,11 @@ const MediaSectionContainer: FunctionComponent<Props> = ({
               Hide post
             </Localized>
           )}
+          {media.__typename === "BlueskyMedia" && (
+            <Localized id="comments-embedLinks-hide-bluesky">
+              Hide post
+            </Localized>
+          )}
           {media.__typename === "GiphyMedia" && (
             <Localized id="comments-embedLinks-hide-gif">Hide GIF</Localized>
           )}
@@ -178,6 +189,14 @@ const MediaSectionContainer: FunctionComponent<Props> = ({
           isToggled={isToggled}
         />
       )}
+      {media.__typename === "BlueskyMedia" && (
+        <BlueskyMedia
+          id={comment.id}
+          url={media.url}
+          siteID={comment.site.id}
+          isToggled={isToggled}
+        />
+      )}
       {media.__typename === "YouTubeMedia" && (
         <YouTubeMedia
           id={comment.id}
@@ -224,6 +243,10 @@ const enhanced = withFragmentContainer<Props>({
             url
             width
           }
+          ... on BlueskyMedia {
+            url
+            width
+          }
           ... on YouTubeMedia {
             url
             width
@@ -242,6 +265,9 @@ const enhanced = withFragmentContainer<Props>({
         twitter {
           enabled
         }
+        bluesky {
+          enabled
+        }
         youtube {
           enabled
         }
diff --git a/locales/en-US/stream.ftl b/locales/en-US/stream.ftl
index 2da430d3a8..cab99f1544 100644
--- a/locales/en-US/stream.ftl
+++ b/locales/en-US/stream.ftl
@@ -480,6 +480,9 @@ comments-embedLinks-hide-youtube = Hide video
 comments-embedLinks-show-twitter = Show post
 comments-embedLinks-hide-twitter = Hide post
 
+comments-embedLinks-show-bluesky = Show post
+comments-embedLinks-hide-bluesky = Hide post
+
 comments-embedLinks-show-external = Show image
 comments-embedLinks-hide-external = Hide image
 
diff --git a/server/src/core/server/app/handlers/api/oembed.ts b/server/src/core/server/app/handlers/api/oembed.ts
index 181bf9e337..54c59a08d2 100644
--- a/server/src/core/server/app/handlers/api/oembed.ts
+++ b/server/src/core/server/app/handlers/api/oembed.ts
@@ -14,7 +14,7 @@ import { RequestHandler, TenantCoralRequest } from "coral-server/types/express";
 
 const OEmbedQuerySchema = Joi.object().keys({
   url: Joi.string().uri().required(),
-  type: Joi.string().allow("twitter", "youtube").only(),
+  type: Joi.string().allow("twitter", "youtube", "bsky").only(),
   maxWidth: Joi.number().optional(),
   commentID: Joi.string().optional(),
 });
diff --git a/server/src/core/server/services/oembed/oembed.ts b/server/src/core/server/services/oembed/oembed.ts
index a53929143b..55c6dd119f 100644
--- a/server/src/core/server/services/oembed/oembed.ts
+++ b/server/src/core/server/services/oembed/oembed.ts
@@ -48,7 +48,6 @@ export async function fetchOEmbedResponse(
       break;
     }
     case "bsky": {
-      console.log(url);
       uri = `https://embed.bsky.app/oembed?url=${encodeURIComponent(url)}`;
       break;
     }

From a76e91f9aec7b481361c254ba3e28e497b46ac73 Mon Sep 17 00:00:00 2001
From: nick-funk <code@nickfunk.com>
Date: Thu, 28 Nov 2024 15:02:49 -0700
Subject: [PATCH 03/14] lint: update attachment types on edit, reply comment
 containers

---
 .../Comment/EditCommentForm/EditCommentFormContainer.tsx   | 7 +++++++
 .../Comment/ReplyCommentForm/ReplyCommentFormContainer.tsx | 3 +++
 2 files changed, 10 insertions(+)

diff --git a/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx b/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx
index fd46afe8c4..7bc6d5c399 100644
--- a/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx
+++ b/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx
@@ -211,6 +211,10 @@ const enhanced = withEditCommentMutation(
               url
               width
             }
+            ... on BlueskyMedia {
+              url
+              width
+            }
             ... on YouTubeMedia {
               url
               width
@@ -248,6 +252,9 @@ const enhanced = withEditCommentMutation(
           twitter {
             enabled
           }
+          bluesky {
+            enabled
+          }
           youtube {
             enabled
           }
diff --git a/client/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.tsx b/client/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.tsx
index 4d027c7e09..e34099e6fc 100644
--- a/client/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.tsx
+++ b/client/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentFormContainer.tsx
@@ -353,6 +353,9 @@ const enhanced = withCreateCommentReplyMutation(
           twitter {
             enabled
           }
+          bluesky {
+            enabled
+          }
           youtube {
             enabled
           }

From bfa906e04da76f8cd7d630c8c5a3564c9255035f Mon Sep 17 00:00:00 2001
From: nick-funk <code@nickfunk.com>
Date: Fri, 29 Nov 2024 09:28:14 -0700
Subject: [PATCH 04/14] fix missing mediaLink check in common lib

finally found it!
---
 common/lib/helpers/findMediaLinks.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/common/lib/helpers/findMediaLinks.ts b/common/lib/helpers/findMediaLinks.ts
index fe7a5625c2..db1e257006 100644
--- a/common/lib/helpers/findMediaLinks.ts
+++ b/common/lib/helpers/findMediaLinks.ts
@@ -11,7 +11,8 @@ export function isMediaLink<T extends {}>(
   if (
     ((link as MediaLink).type === "twitter" ||
       (link as MediaLink).type === "external" ||
-      (link as MediaLink).type === "youtube") &&
+      (link as MediaLink).type === "youtube" ||
+      (link as MediaLink).type === "bsky") &&
     (link as MediaLink).url
   ) {
     return true;
@@ -47,7 +48,7 @@ const patterns: ReadonlyArray<{ type: MediaType; pattern: RegExp }> = [
     type: "bsky",
     pattern:
       /(https?:\/\/)?(bsky\.app)?(\/profile\/[a-zA-z0-9\.]+\/post\/[a-zA-z0-9\.]+)/g,
-  }
+  },
 ];
 
 export function findMediaLinks(body: string): MediaLink[] {

From 9cfc047b576e30298f25f021d1513bafa48f3d73 Mon Sep 17 00:00:00 2001
From: nick-funk <code@nickfunk.com>
Date: Fri, 29 Nov 2024 09:41:39 -0700
Subject: [PATCH 05/14] fix the last few places missing bluesky type handling

---
 .../Comment/EditCommentForm/EditCommentFormContainer.tsx     | 5 +++++
 .../ModerationDropdown/CopyCommentEmbedCodeContainer.tsx     | 5 ++++-
 client/src/core/client/stream/test/fixtures.ts               | 1 +
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx b/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx
index 7bc6d5c399..faf5e8cde7 100644
--- a/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx
+++ b/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx
@@ -60,6 +60,11 @@ function getMediaFromComment(comment: CommentData) {
         type: "twitter",
         url: comment.revision.media.url,
       };
+    case "BlueskyMedia":
+      return {
+        type: "bsky",
+        url: comment.revision.media.url,
+      };
     case "ExternalMedia":
       return {
         type: "external",
diff --git a/client/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/CopyCommentEmbedCodeContainer.tsx b/client/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/CopyCommentEmbedCodeContainer.tsx
index d4090a95ae..f2a163071b 100644
--- a/client/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/CopyCommentEmbedCodeContainer.tsx
+++ b/client/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/CopyCommentEmbedCodeContainer.tsx
@@ -97,7 +97,7 @@ const CopyCommentEmbedCodeContainer: FunctionComponent<Props> = ({
         break;
       // Twitter and YouTube media embeds already have links in comments
       // so they don't also need to be added to the simple comment fallback
-      case "%other" || "TwitterMedia" || "YouTubeMedia":
+      case "%other" || "TwitterMedia" || "BlueskyMedia" || "YouTubeMedia":
         break;
     }
   }
@@ -163,6 +163,9 @@ const enhanced = withFragmentContainer<Props>({
           ... on TwitterMedia {
             url
           }
+          ... on BlueskyMedia {
+            url
+          }
           ... on YouTubeMedia {
             url
           }
diff --git a/client/src/core/client/stream/test/fixtures.ts b/client/src/core/client/stream/test/fixtures.ts
index c30cd4abb2..0e6af242d8 100644
--- a/client/src/core/client/stream/test/fixtures.ts
+++ b/client/src/core/client/stream/test/fixtures.ts
@@ -120,6 +120,7 @@ export const settings = createFixture<GQLSettings>({
   },
   media: {
     twitter: { enabled: false },
+    bluesky: { enabled: false },
     youtube: { enabled: false },
     gifs: { enabled: false },
     external: { enabled: false },

From dfa37fc00e1c4f3c85581c780f1e0569319152b1 Mon Sep 17 00:00:00 2001
From: nick-funk <code@nickfunk.com>
Date: Fri, 29 Nov 2024 09:51:20 -0700
Subject: [PATCH 06/14] update admin media types to recognize bluesky

---
 .../MediaContainer/BlueskyMedia.tsx           | 27 +++++++++++++++++++
 .../MediaContainer/MediaContainer.tsx         | 12 +++++++++
 .../admin/components/MediaContainer/index.ts  |  1 +
 3 files changed, 40 insertions(+)
 create mode 100644 client/src/core/client/admin/components/MediaContainer/BlueskyMedia.tsx

diff --git a/client/src/core/client/admin/components/MediaContainer/BlueskyMedia.tsx b/client/src/core/client/admin/components/MediaContainer/BlueskyMedia.tsx
new file mode 100644
index 0000000000..7cc408d2f1
--- /dev/null
+++ b/client/src/core/client/admin/components/MediaContainer/BlueskyMedia.tsx
@@ -0,0 +1,27 @@
+import React, { FunctionComponent } from "react";
+
+import Frame from "coral-framework/components/Frame";
+
+import styles from "./Media.css";
+
+interface Props {
+  id: string;
+  url: string;
+  siteID: string;
+}
+
+const BlueskyMedia: FunctionComponent<Props> = ({ id, url, siteID }) => {
+  const component = encodeURIComponent(url);
+  return (
+    <div className={styles.embed}>
+      <Frame
+        id={id}
+        src={`/api/oembed?type=twitter&url=${component}&siteID=${siteID}`}
+        width="100%"
+        showFullHeight
+      />
+    </div>
+  );
+};
+
+export default BlueskyMedia;
diff --git a/client/src/core/client/admin/components/MediaContainer/MediaContainer.tsx b/client/src/core/client/admin/components/MediaContainer/MediaContainer.tsx
index 24a8c10bf0..6d6ffe151f 100644
--- a/client/src/core/client/admin/components/MediaContainer/MediaContainer.tsx
+++ b/client/src/core/client/admin/components/MediaContainer/MediaContainer.tsx
@@ -2,6 +2,7 @@ import React, { FunctionComponent } from "react";
 import { graphql } from "react-relay";
 
 import { withFragmentContainer } from "coral-framework/lib/relay";
+import BlueskyMedia from "coral-stream/common/Media/BlueskyMedia";
 
 import { MediaContainer_comment } from "coral-admin/__generated__/MediaContainer_comment.graphql";
 
@@ -48,6 +49,14 @@ const MediaContainer: FunctionComponent<Props> = ({ comment }) => {
           siteID={comment.site.id}
         />
       );
+    case "BlueskyMedia":
+      return (
+        <BlueskyMedia
+          id={comment.id}
+          url={media.url}
+          siteID={comment.site.id}
+        />
+      );
     case "YouTubeMedia":
       return (
         <YouTubeMedia
@@ -103,6 +112,9 @@ const enhanced = withFragmentContainer<Props>({
           ... on TwitterMedia {
             url
           }
+          ... on BlueskyMedia {
+            url
+          }
           ... on YouTubeMedia {
             url
             still
diff --git a/client/src/core/client/admin/components/MediaContainer/index.ts b/client/src/core/client/admin/components/MediaContainer/index.ts
index 8ff24d19c8..01083a6390 100644
--- a/client/src/core/client/admin/components/MediaContainer/index.ts
+++ b/client/src/core/client/admin/components/MediaContainer/index.ts
@@ -1,4 +1,5 @@
 export { default as MediaContainer } from "./MediaContainer";
 export { default as GifMedia } from "./GifMedia";
 export { default as TwitterMedia } from "./TwitterMedia";
+export { default as BlueskyMedia } from "./BlueskyMedia";
 export { default as YouTubeMedia } from "./YouTubeMedia";

From 5710379da3dc2283c5fc7a1a28595f0f14a0bf89 Mon Sep 17 00:00:00 2001
From: nick-funk <code@nickfunk.com>
Date: Fri, 29 Nov 2024 10:23:01 -0700
Subject: [PATCH 07/14] a bit more plumbing bluesky through types and resolvers

it's a bit worrying just how many places you need to update to
add one media type :sweat_smile:
---
 client/src/core/client/admin/test/fixtures.ts     |  1 +
 .../EditCommentForm/EditCommentMutation.ts        |  4 ++++
 .../MediaConfirmation/MediaConfirmationIcon.tsx   |  4 ++++
 .../ui/components/icons/BlueskyLogoIcon.tsx       | 15 +++++++++++++++
 .../src/core/client/ui/components/icons/index.ts  |  1 +
 locales/en-US/admin.ftl                           |  1 +
 .../server/graph/resolvers/MediaConfiguration.ts  |  1 +
 7 files changed, 27 insertions(+)
 create mode 100644 client/src/core/client/ui/components/icons/BlueskyLogoIcon.tsx

diff --git a/client/src/core/client/admin/test/fixtures.ts b/client/src/core/client/admin/test/fixtures.ts
index 771fb3c95b..c0eed5f45b 100644
--- a/client/src/core/client/admin/test/fixtures.ts
+++ b/client/src/core/client/admin/test/fixtures.ts
@@ -209,6 +209,7 @@ export const settings = createFixture<GQLSettings>({
   premoderateSuspectWords: false,
   media: {
     twitter: { enabled: false },
+    bluesky: { enabled: false },
     gifs: { enabled: false },
     youtube: { enabled: false },
     external: { enabled: false },
diff --git a/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentMutation.ts b/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentMutation.ts
index 35fd1cc387..eba246f43a 100644
--- a/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentMutation.ts
+++ b/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentMutation.ts
@@ -43,6 +43,10 @@ const mutation = graphql`
               url
               width
             }
+            ... on BlueskyMedia {
+              url
+              width
+            }
             ... on YouTubeMedia {
               url
               width
diff --git a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.tsx b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.tsx
index b2769f66e6..4c68554d53 100644
--- a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.tsx
+++ b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.tsx
@@ -2,6 +2,7 @@ import React, { FunctionComponent } from "react";
 
 import { MediaLink } from "coral-common/common/lib/helpers/findMediaLinks";
 import {
+  BlueskyLogoIcon,
   ImageFileLandscapeIcon,
   SvgIcon,
   VideoPlayerIcon,
@@ -20,6 +21,9 @@ const MediaConfirmationIcon: FunctionComponent<Props> = ({ media }) => {
       {media.type === "twitter" && (
         <SvgIcon size="xs" filled="currentColor" Icon={XLogoTwitterIcon} />
       )}
+      {media.type === "bsky" && (
+        <SvgIcon size="xs" filled="currentColor" Icon={BlueskyLogoIcon} />
+      )}
     </>
   );
 };
diff --git a/client/src/core/client/ui/components/icons/BlueskyLogoIcon.tsx b/client/src/core/client/ui/components/icons/BlueskyLogoIcon.tsx
new file mode 100644
index 0000000000..b97de311ad
--- /dev/null
+++ b/client/src/core/client/ui/components/icons/BlueskyLogoIcon.tsx
@@ -0,0 +1,15 @@
+import React, { FunctionComponent } from "react";
+
+const BlueskyLogoIcon: FunctionComponent = () => {
+  // https://www.streamlinehq.com/icons/streamline-regular/logos/social-medias/x-logo-twitter
+  return (
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default BlueskyLogoIcon;
diff --git a/client/src/core/client/ui/components/icons/index.ts b/client/src/core/client/ui/components/icons/index.ts
index 902e8e1d22..87cd4cbc4a 100644
--- a/client/src/core/client/ui/components/icons/index.ts
+++ b/client/src/core/client/ui/components/icons/index.ts
@@ -92,3 +92,4 @@ export { default as VideoPlayerIcon } from "./VideoPlayerIcon";
 export { default as ViewIcon } from "./ViewIcon";
 export { default as ViewOffIcon } from "./ViewOffIcon";
 export { default as XLogoTwitterIcon } from "./XLogoTwitterIcon";
+export { default as BlueskyLogoIcon } from "./BlueskyLogoIcon";
diff --git a/locales/en-US/admin.ftl b/locales/en-US/admin.ftl
index b3e8d9f687..2bd1aa61e0 100644
--- a/locales/en-US/admin.ftl
+++ b/locales/en-US/admin.ftl
@@ -435,6 +435,7 @@ configure-general-embedLinks-desc =
 configure-general-embedLinks-description = 
   Allow commenters to add a YouTube video, X post or GIF's to the end of their comment
 configure-general-embedLinks-enableTwitterEmbeds = Allow X post embeds
+configure-general-embedLinks-enableBlueskeyEmbeds = Allow Bluesky post embeds
 configure-general-embedLinks-enableYouTubeEmbeds = Allow YouTube embeds
 configure-general-embedLinks-enableGifs = Allow GIFs
 configure-general-embedLinks-enableExternalEmbeds = Enable external media
diff --git a/server/src/core/server/graph/resolvers/MediaConfiguration.ts b/server/src/core/server/graph/resolvers/MediaConfiguration.ts
index 162fc66bfd..125f607120 100644
--- a/server/src/core/server/graph/resolvers/MediaConfiguration.ts
+++ b/server/src/core/server/graph/resolvers/MediaConfiguration.ts
@@ -7,6 +7,7 @@ export const MediaConfiguration: GQLMediaConfigurationTypeResolver<
   Partial<GQLMediaConfiguration>
 > = {
   twitter: ({ twitter = {} }) => twitter,
+  bluesky: ({ bluesky = {} }) => bluesky,
   youtube: ({ youtube = {} }) => youtube,
   gifs: ({ gifs = {} }) => gifs,
   external: () => ({}),

From 0c7f9af45a348eba9abdfb21874380eac61752dc Mon Sep 17 00:00:00 2001
From: nick-funk <code@nickfunk.com>
Date: Mon, 2 Dec 2024 09:35:53 -0700
Subject: [PATCH 08/14] rename typo: twitter -> bsky

---
 .../client/admin/components/MediaContainer/BlueskyMedia.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/core/client/admin/components/MediaContainer/BlueskyMedia.tsx b/client/src/core/client/admin/components/MediaContainer/BlueskyMedia.tsx
index 7cc408d2f1..58394bb2d6 100644
--- a/client/src/core/client/admin/components/MediaContainer/BlueskyMedia.tsx
+++ b/client/src/core/client/admin/components/MediaContainer/BlueskyMedia.tsx
@@ -16,7 +16,7 @@ const BlueskyMedia: FunctionComponent<Props> = ({ id, url, siteID }) => {
     <div className={styles.embed}>
       <Frame
         id={id}
-        src={`/api/oembed?type=twitter&url=${component}&siteID=${siteID}`}
+        src={`/api/oembed?type=bsky&url=${component}&siteID=${siteID}`}
         width="100%"
         showFullHeight
       />

From 6daba875854dcb59259f8c9c077ab90ceccf9aac Mon Sep 17 00:00:00 2001
From: nick-funk <code@nickfunk.com>
Date: Mon, 2 Dec 2024 09:37:17 -0700
Subject: [PATCH 09/14] fix typo: enableBlueskeyEmbeds -> enableBlueskyEmbeds

---
 .../routes/Configure/sections/General/MediaLinksConfig.tsx      | 2 +-
 locales/en-US/admin.ftl                                         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/core/client/admin/routes/Configure/sections/General/MediaLinksConfig.tsx b/client/src/core/client/admin/routes/Configure/sections/General/MediaLinksConfig.tsx
index d1d5b7d759..8f283303a3 100644
--- a/client/src/core/client/admin/routes/Configure/sections/General/MediaLinksConfig.tsx
+++ b/client/src/core/client/admin/routes/Configure/sections/General/MediaLinksConfig.tsx
@@ -94,7 +94,7 @@ const MediaLinksConfig: FunctionComponent<Props> = ({ disabled }) => {
       </FormField>
 
       <FormField>
-        <Localized id="configure-general-embedLinks-enableBlueskeyEmbeds">
+        <Localized id="configure-general-embedLinks-enableBlueskyEmbeds">
           <Label component="legend">Allow Bluesky post embeds</Label>
         </Localized>
         <OnOffField
diff --git a/locales/en-US/admin.ftl b/locales/en-US/admin.ftl
index 2bd1aa61e0..ff564a84ac 100644
--- a/locales/en-US/admin.ftl
+++ b/locales/en-US/admin.ftl
@@ -435,7 +435,7 @@ configure-general-embedLinks-desc =
 configure-general-embedLinks-description = 
   Allow commenters to add a YouTube video, X post or GIF's to the end of their comment
 configure-general-embedLinks-enableTwitterEmbeds = Allow X post embeds
-configure-general-embedLinks-enableBlueskeyEmbeds = Allow Bluesky post embeds
+configure-general-embedLinks-enableBlueskyEmbeds = Allow Bluesky post embeds
 configure-general-embedLinks-enableYouTubeEmbeds = Allow YouTube embeds
 configure-general-embedLinks-enableGifs = Allow GIFs
 configure-general-embedLinks-enableExternalEmbeds = Enable external media

From 18b5fc14d285960db3e3cb2fb0a5ac46ce364954 Mon Sep 17 00:00:00 2001
From: nick-funk <code@nickfunk.com>
Date: Mon, 2 Dec 2024 09:38:00 -0700
Subject: [PATCH 10/14] fix typo: Twitter -> Bluesky

---
 server/src/core/server/graph/schema/schema.graphql | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/src/core/server/graph/schema/schema.graphql b/server/src/core/server/graph/schema/schema.graphql
index 4c9268fbd2..132e8afe31 100644
--- a/server/src/core/server/graph/schema/schema.graphql
+++ b/server/src/core/server/graph/schema/schema.graphql
@@ -6500,7 +6500,7 @@ input MediaConfigurationInput {
   twitter: TwitterMediaConfigurationInput
 
   """
-  bluesky is the configuration for Twitter support.
+  bluesky is the configuration for Bluesky support.
   """
   bluesky: BlueskyMediaConfigurationInput
 

From cd85656c90b5bdb51ca0f1b402ed1c0f41d7b9b6 Mon Sep 17 00:00:00 2001
From: nick-funk <code@nickfunk.com>
Date: Mon, 2 Dec 2024 09:40:52 -0700
Subject: [PATCH 11/14] swap out `bsky` for `bluesky` everywhere possible

---
 client/src/core/client/framework/components/Frame.tsx  |  2 +-
 .../core/client/stream/common/Media/BlueskyMedia.tsx   |  2 +-
 .../EditCommentForm/EditCommentFormContainer.tsx       |  2 +-
 .../Comment/MediaConfirmation/MediaConfirmPrompt.tsx   |  8 ++++----
 .../MediaConfirmation/MediaConfirmationIcon.tsx        |  2 +-
 .../Comment/MediaConfirmation/MediaPreview.tsx         |  2 +-
 .../tabs/Comments/Stream/CommentForm/CommentForm.tsx   |  4 ++--
 .../tabs/Comments/Stream/CommentForm/MediaField.tsx    |  2 +-
 common/lib/helpers/findMediaLinks.ts                   |  6 +++---
 locales/en-US/stream.ftl                               |  4 ++--
 server/src/core/server/app/handlers/api/oembed.ts      |  4 ++--
 server/src/core/server/graph/resolvers/CommentMedia.ts |  2 +-
 server/src/core/server/models/comment/revision.ts      |  2 +-
 server/src/core/server/models/tenant/helpers.ts        |  4 ++--
 server/src/core/server/services/comments/media.ts      | 10 +++++-----
 server/src/core/server/services/oembed/oembed.ts       |  4 ++--
 16 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/client/src/core/client/framework/components/Frame.tsx b/client/src/core/client/framework/components/Frame.tsx
index 7734070389..28587e2e3d 100644
--- a/client/src/core/client/framework/components/Frame.tsx
+++ b/client/src/core/client/framework/components/Frame.tsx
@@ -22,7 +22,7 @@ interface Props {
   isToggled?: boolean;
   width?: string;
   showFullHeight?: boolean;
-  type?: "twitter" | "bsky" | "youtube" | "external_media";
+  type?: "twitter" | "bluesky" | "youtube" | "external_media";
   mobile?: boolean;
 }
 
diff --git a/client/src/core/client/stream/common/Media/BlueskyMedia.tsx b/client/src/core/client/stream/common/Media/BlueskyMedia.tsx
index 6f3d681688..aa17e05a26 100644
--- a/client/src/core/client/stream/common/Media/BlueskyMedia.tsx
+++ b/client/src/core/client/stream/common/Media/BlueskyMedia.tsx
@@ -22,7 +22,7 @@ const BlueskyMedia: FunctionComponent<Props> = ({
       width="100%"
       src={`/api/oembed?type=bsky&url=${component}&siteID=${siteID}`}
       isToggled={isToggled}
-      type="bsky"
+      type="bluesky"
     />
   );
 };
diff --git a/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx b/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx
index faf5e8cde7..63f9a44531 100644
--- a/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx
+++ b/client/src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentFormContainer.tsx
@@ -62,7 +62,7 @@ function getMediaFromComment(comment: CommentData) {
       };
     case "BlueskyMedia":
       return {
-        type: "bsky",
+        type: "bluesky",
         url: comment.revision.media.url,
       };
     case "ExternalMedia":
diff --git a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmPrompt.tsx b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmPrompt.tsx
index b37c156ff9..03c71b93b9 100644
--- a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmPrompt.tsx
+++ b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmPrompt.tsx
@@ -51,8 +51,8 @@ const MediaConfirmPrompt: FunctionComponent<Props> = ({
                 </p>
               </Localized>
             )}
-            {media.type === "bsky" && (
-              <Localized id="comments-postComment-confirmMedia-bsky">
+            {media.type === "bluesky" && (
+              <Localized id="comments-postComment-confirmMedia-bluesky">
                 <p className={styles.prompt}>
                   Add this post to the end of your comment?
                 </p>
@@ -83,8 +83,8 @@ const MediaConfirmPrompt: FunctionComponent<Props> = ({
               </Button>
             </Localized>
           )}
-          {media.type === "bsky" && (
-            <Localized id="comments-postComment-confirmMedia-add-bsky">
+          {media.type === "bluesky" && (
+            <Localized id="comments-postComment-confirmMedia-add-bluesky">
               <Button
                 color="mono"
                 onClick={onConfirm}
diff --git a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.tsx b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.tsx
index 4c68554d53..a77bcc632d 100644
--- a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.tsx
+++ b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.tsx
@@ -21,7 +21,7 @@ const MediaConfirmationIcon: FunctionComponent<Props> = ({ media }) => {
       {media.type === "twitter" && (
         <SvgIcon size="xs" filled="currentColor" Icon={XLogoTwitterIcon} />
       )}
-      {media.type === "bsky" && (
+      {media.type === "bluesky" && (
         <SvgIcon size="xs" filled="currentColor" Icon={BlueskyLogoIcon} />
       )}
     </>
diff --git a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaPreview.tsx b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaPreview.tsx
index 1c598d9e7b..0241f6a454 100644
--- a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaPreview.tsx
+++ b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaPreview.tsx
@@ -69,7 +69,7 @@ const MediaPreview: FunctionComponent<Props> = ({
             {media.type === "twitter" && (
               <TwitterMedia url={media.url} siteID={siteID} />
             )}
-            {media.type === "bsky" && (
+            {media.type === "bluesky" && (
               <BlueskyMedia url={media.url} siteID={siteID} />
             )}
             {media.type === "youtube" && (
diff --git a/client/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx b/client/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx
index 4550a61497..5c5e4a6b5d 100644
--- a/client/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx
+++ b/client/src/core/client/stream/tabs/Comments/Stream/CommentForm/CommentForm.tsx
@@ -204,7 +204,7 @@ const CommentForm: FunctionComponent<Props> = ({
           existingLink &&
           (existingLink.type === "twitter" ||
             existingLink.type === "youtube" ||
-            existingLink.type === "bsky")
+            existingLink.type === "bluesky")
         ) {
           const links = findMediaLinks(html);
           // ensure the text still contains the link
@@ -247,7 +247,7 @@ const CommentForm: FunctionComponent<Props> = ({
         mediaConfig &&
         ((link.type === "twitter" && mediaConfig.twitter.enabled) ||
           (link.type === "youtube" && mediaConfig.youtube.enabled) ||
-          (link.type === "bsky" && mediaConfig.bluesky.enabled))
+          (link.type === "bluesky" && mediaConfig.bluesky.enabled))
       ) {
         setPastedMedia({ ...link });
       }
diff --git a/client/src/core/client/stream/tabs/Comments/Stream/CommentForm/MediaField.tsx b/client/src/core/client/stream/tabs/Comments/Stream/CommentForm/MediaField.tsx
index 28f273fc86..fb3b2663ab 100644
--- a/client/src/core/client/stream/tabs/Comments/Stream/CommentForm/MediaField.tsx
+++ b/client/src/core/client/stream/tabs/Comments/Stream/CommentForm/MediaField.tsx
@@ -41,7 +41,7 @@ interface Props {
 
 interface Media {
   id?: string;
-  type: "giphy" | "tenor" | "twitter" | "bsky" | "youtube" | "external";
+  type: "giphy" | "tenor" | "twitter" | "bluesky" | "youtube" | "external";
   url: string;
   width?: string;
   height?: string;
diff --git a/common/lib/helpers/findMediaLinks.ts b/common/lib/helpers/findMediaLinks.ts
index db1e257006..dd5b5acc7c 100644
--- a/common/lib/helpers/findMediaLinks.ts
+++ b/common/lib/helpers/findMediaLinks.ts
@@ -1,4 +1,4 @@
-type MediaType = "twitter" | "youtube" | "external" | "bsky";
+type MediaType = "twitter" | "youtube" | "external" | "bluesky";
 
 export interface MediaLink {
   type: MediaType;
@@ -12,7 +12,7 @@ export function isMediaLink<T extends {}>(
     ((link as MediaLink).type === "twitter" ||
       (link as MediaLink).type === "external" ||
       (link as MediaLink).type === "youtube" ||
-      (link as MediaLink).type === "bsky") &&
+      (link as MediaLink).type === "bluesky") &&
     (link as MediaLink).url
   ) {
     return true;
@@ -45,7 +45,7 @@ const patterns: ReadonlyArray<{ type: MediaType; pattern: RegExp }> = [
       /(https?:\/\/)?(www\.|mobile\.)?(x\.com\/[a-zA-z0-9]+\/status\/[0-9]+)/g,
   },
   {
-    type: "bsky",
+    type: "bluesky",
     pattern:
       /(https?:\/\/)?(bsky\.app)?(\/profile\/[a-zA-z0-9\.]+\/post\/[a-zA-z0-9\.]+)/g,
   },
diff --git a/locales/en-US/stream.ftl b/locales/en-US/stream.ftl
index cab99f1544..3a260de040 100644
--- a/locales/en-US/stream.ftl
+++ b/locales/en-US/stream.ftl
@@ -133,10 +133,10 @@ comments-postComment-insertImage = Insert
 
 comments-postComment-confirmMedia-youtube = Add this YouTube video to the end of your comment?
 comments-postComment-confirmMedia-twitter = Add this post to the end of your comment?
-comments-postComment-confirmMedia-bsky = Add this post to the end of your comment?
+comments-postComment-confirmMedia-bluesky = Add this post to the end of your comment?
 comments-postComment-confirmMedia-cancel = Cancel
 comments-postComment-confirmMedia-add-tweet = Add post
-comments-postComment-confirmMedia-add-bsky = Add post
+comments-postComment-confirmMedia-add-bluesky = Add post
 comments-postComment-confirmMedia-add-video = Add video
 comments-postComment-confirmMedia-remove = Remove
 comments-commentForm-gifPreview-remove = Remove
diff --git a/server/src/core/server/app/handlers/api/oembed.ts b/server/src/core/server/app/handlers/api/oembed.ts
index 54c59a08d2..d4b4e02db7 100644
--- a/server/src/core/server/app/handlers/api/oembed.ts
+++ b/server/src/core/server/app/handlers/api/oembed.ts
@@ -14,13 +14,13 @@ import { RequestHandler, TenantCoralRequest } from "coral-server/types/express";
 
 const OEmbedQuerySchema = Joi.object().keys({
   url: Joi.string().uri().required(),
-  type: Joi.string().allow("twitter", "youtube", "bsky").only(),
+  type: Joi.string().allow("twitter", "youtube", "bluesky").only(),
   maxWidth: Joi.number().optional(),
   commentID: Joi.string().optional(),
 });
 
 interface OEmbedQuery {
-  type: "twitter" | "youtube" | "bsky";
+  type: "twitter" | "youtube" | "bluesky";
   url: string;
   maxWidth?: number;
   commentID?: string;
diff --git a/server/src/core/server/graph/resolvers/CommentMedia.ts b/server/src/core/server/graph/resolvers/CommentMedia.ts
index 0aa9165716..36c8f6a6b2 100644
--- a/server/src/core/server/graph/resolvers/CommentMedia.ts
+++ b/server/src/core/server/graph/resolvers/CommentMedia.ts
@@ -14,7 +14,7 @@ const resolveType: GQLCommentMediaTypeResolver<comment.CommentMedia> = (
       return "YouTubeMedia";
     case "twitter":
       return "TwitterMedia";
-    case "bsky":
+    case "bluesky":
       return "BlueskyMedia";
     case "external":
       return "ExternalMedia";
diff --git a/server/src/core/server/models/comment/revision.ts b/server/src/core/server/models/comment/revision.ts
index 31a596323a..f1f3952659 100644
--- a/server/src/core/server/models/comment/revision.ts
+++ b/server/src/core/server/models/comment/revision.ts
@@ -113,7 +113,7 @@ export interface TwitterMedia {
 }
 
 export interface BlueskyMedia {
-  type: "bsky";
+  type: "bluesky";
   url: string;
   width?: number;
 }
diff --git a/server/src/core/server/models/tenant/helpers.ts b/server/src/core/server/models/tenant/helpers.ts
index ac2ff440b3..c559a539b0 100644
--- a/server/src/core/server/models/tenant/helpers.ts
+++ b/server/src/core/server/models/tenant/helpers.ts
@@ -108,14 +108,14 @@ export function getWebhookEndpoint(
 
 export function supportsMediaType(
   tenant: Pick<Tenant, "media" | "featureFlags">,
-  type: "twitter" | "bsky" | "youtube" | "giphy" | "tenor" | "external"
+  type: "twitter" | "bluesky" | "youtube" | "giphy" | "tenor" | "external"
 ): tenant is Omit<Tenant, "media"> & Required<Pick<Tenant, "media">> {
   switch (type) {
     case "external":
       return hasFeatureFlag(tenant, GQLFEATURE_FLAG.EXTERNAL_MEDIA);
     case "twitter":
       return !!tenant.media?.twitter.enabled;
-    case "bsky":
+    case "bluesky":
       return !!tenant.media?.bluesky.enabled;
     case "youtube":
       return !!tenant.media?.youtube.enabled;
diff --git a/server/src/core/server/services/comments/media.ts b/server/src/core/server/services/comments/media.ts
index 5128d95cbe..b07c096c35 100644
--- a/server/src/core/server/services/comments/media.ts
+++ b/server/src/core/server/services/comments/media.ts
@@ -114,7 +114,7 @@ async function attachExternalMedia(
 }
 
 async function attachOEmbedMedia(
-  type: "twitter" | "youtube" | "bsky",
+  type: "twitter" | "youtube" | "bluesky",
   url: string,
   body: string
 ): Promise<YouTubeMedia | TwitterMedia | BlueskyMedia | undefined> {
@@ -167,9 +167,9 @@ async function attachOEmbedMedia(
       };
     }
 
-    if (type === "bsky") {
+    if (type === "bluesky") {
       return {
-        type: "bsky",
+        type: "bluesky",
         url,
         width,
       };
@@ -182,7 +182,7 @@ async function attachOEmbedMedia(
 }
 
 export interface CreateCommentMediaInput {
-  type: "giphy" | "tenor" | "twitter" | "bsky" | "youtube" | "external";
+  type: "giphy" | "tenor" | "twitter" | "bluesky" | "youtube" | "external";
   url: string;
   id?: string;
   width?: string;
@@ -219,7 +219,7 @@ export async function attachMedia(
       return attachExternalMedia(input.url, input.width, input.height);
     case "twitter":
     case "youtube":
-    case "bsky":
+    case "bluesky":
       return attachOEmbedMedia(input.type, input.url, body);
     default:
       throw new Error("invalid media type");
diff --git a/server/src/core/server/services/oembed/oembed.ts b/server/src/core/server/services/oembed/oembed.ts
index 55c6dd119f..be9a1a9eca 100644
--- a/server/src/core/server/services/oembed/oembed.ts
+++ b/server/src/core/server/services/oembed/oembed.ts
@@ -27,7 +27,7 @@ export interface OEmbedResponse {
 const fetch = createFetch({ name: "oEmbed-fetch" });
 
 export async function fetchOEmbedResponse(
-  type: "twitter" | "youtube" | "bsky",
+  type: "twitter" | "youtube" | "bluesky",
   url: string,
   maxWidth?: number
 ) {
@@ -47,7 +47,7 @@ export async function fetchOEmbedResponse(
       uri = `https://publish.twitter.com/oembed?url=${encodeURIComponent(url)}`;
       break;
     }
-    case "bsky": {
+    case "bluesky": {
       uri = `https://embed.bsky.app/oembed?url=${encodeURIComponent(url)}`;
       break;
     }

From 18b8724566909f83fa9f6392b7784fc1459b5961 Mon Sep 17 00:00:00 2001
From: nick-funk <code@nickfunk.com>
Date: Mon, 2 Dec 2024 10:12:39 -0700
Subject: [PATCH 12/14] update media url's to use `bluesky`

---
 .../client/admin/components/MediaContainer/BlueskyMedia.tsx     | 2 +-
 client/src/core/client/stream/common/Media/BlueskyMedia.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/core/client/admin/components/MediaContainer/BlueskyMedia.tsx b/client/src/core/client/admin/components/MediaContainer/BlueskyMedia.tsx
index 58394bb2d6..18e2fdea07 100644
--- a/client/src/core/client/admin/components/MediaContainer/BlueskyMedia.tsx
+++ b/client/src/core/client/admin/components/MediaContainer/BlueskyMedia.tsx
@@ -16,7 +16,7 @@ const BlueskyMedia: FunctionComponent<Props> = ({ id, url, siteID }) => {
     <div className={styles.embed}>
       <Frame
         id={id}
-        src={`/api/oembed?type=bsky&url=${component}&siteID=${siteID}`}
+        src={`/api/oembed?type=bluesky&url=${component}&siteID=${siteID}`}
         width="100%"
         showFullHeight
       />
diff --git a/client/src/core/client/stream/common/Media/BlueskyMedia.tsx b/client/src/core/client/stream/common/Media/BlueskyMedia.tsx
index aa17e05a26..79fdacde9c 100644
--- a/client/src/core/client/stream/common/Media/BlueskyMedia.tsx
+++ b/client/src/core/client/stream/common/Media/BlueskyMedia.tsx
@@ -20,7 +20,7 @@ const BlueskyMedia: FunctionComponent<Props> = ({
     <Frame
       id={id}
       width="100%"
-      src={`/api/oembed?type=bsky&url=${component}&siteID=${siteID}`}
+      src={`/api/oembed?type=bluesky&url=${component}&siteID=${siteID}`}
       isToggled={isToggled}
       type="bluesky"
     />

From 30443ab8abe3beffb7ffb22b1051215b9c08242a Mon Sep 17 00:00:00 2001
From: nick-funk <code@nickfunk.com>
Date: Mon, 2 Dec 2024 11:45:18 -0700
Subject: [PATCH 13/14] fix the blue sky icon during media confirmation prompts

---
 .../MediaConfirmation/MediaConfirmationIcon.css        |  3 +++
 .../MediaConfirmation/MediaConfirmationIcon.tsx        |  6 +++++-
 .../client/ui/components/icons/BlueskyLogoIcon.tsx     | 10 +++++-----
 3 files changed, 13 insertions(+), 6 deletions(-)
 create mode 100644 client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.css

diff --git a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.css b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.css
new file mode 100644
index 0000000000..1e65fe2210
--- /dev/null
+++ b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.css
@@ -0,0 +1,3 @@
+.blueskyIcon {
+  margin-top: 2px;
+}
diff --git a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.tsx b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.tsx
index a77bcc632d..ca9e5e703d 100644
--- a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.tsx
+++ b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.tsx
@@ -9,6 +9,8 @@ import {
   XLogoTwitterIcon,
 } from "coral-ui/components/icons";
 
+import styles from "./MediaConfirmationIcon.css";
+
 interface Props {
   media: MediaLink;
 }
@@ -22,7 +24,9 @@ const MediaConfirmationIcon: FunctionComponent<Props> = ({ media }) => {
         <SvgIcon size="xs" filled="currentColor" Icon={XLogoTwitterIcon} />
       )}
       {media.type === "bluesky" && (
-        <SvgIcon size="xs" filled="currentColor" Icon={BlueskyLogoIcon} />
+        <div className={styles.blueskyIcon}>
+          <SvgIcon filled="currentColor" Icon={BlueskyLogoIcon} />
+        </div>
       )}
     </>
   );
diff --git a/client/src/core/client/ui/components/icons/BlueskyLogoIcon.tsx b/client/src/core/client/ui/components/icons/BlueskyLogoIcon.tsx
index b97de311ad..66d408e058 100644
--- a/client/src/core/client/ui/components/icons/BlueskyLogoIcon.tsx
+++ b/client/src/core/client/ui/components/icons/BlueskyLogoIcon.tsx
@@ -1,13 +1,13 @@
 import React, { FunctionComponent } from "react";
 
 const BlueskyLogoIcon: FunctionComponent = () => {
-  // https://www.streamlinehq.com/icons/streamline-regular/logos/social-medias/x-logo-twitter
   return (
-    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <svg fill="none" viewBox="0 0 64 57">
       <path
-        d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z"
-        fill="currentColor"
-      />
+        fill="none"
+        stroke="currentColor"
+        d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
+      ></path>
     </svg>
   );
 };

From 3a4972056934afcaf3c96d31e3259c4db210dcef Mon Sep 17 00:00:00 2001
From: nick-funk <code@nickfunk.com>
Date: Tue, 3 Dec 2024 11:54:10 -0700
Subject: [PATCH 14/14] use streamline icon for Bluesky media confirmation

---
 .../MediaConfirmation/MediaConfirmationIcon.css     |  3 ---
 .../MediaConfirmation/MediaConfirmationIcon.tsx     |  6 +-----
 .../client/ui/components/icons/BlueskyLogoIcon.tsx  | 13 +++++++++----
 3 files changed, 10 insertions(+), 12 deletions(-)
 delete mode 100644 client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.css

diff --git a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.css b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.css
deleted file mode 100644
index 1e65fe2210..0000000000
--- a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.blueskyIcon {
-  margin-top: 2px;
-}
diff --git a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.tsx b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.tsx
index ca9e5e703d..b855094f95 100644
--- a/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.tsx
+++ b/client/src/core/client/stream/tabs/Comments/Comment/MediaConfirmation/MediaConfirmationIcon.tsx
@@ -9,8 +9,6 @@ import {
   XLogoTwitterIcon,
 } from "coral-ui/components/icons";
 
-import styles from "./MediaConfirmationIcon.css";
-
 interface Props {
   media: MediaLink;
 }
@@ -24,9 +22,7 @@ const MediaConfirmationIcon: FunctionComponent<Props> = ({ media }) => {
         <SvgIcon size="xs" filled="currentColor" Icon={XLogoTwitterIcon} />
       )}
       {media.type === "bluesky" && (
-        <div className={styles.blueskyIcon}>
-          <SvgIcon filled="currentColor" Icon={BlueskyLogoIcon} />
-        </div>
+        <SvgIcon filled="currentColor" Icon={BlueskyLogoIcon} />
       )}
     </>
   );
diff --git a/client/src/core/client/ui/components/icons/BlueskyLogoIcon.tsx b/client/src/core/client/ui/components/icons/BlueskyLogoIcon.tsx
index 66d408e058..c75737a01d 100644
--- a/client/src/core/client/ui/components/icons/BlueskyLogoIcon.tsx
+++ b/client/src/core/client/ui/components/icons/BlueskyLogoIcon.tsx
@@ -1,12 +1,17 @@
 import React, { FunctionComponent } from "react";
 
+// Bluesky Streamline Icon: https://streamlinehq.com
+// https://www.streamlinehq.com/icons/download/bluesky--29494
 const BlueskyLogoIcon: FunctionComponent = () => {
   return (
-    <svg fill="none" viewBox="0 0 64 57">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 576 576"
+      id="Bluesky--Streamline-Font-Awesome"
+    >
       <path
-        fill="none"
-        stroke="currentColor"
-        d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
+        d="M405.404 325.9411c-3.234 -0.392 -6.566 -0.784 -9.8 -1.274 3.332 0.392 6.566 0.882 9.8 1.274ZM288 259.6931c-25.578 -49.686 -95.158 -142.296 -159.838 -187.964 -62.034 -43.806 -85.652 -36.26 -101.234 -29.204C8.994 50.6591 5.76 78.1971 5.76 94.3671s8.918 132.888 14.7 152.39c19.11 64.386 87.318 86.142 150.136 79.086 3.234 -0.49 6.468 -0.882 9.8 -1.372 -3.234 0.49 -6.468 0.98 -9.8 1.372 -92.022 13.72 -173.754 47.236 -66.542 166.502 117.894 122.108 161.504 -26.166 183.946 -101.332 22.442 75.166 48.216 218.05 181.888 101.332 100.352 -101.332 27.538 -152.88 -64.484 -166.502 -3.234 -0.392 -6.566 -0.784 -9.8 -1.274 3.332 0.392 6.566 0.882 9.8 1.274 62.818 6.958 130.928 -14.798 150.136 -79.086 5.782 -19.502 14.7 -136.122 14.7 -152.39s-3.234 -43.806 -21.168 -51.842c-15.484 -6.958 -39.2 -14.602 -101.136 29.204 -64.778 45.668 -134.358 138.278 -159.936 187.964Z"
+        fill="currentColor"
       ></path>
     </svg>
   );