gatsby-plugin-stamped

Community Plugin

gatsby-plugin-stamped

Unofficial plugin source from Stamped.io

Installation

npm install gatsby-plugin-stamped

yarn add gatsby-plugin-stamped

Configuration

For the basic configuration of the plug-in, you need publicKey, secretKey and storeHash, which you can find in your Stamped panel. You can learn more information on where to find both keys here.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-stamped',
      options: {
        publicKey: process.env.STAMPED_PUB,
        secretKey: process.env.STAMPED_SECRET,
        storeHash: process.env.STAMPED_HASH
      }
    }
  ]
};

Options

Key	Type	Description
`publicKey`	String (required)	The public API key with which you authenticate to the Stamped system from an external source. This can be found here.
`secretKey`	String (required)	The secret API key with which you authenticate to the Stamped system from an external source. This can be found here.
`storeHash`	String (required)	The hash number, which is the shop number and is used to complete the endpoint you are trying to connect to. This can be found here.
`summaryReview`	Boolean (Default: `true`)	An option to disable the downloading of the overall total of all Stamped assessments.
`downloadAssets`	Boolean (Default: `false`)	Download and cache all product images used in the reviews to the app memory.
`assetsDir`	String (Default: `.stamped`)	Set to the name of the local cache directory.

Usage Stamped Review

All reviews and the resources from which the reviews consist are available in the StampedReview node.

{
  allStampedReview {
    nodes {
      review {
        id
      }
    }
  }
}

Usage Stamped rating summary

All your reviews are aggregated and the resources associated with them you can always use using the allStampedRatingSummary node.

{
  allStampedRatingSummary {
    nodes {
      id
    }
  }
}

If you don’t need to use just add summaryReview to the plugin settings.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-stamped',
      options: {
        publicKey: process.env.STAMPED_PUB,
        secretKey: process.env.STAMPED_SECRET,
        storeHash: process.env.STAMPED_HASH,
        summaryReview: false
      }
    }
  ]
};

Downloading local image assets

If you prefer, the source plugin also provides the option to download and cache Stamped assets in your Gatsby project.

To enable this, add downloadAssets: true to your plugin configuration. This downloads all assets.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-stamped',
      options: {
        publicKey: process.env.STAMPED_PUB,
        secretKey: process.env.STAMPED_SECRET,
        storeHash: process.env.STAMPED_HASH,
        downloadAssets: true
      }
    }
  ]
};

This adds a localFile field to the StampedAsset type which resolves to the file node generated at build by gatsby-source-filesystem.

{
  allStampedAsset {
    nodes {
      localFile {
        childImageSharp {
          gatsbyImageData(placeholder: BLURRED)
        }
      }
    }
  }
}

Usage with `gatsby-plugin-image`

Requires gatsby-plugin-image as a project dependency.

Use the gatsbyImageData resolver on your StampedAsset nodes.

{
  allStampedAsset {
    nodes {
      gatsbyImageData(placeholder: DOMINANT_COLOR)
    }
  }
}

`gatsbyImageData` resolver arguments

Key	Type	Description
`aspectRatio`	Float	Force a specific ratio between the image’s width and height.
`backgroundColor`	String	Background color applied to the wrapper.
`breakpoints`	[Int]	Output widths to generate for full width images. Default is to generate widths for common device resolutions. It will never generate an image larger than the source image. The browser will automatically choose the most appropriate.
`height`	Int	Change the size of the image.
`layout`	GatsbyImageLayout (`CONSTRAINED`/`FIXED`/`FULL_WIDTH`)	Determines the size of the image and its resizing behavior.
`outputPixelDensities`	[Float]	A list of image pixel densities to generate. It will never generate images larger than the source, and will always include a 1x image. The value is multiplied by the image width, to give the generated sizes. For example, a `400` px wide constrained image would generate `100`, `200`, `400` and `800` px wide images by default. Ignored for full width layout images, which use `breakpoints` instead.
`quality`	Int	The default image quality generated. This is overridden by any format-specific options.
`sizes`	String	The `<img> sizes` attribute, passed to the img tag. This describes the display size of the image, and does not affect generated images. You are only likely to need to change this if your are using full width images that do not span the full width of the screen.
`width`	Int	Change the size of the image.

For more information on using gatsby-plugin-image, please see the documentation.

Authors

_{_realNormanik}

💻

I don't like my current job so I do programming as a hobby. If you want to support my passion and help me get away from my full-time job at an outsourcing hotline then I encourage you to buy me a coffee 😃.