Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/burnworks/static-tweets-to-next-app
https://codesandbox.io/s/static-tweets-to-next-app-j6wc2
https://github.com/burnworks/static-tweets-to-next-app
Last synced: about 1 month ago
JSON representation
https://codesandbox.io/s/static-tweets-to-next-app-j6wc2
- Host: GitHub
- URL: https://github.com/burnworks/static-tweets-to-next-app
- Owner: burnworks
- License: mit
- Created: 2020-12-05T11:02:42.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2020-12-05T12:48:58.000Z (about 4 years ago)
- Last Synced: 2024-01-28T01:20:22.579Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 173 KB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Static Tweet to your next app
[lfades/static-tweet](https://github.com/lfades/static-tweet) をベースに、自分の Next.js アプリケーションに導入しやすくするためにカスタマイズしたもの。
必要なものはすべて `/static-tweet` ディレクトリにまとめてあるため、最低限の記述のみで、`` という形で埋め込みが可能になります。
なお、ベースとしたソースコードは、`[email protected]` でパーサーが `micromark` に変更されたことで動作しなくなっていましたので、最新の環境に合わせて動作するように改変しています。
その他、`prefers-color-scheme` を使用して、ユーザーがテーマをダークモードに設定していた場合、埋め込みツイートにダークモードテーマが適用されるようにしたりといった、細かい部分で少し手を入れています。
## Demo
[https://codesandbox.io/s/static-tweets-to-next-app-j6wc2](https://codesandbox.io/s/static-tweets-to-next-app-j6wc2)
## How to use
To have full access to all Twitter elements, like videos and polls, you'll need a Twitter API Token, once you have it, copy the [`.env.local.example`](.env.local.example) file in the root directory to `.env.local` (which will be ignored by Git):
```bash
cp .env.local.example .env.local
```
Then add your API token to `.env.local`, it should look like this:
```bash
TWITTER_API_TOKEN=...
```
For polls, make sure that you have **Tweets and Users** from **Twitter Labs** enabled for your app. It's required to get access to polls metadata.
基本的なツイートの埋め込み方法は、`pages/index.js` のソースコードを参考にしてください。
埋め込まれたツイートのデザインは、CSS の `prefers-color-scheme` に応じてライトテーマとダークテーマが切り替わるようにしてありますが、ダークテーマに固定したい場合は `static-tweet/components/post/tweet.js` 内の `isDark` に `teue` をセットしてください。
## Special thanks
ソースコードは下記の各プロジェクトをもとに、改変して使用させていただきました。
- [lfades/static-tweet](https://github.com/lfades/static-tweet)
- [rauchg/blog](https://github.com/rauchg/blog)