From c4d2d0f2a8fb01b4c0832d89ee1933a44cb3ea12 Mon Sep 17 00:00:00 2001 From: Michal Piechowiak Date: Wed, 5 Apr 2023 09:04:20 +0200 Subject: [PATCH] chore(examples): remove outdated wordpress examples (#37912) --- examples/using-wordpress-with-acf/README.md | 8 -- .../using-wordpress-with-acf/gatsby-config.js | 42 ------- .../using-wordpress-with-acf/gatsby-node.js | 85 -------------- .../using-wordpress-with-acf/package.json | 44 ------- .../src/components/post-icons.js | 43 ------- .../src/layouts/index.js | 64 ---------- .../src/pages/index.js | 78 ------------- .../src/templates/page.js | 39 ------- .../src/templates/post.js | 109 ------------------ .../src/utils/typography.js | 19 --- examples/using-wordpress/README.md | 3 - examples/using-wordpress/gatsby-config.js | 21 ---- examples/using-wordpress/gatsby-node.js | 85 -------------- examples/using-wordpress/package.json | 29 ----- examples/using-wordpress/src/pages/index.js | 60 ---------- .../using-wordpress/src/templates/page.js | 33 ------ .../using-wordpress/src/templates/post.js | 38 ------ 17 files changed, 800 deletions(-) delete mode 100644 examples/using-wordpress-with-acf/README.md delete mode 100644 examples/using-wordpress-with-acf/gatsby-config.js delete mode 100644 examples/using-wordpress-with-acf/gatsby-node.js delete mode 100644 examples/using-wordpress-with-acf/package.json delete mode 100644 examples/using-wordpress-with-acf/src/components/post-icons.js delete mode 100644 examples/using-wordpress-with-acf/src/layouts/index.js delete mode 100644 examples/using-wordpress-with-acf/src/pages/index.js delete mode 100644 examples/using-wordpress-with-acf/src/templates/page.js delete mode 100644 examples/using-wordpress-with-acf/src/templates/post.js delete mode 100644 examples/using-wordpress-with-acf/src/utils/typography.js delete mode 100644 examples/using-wordpress/README.md delete mode 100644 examples/using-wordpress/gatsby-config.js delete mode 100644 examples/using-wordpress/gatsby-node.js delete mode 100644 examples/using-wordpress/package.json delete mode 100644 examples/using-wordpress/src/pages/index.js delete mode 100644 examples/using-wordpress/src/templates/page.js delete mode 100644 examples/using-wordpress/src/templates/post.js diff --git a/examples/using-wordpress-with-acf/README.md b/examples/using-wordpress-with-acf/README.md deleted file mode 100644 index 5d45a88ca53af..0000000000000 --- a/examples/using-wordpress-with-acf/README.md +++ /dev/null @@ -1,8 +0,0 @@ -# Using WordPress With Advanced Custom Fields (ACF) - -https://using-wordpress.gatsbyjs.org/ - -Example site that extends the [using-wordpress](examples/using-wordpress/) example and demonstrates how to build Gatsby sites that pull data from the -[WordPress CMS API](https://www.wordpress.com/) using Advanced Custom Fields. - -IMPORTANT NOTE: This example site won't keep working if you switch the WordPress site to one of yours. It's meant as a learning resource. Try starting from scratch with a site created by `gatsby new` and start copying over parts from this site starting with `gatsby-config.js`. diff --git a/examples/using-wordpress-with-acf/gatsby-config.js b/examples/using-wordpress-with-acf/gatsby-config.js deleted file mode 100644 index 6f226e10c1e68..0000000000000 --- a/examples/using-wordpress-with-acf/gatsby-config.js +++ /dev/null @@ -1,42 +0,0 @@ -module.exports = { - siteMetadata: { - title: `A sample site using gatsby-source-wordpress with Advanced Custom Fields`, - subtitle: `Data fetched from a site hosted on wordpress.com`, - }, - plugins: [ - // https://public-api.wordpress.com/wp/v2/sites/gatsbyjsexamplewordpress.wordpress.com/pages/ - /* - * Gatsby's data processing layer begins with “source” - * plugins. Here the site sources its data from WordPress. - */ - { - resolve: `gatsby-source-wordpress`, - options: { - /* - * The base URL of the WordPress site without the trailingslash and the protocol. This is required. - * Example : 'dev-gatbsyjswp.pantheonsite.io' or 'www.example-site.com' - */ - baseUrl: `dev-gatbsyjswp.pantheonsite.io`, - // The protocol. This can be http or https. - protocol: `http`, - // Indicates whether the site is hosted on wordpress.com. - // If false, then the assumption is made that the site is self hosted. - // If true, then the plugin will source its content on wordpress.com using the JSON REST API V2. - // If your site is hosted on wordpress.org, then set this to false. - hostingWPCOM: false, - // If useACF is true, then the source plugin will try to import the WordPress ACF Plugin contents. - // This feature is untested for sites hosted on Wordpress.com - useACF: true, - }, - }, - `gatsby-transformer-sharp`, - `gatsby-plugin-sharp`, - `gatsby-plugin-glamor`, - { - resolve: `gatsby-plugin-typography`, - options: { - pathToConfigModule: `src/utils/typography.js`, - }, - }, - ], -} diff --git a/examples/using-wordpress-with-acf/gatsby-node.js b/examples/using-wordpress-with-acf/gatsby-node.js deleted file mode 100644 index e6e9e942a5f72..0000000000000 --- a/examples/using-wordpress-with-acf/gatsby-node.js +++ /dev/null @@ -1,85 +0,0 @@ -const path = require(`path`) -const { slash } = require(`gatsby-core-utils`) - -// Implement the Gatsby API “createPages”. This is -// called after the Gatsby bootstrap is finished so you have -// access to any information necessary to programmatically -// create pages. -// Will create pages for WordPress pages (route : /{slug}) -// Will create pages for WordPress posts (route : /post/{slug}) -exports.createPages = async ({ graphql, actions }) => { - const { createPage } = actions - - // The “graphql” function allows us to run arbitrary - // queries against the local Gatsby GraphQL schema. Think of - // it like the site has a built-in database constructed - // from the fetched data that you can run queries against. - const result = await graphql(` - { - allWordpressPage { - edges { - node { - id - slug - status - template - } - } - } - allWordpressPost { - edges { - node { - id - slug - status - template - format - } - } - } - } - `) - - // Check for any errors - if (result.errors) { - throw new Error(result.errors) - } - - // Access query results via object destructuring - const { allWordpressPage, allWordpressPost } = result.data - - const pageTemplate = path.resolve(`./src/templates/page.js`) - // We want to create a detailed page for each - // page node. We'll just use the WordPress Slug for the slug. - // The Page ID is prefixed with 'PAGE_' - allWordpressPage.edges.forEach(edge => { - // Gatsby uses Redux to manage its internal state. - // Plugins and sites can use functions like "createPage" - // to interact with Gatsby. - createPage({ - // Each page is required to have a `path` as well - // as a template component. The `context` is - // optional but is often necessary so the template - // can query data specific to each page. - path: `/${edge.node.slug}/`, - component: slash(pageTemplate), - context: { - id: edge.node.id, - }, - }) - }) - - const postTemplate = path.resolve(`./src/templates/post.js`) - // We want to create a detailed page for each - // post node. We'll just use the WordPress Slug for the slug. - // The Post ID is prefixed with 'POST_' - allWordpressPost.edges.forEach(edge => { - createPage({ - path: `/${edge.node.slug}/`, - component: slash(postTemplate), - context: { - id: edge.node.id, - }, - }) - }) -} diff --git a/examples/using-wordpress-with-acf/package.json b/examples/using-wordpress-with-acf/package.json deleted file mode 100644 index ac7698345fa45..0000000000000 --- a/examples/using-wordpress-with-acf/package.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "name": "gatsby-example-using-wordpress-with-acf", - "private": true, - "description": "Gatsby example site using the WordPress source plugin and Advanced Custom Fields", - "version": "1.0.0-beta.6", - "author": "Sebastien Fichot ", - "dependencies": { - "gatsby": "next", - "gatsby-core-utils": "next", - "gatsby-image": "next", - "gatsby-plugin-glamor": "next", - "gatsby-plugin-react-helmet": "next", - "gatsby-plugin-sharp": "next", - "gatsby-plugin-typography": "next", - "gatsby-source-wordpress": "next", - "gatsby-transformer-sharp": "next", - "glamor": "^2.20.40", - "lodash": "^4.17.20", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-helmet": "^5.2.1", - "react-icons": "^3.11.0", - "react-typography": "^0.16.19", - "typography": "^0.16.19", - "typography-theme-wordpress-2013": "^0.16.19" - }, - "keywords": [ - "gatsby" - ], - "license": "MIT", - "main": "n/a", - "scripts": { - "lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .", - "test": "echo \"Error: no test specified\" && exit 1", - "develop": "gatsby develop", - "build": "gatsby build", - "serve": "gatsby serve", - "start": "npm run develop", - "predeploy": "gatsby build --prefix-paths" - }, - "devDependencies": { - "eslint": "^4.19.1" - } -} \ No newline at end of file diff --git a/examples/using-wordpress-with-acf/src/components/post-icons.js b/examples/using-wordpress-with-acf/src/components/post-icons.js deleted file mode 100644 index 4de1de1562b54..0000000000000 --- a/examples/using-wordpress-with-acf/src/components/post-icons.js +++ /dev/null @@ -1,43 +0,0 @@ -import { graphql } from "gatsby" -import React from "react" -import { FaRegClock, FaTag, FaFolderOpen } from "react-icons/fa" - -import { rhythm } from "../utils/typography" - -export default ({ node, className = `` }) => ( -
- - - {` `} - {node.date} - - {node.categories && - node.categories.map(category => ( - - - {` `} - {category.name} - - ))} - {node.tags && - node.tags.map(tag => ( - - - {` `} - {tag.name} - - ))} -
-) - -export const query = graphql` - fragment PostIcons on wordpress__POST { - date(formatString: "MMMM DD, YYYY") - tags { - name - } - categories { - name - } - } -` diff --git a/examples/using-wordpress-with-acf/src/layouts/index.js b/examples/using-wordpress-with-acf/src/layouts/index.js deleted file mode 100644 index 20bd02edf485c..0000000000000 --- a/examples/using-wordpress-with-acf/src/layouts/index.js +++ /dev/null @@ -1,64 +0,0 @@ -import React, { Component } from "react" -import PropTypes from "prop-types" -import { Link } from "gatsby" - -import { rhythm, scale } from "../utils/typography" - -const containerStyle = { - maxWidth: 700, - margin: `0 auto`, - padding: rhythm(3 / 4), -} - -class DefaultLayout extends Component { - render() { - return ( -
-
-
-

- - Gatsby + WordPress!! - -

-
-
-
{this.props.children}
-
- ) - } -} - -DefaultLayout.propTypes = { - children: PropTypes.object.isRequired, -} - -export default DefaultLayout diff --git a/examples/using-wordpress-with-acf/src/pages/index.js b/examples/using-wordpress-with-acf/src/pages/index.js deleted file mode 100644 index 4fa095d0b6cc6..0000000000000 --- a/examples/using-wordpress-with-acf/src/pages/index.js +++ /dev/null @@ -1,78 +0,0 @@ -import React, { Component } from "react" -import { Link, graphql } from "gatsby" -import { FaRegClock } from "react-icons/fa" - -import Layout from "../layouts" -import PostIcons from "../components/post-icons" - -import { rhythm } from "../utils/typography" - -class Home extends Component { - render() { - const data = this.props.data - - return ( - -
-

Pages

- {data.allWordpressPage.edges.map(({ node }) => ( -
- -

{node.title}

- -
- - - {` `} - {node.date} - -
- ))} -
-
-

Posts

- {data.allWordpressPost.edges.map(({ node }) => ( -
- -

{node.title}

- -
- -
- ))} - - ) - } -} - -export default Home - -// Set here the ID of the home page. -export const pageQuery = graphql` - { - allWordpressPage { - edges { - node { - id - title - excerpt - slug - date(formatString: "MMMM DD, YYYY") - } - } - } - allWordpressPost(sort: { date: ASC }) { - edges { - node { - title - excerpt - slug - ...PostIcons - } - } - } - } -` diff --git a/examples/using-wordpress-with-acf/src/templates/page.js b/examples/using-wordpress-with-acf/src/templates/page.js deleted file mode 100644 index 54468ec9c6977..0000000000000 --- a/examples/using-wordpress-with-acf/src/templates/page.js +++ /dev/null @@ -1,39 +0,0 @@ -import React, { Component } from "react" -import { graphql } from "gatsby" -import PostIcons from "../components/post-icons" -import Layout from "../layouts" - -import { rhythm } from "../utils/typography" - -class PageTemplate extends Component { - render() { - const currentPage = this.props.data.wordpressPage - - return ( - -

