├── .gitignore
├── LICENSE
├── README.md
├── example
├── .env.development
├── .env.production
├── .wordpress-config.json
├── README.md
├── entities.json
├── gatsby-config.js
├── package.json
├── setup.js
├── site-config.js
├── src
│ └── @draftbox-co
│ │ └── gatsby-wordpress-balsa-theme
│ │ └── components
│ │ ├── disqus.jsx
│ │ └── fb-comments.jsx
├── static
│ ├── cover.jpg
│ ├── cover.png
│ ├── cover_1.png
│ ├── facebookImage.jpg
│ ├── favicon.ico
│ ├── favicon.png
│ ├── favicon_1.png
│ ├── images
│ │ └── logo.svg
│ ├── logo.png
│ ├── robots.txt
│ ├── static
│ │ └── favicon.png
│ └── twitterImage.png
└── wordpressmedia.json
├── gatsby-wordpress-balsa-theme
├── README.md
├── fix-source-nodes.js
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── package.json
├── postcss.config.js
├── src
│ ├── amp-styles
│ │ └── post.amp.css
│ ├── components
│ │ ├── ContactForm.tsx
│ │ ├── CtaMini.tsx
│ │ ├── Footer.tsx
│ │ ├── Layout.tsx
│ │ ├── Navbar.tsx
│ │ ├── NextPrevPost.tsx
│ │ ├── Pagination.tsx
│ │ ├── PostCard.tsx
│ │ ├── copy-link.tsx
│ │ ├── disqus.jsx
│ │ ├── fb-comments.jsx
│ │ └── meta
│ │ │ ├── article-meta.tsx
│ │ │ ├── contact-meta.tsx
│ │ │ └── website-meta.tsx
│ ├── context
│ │ └── form-context.jsx
│ ├── hook
│ │ └── useForm.jsx
│ ├── images
│ │ ├── basketball.svg
│ │ ├── behance.svg
│ │ ├── check.svg
│ │ ├── copied.svg
│ │ ├── copy.svg
│ │ ├── facebook-share.svg
│ │ ├── facebook.svg
│ │ ├── female_avatar.svg
│ │ ├── ghost-icon.png
│ │ ├── github.svg
│ │ ├── instagram.svg
│ │ ├── link.svg
│ │ ├── linkedin-share.svg
│ │ ├── linkedin.svg
│ │ ├── mail.svg
│ │ ├── mobile_login.svg
│ │ ├── pinterest-share.svg
│ │ ├── pinterest.svg
│ │ ├── publication-cover.png
│ │ ├── rss.svg
│ │ ├── star.svg
│ │ ├── subscribe_to_newsletter.svg
│ │ ├── twitter-share.svg
│ │ ├── twitter.svg
│ │ ├── whatsapp-share.svg
│ │ ├── whatsapp.svg
│ │ └── youtube.svg
│ ├── models
│ │ ├── all-authors-description.model.ts
│ │ ├── all-post-description.model.ts
│ │ ├── all-tags-description.model.ts
│ │ ├── author-description.model.ts
│ │ ├── page-description.model.ts
│ │ ├── pagination.model.ts
│ │ ├── post-description.model.ts
│ │ └── settings-and-page-slugs.model.ts
│ ├── pages
│ │ ├── 404.tsx
│ │ ├── authors.tsx
│ │ ├── contact.tsx
│ │ ├── offline.tsx
│ │ └── tags.tsx
│ ├── styles
│ │ ├── prism.css
│ │ ├── richtext.css
│ │ └── style.css
│ ├── templates
│ │ ├── authorTemplate.tsx
│ │ ├── indexTemplate.tsx
│ │ ├── pageTemplate.tsx
│ │ ├── postTemplate.amp.tsx
│ │ ├── postTemplate.tsx
│ │ └── tagTemplate.tsx
│ └── utils
│ │ ├── .ghost.json
│ │ ├── fragments.js
│ │ ├── rss
│ │ └── generate-feed.js
│ │ └── siteConfigDefaults.js
├── static
│ ├── favicon.ico
│ ├── favicon.png
│ ├── images
│ │ └── logo.svg
│ ├── robots.txt
│ └── sw.js
└── tailwind.config.js
├── package.json
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # Node template
2 | # Logs
3 | logs
4 | *.log
5 | npm-debug.log*
6 | yarn-debug.log*
7 | yarn-error.log*
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | # Directory for instrumented libs generated by jscoverage/JSCover
14 | lib-cov
15 | # Coverage directory used by tools like istanbul
16 | coverage
17 | # nyc test coverage
18 | .nyc_output
19 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
20 | .grunt
21 | # Bower dependency directory (https://bower.io/)
22 | bower_components
23 | # node-waf configuration
24 | .lock-wscript
25 | # Compiled binary addons (https://nodejs.org/api/addons.html)
26 | build/Release
27 | # Dependency directories
28 | node_modules/
29 | jspm_packages/
30 | # Typescript v1 declaration files
31 | typings/
32 | # Optional npm cache directory
33 | .npm
34 | # Optional eslint cache
35 | .eslintcache
36 | # Optional REPL history
37 | .node_repl_history
38 | # Output of 'npm pack'
39 | *.tgz
40 | # Yarn Integrity file
41 | .yarn-integrity
42 | # dotenv environment variables file
43 | .env
44 | # IDE
45 | .idea/*
46 | *.iml
47 | *.sublime-*
48 | # OSX
49 | .DS_Store
50 | .vscode
51 | # Docs Custom
52 | .cache/
53 | public
54 | yarn-error.log
55 | .netlify/
56 | .wordpress-config.json
57 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 [Draftbox](https://draftbox.co)
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:
--------------------------------------------------------------------------------
1 | [](https://draftbox.co)
2 |
3 | # gatsby-wordpress-balsa-theme
4 |
5 | A Gatsby theme plugin for creating blogs from headless WordPress CMS.
6 |
7 | Turn your WordPress blog into a lightning fast static website. This Gatsby theme is a frontend replacement of the WordPress engine featuring the Balsa theme skin and functionality. All content is sourced from a headless WordPress CMS.
8 |
9 | > This theme is being used at [Draftbox](https://draftbox.co). Get lightning fast, secure front-end for your WordPress or Ghost blog, in 5 minutes or less, without coding. For our fellow devs, we also provide code export feature.
10 |
11 | ## Demo
12 |
13 | Play with the [Demo](https://wp-balsa-preview.draftbox.co/) to get a first impression.
14 |
15 | ## Features
16 |
17 | - Balsa theme from Draftbox
18 | - SEO optimized
19 | - Fully responsive
20 | - Gatsby images
21 | - Styled 404 page
22 | - RSS Feed
23 | - AMP Pages
24 | - Sitemap
25 | - Contact Form
26 | - Subscribe Form
27 | - Social Sharing
28 | - Composable and extensible
29 |
30 | ## Quick Start
31 |
32 | Head over to the [starter repo](https://github.com/draftbox-co/gatsby-wordpress-balsa-starter) to get up and running quickly! The starter is recommended if you are creating a new site.
33 |
34 | ## Installation
35 |
36 | This repository contains the example code **and** the Gatsby theme. If you are here to install the Gatsby theme plugin in your existing project, check out the [theme specific README](/gatsby-wordpress-balsa-theme/README.md) for further details.
37 |
38 | In case you want to work with this repository (for local development, pull requests, etc.):
39 |
40 | 1. Clone or fork this repository:
41 |
42 | ```bash
43 | git clone https://github.com/draftbox-co/gatsby-wordpress-balsa-theme.git
44 | cd gatsby-wordpress-balsa-theme
45 | ```
46 |
47 | create `.wordpress-config.json` in example directory and add your wordpress config.
48 |
49 | If your wordpress blog is self hosted it should look like
50 |
51 | ```bash
52 | {
53 | "baseUrl": "yourwordpressblog.com",
54 | "protocol": "https",
55 | "hostingWPCOM": false,
56 | "useACF": true,
57 | "includedRoutes": [
58 | "**/categories",
59 | "**/posts",
60 | "**/pages",
61 | "**/media",
62 | "**/tags",
63 | "**/taxonomies",
64 | "**/users"
65 | ]
66 | }
67 | ```
68 |
69 | if your blog is hosted on wordpress.com you will have to add few extra keys for reference check out [wordpress-source-docs](https://www.gatsbyjs.org/packages/gatsby-source-wordpress/).
70 |
71 | 2. Run `yarn` in directory where you cloned theme to install dependencies.
72 |
73 | 3. Run `yarn workspace example develop` to start the example locally.
74 |
75 | ## Authors
76 | - Arun Priyadarshi ([@Gunnerforlife](https://github.com/Gunnerforlife)) – [Draftbox](https://draftbox.co)
77 | - Keyur Raval ([@thandaanda](https://github.com/thandaanda)) – [Draftbox](https://draftbox.co)
78 | - Shyam Lohar ([@shyamlohar](https://github.com/shyamlohar)) – [Draftbox](https://draftbox.co)
79 | - Tanmay Desai ([@tanmaydesai89](https://github.com/tanmaydesai89)) – [Draftbox](https://draftbox.co)
80 |
81 | ## Contributions
82 | PRs are welcome! Consider contributing to this project if you are missing feature that is also useful for others.
83 |
84 | # Copyright & License
85 |
86 | Copyright (c) 2020 [Draftbox](https://draftbox.co) - Released under the [MIT license](LICENSE).
87 |
--------------------------------------------------------------------------------
/example/.env.development:
--------------------------------------------------------------------------------
1 | FORM_URL=http://localhost:3000/api/project/5e81b8923d8c2d64d8549add/forms
2 | GATSBY_DISQUS_SHORTNAME=
3 | GATSBY_FB_APP_ID=
4 |
--------------------------------------------------------------------------------
/example/.env.production:
--------------------------------------------------------------------------------
1 | FORM_URL=http://localhost:3000/api/project/5e81b8923d8c2d64d8549add/forms
2 | GATSBY_DISQUS_SHORTNAME=attila-theme
3 | FB_APP_ID=
4 |
--------------------------------------------------------------------------------
/example/.wordpress-config.json:
--------------------------------------------------------------------------------
1 | {
2 | "baseUrl": "wordpress.theasdfghjkl.com",
3 | "protocol": "https",
4 | "hostingWPCOM": false,
5 | "useACF": true,
6 | "includedRoutes": [
7 | "**/categories",
8 | "**/posts",
9 | "**/pages",
10 | "**/media",
11 | "**/tags",
12 | "**/taxonomies",
13 | "**/users"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
1 | # Gatsby Theme Minimal Example
2 |
3 | > See the [base README](https://github.com/draftbox-co/gatsby-wordpress-balsa-theme/blob/master/README.md) for instructions on how to use this example.
4 |
5 | # Copyright & License
6 |
7 | Copyright (c) 2020 Draftbox - Released under the [MIT license](LICENSE).
--------------------------------------------------------------------------------
/example/entities.json:
--------------------------------------------------------------------------------
1 | [{"__type":"wordpress__site_metadata","name":"user's Blog!","description":"Just another WordPress site","url":"http://withssl.theasdfghjkl.com","home":"https://withssl.theasdfghjkl.com"},{"id":10,"date":"2020-05-18T10:14:13","date_gmt":"2020-05-18T10:14:13","guid":{"rendered":"http://52.54.96.45/?p=10"},"modified":"2020-05-18T14:37:21","modified_gmt":"2020-05-18T14:37:21","slug":"okay","status":"publish","type":"post","link":"https://withssl.theasdfghjkl.com/2020/05/18/okay/","title":{"rendered":"Okay"},"content":{"rendered":"\nOkay
\n","protected":false},"excerpt":{"rendered":"Okay
\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/posts/10"}],"collection":[{"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/posts"}],"about":[{"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/types/post"}],"author":[{"embeddable":true,"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/users/1"}],"replies":[{"embeddable":true,"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/comments?post=10"}],"version-history":[{"count":1,"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/posts/10/revisions"}],"predecessor-version":[{"id":11,"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/posts/10/revisions/11"}],"wp:attachment":[{"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/media?parent=10"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/categories?post=10"},{"taxonomy":"post_tag","embeddable":true,"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/tags?post=10"}],"curies":[{"name":"wp","href":"https://api.w.org/{rel}","templated":true}]},"__type":"wordpress__POST"},{"id":1,"date":"2020-04-29T22:57:12","date_gmt":"2020-04-29T22:57:12","guid":{"rendered":"http:/?p=1"},"modified":"2020-05-19T13:34:56","modified_gmt":"2020-05-19T13:34:56","slug":"hello-world","status":"publish","type":"post","link":"https://withssl.theasdfghjkl.com/2020/04/29/hello-world/","title":{"rendered":"Hello world!"},"content":{"rendered":"\nWelcome to WordPress. This is your first post. Edit or delete it, then start writing!
\n\n\n\n
\n\n\n\nWriting Caption
\n","protected":false},"excerpt":{"rendered":"Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/posts/1"}],"collection":[{"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/posts"}],"about":[{"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/types/post"}],"author":[{"embeddable":true,"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/users/1"}],"replies":[{"embeddable":true,"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/comments?post=1"}],"version-history":[{"count":3,"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/posts/1/revisions"}],"predecessor-version":[{"id":9,"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/posts/1/revisions/9"}],"wp:attachment":[{"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/tags?post=1"}],"curies":[{"name":"wp","href":"https://api.w.org/{rel}","templated":true}]},"__type":"wordpress__POST"},{"id":2,"date":"2020-04-29T22:57:12","date_gmt":"2020-04-29T22:57:12","guid":{"rendered":"http:/?page_id=2"},"modified":"2020-04-29T22:57:12","modified_gmt":"2020-04-29T22:57:12","slug":"sample-page","status":"publish","type":"page","link":"https://withssl.theasdfghjkl.com/sample-page/","title":{"rendered":"Sample Page"},"content":{"rendered":"\nThis is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:
\n\n\n\nHi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
…or something like this:
\n\n\n\nThe XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.
As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!
\n","protected":false},"excerpt":{"rendered":"This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this: Hi there! I’m a bike messenger […]
\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":[],"_links":{"self":[{"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/pages/2"}],"collection":[{"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/pages"}],"about":[{"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/types/page"}],"author":[{"embeddable":true,"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/users/1"}],"replies":[{"embeddable":true,"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/comments?post=2"}],"version-history":[{"count":0,"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/pages/2/revisions"}],"wp:attachment":[{"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/media?parent=2"}],"curies":[{"name":"wp","href":"https://api.w.org/{rel}","templated":true}]},"__type":"wordpress__PAGE"},{"category":{"name":"Categories","slug":"category","description":"","types":["post"],"hierarchical":true,"rest_base":"categories","_links":{"collection":[{"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/taxonomies"}],"wp:items":[{"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/categories"}],"curies":[{"name":"wp","href":"https://api.w.org/{rel}","templated":true}]}},"post_tag":{"name":"Tags","slug":"post_tag","description":"","types":["post"],"hierarchical":false,"rest_base":"tags","_links":{"collection":[{"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/taxonomies"}],"wp:items":[{"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/tags"}],"curies":[{"name":"wp","href":"https://api.w.org/{rel}","templated":true}]}},"__type":"wordpress__wp_taxonomies"},{"id":1,"count":2,"description":"","link":"https://withssl.theasdfghjkl.com/category/uncategorized/","name":"Uncategorized","slug":"uncategorized","taxonomy":"category","parent":0,"meta":[],"_links":{"self":[{"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/categories/1"}],"collection":[{"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/categories"}],"about":[{"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/taxonomies/category"}],"wp:post_type":[{"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/posts?categories=1"}],"curies":[{"name":"wp","href":"https://api.w.org/{rel}","templated":true}]},"__type":"wordpress__CATEGORY"},{"id":1,"name":"user","url":"http:","description":"","link":"https://withssl.theasdfghjkl.com/author/user/","slug":"user","avatar_urls":{"24":"https://secure.gravatar.com/avatar/b58996c504c5638798eb6b511e6f49af?s=24&d=mm&r=g","48":"https://secure.gravatar.com/avatar/b58996c504c5638798eb6b511e6f49af?s=48&d=mm&r=g","96":"https://secure.gravatar.com/avatar/b58996c504c5638798eb6b511e6f49af?s=96&d=mm&r=g"},"meta":[],"_links":{"self":[{"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/users/1"}],"collection":[{"href":"https://withssl.theasdfghjkl.com/wp-json/wp/v2/users"}]},"__type":"wordpress__wp_users"}]
--------------------------------------------------------------------------------
/example/gatsby-config.js:
--------------------------------------------------------------------------------
1 | let wordpressConfig;
2 |
3 | try {
4 | wordpressConfig = require(`./.wordpress-config`);
5 | siteConfig = require("./site-config");
6 | } catch (e) {
7 | console.log(e);
8 | }
9 |
10 | module.exports = {
11 | plugins: [
12 | {
13 | resolve: `@draftbox-co/gatsby-wordpress-balsa-theme`,
14 | options: {
15 | wordpressConfig,
16 | siteConfig,
17 | },
18 | },
19 | ],
20 | };
21 |
--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "author": "Draftbox",
6 | "license": "MIT",
7 | "scripts": {
8 | "develop": "gatsby develop",
9 | "build": "gatsby build",
10 | "serve": "gatsby serve"
11 | },
12 | "dependencies": {
13 | "@draftbox-co/gatsby-wordpress-balsa-theme": "^1.0.0",
14 | "disqus-react": "^1.0.7",
15 | "gatsby": "2.20.24",
16 | "node-fetch": "^2.6.0",
17 | "react": "^16.12.0",
18 | "react-dom": "^16.12.0",
19 | "react-facebook": "^8.1.4"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/example/setup.js:
--------------------------------------------------------------------------------
1 | (async () => {
2 | const wpConfig = require('./.wordpress-config.json');
3 | const siteConfig = require('./site-config');
4 | const fetch = require('node-fetch');
5 | const fs = require('fs');
6 | const path = require('path');
7 | const FormData = require('form-data');
8 |
9 | console.log(wpConfig);
10 | if (Object.keys(wpConfig).length) {
11 | let siteData = {};
12 | let token = '';
13 | if (wpConfig.hostingWPCOM) {
14 | const apiUrl = 'https://public-api.wordpress.com/oauth2/token';
15 | try {
16 | console.log(JSON.stringify({
17 | client_id: wpConfig.auth.wpcom_app_clientId,
18 | client_secret: wpConfig.auth.wpcom_app_clientSecret,
19 | username: wpConfig.auth.wpcom_user,
20 | password: wpConfig.auth.wpcom_pass,
21 | grant_type: 'password'
22 | }));
23 | const formData = new FormData();
24 | formData.append('client_id', wpConfig.auth.wpcom_app_clientId);
25 | formData.append('client_secret', wpConfig.auth.wpcom_app_clientSecret);
26 | formData.append('username', wpConfig.auth.wpcom_user);
27 | formData.append('password', wpConfig.auth.wpcom_pass);
28 | formData.append('grant_type', 'password');
29 | console.log(formData);
30 | const resp = await fetch(apiUrl, {
31 | method: 'POST',
32 | body: formData
33 | });
34 | console.log(resp.status);
35 | if (resp.status === 200) {
36 | const res = await resp.json();
37 | console.log('final json', res);
38 | token = res.access_token;
39 | const apiUrlToken = `https://public-api.wordpress.com/wp/v2/sites/${wpConfig.baseUrl}/settings`;
40 | console.log(apiUrlToken , token);
41 | const respToken = await fetch(apiUrlToken, {
42 | method: 'GET',
43 | headers: {
44 | 'Content-Type': 'application/json',
45 | Authorization: `Bearer ${token}`
46 | }
47 | });
48 | console.log(respToken.status);
49 | if (respToken.status === 200) {
50 | const finalRes = await respToken.json();
51 | siteData = finalRes;
52 | }
53 | }
54 | } catch (err) {
55 | console.log('error while fetching wordpress auth token', err);
56 | }
57 | } else {
58 | try {
59 | const apiUrl = `https://${wpConfig.baseUrl}/wp-json`;
60 | console.log('api - url', apiUrl);
61 | const resp = await fetch(apiUrl);
62 | console.log(resp.status);
63 | if (resp.status === 200) {
64 | const finalRes = await resp.json()
65 | siteData = finalRes;
66 | }
67 | } catch (err) {
68 | console.log('error while fetching wordpress self hosted', err);
69 | }
70 | }
71 | console.log('ssiiitteedaaattaa', siteData);
72 | const masterConfig = {"subscribeWidget":{"title":"","helpText":"","successMessage":""},"footer":{"copyright":"","navigation":[{"label":"","url":""}]},"header":{"navigation":[{"label":"","url":""}]},"socialLinks":{"twitter":"","facebook":"","instagram":"","linkedin":"","github":""},"contactWidget":{"title":"","successMessage":""},"identity":{"siteTitle":"","siteDescription":"","language":"en","postsPerPage":10,"logoUrl":"","iconUrl":"","coverUrl":"","alternateLogoUrl":""},"metadata":{"title":"","description":""},"twitterCard":{"title":"","description":"","imageUrl":"","username":""},"facebookCard":{"title":"","description":"","imageUrl":"","appId":"","width":1000,"height":523}}
73 | const newSiteConfig = Object.assign({}, masterConfig);
74 | if (siteData && siteData.name) {
75 | newSiteConfig.subscribeWidget.title = `Subscribe to ${siteData.name}`;
76 | newSiteConfig.subscribeWidget.successMessage = `Thanks for subscribing to ${siteData.name}.`;
77 | newSiteConfig.subscribeWidget.helpText = 'Get the latest posts delivered right to your inbox.';
78 | newSiteConfig.footer.copyright = siteData.name;
79 | newSiteConfig.contactWidget.title = `Contact ${siteData.name}`;
80 | newSiteConfig.contactWidget.successMessage = `We'll get in touch with you soon.`;
81 | newSiteConfig.identity.siteTitle = siteData.name;
82 | newSiteConfig.identity.siteDescription = siteData.description || '';
83 | newSiteConfig.metadata.title = siteData.name;
84 | newSiteConfig.metadata.description = siteData.description || '';
85 | newSiteConfig.twitterCard.title = siteData.name;
86 | newSiteConfig.twitterCard.description = siteData.description || '';
87 | newSiteConfig.facebookCard.title = siteData.name;
88 | newSiteConfig.facebookCard.description = siteData.description || '';
89 | }
90 | if (siteData && siteData.title) {
91 | newSiteConfig.subscribeWidget.title = `Subscribe to ${siteData.title}`;
92 | newSiteConfig.subscribeWidget.successMessage = `Thanks for subscribing to ${siteData.title}.`;
93 | newSiteConfig.subscribeWidget.helpText = 'Get the latest posts delivered right to your inbox.';
94 | newSiteConfig.footer.copyright = siteData.title;
95 | newSiteConfig.contactWidget.title = `Contact ${siteData.title}`;
96 | newSiteConfig.contactWidget.successMessage = `We'll get in touch with you soon.`;
97 | newSiteConfig.identity.siteTitle = siteData.title;
98 | newSiteConfig.identity.siteDescription = siteData.description || '';
99 | newSiteConfig.metadata.title = siteData.title;
100 | newSiteConfig.metadata.description = siteData.description || '';
101 | newSiteConfig.twitterCard.title = siteData.title;
102 | newSiteConfig.twitterCard.description = siteData.description || '';
103 | newSiteConfig.facebookCard.title = siteData.title;
104 | newSiteConfig.facebookCard.description = siteData.description || '';
105 | }
106 |
107 | const finalConfig = Object.assign({}, siteConfig, {
108 | metadata: newSiteConfig.metadata,
109 | twitterCard: newSiteConfig.twitterCard,
110 | facebookCard: newSiteConfig.facebookCard
111 | }, newSiteConfig.identity);
112 | fs.writeFileSync(path.join(__dirname, 'site-config-new.js'), `module.exports = ${JSON.stringify(finalConfig, null, 2)}`);
113 | console.log('done');
114 | } else {
115 | console.error('cant process empty config');
116 | }
117 | })();
--------------------------------------------------------------------------------
/example/site-config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | siteUrl: "https://wp-balsa-preview.draftbox.co", // Site domain. Do not include a trailing slash!
3 |
4 | postsPerPage: 9, // Number of posts shown on paginated pages (changes this requires sometimes to delete the cache)
5 |
6 | siteTitleMeta: "Built with Draftbox", // This allows an alternative site title for meta data for pages.
7 | siteDescriptionMeta:
8 | "Lightning fast, secure front-end for your WordPress or Ghost blog, without coding", // This allows an alternative site description for meta data for pages.
9 |
10 | shareImageWidth: 1000, // Change to the width of your default share image
11 | shareImageHeight: 523, // Change to the height of your default share image
12 |
13 | shortTitle: "Built with Draftbox", // Used for App manifest e.g. Mobile Home Screen
14 | siteIcon: "favicon.png", // Logo in /static dir used for SEO, RSS, and App manifest
15 | backgroundColor: "#e9e9e9", // Used for Offline Manifest
16 | themeColor: "#15171A", // Used for Offline Manifest
17 | apiUrl: "https://wordpress.theasdfghjkl.com",
18 | subscribeWidget: {
19 | visible: true,
20 | title: "Subscribe to Draftbox",
21 | helpText: "Get the latest posts delivered right to your inbox.",
22 | successMessage: "Thanks for subscribing to Draftbox.",
23 | },
24 | header: {
25 | navigation: [
26 | {
27 | label: "Home",
28 | url: "https://wp-balsa-preview.draftbox.co/",
29 | },
30 | {
31 | label: "Contact",
32 | url: "https://wp-balsa-preview.draftbox.co/contact",
33 | },
34 | ],
35 | },
36 | footer: {
37 | copyright: "Built with Draftbox",
38 | navigation: [
39 | {
40 | label: "Home",
41 | url: "https://wp-balsa-preview.draftbox.co/",
42 | },
43 | {
44 | label: "Sitemap",
45 | url: "https://wp-balsa-preview.draftbox.co/sitemap.xml",
46 | },
47 | {
48 | label: "RSS",
49 | url: "https://wp-balsa-preview.draftbox.co/rss.xml",
50 | },
51 | {
52 | label: "Contact",
53 | url: "https://wp-balsa-preview.draftbox.co/contact",
54 | },
55 | {
56 | label: "External Link",
57 | url: "https://spectrum.chat/gatsby-js/themes?tab=posts",
58 | },
59 | ],
60 | },
61 | socialLinks: {
62 | twitter: "https://twitter.com/draftboxhq",
63 | facebook: "https://facebook.com/",
64 | instagram: "https://www.instagram.com/",
65 | linkedin: "https://linkedin.com/",
66 | github: "https://github.com/draftbox-co",
67 | pinterest: "",
68 | youtube: "",
69 | dribbble: "",
70 | behance: "",
71 | externalLink: "",
72 | whatsapp: "",
73 | },
74 | contactWidget: {
75 | title: "Contact Built with Draftbox",
76 | successMessage: "We’ll get in touch with you soon.",
77 | },
78 | metadata: {
79 | title: "Built with Draftbox",
80 | description:
81 | "Lightning fast, secure front-end for your WordPress or Ghost blog, without coding. Draftbox is a new-age blogging platform for everyone, built on Gatsby.",
82 | },
83 | twitterCard: {
84 | title: "Built with Draftbox",
85 | description:
86 | "Lightning fast, secure front-end for your WordPress or Ghost blog, without coding. Draftbox is a new-age blogging platform for everyone, built on Gatsby.",
87 | imageUrl: "twitterImage.png",
88 | username: "@DraftboxHQ",
89 | },
90 | facebookCard: {
91 | title: "Built with Bro",
92 | description:
93 | "Lightning fast, secure front-end for your WordPress or Ghost blog, without coding. Draftbox is a new-age blogging platform for everyone, built on Gatsby.",
94 | imageUrl: "facebookImage.jpg",
95 | appId: "2391725224459953",
96 | },
97 | siteTitle: "Built with Draftbox",
98 | siteDescription:
99 | "Lightning fast, secure front-end for your WordPress or Ghost blog, without coding.",
100 | language: "en",
101 | logoUrl: "logo.png",
102 | iconUrl: "favicon.png",
103 | coverUrl: "cover.jpg",
104 | alternateLogoUrl: "logo.png",
105 | themeConfig: {
106 | variables: [
107 | {
108 | varName: "--primary-color",
109 | value: `#2b6cb0`,
110 | },
111 | {
112 | varName: "--primary-color-active",
113 | value: `#2a4365`,
114 | },
115 | {
116 | varName: "--primary-color-light",
117 | value: `#bee3f8`,
118 | },
119 | {
120 | varName: "--sans-font",
121 | value: `"Montserrat"`,
122 | },
123 | {
124 | varName: "--sans-font-normal",
125 | value: `400`,
126 | },
127 | {
128 | varName: "--sans-font-medium",
129 | value: `500`,
130 | },
131 | {
132 | varName: "--sans-font-semibold",
133 | value: `600`,
134 | },
135 | {
136 | varName: "--sans-font-bold",
137 | value: `700`,
138 | },
139 | {
140 | varName: "--serif-font",
141 | value: `Merriweather`,
142 | },
143 | { varName: "--serif-font-light", value: `300` },
144 | { varName: "--serif-font-normal", value: `400` },
145 | { varName: "--serif-font-medium", value: `400` },
146 | { varName: "--serif-font-bold", value: `700` },
147 | ],
148 | fonts: [
149 | {
150 | family: "Montserrat",
151 | variants: ["400", "500", "600", "700"],
152 | //subsets: ['latin']
153 | //text: 'Hello'
154 | fontDisplay: "swap",
155 | strategy: "selfHosted", // 'base64' || 'cdn'
156 | },
157 | {
158 | family: "Merriweather",
159 | variants: ["300", "400", "700"],
160 | //subsets: ['latin']
161 | //text: 'Hello'
162 | fontDisplay: "swap",
163 | strategy: "selfHosted", // 'base64' || 'cdn'
164 | },
165 | ],
166 | },
167 | };
168 |
--------------------------------------------------------------------------------
/example/src/@draftbox-co/gatsby-wordpress-balsa-theme/components/disqus.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { DiscussionEmbed } from "disqus-react";
3 |
4 | const Disqus = props => {
5 | const disqusConfig = {
6 | shortname: process.env.GATSBY_DISQUS_SHORTNAME,
7 | identifier: props.slug,
8 | title: props.slug
9 | };
10 |
11 | return process.env.GATSBY_DISQUS_SHORTNAME ? (
12 | Okay
15 | );
16 | };
17 |
18 | export default Disqus;
19 |
--------------------------------------------------------------------------------
/example/src/@draftbox-co/gatsby-wordpress-balsa-theme/components/fb-comments.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { FacebookProvider, Comments } from 'react-facebook';
3 |
4 | const FbComments = props => {
5 | return process.env.GATSBY_FB_APP_ID ? (
6 |
7 |
8 |
9 | ) : (
10 | <>
11 | );
12 | };
13 |
14 | export default FbComments;
15 |
--------------------------------------------------------------------------------
/example/static/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/draftbox-co/gatsby-wordpress-balsa-theme/eb632758fa5cc89c2e5edbef0af121147f5df9c3/example/static/cover.jpg
--------------------------------------------------------------------------------
/example/static/cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/draftbox-co/gatsby-wordpress-balsa-theme/eb632758fa5cc89c2e5edbef0af121147f5df9c3/example/static/cover.png
--------------------------------------------------------------------------------
/example/static/cover_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/draftbox-co/gatsby-wordpress-balsa-theme/eb632758fa5cc89c2e5edbef0af121147f5df9c3/example/static/cover_1.png
--------------------------------------------------------------------------------
/example/static/facebookImage.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/draftbox-co/gatsby-wordpress-balsa-theme/eb632758fa5cc89c2e5edbef0af121147f5df9c3/example/static/facebookImage.jpg
--------------------------------------------------------------------------------
/example/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/draftbox-co/gatsby-wordpress-balsa-theme/eb632758fa5cc89c2e5edbef0af121147f5df9c3/example/static/favicon.ico
--------------------------------------------------------------------------------
/example/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/draftbox-co/gatsby-wordpress-balsa-theme/eb632758fa5cc89c2e5edbef0af121147f5df9c3/example/static/favicon.png
--------------------------------------------------------------------------------
/example/static/favicon_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/draftbox-co/gatsby-wordpress-balsa-theme/eb632758fa5cc89c2e5edbef0af121147f5df9c3/example/static/favicon_1.png
--------------------------------------------------------------------------------
/example/static/images/logo.svg:
--------------------------------------------------------------------------------
1 |
\n",
18 | "caption": "",
19 | "alt_text": "The Gatsby Experience",
20 | "media_type": "image",
21 | "mime_type": "image/jpeg",
22 | "media_details": {
23 | "width": 1640,
24 | "height": 856,
25 | "file": "2020/03/The-Gatsby-Experience.jpg",
26 | "image_meta": {
27 | "aperture": "0",
28 | "credit": "",
29 | "camera": "",
30 | "caption": "",
31 | "created_timestamp": "0",
32 | "copyright": "",
33 | "focal_length": "0",
34 | "iso": "0",
35 | "shutter_speed": "0",
36 | "title": "",
37 | "orientation": "0",
38 | "keywords": []
39 | }
40 | },
41 | "post": 1055,
42 | "source_url": "https://ipldreampredictions.com/wp-content/uploads/2020/03/The-Gatsby-Experience.jpg",
43 | "_links": {
44 | "self": [
45 | {
46 | "href": "https://ipldreampredictions.com/wp-json/wp/v2/media/1056"
47 | }
48 | ],
49 | "collection": [
50 | {
51 | "href": "https://ipldreampredictions.com/wp-json/wp/v2/media"
52 | }
53 | ],
54 | "about": [
55 | {
56 | "href": "https://ipldreampredictions.com/wp-json/wp/v2/types/attachment"
57 | }
58 | ],
59 | "author": [
60 | {
61 | "embeddable": true,
62 | "href": "https://ipldreampredictions.com/wp-json/wp/v2/users/1"
63 | }
64 | ],
65 | "replies": [
66 | {
67 | "embeddable": true,
68 | "href": "https://ipldreampredictions.com/wp-json/wp/v2/comments?post=1056"
69 | }
70 | ]
71 | },
72 | "id": "d35b2920-0ff4-5592-a197-b17e501f6694",
73 | "author___NODE": "7469b891-a47f-5bae-a6f5-a7128ec2a04d",
74 | "localFile___NODE": "c77c948d-38e3-5338-895b-49a9cbeac481",
75 | "path": "/2020/03/19/the-gatsby-experience-the-cabaret-at-footlights-theatrical/the-gatsby-experience-12/",
76 | "children": [],
77 | "parent": null,
78 | "internal": {
79 | "type": "wordpress__wp_media",
80 | "contentDigest": "00471e44d617f5a5ce5fe5619e911f56"
81 | }
82 | }
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/README.md:
--------------------------------------------------------------------------------
1 | [](https://draftbox.co)
2 |
3 | # gatsby-wordpress-balsa-theme
4 |
5 | A Gatsby theme plugin for creating blogs from headless WordPress CMS.
6 |
7 | Turn your WordPress blog into a lightning fast static website. This Gatsby theme is a frontend replacement of the WordPress engine featuring the standard Balsa theme skin and functionality. All content is sourced from a headless WordPress CMS.
8 |
9 | > This theme is being used at [Draftbox](https://draftbox.co). Get lightning fast, secure front-end for your WordPress or Ghost blog, in 5 minutes or less, without coding. For our fellow devs, we also provide code export feature.
10 |
11 | ## Demo
12 |
13 | Play with the [Demo](https://wp-balsa-preview.draftbox.co/) to get a first impression.
14 |
15 | ## Features
16 |
17 | - Balsa theme by Draftbox
18 | - SEO optimized
19 | - Fully responsive
20 | - Gatsby images
21 | - Styled 404 page
22 | - RSS Feed
23 | - AMP Pages
24 | - Sitemap
25 | - Contact Form
26 | - Subscribe Form
27 | - Social Sharing
28 | - Composable and extensible
29 |
30 | ## Installation
31 |
32 | > Head over to the [starter repo](https://github.com/draftbox-co/gatsby-wordpress-balsa-starter) to get up and running quickly!
33 |
34 | If you want to add this blog theme to an existing site, follow these instructions:
35 |
36 | 1. Install the blog theme
37 |
38 | ```bash
39 | yarn add @draftbox-co/gatsby-wordpress-balsa-theme
40 | # or
41 | npm install @draftbox-co/gatsby-wordpress-balsa-theme --save
42 | ```
43 |
44 | 2. Create following files in your root directory with your desired config.
45 |
46 | - Create siteConfig.js in root directory and configure it as shown below.
47 |
48 | ```js
49 | //siteConfig.js
50 | module.exports = {
51 | siteUrl: "https://wp-balsa-preview.draftbox.com", // Site domain. Do not include a trailing slash!
52 |
53 | postsPerPage: 10, // Number of posts shown on paginated pages (changes this requires sometimes to delete the cache)
54 |
55 | siteTitleMeta: "Built with Draftbox", // This allows an alternative site title for meta data for pages.
56 | siteDescriptionMeta:
57 | "Lightning fast, secure front-end for your WordPress or Ghost blog, without coding", // This allows an alternative site description for meta data for pages.
58 |
59 | shareImageWidth: 1000, // Change to the width of your default share image
60 | shareImageHeight: 523, // Change to the height of your default share image
61 |
62 | shortTitle: "Built with Draftbox", // Used for App manifest e.g. Mobile Home Screen
63 | siteIcon: "favicon.png", // Logo in /static dir used for SEO, RSS, and App manifest
64 | backgroundColor: "#e9e9e9", // Used for Offline Manifest
65 | themeColor: "#15171A", // Used for Offline Manifest
66 | apiUrl: "https://wordpress.theasdfghjkl.com",
67 | subscribeWidget: {
68 | title: "Subscribe to Draftbox",
69 | helpText: "Get the latest posts delivered right to your inbox.",
70 | successMessage: "Thanks for subscribing to Draftbox.",
71 | },
72 | header: {
73 | navigation: [
74 | {
75 | label: "Home",
76 | url: "https://wp-balsa-preview.draftbox.com/",
77 | },
78 | {
79 | label: "Contact",
80 | url: "https://wp-balsa-preview.draftbox.com/contact",
81 | },
82 | ],
83 | },
84 | footer: {
85 | copyright: "Built with Draftbox",
86 | navigation: [
87 | {
88 | label: "Home",
89 | url: "https://wp-balsa-preview.draftbox.com/",
90 | },
91 | {
92 | label: "Sitemap",
93 | url: "https://wp-balsa-preview.draftbox.com/sitemap.xml",
94 | },
95 | {
96 | label: "RSS",
97 | url: "https://wp-balsa-preview.draftbox.com/rss.xml",
98 | },
99 | {
100 | label: "Contact",
101 | url: "https://wp-balsa-preview.draftbox.com/contact",
102 | },
103 | {
104 | label: "External Link",
105 | url: "https://spectrum.chat/gatsby-js/themes?tab=posts",
106 | },
107 | ],
108 | },
109 | socialLinks: {
110 | twitter: "https://twitter.com/draftboxhq",
111 | facebook: "https://facebook.com/",
112 | instagram: "https://www.instagram.com/",
113 | linkedin: "https://linkedin.com/",
114 | github: "https://github.com/draftbox-co",
115 | },
116 | contactWidget: {
117 | title: "Contact Built with Draftbox",
118 | successMessage: "We’ll get in touch with you soon.",
119 | },
120 | };
121 | ```
122 |
123 | In the configuration shown above, the most important fields to be changed are `siteUrl`, `siteTitleMeta` and `siteDescriptionMeta`. Update at least those to fit your needs.
124 |
125 | - Create .wordpress-config.json in root directory and configure it as shown below.
126 |
127 | ```bash
128 | {
129 | "baseUrl": "yourwordpressblog.com",
130 | "protocol": "https",
131 | "hostingWPCOM": false,
132 | "useACF": true,
133 | "includedRoutes": [
134 | "**/categories",
135 | "**/posts",
136 | "**/pages",
137 | "**/media",
138 | "**/tags",
139 | "**/taxonomies",
140 | "**/users"
141 | ]
142 | }
143 | ```
144 |
145 | In the configuration shown above, the most important fields to be changed are `baseUrl` and `hostingWPCOM` . Update those with your configuration. example shown above works great for self hosted wordpress.
146 |
147 | If your blog is hosted on wordpress.com you will have to add few extra keys for reference check out [wordpress-source-docs](https://www.gatsbyjs.org/packages/gatsby-source-wordpress/).
148 |
149 | 2. Add the following configuration to your `gatsby-config.js` file
150 |
151 | ```js
152 | // gatsby-config.js
153 |
154 | let siteConfig;
155 | let wordpressConfig;
156 |
157 | try {
158 | siteConfig = require(`./siteConfig`);
159 | wordpressConfig = require(`./.wordpress-config`);
160 |
161 | console.log(wordpressConfig);
162 | } catch (e) {
163 | console.log(e);
164 | }
165 |
166 | module.exports = {
167 | plugins: [
168 | {
169 | resolve: `@draftbox-co/gatsby-wordpress-balsa-theme`,
170 | options: {
171 | wordpressConfig,
172 | siteConfig: siteConfig,
173 | },
174 | },
175 | ],
176 | };
177 | ```
178 |
179 | ## Authors
180 |
181 | - Arun Priyadarshi ([@Gunnerforlife](https://github.com/Gunnerforlife)) – [Draftbox](https://draftbox.co)
182 | - Keyur Raval ([@thandaanda](https://github.com/thandaanda)) – [Draftbox](https://draftbox.co)
183 | - Shyam Lohar ([@shyamlohar](https://github.com/shyamlohar)) – [Draftbox](https://draftbox.co)
184 | - Tanmay Desai ([@tanmaydesai89](https://github.com/tanmaydesai89)) – [Draftbox](https://draftbox.co)
185 |
186 | ## Contributions
187 |
188 | PRs are welcome! Consider contributing to this project if you are missing feature that is also useful for others.
189 |
190 | # Copyright & License
191 |
192 | Copyright (c) 2020 [Draftbox](https://draftbox.co) - Released under the [MIT license](LICENSE).
193 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/gatsby-browser.js:
--------------------------------------------------------------------------------
1 | /* global window, document */
2 |
3 | const instaEmbedClasses = [".instagram-media"].join(",");
4 | const twitterEmbedClasses = [
5 | ".twitter-tweet",
6 | ".twitter-timeline",
7 | ".twitter-follow-button",
8 | ".twitter-share-button",
9 | ].join(",");
10 | const scrollTo = (id) => () => {
11 | const el = document.querySelector(id);
12 | if (el) return window.scrollTo(0, el.offsetTop - 20);
13 | return false;
14 | };
15 |
16 | const injectScript = function injectScript() {
17 | var js = document.createElement("script");
18 | var firstScript = document.getElementsByTagName("script")[0];
19 | js.id = "gatsby-plugin-instagram";
20 | js.src = "https://instagram.com/embed.js";
21 | firstScript.parentNode.insertBefore(js, firstScript);
22 | injected = true;
23 | if (
24 | typeof instgrm !== "undefined" &&
25 | window.instgrm.Embeds &&
26 | typeof window.instgrm.Embeds.process === "function"
27 | ) {
28 | // manual process
29 | window.instgrm.Embeds.process();
30 | }
31 | return true;
32 | };
33 |
34 | var injectTwitterScript = function injectTwitterScript() {
35 | function addJS(jsCode) {
36 | var s = document.createElement("script");
37 | s.type = "text/javascript";
38 | s.innerText = jsCode;
39 | document.getElementsByTagName("head")[0].appendChild(s);
40 | injectedTwitterScript = true;
41 |
42 | if (
43 | typeof twttr !== "undefined" &&
44 | window.twttr.widgets &&
45 | typeof window.twttr.widgets.load === "function"
46 | ) {
47 | window.twttr.widgets.load();
48 | }
49 | }
50 |
51 | addJS(
52 | '\n window.twttr = (function(d, s, id) {\n var js,\n fjs = d.getElementsByTagName(s)[0],\n t = window.twttr || {};\n if (d.getElementById(id)) return t;\n js = d.createElement(s);\n js.id = id;\n js.src = "https://platform.twitter.com/widgets.js";\n fjs.parentNode.insertBefore(js, fjs);\n t._e = [];\n t.ready = function(f) {\n t._e.push(f);\n };\n return t;\n })(document, "script", "twitter-wjs");\n '
53 | );
54 | };
55 | let injected = false;
56 | let injectedTwitterScript = false;
57 |
58 | export const onRouteUpdate = ({ location: { hash } }) => {
59 | if (hash) {
60 | window.setTimeout(scrollTo(hash), 10);
61 | }
62 |
63 | if (document.querySelector(instaEmbedClasses) !== null) {
64 | setTimeout(() => {
65 | if (!injected) {
66 | window.addEventListener(
67 | "scroll",
68 | function () {
69 | injectScript();
70 | },
71 | { once: true }
72 | );
73 | }
74 | }, 2000);
75 | }
76 |
77 | if (document.querySelector(twitterEmbedClasses) !== null) {
78 | setTimeout(() => {
79 | if (!injectedTwitterScript) {
80 | window.addEventListener(
81 | "scroll",
82 | function () {
83 | injectTwitterScript();
84 | },
85 | { once: true }
86 | );
87 | }
88 | }, 2000);
89 | }
90 | };
91 |
92 | export const registerServiceWorker = () => true;
93 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/gatsby-config.js:
--------------------------------------------------------------------------------
1 | const path = require(`path`);
2 |
3 | const siteConfigDefaults = require(`./src/utils/siteConfigDefaults`);
4 |
5 | /**
6 | * This is the place where you can tell Gatsby which plugins to use
7 | * and set them up the way you want.
8 | *
9 | * Further info 👉🏼 https://www.gatsbyjs.org/docs/gatsby-config/
10 | *
11 | */
12 | module.exports = (themeOptions) => {
13 | const siteConfig = themeOptions.siteConfig || siteConfigDefaults;
14 | const wordpressConfig = themeOptions.wordpressConfig;
15 |
16 | const configOptions = {
17 | siteMetadata: siteConfig,
18 | plugins: [
19 | /**
20 | * Content Plugins
21 | */
22 | `gatsby-plugin-typescript`,
23 | {
24 | resolve: `gatsby-source-wordpress`,
25 | options: wordpressConfig,
26 | },
27 | {
28 | resolve: `gatsby-source-filesystem`,
29 | options: {
30 | path: path.join(__dirname, `src`, `pages`),
31 | name: `pages`,
32 | },
33 | },
34 | // Setup for optimized images.
35 | // See https://www.gatsbyjs.org/packages/gatsby-image/
36 | {
37 | resolve: `gatsby-source-filesystem`,
38 | options: {
39 | path: path.join(__dirname, `src`, `images`),
40 | name: `images`,
41 | },
42 | },
43 | `gatsby-plugin-sharp`,
44 | `gatsby-transformer-sharp`,
45 | {
46 | resolve: `gatsby-plugin-advanced-sitemap`,
47 | options: {
48 | query: `
49 | {
50 | allWordpressPost {
51 | edges {
52 | node {
53 | id
54 | slug: permaLinkSlug
55 | date
56 | }
57 | }
58 | }
59 | allWordpressTag(filter: { count: { gt: 0 } }) {
60 | edges {
61 | node {
62 | name
63 | slug
64 | }
65 | }
66 | }
67 | allWordpressWpUsers {
68 | edges {
69 | node {
70 | name
71 | slug
72 | }
73 | }
74 | }
75 | }`,
76 | mapping: {
77 | allWordpressPost: {
78 | sitemap: `posts`,
79 | },
80 | allWordpressTag: {
81 | sitemap: `tags`,
82 | },
83 | allWordpressWpUsers: {
84 | sitemap: `authors`,
85 | },
86 | },
87 | exclude: [
88 | `/dev-404-page`,
89 | `/404`,
90 | `/404.html`,
91 | `/offline-plugin-app-shell-fallback`,
92 | `/offline`,
93 | `/offline.html`,
94 | ],
95 | createLinkInHead: true,
96 | addUncaughtPages: true,
97 | },
98 | },
99 | `gatsby-plugin-catch-links`,
100 | `gatsby-plugin-react-helmet`,
101 | `gatsby-plugin-force-trailing-slashes`,
102 | {
103 | resolve: `gatsby-plugin-manifest`,
104 | options: {
105 | name: siteConfig.siteTitle,
106 | short_name: siteConfig.shortTitle,
107 | start_url: `/`,
108 | background_color: siteConfig.backgroundColor,
109 | theme_color: siteConfig.themeColor,
110 | display: `standalone`,
111 | icon: "static/favicon.png",
112 | },
113 | },
114 | {
115 | resolve: `gatsby-plugin-feed`,
116 | options: {
117 | query: `
118 | {
119 | site {
120 | siteMetadata {
121 | siteUrl
122 | }
123 | }
124 | }
125 | `,
126 | feeds: [
127 | {
128 | serialize: ({ query: { site, allWordpressPost } }) => {
129 | return allWordpressPost.edges.map((edge) => {
130 | return {
131 | title: edge.node.title,
132 | description: edge.node.excerpt,
133 | date: edge.node.date,
134 | url: site.siteMetadata.siteUrl + edge.node.slug,
135 | guid: site.siteMetadata.siteUrl + edge.node.slug,
136 | custom_elements: [{ "content:encoded": edge.node.content }],
137 | };
138 | });
139 | },
140 | query: `
141 | {
142 | allWordpressPost(sort: {fields: date, order: DESC}) {
143 | edges {
144 | node {
145 | slug: permaLinkSlug
146 | content
147 | title
148 | excerpt
149 | date
150 | }
151 | }
152 | }
153 | }
154 | `,
155 | output: "/rss.xml",
156 | title: siteConfig.siteTitle,
157 | },
158 | ],
159 | },
160 | },
161 | `gatsby-plugin-postcss`,
162 | {
163 | resolve: "@draftbox-co/gatsby-plugin-css-variables",
164 | options: {
165 | variables: siteConfig.themeConfig.variables,
166 | },
167 | },
168 | {
169 | resolve: `gatsby-plugin-purgecss`,
170 | options: {
171 | printRejected: true, // Print removed selectors and processed file names
172 | // develop: true, // Enable while using `gatsby develop`
173 | tailwind: true, // Enable tailwindcss support
174 | ignore: ["/ignored.css", "prismjs/", "docsearch.js/"],
175 | purgeOnly: ["components/", "styles/"],
176 | content: [path.join(__dirname, "src/**/!(*.d).{ts,js,jsx,tsx}")],
177 | },
178 | },
179 | {
180 | resolve: `@draftbox-co/gatsby-plugin-amp`,
181 | options: {
182 | canonicalBaseUrl: siteConfig.siteUrl,
183 | components: [`amp-form`],
184 | excludedPaths: [`/404*`, `/`, `/offline*`],
185 | pathIdentifier: `amp/`,
186 | relAmpHtmlPattern: `{{canonicalBaseUrl}}{{pathname}}{{pathIdentifier}}`,
187 | useAmpClientIdApi: true,
188 | dirName: __dirname,
189 | themePath: `src/amp-styles/post.amp.css`,
190 | },
191 | },
192 | {
193 | resolve: `gatsby-plugin-remove-generator`,
194 | options: {
195 | content: `Draftbox`,
196 | },
197 | },
198 | ],
199 | };
200 |
201 | if (siteConfig.themeConfig.fonts && siteConfig.themeConfig.fonts.length > 0) {
202 | configOptions.plugins.push({
203 | resolve: `@draftbox-co/gatsby-plugin-webfonts`,
204 | options: {
205 | fonts: {
206 | google: siteConfig.themeConfig.fonts,
207 | },
208 | formats: ["woff2", "woff"],
209 | useMinify: true,
210 | usePreload: true,
211 | usePreconnect: true,
212 | blacklist: ["/amp"],
213 | },
214 | },)
215 | }
216 |
217 | return configOptions;
218 | };
219 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@draftbox-co/gatsby-wordpress-balsa-theme",
3 | "description": "A Feature-rich Gatsby theme plugin for creating blogs from headless Ghost CMS.",
4 | "version": "1.0.40",
5 | "license": "MIT",
6 | "author": "Draftbox",
7 | "homepage": "https://github.com/draftbox-co/gatsby-wordpress-balsa-theme",
8 | "repository": {
9 | "url": "https://github.com/draftbox-co/gatsby-wordpress-balsa-theme",
10 | "type": "git"
11 | },
12 | "main": "index.js",
13 | "resolutions": {
14 | "sharp": "0.23.4"
15 | },
16 | "engines": {
17 | "node": ">= 8.9.0"
18 | },
19 | "keywords": [
20 | "gatsby",
21 | "gatsby-plugin",
22 | "gatsby-theme",
23 | "ghost",
24 | "ghost-theme",
25 | "casper",
26 | "blogging",
27 | "static-site",
28 | "static-site-generator",
29 | "gatsbyjs",
30 | "react"
31 | ],
32 | "scripts": {
33 | "serve": "gatsby build && NODE_ENV=production gatsby serve",
34 | "build": "gatsby build",
35 | "develop": "gatsby develop",
36 | "lint": "eslint . --ext .js --cache",
37 | "test": "echo \"Error: no test specified\" && exit 1"
38 | },
39 | "devDependencies": {
40 | "@types/classnames": "^2.2.10",
41 | "autoprefixer": "^9.7.6",
42 | "babel-eslint": "^10.1.0",
43 | "eslint": "^6.8.0",
44 | "eslint-plugin-ghost": "^1.0.0",
45 | "eslint-plugin-react": "^7.18.3",
46 | "gatsby": "2.20.24",
47 | "react": "^16.12.0",
48 | "react-dom": "^16.12.0",
49 | "tailwindcss": "^1.3.5"
50 | },
51 | "peerDependencies": {
52 | "gatsby": "2.20.24",
53 | "react": "^16.12.0",
54 | "react-dom": "^16.12.0"
55 | },
56 | "dependencies": {
57 | "@draftbox-co/gatsby-plugin-amp": "^0.2.6",
58 | "@draftbox-co/gatsby-plugin-css-variables": "^0.0.3",
59 | "@draftbox-co/gatsby-plugin-webfonts": "^1.1.3",
60 | "@tryghost/helpers": "^1.1.22",
61 | "@tryghost/url-utils": "^0.6.13",
62 | "@types/react-helmet": "^5.0.15",
63 | "autoprefixer": "^9.7.4",
64 | "babel-plugin-prismjs": "^2.0.1",
65 | "babel-plugin-styled-components": "^1.10.7",
66 | "babel-preset-gatsby": "^0.2.29",
67 | "cheerio": "^1.0.0-rc.3",
68 | "classnames": "^2.2.6",
69 | "cssnano": "^4.1.10",
70 | "disqus-react": "^1.0.8",
71 | "gatsby-awesome-pagination": "^0.3.5",
72 | "gatsby-background-image": "^0.10.2",
73 | "gatsby-image": "^2.2.41",
74 | "gatsby-plugin-advanced-sitemap": "^1.5.1",
75 | "gatsby-plugin-catch-links": "^2.1.26",
76 | "gatsby-plugin-feed": "^2.3.27",
77 | "gatsby-plugin-force-trailing-slashes": "^1.0.4",
78 | "gatsby-plugin-manifest": "^2.2.42",
79 | "gatsby-plugin-page-creator": "^2.1.40",
80 | "gatsby-plugin-postcss": "^2.1.20",
81 | "gatsby-plugin-purgecss": "^5.0.0",
82 | "gatsby-plugin-react-helmet": "^3.1.22",
83 | "gatsby-plugin-remove-generator": "^1.0.5",
84 | "gatsby-plugin-sharp": "^2.4.5",
85 | "gatsby-plugin-typescript": "^2.4.0",
86 | "gatsby-rehype-ghost-links": "^1.1.0",
87 | "gatsby-rehype-prismjs": "^0.0.9",
88 | "gatsby-source-filesystem": "^2.1.48",
89 | "gatsby-source-wordpress": "^3.1.69",
90 | "gatsby-transformer-rehype": "^1.1.0",
91 | "gatsby-transformer-sharp": "^2.3.14",
92 | "html-to-text": "^5.1.1",
93 | "lodash": "^4.17.19",
94 | "node-fetch": "^2.6.0",
95 | "node-sass": "^4.13.1",
96 | "prismjs": "^1.19.0",
97 | "react-helmet": "^5.2.1",
98 | "react-intersection-observer": "^8.26.2",
99 | "reading-time": "^1.2.0",
100 | "styled-components": "^5.0.1",
101 | "tailwindcss": "^1.3.5"
102 | }
103 | }
104 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/postcss.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 | const tailWindConfig = require.resolve('./tailwind.config.js');
3 |
4 | module.exports = () => ({
5 | plugins: [
6 | require("tailwindcss")(tailWindConfig),
7 | require("autoprefixer"),
8 | ],
9 | });
10 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/components/ContactForm.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import CtaMini from "./CtaMini";
3 | import { useForm } from "../hook/useForm";
4 | import checkMark from "../images/check.svg";
5 | import { useStaticQuery, graphql } from "gatsby";
6 |
7 | const ContactForm = () => {
8 | const {
9 | site: {
10 | siteMetadata: { contactWidget, siteTitle },
11 | },
12 | } = useStaticQuery(graphql`
13 | query {
14 | site {
15 | siteMetadata {
16 | contactWidget {
17 | title
18 | successMessage
19 | }
20 | siteTitle
21 | }
22 | }
23 | }
24 | `);
25 |
26 | const [{ handleSubmit: submitForm, submitting, succeeded }] = useForm(
27 | "contact"
28 | );
29 | const [formValues, setFormValues] = useState({
30 | name: "",
31 | email: "",
32 | message: "",
33 | });
34 |
35 | const handleSubmit = (e) => {
36 | e.preventDefault();
37 | submitForm(formValues);
38 | };
39 |
40 | const handleChange = (target, value) => {
41 | switch (target) {
42 | case "name":
43 | setFormValues({ ...formValues, name: value });
44 | break;
45 | case "email":
46 | setFormValues({ ...formValues, email: value });
47 | break;
48 | case "message":
49 | setFormValues({ ...formValues, message: value });
50 | break;
51 | default:
52 | break;
53 | }
54 | };
55 | return (
56 | <>
57 |
58 | {succeeded && (
59 |
60 |
61 |
62 |
63 |
68 |
69 |
71 | )}
72 | {!succeeded && (
73 |
74 |
75 |
83 |
135 |
136 | )}
137 |
138 |
45 |
46 |
47 |
48 |
64 |
65 |
67 | )}
68 | {!succeeded && (
69 |
70 |
71 |
72 |
82 |
113 |
115 | )}
116 |
117 | );
118 | };
119 |
120 | export default CtaMini;
121 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/components/Layout.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "../styles/style.css";
3 | import "../styles/prism.css";
4 | import Navbar from "./Navbar";
5 | import Footer from "./Footer";
6 | import { ArmadaFormsProvider } from "../context/form-context";
7 | import { useStaticQuery, graphql } from "gatsby";
8 | import { SettingsAndSlugs } from "../models/settings-and-page-slugs.model";
9 | import Helmet from "react-helmet";
10 |
11 | const Layout: React.FC = ({ children }) => {
12 | // client test = https://drafbox-backend-dev.herokuapp.com/api/project/5ea1575f8c9344001f9a89ff/forms
13 |
14 | const data = useStaticQuery(graphql`
15 | query {
16 | site {
17 | siteMetadata {
18 | siteUrl
19 | apiUrl
20 | header {
21 | navigation {
22 | url
23 | label
24 | }
25 | }
26 | footer {
27 | copyright
28 | navigation {
29 | label
30 | url
31 | }
32 | }
33 | socialLinks {
34 | twitter
35 | facebook
36 | instagram
37 | linkedin
38 | github
39 | pinterest
40 | youtube
41 | dribbble
42 | behance
43 | externalLink
44 | whatsapp
45 | }
46 | logoUrl
47 | siteTitle
48 | language
49 | }
50 | }
51 | }
52 | `);
53 |
54 | return (
55 |
56 |
58 |
64 | );
65 | };
66 |
67 | export default Layout;
68 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/components/Navbar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import classNames from "classnames";
3 | import { Link, graphql, useStaticQuery } from "gatsby";
4 | import { SettingsAndSlugs } from "../models/settings-and-page-slugs.model";
5 | import url from "url";
6 |
7 | type NavbarProps = {
8 | navbarData: SettingsAndSlugs;
9 | };
10 |
11 | const Navbar: React.FC = ({ navbarData }) => {
12 | const {
13 | site: {
14 | siteMetadata: {
15 | header: { navigation },
16 | siteUrl,
17 | apiUrl,
18 | logoUrl,
19 | siteTitle,
20 | },
21 | },
22 | } = navbarData;
23 |
24 | const logo = logoUrl ? url.resolve(siteUrl, logoUrl) : null;
25 |
26 | const [isMenuToggled, setIsMenuToggled] = useState(false);
27 |
28 | return (
29 |
30 |
31 |
32 | {logo ? (
33 |
34 | ) : (
35 |
36 | )}
37 |
38 |
40 | {" "}
41 |
setIsMenuToggled(!isMenuToggled)}
43 | className="navbar-burger flex items-center py-2 px-3 text-gray-700 focus:outline-none"
44 | >
45 |
50 | Menu
51 |
53 | {" "}
54 |
61 |
62 | {navigation.map(({ label, url }, i) => {
63 | return url.startsWith("/") ||
64 | url.startsWith(siteUrl) ||
65 | url.startsWith(apiUrl) ? (
66 |
78 | {label}
79 |
80 | ) : (
81 |
88 | {label}
89 |
90 | );
91 | })}
92 | {/*
96 | Contact
97 | */}
98 | {}
99 |
100 |
102 | );
103 | };
104 |
105 | export default Navbar;
106 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/components/NextPrevPost.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import classNames from "classnames";
4 | import { PostDescription } from "../models/all-post-description.model";
5 |
6 | type NextPrevPostProps = {
7 | prevPost: PostDescription;
8 | nextPost: PostDescription;
9 | };
10 | const NextPrevPost: React.FC = ({ prevPost, nextPost }) => {
11 | return (
12 | <>
13 |
71 |
72 | );
73 | };
74 |
75 | export default NextPrevPost;
76 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/components/Pagination.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "gatsby";
3 | import classNames from "classnames";
4 | import { PaginationContext } from "../models/pagination.model";
5 |
6 | type PaginationProps = {
7 | pageContext: PaginationContext;
8 | };
9 |
10 | const Pagination: React.FC = ({ pageContext }) => {
11 | return (
12 |
13 |
14 | {pageContext.previousPagePath && (
15 |
16 |
27 | )}
28 |
29 |
30 | {pageContext.nextPagePath && (
31 |
40 |
41 |
= ({ post }) => {
12 | const handleNavigation = (e: any, slug) => {
13 | e.stopPropagation();
14 | navigate(slug);
15 | };
16 |
17 | let excerpt = "";
18 |
19 | if (post.excerpt) {
20 | excerpt =
21 | post.plainExcerpt.split(" ").length > 30
22 | ? post.plainExcerpt.split(" ").slice(0, 30).join(" ") + "..."
23 | : post.plainExcerpt;
24 | }
25 |
26 | return (
27 | handleNavigation(e, `/${post.slug}`)}
29 | className="w-full lg:w-1/3 px-4 mb-8 cursor-pointer relative"
30 | >
31 | {post.sticky && (
32 |
36 |
37 |
39 | Featured
40 |
41 | )}
42 |
43 |
44 | {post.featured_media?.localFile?.childImageSharp?.fluid && (
45 |
49 | )}
50 | {!post.featured_media?.localFile?.childImageSharp &&
51 | post.featured_media?.localFile?.publicURL && (
52 |
56 | )}
57 | {!post.featured_media?.localFile?.childImageSharp?.fluid &&
58 | !post.featured_media?.localFile.publicURL && (
59 |
66 | )}
67 |
68 |
101 |
102 |
113 |
114 |
= ({ textToCopy }) => {
10 | const [copiedToClipBoard, setCopiedToClipBoard] = useState(false);
11 |
12 | const copyToClipboard = () => {
13 | if (window["clipboardData"] && window["clipboardData"].setData) {
14 | // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.
15 | setCopiedToClipBoard(true);
16 |
17 | setTimeout(() => {
18 | setCopiedToClipBoard(false);
19 | }, 5000);
20 | return window["clipboardData"].setData("Text", textToCopy);
21 | } else if (
22 | document.queryCommandSupported &&
23 | document.queryCommandSupported("copy")
24 | ) {
25 | var textarea = document.createElement("textarea");
26 | textarea.textContent = textToCopy;
27 | textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in Microsoft Edge.
28 | document.body.appendChild(textarea);
29 | textarea.select();
30 | try {
31 | setCopiedToClipBoard(true);
32 |
33 | setTimeout(() => {
34 | setCopiedToClipBoard(false);
35 | }, 5000);
36 | return document.execCommand("copy"); // Security exception may be thrown by some browsers.
37 | } catch (ex) {
38 | console.warn("Copy to clipboard failed.", ex);
39 | return false;
40 | } finally {
41 | document.body.removeChild(textarea);
42 | }
43 | }
44 | };
45 |
46 | return (
47 |
48 |
copyToClipboard()}
50 | className="block p-2 bg-gray-700 hover:bg-primary rounded-full mr-2"
51 | title="Copy to clipboard"
52 | >
53 |
59 |
= ({ data, amp, location }) => {
61 | const queryData = useStaticQuery(graphql`
62 | query {
63 | site {
64 | siteMetadata {
65 | siteUrl
66 | siteTitle
67 | metadata {
68 | title
69 | description
70 | }
71 | twitterCard {
72 | title
73 | description
74 | imageUrl
75 | username
76 | }
77 | facebookCard {
78 | title
79 | description
80 | imageUrl
81 | appId
82 | }
83 | siteDescription
84 | language
85 | logoUrl
86 | iconUrl
87 | coverUrl
88 | alternateLogoUrl
89 | shareImageWidth
90 | shareImageHeight
91 | }
92 | }
93 | }
94 | `);
95 | const baseUrl = queryData.site.siteMetadata.siteUrl;
96 | const siteTitle = queryData.site.siteMetadata.siteTitle;
97 | const canonicalUrl = url.resolve(baseUrl, location.pathname);
98 | const feature_image = data.featured_media?.localFile?.seo?.fixed.src;
99 |
100 | const config = queryData.site.siteMetadata;
101 |
102 | const facebookImageUrl = feature_image
103 | ? url.resolve(config.siteUrl, feature_image)
104 | : config.facebookCard.imageUrl
105 | ? url.resolve(config.siteUrl, config.facebookCard.imageUrl)
106 | : config.coverUrl
107 | ? url.resolve(config.siteUrl, config.coverUrl)
108 | : null;
109 |
110 | const twitterImageUrl = feature_image
111 | ? url.resolve(config.siteUrl, feature_image)
112 | : config.twitterCard.imageUrl
113 | ? url.resolve(config.siteUrl, config.twitterCard.imageUrl)
114 | : config.coverUrl
115 | ? url.resolve(config.siteUrl, config.coverUrl)
116 | : null;
117 |
118 | const author = data.author;
119 | const publicTags = _.map(data.tags, (tag) => tag.name);
120 | const primaryTag = publicTags[0] || ``;
121 | const shareImage = feature_image
122 | ? url.resolve(config.siteUrl, feature_image)
123 | : config.coverUrl ||
124 | config.facebookCard.imageUrl ||
125 | config.twitterCard.imageUrl
126 | ? url.resolve(
127 | config.siteUrl,
128 | config.coverUrl ||
129 | config.facebookCard.imageUrl ||
130 | config.twitterCard.imageUrl
131 | )
132 | : null;
133 | const publisherLogo =
134 | config.logoUrl || config.alternateLogoUrl
135 | ? url.resolve(config.siteUrl, config.logoUrl || config.alternateLogoUrl)
136 | : null;
137 |
138 | const jsonLd = {
139 | "@context": `https://schema.org/`,
140 | "@type": `Article`,
141 | author: author
142 | ? {
143 | "@type": `Person`,
144 | name: author.name,
145 | image: undefined,
146 | sameAs: undefined,
147 | }
148 | : null,
149 | keywords: publicTags.length ? publicTags.join(`, `) : undefined,
150 | headline: data.plainTitle || config.siteTitle,
151 | url: canonicalUrl,
152 | datePublished: data.date,
153 | dateModified: data.modified,
154 | image: shareImage
155 | ? {
156 | "@type": `ImageObject`,
157 | url: shareImage,
158 | width: config.shareImageWidth,
159 | height: config.shareImageHeight,
160 | }
161 | : undefined,
162 | publisher: {
163 | "@type": `Organization`,
164 | name: config.siteTitle,
165 | logo: publisherLogo
166 | ? {
167 | "@type": `ImageObject`,
168 | url: publisherLogo,
169 | width: 60,
170 | height: 60,
171 | }
172 | : undefined,
173 | },
174 | description: data.plainExcerpt || config.siteDescription,
175 | mainEntityOfPage: {
176 | "@type": `WebPage`,
177 | "@id": config.siteUrl,
178 | },
179 | };
180 |
181 | return (
182 | <>
183 |
184 | {capitalize(data.plainTitle)}
185 | {!amp &&
247 |
248 | );
249 | };
250 |
251 | export default ArticleMeta;
252 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/components/meta/contact-meta.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Helmet from "react-helmet";
3 | import { graphql, useStaticQuery } from "gatsby";
4 | import url from "url";
5 |
6 | type SeoData = {
7 | wpSiteMetaData: {
8 | name: string;
9 | description: string;
10 | };
11 | site: {
12 | siteMetadata: {
13 | siteUrl: string;
14 | siteTitle: string;
15 | siteDescription: string;
16 | metadata: {
17 | title: string;
18 | description: string;
19 | };
20 | twitterCard: {
21 | title: string;
22 | description: string;
23 | imageUrl: string;
24 | username: string;
25 | };
26 | facebookCard: {
27 | title: string;
28 | description: string;
29 | imageUrl: string;
30 | appId: string;
31 | };
32 | language: string;
33 | logoUrl: string;
34 | iconUrl: string;
35 | coverUrl: string;
36 | alternateLogoUrl: string;
37 | shareImageHeight: string;
38 | shareImageWidth: string;
39 | };
40 | };
41 | };
42 |
43 | const ContactMeta = ({ location }) => {
44 | const data = useStaticQuery(graphql`
45 | query {
46 | site {
47 | siteMetadata {
48 | siteUrl
49 | siteTitle
50 | metadata {
51 | title
52 | description
53 | }
54 | twitterCard {
55 | title
56 | description
57 | imageUrl
58 | username
59 | }
60 | facebookCard {
61 | title
62 | description
63 | imageUrl
64 | appId
65 | }
66 | siteDescription
67 | language
68 | logoUrl
69 | iconUrl
70 | coverUrl
71 | alternateLogoUrl
72 | shareImageWidth
73 | shareImageHeight
74 | language
75 | }
76 | }
77 | }
78 | `);
79 |
80 | const config = data.site.siteMetadata;
81 |
82 | const baseUrl = data.site.siteMetadata.siteUrl;
83 | const siteTitle = data.site.siteMetadata.siteTitle;
84 | const siteDescription = data.site.siteMetadata.siteDescription;
85 |
86 | const canonical = url.resolve(baseUrl, location.pathname);
87 |
88 | const description = config.metadata.description || config.siteDescription;
89 |
90 | const publisherLogo =
91 | config.logoUrl || config.alternateLogoUrl
92 | ? url.resolve(config.siteUrl, config.logoUrl || config.alternateLogoUrl)
93 | : null;
94 | let shareImage =
95 | config.coverUrl ||
96 | config.facebookCard.imageUrl ||
97 | config.twitterCard.imageUrl;
98 |
99 | shareImage = shareImage ? url.resolve(config.siteUrl, shareImage) : null;
100 |
101 | const facebookImageUrl = config.facebookCard.imageUrl
102 | ? url.resolve(config.siteUrl, config.facebookCard.imageUrl)
103 | : null;
104 |
105 | const twitterImageUrl = config.twitterCard.imageUrl
106 | ? url.resolve(config.siteUrl, config.twitterCard.imageUrl)
107 | : null;
108 |
109 | const jsonLd = {
110 | "@context": `https://schema.org/`,
111 | "@type": "WebPage",
112 | url: canonical,
113 | headline: 'Contact | ' + config.metadata.title || config.siteTitle,
114 | image: shareImage
115 | ? {
116 | "@type": `ImageObject`,
117 | url: shareImage,
118 | width: config.shareImageWidth,
119 | height: config.shareImageHeight,
120 | }
121 | : undefined,
122 | publisher: {
123 | "@type": `Organization`,
124 | name: siteTitle,
125 | logo: publisherLogo
126 | ? {
127 | "@type": `ImageObject`,
128 | url: publisherLogo,
129 | width: 60,
130 | height: 60,
131 | }
132 | : undefined,
133 | },
134 | mainEntityOfPage: {
135 | "@type": `WebPage`,
136 | "@id": config.siteUrl,
137 | },
138 | description,
139 | };
140 |
141 | return (
142 | <>
143 |
144 | Contact | {config.metadata.title || config.siteTitle}
145 |
210 |
211 | );
212 | };
213 |
214 | export default ContactMeta;
215 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/components/meta/website-meta.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Helmet from "react-helmet";
3 | import { graphql, useStaticQuery } from "gatsby";
4 | import url from "url";
5 | import { globalHistory } from "@reach/router";
6 | import { language } from "../../../../example/site-config";
7 | const htmlToText = require("html-to-text");
8 |
9 | type SeoData = {
10 | wpSiteMetaData: {
11 | name: string;
12 | description: string;
13 | };
14 | site: {
15 | siteMetadata: {
16 | siteUrl: string;
17 | siteTitle: string;
18 | siteDescription: string;
19 | metadata: {
20 | title: string;
21 | description: string;
22 | };
23 | twitterCard: {
24 | title: string;
25 | description: string;
26 | imageUrl: string;
27 | username: string;
28 | };
29 | facebookCard: {
30 | title: string;
31 | description: string;
32 | imageUrl: string;
33 | appId: string;
34 | };
35 | language: string;
36 | logoUrl: string;
37 | iconUrl: string;
38 | coverUrl: string;
39 | alternateLogoUrl: string;
40 | shareImageHeight: string;
41 | shareImageWidth: string;
42 | };
43 | };
44 | };
45 |
46 | const WebsiteMeta = () => {
47 | const data = useStaticQuery(graphql`
48 | query {
49 | site {
50 | siteMetadata {
51 | siteUrl
52 | siteTitle
53 | metadata {
54 | title
55 | description
56 | }
57 | twitterCard {
58 | title
59 | description
60 | imageUrl
61 | username
62 | }
63 | facebookCard {
64 | title
65 | description
66 | imageUrl
67 | appId
68 | }
69 | siteDescription
70 | language
71 | logoUrl
72 | iconUrl
73 | coverUrl
74 | alternateLogoUrl
75 | shareImageWidth
76 | shareImageHeight
77 | language
78 | }
79 | }
80 | }
81 | `);
82 |
83 | const config = data.site.siteMetadata;
84 |
85 | const baseUrl = data.site.siteMetadata.siteUrl;
86 | const siteTitle = data.site.siteMetadata.siteTitle;
87 | const siteDescription = data.site.siteMetadata.siteDescription;
88 |
89 | const canonical = url.resolve(baseUrl, globalHistory.location.pathname);
90 |
91 | const description = config.metadata.description || config.siteDescription;
92 |
93 | const publisherLogo =
94 | config.logoUrl || config.alternateLogoUrl
95 | ? url.resolve(config.siteUrl, config.logoUrl || config.alternateLogoUrl)
96 | : null;
97 | let shareImage =
98 | config.coverUrl ||
99 | config.facebookCard.imageUrl ||
100 | config.twitterCard.imageUrl;
101 |
102 | shareImage = shareImage ? url.resolve(config.siteUrl, shareImage) : null;
103 |
104 | const facebookImageUrl = config.facebookCard.imageUrl
105 | ? url.resolve(config.siteUrl, config.facebookCard.imageUrl)
106 | : null;
107 |
108 | const twitterImageUrl = config.twitterCard.imageUrl
109 | ? url.resolve(config.siteUrl, config.twitterCard.imageUrl)
110 | : null;
111 |
112 | const jsonLd = {
113 | "@context": `https://schema.org/`,
114 | "@type": "Website",
115 | url: canonical,
116 | image: shareImage
117 | ? {
118 | "@type": `ImageObject`,
119 | url: shareImage,
120 | width: config.shareImageWidth,
121 | height: config.shareImageHeight,
122 | }
123 | : undefined,
124 | publisher: {
125 | "@type": `Organization`,
126 | name: siteTitle,
127 | logo: publisherLogo
128 | ? {
129 | "@type": `ImageObject`,
130 | url: publisherLogo,
131 | width: 60,
132 | height: 60,
133 | }
134 | : undefined,
135 | },
136 | mainEntityOfPage: {
137 | "@type": `WebPage`,
138 | "@id": config.siteUrl,
139 | },
140 | description,
141 | };
142 |
143 | return (
144 | <>
145 |
146 | {config.metadata.title || config.siteTitle}
147 |
212 |
213 | );
214 | };
215 |
216 | export default WebsiteMeta;
217 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/context/form-context.jsx:
--------------------------------------------------------------------------------
1 | import React, { createContext } from "react";
2 |
3 | // interface Props {
4 | // site: string;
5 | // }
6 |
7 | // interface Context {
8 | // client: any;
9 | // }
10 |
11 | export const ArmadaFormsContext = createContext({
12 | client: undefined
13 | });
14 |
15 | ArmadaFormsContext.displayName = "Armada Forms";
16 |
17 | export const ArmadaFormsProvider = ({ client, children }) => {
18 | return (
19 |
20 | {children}
21 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/hook/useForm.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useContext } from "react";
2 | import { ArmadaFormsContext } from "../context/form-context";
3 |
4 | export const useForm = formKey => {
5 | const [submitting, setSubmitting] = useState(false);
6 | const [succeeded, setSucceeded] = useState(false);
7 | const [errors, setErrors] = useState([]);
8 | const { client } = useContext(ArmadaFormsContext);
9 |
10 | const handleSubmit = async data => {
11 | setSubmitting(true);
12 |
13 | try {
14 | let formHeaders = new Headers();
15 | formHeaders.append("Content-Type", "application/json");
16 | const response = await fetch(`${client}/${formKey}`, {
17 | method: "POST",
18 | mode: "cors",
19 | cache: "no-cache",
20 | credentials: "same-origin",
21 | body: JSON.stringify(data),
22 | headers: formHeaders
23 | });
24 |
25 | if (!response.ok) {
26 | setErrors([{ error: `error occured submitting request: ${formKey}` }]);
27 | } else {
28 | setSubmitting(false);
29 | setSucceeded(true);
30 | }
31 | } catch (error) {
32 | setErrors([{ error: `error occured submitting request: ${formKey}` }]);
33 | }
34 | };
35 |
36 | return [{ submitting, errors, succeeded, handleSubmit }];
37 | };
38 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/images/basketball.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
8 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/images/behance.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
8 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/images/check.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
7 |
8 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/images/female_avatar.svg:
--------------------------------------------------------------------------------
1 | female_avatar
3 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/images/instagram.svg:
--------------------------------------------------------------------------------
1 |
3 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/images/link.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
8 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/images/linkedin-share.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/images/mail.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
8 |
10 |
11 |
12 |
14 |
15 |
16 |
18 | mobile login
3 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/images/pinterest.svg:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
9 |
10 |
11 |
12 |
13 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/images/star.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/images/subscribe_to_newsletter.svg:
--------------------------------------------------------------------------------
1 | opened
5 |
6 |
7 |
8 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/images/whatsapp-share.svg:
--------------------------------------------------------------------------------
1 |
3 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/images/whatsapp.svg:
--------------------------------------------------------------------------------
1 |
3 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/images/youtube.svg:
--------------------------------------------------------------------------------
1 |
3 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/models/all-authors-description.model.ts:
--------------------------------------------------------------------------------
1 | export interface Node {
2 | bio?: any;
3 | slug: string;
4 | url: string;
5 | profile_image: string;
6 | name: string;
7 | }
8 |
9 | export interface Edge {
10 | node: Node;
11 | }
12 |
13 | export interface AllGhostAuthor {
14 | edges: Edge[];
15 | }
16 |
17 | export interface Data {
18 | allGhostAuthor: AllGhostAuthor;
19 | }
20 |
21 | export interface AllGHostAuthorsData {
22 | data: Data;
23 | }
24 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/models/all-post-description.model.ts:
--------------------------------------------------------------------------------
1 | interface Tag {
2 | name: string;
3 | slug: string;
4 | }
5 | export interface PostDescription {
6 | title: string;
7 | readingTime: string;
8 | content: string;
9 | excerpt: string;
10 | plainExcerpt: string;
11 | plainTitle: string;
12 | slug: string;
13 | categories: {
14 | name: string;
15 | slug: string;
16 | };
17 | featured_media: {
18 | localFile: {
19 | publicURL;
20 | childImageSharp: {
21 | fluid: any;
22 | };
23 | seo: {
24 | fixed: any;
25 | }
26 | };
27 | };
28 | author: {
29 | name: string;
30 | slug: string;
31 | };
32 | tags: Tag[];
33 | date: string;
34 | sticky: boolean;
35 | modified: string;
36 | }
37 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/models/all-tags-description.model.ts:
--------------------------------------------------------------------------------
1 | export interface TagInfo {
2 | node: {
3 | name: string;
4 | slug: string;
5 | count: number;
6 | };
7 | }
8 |
9 | export interface AllTags {
10 | edges: TagInfo[];
11 | }
12 |
13 | export interface Data {
14 | allWordpressTag: AllTags;
15 | }
16 |
17 | export interface AllTagsInfo {
18 | data: Data;
19 | }
20 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/models/author-description.model.ts:
--------------------------------------------------------------------------------
1 | export interface AuthorDescription {
2 | name: string;
3 | slug: string;
4 | description: string;
5 | avatar_urls: {
6 | wordpress_96: string;
7 | };
8 | }
9 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/models/page-description.model.ts:
--------------------------------------------------------------------------------
1 | import { Tag } from './post-description.model';
2 | export interface PageDetails {
3 | title: string;
4 | readingTime: string;
5 | content: string;
6 | excerpt: string;
7 | plainExcerpt: string;
8 | plainTitle: string;
9 | slug: string;
10 | categories: {
11 | name: string;
12 | slug: string;
13 | };
14 | featured_media: {
15 | localFile: {
16 | publicURL;
17 | childImageSharp: {
18 | fluid: any;
19 | };
20 | };
21 | };
22 | author: {
23 | name: string;
24 | slug: string;
25 | };
26 | tags: Tag[];
27 | date: string;
28 | sticky: boolean;
29 | modified: string;
30 | }
31 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/models/pagination.model.ts:
--------------------------------------------------------------------------------
1 | export interface PaginationContext {
2 | pageNumber: number;
3 | humanPageNumber: number;
4 | skip: number;
5 | limit: number;
6 | numberOfPages: number;
7 | previousPagePath: string;
8 | nextPagePath: string;
9 | }
10 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/models/post-description.model.ts:
--------------------------------------------------------------------------------
1 | export interface ChildHtmlRehype {
2 | html: string;
3 | }
4 |
5 | export interface PrimaryAuthor {
6 | name: string;
7 | slug: string;
8 | }
9 |
10 | export interface Tag {
11 | name: string;
12 | slug: string;
13 | }
14 |
15 | export interface GhostPost {
16 | childHtmlRehype: ChildHtmlRehype;
17 | title: string;
18 | slug: string;
19 | feature_image?: any;
20 | primary_author: PrimaryAuthor;
21 | updated_at: string;
22 | readingTime: string;
23 | localFeatureImage: {
24 | childImageSharp: {
25 | fluid: any;
26 | };
27 | };
28 | og_title: string;
29 | twitter_title: string;
30 | twitter_description: string;
31 | meta_title: string;
32 | meta_description: string;
33 | tags: Tag[];
34 | primary_tag: {
35 | name: string;
36 | slug: string;
37 | };
38 | published_at: string;
39 | og_description: string;
40 | plainTitle: string;
41 | }
42 |
43 | export interface GhostPostDescription {
44 | ghostPost: GhostPost;
45 | }
46 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/models/settings-and-page-slugs.model.ts:
--------------------------------------------------------------------------------
1 | interface Navigation {
2 | label: string;
3 | url: string;
4 | }
5 |
6 | interface SocialLinks {
7 | twitter: string;
8 | facebook: string;
9 | instagram: string;
10 | linkedin: string;
11 | github: string;
12 | pinterest: string;
13 | youtube: string;
14 | dribbble: string;
15 | behance: string;
16 | externalLink: string;
17 | whatsapp: string;
18 | }
19 |
20 | export interface SettingsAndSlugs {
21 | wpSiteMetaData: {
22 | name: string;
23 | description: string;
24 | language: string;
25 | };
26 | site: {
27 | siteMetadata: {
28 | siteUrl: string;
29 | apiUrl: string;
30 | header: {
31 | navigation: Navigation[];
32 | };
33 | footer: {
34 | copyright: string;
35 | navigation: Navigation[];
36 | };
37 | socialLinks: SocialLinks;
38 | subscribeWidget: {
39 | title: string;
40 | helpText: string;
41 | successMessage: string;
42 | };
43 | logoUrl: string;
44 | siteTitle: string;
45 | language: string;
46 | };
47 | };
48 | }
49 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/pages/404.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "gatsby";
3 | import "../styles/style.css";
4 |
5 | const ErrorPage = () => {
6 | return (
7 |
8 |
9 |
Page Not Found
10 |
11 |
12 | Looks like you've followed a broken link or entered a URL that doesn't
13 | exist on this site.
14 |
15 |
16 |
20 | Back to our site →
21 |
22 |
23 |
= ({ data }) => {
18 | const { allWordpressWpUsers } = data;
19 |
20 | return (
21 |
22 |
24 | Authors
25 |
26 |
27 |
28 | {allWordpressWpUsers.edges.map(({ node }, i) => {
29 | return (
30 |
34 |
35 |
36 |
45 |
{node.name}
46 | {/*
Regional Manager */}
47 | {node.description && (
48 |
49 | {node.description}
50 |
51 | )}
52 |
53 |
54 |
55 | );
56 | })}
57 |
59 |
61 | );
62 | };
63 |
64 | export default Authors;
65 |
66 | export const AuthorsQuery = graphql`
67 | query {
68 | allWordpressWpUsers {
69 | edges {
70 | node {
71 | name
72 | slug
73 | description
74 | avatar_urls {
75 | wordpress_96
76 | }
77 | }
78 | }
79 | }
80 | }
81 | `;
82 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/pages/contact.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ContactForm from "../components/ContactForm";
3 | import Layout from "./../components/Layout";
4 | import ContactMeta from "../components/meta/contact-meta";
5 | const Contact = ({ location }) => {
6 | return (
7 |
8 |
11 | );
12 | };
13 |
14 | export default Contact;
15 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/pages/offline.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "gatsby";
3 | import "../styles/style.css";
4 |
5 | const OfflinePage = () => {
6 | return (
7 |
8 |
9 |
Offline :(
10 |
11 |
12 | Looks like you lost your connection. Please check it and try again.
13 |
14 |
15 |
19 | Try again →
20 |
21 |
22 |
= ({ data }) => {
12 | const { allWordpressTag } = data;
13 | return (
14 |
15 |
17 |
18 | {allWordpressTag && allWordpressTag.edges.length > 0
19 | ? "Tags"
20 | : "No tags available."}
21 |
22 |
23 | {allWordpressTag && allWordpressTag.edges.length > 0 && (
24 |
25 |
26 | {allWordpressTag.edges.map(({ node }, i) => {
27 | return (
28 |
33 |
34 |
35 | {node.name[0]}
36 |
37 |
38 |
39 | {node.name}
40 |
41 |
42 | {node.count} {node.count > 1 ? "posts" : "post"}
43 |
44 |
45 |
46 |
47 | );
48 | })}
49 |
51 | )}
52 | {/*
54 | );
55 | };
56 |
57 | export default Tags;
58 |
59 | export const TagsQuery = graphql`
60 | query {
61 | allWordpressTag(filter: { count: { gt: 0 } }) {
62 | edges {
63 | node {
64 | name
65 | slug
66 | count
67 | }
68 | }
69 | }
70 | }
71 | `;
72 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/styles/prism.css:
--------------------------------------------------------------------------------
1 | /**
2 | * prism.js default theme for JavaScript, CSS and HTML
3 | * Based on dabblet (http://dabblet.com)
4 | * @author Lea Verou
5 | */
6 |
7 | /*!purgecss start ignore */
8 |
9 | code[class*="language-"],
10 | pre[class*="language-"] {
11 | color: black;
12 | background: none;
13 | text-shadow: 0 1px white;
14 | font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
15 | font-size: 1em;
16 | text-align: left;
17 | white-space: pre;
18 | word-spacing: normal;
19 | word-break: normal;
20 | word-wrap: normal;
21 | line-height: 1.5;
22 |
23 | -moz-tab-size: 4;
24 | -o-tab-size: 4;
25 | tab-size: 4;
26 |
27 | -webkit-hyphens: none;
28 | -moz-hyphens: none;
29 | -ms-hyphens: none;
30 | hyphens: none;
31 | }
32 |
33 | pre[class*="language-"]::-moz-selection,
34 | pre[class*="language-"] ::-moz-selection,
35 | code[class*="language-"]::-moz-selection,
36 | code[class*="language-"] ::-moz-selection {
37 | text-shadow: none;
38 | background: #b3d4fc;
39 | }
40 |
41 | pre[class*="language-"]::selection,
42 | pre[class*="language-"] ::selection,
43 | code[class*="language-"]::selection,
44 | code[class*="language-"] ::selection {
45 | text-shadow: none;
46 | background: #b3d4fc;
47 | }
48 |
49 | @media print {
50 | code[class*="language-"],
51 | pre[class*="language-"] {
52 | text-shadow: none;
53 | }
54 | }
55 |
56 | /* Code blocks */
57 | pre[class*="language-"] {
58 | padding: 1em;
59 | margin: 0.5em 0;
60 | overflow: auto;
61 | }
62 |
63 | :not(pre) > code[class*="language-"],
64 | pre[class*="language-"] {
65 | background: #f5f2f0;
66 | }
67 |
68 | /* Inline code */
69 | :not(pre) > code[class*="language-"] {
70 | padding: 0.1em;
71 | border-radius: 0.3em;
72 | white-space: normal;
73 | }
74 |
75 | .token.comment,
76 | .token.prolog,
77 | .token.doctype,
78 | .token.cdata {
79 | color: slategray;
80 | }
81 |
82 | .token.punctuation {
83 | color: #999;
84 | }
85 |
86 | .token.namespace {
87 | opacity: 0.7;
88 | }
89 |
90 | .token.property,
91 | .token.tag,
92 | .token.boolean,
93 | .token.number,
94 | .token.constant,
95 | .token.symbol,
96 | .token.deleted {
97 | color: #905;
98 | }
99 |
100 | .token.selector,
101 | .token.attr-name,
102 | .token.string,
103 | .token.char,
104 | .token.builtin,
105 | .token.inserted {
106 | color: #690;
107 | }
108 |
109 | .token.operator,
110 | .token.entity,
111 | .token.url,
112 | .language-css .token.string,
113 | .style .token.string {
114 | color: #9a6e3a;
115 | background: hsla(0, 0%, 100%, 0.5);
116 | }
117 |
118 | .token.atrule,
119 | .token.attr-value,
120 | .token.keyword {
121 | color: #07a;
122 | }
123 |
124 | .token.function,
125 | .token.class-name {
126 | color: #dd4a68;
127 | }
128 |
129 | .token.regex,
130 | .token.important,
131 | .token.variable {
132 | color: #e90;
133 | }
134 |
135 | .token.important,
136 | .token.bold {
137 | font-weight: bold;
138 | }
139 | .token.italic {
140 | font-style: italic;
141 | }
142 |
143 | .token.entity {
144 | cursor: help;
145 | }
146 |
147 | /*! purgecss end ignore */
148 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/styles/richtext.css:
--------------------------------------------------------------------------------
1 | /*!purgecss start ignore */
2 |
3 | .py-05 {
4 | padding-top: 0.125rem;
5 | padding-bottom: 0.125rem;
6 | }
7 |
8 | .richtext {
9 | line-height: 1.75;
10 | font-weight: var(--serif-font-normal);
11 | @apply leading-normal break-words text-body text-lg;
12 | }
13 |
14 | .richtext * {
15 | font-family: var(--serif-font);
16 | font-weight: var(--serif-font-normal);
17 | }
18 |
19 | @screen lg {
20 | .richtext {
21 | @apply leading-loose text-xl;
22 | }
23 | }
24 |
25 | .richtext > * {
26 | @apply mt-0 mb-4;
27 | }
28 |
29 | .richtext li + li {
30 | @apply mt-1;
31 | }
32 |
33 | /* Could not understand the logic here */
34 | /* .richtext li > p + p {
35 | @apply mt-6;
36 | } */
37 |
38 | .richtext strong {
39 | font-weight: var(--serif-font-medium);
40 | }
41 |
42 | .richtext a {
43 | @apply border-primaryLight border-b-3 inline;
44 | }
45 |
46 | .richtext strong a {
47 | font-weight: var(--serif-font-medium);
48 | }
49 |
50 | .richtext a:hover {
51 | @apply border-primary;
52 | }
53 |
54 | .richtext h1 {
55 | font-weight: var(--serif-font-bold);
56 | @apply leading-tight text-4xl mb-4 mt-12 pb-2;
57 | }
58 |
59 | .richtext h2 {
60 | font-weight: var(--serif-font-bold);
61 | @apply leading-tight text-3xl mb-4 mt-12 pb-2;
62 | }
63 |
64 | .richtext h3 {
65 | font-weight: var(--serif-font-bold);
66 | @apply leading-snug text-2xl mb-4 mt-8;
67 | }
68 |
69 | .richtext h4 {
70 | font-weight: var(--serif-font-bold);
71 | @apply leading-none text-xl uppercase mb-4 mt-8;
72 | }
73 |
74 | .richtext h5 {
75 | font-weight: var(--serif-font-bold);
76 | @apply leading-tight text-lg mb-4 mt-6;
77 | }
78 |
79 | .richtext h6 {
80 | font-weight: var(--serif-font-bold);
81 | @apply leading-tight text-base italic mb-4 mt-6;
82 | }
83 |
84 | .richtext p {
85 | font-weight: var(--serif-font-light);
86 | }
87 |
88 | .richtext blockquote {
89 | @apply text-xl border-l-4 border-primary pl-4 pr-4 text-gray-900 italic;
90 | }
91 |
92 | .richtext code {
93 | @apply font-mono text-sm inline bg-gray-200 rounded px-1 py-05;
94 | }
95 |
96 | .richtext pre {
97 | @apply bg-gray-100 rounded p-4 mt-1 overflow-auto;
98 | }
99 |
100 | .richtext pre code {
101 | @apply block text-sm bg-transparent p-0 overflow-visible rounded-none;
102 | }
103 |
104 | .richtext ul {
105 | @apply pl-8 list-disc;
106 | }
107 |
108 | .richtext ol {
109 | @apply pl-8 list-decimal;
110 | }
111 |
112 | .richtext li {
113 | font-weight: var(--serif-font-light);
114 | }
115 |
116 | .richtext kbd {
117 | @apply inline-block rounded border px-1 py-05 align-middle font-mono shadow;
118 | }
119 |
120 | .richtext table {
121 | @apply text-base border-gray-600;
122 | }
123 |
124 | .richtext th {
125 | @apply border py-1 px-3;
126 | }
127 |
128 | .richtext td {
129 | @apply border py-1 px-3;
130 | }
131 |
132 | .richtext .highlight pre {
133 | @apply bg-gray-100 !important;
134 | }
135 |
136 | .richtext p img {
137 | @apply inline;
138 | }
139 |
140 | .richtext figure,
141 | .richtext img {
142 | max-width: 100%;
143 | }
144 |
145 | .richtext figure {
146 | @apply flex flex-col items-center justify-center;
147 | }
148 |
149 | .richtext iframe {
150 | max-width: 100%;
151 | }
152 |
153 | .richtext figcaption {
154 | @apply max-w-3xl text-center text-gray-600 text-sm;
155 | }
156 |
157 | @media screen and (max-width: 425px) {
158 | .richtext iframe {
159 | max-width: 100%;
160 | }
161 | .richtext figure img {
162 | max-width: 100%;
163 | }
164 | }
165 |
166 | .wp-caption {
167 | max-width: 100%;
168 | padding: 0;
169 | margin-bottom: 1.75em;
170 | }
171 |
172 | .wp-block-gallery ul {
173 | list-style: none;
174 | padding: 0;
175 | }
176 |
177 | .wp-block-gallery figure {
178 | margin-bottom: 1rem;
179 | }
180 |
181 | /*!purgecss end ignore */
182 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/styles/style.css:
--------------------------------------------------------------------------------
1 | /* ! purgecss start ignore */
2 | @tailwind base;
3 | /* ! purgecss end ignore */
4 |
5 | @tailwind components;
6 |
7 | @tailwind utilities;
8 |
9 | /* ! purgecss start ignore */
10 |
11 | html {
12 | @apply text-body;
13 | font-family: var(--sans-font);
14 | font-weight: var(--sans-font-normal);
15 | }
16 |
17 | .font-sansNormal {
18 | font-family: var(--sans-font);
19 | font-weight: var(--sans-font-normal);
20 | }
21 |
22 | .font-sansMedium {
23 | font-family: var(--sans-font);
24 | font-weight: var(--sans-font-medium);
25 | }
26 |
27 | .font-sansSemibold {
28 | font-family: var(--sans-font);
29 | font-weight: var(--sans-font-semibold);
30 | }
31 |
32 | .font-sansBold {
33 | font-family: var(--sans-font);
34 | font-weight: var(--sans-font-bold);
35 | }
36 |
37 | .font-serifLight {
38 | font-family: var(--serif-font);
39 | font-weight: var(--serif-font-light);
40 | }
41 |
42 | .font-serifNormal {
43 | font-family: var(--serif-font);
44 | font-weight: var(--serif-font-normal);
45 | }
46 |
47 | .font-serifMedium {
48 | font-family: var(--serif-font);
49 | font-weight: var(--serif-font-medium);
50 | }
51 |
52 | .font-serifBold {
53 | font-family: var(--serif-font);
54 | font-weight: var(--serif-font-bold);
55 | }
56 |
57 | .fb-comments iframe {
58 | width: 100% !important;
59 | }
60 |
61 | .prev-next-post {
62 | height: 3rem;
63 | margin: 0 0 1rem;
64 | display: -webkit-box;
65 | -webkit-line-clamp: 2;
66 | -webkit-box-orient: vertical;
67 | overflow: hidden;
68 | text-overflow: ellipsis;
69 | }
70 | /* ! purgecss end ignore */
71 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/templates/authorTemplate.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Layout from "../components/Layout";
3 | import { graphql } from "gatsby";
4 | import { PaginationContext } from "../models/pagination.model";
5 | import PostCard from "../components/PostCard";
6 | import Pagination from "../components/Pagination";
7 | import userAvatar from "../images/female_avatar.svg";
8 | import { PostDescription } from "../models/all-post-description.model";
9 | import { AuthorDescription } from "../models/author-description.model";
10 | import WebsiteMeta from "../components/meta/website-meta";
11 |
12 | type AuthorTemplateProps = {
13 | data: {
14 | allWordpressPost: {
15 | edges: {
16 | node: PostDescription;
17 | }[];
18 | };
19 | wordpressWpUsers: AuthorDescription;
20 | };
21 | location: any;
22 | pageContext?: PaginationContext;
23 | };
24 |
25 | const AuthorTemplate: React.FC = ({
26 | data,
27 | location,
28 | pageContext,
29 | }) => {
30 | const { allWordpressPost, wordpressWpUsers } = data;
31 | return (
32 |
33 |
35 |
36 |
37 |
38 |
47 |
48 | {wordpressWpUsers.name}
49 |
50 | {/*
51 | Regional Manager
52 | */}
53 | {wordpressWpUsers.description && (
54 |
60 | )}
61 |
62 |
64 |
65 |
66 |
67 | {allWordpressPost.edges.map(({ node }, i) => {
68 | return
;
69 | })}
70 |
72 |
74 | );
75 | };
76 |
77 | export default AuthorTemplate;
78 |
79 | export const pageQuery = graphql`
80 | query($slug: String!, $limit: Int!, $skip: Int!) {
81 | wordpressWpUsers(slug: { eq: $slug }) {
82 | ...WordpressAuthorData
83 | }
84 | allWordpressPost(
85 | filter: { author: { slug: { eq: $slug } } }
86 | limit: $limit
87 | skip: $skip
88 | ) {
89 | edges {
90 | node {
91 | ...WordPressPostData
92 | }
93 | }
94 | }
95 | }
96 | `;
97 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/templates/indexTemplate.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Layout from "../components/Layout";
3 | import { graphql } from "gatsby";
4 | import { PostDescription } from "../models/all-post-description.model";
5 | import { PaginationContext } from "../models/pagination.model";
6 | import PostCard from "../components/PostCard";
7 | import Pagination from "../components/Pagination";
8 | import WebsiteMeta from "../components/meta/website-meta";
9 | import url from "url";
10 | import classNames from "classnames";
11 | import CtaMini from "../components/CtaMini";
12 |
13 | type IndexPageProps = {
14 | data: {
15 | // allGhostPost: AllGhostPostDescription;
16 | // ghostSettings: {
17 | // title: string;
18 | // description: string;
19 | // cover_image: string;
20 | // };
21 | allWordpressPost: {
22 | edges: {
23 | node: PostDescription;
24 | }[];
25 | };
26 | site: {
27 | siteMetadata: {
28 | siteTitle: string;
29 | siteDescription: string;
30 | coverUrl: string;
31 | siteUrl: string;
32 | };
33 | };
34 | };
35 | location: any;
36 | pageContext?: PaginationContext;
37 | };
38 |
39 | const IndexPage: React.FC = ({
40 | data,
41 | location,
42 | pageContext,
43 | }) => {
44 | const { site, allWordpressPost } = data;
45 |
46 | const backgroundImage = site.siteMetadata.coverUrl
47 | ? url.resolve(site.siteMetadata.siteUrl, site.siteMetadata.coverUrl)
48 | : null;
49 |
50 | return (
51 | <>
52 |
53 |
86 |
87 |
88 | {allWordpressPost.edges.map(({ node }, i) => {
89 | return
;
90 | })}
91 |
93 |
94 | {/* Pagination */}
95 |
98 |
99 | );
100 | };
101 |
102 | export default IndexPage;
103 |
104 | export const pageQuery = graphql`
105 | query WordpressQuery($skip: Int!, $limit: Int!) {
106 | allWordpressPost(
107 | sort: { fields: [sticky, date], order: [DESC, DESC] }
108 | skip: $skip
109 | limit: $limit
110 | ) {
111 | edges {
112 | node {
113 | ...WordPressPostData
114 | }
115 | }
116 | }
117 | site {
118 | siteMetadata {
119 | siteTitle
120 | siteDescription
121 | coverUrl
122 | siteUrl
123 | }
124 | }
125 | }
126 | `;
127 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/templates/pageTemplate.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import Layout from "../components/Layout";
3 | import { graphql, navigate, Link } from "gatsby";
4 | import "../styles/richtext.css";
5 | import { PageDetails } from "../models/page-description.model";
6 | import CtaMini from "../components/CtaMini";
7 | import WebsiteMeta from "../components/meta/website-meta";
8 | import ArticleMeta from "../components/meta/article-meta";
9 | import Img from "gatsby-image";
10 | import facebookShare from "../images/facebook-share.svg";
11 | import twitterShare from "../images/twitter-share.svg";
12 | import linkedInShare from "../images/linkedin-share.svg";
13 | import pintrestShare from "../images/pinterest-share.svg";
14 | import whatsappShare from "../images/whatsapp-share.svg";
15 | import mailShare from "../images/mail.svg";
16 | import CopyLink from "../components/copy-link";
17 |
18 | type IndexPageProps = {
19 | data: {
20 | wordpressPage: PageDetails;
21 | };
22 | location: any;
23 | };
24 |
25 | const PageTemplate: React.FC = ({ data, location }) => {
26 | const { wordpressPage } = data;
27 |
28 | const [href, sethref] = useState("");
29 |
30 | const [origin, setOrigin] = useState("");
31 |
32 | useEffect(() => {
33 | if (typeof window !== "undefined") {
34 | sethref(window.location.href);
35 | setOrigin(window.location.origin);
36 | }
37 | }, []);
38 |
39 | const twitterShareUrl = `https://twitter.com/share?text=${wordpressPage.plainTitle}&url=${href}`;
40 |
41 | const facebookShareUrl = `https://www.facebook.com/sharer/sharer.php?u=${href}`;
42 |
43 | const linkedInShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${href}&title=${wordpressPage.plainTitle}`;
44 |
45 | const mailShareUrl = `mailto:?subject=${wordpressPage.plainTitle}&body=${href}`;
46 |
47 | let pinterestShareUrl = `https://www.pinterest.com/pin/create/button/?url=${href}&description=${wordpressPage.title}`;
48 | if ( wordpressPage.featured_media &&
49 | wordpressPage.featured_media.localFile &&
50 | wordpressPage.featured_media.localFile.publicURL
51 | ) {
52 | pinterestShareUrl += `&media=${
53 | origin + wordpressPage.featured_media.localFile.publicURL
54 | }`;
55 | }
56 |
57 | const whatsAppShareUrl = `https://wa.me/?text=${encodeURIComponent(
58 | wordpressPage.title + "\n" + href
59 | )}`;
60 |
61 | const handleNavigation = (e: any, slug) => {
62 | e.stopPropagation();
63 | navigate(slug);
64 | };
65 | return (
66 |
67 |
69 |
70 |
75 | {wordpressPage.date}
76 | •
77 |
84 |
85 |
86 | {wordpressPage.featured_media?.localFile?.childImageSharp?.fluid && (
87 |
88 |
94 | )}
95 | {!wordpressPage.featured_media?.localFile?.childImageSharp?.fluid &&
96 | wordpressPage.featured_media?.localFile?.publicURL && (
97 |
98 |
105 | )}
106 |
107 |
108 |
112 |
113 | {wordpressPage.tags && wordpressPage.tags.length > 0 && (
114 |
115 | {wordpressPage.tags.map((tag, index) => {
116 | return (
117 |
handleNavigation(e, `tag/${tag.slug}`)}
119 | className="px-3 py-1 rounded-full mr-3 text-gray-700 cursor-pointer hover:text-white hover:border-gray-700 hover:bg-gray-700 bg-gray-300 mb-4"
120 | key={index}
121 | >
122 | #{tag.name}
123 |
124 | );
125 | })}
126 |
200 |
202 | );
203 | };
204 |
205 | export default PageTemplate;
206 |
207 | export const PageTemplateQuery = graphql`
208 | query($slug: String!) {
209 | wordpressPage(slug: { eq: $slug }) {
210 | ...WordpressPageData
211 | }
212 | }
213 | `;
214 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/templates/postTemplate.amp.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { graphql, Link } from "gatsby";
3 | import { PostDescription } from "../models/all-post-description.model";
4 | import ArticleMeta from "../components/meta/article-meta";
5 |
6 | type PostTemplate = {
7 | data: {
8 | wordpressPost: PostDescription;
9 | };
10 | location: any;
11 | pageContext: {
12 | title: string;
13 | amp: boolean;
14 | };
15 | };
16 |
17 | const PostTemplate: React.FC = ({
18 | data,
19 | location,
20 | pageContext,
21 | }) => {
22 | const { wordpressPost } = data;
23 | return (
24 | <>
25 |
26 |
34 |
35 |
36 |
37 |
42 |
43 |
{data.wordpressPost.author.name}
44 |
45 |
49 | {data.wordpressPost.date}
50 | {" "}
51 |
53 | {data.wordpressPost.featured_media?.localFile?.childImageSharp
54 | ?.fluid && (
55 |
56 |
64 | )}
65 |
69 |
70 | {data.wordpressPost.tags && data.wordpressPost.tags.length > 0 && (
71 |
77 | )}
78 |
79 |
84 |
85 |
86 |
87 | );
88 | };
89 | export default PostTemplate;
90 |
91 | export const postDataQuery = graphql`
92 | query($slug: String!) {
93 | wordpressPost(permaLinkSlug: { eq: $slug }) {
94 | title
95 | content
96 | excerpt
97 | plainExcerpt
98 | plainTitle
99 | slug: permaLinkSlug
100 | categories {
101 | name
102 | slug
103 | }
104 | readingTime
105 | featured_media: featured_media_custom {
106 | localFile {
107 | publicURL
108 | childImageSharp {
109 | fluid(maxWidth: 2000, sizes: "90") {
110 | ...GatsbyImageSharpFluid
111 | }
112 | }
113 | seo: childImageSharp {
114 | fixed(width: 1200, quality: 100) {
115 | src
116 | }
117 | }
118 |
119 | }
120 | }
121 | author {
122 | name
123 | slug
124 | avatar_urls {
125 | wordpress_96
126 | }
127 | description
128 | }
129 | tags: tags_custom {
130 | name
131 | slug
132 | }
133 | date(formatString: "MMMM DD YYYY")
134 | modified(formatString: "MMMM DD YYYY")
135 | sticky
136 | }
137 | }
138 | `;
139 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/templates/tagTemplate.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Layout from "../components/Layout";
3 | import { graphql } from "gatsby";
4 | import { PaginationContext } from "../models/pagination.model";
5 | import PostCard from "../components/PostCard";
6 | import Pagination from "../components/Pagination";
7 | import { PostDescription } from "../models/all-post-description.model";
8 | import WebsiteMeta from "../components/meta/website-meta";
9 |
10 | type TagTemplateProps = {
11 | location: any;
12 | pageContext: PaginationContext;
13 | data: {
14 | allWordpressPost: {
15 | edges: { node: PostDescription }[];
16 | };
17 | wordpressTag: {
18 | name: string;
19 | count: number;
20 | description: string;
21 | };
22 | };
23 | };
24 |
25 | const TagTemplate: React.FC = ({
26 | data,
27 | location,
28 | pageContext,
29 | }) => {
30 | const { wordpressTag, allWordpressPost } = data;
31 | return (
32 |
33 |
35 |
36 |
37 |
38 |
39 | {wordpressTag.count} {wordpressTag.count > 1 ? "posts" : "post"}
40 |
41 |
42 | {wordpressTag.name}
43 |
44 | {wordpressTag.description && (
45 |
49 | )}
50 |
51 |
53 |
54 |
55 |
56 | {allWordpressPost.edges.map(({ node }, i) => {
57 | return
;
58 | })}
59 |
61 |
63 | );
64 | };
65 |
66 | export default TagTemplate;
67 |
68 | export const TagTemplateQuery = graphql`
69 | query($slug: String!, $limit: Int!, $skip: Int!) {
70 | wordpressTag(slug: { eq: $slug }) {
71 | name
72 | count
73 | description
74 | }
75 | allWordpressPost(
76 | filter: { tags_custom: { elemMatch: { slug: { eq: $slug } } } }
77 | limit: $limit
78 | skip: $skip
79 | ) {
80 | edges {
81 | node {
82 | ...WordPressPostData
83 | }
84 | }
85 | }
86 | }
87 | `;
88 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/utils/.ghost.json:
--------------------------------------------------------------------------------
1 | {
2 | "development": {
3 | "apiUrl": "https://cms.gotsby.org",
4 | "contentApiKey": "387f956eaa95345f7bb484d0b8"
5 | },
6 | "production": {
7 | "apiUrl": "https://cms.gotsby.org",
8 | "contentApiKey": "387f956eaa95345f7bb484d0b8"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/utils/fragments.js:
--------------------------------------------------------------------------------
1 | import { graphql } from "gatsby";
2 |
3 | /**
4 | * These so called fragments are the fields we query on each template.
5 | * A fragment make queries a bit more reuseable, so instead of typing and
6 | * remembering every possible field, you can just use
7 | * ...WordPressPostsData
8 | * for example to load all post fields into your GraphQL query.
9 | *
10 | * Further info 👉🏼 https://www.gatsbyjs.org/docs/graphql-reference/#fragments
11 | *
12 | */
13 |
14 | // Used for site config
15 | export const wordPressPostData = graphql`
16 | fragment WordPressPostData on wordpress__POST {
17 | title
18 | content
19 | excerpt
20 | plainExcerpt
21 | plainTitle
22 | slug: permaLinkSlug
23 | categories {
24 | name
25 | slug
26 | }
27 | readingTime
28 | featured_media: featured_media_custom {
29 | localFile {
30 | publicURL
31 | childImageSharp {
32 | fluid(maxWidth: 2000, sizes: "90") {
33 | ...GatsbyImageSharpFluid
34 | }
35 | }
36 | seo: childImageSharp {
37 | fixed(width: 1200, quality: 100) {
38 | src
39 | }
40 | }
41 |
42 | }
43 | }
44 | author {
45 | name
46 | slug
47 | avatar_urls {
48 | wordpress_96
49 | }
50 | description
51 | }
52 | tags: tags_custom {
53 | name
54 | slug
55 | }
56 | date(formatString: "MMMM DD YYYY")
57 | modified(formatString: "MMMM DD YYYY")
58 | sticky
59 | }
60 | `;
61 |
62 | // export const wordpressSiteMetaData = graphql`
63 | // fragment WordpressSiteMetaData on WPSiteMetaData {
64 | // name: siteName
65 | // description: siteDescription
66 | // language: language
67 | // }
68 | // `;
69 |
70 | export const wordpressPageData = graphql`
71 | fragment WordpressPageData on wordpress__PAGE {
72 | title
73 | content
74 | excerpt
75 | plainExcerpt
76 | plainTitle
77 | slug
78 | readingTime
79 | featured_media: featured_media_custom {
80 | localFile {
81 | publicURL
82 | childImageSharp {
83 | fluid(maxWidth: 2000, sizes: "90") {
84 | ...GatsbyImageSharpFluid
85 | }
86 | }
87 | seo: childImageSharp {
88 | fixed(width: 1200, quality: 100) {
89 | src
90 | }
91 | }
92 | }
93 | }
94 | author {
95 | name
96 | slug
97 | avatar_urls {
98 | wordpress_96
99 | }
100 | description
101 | }
102 | date(formatString: "MMMM DD YYYY")
103 | modified(formatString: "MMMM DD YYYY")
104 | }
105 | `;
106 |
107 | export const wordpressAuthorData = graphql`
108 | fragment WordpressAuthorData on wordpress__wp_users {
109 | name
110 | slug
111 | description
112 | avatar_urls {
113 | wordpress_96
114 | }
115 | }
116 | `;
117 |
--------------------------------------------------------------------------------
/gatsby-wordpress-balsa-theme/src/utils/rss/generate-feed.js:
--------------------------------------------------------------------------------
1 | const cheerio = require(`cheerio`)
2 | const tagsHelper = require(`@tryghost/helpers`).tags
3 | const _ = require(`lodash`)
4 |
5 | const generateItem = function generateItem(post) {
6 | const itemUrl = post.canonical_url || post.url
7 | const html = post.html
8 | const htmlContent = cheerio.load(html, { decodeEntities: false, xmlMode: true })
9 | const item = {
10 | title: post.title,
11 | description: post.excerpt,
12 | guid: post.id,
13 | url: itemUrl,
14 | date: post.published_at,
15 | categories: _.map(tagsHelper(post, { visibility: `public`, fn: tag => tag }), `name`),
16 | author: post.primary_author ? post.primary_author.name : null,
17 | custom_elements: [],
18 | }
19 | let imageUrl
20 |
21 | if (post.feature_image) {
22 | imageUrl = post.feature_image
23 |
24 | // Add a media content tag
25 | item.custom_elements.push({
26 | 'media:content': {
27 | _attr: {
28 | url: imageUrl,
29 | medium: `image`,
30 | },
31 | },
32 | })
33 |
34 | // Also add the image to the content, because not all readers support media:content
35 | htmlContent(`p`).first().before(` ![\"code-export-for-devs\"](\"http://52.54.96.45/wp-content/uploads/2020/04/code-export-for-devs-1024x777.png\")
