npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gatsby-transform-portable-text

v0.0.2

Published

This plugin extends one or more Gatsby GraphQL types and adds the following fields:

Downloads

105

Readme

Description

This plugin extends one or more Gatsby GraphQL types and adds the following fields:

  • excerpt: it returns the excerpt of a given text field in a given type.
  • readingTimeInMinutes: it returns the reading time in minutes of given a text field in a given type.

Text field

This plugin only works with text fields that implement the Portable Text specification.

Example of a Portable Text definition:

{
  "style": "h1",
  "_type": "block",
  "children": [
    {
      "_type": "span",
      "text": "This is a heading"
    }
  ]
}

Demo

This blog uses the excerpt and readingTimeInMinutes.

Dependencies

This plugin does not depend on other plugins, but it comes in handy with plugins that implement Portable Text such as gatsby-source-sanity.

How to install

npm i gatsby-transform-portable-text --save

// in your gatsby-config.js
module.exports = {
  // ...
  plugins: [
    // ...
    {
      resolve: `gatsby-transform-portable-text`,
      options: {
        extendTypes: [{ typeName: `SanityPost`, contentFieldName: "body" }]
      }
    }
  ]
  // ...
};

Available options

| Options | Type | Default | Description | | ----------- | ------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | extendTypes | array of { typeName: string, contentFieldName: string } | | [required] typeName is the name of the type in the schema to be extended. contentFieldName is the field in the extended type that implements Portable Text |

When do I use this plugin?

Useful to display the excerpt or the reading time in minutes of a type that returns Portable Text such as a blog post implemented using Sanity.io.

Examples of usage

query Example {
  sanityPost(id: { eq: $id }) {
      readingTimeInMinutes
      excerpt
  }
}

How to contribute

Thanks for your interest in contributing to this plugin! Pull Requests welcome for any level of improvement, from a small typo to a new section, help us make the project better.

How to run the tests

yarn test

Pull Requests

To submit a pull request, follow these steps

  1. Fork and clone this repo
  2. Create a branch for your changes
  3. Install dependencies with yarn
  4. Make changes locally
  5. Make sure tests pass, otherwise update the tests
  6. Commit your changes
  7. Push your branch to origin
  8. Open a pull request in this repository with a clear title and description and link to any relevant issues
  9. Wait for a maintainer to review your PR