- -
- - ) - } -} - -export default PageTemplate - -export const pageQuery = graphql` - query($id: String!) { - wordpressPage(id: { eq: $id }) { - title - content - date(formatString: "MMMM DD, YYYY") - } - site { - id - siteMetadata { - title - subtitle - } - } - } -` diff --git a/examples/using-wordpress-with-acf/src/templates/post.js b/examples/using-wordpress-with-acf/src/templates/post.js deleted file mode 100644 index 2f92b07312e85..0000000000000 --- a/examples/using-wordpress-with-acf/src/templates/post.js +++ /dev/null @@ -1,109 +0,0 @@ -import React, { Component } from "react" -import { graphql } from "gatsby" -import PropTypes from "prop-types" -import PostIcons from "../components/post-icons" -import Img from "gatsby-image" -import Layout from "../layouts" - -import { rhythm } from "../utils/typography" - -class PostTemplate extends Component { - render() { - const post = this.props.data.wordpressPost - - return ( - -

- -
- {post.acf && - post.acf.page_builder_post && - post.acf.page_builder_post.map((layout, i) => { - if (layout.__typename === `WordPressAcf_image_gallery`) { - return ( -
-

ACF Image Gallery

- {layout.pictures.map(({ picture }) => { - const img = picture.localFile.childImageSharp.fluid - return ( - - ) - })} -
- ) - } - if (layout.__typename === `WordPressAcf_post_photo`) { - const img = layout.photo.localFile.childImageSharp.fluid - return ( -
-

ACF Post Photo

- -
- ) - } - return null - })} - - ) - } -} - -PostTemplate.propTypes = { - data: PropTypes.object.isRequired, - edges: PropTypes.array, -} - -export default PostTemplate - -export const pageQuery = graphql` - query($id: String!) { - wordpressPost(id: { eq: $id }) { - title - content - ...PostIcons - acf { - page_builder_post { - __typename - ... on WordPressAcf_post_photo { - photo { - localFile { - childImageSharp { - fluid(maxWidth: 680) { - ...GatsbyImageSharpFluid - } - } - } - } - } - ... on WordPressAcf_image_gallery { - pictures { - picture { - localFile { - childImageSharp { - fluid(maxWidth: 680) { - ...GatsbyImageSharpFluid - } - } - } - } - } - } - } - } - } - site { - siteMetadata { - title - subtitle - } - } - } -` diff --git a/examples/using-wordpress-with-acf/src/utils/typography.js b/examples/using-wordpress-with-acf/src/utils/typography.js deleted file mode 100644 index 497c6910d4160..0000000000000 --- a/examples/using-wordpress-with-acf/src/utils/typography.js +++ /dev/null @@ -1,19 +0,0 @@ -import Typography from "typography" -import wordpress2013 from "typography-theme-wordpress-2013" - -wordpress2013.headerLineHeight = 1.1 -wordpress2013.overrideThemeStyles = () => { - return { - a: { - color: `rgb(60,99,243)`, - }, - h1: { - lineHeight: 1, - }, - } -} - -const typography = new Typography(wordpress2013) - -export const { rhythm, scale } = typography -export default typography diff --git a/examples/using-wordpress/README.md b/examples/using-wordpress/README.md deleted file mode 100644 index 3924afcee8aa4..0000000000000 --- a/examples/using-wordpress/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# Using WordPress - -This is an example which contains sample code for demonstrating how to source data from WordPress using the [gatsby-source-wordpress plugin](https://www.gatsbyjs.com/plugins/gatsby-source-wordpress/). This example is created to serve as an extension to the example code provided in the [Sourcing from WordPress recipe](https://www.gatsbyjs.com/docs/recipes/sourcing-data#sourcing-from-wordpress) in the Sourcing data section. It is meant for the purpose of learning and contains code that cannot be included in the recipe itself. diff --git a/examples/using-wordpress/gatsby-config.js b/examples/using-wordpress/gatsby-config.js deleted file mode 100644 index 9403d5d24be3a..0000000000000 --- a/examples/using-wordpress/gatsby-config.js +++ /dev/null @@ -1,21 +0,0 @@ -module.exports = { - siteMetadata: { - title: `An example to learn how to source data from WordPress`, - description: `Sourcing data from WordPress`, - }, - plugins: [ - { - resolve: `gatsby-source-wordpress`, - options: { - /* - * The base URL of the WordPress site without the trailingslash and the protocol. This is required. - * Example : 'dev-gatbsyjswp.pantheonsite.io' or 'www.example-site.com' - */ - baseUrl: `demo.wp-api.org`, - protocol: `https`, - hostingWPCOM: false, - useACF: false, - }, - }, - ], -} diff --git a/examples/using-wordpress/gatsby-node.js b/examples/using-wordpress/gatsby-node.js deleted file mode 100644 index 01077f8c86efc..0000000000000 --- a/examples/using-wordpress/gatsby-node.js +++ /dev/null @@ -1,85 +0,0 @@ -const path = require(`path`) -const { slash } = require(`gatsby-core-utils`) - -// Implement the Gatsby API “createPages”. This is -// called after the Gatsby bootstrap is finished so you have -// access to any information necessary to programmatically -// create pages. -// Will create pages for WordPress pages (route : /{slug}) -// Will create pages for WordPress posts (route : /post/{slug}) -exports.createPages = async ({ graphql, actions }) => { - const { createPage } = actions - // The “graphql” function allows us to run arbitrary - // queries against the local Gatsby GraphQL schema. Think of - // it like the site has a built-in database constructed - // from the fetched data that you can run queries against. - - const result = await graphql(` - { - allWordpressPage { - edges { - node { - id - slug - status - template - } - } - } - allWordpressPost { - edges { - node { - id - slug - status - template - format - } - } - } - } - `) - - // Check for any errors - if (result.errors) { - console.error(result.errors) - } - - // Access query results via object destructuring - const { allWordpressPage, allWordpressPost } = result.data - - const pageTemplate = path.resolve(`./src/templates/page.js`) - // We want to create a detailed page for each - // page node. We'll just use the WordPress Slug for the slug. - // The Page ID is prefixed with 'PAGE_' - allWordpressPage.edges.forEach(edge => { - // Gatsby uses Redux to manage its internal state. - // Plugins and sites can use functions like "createPage" - // to interact with Gatsby. - createPage({ - // Each page is required to have a `path` as well - // as a template component. The `context` is - // optional but is often necessary so the template - // can query data specific to each page. - path: `/${edge.node.slug}/`, - component: slash(pageTemplate), - context: { - id: edge.node.id, - }, - }) - }) - - const postTemplate = path.resolve(`./src/templates/post.js`) - // We want to create a detailed page for each - // post node. We'll just use the WordPress Slug for the slug. - // The Post ID is prefixed with 'POST_' - allWordpressPost.edges.forEach(edge => { - createPage({ - path: `/${edge.node.slug}/`, - component: slash(postTemplate), - context: { - id: edge.node.id, - }, - }) - }) -} diff --git a/examples/using-wordpress/package.json b/examples/using-wordpress/package.json deleted file mode 100644 index 4148218b2e4c0..0000000000000 --- a/examples/using-wordpress/package.json +++ /dev/null @@ -1,29 +0,0 @@ -{ - "name": "gatsby-example-sourcing-wordpress", - "private": true, - "description": "An example to learn how to source data form WordPress", - "version": "0.1.0", - "author": "Vishwa Mehta ", - "dependencies": { - "gatsby": "next", - "gatsby-core-utils": "next", - "gatsby-source-wordpress": "next", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-helmet": "^5.2.1" - }, - "devDependencies": { - "prettier": "2.1.1" - }, - "keywords": [ - "gatsby" - ], - "license": "MIT", - "scripts": { - "build": "gatsby build", - "develop": "gatsby develop", - "format": "prettier --write \"**/*.{js,jsx,json,md}\"", - "start": "npm run develop", - "serve": "gatsby serve" - } -} \ No newline at end of file diff --git a/examples/using-wordpress/src/pages/index.js b/examples/using-wordpress/src/pages/index.js deleted file mode 100644 index 12770ec647b40..0000000000000 --- a/examples/using-wordpress/src/pages/index.js +++ /dev/null @@ -1,60 +0,0 @@ -import React, { Component } from "react" -import { Link, graphql } from "gatsby" - -class Homepage extends Component { - render() { - const data = this.props.data - - return ( - <> -
-

