diff --git a/demo/src/pages/index.astro b/demo/src/pages/index.astro index 2686bdf..9c33185 100644 --- a/demo/src/pages/index.astro +++ b/demo/src/pages/index.astro @@ -32,7 +32,14 @@ import Base from '../layouts/Base.astro'; MDX integration examples
  • - <Tweet/> with JavaScript + + <Tweet/> with JavaScript (Light theme) + +
  • +
  • + + <Tweet/> with JavaScript (Dark theme) +
  • diff --git a/demo/src/pages/twitter-with-js-dark.astro b/demo/src/pages/twitter-with-js-dark.astro new file mode 100644 index 0000000..755fe92 --- /dev/null +++ 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'; +--- + + +

    + These tweets use the same component code as the main Twitter example, but also loads Twitter’s widget JavaScript to convert them to interactive + iframes and use dark theme: +

    +
    '} />
    + + + +

    + + + + + + diff --git a/docs/src/content/docs/components/twitter.mdx b/docs/src/content/docs/components/twitter.mdx index effc3f2..143777a 100644 --- 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 ` + + +``` + +The above code produces the following result: + + + + + + diff --git a/packages/astro-embed-twitter/CHANGELOG.md b/packages/astro-embed-twitter/CHANGELOG.md index d57c724..ec22b9b 100644 --- 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 index 3dc15ec..c844188 100644 --- 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 && } diff --git a/packages/astro-embed-twitter/Tweet.css b/packages/astro-embed-twitter/Tweet.css index d691dd2..9ec7079 100644 --- 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 index a82864d..e04a65f 100644 --- 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": {