├── theme
    ├── index.js
    ├── src
    │   ├── gatsby-plugin-theme-ui
    │   │   ├── space.js
    │   │   ├── sharedStyles.js
    │   │   ├── sizes.js
    │   │   ├── components
    │   │   │   ├── index.js
    │   │   │   ├── gradients.js
    │   │   │   ├── cards.js
    │   │   │   ├── links.js
    │   │   │   ├── buttons.js
    │   │   │   ├── pagination.js
    │   │   │   └── menus.js
    │   │   ├── colors.js
    │   │   ├── index.js
    │   │   └── typo.js
    │   ├── components
    │   │   ├── Date.js
    │   │   ├── FooterContent.js
    │   │   ├── PostEntryMeta.js
    │   │   ├── SiteBranding.js
    │   │   ├── PostEntryInfo.js
    │   │   ├── Author.js
    │   │   ├── PostEntryContent.js
    │   │   ├── Footer.js
    │   │   ├── Layout.js
    │   │   ├── PostEntryTitle.js
    │   │   ├── PostEntryMedia.js
    │   │   ├── Tags.js
    │   │   ├── Categories.js
    │   │   ├── PostEntry.js
    │   │   ├── Pagination.js
    │   │   ├── Seo.js
    │   │   ├── Header.js
    │   │   └── Menu.js
    │   ├── utils
    │   │   └── index.js
    │   ├── pages
    │   │   └── 404.js
    │   ├── templates
    │   │   ├── posts
    │   │   │   ├── singlePost.js
    │   │   │   └── archivePosts.js
    │   │   ├── pages
    │   │   │   └── singlePage.js
    │   │   ├── categories
    │   │   │   └── singleCategory.js
    │   │   ├── tags
    │   │   │   └── singleTag.js
    │   │   └── users
    │   │   │   └── singleUser.js
    │   └── styles
    │   │   └── GlobalStyles.js
    ├── .prettierrc
    ├── gatsby-node.js
    ├── LICENSE
    ├── .gitignore
    ├── package.json
    ├── utils
    │   ├── createTags.js
    │   ├── createUsers.js
    │   ├── createCategories.js
    │   ├── createSitePages.js
    │   └── createPosts.js
    ├── gatsby-config.js
    └── README.md
├── netlify.toml
├── package.json
├── demo
    ├── static
    │   └── favicon.ico
    ├── config.js
    ├── .prettierrc
    ├── src
    │   └── @alexadark
    │   │   └── gatsby-theme-wordpress-blog
    │   │       ├── gatsby-plugin-theme-ui
    │   │           └── colors.js
    │   │       └── components
    │   │           └── FooterContent.js
    ├── package.json
    ├── gatsby-config.js
    ├── LICENSE
    ├── .gitignore
    └── README.md
├── .gitignore
└── README.md


/theme/index.js:
--------------------------------------------------------------------------------
1 | // boop
2 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   base = "demo"
3 |   command = "yarn build"
4 |   publish = "demo/public"
5 | 


--------------------------------------------------------------------------------
/theme/src/gatsby-plugin-theme-ui/space.js:
--------------------------------------------------------------------------------
1 | export const space = [0, 10, 20, 30, 40, 50, 60, 120, 240]
2 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "private": true,
3 |   "workspaces": [
4 |     "theme",
5 |     "demo"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/demo/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexadark/gatsby-wordpress-theme-blog/HEAD/demo/static/favicon.ico


--------------------------------------------------------------------------------
/theme/src/gatsby-plugin-theme-ui/sharedStyles.js:
--------------------------------------------------------------------------------
1 | export const transitions = ['all .2s ease-in-out', 'all .4s ease-in-out']
2 | 


--------------------------------------------------------------------------------
/demo/config.js:
--------------------------------------------------------------------------------
1 | const config = {
2 |   wordPressUrl: `http://alexandraspalato.com/gatsby/`,
3 | }
4 | 
5 | module.exports = config
6 | 


--------------------------------------------------------------------------------
/theme/src/gatsby-plugin-theme-ui/sizes.js:
--------------------------------------------------------------------------------
1 | export const sizes = {
2 |   s: 540,
3 |   m: 720,
4 |   l: 1024,
5 |   xl: 1200,
6 | }
7 | 


--------------------------------------------------------------------------------
/demo/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "endOfLine": "lf",
3 |   "semi": false,
4 |   "singleQuote": false,
5 |   "tabWidth": 2,
6 |   "trailingComma": "es5"
7 | }
8 | 


--------------------------------------------------------------------------------
/theme/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "endOfLine": "lf",
3 |   "semi": false,
4 |   "singleQuote": true,
5 |   "tabWidth": 2,
6 |   "trailingComma": "es5"
7 | }
8 | 


--------------------------------------------------------------------------------
/theme/src/components/Date.js:
--------------------------------------------------------------------------------
1 | import moment from "moment/moment"
2 | 
3 | const Date = ({ date }) => moment(date).format(`MMMM D, YYYY`)
4 | 
5 | export default Date
6 | 


--------------------------------------------------------------------------------
/theme/src/utils/index.js:
--------------------------------------------------------------------------------
1 | export const createLocalLink = (url, wordPressUrl) => {
2 |   if (`#` === url) {
3 |     return null
4 |   }
5 |   return url.replace(wordPressUrl, ``)
6 | }
7 | 


--------------------------------------------------------------------------------
/theme/src/gatsby-plugin-theme-ui/components/index.js:
--------------------------------------------------------------------------------
1 | export * from './buttons'
2 | export * from './links'
3 | export * from './menus'
4 | export * from './cards'
5 | export * from './pagination'
6 | export * from './gradients'
7 | 


--------------------------------------------------------------------------------
/demo/src/@alexadark/gatsby-theme-wordpress-blog/gatsby-plugin-theme-ui/colors.js:
--------------------------------------------------------------------------------
1 | import merge from "lodash.merge"
2 | import colors from "@alexadark/gatsby-theme-wordpress-blog/src/gatsby-plugin-theme-ui/colors"
3 | 
4 | export default merge({}, colors, {
5 |   // primary: "tomato",
6 | })
7 | 


--------------------------------------------------------------------------------
/theme/src/gatsby-plugin-theme-ui/components/gradients.js:
--------------------------------------------------------------------------------
 1 | export const gradients = {
 2 |   primary: {
 3 |     backgroundImage: t =>
 4 |       `linear-gradient(45deg, ${t.colors.primary}, ${t.colors.purple[7]})`,
 5 |   },
 6 |   secondary: {
 7 |     backgroundImage: t =>
 8 |       `linear-gradient(45deg, ${t.colors.secondary}, ${t.colors.purple[6]})`,
 9 |   },
10 | }
11 | 


--------------------------------------------------------------------------------
/theme/src/components/FooterContent.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const FooterContent = () => {
 4 |   return (
 5 |     <>
 6 |       © {new Date().getFullYear()} | Built with{` `}
 7 |       <a href="https://www.wpgraphql.com">WPGraphQL</a> and{` `}
 8 |       <a href="https://www.gatsbyjs.org">Gatsby</a>
 9 |     </>
10 |   )
11 | }
12 | 
13 | export default FooterContent
14 | 


--------------------------------------------------------------------------------
/theme/src/components/PostEntryMeta.js:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx } from "theme-ui"
 3 | import Categories from "./Categories"
 4 | import Tags from "./Tags"
 5 | 
 6 | const PostEntryMeta = ({ post }) => {
 7 |   return (
 8 |     <div className="entry-meta">
 9 |       <Categories post={post} />
10 |       <Tags post={post} />
11 |     </div>
12 |   )
13 | }
14 | 
15 | export default PostEntryMeta
16 | 


--------------------------------------------------------------------------------
/demo/src/@alexadark/gatsby-theme-wordpress-blog/components/FooterContent.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | 
 3 | const FooterContent = () => {
 4 |   return (
 5 |     <>
 6 |       © {new Date().getFullYear()} | Built with{` `}
 7 |       <a href="https://www.wpgraphql.com">WPGraphQL</a> and{` `}
 8 |       <a href="https://www.gatsbyjs.org">Gatsbyyyy</a>
 9 |     </>
10 |   )
11 | }
12 | 
13 | export default FooterContent
14 | 


--------------------------------------------------------------------------------
/theme/src/pages/404.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | 
 3 | import Layout from "../components/Layout"
 4 | import Seo from "../components/Seo"
 5 | 
 6 | const NotFoundPage = ({ location }) => (
 7 |   <Layout location={{ location }}>
 8 |     <Seo title="404: Not found" />
 9 |     <h1>NOT FOUND</h1>
10 |     <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
11 |   </Layout>
12 | )
13 | 
14 | export default NotFoundPage
15 | 


--------------------------------------------------------------------------------
/theme/src/components/SiteBranding.js:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx, Styled } from 'theme-ui'
 3 | import { Link } from 'gatsby'
 4 | 
 5 | const SiteBranding = ({ title }) => {
 6 |   return (
 7 |     <Styled.h1 sx={{ m: 0, textTransform: 'uppercase', fontSize: [3, 5] }}>
 8 |       <Styled.a as={Link} to="/" rel="home">
 9 |         {title}
10 |       </Styled.a>
11 |     </Styled.h1>
12 |   )
13 | }
14 | 
15 | export default SiteBranding
16 | 


--------------------------------------------------------------------------------
/theme/src/gatsby-plugin-theme-ui/colors.js:
--------------------------------------------------------------------------------
 1 | import { tailwind } from '@theme-ui/presets'
 2 | export default {
 3 |   ...tailwind.colors,
 4 |   primary: `tomato`,
 5 |   secondary: tailwind.colors.blue[9],
 6 |   background: tailwind.colors.light,
 7 |   textMuted: `#667488`,
 8 |   text: `#444`,
 9 |   grayDark: tailwind.colors.gray[9],
10 |   dark: tailwind.colors.gray[7],
11 |   muted: tailwind.colors.gray[5],
12 |   light: tailwind.colors.gray[3],
13 | }
14 | 


--------------------------------------------------------------------------------
/theme/src/components/PostEntryInfo.js:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx } from 'theme-ui'
 3 | import Date from './Date'
 4 | import Author from './Author'
 5 | 
 6 | const PostEntryInfo = ({ post }) => {
 7 |   return (
 8 |     <div className="entry-info" sx={{ fontSize: 1, mb: 2 }}>
 9 |       <span sx={{ color: `muted` }}>Posted on:</span> <Date post={post} /> by{' '}
10 |       <Author post={post} />
11 |     </div>
12 |   )
13 | }
14 | 
15 | export default PostEntryInfo
16 | 


--------------------------------------------------------------------------------
/theme/src/components/Author.js:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx, Styled } from 'theme-ui'
 3 | import { Link } from 'gatsby'
 4 | 
 5 | const Author = ({ post }) => {
 6 |   const { name, slug } = post.author
 7 |   return (
 8 |     <Styled.a
 9 |       as={Link}
10 |       sx={{
11 |         variant: `links.decorated`,
12 |       }}
13 |       aria-label={`visit ${name} page`}
14 |       to={`/author/${slug}`}
15 |     >
16 |       {name}
17 |     </Styled.a>
18 |   )
19 | }
20 | 
21 | export default Author
22 | 


--------------------------------------------------------------------------------
/theme/src/components/PostEntryContent.js:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx, Styled } from 'theme-ui'
 3 | 
 4 | const PostEntryContent = ({ post, location }) => {
 5 |   const content = location === 'single' ? post.content : post.excerpt
 6 |   return (
 7 |     <Styled.root
 8 |       sx={{
 9 |         a: {
10 |           variant: 'links.decorated',
11 |         },
12 |       }}
13 |       className="entry-content"
14 |       dangerouslySetInnerHTML={{ __html: content }}
15 |     />
16 |   )
17 | }
18 | 
19 | export default PostEntryContent
20 | 


--------------------------------------------------------------------------------
/theme/src/gatsby-plugin-theme-ui/components/cards.js:
--------------------------------------------------------------------------------
 1 | const sharedCardStyles = {
 2 |   boxShadow: `lg`,
 3 |   borderRadius: 10,
 4 |   fontFamily: `body`,
 5 |   '.entry-title': {
 6 |     mt: 0,
 7 |   },
 8 |   '.content': {
 9 |     p: [2, 5],
10 |   },
11 | }
12 | 
13 | export const cards = {
14 |   white: {
15 |     ...sharedCardStyles,
16 |     bg: `white`,
17 |   },
18 |   primary: {
19 |     ...sharedCardStyles,
20 |     bg: `primary`,
21 |   },
22 |   secondary: {
23 |     ...sharedCardStyles,
24 |     bg: `secondary`,
25 |   },
26 |   muted: {
27 |     ...sharedCardStyles,
28 |     bg: `muted`,
29 |   },
30 | }
31 | 


