Skip to content

Commit 97ab4ad

Browse files
author
Hidetaka Okamoto
committed
0 parents  commit 97ab4ad

37 files changed

+17870
-0
lines changed

‎.gitignore

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Project dependencies
2+
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
3+
node_modules
4+
.cache/
5+
# Build directory
6+
public/
7+
.DS_Store
8+
yarn-error.log

‎LICENSE

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2015 gatsbyjs
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+

‎README.md

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
# gatsby-starter-wordpress-typescript
2+
The starter theme of Gatsby site with WordPress (Using WP API).
3+
4+
Install this starter (assuming Gatsby is installed) by running from your CLI:
5+
6+
## Just try the demo site
7+
8+
You can deploy the demo site to the following services.
9+
10+
[![amplifybutton](https://oneclick.amplifyapp.com/button.svg)](https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/getshifter/gatsby-starter-wordpress-typescript)
11+
12+
13+
[![netlifybutton](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/getshifter/gatsby-starter-wordpress-typescript)
14+
15+
16+
## Getting started
17+
18+
### Create new site
19+
20+
```
21+
$ gatsby new gatsby-wordpress https://github.com/getshifter/gatsby-starter-wordpress-typescript
22+
23+
or
24+
25+
$ npx gatsby-cli new gatsby-wordpress https://github.com/getshifter/gatsby-starter-wordpress-typescript
26+
```
27+
28+
### Set your WordPress URL
29+
30+
Open `gatsby-config.js`, and replace the following properties.
31+
32+
- `siteMetadata.postURLPrefix`: Your WordPress Posts page URL prefix (default: `news`)
33+
- `siteMetadata.pageURLPrefix`: Your WordPress Pages page URL prefix (default: ``)
34+
- `plugins[].options.baseURL`: Your WordPress URL (default: `central.wordcamp.org`)
35+
36+
```javascript
37+
module.exports = {
38+
siteMetadata: {
39+
postURLPrefix: 'news',
40+
pageURLPrefix: '',
41+
},
42+
plugins: [
43+
`gatsby-plugin-typescript`,
44+
{
45+
resolve: 'gatsby-plugin-graphql-codegen',
46+
options: {
47+
fileName: `types/graphql-types.d.ts`
48+
}
49+
},
50+
{
51+
resolve: "gatsby-source-wordpress",
52+
options: {
53+
/*
54+
* The base URL of the WordPress site without the trailingslash and the protocol. This is required.
55+
* Example : 'demo.wp-api.org' or 'www.example-site.com'
56+
*/
57+
baseUrl: "central.wordcamp.org",
58+
```
59+
60+
All of options can see this page.
61+
https://www.gatsbyjs.org/packages/gatsby-source-wordpress/
62+
63+
### Run in your Local
64+
65+
```bash
66+
$ npm run develop
67+
68+
or
69+
70+
$ gatsby develop
71+
```
72+
73+
74+
### Build static HTML
75+
76+
```bash
77+
$ npm run build
78+
79+
or
80+
81+
$ gatsby build
82+
```
83+
84+
Generated HTML will be placed in `public` directory.
85+
86+
## Deploy
87+
88+
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/getshifter/gatsby-starter-wordpress-typescript)
89+
90+
## PWA
91+
92+
The example provides PWA by using `gatsby-plugin-manifest` and `gatsby-plugin-offline`.
93+
You can check the application icons in the `static/icons` directory.
94+
95+
```bash
96+
% tree st i
97+
/icons atic/
98+
static/icons
99+
├── icon-128x128.png
100+
├── icon-144x144.png
101+
├── icon-152x152.png
102+
├── icon-192x192.png
103+
├── icon-384x384.png
104+
├── icon-512x512.png
105+
├── icon-72x72.png
106+
└── icon-96x96.png
107+
108+
1 directory, 8 files
109+
```
110+
111+
And manifest.json's content are in `gatsby-config.js`.
112+
113+
```javascript
114+
{
115+
resolve: `gatsby-plugin-manifest`,
116+
options: {
117+
name: `WPGatsby Example`,
118+
short_name: `WPGatsby`,
119+
start_url: `/`,
120+
background_color: `#ffffff`,
121+
theme_color: `#00bfff`,
122+
display: `standalone`,
123+
},
124+
},
125+
```

‎gatsby-config.js

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
2+
module.exports = {
3+
siteMetadata: {
4+
postURLPrefix: 'blogs',
5+
pageURLPrefix: '',
6+
},
7+
plugins: [
8+
`gatsby-plugin-typescript`,
9+
{
10+
resolve: 'gatsby-plugin-graphql-codegen',
11+
options: {
12+
fileName: `types/graphql-types.d.ts`
13+
}
14+
},
15+
"gatsby-plugin-react-helmet",
16+
{
17+
resolve: "gatsby-source-wordpress",
18+
options: {
19+
/*
20+
* The base URL of the WordPress site without the trailingslash and the protocol. This is required.
21+
* Example : 'demo.wp-api.org' or 'www.example-site.com'
22+
*/
23+
baseUrl: "b5d85ac952f05c2bcb7e0b42979eff431beac2f1.hl-a.getshifter.co",
24+
// The protocol. This can be http or https.
25+
protocol: "https",
26+
// The rest api route prefix that your WordPress site is using.
27+
// Sometimes this is modified by WordPress plugins.
28+
// If not set, it uses the default of "wp-json"
29+
restApiRoutePrefix: "wp-json",
30+
// Indicates whether the site is hosted on wordpress.com.
31+
// If false, then the assumption is made that the site is self hosted.
32+
// If true, then the plugin will source its content on wordpress.com using the JSON REST API V2.
33+
// If your site is hosted on wordpress.org, then set this to false.
34+
hostingWPCOM: false,
35+
// If useACF is true, then the source plugin will try to import the WordPress ACF Plugin contents.
36+
// This feature is untested for sites hosted on wordpress.com.
37+
// Defaults to true.
38+
useACF: false,
39+
// Set verboseOutput to true to display a verbose output on `npm run develop` or `npm run build`
40+
// It can help you debug specific API Endpoints problems.
41+
verboseOutput: false,
42+
// Set how many pages are retrieved per API request.
43+
perPage: 100,
44+
// Search and Replace Urls across WordPress content.
45+
// searchAndReplaceContentUrls: {
46+
// sourceUrl: "https://central.wordcamp.org",
47+
// replacementUrl: "https://localhost:8000",
48+
// },
49+
includedRoutes: [
50+
"**/posts",
51+
"**/pages",
52+
]
53+
},
54+
},
55+
{
56+
resolve: `gatsby-plugin-manifest`,
57+
options: {
58+
name: `WPGatsby Example`,
59+
short_name: `WPGatsby`,
60+
start_url: `/`,
61+
background_color: `#ffffff`,
62+
theme_color: `#00bfff`,
63+
display: `standalone`,
64+
},
65+
},
66+
`gatsby-plugin-offline`,
67+
],
68+
}

