Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/octahedroid/gatsby-remark-twitter
Embed Tweet cards in Gatsby markdown
https://github.com/octahedroid/gatsby-remark-twitter
Last synced: 6 days ago
JSON representation
Embed Tweet cards in Gatsby markdown
- Host: GitHub
- URL: https://github.com/octahedroid/gatsby-remark-twitter
- Owner: octahedroid
- Archived: true
- Created: 2018-12-07T21:57:02.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T20:52:22.000Z (about 2 years ago)
- Last Synced: 2025-01-14T21:54:12.751Z (12 days ago)
- Language: JavaScript
- Homepage:
- Size: 238 KB
- Stars: 38
- Watchers: 3
- Forks: 7
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# gatsby-remark-twitter
Embed Tweet and Moment cards in Gatsby markdown.
## Install
```bash
npm install --save "@weknow/gatsby-remark-twitter"
```
## How to use
```js
// In your gatsby-config.js
plugins: [
{
resolve: "gatsby-transformer-remark",
options: {
plugins: ["@weknow/gatsby-remark-twitter"]
}
}
];
```
If you want to get debug output, turn on the `debug` option in the
plugin options.
```js
// In your gatsby-config.js
plugins: [
{
resolve: "gatsby-transformer-remark",
options: {
plugins: [
{
resolve: "@weknow/gatsby-remark-twitter",
options: {
debug: true
}
}
]
}
}
];
```
These other options are also available, to control how the widget is
rendered:
- **hideThread** Default `true`. Set to `false` to also show the
tweet that a tweet is in reply to. (This is enabled by default
because typically you'd just embed both tweets, and it gets really
noisy when embedding entire twitter threads in a post.)
- **hideMedia** Default `false`. Set to `true` to hide media that is
included in a tweet. For example, if a tweet has a photo or a video
embedded, this means that the user has to click through to view it.
- **align** Set to `'left'`, `'right'` or `'center'` to make the
embedded tweet float left, right, or be center-aligned. (The
default is left-aligned, but not floated.)
- **theme** Set to `'dark'` to use the dark theme.
- **linkColor** Set to a valid RGB value to specify link colors.
- **widgetType** Set to `'video'` to return a Twitter Video embed for
the given Tweet.
## Usage
```markdown
# Blog post title
This is an example of embedding a single tweet card.
Add any markdown as you normally do, and then insert a valid
Tweet link anywhere to automatically transform it into an
embed card.
https://twitter.com/gatsbyjs/status/1055939617646465024
You can embed several tweets
https://twitter.com/wesbos/status/1068597847237541888
https://twitter.com/dan_abramov/status/1068884262273933312
Or a moment
https://twitter.com/i/moments/944326645493612545
```
> __NOTE:__ Make sure to copy the Tweet link instead of the embed code.
## How this looks like
[View a live demo here](https://jmolivas.weknowinc.com/badcamp-2018-wrapup)
## License
MIT