--------------------------------------------------------------------------------
/theme/src/gatsby-plugin-theme-ui/components/links.js:
--------------------------------------------------------------------------------
 1 | import { a } from '../typo'
 2 | 
 3 | export const links = {
 4 |   decorated: {
 5 |     ...a,
 6 |     color: `muted`,
 7 |     position: `relative`,
 8 | 
 9 |     ':before': {
10 |       content: `""`,
11 |       width: `50%`,
12 |       height: `50%`,
13 |       position: `absolute`,
14 |       left: `-5px`,
15 |       bottom: 0,
16 |       bg: `primary`,
17 |       opacity: 0.3,
18 |       transition: `all .4s ease-in-out`,
19 |     },
20 |     ':hover': {
21 |       color: `primary`,
22 |       ':before': {
23 |         width: `110%`,
24 |       },
25 |     },
26 |   },
27 | }
28 | 


--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "demo",
 4 |   "version": "0.1.0",
 5 |   "license": "MIT",
 6 |   "scripts": {
 7 |     "build": "gatsby build",
 8 |     "develop": "gatsby develop",
 9 |     "format": "prettier --write src/**/*.{js,jsx}",
10 |     "start": "npm run develop",
11 |     "serve": "gatsby serve",
12 |     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
13 |   },
14 |   "dependencies": {
15 |     "gatsby": "^2.13.1",
16 |     "@alexadark/gatsby-theme-wordpress-blog": "*",
17 |     "lodash.merge": "^4.6.2",
18 |     "react": "^16.8.6",
19 |     "react-dom": "^16.8.6"
20 |   },
21 |   "devDependencies": {
22 |     "prettier": "^1.18.2"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/theme/src/components/Footer.js:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { Container, Footer as StyledFooter, jsx } from 'theme-ui'
 3 | import FooterContent from './FooterContent'
 4 | 
 5 | const Footer = () => (
 6 |   <StyledFooter sx={{ bg: `secondary`, color: 'white' }}>
 7 |     <Container
 8 |       sx={{
 9 |         maxWidth: `l`,
10 |         textAlign: 'center',
11 |         fontSize: 1,
12 |         a: {
13 |           color: 'muted',
14 |           textDecoration: 'underline',
15 |           '&:hover': {
16 |             color: 'primary',
17 |           },
18 |         },
19 |       }}
20 |     >
21 |       <FooterContent />
22 |     </Container>
23 |   </StyledFooter>
24 | )
25 | 
26 | export default Footer
27 | 


--------------------------------------------------------------------------------
/theme/gatsby-node.js:
--------------------------------------------------------------------------------
 1 | const createPosts = require(`./utils/createPosts`)
 2 | const createSitePages = require(`./utils/createSitePages`)
 3 | const createCategories = require(`./utils/createCategories`)
 4 | const createTags = require(`./utils/createTags`)
 5 | const createUsers = require(`./utils/createUsers`)
 6 | 
 7 | exports.createPages = async ({ actions, graphql, reporter }, options) => {
 8 |   reporter.warn("make sure to load data from somewhere!")
 9 |   await createPosts({ actions, graphql }, options)
10 |   await createSitePages({ actions, graphql }, options)
11 |   await createCategories({ actions, graphql }, options)
12 |   await createTags({ actions, graphql }, options)
13 |   await createUsers({ actions, graphql }, options)
14 | }
15 | 


--------------------------------------------------------------------------------
/demo/gatsby-config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Configure your Gatsby site with this file.
 3 |  *
 4 |  * See: https://www.gatsbyjs.org/docs/gatsby-config/
 5 |  */
 6 | const config = require("./config")
 7 | 
 8 | module.exports = {
 9 |   siteMetadata: {
10 |     title: `Gatsby theme WordPress Starter Demo`,
11 |     description: `Gatsby starter site for Gatsby Theme Wordpress Theme.`,
12 |     author: `@alexadark`,
13 |     wordPressUrl: config.wordpressUrl,
14 |   },
15 |   plugins: [
16 |     {
17 |       resolve: `@alexadark/gatsby-theme-wordpress-blog`,
18 |       options: {
19 |         wordPressUrl: config.wordPressUrl,
20 |         postsPrefix: `posts`,
21 |         postsPath: ``,
22 |         paginationPrefix: `blog`,
23 |         postsPerPage: 8,
24 |       },
25 |     },
26 |   ],
27 | }
28 | 


--------------------------------------------------------------------------------
/theme/src/gatsby-plugin-theme-ui/components/buttons.js:
--------------------------------------------------------------------------------
 1 | const sharedButtonStyles = {
 2 |   border: `none`,
 3 |   color: `white`,
 4 |   cursor: `pointer`,
 5 |   fontFamily: `body`,
 6 |   fontWeight: `bold`,
 7 |   transition: `all 0.4s ease-in-out`,
 8 |   letterSpacing: 1,
 9 |   boxShadow: `md`,
10 |   '&:hover': {
11 |     transform: `translateY(-5px)`,
12 |     boxShadow: `hover`,
13 |   },
14 | }
15 | 
16 | export const buttons = {
17 |   primary: {
18 |     ...sharedButtonStyles,
19 |     borderRadius: 5,
20 |     variant: `gradients.primary`,
21 |     fontSize: 1,
22 |     px: 2,
23 |     py: 1,
24 |   },
25 |   secondary: {
26 |     ...sharedButtonStyles,
27 |     borderRadius: 5,
28 |     variant: `gradients.secondary`,
29 |     fontSize: 1,
30 |     px: 2,
31 |     py: 1,
32 |   },
33 | }
34 | 


--------------------------------------------------------------------------------
/theme/src/templates/posts/singlePost.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import { graphql } from "gatsby"
 3 | import PostEntry from "../../components/PostEntry"
 4 | import Layout from "../../components/Layout"
 5 | import SEO from "../../components/Seo"
 6 | 
 7 | const SinglePost = ({ data }) => {
 8 |   const { title, excerpt } = data.wpgraphql.post
 9 | 
10 |   return (
11 |     <Layout>
12 |       <SEO title={title} description={excerpt} />
13 |       <PostEntry post={data.wpgraphql.post} location="single" />
14 |     </Layout>
15 |   )
16 | }
17 | 
18 | export default SinglePost
19 | 
20 | export const pageQuery = graphql`
21 |   query GET_POST($id: ID!) {
22 |     wpgraphql {
23 |       post(id: $id) {
24 |         content
25 |         ...PostTemplateFragment
26 |       }
27 |     }
28 |   }
29 | `
30 | 


--------------------------------------------------------------------------------
/theme/src/components/Layout.js:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx } from 'theme-ui'
 3 | import React from 'react'
 4 | import { Global } from '@emotion/core'
 5 | import { GlobalStyles } from '../styles/GlobalStyles'
 6 | 
 7 | import Header from './Header.js'
 8 | import Footer from './Footer.js'
 9 | 
10 | import { Layout as StyledLayout, Container } from 'theme-ui'
11 | 
12 | const Layout = ({ children }) => (
13 |   <>
14 |     <Global styles={GlobalStyles} />
15 | 
16 |     <StyledLayout
17 |       sx={{
18 |         bg: `background`,
19 |         display: `flex`,
20 |         flexDirection: `columns`,
21 |         minHeight: `100vh`,
22 |         justifyContent: `space-between`,
23 |       }}
24 |     >
25 |       <Header sx={{ width: `100%`, flex: `1 1 auto` }} />
26 |       <Container sx={{ maxWidth: `l` }}>{children}</Container>
27 |       <Footer sx={{ width: `100%` }} />
28 |     </StyledLayout>
29 |   </>
30 | )
31 | 
32 | export default Layout
33 | 


--------------------------------------------------------------------------------
/theme/src/components/PostEntryTitle.js:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx, Styled } from 'theme-ui'
 3 | import React from 'react'
 4 | import { Link } from 'gatsby'
 5 | 
 6 | const PostEntryTitle = ({ post, location, postsPrefix }) => {
 7 |   const { title, uri } = post
 8 | 
 9 |   return (
10 |     <>
11 |       {location === 'single' ? (
12 |         <Styled.h1
13 |           sx={{ textTransform: `uppercase`, fontSize: [3, 4, 5] }}
14 |           className="entry-title"
15 |           dangerouslySetInnerHTML={{ __html: title }}
16 |         />
17 |       ) : (
18 |         <Styled.h1
19 |           as="h2"
20 |           className="entry-title"
21 |           sx={{ textTransform: `uppercase`, fontSize: [3, 4, 5] }}
22 |         >
23 |           <Styled.a
24 |             as={Link}
25 |             to={`${postsPrefix}/${uri}`}
26 |             dangerouslySetInnerHTML={{ __html: title }}
27 |           />
28 |         </Styled.h1>
29 |       )}
30 |     </>
31 |   )
32 | }
33 | 
34 | export default PostEntryTitle
35 | 


--------------------------------------------------------------------------------
/theme/src/gatsby-plugin-theme-ui/components/pagination.js:
--------------------------------------------------------------------------------
 1 | export const pagination = {
 2 |   display: `flex`,
 3 |   justifyContent: `space-between`,
 4 |   alignItems: `center`,
 5 |   fontSize: 1,
 6 |   pr: 5,
 7 |   mb: 4,
 8 |   '.mutted': {
 9 |     color: `muted`,
10 |   },
11 | }
12 | 
13 | export const pageNumbers = {
14 |   ul: {
15 |     display: `flex`,
16 |     jusifyContent: `center`,
17 |   },
18 |   a: {
19 |     py: `5px`,
20 |     px: 1,
21 |     variant: `gradients.secondary`,
22 |     borderRadius: `100%`,
23 |     border: `none`,
24 |     mr: `5px`,
25 |     color: `white`,
26 |     transition: `all .4s ease-in-out`,
27 |     '&:hover, &[aria-current="page"]': {
28 |       variant: `gradients.primary`,
29 |     },
30 |   },
31 | }
32 | 
33 | export const paginationLinks = {
34 |   textTransform: `uppercase`,
35 |   fontSize: `12px`,
36 |   letterSpacing: 1,
37 | 
38 |   a: {
39 |     pb: `5px`,
40 |     color: `text`,
41 |     '&:hover': {
42 |       color: `primary`,
43 |     },
44 |   },
45 | }
46 | 


--------------------------------------------------------------------------------
/theme/src/components/PostEntryMedia.js:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx } from 'theme-ui'
 3 | import React from 'react'
 4 | import { Link } from 'gatsby'
 5 | 
 6 | const WithLink = ({ post, location, children, postsPrefix }) =>
 7 |   location === 'single' ? (
 8 |     children
 9 |   ) : (
10 |     <Link to={`/${postsPrefix}/${post.uri}`} aria-label="View the entire post">
11 |       {children}
12 |     </Link>
13 |   )
14 | 
15 | const PostEntryMedia = ({ post, location, postsPrefix }) => {
16 |   const img = post.featuredImage
17 | 
18 |   return (
19 |     <>
20 |       {img && (
21 |         <WithLink location={location} post={post} postsPrefix={postsPrefix}>
22 |           <div
23 |             className="entry-media"
24 |             sx={{
25 |               background: `url(${img.sourceUrl}) 50% 50% / cover`,
26 |               height: [200, 300, 500],
27 |               borderRadius: `10px 10px 0 0`,
28 |             }}
29 |           />
30 |         </WithLink>
31 |       )}
32 |     </>
33 |   )
34 | }
35 | 
36 | export default PostEntryMedia
37 | 


--------------------------------------------------------------------------------
/theme/src/components/Tags.js:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx } from 'theme-ui'
 3 | import { Link } from 'gatsby'
 4 | 
 5 | const Tags = ({ post }) => {
 6 |   const tags = post.tags.nodes
 7 |   return (
 8 |     <div>
 9 |       {tags.length > 0 && (
10 |         <span
11 |           sx={{
12 |             color: 'muted',
13 |             fontSize: 1,
14 |             fontFamily: `heading`,
15 |             letterSpacing: 1,
16 |             mr: 1,
17 |           }}
18 |         >
19 |           {tags.length > 1 ? 'Tags: ' : 'Tag: '}
20 |         </span>
21 |       )}
22 |       {tags.map(tag => (
23 |         <button
24 |           small
25 |           secondary
26 |           sx={{ variant: `buttons.primary`, mr: 1, mb: 2 }}
27 |         >
28 |           <Link
29 |             aria-label={`visit tag ${tag.name} page`}
30 |             sx={{ color: '#fff' }}
31 |             to={`/tag/${tag.slug}`}
32 |             key={tag.id}
33 |           >
34 |             {tag.name}
35 |           </Link>
36 |         </button>
37 |       ))}
38 |     </div>
39 |   )
40 | }
41 | 
42 | export default Tags
43 | 


