gatsby-plugin-typography

v3.3.0

Gatsby plugin to setup server rendering of Typography.js' CSS

NPM

README

GitHub

Website

MIT

Latest version published 5 days ago

    npm install gatsby-plugin-typography

We couldn't find any similar packages Browse all packages

Package Health Score

95 / 100

Popularity
Popular
Maintenance
Healthy
Security
No known security issues
Community
Active

Make sure the open source you're using is safe to use

Secure my Project

Popularity

Popular

Weekly Downloads (19,709)

Dependents: 2.06K
GitHub Stars: 49.79K
Forks: 9.47K
Contributors: 440

The npm package gatsby-plugin-typography receives a total of 19,709 downloads a week. As such, we scored gatsby-plugin-typography popularity level to be Popular.

Based on project statistics from the GitHub repository for the npm package gatsby-plugin-typography, we found that it has been starred 49,792 times, and that 2,060 other projects in the ecosystem are dependent on it.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Security

No known security issues

Security and license risk for significant versions

All Versions

Direct Vulnerabilities

1.6.3

1.7.19

2.12.0

3.2.0

3.3.0

Indirect Vulnerabilities

1.6.3

1.7.19

2.12.0

3.2.0

3.3.0

License Risks

1.6.3

1.7.19

2.12.0

3.2.0

3.3.0

All security vulnerabilities belong to production dependencies of direct and indirect packages.

License

MIT

Security Policy

Yes

You can connect your project's repository to Snyk to stay up to date on security alerts and receive automatic fix pull requests.

    # Install the Snyk CLI and test your project
npm i snyk -g && snyk test gatsby-plugin-typography

Keep your project free of vulnerabilities with Snyk

Maintenance

Healthy

Commit Frequency

Open Issues: 379
Open PR: 253
Last Release: 5 days ago
Last Commit: 4 days ago

Further analysis of the maintenance status of gatsby-plugin-typography based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Healthy.

We found that gatsby-plugin-typography demonstrates a positive version release cadence with at least one new version released in the past 3 months.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Community

Active

Readme.md: Yes
Contributing.md: Yes
Code of Conduct: Yes
Contributors: 440
Funding: No

A good and healthy external contribution signal for gatsby-plugin-typography project, which invites more than one hundred open source maintainers to collaborate on the repository.

Embed Package Health Score Badge

Package

Node.js Compatibility: >=12.13.0

Age: 4 years
Dependencies: 1 Direct
Versions: 189
Install Size: 28.6 kB
Dist-tags: 6
# of Files: 9
Maintainers: 18
TS Typings: No

gatsby-plugin-typography has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

gatsby-plugin-typography

A Gatsby plugin for utilizing the Typography library with minimal configuration.

See it in action in the Tutorial (source)

Install

npm install gatsby-plugin-typography react-typography typography

Why to use

A typical typography.js file utilizing one of its themes might look like this:

import Typography from "typography"
import grandViewTheme from "typography-theme-grand-view"

const typography = new Typography(grandViewTheme)

// Export helper functions
export const { scale, rhythm, options } = typography
export default typography

You then have to take the exported stylesheets and inline them in your entry file. Since a theme comes with two fonts, you also have to make sure you have the fonts available somehow.

By using gatsby-plugin-typography and specifying the path to your typography.js file via the pathToConfigModule option (see below), the inclusion of your typography styles and any relevant fonts is taken care of by a pair of helper methods under the hood, keeping your typography-related config in a single location and your entry file sparse.

How to use

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

Options

pathToConfigModule: (string) The path to the file in which you export your typography configuration.
omitGoogleFont: (boolean, default: false) Typography includes a helper that makes a request to Google's font CDN for the fonts you need. You might, however, want to inject the fonts into JS or use a CDN of your choosing. Setting this value to true will make gatsby-plugin-typography skip the inclusion of this helper. You will have to include the appropriate fonts yourself.