Skip to content

Commit

Permalink
Merge branch 'v3.1' into releaseID
Browse files Browse the repository at this point in the history
  • Loading branch information
angeloashmore committed May 30, 2020
2 parents d6ec00e + 3f2e51a commit aa4f2c2
Show file tree
Hide file tree
Showing 22 changed files with 3,166 additions and 2,179 deletions.
26 changes: 18 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# gatsby-source-prismic <!-- omit in toc -->
# gatsby-source-prismic

Source plugin for pulling data into [Gatsby][gatsby] from [prismic.io][prismic]
repositories.
Expand Down Expand Up @@ -31,7 +31,8 @@ repositories.
`gatsby-transformer-sharp` for image fields
- Utilizes `prismic-dom` to provide HTML and link values so you don't have to
use `prismic-dom` directly
- Supports Prismic previews
- Supports [Prismic previews](prismic-previews) and automatically adds the
[Prismic Toolbar](prismic-toolbar)

## Install

Expand Down Expand Up @@ -64,7 +65,7 @@ plugins: [
// is 'gatsby-source-prismic-test-site.prismic.io'.
repositoryName: 'gatsby-source-prismic-test-site',

// An API access token to your prismic.io repository. This is required.
// An API access token to your prismic.io repository. This is optional.
// You can generate an access token in the "API & Security" section of
// your repository settings. Setting a "Callback URL" is not necessary.
// The token will be listed under "Permanent access tokens".
Expand All @@ -86,7 +87,7 @@ plugins: [
// provided to the function, as seen below. This allows you to use
// different link resolver logic for each field if necessary.
// See: https://prismic.io/docs/javascript/query-the-api/link-resolving
linkResolver: ({ node, key, value }) => doc => {
linkResolver: ({ node, key, value }) => (doc) => {
// Your link resolver
},

Expand Down Expand Up @@ -124,6 +125,11 @@ plugins: [
// See: https://prismic.io/docs/javascript/query-the-api/query-by-language
lang: '*',

// Add the Prismic Toolbar script to the site. Defaults to false.
// Set to "legacy" if your repository requires the older toolbar script.
// See: https://prismic.io/docs/rest-api/beyond-the-api/the-preview-feature
prismicToolbar: true,

// Set a function to determine if images are downloaded locally and made
// available for gatsby-transformer-sharp for use with gatsby-image.
// The document node, field key (i.e. API ID), and field value are
Expand All @@ -138,7 +144,8 @@ plugins: [
// stored. The filename will include the MD5 hash of your schemas after
// the prefix.
// This defaults to 'prismic-typepaths---${repositoryName}'.
typePathsFilenamePrefix: 'prismic-typepaths---gatsby-source-prismic-test-site',
typePathsFilenamePrefix:
'prismic-typepaths---gatsby-source-prismic-test-site',
},
},
]
Expand Down Expand Up @@ -270,8 +277,8 @@ using the `raw` field, though use of this field is discouraged.
### Query Link fields

Link fields are processed using the official [prismic-dom][prismic-dom] library
and the `linkResolver` function from your site's `gatsby-config.js`. The resolved
URL is provided at the `url` field.
and the `linkResolver` function from your site's `gatsby-config.js`. The
resolved URL is provided at the `url` field.

If the link type is a web link (i.e. a URL external from your site), the URL is
provided without additional processing.
Expand Down Expand Up @@ -704,7 +711,7 @@ exports.createPages = async ({ graphql, actions }) => {
}

// Create pages for each Page in Prismic using the selected template.
pages.data.allPrismicPage.nodes.forEach(node => {
pages.data.allPrismicPage.nodes.forEach((node) => {
createPage({
path: `/${node.uid}`,
component: pageTemplates[node.template],
Expand All @@ -722,6 +729,9 @@ exports.createPages = async ({ graphql, actions }) => {
https://user-guides.prismic.io/en/articles/3309829-image-optimization-imgix-integration
[prismic-dom]: https://github.com/prismicio/prismic-dom
[prismic-javascript]: https://github.com/prismicio/prismic-javascript
[prismic-previews]:
https://prismic.io/docs/rest-api/beyond-the-api/the-preview-feature
[prismic-toolbar]: https://github.com/prismicio/prismic-toolbar
[prismic-version-custom-types]:
https://user-guides.prismic.io/content-modeling-and-custom-types/version-and-changes-of-custom-types/how-to-version-custom-types
[graphql-inline-fragments]: http://graphql.org/learn/queries/#inline-fragments
Expand Down
70 changes: 50 additions & 20 deletions docs/previews-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@ editing experience of a traditional server setup.

Each step is described in full detail below.

1. [**Enable previews in Prismic**](#enable-previews-in-prismic): Enable
previews in Prismic with your preview URL.
1. [**Enable previews**](#enable-previews): Enable previews in Prismic with your
preview URL and optionally include the Prismic Toolbar.

1. [**Create a preview page**](#create-a-preview-page): Create a page to which
Prismic will redirect previews.
Expand Down Expand Up @@ -78,6 +78,34 @@ While developing, you would typically set up multiple preview sites:
- **Development**: Domain: `http://localhost:8000`, Link Resolver: `/preview`
- **Production**: Domain: `https://<your_url>`, Link Resolver: `/preview`

You may optionally enable the Prismic Toolbar script to make previewing
[Releases][prismic-releases] and creating sharable links much easier. You can
enable this by setting the `prismicToolbar` option in your `gatsby-config.js`
file to `true`.

```diff
plugins: [
{
resolve: 'gatsby-source-prismic',
options: {
repositoryName: 'gatsby-source-prismic-test-site',
accessToken: 'example-wou7evoh0eexuf6chooz2jai2qui9pae4tieph1sei4deiboj',
+ prismicToolbar: true
}
}
]
```

> **Note**: If your repository is not relatively new and requires the older
> Prismic Toolbar script, set `prismicToolbar` to `"legacy"` instead of true.
>
> To check if you need the `legacy` option, go to your Prismic repository and
> navigate to **Settings** > **Previews**. In the _Include the Prismic Toolbar
> javascript file_ section, check the URL for the `<script>` code snippet.
>
> If the `src` attribute ends with `&new=true`, set `prismicToolbar` to `true`.
> If it does _not_ end with `&new=true`, set `prismicToolbar` to `"legacy"`.
Once previews are enabled, we can open the code for our site.

## Create a preview page
Expand Down Expand Up @@ -189,17 +217,16 @@ Our last addition to the preview page will navigate the user to the previewed
document's page using Gatsby's navigate function.

We will also handle here the unpublished document case. So first let's create an
unpublished document route handler.
For this example, let's assume we have a page generated using a template
at `src/templates/page.js`. If your site uses a different template, you will
need to adapt accordingly.
unpublished document route handler. For this example, let's assume we have a
page generated using a template at `src/templates/page.js`. If your site uses a
different template, you will need to adapt accordingly.

```js
// src/pages/unpublishedPreview.js

import { PageTemplate } from 'src/templates/page'

export const UnpublishedPage = props => {
export const UnpublishedPage = (props) => {
// const previewData = window.__PRISMIC_PREVIEW_DATA__
// => Perform any logic from previewData to determine the correct page or template component to use.

Expand All @@ -221,20 +248,19 @@ import { usePrismicPreview } from 'gatsby-source-prismic'

// Note that the `location` prop is taken and provided to the `usePrismicPreview` hook.
const PreviewPage = ({ location }) => {

// Let's use a static query to retrieve all known paths. We'll use it later
// to navigate to the unpublishedPreview page if the document is not
// published.
const { allSitePage } = useStaticQuery(graphql`
{
allSitePage {
nodes {
path
}
{
allSitePage {
nodes {
path
}
}
`)
const allPaths = allSitePage.nodes.map(node => node.path)
}
`)
const allPaths = allSitePage.nodes.map((node) => node.path)

const { isPreview, previewData, path } = usePrismicPreview({
// The repositoryName value from your `gatsby-config.js`.
Expand Down Expand Up @@ -289,7 +315,7 @@ First, let's create a simple helper that can be reused in different templates:
```js
// src/utils/usePreviewData.js
import { useMemo } from 'react'
import { mergePrismicPreviewData } from 'gatsby-source-prismic';
import { mergePrismicPreviewData } from 'gatsby-source-prismic'

// Returns true if we're in a browser, false otherwise. This will help guard
// against SSR issues when building the site.
Expand Down Expand Up @@ -330,7 +356,9 @@ export const PageTemplate = ({ data }) => {
<Layout>
<h1>{liveData.prismicPage.data.title}</h1>
<div
dangerouslySetInnerHTML={{ __html: liveData.prismicPage.data.body.html }}
dangerouslySetInnerHTML={{
__html: liveData.prismicPage.data.body.html,
}}
/>
</Layout>
)
Expand Down Expand Up @@ -371,9 +399,6 @@ building your own preview system tailored to your setup.
For more details on the preview functions' API, see the
[Previews API](./previews-api.md) document.

[prismic-setup-preview]:
https://user-guides.prismic.io/en/articles/781294-how-to-set-up-a-preview

## Limitations

The preview setup described in this guide works well to preview changes in a
Expand All @@ -389,3 +414,8 @@ cases such as:

Also see other technical limitations described in the
[Previews API](./previews-api.md#limitations) document.

[prismic-setup-preview]:
https://user-guides.prismic.io/en/articles/781294-how-to-set-up-a-preview
[prismic-releases]:
https://user-guides.prismic.io/en/articles/778358-what-is-a-release
3 changes: 3 additions & 0 deletions gatsby-ssr.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
const ssr = require('./dist/gatsby-ssr')

exports.onRenderBody = ssr.onRenderBody
47 changes: 23 additions & 24 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,20 @@
"license": "MIT",
"main": "dist/index.cjs.js",
"module": "dist/index.esm.js",
"typings": "dist/src/index.d.ts",
"typings": "dist/types/index.d.ts",
"sideEffects": false,
"files": [
"dist",
"src",
"gatsby-node.js",
"gatsby-browser.js",
"gatsby-ssr.js",
"fragments.js"
],
"scripts": {
"clean": "rimraf ./dist",
"build": "cross-env NODE_ENV=production npm run clean && rollup -c",
"format": "prettier --write '{{src,docs}/**/*.{ts,tsx,md}}'",
"format": "prettier --write '{src,docs}/**/*.{ts,tsx,md}'",
"prepare": "npm run build",
"release": "standard-version",
"test": "jest"
Expand All @@ -33,48 +35,45 @@
"prismic"
],
"dependencies": {
"camelcase": "^5.3.1",
"camel-case": "^4.1.1",
"es-cookie": "^1.3.2",
"fs-extra": "^9.0.0",
"gatsby-source-filesystem": "^2.2.2",
"gatsby-source-filesystem": "^2.3.8",
"lodash.isplainobject": "^4.0.6",
"lodash.omit": "^4.5.0",
"lodash.pick": "^4.4.0",
"md5": "^2.2.1",
"pascalcase": "^1.0.0",
"prismic-dom": "^2.1.0",
"prismic-javascript": "^2.7.0",
"pascal-case": "^3.1.1",
"prismic-dom": "^2.2.3",
"prismic-javascript": "^2.7.1",
"superstruct": "^0.8.3",
"ts-imgix": "^0.0.10",
"uuid": "^7.0.3"
"uuid": "^8.1.0"
},
"devDependencies": {
"@commitlint/cli": "^8.3.5",
"@commitlint/config-conventional": "^8.3.4",
"@rollup/plugin-json": "^4.0.2",
"@rollup/plugin-typescript": "^4.1.2",
"@testing-library/react-hooks": "^3.2.1",
"@types/fs-extra": "^8.1.0",
"@types/jest": "^25.2.1",
"@types/jest": "^25.2.3",
"@types/lodash.isplainobject": "^4.0.6",
"@types/lodash.omit": "^4.5.6",
"@types/lodash.pick": "^4.4.6",
"@types/md5": "^2.1.33",
"@types/md5": "^2.2.0",
"@types/prismic-dom": "^2.1.1",
"@types/uuid": "^7.0.2",
"@types/uuid": "^8.0.0",
"cross-env": "^7.0.2",
"gatsby": "^2.20.12",
"husky": "^4.2.3",
"jest": "^25.2.7",
"prettier": "^2.0.3",
"gatsby": "^2.22.9",
"husky": "^4.2.5",
"jest": "^26.0.1",
"prettier": "^2.0.5",
"react": "^16.13.1",
"react-test-renderer": "^16.13.1",
"rimraf": "^3.0.2",
"rollup": "^2.3.3",
"rollup-plugin-typescript2": "^0.27.0",
"standard-version": "^7.1.0",
"ts-jest": "^25.3.1",
"tslib": "^1.11.1",
"typescript": "^3.8.3"
"rollup": "^2.10.9",
"standard-version": "^8.0.0",
"ts-jest": "^26.0.0",
"tslib": "^2.0.0",
"typescript": "^3.9.3"
},
"peerDependencies": {
"gatsby": ">=2.3",
Expand Down
41 changes: 31 additions & 10 deletions rollup.config.js
Original file line number Diff line number Diff line change
@@ -1,42 +1,63 @@
import typescript from 'rollup-plugin-typescript2'
import json from '@rollup/plugin-json'
import typescript from '@rollup/plugin-typescript'

import pkg from './package.json'

const makeExternalPredicate = externalArr => {
const makeExternalPredicate = (externalArr) => {
if (externalArr.length === 0) {
return () => false
}
const pattern = new RegExp(`^(${externalArr.join('|')})($|/)`)
return id => pattern.test(id)
return (id) => pattern.test(id)
}

const externalPkgs = makeExternalPredicate([
...Object.keys(pkg.dependencies || {}),
...Object.keys(pkg.peerDependencies || {}),
...Object.keys(pkg.devDependencies || {}),
'fs',
'path',
])

export default [
{
input: 'src/index.ts',
output: [
{ file: 'dist/index.cjs.js', format: 'cjs', sourcemap: true },
{ file: 'dist/index.esm.js', format: 'es', sourcemap: true },
output: {
dir: './',
entryFileNames: 'dist/index.cjs.js',
format: 'cjs',
sourcemap: true,
},
external: externalPkgs,
plugins: [
typescript({
declaration: true,
declarationDir: 'dist/types',
rootDir: 'src',
}),
],
},
{
input: 'src/index.ts',
output: { file: 'dist/index.esm.js', format: 'es', sourcemap: true },
external: externalPkgs,
plugins: [typescript(), json()],
plugins: [typescript()],
},
{
input: 'src/gatsby-node.ts',
output: { file: 'dist/gatsby-node.js', format: 'cjs', sourcemap: true },
external: externalPkgs,
plugins: [typescript(), json()],
plugins: [typescript()],
},
{
input: 'src/gatsby-browser.ts',
output: { file: 'dist/gatsby-browser.js', format: 'cjs', sourcemap: true },
external: externalPkgs,
plugins: [typescript(), json()],
plugins: [typescript()],
},
{
input: 'src/gatsby-ssr.ts',
output: { file: 'dist/gatsby-ssr.js', format: 'cjs', sourcemap: true },
external: externalPkgs,
plugins: [typescript()],
},
]
Loading

0 comments on commit aa4f2c2

Please sign in to comment.