fix: correct logo display and link style (#169)

delucis · Nov 11, 2024 · a152468 · a152468
1 parent 910d66a
commit a152468
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 30 deletions.
diff --git a/.changeset/witty-ants-serve.md b/.changeset/witty-ants-serve.md
@@ -0,0 +1,5 @@
+---
+'@astro-community/astro-embed-bluesky': patch
+---
+
+Fixes Bluesky logo and styling of links in posts
diff --git a/demo/src/pages/bluesky.astro b/demo/src/pages/bluesky.astro
@@ -5,22 +5,32 @@ import post from '../post.json';
 ---
 
 <Base title="BlueskyPost component example">
-	<BlueskyPost post={post.data} />
-	<p>Raw data</p>
-	<BlueskyPost post="https://bsky.app/profile/wesbos.com/post/3la2ezdodvu2g" />
-	<p>Basic</p>
-	<BlueskyPost post="https://bsky.app/profile/mk.gg/post/3la2snrsnhd2a" />
-	<p>Images</p>
-	<BlueskyPost post="https://bsky.app/profile/mk.gg/post/3l7xzeex4vf2m" />
-	<p>External link</p>
-	<BlueskyPost
-		post="https://bsky.app/profile/wattenberger.com/post/3la54isd7az2i"
-	/>
-	<p>Video</p>
-	<BlueskyPost post="https://bsky.app/profile/mk.gg/post/3l7zx4hltw62a" />
-	<p>External media with quote</p>
-	<BlueskyPost post="https://bsky.app/profile/mk.gg/post/3la4wuiii4o2e" />
-	<p>External link with quote</p>
-	<BlueskyPost post="https://bsky.app/profile/sentry.io/post/3la5clrgyw52g" />
-	<p>Starter pack</p>
+	<div class="content">
+		<BlueskyPost post={post.data} />
+		<p>Raw data</p>
+		<BlueskyPost
+			post="https://bsky.app/profile/wesbos.com/post/3la2ezdodvu2g"
+		/>
+		<p>Basic</p>
+		<BlueskyPost post="https://bsky.app/profile/mk.gg/post/3la2snrsnhd2a" />
+		<p>Images</p>
+		<BlueskyPost post="https://bsky.app/profile/mk.gg/post/3l7xzeex4vf2m" />
+		<p>External link</p>
+		<BlueskyPost
+			post="https://bsky.app/profile/wattenberger.com/post/3la54isd7az2i"
+		/>
+		<p>Video</p>
+		<BlueskyPost post="https://bsky.app/profile/mk.gg/post/3l7zx4hltw62a" />
+		<p>External media with quote</p>
+		<BlueskyPost post="https://bsky.app/profile/mk.gg/post/3la4wuiii4o2e" />
+		<p>External link with quote</p>
+		<BlueskyPost post="https://bsky.app/profile/sentry.io/post/3la5clrgyw52g" />
+		<p>Starter pack</p>
+	</div>
 </Base>
+<style>
+	/* Testing leaky styles */
+	.content :global(a) {
+		text-decoration: 1px solid underline;
+	}
+</style>
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/astro-embed-bluesky/src/post.astro b/packages/astro-embed-bluesky/src/post.astro
@@ -79,6 +79,10 @@ const formatter = new Intl.DateTimeFormat('en-US', {
 		transition: var(--bluesky-card-transition);
 	}
 
+	.bluesky-post-container .post-content :global(a) {
+		text-decoration: none;
+	}
+
 	.post-content {
 		padding: var(--bluesky-space-md) var(--bluesky-space-lg)
 			var(--bluesky-space-sm);
@@ -122,7 +126,7 @@ const formatter = new Intl.DateTimeFormat('en-US', {
 	}
 
 	.bluesky-logo {
-		height: var(--bluesky-avatar-sm);
+		height: var(--bluesky-icon-size-lg);
 		transition: transform 0.2s ease;
 	}
 
@@ -139,8 +143,13 @@ const formatter = new Intl.DateTimeFormat('en-US', {
 		color: var(--bluesky-color-text);
 	}
 
-	.post-text :global(a) {
-		color: var(--bluesky-color-text);
+	.bluesky-post-container .post-text :global(a) {
+		color: var(--bluesky-color-link);
+		text-decoration: none;
+	}
+	.bluesky-post-container .timestamp:hover,
+	.bluesky-post-container .post-text :global(a:hover) {
+		text-decoration: underline;
 	}
 
 	.timestamp {
@@ -150,8 +159,4 @@ const formatter = new Intl.DateTimeFormat('en-US', {
 		margin-top: var(--bluesky-space-sm);
 		text-decoration: none;
 	}
-
-	.timestamp:hover {
-		text-decoration: underline;
-	}
 </style>
diff --git a/packages/astro-embed-bluesky/src/styles.css b/packages/astro-embed-bluesky/src/styles.css
@@ -2,6 +2,8 @@
 	/* Colours */
 	--bluesky-color-overlay: rgba(0, 0, 0, 0.5);
 
+	--bluesky-color-link: rgb(59 130 246);
+
 	/* Colour palette */
 	--bluesky-color-text--light: #000000;
 	--bluesky-color-text-secondary--light: rgb(66 87 108);