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

@gridsome/source-contentful

v0.6.0

Published

Contentful source for Gridsome

Downloads

470

Readme

@gridsome/source-contentful

Contentful source for Gridsome. This package is under development and API might change before v1 is released.

Install

  • yarn add @gridsome/source-contentful
  • npm install @gridsome/source-contentful

Usage

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-contentful',
      options: {
        space: 'YOUR_SPACE', // required
        accessToken: 'YOUR_ACCESS_TOKEN', // required
        host: 'cdn.contentful.com',
        environment: 'master',
        typeName: 'Contentful'
      }
    }
  ]
}

Custom Routes

To add custom routes use the templates config with the collection type name as the key and the custom route as the value.

If you have Contentful ContentTypes named BlogPost and Article you can add new routes like this:

module.exports = {
  templates: {
    ContentfulBlogPost: '/blog/:slug',
    ContentfulArticle: '/articles/:slug'
  }
}

Contentful Content Types

@gridsome/souce-contentful currently works with all Contentful Content Types.

Rich text

Contentful Rich text content types return a custom JSON response that can only be parsed to HTML with Contentful's package, https://www.npmjs.com/package/@contentful/rich-text-html-renderer

Example

A query that returns Contentful Rich Text, where richArticle is the Rich Text content type configured in the Contentful Content model:

query RichArticles {
  allContentfulArticle {
    edges {
      node {
        id
        title
        richArticle
      }
    }
  }
}

Rich Text fields returns a JSON document which can be used with @contentful/rich-text-html-renderer to generate HTML. The content from richArticle can then be passed to a Vue method from the page <template>. In this case, the method name is richtextToHTML:

<div v-for="edge in $page.articles.edges" :key="edge.node.id">
  <p v-html="richtextToHTML(edge.node.richArticle)"></p>
</div>

Finally, the method to convert the JSON document into HTML (in the most basic usage):

import { documentToHtmlString } from '@contentful/rich-text-html-renderer'

export default {
  methods: {
    richtextToHTML (content) {
      return documentToHtmlString(content)
    }
  }
}

The Contentful renderer is imported, then used to convert the JSON response from the page-query.

Custom parsing and more configuration details can be found on the Contentful Rich Text HTML Render package documentation

Embedded Assets (images in Rich text)

The Contentful HTML renderer doesn't automatically render embedded assets, instead, you can configure how you want to render them using BLOCK types and the configuration options.

To do so, import BLOCKS and setup a custom renderer before calling the documentToHtmlString method. Here, we're getting the image title and source url (contentful CDN src) and passing it to a string template.

import { BLOCKS } from '@contentful/rich-text-types'
import { documentToHtmlString } from '@contentful/rich-text-html-renderer'

export default {
  methods: {
    richTextToHTML (content) {
      return documentToHtmlString(content, {
        renderNode: {
          [BLOCKS.EMBEDDED_ASSET]: (node) => {
            return `<img src="${node.data.target.fields.file.url}" alt="${node.data.target.fields.title}" />`
          }
        }
      })
    }
  }
}

Return generated HTML from Rich Text field:

Rich Text fields can take an html argument to return generated HTML instead of a Rich Text document. The generated HTML can simply be passed in to an element with v-html.

query Article($id: String!) {
  contentfulArticle(id: $id) {
    id
    title
    richArticle(html: true)
  }
}
<div v-html="$page.contentfulArticle.richArticle" />

Location

Contentful Location data is returned as JSON with lat and lon. You will need to query the field name and each field in the GraphQL query.

query Location {
  allContentfulTestType {
    edges {
      node {
        geoLocation {
          lat
          lon
        }
      }
    }
  }
}

JSON

In Contentful JSON ContentTypes, rather than receiving the entire object when querying for the field, GraphQL requires that you query for each field that you need.

query Json {
  allContentfulTestType {
    edges {
      node {
        jsonFieldName {
          itemOne
          itemTwo
        }
      }
    }
  }
}