--------------------------------------------------------------------------------
/theme/src/components/Categories.js:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx, Styled } from 'theme-ui'
 3 | import { Link } from 'gatsby'
 4 | 
 5 | const Categories = ({ post }) => {
 6 |   const categories = post.categories.nodes
 7 |   return (
 8 |     <div sx={{ mb: 2 }}>
 9 |       {categories.length > 0 && (
10 |         <span
11 |           sx={{
12 |             color: 'muted',
13 |             fontSize: 1,
14 |             fontFamily: `heading`,
15 |             letterSpacing: 1,
16 |             mr: 1,
17 |           }}
18 |         >
19 |           {categories.length > 1 ? 'Categories: ' : 'Category: '}
20 |         </span>
21 |       )}
22 |       {categories.map(cat => (
23 |         <button sx={{ variant: `buttons.primary`, mr: 1, mb: 2 }}>
24 |           <Link
25 |             sx={{ color: '#fff' }}
26 |             to={`/category/${cat.slug}`}
27 |             key={cat.id}
28 |             aria-label={`visit category ${cat.name} page`}
29 |           >
30 |             {cat.name}
31 |           </Link>
32 |         </button>
33 |       ))}
34 |     </div>
35 |   )
36 | }
37 | 
38 | export default Categories
39 | 


--------------------------------------------------------------------------------
/theme/src/templates/pages/singlePage.js:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx, Styled } from 'theme-ui'
 3 | import { graphql } from 'gatsby'
 4 | import Layout from '../../components/Layout'
 5 | import SEO from '../../components/Seo'
 6 | 
 7 | const Page = ({ data }) => {
 8 |   const { title, content, excerpt } = data.wpgraphql.page
 9 |   return (
10 |     <Layout>
11 |       <SEO title={title} description={excerpt} />
12 |       <div sx={{ variant: `cards.white` }}>
13 |         <div className="content">
14 |           <Styled.h1
15 |             sx={{ textAlign: 'center', textTransform: 'uppercase' }}
16 |             className="page-title"
17 |             dangerouslySetInnerHTML={{ __html: title }}
18 |           />
19 |           <Styled.root dangerouslySetInnerHTML={{ __html: content }} />
20 |         </div>
21 |       </div>
22 |     </Layout>
23 |   )
24 | }
25 | 
26 | export default Page
27 | 
28 | export const pageQuery = graphql`
29 |   query GET_PAGE($id: ID!) {
30 |     wpgraphql {
31 |       page(id: $id) {
32 |         title
33 |         content
34 |         excerpt
35 |         uri
36 |       }
37 |     }
38 |   }
39 | `
40 | 


--------------------------------------------------------------------------------
/demo/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Gatsby
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/theme/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Gatsby
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/demo/.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 | 


--------------------------------------------------------------------------------
/theme/.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 | 


--------------------------------------------------------------------------------
/.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 | 
71 | .netlify/
72 | 


--------------------------------------------------------------------------------
/theme/src/gatsby-plugin-theme-ui/index.js:
--------------------------------------------------------------------------------
 1 | import { tailwind } from '@theme-ui/presets'
 2 | 
 3 | import colors from './colors'
 4 | import { fonts, fontSizes, fontWeights, lineHeights, base } from './typo'
 5 | import { space } from './space'
 6 | import { sizes } from './sizes'
 7 | import {
 8 |   buttons,
 9 |   links,
10 |   menus,
11 |   cards,
12 |   pagination,
13 |   paginationLinks,
14 |   pageNumbers,
15 |   gradients,
16 | } from './components'
17 | 
18 | export default {
19 |   ...tailwind,
20 |   colors,
21 |   fonts,
22 |   fontSizes,
23 |   fontWeights,
24 |   lineHeights,
25 |   space,
26 |   sizes,
27 |   shadows: {
28 |     ...tailwind.shadows,
29 |     default: `0px 1px 10px rgba(0,0,0,0.05)`,
30 |     hover: `0px 10px 20px rgba(0,0,0,0.25)`,
31 |   },
32 | 
33 |   breakpoints: [`600px`, `900px`, `1200px`],
34 |   radii: {
35 |     ...tailwind.radii,
36 |     xl: `1rem`,
37 |   },
38 |   styles: {
39 |     ...tailwind.styles,
40 |     ...base,
41 |     root: base,
42 |     Footer: {
43 |       textAlign: `center`,
44 |       display: `block`,
45 |       color: `textMuted`,
46 |       p: 0,
47 |     },
48 |     Container: {
49 |       maxWidth: `1200px`,
50 |     },
51 |   },
52 | 
53 |   links,
54 |   buttons,
55 |   menus,
56 |   cards,
57 |   pagination,
58 |   paginationLinks,
59 |   pageNumbers,
60 |   gradients,
61 | }
62 | 


--------------------------------------------------------------------------------
/theme/src/templates/categories/singleCategory.js:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx, Styled } from 'theme-ui'
 3 | 
 4 | import { graphql } from 'gatsby'
 5 | import PostEntry from '../../components/PostEntry'
 6 | import Layout from '../../components/Layout'
 7 | import SEO from '../../components/Seo'
 8 | 
 9 | const Category = ({ data, pageContext }) => {
10 |   const { name, posts } = data.wpgraphql.category
11 |   const { postsPrefix } = pageContext.options
12 | 
13 |   return (
14 |     <Layout>
15 |       <SEO title={name} description={`Posts for ${name} category`} />
16 |       <Styled.h2
17 |         as="h1"
18 |         sx={{
19 |           textAlign: 'center',
20 |           mb: 4,
21 |           textTransform: 'uppercase',
22 |         }}
23 |       >
24 |         {name} Category
25 |       </Styled.h2>
26 |       {posts.nodes &&
27 |         posts.nodes.map(post => (
28 |           <PostEntry
29 |             key={post.id}
30 |             location="archive"
31 |             post={post}
32 |             postsPrefix={postsPrefix}
33 |           />
34 |         ))}
35 |     </Layout>
36 |   )
37 | }
38 | 
39 | export default Category
40 | 
41 | export const pageQuery = graphql`
42 |   query GET_CATEGORY($id: ID!) {
43 |     wpgraphql {
44 |       category(id: $id) {
45 |         name
46 |         slug
47 |         posts(first: 100) {
48 |           nodes {
49 |             ...PostTemplateFragment
50 |           }
51 |         }
52 |       }
53 |     }
54 |   }
55 | `
56 | 


--------------------------------------------------------------------------------
/theme/src/templates/tags/singleTag.js:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx, Styled } from 'theme-ui'
 3 | 
 4 | import { graphql } from 'gatsby'
 5 | import PostEntry from '../../components/PostEntry'
 6 | import Layout from '../../components/Layout'
 7 | import SEO from '../../components/Seo'
 8 | 
 9 | const Tag = ({ data, pageContext }) => {
10 |   const { name, posts } = data.wpgraphql.tag
11 |   const { postsPrefix } = pageContext.options
12 | 
13 |   return (
14 |     <Layout>
15 |       <SEO title={name} description={`Posts for ${name} tag`} />
16 |       <Styled.h2
17 |         as="h1"
18 |         sx={{
19 |           textAlign: 'center',
20 |           mb: 4,
21 |           textTransform: 'uppercase',
22 |           fontSize: 5,
23 |         }}
24 |       >
25 |         Tag {name}
26 |       </Styled.h2>
27 |       {posts.nodes &&
28 |         posts.nodes.map(post => (
29 |           <PostEntry
30 |             key={post.id}
31 |             location="archive"
32 |             post={post}
33 |             postsPrefix={postsPrefix}
34 |           />
35 |         ))}
36 |     </Layout>
37 |   )
38 | }
39 | 
40 | export default Tag
41 | 
42 | export const pageQuery = graphql`
43 |   query GET_TAG($id: ID!) {
44 |     wpgraphql {
45 |       tag(id: $id) {
46 |         name
47 |         slug
48 |         id
49 |         posts(first: 100) {
50 |           nodes {
51 |             ...PostTemplateFragment
52 |           }
53 |         }
54 |       }
55 |     }
56 |   }
57 | `
58 | 


--------------------------------------------------------------------------------
/theme/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@alexadark/gatsby-theme-wordpress-blog",
 3 |   "description": "WordPress source theme for Gastby using WPGraphQL",
 4 |   "author": "Alexandra Spalato <alexaspalato@gmail.com>",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "https://github.com/alexadark/gatsby-theme-jam"
 8 |   },
 9 |   "version": "2.0.0",
10 |   "main": "index.js",
11 |   "license": "MIT",
12 |   "peerDependencies": {
13 |     "gatsby": "^2.13.1",
14 |     "react": "^16.8.6",
15 |     "react-dom": "^16.8.6"
16 |   },
17 |   "devDependencies": {
18 |     "gatsby": "^2.13.1",
19 |     "react": "^16.8.6",
20 |     "react-dom": "^16.8.6"
21 |   },
22 |   "dependencies": {
23 |     "@emotion/core": "^10.0.14",
24 |     "@emotion/styled": "^10.0.14",
25 |     "@mdx-js/react": "^1.0.21",
26 |     "@theme-ui/presets": "^0.2.25",
27 |     "emotion": "^10.0.14",
28 |     "gatsby-image": "^2.2.8",
29 |     "gatsby-plugin-google-fonts": "^1.0.1",
30 |     "gatsby-plugin-react-helmet": "^3.1.2",
31 |     "gatsby-plugin-sharp": "^2.2.9",
32 |     "gatsby-plugin-theme-ui": "^0.2.2",
33 |     "gatsby-source-graphql": "^2.1.3",
34 |     "gatsby-transformer-sharp": "^2.2.5",
35 |     "moment": "^2.24.0",
36 |     "react-burger-menu": "^2.6.11",
37 |     "react-headroom": "^2.2.8",
38 |     "react-helmet": "^5.2.1",
39 |     "theme-ui": "^0.2.2"
40 |   },
41 |   "keywords": [
42 |     "gatsby",
43 |     "gatsby-theme",
44 |     "gatsby-plugin",
45 |     "wordpress",
46 |     "wpgraphql"
47 |   ]
48 | }
49 | 


--------------------------------------------------------------------------------
/theme/utils/createTags.js:
--------------------------------------------------------------------------------
 1 | const tagTemplate = require.resolve(`../src/templates/tags/singleTag.js`)
 2 | 
 3 | module.exports = async ({ actions, graphql }, options) => {
 4 |   const GET_TAGS = `
 5 |       query GET_TAGS($first: Int) {
 6 |         wpgraphql {
 7 |           tags(first: $first) {
 8 |             pageInfo {
 9 |               hasNextPage
10 |               endCursor
11 |             }
12 |             nodes {
13 |               id
14 |              slug
15 |             }
16 |           }
17 |         }
18 |       }
19 |     `
20 |   const { createPage } = actions
21 |   const allTags = []
22 |   const fetchTags = async variables =>
23 |     await graphql(GET_TAGS, variables).then(({ data }) => {
24 |       const {
25 |         wpgraphql: {
26 |           tags: {
27 |             nodes,
28 |             pageInfo: { hasNextPage, endCursor },
29 |           },
30 |         },
31 |       } = data
32 | 
33 |       nodes.map(tag => {
34 |         allTags.push(tag)
35 |       })
36 |       if (hasNextPage) {
37 |         return fetchTags({ first: 100, after: endCursor })
38 |       }
39 |       return allTags
40 |     })
41 | 
42 |   await fetchTags({ first: 100, after: null }).then(allTags => {
43 |     allTags.map(tag => {
44 |       console.log(`create tag: ${tag.slug}`)
45 | 
46 |       createPage({
47 |         path: `/tag/${tag.slug}`,
48 |         component: tagTemplate,
49 |         context: {
50 |           id: tag.id,
51 |           options,
52 |         },
53 |       })
54 |     })
55 |   })
56 | }
57 | 


