gatsby-source-storyblok - npm Package Compare versions

Comparing version 3.0.1 to 3.0.2

index.js

@@ -1,1 +0,1 @@
-// noop
+// noop

package.json

 {
   "name": "gatsby-source-storyblok",
   "description": "Gatsby source plugin for building websites using the Storyblok headless CMS as a data source.",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "author": "Alexander Feiglstorfer <[e-mail]>",
@@ -29,7 +29,4 @@ "dependencies": {
   },
-  "peerDependencies": {
-    "storyblok-react": "^0.1.0"
-  },
   "homepage": "https://www.storyblok.com",
   "repository": "https://github.com/storyblok/gatsby-source-storyblok"
 }

README.md

@@ -30,4 +30,8 @@ # Introduction
 
-2. You need to create a [template](https://www.gatsbyjs.org/docs/programmatically-create-pages-from-data/#specifying-a-template) file to get the data from GraphQL
+### With Gatsby's createPages
 
+For more info regarding `createPages` see the Gatsby docs: [docs/reference/config-files/gatsby-node/#createPages](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/#createPages)
+
+2a. You need to create a [template](https://www.gatsbyjs.org/docs/programmatically-create-pages-from-data/#specifying-a-template) file to get the data from GraphQL
+
 ```js
@@ -56,3 +60,3 @@ import React from 'react'
 
-3. After this, you need to create the pages for your application. For this, edit your `gatsby-node.js`.
+3a. After this, you need to create the pages for your application. For this, edit your `gatsby-node.js`.
 
@@ -95,2 +99,109 @@ ```js
 
+
+### With Gatsby's File System Routes API
+
+For more info regarding The File System Routes API see the Gatsby docs: [docs/reference/routing/file-system-route-api/](https://www.gatsbyjs.com/docs/reference/routing/file-system-route-api/)
+
+2b. Create a collection route inside `src/pages`
+
+
+```
+|-- src
+   |-- pages
+      |-- {storyblokEntry.slug}.js
+```
+
+
+3b. Gatsby will use ths page template for each `storyblokEntry`
+
+```js
+import React from 'react'
+import { graphql } from 'gatsby'
+
+export default function StoryblokEntry({ data }) {
+  const story = data.storyblokEntry
+
+  return <div>{story.name}</div>
+}
+
+export const query = graphql`
+  query ($slug: String!) {
+    storyblokEntry(slug: { eq: $slug }) {
+      id
+      name
+      full_slug
+    }
+  }
+`
+```
+
+## Rendering Storyblok content
+
+To source Storyblok's content add `content` to your GraphQL query. By using a switch statement you can make decisions about how to render each of the bloks.
+
+```js
+import React, { Fragment } from 'react'
+import { graphql } from 'gatsby'
+
+const getBlok = (blok) => {
+  const { component } = blok
+
+  switch (component) {
+    case 'teaser':
+      return (
+        <Fragment>
+          <h2>{blok.headline}</h2>
+          <pre>{JSON.stringify(blok, null, 2)}</pre>
+        </Fragment>
+      )
+
+    case 'grid':
+      return (
+        <Fragment>
+          {blok.columns.map((column, index) => {
+            return <pre key={index}>{JSON.stringify(column, null, 2)}</pre>
+          })}
+        </Fragment>
+      )
+
+    case 'feature':
+      return (
+        <Fragment>
+          <h2>{blok.name}</h2>
+          <pre>{JSON.stringify(blok, null, 2)}</pre>
+        </Fragment>
+      )
+
+    default:
+      return null
+  }
+}
+
+export default function StoryblokEntry({ data }) {
+  const story = data.storyblokEntry
+  const { title, body } = JSON.parse(story.content)
+
+  return (
+    <div>
+      <h1>{title}</h1>
+      {body.map((blok, index) => {
+        return <Fragment key={index}>{getBlok(blok)}</Fragment>
+      })}
+    </div>
+  )
+}
+
+export const query = graphql`
+  query ($slug: String!) {
+    storyblokEntry(slug: { eq: $slug }) {
+      id
+      name
+      full_slug
+      content
+    }
+  }
+`
+```
+
+
 ## The options object in details
@@ -97,0 +208,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17585

increased by15.41%

Dependency count

2

decreased by-33.33%

Number of lines in readme file

392

increased by39.5%

Worsened metrics

Lines of code

253

decreased by-0.39%

No dependency changes