‎gatsby-node.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
'use strict'
2+
require('ts-node').register({
3+
compilerOptions: {
4+
module: 'commonjs',
5+
target: 'esnext',
6+
},
7+
})
8+
const {nodes} = require('./gatsby/node/index')
9+
if (nodes) {
10+
Object.entries(nodes).forEach(([key, node]) => {
11+
exports[key] = node
12+
})
13+
}

‎gatsby/node/createPages/index.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { GatsbyNode } from "gatsby";
2+
import { createWPPosts } from "./posts";
3+
import { createWPPages } from "./pages";
4+
5+
export const createPages: GatsbyNode['createPages'] = async (args) => {
6+
createWPPosts(args)
7+
createWPPages(args)
8+
}

‎gatsby/node/createPages/pages.ts

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { GatsbyNode } from "gatsby";
2+
import {resolve} from 'path'
3+
import {
4+
Wordpress__Page
5+
} from '../../../types/graphql-types'
6+
import {
7+
getPageRelativePath,
8+
} from '../../../src/helpers/url'
9+
10+
export const createWPPages: GatsbyNode['createPages'] = async ({page, actions, graphql}) => {
11+
const {data: {
12+
allWordpressPage: {
13+
edges: pages
14+
}
15+
}} = await graphql<{allWordpressPage: {
16+
edges: {
17+
node: Wordpress__Page
18+
}[]
19+
}}>(`
20+
query WP_POSTS {
21+
allWordpressPage {
22+
edges {
23+
node {
24+
title
25+
slug
26+
id
27+
}
28+
}
29+
}
30+
}`)
31+
32+
pages.forEach(({node: wpPage}) => {
33+
const path = getPageRelativePath(wpPage.slug)
34+
console.log(`Page created: ${path} - ${wpPage.title}`)
35+
actions.createPage({
36+
path,
37+
component: resolve("./src/pages/pages.tsx"),
38+
context: Object.assign({}, page, {
39+
slug: wpPage.slug,
40+
id: wpPage.id
41+
})
42+
})
43+
})
44+
console.log(pages.length)
45+
}

‎gatsby/node/createPages/posts.ts

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { GatsbyNode } from "gatsby";
2+
import {resolve} from 'path'
3+
// https://github.com/GatsbyCentral/gatsby-awesome-pagination/pull/37
4+
// @ts-ignore
5+
import { paginate } from 'gatsby-awesome-pagination'
6+
import {
7+
Wordpress__Post
8+
} from '../../../types/graphql-types'
9+
import {
10+
getPostRelativePath,
11+
} from '../../../src/helpers/url'
12+
13+
export const createWPPosts: GatsbyNode['createPages'] = async ({page, actions, graphql}) => {
14+
const {data: {
15+
allWordpressPost: {
16+
edges: posts
17+
}
18+
}} = await graphql<{allWordpressPost: {
19+
edges: {
20+
node: Wordpress__Post
21+
}[]
22+
}}>(`
23+
query WP_POSTS {
24+
allWordpressPost {
25+
edges {
26+
node {
27+
title
28+
slug
29+
id
30+
}
31+
}
32+
}
33+
}`)
34+
35+
paginate({
36+
createPage: actions.createPage,
37+
items: posts,
38+
itemsPerPage: 20,
39+
pathPrefix: ({pageNumber}: {pageNumber: number}) => (pageNumber === 0 ? '/': '/pages'),
40+
component: resolve('./src/templates/index.tsx')
41+
})
42+
43+
posts.forEach(({node: post}) => {
44+
const path = getPostRelativePath(post.slug)
45+
console.log(`Post created: ${path} - ${post.title}`)
46+
actions.createPage({
47+
path,
48+
component: resolve("./src/pages/posts.tsx"),
49+
context: Object.assign({}, page, {
50+
slug: post.slug,
51+
id: post.id
52+
})
53+
})
54+
})
55+
console.log(posts.length)
56+
}

‎gatsby/node/index.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { GatsbyNode } from "gatsby";
2+
import { createPages } from './createPages'
3+
4+
export const nodes: GatsbyNode = {
5+
createPages
6+
}

0 commit comments

Comments
 (0)