--------------------------------------------------------------------------------
/theme/utils/createUsers.js:
--------------------------------------------------------------------------------
 1 | const userTemplate = require.resolve(`../src/templates/users/singleUser.js`)
 2 | 
 3 | module.exports = async ({ actions, graphql }, options) => {
 4 |   const GET_USERS = `
 5 |       query GET_USERS($first: Int) {
 6 |         wpgraphql {
 7 |           users(first: $first) {
 8 |             pageInfo {
 9 |               hasNextPage
10 |               endCursor
11 |             }
12 |             nodes {
13 |               id
14 |              slug
15 |             }
16 |           }
17 |         }
18 |       }
19 |     `
20 |   const { createPage } = actions
21 |   const allUsers = []
22 |   const fetchUsers = async variables =>
23 |     await graphql(GET_USERS, variables).then(({ data }) => {
24 |       const {
25 |         wpgraphql: {
26 |           users: {
27 |             nodes,
28 |             pageInfo: { hasNextPage, endCursor },
29 |           },
30 |         },
31 |       } = data
32 | 
33 |       nodes.map(tag => {
34 |         allUsers.push(tag)
35 |       })
36 |       if (hasNextPage) {
37 |         return fetchUsers({ first: 100, after: endCursor })
38 |       }
39 |       return allUsers
40 |     })
41 | 
42 |   await fetchUsers({ first: 100, after: null }).then(allUsers => {
43 |     allUsers.map(tag => {
44 |       console.log(`create tag: ${tag.slug}`)
45 | 
46 |       createPage({
47 |         path: `/author/${tag.slug}`,
48 |         component: userTemplate,
49 |         context: {
50 |           id: tag.id,
51 |           options,
52 |         },
53 |       })
54 |     })
55 |   })
56 | }
57 | 


--------------------------------------------------------------------------------
/theme/src/components/PostEntry.js:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx } from 'theme-ui'
 3 | import { Link } from 'gatsby'
 4 | import PostEntryTitle from './PostEntryTitle'
 5 | import PostEntryMedia from './PostEntryMedia'
 6 | import PostEntryContent from './PostEntryContent'
 7 | import PostEntryMeta from './PostEntryMeta'
 8 | import PostEntryInfo from './PostEntryInfo'
 9 | 
10 | const PostEntry = ({ post, location, postsPrefix }) => {
11 |   return (
12 |     <article sx={{ variant: `cards.white`, mb: 5 }}>
13 |       <PostEntryMedia
14 |         location={location}
15 |         post={post}
16 |         postsPrefix={postsPrefix}
17 |       />
18 |       <div className="content">
19 |         <PostEntryTitle
20 |           location={location}
21 |           post={post}
22 |           postsPrefix={postsPrefix}
23 |         />
24 |         <PostEntryInfo className="entry-info" post={post} />
25 |         <PostEntryContent location={location} post={post} />
26 |         <div className="entry-footer">
27 |           <PostEntryMeta post={post} />
28 |           {location !== 'single' && (
29 |             <Link
30 |               sx={{
31 |                 variant: `buttons.secondary`,
32 |                 py: `15px`,
33 |                 display: `inline-block`,
34 |               }}
35 |               to={`${postsPrefix}/${post.uri}`}
36 |               aria-label="Read More from this post"
37 |             >
38 |               Read More
39 |             </Link>
40 |           )}
41 |         </div>
42 |       </div>
43 |     </article>
44 |   )
45 | }
46 | 
47 | export default PostEntry
48 | 


--------------------------------------------------------------------------------
/theme/gatsby-config.js:
--------------------------------------------------------------------------------
 1 | module.exports = options => {
 2 |   const {
 3 |     wordPressUrl = `http://alexandraspalato.com/gatsby/`,
 4 |     postsPath = `blog`,
 5 |     paginationPrefix = `/page`,
 6 |     postsPrefix = ``,
 7 |     postsPerPage = 10,
 8 |   } = options
 9 | 
10 |   return {
11 |     siteMetadata: {
12 |       title: `Gatsby theme WordPress Source Demo`,
13 |       author: `@alexadark`,
14 |       description: `Demo of a WordPress source theme for GatsbyJS. Uses WPGraphQL (GraphQL for WordPress).`,
15 |       social: [
16 |         {
17 |           name: `twitter`,
18 |           url: `https://twitter.com/alexadark`,
19 |         },
20 |         {
21 |           name: `github`,
22 |           url: `https://github.com/alexadark`,
23 |         },
24 |       ],
25 |     },
26 |     plugins: [
27 |       `gatsby-plugin-theme-ui`,
28 |       {
29 |         resolve: `gatsby-source-graphql`,
30 |         options: {
31 |           // This type will contain remote schema Query type
32 |           typeName: `WPGraphQL`,
33 |           // This is field under which it's accessible
34 |           fieldName: `wpgraphql`,
35 |           // Url to query from
36 |           url: `${wordPressUrl}/graphql`,
37 |         },
38 |       },
39 |       {
40 |         resolve: `gatsby-plugin-google-fonts`,
41 |         options: {
42 |           fonts: [`Inconsolata\:400, 700`, `Oswald\:200,300,400,500,600,700`],
43 |           display: 'swap',
44 |         },
45 |       },
46 | 
47 |       `gatsby-plugin-react-helmet`,
48 |       `gatsby-transformer-sharp`,
49 |       `gatsby-plugin-sharp`,
50 |     ],
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/theme/utils/createCategories.js:
--------------------------------------------------------------------------------
 1 | const categoryTemplate = require.resolve(
 2 |   `../src/templates/categories/singleCategory.js`
 3 | )
 4 | 
 5 | module.exports = async ({ actions, graphql }, options) => {
 6 |   const GET_CATEGORIES = `
 7 |       query GET_CATEGORIES($first: Int) {
 8 |         wpgraphql {
 9 |           categories(first: $first) {
10 |             pageInfo {
11 |               hasNextPage
12 |               endCursor
13 |             }
14 |             nodes {
15 |               id
16 |              slug
17 |             }
18 |           }
19 |         }
20 |       }
21 |     `
22 |   const { createPage } = actions
23 |   const allCategories = []
24 |   const fetchCategories = async variables =>
25 |     await graphql(GET_CATEGORIES, variables).then(({ data }) => {
26 |       const {
27 |         wpgraphql: {
28 |           categories: {
29 |             nodes,
30 |             pageInfo: { hasNextPage, endCursor },
31 |           },
32 |         },
33 |       } = data
34 |       nodes.map(category => {
35 |         allCategories.push(category)
36 |       })
37 |       if (hasNextPage) {
38 |         return fetchCategories({ first: 100, after: endCursor })
39 |       }
40 |       return allCategories
41 |     })
42 | 
43 |   await fetchCategories({ first: 100, after: null }).then(allCategories => {
44 |     allCategories.map(category => {
45 |       console.log(`create category: ${category.slug}`)
46 | 
47 |       createPage({
48 |         path: `/category/${category.slug}`,
49 |         component: categoryTemplate,
50 |         context: {
51 |           id: category.id,
52 |           options,
53 |         },
54 |       })
55 |     })
56 |   })
57 | }
58 | 


--------------------------------------------------------------------------------
/theme/src/gatsby-plugin-theme-ui/components/menus.js:
--------------------------------------------------------------------------------
 1 | import { transitions } from '../sharedStyles'
 2 | import { theme } from 'theme-ui'
 3 | 
 4 | export const menus = {
 5 |   main: {
 6 |     nav: {
 7 |       '>ul': {
 8 |         display: `flex`,
 9 |         justifyContent: `space-between`,
10 |         p: 0,
11 |         '> .menu-item': {
12 |           pl: 3,
13 |           fontSize: 1,
14 |         },
15 |       },
16 | 
17 |       '.menu-item, a': {
18 |         color: 'text',
19 |         cursor: 'pointer',
20 |         fontFamily: 'heading',
21 |         textTransform: 'uppercase',
22 |         transition: transitions[1],
23 |         '&:hover': {
24 |           color: 'primary',
25 |         },
26 |       },
27 |       '.sub-menu': {
28 |         opacity: 0,
29 |         visibility: `hidden`,
30 |         transform: `translateY(5px)`,
31 |         transition: transitions[1],
32 |         position: `absolute`,
33 |         left: 0,
34 |         top: `45px`,
35 |         p: 0,
36 |         bg: `white`,
37 |         border: t => `1px solid ${t.colors.muted}`,
38 |         '>.menu-item': {
39 |           width: `auto`,
40 |           borderBottom: t => `1px solid ${t.colors.muted}`,
41 |           py: `5px`,
42 |           px: `10px`,
43 |           width: `180px`,
44 |           fontSize: 1,
45 |           textTransform: `capitalize`,
46 | 
47 |           '&:last-child': {
48 |             border: `none`,
49 |           },
50 |         },
51 |       },
52 |       '.has-subMenu.menu-item': {
53 |         position: `relative`,
54 |         '&:hover': {
55 |           '>.sub-menu': {
56 |             opacity: 1,
57 |             visibility: `visible`,
58 |             transform: `translateY(0)`,
59 |           },
60 |         },
61 |       },
62 |     },
63 |   },
64 | }
65 | 


--------------------------------------------------------------------------------
/theme/src/templates/users/singleUser.js:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx, Styled } from 'theme-ui'
 3 | 
 4 | import { graphql } from 'gatsby'
 5 | import { Flex } from 'theme-ui'
 6 | import PostEntry from '../../components/PostEntry'
 7 | import Layout from '../../components/Layout'
 8 | import SEO from '../../components/Seo'
 9 | 
10 | const User = ({ data, pageContext }) => {
11 |   const { name, posts, avatar } = data.wpgraphql.user
12 |   const { postsPrefix } = pageContext.options
13 | 
14 |   return (
15 |     <Layout>
16 |       <SEO title={name} description={`Posts from ${name}`} />
17 |       <Flex sx={{ flexWrap: 'wrap', justifyContent: 'center', mb: 2 }}>
18 |         <img
19 |           sx={{
20 |             width: '50px',
21 |             height: '50px',
22 |             borderRadius: '100%',
23 |             mt: 2,
24 |             mr: 2,
25 |           }}
26 |           src={avatar.url}
27 |           alt={`avatar for ${name}`}
28 |         />
29 | 
30 |         <Styled.h2 as="h1" sx={{ textTransform: 'uppercase' }}>
31 |           {name}
32 |         </Styled.h2>
33 |       </Flex>
34 | 
35 |       {posts.nodes &&
36 |         posts.nodes.map(post => (
37 |           <PostEntry
38 |             key={post.id}
39 |             location="archive"
40 |             post={post}
41 |             postsPrefix={postsPrefix}
42 |           />
43 |         ))}
44 |     </Layout>
45 |   )
46 | }
47 | 
48 | export default User
49 | 
50 | export const pageQuery = graphql`
51 |   query GET_USER($id: ID!) {
52 |     wpgraphql {
53 |       user(id: $id) {
54 |         name
55 |         slug
56 |         id
57 |         description
58 |         avatar {
59 |           url
60 |         }
61 |         posts(first: 100) {
62 |           nodes {
63 |             ...PostTemplateFragment
64 |           }
65 |         }
66 |       }
67 |     }
68 |   }
69 | `
70 | 


--------------------------------------------------------------------------------
/theme/src/components/Pagination.js:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx } from 'theme-ui'
 3 | import { Link } from 'gatsby'
 4 | 
 5 | const Pagination = ({
 6 |   pageNumber,
 7 |   hasNextPage,
 8 |   allPosts,
 9 |   itemsPerPage,
10 |   postsPath,
11 |   paginationPrefix,
12 | }) => {
13 |   const isLast = pageNumber === allPosts / itemsPerPage
14 |   return (
15 |     <div sx={{ variant: `pagination` }}>
16 |       {pageNumber > 1 && (
17 |         <div sx={{ variant: `paginationLinks` }}>
18 |           {pageNumber !== 1 ? (
19 |             <Link
20 |               to={
21 |                 pageNumber > 2
22 |                   ? `${postsPath}${paginationPrefix}/${pageNumber - 1}`
23 |                   : `/`
24 |               }
25 |             >
26 |               ← Prev
27 |             </Link>
28 |           ) : (
29 |             <>
30 |               <div sx={{ color: 'muted' }}> ← Prev</div>
31 |             </>
32 |           )}
33 |         </div>
34 |       )}
35 |       <div sx={{ variant: `pageNumbers` }}>
36 |         <nav role="navigation" aria-label="Pagination Navigation">
37 |           <ul>
38 |             {Array.from({ length: allPosts.length / itemsPerPage }, (_, i) => (
39 |               <li>
40 |                 <Link
41 |                   key={`pagination-number${i + 1}`}
42 |                   to={
43 |                     i === 0
44 |                       ? `${postsPath}/`
45 |                       : `${postsPath}/${paginationPrefix}/${i + 1}`
46 |                   }
47 |                 >
48 |                   {i + 1}
49 |                 </Link>
50 |               </li>
51 |             ))}
52 |           </ul>
53 |         </nav>
54 |       </div>
55 |       {hasNextPage && (
56 |         <div sx={{ variant: `paginationLinks` }}>
57 |           {!isLast ? (
58 |             <Link to={`${postsPath}/${paginationPrefix}/${pageNumber + 1}`}>
59 |               Next →
60 |             </Link>
61 |           ) : (
62 |             <div sx={{ color: 'muted' }}> Next →</div>
63 |           )}
64 |         </div>
65 |       )}
66 |     </div>
67 |   )
68 | }
69 | 
70 | export default Pagination
71 | 


