diff --git a/.gitignore b/.gitignore index 74eac019f..ac1e8f792 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,3 @@ node_modules -types -*.js *.log +.DS_Store diff --git a/examples/default/gatsby-browser.js b/examples/default/gatsby-browser.js new file mode 100644 index 000000000..ae3aa59b7 --- /dev/null +++ b/examples/default/gatsby-browser.js @@ -0,0 +1,10 @@ +/** + * Implement Gatsby's Browser APIs in this file. + * + * See: https://www.gatsbyjs.org/docs/browser-apis/ + */ + +// You can delete this file if you're not using it +const { registerLinkResolver } = require('gatsby-source-prismic-graphql'); + +registerLinkResolver(require('./src/utils/linkResolver').linkResolver); diff --git a/examples/default/gatsby-config.js b/examples/default/gatsby-config.js new file mode 100644 index 000000000..44660f0b2 --- /dev/null +++ b/examples/default/gatsby-config.js @@ -0,0 +1,48 @@ +module.exports = { + siteMetadata: { + title: `Gatsby Default Starter`, + 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.`, + author: `@gatsbyjs`, + }, + plugins: [ + { + resolve: `gatsby-source-prismic-graphql`, + options: { + repositoryName: 'ueno-starter-kit-universally-test', + pages: [ + { + type: 'Article', + match: '/article/:uid', + path: '/article', + component: require.resolve('./src/templates/article.js'), + }, + ], + }, + }, + `gatsby-plugin-react-helmet`, + { + resolve: `gatsby-source-filesystem`, + options: { + name: `images`, + path: `${__dirname}/src/images`, + }, + }, + `gatsby-transformer-sharp`, + `gatsby-plugin-sharp`, + { + resolve: `gatsby-plugin-manifest`, + options: { + name: `gatsby-starter-default`, + short_name: `starter`, + start_url: `/`, + background_color: `#663399`, + theme_color: `#663399`, + display: `minimal-ui`, + icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site. + }, + }, + // this (optional) plugin enables Progressive Web App + Offline functionality + // To learn more, visit: https://gatsby.dev/offline + // 'gatsby-plugin-offline', + ], +}; diff --git a/examples/default/gatsby-node.js b/examples/default/gatsby-node.js new file mode 100644 index 000000000..a1bfac02e --- /dev/null +++ b/examples/default/gatsby-node.js @@ -0,0 +1,5 @@ +/** + * Implement Gatsby's Node APIs in this file. + * + * See: https://www.gatsbyjs.org/docs/node-apis/ + */ diff --git a/examples/default/gatsby-ssr.js b/examples/default/gatsby-ssr.js new file mode 100644 index 000000000..b17b8fc19 --- /dev/null +++ b/examples/default/gatsby-ssr.js @@ -0,0 +1,7 @@ +/** + * Implement Gatsby's SSR (Server Side Rendering) APIs in this file. + * + * See: https://www.gatsbyjs.org/docs/ssr-apis/ + */ + +// You can delete this file if you're not using it diff --git a/examples/default/src/components/header.js b/examples/default/src/components/header.js new file mode 100644 index 000000000..314affc71 --- /dev/null +++ b/examples/default/src/components/header.js @@ -0,0 +1,42 @@ +import { Link } from 'gatsby'; +import PropTypes from 'prop-types'; +import React from 'react'; + +const Header = ({ siteTitle }) => ( +
+
+

+ + {siteTitle} + +

