npmpackage.info

Gathering detailed insights and metrics for gatsby-remark-twitter-cards

Other packages similar to gatsby-remark-twitter-cards

@weknow/gatsby-remark-twitter

0.2.3

Embed Tweet cards in Gatsby markdown

Gathering detailed insights and metrics for gatsby-remark-twitter-cards

gatsby-remark-twitter-cards - 0.6.1 | npmpackage.info

gatsby-remark-twitter-cards

Gatsby remark plugin for generating Twitter card graphics 📇

0.6.1

JavaScript

117.59 kB

30,777 1.3

Installations

npm install gatsby-remark-twitter-cards

Developer Guide

BETA

Typescript

No

Module System

N/A

Node Version

12.18.4

NPM Version

6.14.6 Pull Requests

Open

6

Total

20

Closed

2

Merged

12

Issues

Open

1

Total

1

Closed

0

Releases

v0.6.1

Updated on Sep 25, 2020

View All 1 releases

Languages

JavaScript

JavaScript (100%)

Developer

alessbell

Download Statistics

Total Downloads

30,777

Last Day

Last Week

114

Last Month

465

Last Year

6,274

GitHub Statistics

20 Stars

68 Commits

3 Forks

1 Watchers

8 Branches

1 Contributors

Updated on Dec 15, 2024

Bundle Size

384.27 kB

Minified

117.59 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

0.6.1

Package Id

gatsby-remark-twitter-cards@0.6.1

Unpacked Size

1.19 MB

Size

1.19 MB

File Count

NPM Version

6.14.6

Node Version

12.18.4

Total Downloads

Cumulative downloads

Total Downloads

30,777

Last Day

-37.2%

Compared to previous day

Last Week

3.6%

114

Compared to previous week

Last Month

-7.9%

465

Compared to previous month

Last Year

26.4%

6,274

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

gatsby-remark-twitter-cards 📇

gatsby-remark-twitter-cards in action

gatsby-remark-twitter-cards is a Gatsby plugin that allows you to create individual open graph twitter card images at build time for inclusion in your site's SEO metadata. It generates cards as JPGs with embedded text in the recommended size of 1200px x 630px.

It uses the wasm-twitter-card library under the hood: by using Rust libraries compiled to WebAssembly, we can work around some of the limitations of the most popular dependency-free image editing library for Node.js, jimp.

It can be added to your remark plugins in gatsby-config.js like so:

1  plugins: [
2    // ...
3    {
4      resolve: `gatsby-transformer-remark`,
5      options: {
6        plugins: [
7          {
8            resolve: `gatsby-remark-twitter-cards`,
9            options: {
10              title: 'anti/pattern', // website title
11              separator: '|', // default
12              author: 'alessia bellisario',
13              background: require.resolve('./content/assets/base.png'), // path to 1200x630px file or hex code, defaults to black (#000000)
14              fontColor: '#228B22', // defaults to white (#ffffff)
15              titleFontSize: 96, // default
16              subtitleFontSize: 60, // default
17              fontStyle: 'monospace', // default
18              fontFile: require.resolve('./assets/fonts/someFont.ttf'), // will override fontStyle - path to custom TTF font
19              useFrontmatterSlug: false // default, if true it will use the slug defined in the post frontmatter
20            },
21          },
22        ],
23      },
24    },
25  ],

Plugin Options

Option	Required	Type	Default value
`title`	❌	string	`""`
`separator`	❌	string (character that separates title and author)	`"
`author`	❌	string	`""`
`background`	❌	hex or file path	`"#000000"`
`fontColor`	❌	hex	`"#ffffff"`
`titleFontSize`	❌	int	`96`
`subtitleFontSize`	❌	int	`60`
`fontStyle`	❌	"monospace" or "sans-serif"	`monospace`
`fontFile`	❌	path to TTF font file	❌

The images will be saved in your site's /public folder, and the link to your twitter:image should be an absolute URL (something like ${siteUrl}${blogPostSlug}twitter-card.jpg) E.g. for this blog post the generated image can be found at the link https://aless.co/how-to-build-a-keyboard/twitter-card.jpg.

Further instructions on how to include open graph images in the metadata of your Gatsby blog can be found in the excellent documentation of the plugin that inspired this one, gatsby-remark-social-cards

Roadmap

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

License

Determines if the project has defined a license.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.3

/10

Last Scanned on 2025-05-05

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to gatsby-remark-twitter-cards

Other packages similar to gatsby-remark-twitter-cards

gatsby-remark-twitter-cards

Installations

Developer Guide

No

N/A

12.18.4

6.14.6

Pull Requests

6

20

2

12

Issues

1

1

0

Releases

Languages

Developer

alessbell

Download Statistics

GitHub Statistics

Bundle Size

384.27 kB

117.59 kB

Maintainers

Package Meta Information

Total Downloads

30,777

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

gatsby-remark-twitter-cards 📇

Plugin Options

Roadmap

10

0

0

0

0

0

0

0

0

0

1.3

/10