--------------------------------------------------------------------------------
/theme/src/gatsby-plugin-theme-ui/typo.js:
--------------------------------------------------------------------------------
  1 | import { tailwind } from '@theme-ui/presets'
  2 | 
  3 | export const fonts = {
  4 |   body: 'Inconsolata, monospace',
  5 |   heading: 'Oswald, sans-serif',
  6 | }
  7 | const transition = {
  8 |   transition: 'all .4s ease-in-out',
  9 | }
 10 | 
 11 | export const fontWeights = {
 12 |   body: 400,
 13 |   heading: 300,
 14 |   bold: 700,
 15 | }
 16 | 
 17 | export const fontSizes = [
 18 |   '1.2rem',
 19 |   '1.6rem',
 20 |   '1.8rem',
 21 |   '2.4rem',
 22 |   '3rem',
 23 |   '3.6rem',
 24 |   '4.8rem',
 25 |   '6.4rem',
 26 |   '7.2rem',
 27 | ]
 28 | 
 29 | export const baseLineHeights = {
 30 |   none: '1',
 31 |   tight: '1.25',
 32 |   relaxed: '1.625',
 33 |   loose: '2',
 34 | }
 35 | 
 36 | export const lineHeights = {
 37 |   ...baseLineHeights,
 38 |   body: baseLineHeights.relaxed,
 39 |   heading: baseLineHeights.tight,
 40 | }
 41 | 
 42 | const heading = {
 43 |   fontFamily: 'heading',
 44 |   lineHeight: 'heading',
 45 |   fontWeight: 'heading',
 46 |   color: 'text',
 47 |   letterSpacing: 1,
 48 |   a: {
 49 |     borderBottom: 'none',
 50 |   },
 51 | }
 52 | 
 53 | export const a = {
 54 |   ...transition,
 55 |   color: 'text',
 56 |   textDecoration: 'none',
 57 |   '&:hover': {
 58 |     color: 'primary',
 59 |   },
 60 | }
 61 | 
 62 | export const p = {
 63 |   fontSize: [1, 2],
 64 |   letterSpacing: `-0.003em`,
 65 |   lineHeight: `body`,
 66 | }
 67 | 
 68 | export const h1 = {
 69 |   ...heading,
 70 |   fontSize: [5, 6],
 71 |   mt: 2,
 72 | }
 73 | export const h2 = {
 74 |   ...heading,
 75 |   fontSize: [4, 5],
 76 |   mt: 2,
 77 | }
 78 | 
 79 | export const h3 = {
 80 |   ...heading,
 81 |   fontSize: [3, 4],
 82 |   mt: 3,
 83 | }
 84 | export const h4 = {
 85 |   ...heading,
 86 |   fontSize: [2, 3],
 87 | }
 88 | 
 89 | export const h5 = {
 90 |   ...heading,
 91 |   fontSize: [1, 2],
 92 | }
 93 | export const h6 = {
 94 |   ...heading,
 95 |   color: 'muted',
 96 |   fontSize: 1,
 97 |   mb: 2,
 98 | }
 99 | 
100 | export const base = {
101 |   ...tailwind.styles.root,
102 |   fontSize: [1, 2],
103 |   color: `text`,
104 |   a,
105 |   p,
106 |   h1,
107 |   h2,
108 |   h3,
109 |   h4,
110 |   h5,
111 |   h6,
112 | }
113 | 


--------------------------------------------------------------------------------
/theme/src/templates/posts/archivePosts.js:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx } from 'theme-ui'
 3 | 
 4 | import Layout from '../../components/Layout'
 5 | import { graphql } from 'gatsby'
 6 | import PostEntry from '../../components/PostEntry'
 7 | import Pagination from '../../components/Pagination'
 8 | import SEO from '../../components/Seo'
 9 | 
10 | const Blog = ({ data, pageContext }) => {
11 |   const posts = data.wpgraphql.posts.nodes
12 |   const {
13 |     pageNumber,
14 |     hasNextPage,
15 |     postsPerPage,
16 |     allPosts,
17 |     options: { postsPrefix, postsPath, paginationPrefix },
18 |   } = pageContext
19 | 
20 |   return (
21 |     <Layout>
22 |       <SEO title="blog" description="this is the posts page" />
23 | 
24 |       {data &&
25 |         data.wpgraphql &&
26 |         posts.map(post => (
27 |           <PostEntry
28 |             key={post.id}
29 |             location="archive"
30 |             post={post}
31 |             postsPrefix={postsPrefix}
32 |           />
33 |         ))}
34 | 
35 |       <Pagination
36 |         pageNumber={pageNumber}
37 |         hasNextPage={hasNextPage}
38 |         allPosts={allPosts}
39 |         itemsPerPage={postsPerPage}
40 |         postsPath={postsPath}
41 |         paginationPrefix={paginationPrefix}
42 |       />
43 |     </Layout>
44 |   )
45 | }
46 | 
47 | export default Blog
48 | 
49 | export const query = graphql`
50 |   fragment PostTemplateFragment on WPGraphQL_Post {
51 |     id
52 |     uri
53 |     title
54 |     excerpt
55 |     date
56 |     featuredImage {
57 |       altText
58 |       sourceUrl
59 |     }
60 |     categories {
61 |       nodes {
62 |         id
63 |         slug
64 |         name
65 |       }
66 |     }
67 |     author {
68 |       name
69 |       slug
70 |       avatar {
71 |         url
72 |       }
73 |     }
74 |     tags {
75 |       nodes {
76 |         name
77 |         slug
78 |       }
79 |     }
80 |   }
81 | `
82 | 
83 | export const pageQuery = graphql`
84 |   query GET_POSTS($ids: [ID], $postsPerPage: Int!) {
85 |     wpgraphql {
86 |       posts(first: $postsPerPage, where: { in: $ids }) {
87 |         nodes {
88 |           ...PostTemplateFragment
89 |         }
90 |       }
91 |     }
92 |   }
93 | `
94 | 


