Merge pull request #27 from imranhsayed/feature/add-yoast-seo

Add Yoast seo

README.md

@@ -23,6 +23,7 @@
 7. Offline Search Feature
 8. Categories, Archive Page, Custom Home Page
 9. Custom Widgets, Menus
+10. Yoast seo support
 
 ## 🌐 Live Demo
 
@@ -40,21 +41,19 @@
 ## 🚀 Set Up
 
 ### Gatsby Setup
-* Rename [`.env-example`](https://github.com/imranhsayed/gatsby-wordpress-themes/blob/master/site/.env-example) in site directory file to `.env` and add your WordPress SITE_URL in `site` directory : 
+* Rename [`.env-example`](https://github.com/imranhsayed/gatsby-wordpress-themes/blob/master/site/.env-example) in site directory file to `.env` and add your WordPress SITE_URL and FRONTEND_URL in `site` directory : 
 `SITE_URL=https://example.com`
 
 ### WordPress Setup
-1. Upload and activate all the plugins from wordpress/plugins folder of this repo, into your WordPress Site.
-
-OR,
-
-a. Clone the WordPress plugin [Headless CMS](https://github.com/imranhsayed/headless-cms) in your WordPress
-plugin directory and activate it.
-
-b. Clone and activate [wp-graphql](https://github.com/wp-graphql/wp-graphql) -test on ( v0.8.3 ) in WordPress plugin directory.
-c. Clone and activate [wp-graphiql](https://github.com/wp-graphql/wp-graphiql) in WordPress plugin directory.
-d. Clone and activate [wp-graphql-acf](https://github.com/wp-graphql/wp-graphql-acf) in WordPress plugin directory.
-e. Install and activate [ACF WordPress plugin](https://wordpress.org/plugins/advanced-custom-fields/) in the WordPress.
+1. On your WordPress site, download, Upload and activate all the plugins from wordpress/plugins folder of this repo, into your WordPress Site.
+
+a. [Headless CMS](https://github.com/imranhsayed/gatsby-wordpress-themes/blob/master/wordpress/plugins/headless-cms.zip)
+b. [wp-graphql](https://github.com/imranhsayed/gatsby-wordpress-themes/blob/master/wordpress/plugins/wp-graphql.zip)
+c. [wp-graphiql](https://github.com/wp-graphql/wp-graphiql)
+d. [ACF WordPress plugin](https://wordpress.org/plugins/advanced-custom-fields/)
+e. [wp-graphql-acf](https://github.com/wp-graphql/wp-graphql-acf)
+f. [Yoast-SEO](https://github.com/imranhsayed/gatsby-wordpress-themes/blob/master/wordpress/plugins/wordpress-seo.14.5.zip)
+g. [wp-graphql-yoast-seo](https://github.com/imranhsayed/gatsby-wordpress-themes/blob/master/wordpress/plugins/wp-graphql-yoast-seo.zip)
 
 2. - Set Header menu as `HCMS Header Menu`
 

packages/gatsby-wordpress-theme-phoenix/README.md

@@ -23,6 +23,7 @@ Backend in WordPress.
 7. Offline Search Feature
 8. Categories, Archive Page, Custom Home Page
 9. Custom Widgets, Menus
+10. Yoast seo support
 
 
 ## 👨‍💻 Maintainer
@@ -58,25 +59,25 @@ module.exports = {
 		{
 		resolve: "gatsby-wordpress-theme-phoenix",
 		options: {
-			wordPressUrl: 'xxxx'
+			wordPressUrl: 'xxxx',
+            frontendUrl: 'https://example.com'
 		}
 	} ]
 };
 ``` 
 
 ### WordPress Site Setup
 
-1. Upload and activate all the plugins from [wordpress/plugins](https://github.com/imranhsayed/gatsby-wordpress-themes/tree/master/wordpress/plugins), into your WordPress Site.
+### WordPress Setup
+1. On your WordPress site, download, Upload and activate all the plugins from wordpress/plugins folder of this repo, into your WordPress Site.
 
-OR,
-
-a. Clone the WordPress plugin [Headless CMS](https://github.com/imranhsayed/headless-cms) in your WordPress
-plugin directory and activate it.
-
-b. Clone and activate [wp-graphql](https://github.com/wp-graphql/wp-graphql) -test on ( v0.8.3 ) in WordPress plugin directory.
-c. Clone and activate [wp-graphiql](https://github.com/wp-graphql/wp-graphiql) in WordPress plugin directory.
-d. Clone and activate [wp-graphql-acf](https://github.com/wp-graphql/wp-graphql-acf) in WordPress plugin directory.
-e. Install and activate [ACF WordPress plugin](https://wordpress.org/plugins/advanced-custom-fields/) in the WordPress.
+a. [Headless CMS](https://github.com/imranhsayed/gatsby-wordpress-themes/blob/master/wordpress/plugins/headless-cms.zip)
+b. [wp-graphql](https://github.com/imranhsayed/gatsby-wordpress-themes/blob/master/wordpress/plugins/wp-graphql.zip)
+c. [wp-graphiql](https://github.com/wp-graphql/wp-graphiql)
+d. [ACF WordPress plugin](https://wordpress.org/plugins/advanced-custom-fields/)
+e. [wp-graphql-acf](https://github.com/wp-graphql/wp-graphql-acf)
+f. [Yoast-SEO](https://github.com/imranhsayed/gatsby-wordpress-themes/blob/master/wordpress/plugins/wordpress-seo.14.5.zip)
+g. [wp-graphql-yoast-seo](https://github.com/imranhsayed/gatsby-wordpress-themes/blob/master/wordpress/plugins/wp-graphql-yoast-seo.zip)
 
 2. 
    * Set Header menu as `HCMS Header Menu`

packages/gatsby-wordpress-theme-phoenix/create-pages/archive.js

@@ -1,6 +1,7 @@
 const { slash } = require( `gatsby-core-utils` );
 const singlePageTemplate = require.resolve(`../src/templates/archive/index.js`);
 const createPaginatedPages = require('gatsby-paginate');
+const {SeoFragment} = require( './fragments/seo/index.js' );
 
 // Get all the posts.
 const GET_POSTS = `
@@ -13,13 +14,19 @@ query GET_POSTS {
         slug
         uri
         id
+	    seo {
+	       ...SeoFragment
+	    }
         posts(first: 5000) {
           edges {
             node {
               id
               title
               uri
               date
+              seo{
+               ...SeoFragment
+              }
               categories {
                 edges {
                   node {
@@ -55,6 +62,7 @@ query GET_POSTS {
   }
   }
 }
+${SeoFragment}
 `;
 
 module.exports = async ( { actions, graphql } ) => {

packages/gatsby-wordpress-theme-phoenix/create-pages/fragments/seo/index.js

@@ -0,0 +1,27 @@
+const SeoFragment = `
+fragment SeoFragment on hwgraphql_SEO {
+	  canonical
+	  title
+	  metaDesc
+	  metaRobotsNoindex
+	  metaRobotsNofollow
+	  opengraphAuthor
+	  opengraphDescription
+	  opengraphTitle
+	  opengraphDescription
+	  opengraphImage {
+	    sourceUrl
+	  }
+	  opengraphUrl
+	  opengraphSiteName
+	  opengraphPublishedTime
+	  opengraphModifiedTime
+	  twitterTitle
+	  twitterDescription
+	  twitterImage {
+	    sourceUrl
+	  }
+}
+`;
+
+module.exports.SeoFragment = SeoFragment;

packages/gatsby-wordpress-theme-phoenix/create-pages/front-page.js

@@ -1,12 +1,16 @@
 const { slash } = require( `gatsby-core-utils` );
 const frontPageTemplate = require.resolve(`../src/templates/front-page/index.js`);
+const {SeoFragment} = require( './fragments/seo/index.js' );
 
 // Get all the front page data.
 const GET_FRONT_PAGE = `
 query GET_FRONT_PAGE {
   HWGraphQL {
 	  pageBy(uri: "home") {
 	    title
+	    seo {
+	        ...SeoFragment
+	    }
 	    frontPageMeta {
 	      fieldGroupName
 	      banner {
@@ -162,6 +166,7 @@ query GET_FRONT_PAGE {
 	    }
   }
 }
+${SeoFragment}
 `;
 
 module.exports = async ( { actions, graphql } ) => {

packages/gatsby-wordpress-theme-phoenix/create-pages/pages.js

@@ -1,6 +1,7 @@
 const { slash } = require( `gatsby-core-utils` );
 const customTemplates = [ '/blog/', '/', '/blog', 'blog' ];
 const singlePageTemplate = require.resolve(`../src/templates/page/index.js`);
+const {SeoFragment} = require( './fragments/seo/index.js' );
 
 // Get all the pages.
 const GET_PAGES = `
@@ -13,6 +14,9 @@ query GET_PAGES {
         content
         date
         uri
+        seo {
+          ...SeoFragment
+        }
 		featuredImage {
 			altText
 			sourceUrl
@@ -42,6 +46,7 @@ query GET_PAGES {
 	 }
   }
 }
+${SeoFragment}
 `;
 
 module.exports = async ( { actions, graphql } ) => {

packages/gatsby-wordpress-theme-phoenix/create-pages/posts.js

@@ -1,5 +1,6 @@
 const { slash } = require( `gatsby-core-utils` );
 const singlePostPageTemplate = require.resolve(`../src/templates/post/index.js`);
+const {SeoFragment} = require( './fragments/seo/index.js' );
 
 // Get all the posts.
 const GET_POSTS = `
@@ -13,6 +14,9 @@ query GET_POSTS {
         content
         date
         uri
+        seo {
+           ...SeoFragment
+        }
 		featuredImage {
 			altText
 			sourceUrl
@@ -42,6 +46,7 @@ query GET_POSTS {
 	 }
   }
 }
+${SeoFragment}
 `;
 
 module.exports = async ( { actions, graphql } ) => {

packages/gatsby-wordpress-theme-phoenix/gatsby-config.js

@@ -1,8 +1,9 @@
-module.exports = ({ wordPressUrl }) => ({
+module.exports = ({ wordPressUrl, frontendUrl }) => ({
 	siteMetadata: {
 		title: `Gatsby WordPress Theme`,
 		description: `Gatsby WordPress Theme`,
 		author: `@imranhsayed`,
+		siteUrl: `${frontendUrl}`
 	},
 	plugins: [
 		`gatsby-plugin-react-helmet`,

packages/gatsby-wordpress-theme-phoenix/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-wordpress-theme-phoenix",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "Gatsby WordPress Theme Phoenix",
   "main": "index.js",
   "dependencies": {

packages/gatsby-wordpress-theme-phoenix/src/components/header/index.js

@@ -8,7 +8,6 @@ import { StaticQuery, graphql } from 'gatsby';
 /**
  * Internal dependencies.
  */
-import SEO from "../seo";
 import { Header } from "./header-static";
 
 /**
@@ -52,10 +51,7 @@ export default ( props ) => {
 				    }
 				` }
 			render={ data => (
-				<>
-					<SEO title="Phoenix: Gatsby WordPress Theme" header={ data.HWGraphQL.header }/>
-					<Header data={ data }/>
-				</>
+				<Header data={ data }/>
 			) }
 		/>
 	)
@@ -66,7 +62,6 @@ Header.propTypes = {
 };
 
 Header.defaultProps = {
-	siteTitle: 'Phoenix: Gatsby WordPress Theme',
 	data: {
 		HWGraphQL: {}
 	},