fix: correct logo display and link style

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

Hide file tree

Showing 5 changed files with 28 additions and 8 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,6 +5,7 @@ import post from '../post.json';
 ---
 
 <Base title="BlueskyPost component example">
+	<div class="content">
 	<BlueskyPost post={post.data} />
 	<p>Raw data</p>
 	<BlueskyPost post="https://bsky.app/profile/wesbos.com/post/3la2ezdodvu2g" />
@@ -24,3 +25,10 @@ import post from '../post.json';
 	<BlueskyPost post="https://bsky.app/profile/sentry.io/post/3la5clrgyw52g" />
 	<p>Starter pack</p>
 </Base>
+</div>
+<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,9 @@ 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;
 	}
 
 	.timestamp {

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);