--------------------------------------------------------------------------------
/theme/utils/createSitePages.js:
--------------------------------------------------------------------------------
 1 | const pageTemplate = require.resolve(`../src/templates/pages/singlePage.js`)
 2 | 
 3 | const GET_PAGES = `
 4 |   # Define our query variables
 5 |   query GET_PAGES($first:Int $after:String) {
 6 |     wpgraphql {
 7 |       # Ask for pages
 8 |       pages(
 9 |           # Ask for the first XX number of pages
10 |           first: $first
11 | 
12 |           # A Cursor to where in the dataset our query should start
13 |           # and get items _after_ that point
14 |           after:$after
15 |       ) {
16 |           # In response, we'll want pageInfo so we know if we need
17 |           # to fetch more pages or not.
18 |           pageInfo {
19 |               # If true, we need to ask for more data.
20 |               hasNextPage
21 | 
22 |               # This cursor will be used for the value for $after
23 |               # if we need to ask for more data
24 |               endCursor
25 |           }
26 |           nodes {
27 |             id
28 |             uri
29 |             pageId
30 |           }
31 |       }
32 |     }
33 |   }
34 |   `
35 | /**
36 |  * Array to store allpagess. We make paginated requests
37 |  * to WordPress to get allpagess, and once we have all pages,
38 |  * then we iterate over them to create pages.
39 |  *
40 |  * @type {Array}
41 |  */
42 | const allPages = []
43 | 
44 | /**
45 |  * This is the export which Gatbsy will use to process.
46 |  *
47 |  * @param { actions, graphql }
48 |  * @returns {Promise<void>}
49 |  */
50 | 
51 | module.exports = async ({ actions, graphql }) => {
52 |   const { createPage } = actions
53 |   const allPages = []
54 |   const fetchPages = async variables =>
55 |     await graphql(GET_PAGES, variables).then(({ data }) => {
56 |       const {
57 |         wpgraphql: {
58 |           pages: {
59 |             nodes,
60 |             pageInfo: { hasNextPage, endCursor },
61 |           },
62 |         },
63 |       } = data
64 | 
65 |       nodes.map(page => {
66 |         allPages.push(page)
67 |       })
68 |       if (hasNextPage) {
69 |         return fetchPages({ first: variables.first, after: endCursor })
70 |       }
71 |       return allPages
72 |     })
73 | 
74 |   await fetchPages({ first: 100, after: null }).then(allPages => {
75 |     allPages.map(page => {
76 |       const path = page.uri === "home" ? `/` : `/${page.uri}`
77 |       console.log(`create page: ${page.uri}`)
78 |       createPage({
79 |         path,
80 |         component: pageTemplate,
81 |         context: page,
82 |       })
83 |     })
84 |   })
85 | }
86 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Gatsby Theme WordPress Starter
 2 | 
 3 | This is a gatsby theme using WordPress as source and allowing to build a standard blog.
 4 | See the [live demo](https://gatsby-theme-wordpress-blog.netlify.com/)
 5 | 
 6 | ## Dependencies
 7 | 
 8 | -This theme uses GraphQL API to source WordPress content. Therefore the source WordPress site must use the [WPGraphQL](https://www.wpgraphql.com/) plugin.
 9 | 
10 | - Twenty nineteen themes needs to be activated in order to have the right meny location
11 | - You can use this plugins to directly new posts from WordPress https://fr.wordpress.org/plugins/webhook-netlify-deploy/
12 | 
13 | ## Installation
14 | 
15 | To use this theme in your Gatsby sites, follow these instructions:
16 | 
17 | 1.  Install the theme
18 | 
19 |     ```sh
20 |     npm install --save @alexadark/gatsby-theme-wordpress-blog
21 |     ```
22 | 
23 |     or
24 | 
25 |     ```sh
26 |     yarn add @alexadark/gatsby-theme-wordpress-blog
27 |     ```
28 | 
29 | 2.  Add the theme to your `gatsby-config.js`:
30 | 
31 |     ```js
32 |     module.exports = {
33 |       plugins: [
34 |         {
35 |       resolve: `@alexadark/gatsby-theme-wordpress-blog`,
36 |       options: {
37 |         wordPressUrl: `http://alexandraspalato.com/webstantly/`,
38 |         postsPrefix: `posts`,
39 |         postsPath: ``,
40 |         paginationPrefix: `blog`,
41 |         postsPerPage: 8,
42 |       },
43 |       ]
44 |     }
45 |     ```
46 | 
47 | 3.  Start your site
48 |     ```sh
49 |     gatsby develop
50 |     ```
51 | 
52 | ## Options
53 | 
54 | `wordPressUrl` - source site.
55 | 
56 | `postsPath` - the path for your posts, let it empty if you want them as home page
57 | in your WordPress installation if you want the blog as home page, then make sure to not have any page with slug 'home'.
58 | if you want the blog to another page, then create a custom link in your menu, with the postsPath as url (example : /blog), and make sure to not have any page with slug = postsPath
59 | create a page with slug: 'home' in this case
60 | 
61 | `paginationPrefix` - the prefix of the pages
62 | 
63 | `postsPrefix`
64 | 
65 | `postsPrePage`
66 | 
67 | ## Features
68 | 
69 | - 2 levels menu
70 | - pagination on posts page
71 | - categories, tags and users
72 | - Works with twenty nineteen theme to have the right menu location
73 | 
74 | ## How to contribute
75 | 
76 | This is a WIP and any contribution, feedback and PRs are very welcome. Issues is a preferred way of submitting feedback, but you can also email to [alexaspalato@gmail.com](mailto:alexaspalato@gmail.com).
77 | 


--------------------------------------------------------------------------------
/theme/README.md:
--------------------------------------------------------------------------------
 1 | # Gatsby Theme WordPress Starter
 2 | 
 3 | This is a gatsby theme using WordPress as source and allowing to build a standard blog.
 4 | See the [live demo](https://gatsby-theme-wordpress-blog.netlify.com/)
 5 | 
 6 | ## Dependencies
 7 | 
 8 | -This theme uses GraphQL API to source WordPress content. Therefore the source WordPress site must use the [WPGraphQL](https://www.wpgraphql.com/) plugin.
 9 | 
10 | - Twenty nineteen themes needs to be activated in order to have the right meny location
11 | - You can use this plugins to directly new posts from WordPress https://fr.wordpress.org/plugins/webhook-netlify-deploy/
12 | 
13 | ## Installation
14 | 
15 | To use this theme in your Gatsby sites, follow these instructions:
16 | 
17 | 1.  Install the theme
18 | 
19 |     ```sh
20 |     npm install --save @alexadark/gatsby-theme-wordpress-blog
21 |     ```
22 | 
23 |     or
24 | 
25 |     ```sh
26 |     yarn add @alexadark/gatsby-theme-wordpress-blog
27 |     ```
28 | 
29 | 2.  Add the theme to your `gatsby-config.js`:
30 | 
31 |     ```js
32 |     module.exports = {
33 |       plugins: [
34 |         {
35 |       resolve: `@alexadark/gatsby-theme-wordpress-blog`,
36 |       options: {
37 |         wordPressUrl: `http://alexandraspalato.com/webstantly/`,
38 |         postsPrefix: `posts`,
39 |         postsPath: ``,
40 |         paginationPrefix: `blog`,
41 |         postsPerPage: 8,
42 |       },
43 |       ]
44 |     }
45 |     ```
46 | 
47 | 3.  Start your site
48 |     ```sh
49 |     gatsby develop
50 |     ```
51 | 
52 | ## Options
53 | 
54 | `wordPressUrl` - source site.
55 | 
56 | `postsPath` - the path for your posts, let it empty if you want them as home page
57 | in your WordPress installation if you want the blog as home page, then make sure to not have any page with slug 'home'.
58 | if you want the blog to another page, then create a custom link in your menu, with the postsPath as url (example : /blog), and make sure to not have any page with slug = postsPath
59 | create a page with slug: 'home' in this case
60 | 
61 | `paginationPrefix` - the prefix of the pages
62 | 
63 | `postsPrefix`
64 | 
65 | `postsPrePage`
66 | 
67 | ## Features
68 | 
69 | - 2 levels menu
70 | - pagination on posts page
71 | - categories, tags and users
72 | - Works with twenty nineteen theme to have the right menu location
73 | 
74 | ## How to contribute
75 | 
76 | This is a WIP and any contribution, feedback and PRs are very welcome. Issues is a preferred way of submitting feedback, but you can also email to [alexaspalato@gmail.com](mailto:alexaspalato@gmail.com).
77 | 


--------------------------------------------------------------------------------
/theme/src/components/Seo.js:
--------------------------------------------------------------------------------
  1 | import React from "react"
  2 | import PropTypes from "prop-types"
  3 | import Helmet from "react-helmet"
  4 | import { StaticQuery, graphql } from "gatsby"
  5 | 
  6 | function SEO({ description, lang, meta, keywords, title }) {
  7 |   return (
  8 |     <StaticQuery
  9 |       query={detailsQuery}
 10 |       render={data => {
 11 |         const metaDescription =
 12 |           description || data.site.siteMetadata.description
 13 |         const titleText = title
 14 |           ? `${title} | ${data.site.siteMetadata.title}`
 15 |           : data.site.siteMetadata.title
 16 |         return (
 17 |           <Helmet
 18 |             htmlAttributes={{
 19 |               lang,
 20 |             }}
 21 |             title={titleText}
 22 |             titleTemplate={`%s`}
 23 |             meta={[
 24 |               {
 25 |                 name: `description`,
 26 |                 content: metaDescription,
 27 |               },
 28 |               {
 29 |                 property: `og:title`,
 30 |                 content: title,
 31 |               },
 32 |               {
 33 |                 property: `og:description`,
 34 |                 content: metaDescription,
 35 |               },
 36 |               {
 37 |                 property: `og:type`,
 38 |                 content: `website`,
 39 |               },
 40 |               {
 41 |                 name: `twitter:card`,
 42 |                 content: `summary`,
 43 |               },
 44 |               {
 45 |                 name: `twitter:creator`,
 46 |                 content: data.site.siteMetadata.author,
 47 |               },
 48 |               {
 49 |                 name: `twitter:title`,
 50 |                 content: title,
 51 |               },
 52 |               {
 53 |                 name: `twitter:description`,
 54 |                 content: metaDescription,
 55 |               },
 56 |             ]
 57 |               .concat(
 58 |                 keywords.length > 0
 59 |                   ? {
 60 |                       name: `keywords`,
 61 |                       content: keywords.join(`, `),
 62 |                     }
 63 |                   : []
 64 |               )
 65 |               .concat(meta)}
 66 |           />
 67 |         )
 68 |       }}
 69 |     />
 70 |   )
 71 | }
 72 | 
 73 | SEO.defaultProps = {
 74 |   lang: `es`,
 75 |   meta: [],
 76 |   keywords: [],
 77 | }
 78 | 
 79 | SEO.propTypes = {
 80 |   description: PropTypes.string,
 81 |   lang: PropTypes.string,
 82 |   meta: PropTypes.array,
 83 |   keywords: PropTypes.arrayOf(PropTypes.string),
 84 |   title: PropTypes.string.isRequired,
 85 | }
 86 | 
 87 | export default SEO
 88 | 
 89 | const detailsQuery = graphql`
 90 |   query DefaultSEOQuery {
 91 |     site {
 92 |       siteMetadata {
 93 |         title
 94 |         description
 95 |         author
 96 |       }
 97 |     }
 98 |   }
 99 | `
100 | 


--------------------------------------------------------------------------------
/theme/src/components/Header.js:
--------------------------------------------------------------------------------
  1 | /** @jsx jsx */
  2 | import { jsx, Container, Flex, Header as StyledHeader } from 'theme-ui'
  3 | 
  4 | import { useStaticQuery, graphql } from 'gatsby'
  5 | 
  6 | import Menu from './Menu'
  7 | import SiteBranding from './SiteBranding'
  8 | 
  9 | import { slide as SlideMenu } from 'react-burger-menu'
 10 | import Headroom from 'react-headroom'
 11 | 
 12 | const Header = () => {
 13 |   const data = useStaticQuery(graphql`
 14 |     query SiteTitleQuery {
 15 |       wpgraphql {
 16 |         generalSettings {
 17 |           title
 18 |           url
 19 |         }
 20 |       }
 21 |     }
 22 |   `)
 23 | 
 24 |   const { title, url } = data.wpgraphql.generalSettings
 25 | 
 26 |   return (
 27 |     <Headroom sx={{}}>
 28 |       <StyledHeader
 29 |         sx={{
 30 |           bg: `white`,
 31 | 
 32 |           boxShadow: `default`,
 33 |           '.bm-burger-button': {
 34 |             position: 'relative',
 35 |             width: '20px',
 36 |             height: '20px',
 37 |             right: '36px',
 38 |             display: ['block', 'block', 'none'],
 39 | 
 40 |             ':hover': {
 41 |               cursor: `pointer`,
 42 |               '.bm-burger-bars': {
 43 |                 background: t => t.colors.primary,
 44 |                 opacity: 1,
 45 |               },
 46 |             },
 47 |           },
 48 |           '.bm-burger-bars': {
 49 |             background: `#444`,
 50 |             transition: `all .4s ease-in-out`,
 51 |           },
 52 |           'div:nth-child(3)': {
 53 |             display: [`block`, `block`, `none`],
 54 |           },
 55 |         }}
 56 |       >
 57 |         <Container sx={{ py: [3, 1] }}>
 58 |           <Flex sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
 59 |             <SiteBranding title={title} />
 60 |             <div
 61 |               sx={{ display: ['none', 'none', 'block'], variant: `menus.main` }}
 62 |             >
 63 |               <Menu wordPressUrl={url} />
 64 |             </div>
 65 |             <SlideMenu
 66 |               right
 67 |               width={'300px'}
 68 |               sx={{
 69 |                 bg: `secondary`,
 70 |                 color: `primary`,
 71 |                 top: 0,
 72 |                 height: `100vh !important`,
 73 | 
 74 |                 a: {
 75 |                   color: `white`,
 76 |                 },
 77 |                 fontSize: 2,
 78 |                 fontFamily: `heading`,
 79 |                 '.sub-menu': {
 80 |                   pl: 1,
 81 |                   '.menu-item': {
 82 |                     fontSize: 1,
 83 |                   },
 84 |                 },
 85 |                 '.bm-cross-button': {
 86 |                   cursor: `pointer`,
 87 |                 },
 88 |                 '.bm-cross': {
 89 |                   bg: `white`,
 90 |                 },
 91 |               }}
 92 |             >
 93 |               <Menu wordPressUrl={url} />
 94 |             </SlideMenu>
 95 |           </Flex>
 96 |         </Container>
 97 |       </StyledHeader>
 98 |     </Headroom>
 99 |   )
100 | }
101 | 
102 | export default Header
103 | 


--------------------------------------------------------------------------------
/theme/src/components/Menu.js:
--------------------------------------------------------------------------------
  1 | /** @jsx jsx */
  2 | import { jsx } from 'theme-ui'
  3 | import { graphql, useStaticQuery, Link } from 'gatsby'
  4 | import { createLocalLink } from '../utils'
  5 | 
  6 | const MENU_QUERY = graphql`
  7 |   fragment MenuFields on WPGraphQL_MenuItem {
  8 |     id
  9 |     label
 10 |     url
 11 |     target
 12 |     connectedObject {
 13 |       __typename
 14 |     }
 15 |   }
 16 | 
 17 |   query GET_MENU_ITEMS {
 18 |     wpgraphql {
 19 |       menuItems(where: { location: MENU_1 }) {
 20 |         nodes {
 21 |           ...MenuFields
 22 |           childItems {
 23 |             nodes {
 24 |               ...MenuFields
 25 |             }
 26 |           }
 27 |         }
 28 |       }
 29 |     }
 30 |     sitePlugin(name: { eq: "@alexadark/gatsby-theme-wordpress-blog" }) {
 31 |       pluginOptions {
 32 |         postsPath
 33 |       }
 34 |     }
 35 |   }
 36 | `
 37 | 
 38 | const renderLink = (menuItem, wordPressUrl, postsPath) =>
 39 |   menuItem.connectedObject.__typename === 'WPGraphQL_MenuItem' ? (
 40 |     menuItem.url === `/${postsPath}` ? (
 41 |       <Link to={`/${postsPath}`}> {menuItem.label}</Link>
 42 |     ) : menuItem.url === `#` ? (
 43 |       menuItem.label
 44 |     ) : (
 45 |       <a href={menuItem.url} target="_blank" rel="noopener noreferrer">
 46 |         {menuItem.label}
 47 |       </a>
 48 |     )
 49 |   ) : createLocalLink(menuItem.url, wordPressUrl) ? (
 50 |     menuItem.url === wordPressUrl ? (
 51 |       <Link to="/"> {menuItem.label}</Link>
 52 |     ) : (
 53 |       <Link to={createLocalLink(menuItem.url, wordPressUrl)}>
 54 |         {menuItem.label}
 55 |       </Link>
 56 |     )
 57 |   ) : (
 58 |     menuItem.label
 59 |   )
 60 | 
 61 | const renderMenuItem = (menuItem, wordPressUrl, postsPath) => {
 62 |   if (menuItem.childItems && menuItem.childItems.nodes.length) {
 63 |     return renderSubMenu(menuItem, wordPressUrl)
 64 |   } else {
 65 |     return (
 66 |       <li className="menu-item" key={menuItem.id}>
 67 |         {renderLink(menuItem, wordPressUrl, postsPath)}
 68 |       </li>
 69 |     )
 70 |   }
 71 | }
 72 | 
 73 | const renderSubMenu = (menuItem, wordPressUrl, postsPath) => {
 74 |   return (
 75 |     <li className="has-subMenu menu-item" key={menuItem.id}>
 76 |       {renderLink(menuItem, wordPressUrl, postsPath)}
 77 | 
 78 |       <ul className="menuItemGroup sub-menu">
 79 |         {menuItem.childItems.nodes.map(item =>
 80 |           renderMenuItem(item, wordPressUrl, postsPath)
 81 |         )}
 82 |       </ul>
 83 |     </li>
 84 |   )
 85 | }
 86 | 
 87 | const Menu = ({ wordPressUrl }) => {
 88 |   const data = useStaticQuery(MENU_QUERY)
 89 |   const { postsPath } = data.sitePlugin.pluginOptions
 90 | 
 91 |   if (data.wpgraphql.menuItems) {
 92 |     return (
 93 |       <nav aria-label="main">
 94 |         <ul role="menu">
 95 |           {data.wpgraphql.menuItems.nodes.map(menuItem => {
 96 |             if (menuItem.childItems.nodes.length) {
 97 |               return renderSubMenu(menuItem, wordPressUrl, postsPath)
 98 |             } else {
 99 |               return renderMenuItem(menuItem, wordPressUrl, postsPath)
100 |             }
101 |           })}
102 |         </ul>
103 |       </nav>
104 |     )
105 |   } else {
106 |     return null
107 |   }
108 | }
109 | 
110 | export default Menu
111 | 


