22 |
34 | 23 | 30 | {siteTitle} 31 | 32 |
33 |
22 |
34 | 23 | 30 | {siteTitle} 31 | 32 |
33 |
19 |
31 | 20 | 27 | {siteTitle} 28 | 29 |
30 |
19 |
31 | 20 | 27 | {siteTitle} 28 | 29 |
30 |
19 |
31 | 20 | 27 | {siteTitle} 28 | 29 |
30 |
19 |
31 | 20 | 27 | {siteTitle} 28 | 29 |
30 |
19 |
31 | 20 | 27 | {siteTitle} 28 | 29 |
30 |List of articles
25 |-
26 | {data.prismic.allArticles.edges.map(({ node }) => (
27 |
- {RichText.render(node.title)} 28 | ))} 29 |
38 |
44 | {RichText.asText(data.title)}
39 | {RichText.render(data.body, linkResolver)} 40 |
41 | Return
42 |
43 |
38 |
44 | {RichText.asText(data.title)}
39 | {RichText.render(data.body, linkResolver)} 40 |
41 | Return
42 |
43 |
38 |
44 | {RichText.asText(data.title)}
39 | {RichText.render(data.body, linkResolver)} 40 |
41 | Return
42 |
43 |
37 | {children}
38 |
43 |
44 |
45 | )}
46 | />
47 | );
48 |
49 | export default Layout;
50 |
--------------------------------------------------------------------------------
/examples/custom-path/src/components/layout.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Layout component that queries for data
3 | * with Gatsby's StaticQuery component
4 | *
5 | * See: https://www.gatsbyjs.org/docs/static-query/
6 | */
7 | import React, { FC } from 'react';
8 | import { StaticQuery, graphql } from 'gatsby';
9 |
10 | import Header from './header';
11 | import './layout.css';
12 |
13 | const query = graphql`
14 | query SiteTitleQuery {
15 | site {
16 | siteMetadata {
17 | title
18 | }
19 | }
20 | }
21 | `;
22 |
23 | const Layout: FC = ({ children }) => (
24 |
37 | {children}
38 |
43 |
44 |
45 | )}
46 | />
47 | );
48 |
49 | export default Layout;
50 |
--------------------------------------------------------------------------------
/examples/arnaud/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # Typescript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # dotenv environment variables file
55 | .env
56 |
57 | # gatsby files
58 | .cache/
59 | public
60 |
61 | # Mac files
62 | .DS_Store
63 |
64 | # Yarn
65 | yarn-error.log
66 | .pnp/
67 | .pnp.js
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
--------------------------------------------------------------------------------
/examples/fragments/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # Typescript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # dotenv environment variables file
55 | .env
56 |
57 | # gatsby files
58 | .cache/
59 | public
60 |
61 | # Mac files
62 | .DS_Store
63 |
64 | # Yarn
65 | yarn-error.log
66 | .pnp/
67 | .pnp.js
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
--------------------------------------------------------------------------------
/examples/languages/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # Typescript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # dotenv environment variables file
55 | .env
56 |
57 | # gatsby files
58 | .cache/
59 | public
60 |
61 | # Mac files
62 | .DS_Store
63 |
64 | # Yarn
65 | yarn-error.log
66 | .pnp/
67 | .pnp.js
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
--------------------------------------------------------------------------------
/examples/custom-path/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # Typescript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # dotenv environment variables file
55 | .env
56 |
57 | # gatsby files
58 | .cache/
59 | public
60 |
61 | # Mac files
62 | .DS_Store
63 |
64 | # Yarn
65 | yarn-error.log
66 | .pnp/
67 | .pnp.js
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
--------------------------------------------------------------------------------
/examples/pagination/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # Typescript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # dotenv environment variables file
55 | .env
56 |
57 | # gatsby files
58 | .cache/
59 | public
60 |
61 | # Mac files
62 | .DS_Store
63 |
64 | # Yarn
65 | yarn-error.log
66 | .pnp/
67 | .pnp.js
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
--------------------------------------------------------------------------------
/examples/static-query/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # Typescript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # dotenv environment variables file
55 | .env
56 |
57 | # gatsby files
58 | .cache/
59 | public
60 |
61 | # Mac files
62 | .DS_Store
63 |
64 | # Yarn
65 | yarn-error.log
66 | .pnp/
67 | .pnp.js
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
--------------------------------------------------------------------------------
/examples/typescript/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # Typescript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # dotenv environment variables file
55 | .env
56 |
57 | # gatsby files
58 | .cache/
59 | public
60 |
61 | # Mac files
62 | .DS_Store
63 |
64 | # Yarn
65 | yarn-error.log
66 | .pnp/
67 | .pnp.js
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
--------------------------------------------------------------------------------
/examples/arnaud/src/components/layout.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Layout component that queries for data
3 | * with Gatsby's StaticQuery component
4 | *
5 | * See: https://www.gatsbyjs.org/docs/static-query/
6 | */
7 |
8 | import React from 'react';
9 | import PropTypes from 'prop-types';
10 | import { StaticQuery, graphql } from 'gatsby';
11 |
12 | import Header from './header';
13 | import './layout.css';
14 |
15 | const query = graphql`
16 | query SiteTitleQuery {
17 | site {
18 | siteMetadata {
19 | title
20 | }
21 | }
22 | }
23 | `;
24 |
25 | const Layout = ({ children }) => (
26 |
39 | {children}
40 |
45 |
46 |
47 | )}
48 | />
49 | );
50 |
51 | Layout.propTypes = {
52 | children: PropTypes.node.isRequired,
53 | };
54 |
55 | export default Layout;
56 |
--------------------------------------------------------------------------------
/examples/fragments/src/components/layout.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Layout component that queries for data
3 | * with Gatsby's StaticQuery component
4 | *
5 | * See: https://www.gatsbyjs.org/docs/static-query/
6 | */
7 |
8 | import React from 'react';
9 | import PropTypes from 'prop-types';
10 | import { StaticQuery, graphql } from 'gatsby';
11 |
12 | import Header from './header';
13 | import './layout.css';
14 |
15 | const query = graphql`
16 | query SiteTitleQuery {
17 | site {
18 | siteMetadata {
19 | title
20 | }
21 | }
22 | }
23 | `;
24 |
25 | const Layout = ({ children }) => (
26 |
39 | {children}
40 |
45 |
46 |
47 | )}
48 | />
49 | );
50 |
51 | Layout.propTypes = {
52 | children: PropTypes.node.isRequired,
53 | };
54 |
55 | export default Layout;
56 |
--------------------------------------------------------------------------------
/examples/languages/src/components/layout.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Layout component that queries for data
3 | * with Gatsby's StaticQuery component
4 | *
5 | * See: https://www.gatsbyjs.org/docs/static-query/
6 | */
7 |
8 | import React from 'react';
9 | import PropTypes from 'prop-types';
10 | import { StaticQuery, graphql } from 'gatsby';
11 |
12 | import Header from './header';
13 | import './layout.css';
14 |
15 | const query = graphql`
16 | query SiteTitleQuery {
17 | site {
18 | siteMetadata {
19 | title
20 | }
21 | }
22 | }
23 | `;
24 |
25 | const Layout = ({ children }) => (
26 |
39 | {children}
40 |
45 |
46 |
47 | )}
48 | />
49 | );
50 |
51 | Layout.propTypes = {
52 | children: PropTypes.node.isRequired,
53 | };
54 |
55 | export default Layout;
56 |
--------------------------------------------------------------------------------
/examples/pagination/src/components/layout.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Layout component that queries for data
3 | * with Gatsby's StaticQuery component
4 | *
5 | * See: https://www.gatsbyjs.org/docs/static-query/
6 | */
7 |
8 | import React from 'react';
9 | import PropTypes from 'prop-types';
10 | import { StaticQuery, graphql } from 'gatsby';
11 |
12 | import Header from './header';
13 | import './layout.css';
14 |
15 | const query = graphql`
16 | query SiteTitleQuery {
17 | site {
18 | siteMetadata {
19 | title
20 | }
21 | }
22 | }
23 | `;
24 |
25 | const Layout = ({ children }) => (
26 |
39 | {children}
40 |
45 |
46 |
47 | )}
48 | />
49 | );
50 |
51 | Layout.propTypes = {
52 | children: PropTypes.node.isRequired,
53 | };
54 |
55 | export default Layout;
56 |
--------------------------------------------------------------------------------
/examples/static-query/src/components/layout.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Layout component that queries for data
3 | * with Gatsby's StaticQuery component
4 | *
5 | * See: https://www.gatsbyjs.org/docs/static-query/
6 | */
7 |
8 | import React from 'react';
9 | import PropTypes from 'prop-types';
10 | import { StaticQuery, graphql } from 'gatsby';
11 |
12 | import Header from './header';
13 | import './layout.css';
14 |
15 | const query = graphql`
16 | query SiteTitleQuery {
17 | site {
18 | siteMetadata {
19 | title
20 | }
21 | }
22 | }
23 | `;
24 |
25 | const Layout = ({ children }) => (
26 |
39 | {children}
40 |
45 |
46 |
47 | )}
48 | />
49 | );
50 |
51 | Layout.propTypes = {
52 | children: PropTypes.node.isRequired,
53 | };
54 |
55 | export default Layout;
56 |
--------------------------------------------------------------------------------
/examples/fragments/gatsby-config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | siteMetadata: {
3 | title: `Gatsby Default Starter`,
4 | description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
5 | author: `@gatsbyjs`,
6 | },
7 | plugins: [
8 | {
9 | resolve: `@prismicio/gatsby-source-prismic-graphql`,
10 | options: {
11 | repositoryName: 'ueno-starter-kit-universally-test',
12 | },
13 | },
14 | `gatsby-plugin-react-helmet`,
15 | {
16 | resolve: `gatsby-source-filesystem`,
17 | options: {
18 | name: `images`,
19 | path: `${__dirname}/src/images`,
20 | },
21 | },
22 | `gatsby-transformer-sharp`,
23 | `gatsby-plugin-sharp`,
24 | {
25 | resolve: `gatsby-plugin-manifest`,
26 | options: {
27 | name: `gatsby-starter-default`,
28 | short_name: `starter`,
29 | start_url: `/`,
30 | background_color: `#663399`,
31 | theme_color: `#663399`,
32 | display: `minimal-ui`,
33 | icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
34 | },
35 | },
36 | // this (optional) plugin enables Progressive Web App + Offline functionality
37 | // To learn more, visit: https://gatsby.dev/offline
38 | // 'gatsby-plugin-offline',
39 | ],
40 | };
41 |
--------------------------------------------------------------------------------
/examples/static-query/gatsby-config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | siteMetadata: {
3 | title: `Gatsby Default Starter`,
4 | description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
5 | author: `@gatsbyjs`,
6 | },
7 | plugins: [
8 | {
9 | resolve: `@prismicio/gatsby-source-prismic-graphql`,
10 | options: {
11 | repositoryName: 'ueno-starter-kit-universally-test',
12 | },
13 | },
14 | `gatsby-plugin-react-helmet`,
15 | {
16 | resolve: `gatsby-source-filesystem`,
17 | options: {
18 | name: `images`,
19 | path: `${__dirname}/src/images`,
20 | },
21 | },
22 | `gatsby-transformer-sharp`,
23 | `gatsby-plugin-sharp`,
24 | {
25 | resolve: `gatsby-plugin-manifest`,
26 | options: {
27 | name: `gatsby-starter-default`,
28 | short_name: `starter`,
29 | start_url: `/`,
30 | background_color: `#663399`,
31 | theme_color: `#663399`,
32 | display: `minimal-ui`,
33 | icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
34 | },
35 | },
36 | // this (optional) plugin enables Progressive Web App + Offline functionality
37 | // To learn more, visit: https://gatsby.dev/offline
38 | // 'gatsby-plugin-offline',
39 | ],
40 | };
41 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "name": "root",
4 | "workspaces": {
5 | "packages": [
6 | "packages/*",
7 | "examples/*"
8 | ]
9 | },
10 | "scripts": {
11 | "clean": "yarn workspaces run clean",
12 | "build": "yarn workspaces run build",
13 | "prettier": "prettier --write '**/*.{json,md,js,jsx,ts,tsx}'",
14 | "test": "yarn clean && yarn workspaces run test",
15 | "test:prettier": "prettier --list-different '**/*.{json,md,js,jsx,ts,tsx}'"
16 | },
17 | "husky": {
18 | "hooks": {
19 | "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
20 | "pre-commit": "lint-staged"
21 | }
22 | },
23 | "commitlint": {
24 | "extends": [
25 | "@commitlint/config-conventional"
26 | ]
27 | },
28 | "lint-staged": {
29 | "*.{ts,tsx,js,json,md}": [
30 | "prettier --write",
31 | "git add"
32 | ]
33 | },
34 | "prettier": {
35 | "singleQuote": true,
36 | "trailingComma": "es5",
37 | "printWidth": 100
38 | },
39 | "devDependencies": {
40 | "@commitlint/cli": "^7.5.2",
41 | "@commitlint/config-conventional": "^7.5.0",
42 | "husky": "^1.3.1",
43 | "lint-staged": "^8.1.5",
44 | "prettier": "^1.16.4",
45 | "rimraf": "^2.6.3",
46 | "tslint": "^5.14.0",
47 | "tslint-config-prettier": "^1.18.0",
48 | "typescript": "^3.3.3333"
49 | },
50 | "dependencies": {
51 | "gatsby": "^2.13.37",
52 | "react": "^16.8.4",
53 | "react-dom": "^16.8.4"
54 | },
55 | "version": "3.4.2"
56 | }
57 |
--------------------------------------------------------------------------------
/examples/arnaud/src/pages/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { RichText } from 'prismic-reactjs';
3 | import { graphql, Link } from 'gatsby';
4 | import { linkResolver } from '../prismic/linkResolver';
5 | import Layout from '../components/layout';
6 | import Image from '../components/image';
7 |
8 | export const query = graphql`
9 | query {
10 | prismic {
11 | allHomepages {
12 | edges {
13 | node {
14 | title
15 | }
16 | }
17 | }
18 | allBlogposs(sortBy: meta_firstPublicationDate_ASC) {
19 | edges {
20 | node {
21 | body
22 | title
23 | _meta {
24 | uid
25 | type
26 | id
27 | }
28 | }
29 | }
30 | }
31 | }
32 | }
33 | `;
34 |
35 | const Homepage = props => {
36 | const data = props.data.prismic.allHomepages.edges[0].node;
37 |
38 | return (
39 |
41 |
56 | {RichText.asText(data.title)}
42 |-
44 | {props.data.prismic.allBlogposs.edges.map(({ node }) => {
45 | const page = linkResolver(node._meta);
46 | const id = node._meta.id;
47 | const title = RichText.asText(node.title);
48 | return (
49 |
- 50 | {title} 51 | 52 | ); 53 | })} 54 |
List of articles
46 |-
47 | {data.prismic.allArticles.edges.map(({ node }) => (
48 |
-
49 | {RichText.render(node.title)}
50 |
51 |
52 | ))}
53 |
76 |
91 | {RichText.asText(title)}
77 |-
79 | {allBlogposs.edges.map(({ node }) => {
80 | const page = linkResolver(node._meta);
81 | const id = node._meta.id;
82 | const title = RichText.asText(node.title);
83 | return (
84 |
- 85 | {title} 86 | 87 | ); 88 | })} 89 |
76 |
91 | {RichText.asText(title)}
77 |-
79 | {allBlogposs.edges.map(({ node }) => {
80 | const page = linkResolver(node._meta);
81 | const id = node._meta.id;
82 | const title = RichText.asText(node.title);
83 | return (
84 |
- 85 | {title} 86 | 87 | ); 88 | })} 89 |
76 |
91 | {RichText.asText(title)}
77 |-
79 | {allBlogposs.edges.map(({ node }) => {
80 | const page = linkResolver(node._meta);
81 | const id = node._meta.id;
82 | const title = RichText.asText(node.title);
83 | return (
84 |
- 85 | {title} 86 | 87 | ); 88 | })} 89 |
77 |
92 | {RichText.asText(title)}
78 |-
80 | {allBlogposs.edges.map(({ node }) => {
81 | const page = `/${node.title[0].text}/${node._meta.uid}`;
82 | const id = node._meta.id;
83 | const title = RichText.asText(node.title);
84 | return (
85 |
- 86 | {title} 87 | 88 | ); 89 | })} 90 |
no data
;
38 | }
39 |
40 | const onPreviousClick = () => setPage(page - limit);
41 | const onNextClick = () => setPage(page + limit);
42 |
43 | useEffect(() => {
44 | if (!didMountRef.current) {
45 | didMountRef.current = true;
46 | return;
47 | }
48 |
49 | props.prismic
50 | .load({ variables: { after: getCursorFromDocumentIndex(page) } })
51 | .then(res => setData(res.data));
52 | }, [page]);
53 |
54 | return (
55 | List of Articles
57 |
58 |
78 | Dynamic Pagination
59 |60 | This example demonstrates dynamically-generated pagination. When the Next or Previous Page 61 | buttons are clicked, the page query is called again to fetch metadata about the next or 62 | previous pages. Notice here that pagination does not cause a URL route change. 63 |
64 |-
65 | {data.allArticles.edges.map(({ node }) => (
66 |
- 67 | {get(node, 'title.0.text', '---')} 68 | 69 | ))} 70 |
13 |
119 | {RichText.render(get(slice, 'primary.text', []) || [], linkResolver)}
120 |
121 | ));
122 |
123 | return (
124 |
125 |
131 | );
132 | };
133 |
134 | export default Article;
135 |
--------------------------------------------------------------------------------
/packages/gatsby-source-prismic-graphql/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | import { setContext } from 'apollo-link-context';
2 | import { HttpLink } from 'apollo-link-http';
3 | import { HttpOptions } from 'apollo-link-http-common';
4 | import Prismic from 'prismic-javascript';
5 | import { parseQueryString } from './parseQueryString';
6 | import { Page } from '../interfaces/PluginOptions';
7 |
8 | interface IPrismicLinkArgs extends HttpOptions {
9 | uri: string;
10 | accessToken?: string;
11 | customRef?: string;
12 | credentials?: string;
13 | useGETForQueries?: boolean;
14 | }
15 |
16 | // @todo should this be configurable?
17 | export const fieldName = 'prismic';
18 | export const typeName = 'PRISMIC';
19 |
20 | // keep link resolver function
21 | export let linkResolver: (doc: any) => string = () => '/';
22 |
23 | export function flatten(arr: T[][]): T[] {
24 | return arr.reduce((a: T[], b: T[]) => a.concat(b), []);
25 | }
26 |
27 | export function registerLinkResolver(link: typeof linkResolver) {
28 | linkResolver = link;
29 | }
30 |
31 | export function getPagePreviewPath(page: Page) {
32 | return page.previewPath || '/preview/' + page.type.toLowerCase();
33 | }
34 |
35 | export function getCookies() {
36 | return parseQueryString(document.cookie, ';');
37 | }
38 |
39 | export function getDocumentIndexFromCursor(cursor: string) {
40 | return atob(cursor).split(':')[1];
41 | }
42 |
43 | export function getCursorFromDocumentIndex(index: number) {
44 | return btoa(`arrayconnection:${index}`);
45 | }
46 |
47 | export function fetchStripQueryWhitespace(url: string, ...args: any) {
48 | const [hostname, qs = ''] = url.split('?');
49 | const queryString = parseQueryString(qs);
50 | if (queryString.has('query')) {
51 | queryString.set(
52 | 'query',
53 | String(queryString.get('query'))
54 | .replace(/\#.*\n/g, '')
55 | .replace(/\s+/g, ' ')
56 | .replace(/\s?\{\s?/g, '{')
57 | .replace(/\s?\}\s?/g, '}')
58 | .replace(/\s?\:\s?/g, ':')
59 | .replace(/\s?\(\s?/g, '(')
60 | .replace(/\s?\)\s?/g, ')')
61 | .replace(/\.\.\.\s/g, '...')
62 | .replace(/\,\s/g, ',')
63 | );
64 | }
65 | const updatedQs = Array.from(queryString)
66 | .map(n => n.map(j => encodeURIComponent(j)).join('='))
67 | .join('&');
68 | const updatedUrl = `${hostname}?${updatedQs}`;
69 |
70 | return fetch(updatedUrl, ...args);
71 | }
72 |
73 | /**
74 | * Apollo Link for Prismic
75 | * @param options Options
76 | */
77 | export function PrismicLink({ uri, accessToken, customRef, ...rest }: IPrismicLinkArgs) {
78 | const BaseURIReg = /^(https?:\/\/.+?\..+?\..+?)\/graphql\/?$/;
79 | const matches = uri.match(BaseURIReg);
80 | if (matches && matches[1]) {
81 | const prismicClient = Prismic.client(`${matches[1]}/api`, { accessToken });
82 | const prismicLink = setContext(
83 | async (request, options: { headers: { [key: string]: string } }) => {
84 | let prismicRef;
85 | if (typeof window !== 'undefined' && document.cookie) {
86 | const cookies = getCookies();
87 | if (cookies.has(Prismic.experimentCookie)) {
88 | prismicRef = cookies.get(Prismic.experimentCookie);
89 | } else if (cookies.has(Prismic.previewCookie)) {
90 | prismicRef = cookies.get(Prismic.previewCookie);
91 | }
92 | }
93 | if (!prismicRef) {
94 | const api = await prismicClient.getApi();
95 | prismicRef = api.masterRef.ref;
96 | }
97 | const authorizationHeader = accessToken ? { Authorization: `Token ${accessToken}` } : {};
98 |
99 | // if custom ref has been defined, then use that to pull content instead of default master ref
100 | prismicRef =
101 | typeof customRef === 'undefined' || customRef === null ? prismicRef : customRef;
102 |
103 | return {
104 | headers: {
105 | ...options.headers,
106 | ...authorizationHeader,
107 | 'Prismic-ref': prismicRef,
108 | },
109 | };
110 | }
111 | );
112 |
113 | const httpLink = new HttpLink({
114 | uri,
115 | useGETForQueries: true,
116 | ...rest,
117 | fetch: fetchStripQueryWhitespace,
118 | });
119 |
120 | return prismicLink.concat(httpLink);
121 | } else {
122 | throw new Error(`${uri} isn't a valid Prismic GraphQL endpoint`);
123 | }
124 | }
125 |
--------------------------------------------------------------------------------
/packages/gatsby-source-prismic-graphql/src/components/WrapPage.tsx:
--------------------------------------------------------------------------------
1 | import { getIsolatedQuery } from '@prismicio/gatsby-source-graphql-universal';
2 |
3 | import pick from 'lodash/pick';
4 | import get from 'lodash/get';
5 | import { pathToRegexp, match as matchRegex, Key } from 'path-to-regexp';
6 |
7 | import Prismic from 'prismic-javascript';
8 | import React from 'react';
9 | import traverse from 'traverse';
10 | import { fieldName, getCookies, typeName } from '../utils';
11 | import { createLoadingScreen } from '../utils/createLoadingScreen';
12 | import { getApolloClient } from '../utils/getApolloClient';
13 | import { parseQueryString, parseQueryStringAsJson } from '../utils/parseQueryString';
14 |
15 | const queryOrSource = (obj: any) => {
16 | if (typeof obj === 'string') {
17 | return obj.replace(/\s+/g, ' ');
18 | } else if (obj.source) {
19 | return String(obj.source).replace(/\s+/g, ' ');
20 | }
21 | return null;
22 | };
23 |
24 | const stripSharp = (query: any) => {
25 | return traverse(query).map(function(x) {
26 | if (
27 | typeof x === 'object' &&
28 | x.kind == 'Name' &&
29 | this.parent &&
30 | this.parent.node.kind === 'Field' &&
31 | x.value.match(/Sharp$/) &&
32 | !x.value.match(/.+childImageSharp$/)
33 | ) {
34 | this.parent.delete();
35 | }
36 | });
37 | };
38 |
39 | interface WrapPageState {
40 | data: any;
41 | loading: boolean;
42 | error: Error | null;
43 | }
44 |
45 | export class WrapPage extends React.PureComponent {
46 | state: WrapPageState = {
47 | data: this.props.data,
48 | loading: false,
49 | error: null,
50 | };
51 |
52 | keys = ['uid', 'id', 'lang'];
53 |
54 | get params() {
55 | const params: any = { ...this.props.pageContext };
56 |
57 | const keys: Key[] = [];
58 | const re = pathToRegexp(get(this.props.pageContext, 'matchPath', ''), keys);
59 | const match = re.exec(get(this.props, 'location.pathname', ''));
60 |
61 | const matchFn = matchRegex(get(this.props.pageContext, 'matchPath', ''), {
62 | decode: decodeURIComponent,
63 | });
64 |
65 | const pathParams = (() => {
66 | const res = matchFn(get(this.props, 'location.pathname', ''));
67 | return res ? res.params : {};
68 | })();
69 |
70 | const qsParams = (() => {
71 | const qsValue = String(get(this.props, 'location.search', '?')).substr(1);
72 | return parseQueryStringAsJson(qsValue);
73 | })();
74 |
75 | return Object.assign(params, qsParams, pathParams);
76 | }
77 |
78 | getQuery() {
79 | const child = this.props.children as any;
80 | let query = queryOrSource(get(this.props.pageContext, 'rootQuery')) || '';
81 |
82 | if (child && child.type) {
83 | if (child.type.query) {
84 | query = queryOrSource(child.type.query) || '';
85 | }
86 |
87 | if (child.type.fragments && Array.isArray(child.type.fragments)) {
88 | child.type.fragments.forEach((fragment: any) => {
89 | query += queryOrSource(fragment);
90 | });
91 | }
92 | }
93 |
94 | return query;
95 | }
96 |
97 | componentDidMount() {
98 | const { pageContext, options } = this.props;
99 | const cookies = getCookies();
100 | const hasCookie = cookies.has(Prismic.experimentCookie) || cookies.has(Prismic.previewCookie);
101 |
102 | if (pageContext.rootQuery && options.previews !== false && hasCookie) {
103 | const closeLoading = createLoadingScreen();
104 | this.setState({ loading: true });
105 | this.load()
106 | .then(res => {
107 | this.setState({
108 | loading: false,
109 | error: null,
110 | data: { ...this.state.data, prismic: res.data },
111 | });
112 | closeLoading();
113 | })
114 | .catch(error => {
115 | this.setState({ loading: false, error });
116 | console.error(error);
117 | closeLoading();
118 | });
119 | }
120 | }
121 |
122 | load = ({ variables = {}, query, fragments = [], ...rest }: any = {}) => {
123 | if (!query) {
124 | query = this.getQuery();
125 | } else {
126 | query = queryOrSource(query);
127 | }
128 |
129 | fragments.forEach((fragment: any) => {
130 | query += queryOrSource(fragment);
131 | });
132 |
133 | const keys = [...(this.props.options.passContextKeys || []), ...this.keys];
134 | variables = { ...pick(this.params, keys), ...variables };
135 |
136 | return getApolloClient(this.props.options).then(client => {
137 | return client.query({
138 | query: stripSharp(getIsolatedQuery(query, fieldName, typeName)),
139 | fetchPolicy: 'no-cache',
140 | variables,
141 | ...rest,
142 | });
143 | });
144 | };
145 |
146 | render() {
147 | const children = this.props.children as any;
148 |
149 | return React.cloneElement(children, {
150 | ...children.props,
151 | prismic: {
152 | options: this.props.options,
153 | loading: this.state.loading,
154 | error: this.state.error,
155 | load: this.load,
156 | },
157 | data: this.state.data,
158 | });
159 | }
160 | }
161 |
--------------------------------------------------------------------------------
14 |
26 | `;
27 |
28 | const style = document.createElement('style');
29 | style.textContent = `
30 | @keyframes heart {
31 | 0% {
32 | transform: scale(0.9);
33 | }
34 | 50% {
35 | transform: scale(1);
36 | }
37 | 100% {
38 | transform: scale(0.9);
39 | }
40 | }
41 | `;
42 | wrapper.appendChild(style);
43 | document.body.appendChild(wrapper);
44 | return () => {
45 | wrapper.addEventListener('transitionend', () => {
46 | wrapper.remove();
47 | });
48 | wrapper.style.opacity = '0';
49 | };
50 | };
51 |
--------------------------------------------------------------------------------
/examples/pagination/src/templates/article.js:
--------------------------------------------------------------------------------
1 | import { graphql, Link } from 'gatsby';
2 | import { linkResolver } from 'gatsby-source-prismic-graphql';
3 | import get from 'lodash/get';
4 | import { RichText } from 'prismic-reactjs';
5 | import React from 'react';
6 | import Layout from '../components/layout';
7 |
8 | export const query = graphql`
9 | query ArticleQuery(
10 | $uid: String
11 | $paginationPreviousUid: String!
12 | $paginationPreviousLang: String!
13 | $paginationNextUid: String!
14 | $paginationNextLang: String!
15 | ) {
16 | prismic {
17 | allArticles(uid: $uid) {
18 | edges {
19 | node {
20 | _meta {
21 | uid
22 | }
23 | title
24 | body {
25 | ... on PRISMIC_ArticleBodyText {
26 | primary {
27 | text
28 | }
29 | }
30 | }
31 | }
32 | }
33 | }
34 | prevArticle: article(uid: $paginationPreviousUid, lang: $paginationPreviousLang) {
35 | title
36 | _meta {
37 | uid
38 | lang
39 | type
40 | }
41 | }
42 | nextArticle: article(uid: $paginationNextUid, lang: $paginationNextLang) {
43 | title
44 | _meta {
45 | uid
46 | lang
47 | type
48 | }
49 | }
50 | }
51 | }
52 | `;
53 |
54 | const Pagination = ({ nextArticle, prevArticle }) => (
55 |
15 |
22 |
23 | Loading Prismic Preview
24 |
25 |
56 |
78 | );
79 |
80 | const EnhancedPagination = ({ nextArticle, prevArticle }) => (
81 | Simple Static Pagination
57 |
58 | This example demonstrates statically-generated pagination without additional page queries.
59 | Pagination information is retrieved directly from
60 | pageContext.
61 |
82 |
104 | );
105 |
106 | const Article = props => {
107 | const {
108 | pageContext: { paginationPreviousMeta, paginationNextMeta },
109 | data: {
110 | prismic: { prevArticle, nextArticle },
111 | },
112 | } = props;
113 |
114 | const title = get(props.data, 'prismic.allArticles.edges.0.node.title', []);
115 | const slices = get(props.data, 'prismic.allArticles.edges.0.node.body', []);
116 |
117 | const body = (slices || []).map((slice, index) => (
118 | Enhanced Static Pagination
83 |84 | This example demonstrates statically-generated pagination enhanced with more detailed 85 | information about the previous and next documents—in this case, the article title. 86 | Modifying the page query is required. 87 |
88 | {prevArticle ? ( 89 | 90 | ← {RichText.asText(prevArticle.title || [], linkResolver)} 91 | 92 | ) : ( 93 | '' 94 | )} 95 |{prevArticle && nextArticle && ' -- '}
96 | {nextArticle ? (
97 |
98 | {RichText.asText(nextArticle.title || [], linkResolver)} →
99 |
100 | ) : (
101 | ''
102 | )}
103 |