+
+
+); + +Header.propTypes = { + siteTitle: PropTypes.string, +}; + +Header.defaultProps = { + siteTitle: ``, +}; + +export default Header; diff --git a/examples/default/src/components/image.js b/examples/default/src/components/image.js new file mode 100644 index 000000000..f6de97905 --- /dev/null +++ b/examples/default/src/components/image.js @@ -0,0 +1,32 @@ +import React from 'react'; +import { StaticQuery, graphql } from 'gatsby'; +import Img from 'gatsby-image'; + +/* + * This component is built using `gatsby-image` to automatically serve optimized + * images with lazy loading and reduced file sizes. The image is loaded using a + * `StaticQuery`, which allows us to load the image from directly within this + * component, rather than having to pass the image data down from pages. + * + * For more information, see the docs: + * - `gatsby-image`: https://gatsby.dev/gatsby-image + * - `StaticQuery`: https://gatsby.dev/staticquery + */ + +const Image = () => ( + } + /> +); +export default Image; diff --git a/examples/default/src/components/layout.js b/examples/default/src/components/layout.js new file mode 100644 index 000000000..8520313ac --- /dev/null +++ b/examples/default/src/components/layout.js @@ -0,0 +1,53 @@ +/** + * Layout component that queries for data + * with Gatsby's StaticQuery component + * + * See: https://www.gatsbyjs.org/docs/static-query/ + */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import { StaticQuery, graphql } from 'gatsby'; + +import Header from './header'; +import './layout.css'; + +const Layout = ({ children }) => ( + ( + <> +
+
+
{children}
+
+ © {new Date().getFullYear()}, Built with + {` `} + Gatsby +
+
+ + )} + /> +); + +Layout.propTypes = { + children: PropTypes.node.isRequired, +}; + +export default Layout; diff --git a/examples/default/src/components/seo.js b/examples/default/src/components/seo.js new file mode 100644 index 000000000..d4dc82b8e --- /dev/null +++ b/examples/default/src/components/seo.js @@ -0,0 +1,98 @@ +/** + * SEO component that queries for data with + * Gatsby's useStaticQuery React hook + * + * See: https://www.gatsbyjs.org/docs/use-static-query/ + */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import Helmet from 'react-helmet'; +import { useStaticQuery, graphql } from 'gatsby'; + +function SEO({ description, lang, meta, keywords, title }) { + const { site } = useStaticQuery( + graphql` + query { + site { + siteMetadata { + title + description + author + } + } + } + ` + ); + + const metaDescription = description || site.siteMetadata.description; + + return ( + 0 + ? { + name: `keywords`, + content: keywords.join(`, `), + } + : [] + ) + .concat(meta)} + /> + ); +} + +SEO.defaultProps = { + lang: `en`, + meta: [], + keywords: [], +}; + +SEO.propTypes = { + description: PropTypes.string, + lang: PropTypes.string, + meta: PropTypes.array, + keywords: PropTypes.arrayOf(PropTypes.string), + title: PropTypes.string.isRequired, +}; + +export default SEO; diff --git a/examples/default/src/pages/404.js b/examples/default/src/pages/404.js new file mode 100644 index 000000000..a152c70bd --- /dev/null +++ b/examples/default/src/pages/404.js @@ -0,0 +1,14 @@ +import React from 'react'; + +import Layout from '../components/layout'; +import SEO from '../components/seo'; + +const NotFoundPage = () => ( + + +

NOT FOUND

+

You just hit a route that doesn't exist... the sadness.

+ +); + +export default NotFoundPage; diff --git a/examples/default/src/pages/example.js b/examples/default/src/pages/example.js new file mode 100644 index 000000000..d74277931 --- /dev/null +++ b/examples/default/src/pages/example.js @@ -0,0 +1,31 @@ +import { graphql, Link } from 'gatsby'; +import React from 'react'; + +export const query = graphql` + query { + prismic { + allArticles { + edges { + node { + _meta { + uid + } + title + } + } + } + } + } +`; + +const Example = ({ data, ...props }) => { + console.log(data, props); + + return ( +

+ ELLO yes +

+ ); +}; + +export default Example; diff --git a/examples/default/src/templates/article.js b/examples/default/src/templates/article.js new file mode 100644 index 000000000..dec54953c --- /dev/null +++ b/examples/default/src/templates/article.js @@ -0,0 +1,33 @@ +import React from 'react'; +import { graphql } from 'gatsby'; +import { get } from 'lodash'; + +export const query = graphql` + query ArticleQuery($uid: String) { + prismic { + allArticles(uid: $uid) { + edges { + node { + _meta { + uid + } + title + } + } + } + } + } +`; + +const Article = props => { + console.log('Article.props', props); + const title = get(props.data, 'prismic.allArticles.edges.0.node.title.0.text'); + return ( +
+

{title}

+

article body

+
+ ); +}; + +export default Article; diff --git a/examples/default/src/utils/linkResolver.js b/examples/default/src/utils/linkResolver.js new file mode 100644 index 000000000..280075f0e --- /dev/null +++ b/examples/default/src/utils/linkResolver.js @@ -0,0 +1,9 @@ +module.exports = { + linkResolver(doc) { + if (doc.type === 'article') { + return `/article/${doc.uid}`; + } + + return '/'; + }, +};