--------------------------------------------------------------------------------
/demo/README.md:
--------------------------------------------------------------------------------
 1 | <!-- AUTO-GENERATED-CONTENT:START (STARTER) -->
 2 | <p align="center">
 3 |   <a href="https://www.gatsbyjs.org">
 4 |     <img alt="Gatsby" src="https://www.gatsbyjs.org/monogram.svg" width="60" />
 5 |   </a>
 6 | </p>
 7 | <h1 align="center">
 8 |   Gatsby's hello-world starter
 9 | </h1>
10 | 
11 | Kick off your project with this hello-world boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
12 | 
13 | _Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.org/docs/gatsby-starters/)._
14 | 
15 | ## 🚀 Quick start
16 | 
17 | 1.  **Create a Gatsby site.**
18 | 
19 |     Use the Gatsby CLI to create a new site, specifying the hello-world starter.
20 | 
21 |     ```sh
22 |     # create a new Gatsby site using the hello-world starter
23 |     gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world
24 |     ```
25 | 
26 | 1.  **Start developing.**
27 | 
28 |     Navigate into your new site’s directory and start it up.
29 | 
30 |     ```sh
31 |     cd my-hello-world-starter/
32 |     gatsby develop
33 |     ```
34 | 
35 | 1.  **Open the source code and start editing!**
36 | 
37 |     Your site is now running at `http://localhost:8000`!
38 | 
39 |     _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._
40 | 
41 |     Open the `my-hello-world-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!
42 | 
43 | ## 🧐 What's inside?
44 | 
45 | A quick look at the top-level files and directories you'll see in a Gatsby project.
46 | 
47 |     .
48 |     ├── node_modules
49 |     ├── src
50 |     ├── .gitignore
51 |     ├── .prettierrc
52 |     ├── gatsby-browser.js
53 |     ├── gatsby-config.js
54 |     ├── gatsby-node.js
55 |     ├── gatsby-ssr.js
56 |     ├── LICENSE
57 |     ├── package-lock.json
58 |     ├── package.json
59 |     └── README.md
60 | 
61 | 1.  **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.
62 | 
63 | 2.  **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”.
64 | 
65 | 3.  **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for.
66 | 
67 | 4.  **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent.
68 | 
69 | 5.  **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser.
70 | 
71 | 6.  **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail).
72 | 
73 | 7.  **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
74 | 
75 | 8.  **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering.
76 | 
77 | 9.  **`LICENSE`**: Gatsby is licensed under the MIT license.
78 | 
79 | 10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**
80 | 
81 | 11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
82 | 
83 | 12. **`README.md`**: A text file containing useful reference information about your project.
84 | 
85 | ## 🎓 Learning Gatsby
86 | 
87 | Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start:
88 | 
89 | - **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
90 | 
91 | - **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
92 | 
93 | ## 💫 Deploy
94 | 
95 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-hello-world)
96 | 
97 | <!-- AUTO-GENERATED-CONTENT:END -->
98 | 


--------------------------------------------------------------------------------
/theme/utils/createPosts.js:
--------------------------------------------------------------------------------
  1 | const postTemplate = require.resolve(`../src/templates/posts/singlePost.js`)
  2 | const blogTemplate = require.resolve(`../src/templates/posts/archivePosts.js`)
  3 | 
  4 | const GET_POSTS = `
  5 |   # Define our query variables
  6 |   query GET_POSTS($first:Int $after:String) {
  7 |     wpgraphql {
  8 |       # Ask for posts
  9 |       posts(
 10 |           # Ask for the first XX number of posts
 11 |           first: $first
 12 | 
 13 |           # A Cursor to where in the dataset our query should start
 14 |           # and get items _after_ that point
 15 |           after:$after
 16 |       ) {
 17 |           # In response, we'll want pageInfo so we know if we need
 18 |           # to fetch more posts or not.
 19 |           pageInfo {
 20 |               # If true, we need to ask for more data.
 21 |               hasNextPage
 22 | 
 23 |               # This cursor will be used for the value for $after
 24 |               # if we need to ask for more data
 25 |               endCursor
 26 |           }
 27 |           nodes {
 28 |             id
 29 |             uri
 30 |             postId
 31 |             title
 32 |           }
 33 |       }
 34 |   }
 35 | }
 36 | `
 37 | /**
 38 |  * Array to store allPosts. We make paginated requests
 39 |  * to WordPress to get allPosts, and once we have all posts,
 40 |  * then we iterate over them to create pages.
 41 |  *
 42 |  * @type {Array}
 43 |  */
 44 | const allPosts = []
 45 | 
 46 | /**
 47 |  * Here we store an array of blogPages. For each xx amount of posts
 48 |  * we want to create a postsPath so users can browse
 49 |  * chunks of data at a time, much like a traditional
 50 |  * WordPress paginated archive page.
 51 |  *
 52 |  * @type {Array}
 53 |  */
 54 | const blogPages = []
 55 | 
 56 | /**
 57 |  * We need to track the page number so we can output the paginated
 58 |  * archive template with the appropriate path.
 59 |  *
 60 |  * @type {number}
 61 |  */
 62 | let pageNumber = 0
 63 | 
 64 | /**
 65 |  * This is the export which Gatbsy will use to process.
 66 |  *
 67 |  * @param { actions, graphql }
 68 |  * @returns {Promise<void>}
 69 |  */
 70 | module.exports = async ({ actions, graphql }, options) => {
 71 |   const { postsPath, paginationPrefix, postsPrefix, postsPerPage } = options
 72 |   /**
 73 |    * This is the method from Gatsby that we're going
 74 |    * to use to create pages in our static site.
 75 |    */
 76 |   const { createPage } = actions
 77 | 
 78 |   const fetchPosts = async variables => {
 79 |     /**
 80 |      * Fetch posts using the GET_POSTS query and the variables passed in.
 81 |      */
 82 |     return await graphql(GET_POSTS, variables).then(({ data }) => {
 83 |       /**
 84 |        * Extract the data from the GraphQL query results
 85 |        */
 86 |       const {
 87 |         wpgraphql: {
 88 |           posts: {
 89 |             nodes,
 90 |             pageInfo: { hasNextPage, endCursor },
 91 |           },
 92 |         },
 93 |       } = data
 94 | 
 95 |       /**
 96 |        * Define the path for the paginated blog page.
 97 |        * This is the url the page will live at
 98 |        * @type {string}
 99 |        */
100 |       const blogPagePath = !variables.after
101 |         ? `${postsPath}/`
102 |         : `${postsPath}${paginationPrefix}/${pageNumber + 1}`
103 | 
104 |       /**
105 |        * The IDs of the posts which were got from GraphQL.
106 |        */
107 |       const nodeIds = nodes.map(node => node.postId)
108 | 
109 |       /**
110 |        * Add config for the postsPath to the postsPath array
111 |        * for creating later
112 |        *
113 |        * @type {{path: string, component: string, context: {nodes: *, pageNumber: number, hasNextPage: *}}}
114 |        */
115 |       blogPages[pageNumber] = {
116 |         path: blogPagePath,
117 |         component: blogTemplate,
118 |         context: {
119 |           ids: nodeIds,
120 |           allPosts,
121 |           pageNumber: pageNumber + 1,
122 |           hasNextPage,
123 |           options,
124 |           postsPerPage,
125 |         },
126 |       }
127 | 
128 |       /**
129 |        * Map over the posts for later creation
130 |        */
131 |       nodes &&
132 |         nodes.map(post => {
133 |           allPosts.push(post)
134 |         })
135 | 
136 |       /**
137 |        * If there's another page, fetch more
138 |        * so we can have all the data we need.
139 |        */
140 |       if (hasNextPage) {
141 |         pageNumber++
142 |         console.log(`fetch page ${pageNumber} of posts...`)
143 |         return fetchPosts({ first: postsPerPage, after: endCursor })
144 |       }
145 | 
146 |       /**
147 |        * Once we're done, return all the posts
148 |        * so we can create the necessary pages with
149 |        * all the data on hand.
150 |        */
151 |       return allPosts
152 |     })
153 |   }
154 | 
155 |   /**
156 |    * Kick off our `fetchPosts` method which will get us all
157 |    * the posts we need to create individual post pages
158 |    * and paginated blogroll archive pages.
159 |    */
160 |   await fetchPosts({ first: postsPerPage, after: null }).then(allPosts => {
161 |     /**
162 |      * Map over the allPosts array to create the
163 |      * single-post pages
164 |      */
165 |     allPosts &&
166 |       allPosts.map((post, index) => {
167 |         console.log(`create post: ${post.uri}`)
168 |         createPage({
169 |           path: `/${postsPrefix}/${post.uri}/`,
170 |           component: postTemplate,
171 |           context: {
172 |             ...post,
173 |             prev: allPosts[index + 1],
174 |             next: allPosts[index - 1],
175 |           },
176 |         })
177 |       })
178 | 
179 |     /**
180 |      * Map over the `blogPages` array to create the
181 |      * paginated blogroll pages
182 |      */
183 |     blogPages &&
184 |       blogPages.map(archivePage => {
185 |         console.log(`createpostsPath ${archivePage.context.pageNumber}`)
186 |         createPage(archivePage)
187 |       })
188 |   })
189 | }
190 | 


--------------------------------------------------------------------------------
/theme/src/styles/GlobalStyles.js:
--------------------------------------------------------------------------------
  1 | import { css } from '@emotion/core'
  2 | 
  3 | export const GlobalStyles = css`
  4 |   /*! sanitize.css v7.0.3 | CC0 License | github.com/csstools/sanitize.css */
  5 |   /* Document
  6 | * ========================================================================== */
  7 |   /**
  8 | * 1. Remove repeating backgrounds in all browsers (opinionated).
  9 | * 2. Add border box sizing in all browsers (opinionated).
 10 | */
 11 |   *,
 12 |   ::before,
 13 |   ::after {
 14 |     background-repeat: no-repeat; /* 1 */
 15 |     box-sizing: border-box; /* 2 */
 16 |   }
 17 |   /**
 18 | * 1. Add text decoration inheritance in all browsers (opinionated).
 19 | * 2. Add vertical alignment inheritance in all browsers (opinionated).
 20 | */
 21 |   ::before,
 22 |   ::after {
 23 |     text-decoration: inherit; /* 1 */
 24 |     vertical-align: inherit; /* 2 */
 25 |   }
 26 |   /**
 27 | * 1. Use the default cursor in all browsers (opinionated).
 28 | * 2. Use the default user interface font in all browsers (opinionated).
 29 | * 3. Correct the line height in all browsers.
 30 | * 4. Use a 4-space tab width in all browsers (opinionated).
 31 | * 5. Prevent adjustments of font size after orientation changes in
 32 | *    IE on Windows Phone and in iOS.
 33 | * 6. Breaks words to prevent overflow in all browsers (opinionated).
 34 | */
 35 |   html {
 36 |     cursor: default; /* 1 */
 37 |     -moz-tab-size: 4; /* 4 */
 38 |     tab-size: 4; /* 4 */
 39 |     -ms-text-size-adjust: 100%; /* 5 */
 40 |     -webkit-text-size-adjust: 100%; /* 5 */
 41 |     word-break: break-word; /* 6 */
 42 |     font-size: 62.5%;
 43 |   }
 44 |   /* Sections
 45 | * ========================================================================== */
 46 |   /**
 47 | * Remove the margin in all browsers (opinionated).
 48 | */
 49 |   body {
 50 |     margin: 0;
 51 |     /* Avoid horizontal scroll */
 52 |     position: absolute;
 53 |     width: 100%;
 54 |     height: 100%;
 55 |     overflow-y: scroll;
 56 |     overflow-x: hidden;
 57 |     -webkit-overflow-scrolling: touch;
 58 |     background: ${({ theme }) => theme.colors.primary};
 59 |   }
 60 |   /**
 61 | * Correct the font size and margin on h1 elements within section and
 62 | * article contexts in Chrome, Firefox, and Safari.
 63 | */
 64 |   h1 {
 65 |     font-size: 2em;
 66 |     margin: 0.67em 0;
 67 |   }
 68 |   /* Grouping content
 69 | * ========================================================================== */
 70 |   /**
 71 | * 1. Add the correct sizing in Firefox.
 72 | * 2. Show the overflow in Edge and IE.
 73 | */
 74 |   hr {
 75 |     height: 0; /* 1 */
 76 |     overflow: visible; /* 2 */
 77 |   }
 78 |   /**
 79 | * Add the correct display in IE.
 80 | */
 81 |   main {
 82 |     display: block;
 83 |   }
 84 |   /**
 85 | * Remove the list style on navigation lists in all browsers (opinionated).
 86 | */
 87 |   nav ol,
 88 |   nav ul {
 89 |     list-style: none;
 90 |   }
 91 |   /**
 92 | * 1. Use the default monospace user interface font
 93 | *    in all browsers (opinionated).
 94 | * 2. Correct the odd em font sizing in all browsers.
 95 | */
 96 |   pre {
 97 |     font-family:
 98 | /* macOS 10.10+ */ Menlo, /* Windows 6+ */ Consolas,
 99 |       /* Android 4+ */ Roboto Mono, /* Ubuntu 10.10+ */ Ubuntu Monospace,
100 |       /* KDE Plasma 4+ */ Oxygen Mono,
101 |       /* Linux/OpenOffice fallback */ Liberation Mono, /* fallback */ monospace; /* 1 */
102 |     font-size: 1em; /* 2 */
103 |   }
104 |   /* Text-level semantics
105 | * ========================================================================== */
106 |   /**
107 | * Remove the gray background on active links in IE 10.
108 | */
109 |   a {
110 |     background-color: transparent;
111 |     transition: all 0.4s ease-in-out;
112 |     text-decoration: none;
113 |   }
114 |   /**
115 | * Add the correct text decoration in Edge, IE, Opera, and Safari.
116 | */
117 |   abbr[title] {
118 |     text-decoration: underline;
119 |     text-decoration: underline dotted;
120 |   }
121 |   /**
122 | * Add the correct font weight in Chrome, Edge, and Safari.
123 | */
124 |   b,
125 |   strong {
126 |     font-weight: bolder;
127 |   }
128 |   /**
129 | * 1. Use the default monospace user interface font
130 | *    in all browsers (opinionated).
131 | * 2. Correct the odd em font sizing in all browsers.
132 | */
133 |   code,
134 |   kbd,
135 |   samp {
136 |     font-family:
137 | /* macOS 10.10+ */ Menlo, /* Windows 6+ */ Consolas,
138 |       /* Android 4+ */ Roboto Mono, /* Ubuntu 10.10+ */ Ubuntu Monospace,
139 |       /* KDE Plasma 4+ */ Oxygen Mono,
140 |       /* Linux/OpenOffice fallback */ Liberation Mono, /* fallback */ monospace; /* 1 */
141 |     font-size: 1em; /* 2 */
142 |   }
143 |   /**
144 | * Add the correct font size in all browsers.
145 | */
146 |   small {
147 |     font-size: 80%;
148 |   }
149 |   /*
150 | * Remove the text shadow on text selections in Firefox 61- (opinionated).
151 | * 1. Restore the coloring undone by defining the text shadow
152 | *    in all browsers (opinionated).
153 | */
154 |   ::-moz-selection {
155 |     background-color: #b3d4fc; /* 1 */
156 |     color: #000; /* 1 */
157 |     text-shadow: none;
158 |   }
159 |   ::selection {
160 |     background-color: #b3d4fc; /* 1 */
161 |     color: #000; /* 1 */
162 |     text-shadow: none;
163 |   }
164 |   /* Embedded content
165 | * ========================================================================== */
166 |   /*
167 | * Change the alignment on media elements in all browers (opinionated).
168 | */
169 |   audio,
170 |   canvas,
171 |   iframe,
172 |   img,
173 |   svg,
174 |   video {
175 |     vertical-align: middle;
176 |     max-width: 100%;
177 |   }
178 |   /**
179 | * Add the correct display in IE 9-.
180 | */
181 |   audio,
182 |   video {
183 |     display: inline-block;
184 |   }
185 |   /**
186 | * Add the correct display in iOS 4-7.
187 | */
188 |   audio:not([controls]) {
189 |     display: none;
190 |     height: 0;
191 |   }
192 |   /**
193 | * Remove the border on images inside links in IE 10-.
194 | */
195 |   img {
196 |     border-style: none;
197 |   }
198 |   /**
199 | * Change the fill color to match the text color in all browsers (opinionated).
200 | */
201 |   svg {
202 |     fill: currentColor;
203 |   }
204 |   /**
205 | * Hide the overflow in IE.
206 | */
207 |   svg:not(:root) {
208 |     overflow: hidden;
209 |   }
210 |   /* Tabular data
211 | * ========================================================================== */
212 |   /**
213 | * Collapse border spacing in all browsers (opinionated).
214 | */
215 |   table {
216 |     border-collapse: collapse;
217 |   }
218 |   /* Forms
219 | * ========================================================================== */
220 |   /**
221 | * Inherit styling in all browsers (opinionated).
222 | */
223 |   button,
224 |   input,
225 |   select,
226 |   textarea {
227 |     font-family: inherit;
228 |     font-size: inherit;
229 |     line-height: inherit;
230 |   }
231 |   /**
232 | * Remove the margin in Safari.
233 | */
234 |   button,
235 |   input,
236 |   select {
237 |     margin: 0;
238 |   }
239 |   /**
240 | * 1. Show the overflow in IE.
241 | * 2. Remove the inheritance of text transform in Edge, Firefox, and IE.
242 | */
243 |   button {
244 |     overflow: visible; /* 1 */
245 |     text-transform: none; /* 2 */
246 |   }
247 |   /**
248 | * Correct the inability to style clickable types in iOS and Safari.
249 | */
250 |   button,
251 |   [type='button'],
252 |   [type='reset'],
253 |   [type='submit'] {
254 |     -webkit-appearance: button;
255 |   }
256 |   /**
257 | * Correct the padding in Firefox.
258 | */
259 |   fieldset {
260 |     padding: 0.35em 0.75em 0.625em;
261 |   }
262 |   /**
263 | * Show the overflow in Edge and IE.
264 | */
265 |   input {
266 |     overflow: visible;
267 |   }
268 |   /**
269 | * 1. Correct the text wrapping in Edge and IE.
270 | * 2. Correct the color inheritance from fieldset elements in IE.
271 | */
272 |   legend {
273 |     color: inherit; /* 2 */
274 |     display: table; /* 1 */
275 |     max-width: 100%; /* 1 */
276 |     white-space: normal; /* 1 */
277 |   }
278 |   /**
279 | * 1. Add the correct display in Edge and IE.
280 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
281 | */
282 |   progress {
283 |     display: inline-block; /* 1 */
284 |     vertical-align: baseline; /* 2 */
285 |   }
286 |   /**
287 | * Remove the inheritance of text transform in Firefox.
288 | */
289 |   select {
290 |     text-transform: none;
291 |   }
292 |   /**
293 | * 1. Remove the margin in Firefox and Safari.
294 | * 2. Remove the default vertical scrollbar in IE.
295 | * 3. Change the resize direction on textareas in all browsers (opinionated).
296 | */
297 |   textarea {
298 |     margin: 0; /* 1 */
299 |     overflow: auto; /* 2 */
300 |     resize: vertical; /* 3 */
301 |   }
302 |   /**
303 | * Remove the padding in IE 10-.
304 | */
305 |   [type='checkbox'],
306 |   [type='radio'] {
307 |     padding: 0;
308 |   }
309 |   /**
310 | * 1. Correct the odd appearance in Chrome and Safari.
311 | * 2. Correct the outline style in Safari.
312 | */
313 |   [type='search'] {
314 |     -webkit-appearance: textfield; /* 1 */
315 |     outline-offset: -2px; /* 2 */
316 |   }
317 |   /**
318 | * Correct the cursor style of increment and decrement buttons in Safari.
319 | */
320 |   ::-webkit-inner-spin-button,
321 |   ::-webkit-outer-spin-button {
322 |     height: auto;
323 |   }
324 |   /**
325 | * Correct the text style of placeholders in Chrome, Edge, and Safari.
326 | */
327 |   ::-webkit-input-placeholder {
328 |     color: inherit;
329 |     opacity: 0.54;
330 |   }
331 |   /**
332 | * Remove the inner padding in Chrome and Safari on macOS.
333 | */
334 |   ::-webkit-search-decoration {
335 |     -webkit-appearance: none;
336 |   }
337 |   /**
338 | * 1. Correct the inability to style clickable types in iOS and Safari.
339 | * 2. Change font properties to inherit in Safari.
340 | */
341 |   ::-webkit-file-upload-button {
342 |     -webkit-appearance: button; /* 1 */
343 |     font: inherit; /* 2 */
344 |   }
345 |   /**
346 | * Remove the inner border and padding of focus outlines in Firefox.
347 | */
348 |   ::-moz-focus-inner {
349 |     border-style: none;
350 |     padding: 0;
351 |   }
352 |   /**
353 | * Restore the focus outline styles unset by the previous rule in Firefox.
354 | */
355 |   :-moz-focusring {
356 |     outline: 1px dotted ButtonText;
357 |   }
358 |   /* Interactive
359 | * ========================================================================== */
360 |   /*
361 | * Add the correct display in Edge and IE.
362 | */
363 |   details {
364 |     display: block;
365 |   }
366 |   /*
367 | * Add the correct styles in Edge, IE, and Safari.
368 | */
369 |   dialog {
370 |     background-color: white;
371 |     border: solid;
372 |     color: black;
373 |     display: block;
374 |     height: -moz-fit-content;
375 |     height: -webkit-fit-content;
376 |     height: fit-content;
377 |     left: 0;
378 |     margin: auto;
379 |     padding: 1em;
380 |     position: absolute;
381 |     right: 0;
382 |     width: -moz-fit-content;
383 |     width: -webkit-fit-content;
384 |     width: fit-content;
385 |   }
386 |   dialog:not([open]) {
387 |     display: none;
388 |   }
389 |   /*
390 | * Add the correct display in all browsers.
391 | */
392 |   summary {
393 |     display: list-item;
394 |   }
395 |   /* Scripting
396 | * ========================================================================== */
397 |   /**
398 | * Add the correct display in IE 9-.
399 | */
400 |   canvas {
401 |     display: inline-block;
402 |   }
403 |   /**
404 | * Add the correct display in IE.
405 | */
406 |   template {
407 |     display: none;
408 |   }
409 |   /* User interaction
410 | * ========================================================================== */
411 |   /*
412 | * 1. Remove the tapping delay on clickable elements
413 | in all browsers (opinionated).
414 | * 2. Remove the tapping delay in IE 10.
415 | */
416 |   a,
417 |   area,
418 |   button,
419 |   input,
420 |   label,
421 |   select,
422 |   summary,
423 |   textarea,
424 |   [tabindex] {
425 |     -ms-touch-action: manipulation; /* 1 */
426 |     touch-action: manipulation; /* 2 */
427 |   }
428 |   /**
429 | * Add the correct display in IE 10-.
430 | */
431 |   [hidden] {
432 |     display: none;
433 |   }
434 |   /* Accessibility
435 | * ========================================================================== */
436 |   /**
437 | * Change the cursor on busy elements in all browsers (opinionated).
438 | */
439 |   [aria-busy='true'] {
440 |     cursor: progress;
441 |   }
442 |   /*
443 | * Change the cursor on control elements in all browsers (opinionated).
444 | */
445 |   [aria-controls] {
446 |     cursor: pointer;
447 |   }
448 |   /*
449 | * Change the cursor on disabled, not-editable, or otherwise
450 | * inoperable elements in all browsers (opinionated).
451 | */
452 |   [aria-disabled],
453 |   [disabled] {
454 |     cursor: not-allowed;
455 |   }
456 |   /*
457 | * Change the display on visually hidden accessible elements
458 | * in all browsers (opinionated).
459 | */
460 |   [aria-hidden='false'][hidden]:not(:focus) {
461 |     clip: rect(0, 0, 0, 0);
462 |     display: inherit;
463 |     position: absolute;
464 |   }
465 | `
466 | 


--------------------------------------------------------------------------------