Pages

- {data.allWordpressPage.edges.map(({ node }) => ( -
- -

{node.title}

- -

{node.excerpt}

-
- ))} -
- -

Posts

- {data.allWordpressPost.edges.map(({ node }) => ( -
- -

{node.title}

- -

{node.excerpt}

-
- ))} - - ) - } -} - -export default Homepage - -export const pageQuery = graphql` - query { - allWordpressPage { - edges { - node { - id - title - excerpt - slug - } - } - } - allWordpressPost { - edges { - node { - title - excerpt - slug - } - } - } - } -` diff --git a/examples/using-wordpress/src/templates/page.js b/examples/using-wordpress/src/templates/page.js deleted file mode 100644 index 142c753161d60..0000000000000 --- a/examples/using-wordpress/src/templates/page.js +++ /dev/null @@ -1,33 +0,0 @@ -import React, { Component } from "react" -import { graphql } from "gatsby" - -class Page extends Component { - render() { - const StaticPage = this.props.data.wordpressPage - - return ( - <> -

{StaticPage.title}

-
{StaticPage.content}
- - ) - } -} - -export default Page - -export const pageQuery = graphql` - query($id: String!) { - wordpressPage(id: { eq: $id }) { - title - content - } - site { - id - siteMetadata { - title - description - } - } - } -` diff --git a/examples/using-wordpress/src/templates/post.js b/examples/using-wordpress/src/templates/post.js deleted file mode 100644 index 653e2bee1f39b..0000000000000 --- a/examples/using-wordpress/src/templates/post.js +++ /dev/null @@ -1,38 +0,0 @@ -import React, { Component } from "react" -import { graphql } from "gatsby" -import PropTypes from "prop-types" - -class Post extends Component { - render() { - const post = this.props.data.wordpressPost - - return ( - <> -

{post.title}

-
{post.content}
- - ) - } -} - -Post.propTypes = { - data: PropTypes.object.isRequired, - edges: PropTypes.array, -} - -export default Post - -export const postQuery = graphql` - query($id: String!) { - wordpressPost(id: { eq: $id }) { - title - content - } - site { - siteMetadata { - title - description - } - } - } -`