Merge branch 'main' into chris/baseline-status

delucis · Oct 25, 2024 · 9799ecc · 9799ecc
2 parents 4ef264c + 2db55ac
commit 9799ecc
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 5 deletions.
diff --git a/demo/src/pages/index.astro b/demo/src/pages/index.astro
@@ -32,7 +32,14 @@ import Base from '../layouts/Base.astro';
 			<a href="/integration">MDX integration examples</a>
 		</li>
 		<li>
-			<a href="/twitter-with-js"><code>&lt;Tweet/&gt;</code> with JavaScript</a>
+			<a href="/twitter-with-js">
+				<code>&lt;Tweet/&gt;</code> with JavaScript (Light theme)
+			</a>
+		</li>
+		<li>
+			<a href="/twitter-with-js-dark">
+				<code>&lt;Tweet/&gt;</code> with JavaScript (Dark theme)
+			</a>
 		</li>
 	</ul>
 </Base>
diff --git a/demo/src/pages/twitter-with-js-dark.astro b/demo/src/pages/twitter-with-js-dark.astro
@@ -0,0 +1,44 @@
+---
+import * as Component from 'astro-embed';
+import Base from '../layouts/Base.astro';
+---
+
+<Base title="Twitter component examples with dark theme">
+	<p>
+		These tweets use the same component code as the <a href="/twitter"
+			>main Twitter example</a
+		>, but also loads Twitter’s widget JavaScript to convert them to interactive
+		iframes and use dark theme:
+	</p>
+	<pre><code set:text={'<script async src="https://platform.twitter.com/widgets.js"></script>'} /></pre>
+	<Component.Tweet
+		theme="dark"
+		id="https://twitter.com/astrodotbuild/status/1511750228428435457"
+	/>
+	<Component.Tweet
+		theme="dark"
+		id="https://twitter.com/astrodotbuild/status/1511380091720409095"
+	/>
+	<Component.Tweet
+		theme="dark"
+		id="https://twitter.com/astrodotbuild/status/1509917444403601409"
+	/>
+	<p class="center">…</p>
+	<Component.Tweet
+		theme="dark"
+		id="https://twitter.com/astrodotbuild/status/1402352777020395521"
+	/>
+
+	<script async src="https://platform.twitter.com/widgets.js"></script>
+</Base>
+
+<style>
+	body {
+		color-scheme: dark;
+		background-color: #101010;
+		color: #fff;
+	}
+	.center {
+		text-align: center;
+	}
+</style>
diff --git a/docs/src/content/docs/components/twitter.mdx b/docs/src/content/docs/components/twitter.mdx
@@ -56,6 +56,21 @@ You can do this by including the following `<script>` tag in your Astro layout f
 
 [See an example of `<Tweet>` with Twitter‘s JavaScript](/examples/tweet-with-js/)
 
+### Use Twitter’s dark theme
+
+When loading Twitter’s JavaScript, the `<Tweet>` card will render with their light theme by default.
+You can use their dark theme by setting the `theme` prop:
+
+```astro 'theme="dark"'
+---
+import { Tweet } from 'astro-embed';
+---
+
+<Tweet theme="dark" id="..." />
+```
+
+[See an example of `<Tweet>` with Twitter‘s JavaScript and dark theme](/examples/tweet-with-js-dark/)
+
 ## Styling the Tweet component
 
 By default the `<Tweet>` card has minimal styling, which should adapt to your site’s font settings etc.

diff --git a/docs/src/content/docs/examples/tweet-with-js-dark.mdx b/docs/src/content/docs/examples/tweet-with-js-dark.mdx
@@ -0,0 +1,25 @@
+---
+title: Dark theme Tweet with JavaScript
+description: Example of loading Twitter’s widget JavaScript to hydrate the Astro Embed Tweet component using a dark color theme
+template: splash
+toc: false
+---
+
+import { LinkCard } from '@astrojs/starlight/components';
+import { Tweet } from '@astro-community/astro-embed-twitter';
+
+Adding Twitter’s widget script will hydrate the HTML markup of `<Tweet>`.
+
+```astro
+<script src="https://platform.twitter.com/widgets.js"></script>
+
+<Tweet theme="dark" id="https://twitter.com/astrodotbuild/status/1632809919291457537" />
+```
+
+The above code produces the following result:
+
+<script src="https://platform.twitter.com/widgets.js"></script>
+
+<Tweet theme="dark" id="https://twitter.com/astrodotbuild/status/1632809919291457537" />
+
+<LinkCard title="See full Tweet docs" href="/components/twitter/" />
diff --git a/packages/astro-embed-twitter/CHANGELOG.md b/packages/astro-embed-twitter/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @astro-community/astro-embed-twitter
 
+## 0.5.7
+
+### Patch Changes
+
+- [#155](https://github.com/delucis/astro-embed/pull/155) [`11f10861177beb06fc80137e1ca918b08f317bd0`](https://github.com/delucis/astro-embed/commit/11f10861177beb06fc80137e1ca918b08f317bd0) Thanks [@anotheri](https://github.com/anotheri)! - Adds `theme` prop support to `Tweet` component
+
 ## 0.5.6
 
 ### Patch Changes

diff --git a/packages/astro-embed-twitter/Tweet.astro b/packages/astro-embed-twitter/Tweet.astro
@@ -1,17 +1,22 @@
 ---
 import './Tweet.css';
 
+type TweetTheme = 'light' | 'dark';
+
 export interface Props {
 	id: string;
+	theme?: TweetTheme;
 }
-const { id } = Astro.props;
 
-async function fetchTweet(id: string) {
+const { id, theme = 'light' } = Astro.props;
+
+async function fetchTweet(id: string, theme: TweetTheme | undefined = 'light') {
 	try {
 		const oembedUrl = new URL('https://publish.twitter.com/oembed');
 		oembedUrl.searchParams.set('url', id);
 		oembedUrl.searchParams.set('omit_script', 'true');
 		oembedUrl.searchParams.set('dnt', 'true');
+		oembedUrl.searchParams.set('theme', theme);
 		return (await fetch(oembedUrl).then((res) => res.json())) as {
 			url: string;
 			author_name: string;
@@ -26,7 +31,7 @@ async function fetchTweet(id: string) {
 	}
 }
 
-const tweet = await fetchTweet(id);
+const tweet = await fetchTweet(id, theme);
 ---
 
 {tweet && <astro-embed-tweet set:html={tweet.html} />}
diff --git a/packages/astro-embed-twitter/Tweet.css b/packages/astro-embed-twitter/Tweet.css
@@ -8,3 +8,6 @@
 .twitter-tweet:not(.twitter-tweet-rendered) > :last-child {
 	margin-bottom: 0;
 }
+.twitter-tweet.twitter-tweet-rendered {
+	color-scheme: normal;
+}
diff --git a/packages/astro-embed-twitter/package.json b/packages/astro-embed-twitter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@astro-community/astro-embed-twitter",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "description": "Component to easily embed Tweets on your Astro site",
   "type": "module",
   "exports": {