diff --git a/README.md b/README.md index b51f896..abbf62d 100644 --- a/README.md +++ b/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` diff --git a/packages/gatsby-wordpress-theme-phoenix/README.md b/packages/gatsby-wordpress-theme-phoenix/README.md index 6b9bbcf..40f9345 100644 --- a/packages/gatsby-wordpress-theme-phoenix/README.md +++ b/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,7 +59,8 @@ module.exports = { { resolve: "gatsby-wordpress-theme-phoenix", options: { - wordPressUrl: 'xxxx' + wordPressUrl: 'xxxx', + frontendUrl: 'https://example.com' } } ] }; @@ -66,17 +68,16 @@ module.exports = { ### 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` diff --git a/packages/gatsby-wordpress-theme-phoenix/create-pages/archive.js b/packages/gatsby-wordpress-theme-phoenix/create-pages/archive.js index 605d456..95bea0c 100644 --- a/packages/gatsby-wordpress-theme-phoenix/create-pages/archive.js +++ b/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,6 +14,9 @@ query GET_POSTS { slug uri id + seo { + ...SeoFragment + } posts(first: 5000) { edges { node { @@ -20,6 +24,9 @@ query GET_POSTS { title uri date + seo{ + ...SeoFragment + } categories { edges { node { @@ -55,6 +62,7 @@ query GET_POSTS { } } } +${SeoFragment} `; module.exports = async ( { actions, graphql } ) => { diff --git a/packages/gatsby-wordpress-theme-phoenix/create-pages/fragments/seo/index.js b/packages/gatsby-wordpress-theme-phoenix/create-pages/fragments/seo/index.js new file mode 100644 index 0000000..02c33f6 --- /dev/null +++ b/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; diff --git a/packages/gatsby-wordpress-theme-phoenix/create-pages/front-page.js b/packages/gatsby-wordpress-theme-phoenix/create-pages/front-page.js index 34a7ef8..8ddef32 100644 --- a/packages/gatsby-wordpress-theme-phoenix/create-pages/front-page.js +++ b/packages/gatsby-wordpress-theme-phoenix/create-pages/front-page.js @@ -1,5 +1,6 @@ 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 = ` @@ -7,6 +8,9 @@ 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 } ) => { diff --git a/packages/gatsby-wordpress-theme-phoenix/create-pages/pages.js b/packages/gatsby-wordpress-theme-phoenix/create-pages/pages.js index 3203346..d3de7f6 100644 --- a/packages/gatsby-wordpress-theme-phoenix/create-pages/pages.js +++ b/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 } ) => { diff --git a/packages/gatsby-wordpress-theme-phoenix/create-pages/posts.js b/packages/gatsby-wordpress-theme-phoenix/create-pages/posts.js index 267befc..680152b 100644 --- a/packages/gatsby-wordpress-theme-phoenix/create-pages/posts.js +++ b/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 } ) => { diff --git a/packages/gatsby-wordpress-theme-phoenix/gatsby-config.js b/packages/gatsby-wordpress-theme-phoenix/gatsby-config.js index 6e59b71..992563a 100644 --- a/packages/gatsby-wordpress-theme-phoenix/gatsby-config.js +++ b/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`, diff --git a/packages/gatsby-wordpress-theme-phoenix/package.json b/packages/gatsby-wordpress-theme-phoenix/package.json index dd48957..e2937b5 100644 --- a/packages/gatsby-wordpress-theme-phoenix/package.json +++ b/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": { diff --git a/packages/gatsby-wordpress-theme-phoenix/src/components/header/index.js b/packages/gatsby-wordpress-theme-phoenix/src/components/header/index.js index 760bbf7..40fa6ba 100644 --- a/packages/gatsby-wordpress-theme-phoenix/src/components/header/index.js +++ b/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 => ( - <> - -
- +
) } /> ) @@ -66,7 +62,6 @@ Header.propTypes = { }; Header.defaultProps = { - siteTitle: 'Phoenix: Gatsby WordPress Theme', data: { HWGraphQL: {} }, diff --git a/packages/gatsby-wordpress-theme-phoenix/src/components/seo.js b/packages/gatsby-wordpress-theme-phoenix/src/components/seo.js index 4e77c6f..1abee16 100644 --- a/packages/gatsby-wordpress-theme-phoenix/src/components/seo.js +++ b/packages/gatsby-wordpress-theme-phoenix/src/components/seo.js @@ -10,79 +10,117 @@ import PropTypes from "prop-types" import { Helmet } from "react-helmet" import { useStaticQuery, graphql } from "gatsby" -function SEO({ description, lang, meta, title, header: { siteTitle } }) { - const { site } = useStaticQuery( - graphql` - query { - site { - siteMetadata { - title - description - author - } - } - } - ` - ) +function SEO( { description, lang, meta, title, seo, uri } ) { - const metaDescription = description || site.siteMetadata.description; + const { site } = useStaticQuery( + graphql` + query { + site { + siteMetadata { + title + description + author + siteUrl + } + } + } + ` + ) - return ( - - ) + const metaDescription = description || site.siteMetadata.description; + const canonical = `${ site?.siteMetadata?.siteUrl }${ uri }`; + const ogUrl = `${ site.siteMetadata.siteUrl }${ uri }`; + + return ( + + ) } SEO.defaultProps = { - lang: `en`, - meta: [], - description: ``, + lang: `en`, + meta: [], + description: ``, + uri: '', + seo: {} } SEO.propTypes = { - description: PropTypes.string, - lang: PropTypes.string, - meta: PropTypes.arrayOf(PropTypes.object), - title: PropTypes.string.isRequired, + description: PropTypes.string, + lang: PropTypes.string, + meta: PropTypes.arrayOf( PropTypes.object ), + title: PropTypes.string.isRequired, + seo: PropTypes.object.isRequired, + uri: PropTypes.string.isRequired } export default SEO diff --git a/packages/gatsby-wordpress-theme-phoenix/src/templates/archive/index.js b/packages/gatsby-wordpress-theme-phoenix/src/templates/archive/index.js index f1351ae..46b093d 100644 --- a/packages/gatsby-wordpress-theme-phoenix/src/templates/archive/index.js +++ b/packages/gatsby-wordpress-theme-phoenix/src/templates/archive/index.js @@ -2,11 +2,13 @@ import React from 'react'; import Layout from "../../components/layout"; import Blog from '../../components/blog-list/blog'; +import SEO from "../../components/seo"; const ArchiveTemplate = ( { pageContext } ) => { return ( + ) diff --git a/packages/gatsby-wordpress-theme-phoenix/src/templates/blog-template.js b/packages/gatsby-wordpress-theme-phoenix/src/templates/blog-template.js index 7d62067..114af30 100644 --- a/packages/gatsby-wordpress-theme-phoenix/src/templates/blog-template.js +++ b/packages/gatsby-wordpress-theme-phoenix/src/templates/blog-template.js @@ -1,6 +1,7 @@ import React from 'react'; import { Link } from 'gatsby'; import Layout from "../components/layout"; +import SEO from "../components/seo"; const BlogTemplate = ( props ) => { @@ -8,6 +9,8 @@ const BlogTemplate = ( props ) => { return ( + {/* @TODO SEO to be added.*/} +

Blog

{ diff --git a/packages/gatsby-wordpress-theme-phoenix/src/templates/blog/index.js b/packages/gatsby-wordpress-theme-phoenix/src/templates/blog/index.js index 7905b17..ce55a2b 100644 --- a/packages/gatsby-wordpress-theme-phoenix/src/templates/blog/index.js +++ b/packages/gatsby-wordpress-theme-phoenix/src/templates/blog/index.js @@ -2,11 +2,13 @@ import React from 'react'; import Layout from "../../components/layout"; import Blog from '../../components/blog-list/blog'; +import SEO from "../../components/seo"; const BlogTemplate = ( { pageContext } ) => { - return ( + {/* @TODO seo to be added later. */} + ) diff --git a/packages/gatsby-wordpress-theme-phoenix/src/templates/front-page/index.js b/packages/gatsby-wordpress-theme-phoenix/src/templates/front-page/index.js index 269393a..548eec9 100644 --- a/packages/gatsby-wordpress-theme-phoenix/src/templates/front-page/index.js +++ b/packages/gatsby-wordpress-theme-phoenix/src/templates/front-page/index.js @@ -6,6 +6,7 @@ import FeaturedPosts from "../../components/home/feature-posts"; import LatestPosts from '../../components/home/latest-posts'; import Error from "../../components/error"; import { isEmpty } from 'lodash'; +import SEO from "../../components/seo"; const FrontPage = ( props ) => { @@ -17,12 +18,12 @@ const FrontPage = ( props ) => { } } = props; - return ( { ! isEmpty( props.pageContext ) ? ( <> + diff --git a/packages/gatsby-wordpress-theme-phoenix/src/templates/page/index.js b/packages/gatsby-wordpress-theme-phoenix/src/templates/page/index.js index 1666092..44d0113 100644 --- a/packages/gatsby-wordpress-theme-phoenix/src/templates/page/index.js +++ b/packages/gatsby-wordpress-theme-phoenix/src/templates/page/index.js @@ -1,11 +1,13 @@ import React from "react"; import Layout from "../../components/layout"; import Page from '../../components/page'; +import SEO from "../../components/seo"; const PageTemplate = ( props ) => { return ( + ) diff --git a/packages/gatsby-wordpress-theme-phoenix/src/templates/post/index.js b/packages/gatsby-wordpress-theme-phoenix/src/templates/post/index.js index d627c0d..e41ad01 100644 --- a/packages/gatsby-wordpress-theme-phoenix/src/templates/post/index.js +++ b/packages/gatsby-wordpress-theme-phoenix/src/templates/post/index.js @@ -2,6 +2,7 @@ import React from 'react'; import Layout from '../../components/layout'; import Single from '../../components/single'; +import SEO from "../../components/seo"; const Post = ( props ) => { @@ -9,6 +10,7 @@ const Post = ( props ) => { return ( + ) diff --git a/site/.env-example b/site/.env-example index 87aa4f4..b28a055 100644 --- a/site/.env-example +++ b/site/.env-example @@ -1 +1,2 @@ SITE_URL=xxxx +FRONTEND_URL=xxx diff --git a/site/gatsby-config.js b/site/gatsby-config.js index 2cf2ed2..cfe447b 100644 --- a/site/gatsby-config.js +++ b/site/gatsby-config.js @@ -6,7 +6,8 @@ module.exports = { { resolve: "gatsby-wordpress-theme-phoenix", options: { - wordPressUrl: `${ process.env.SITE_URL }` + wordPressUrl: `${ process.env.SITE_URL }`, + frontendUrl: `${ process.env.FRONTEND_URL }` } } ] }; diff --git a/wordpress/plugins/advanced-custom-fieldsddd.zip b/wordpress/plugins/advanced-custom-fields.zip similarity index 100% rename from wordpress/plugins/advanced-custom-fieldsddd.zip rename to wordpress/plugins/advanced-custom-fields.zip diff --git a/wordpress/plugins/wordpress-seo.zip b/wordpress/plugins/wordpress-seo.zip new file mode 100644 index 0000000..3893dee Binary files /dev/null and b/wordpress/plugins/wordpress-seo.zip differ diff --git a/wordpress/plugins/wp-graphql-yoast-seo.zip b/wordpress/plugins/wp-graphql-yoast-seo.zip new file mode 100644 index 0000000..fd3d9dc Binary files /dev/null and b/wordpress/plugins/wp-graphql-yoast-seo.zip differ