Fixes #143 | Make gatsby-boilerplate compatible with prefixPaths and …

…gh-pages

content/blog/2016-12-17-making-sense-of-the-scaas-new-flavor-wheel.md

@@ -6,7 +6,7 @@ description: The Coffee Taster’s Flavor Wheel, the official resource used by c
 title: Making sense of the SCAA’s new Flavor Wheel
 ---
 
-![flavor wheel](/images/flavor_wheel.jpg)
+![flavor wheel](/gatsby-boilerplate/images/flavor_wheel.jpg)
 
 The SCAA updated the wheel to reflect the finer nuances needed to describe flavors more precisely. The new descriptions are more detailed and hence allow cuppers to distinguish between more flavors.
 

content/blog/2017-01-04-a-beginners-guide-to-brewing-with-chemex.md

@@ -1,12 +1,12 @@
 ---
 author: Diego Nascimento
-banner: /images/chemex-pour-over-glass-coffee-maker-with-wood-collar-c.jpg
+banner: images/chemex-pour-over-glass-coffee-maker-with-wood-collar-c.jpg
 date: 2017-01-04T15:04:10.000Z
 description: Brewing with a Chemex probably seems like a complicated, time-consuming ordeal, but once you get used to the process, it becomes a soothing ritual that's worth the effort every time.
 title: A beginners’ guide to brewing with Chemex
 ---
 
-![chemex](/images/chemex-pour-over-glass-coffee-maker-with-wood-collar-c.jpg)
+![chemex](/gatsby-boilerplate/images/chemex-pour-over-glass-coffee-maker-with-wood-collar-c.jpg)
 
 This week we’ll **take** a look at all the steps required to make astonishing coffee with a Chemex at home. The Chemex Coffeemaker is a manual, pour-over style glass-container coffeemaker that Peter Schlumbohm invented in 1941, and which continues to be manufactured by the Chemex Corporation in Chicopee, Massachusetts.
 

content/blog/2017-01-04-just-in-small-batch-of-jamaican-blue-mountain-in-store-next-week.md

@@ -1,6 +1,6 @@
 ---
 author: Matuzalém Teles
-banner: /images/jamaicanbluemountain.jpg
+banner: images/jamaicanbluemountain.jpg
 date: 2017-01-04T15:04:10.000Z
 description: >-
   We’re proud to announce that we’ll be offering a small batch of Jamaica Blue
@@ -24,7 +24,7 @@ This is mainly due to the cold climate which inhibits growth. The small coffee f
 
 Jamaican Blue Mountain Coffee or Jamaica Blue Mountain Coffee is a classification of coffee grown in the Blue Mountains of Jamaica. The best lots of Blue Mountain coffee are noted for their mild flavor and lack of bitterness. Over the past few decades, this coffee has developed a reputation that has made it one of the most expensive and sought-after coffees in the world. Over 80% of all Jamaican Blue Mountain Coffee is exported to Japan. In addition to its use for brewed coffee, the beans are the flavor base of Tia Maria coffee liqueur.
 
-![bluemontain](/images/jamaicanbluemountain.jpg)
+![bluemontain](/gatsby-boilerplate/images/jamaicanbluemountain.jpg)
 
 Jamaican Blue Mountain Coffee is a globally protected certification mark, meaning only coffee certified by the Coffee Industry Board of Jamaica can be labeled as such. It comes from a recognized growing region in the Blue Mountain region of Jamaica, and its cultivation is monitored by the Coffee Industry Board of Jamaica.
 

content/blog/2018-11-07-release.md

@@ -1,12 +1,12 @@
 ---
 author: Diego Nascimento
-banner: /images/hoohay.jpg
+banner: images/hoohay.jpg
 date: 2018-11-07T12:00:00.000Z
 description: Start your new Gatsby project with this amazing boilerplate <3
 title: Gatsby Boilerplate was launched!
 needsAuth: false
 ---
 
-![doge](/images/hoohay.jpg)
+![doge](/gatsby-boilerplate/images/hoohay.jpg)
 
 Check it out at https://gatsby-boilerplate.wedeploy.io

content/docs/migration-from-electric/migration-guides/blogs.md

@@ -23,7 +23,7 @@ layout: "blog"
 ```markdown
 ---
 author: Diego Nascimento
-banner: /images/flavor_wheel.jpg
+banner: images/flavor_wheel.jpg
 date: 2016-12-17T15:04:10.000Z
 description: The Coffee Taster’s Flavor Wheel, the official resource used by coffee tasters, has been revised for the first time this year.
 title: Making sense of the SCAA’s new Flavor Wheel

gatsby-config.js

@@ -2,6 +2,7 @@ const clay = require('clay-css');
 const path = require('path');
 
 module.exports = {
+	pathPrefix: '/gatsby-boilerplate',
 	plugins: [
 		'gatsby-plugin-meta-redirect',
 		{
@@ -69,12 +70,12 @@ module.exports = {
 				display: 'minimal-ui',
 				icons: [
 					{
-						"src": "/favicons/android-chrome-192x192.png",
+						"src": "favicons/android-chrome-192x192.png",
 						"sizes": "192x192",
 						"type": "image/png"
 					},
 					{
-						"src": "/favicons/android-chrome-512x512.png",
+						"src": "favicons/android-chrome-512x512.png",
 						"sizes": "512x512",
 						"type": "image/png"
 					}

package.json

@@ -21,7 +21,7 @@
   },
   "scripts": {
     "dev": "rimraf public .cache && gatsby develop",
-    "deploy": "gatsby build && gh-pages -d public -b wedeploy",
+    "deploy": "gatsby build --prefix-paths && gh-pages -d public -b gh-pages",
     "develop": "rimraf public .cache && gatsby develop",
     "start": "npm run develop",
     "build": "gatsby build",

plugins/gatsby-remark-foreach-icons/index.js

@@ -3,6 +3,7 @@ const {resolve} = require('path');
 const countries = require('countries-list').countries;
 const globby = require('globby');
 const langs = require('languages');
+const { pathPrefix } = require('../../gatsby-config');
 
 const alternateCodes = {
 	'in': 'id',
@@ -13,7 +14,7 @@ const alternateCodes = {
 function replaceValue(array) {
 	const htmlValue = array.map(item => `<li>
         <svg class="lexicon-icon lexicon-icon-${item.icon}">
-            <use xlink:href="/images/icons/icons.svg#${item.icon}" />
+            <use xlink:href="${pathPrefix}/images/icons/icons.svg#${item.icon}" />
         </svg>
         <span>${item.name}</span>
     </li>`);

plugins/gatsby-remark-use-clipboard/index.js

@@ -1,4 +1,5 @@
 const visit = require('unist-util-visit');
+const { pathPrefix } = require('../../gatsby-config');
 
 module.exports = ({markdownAST}) => {
     visit(markdownAST, 'html', node => {
@@ -7,7 +8,7 @@ module.exports = ({markdownAST}) => {
         }
 
         node.value = `<div class="code-container" data-label="${node.label}">
-            <button class="btn btn-sm btn-copy" title="Copy"><svg class="lexicon-icon"><use xlink:href="/images/icons/icons.svg#paste"></use></svg></button>
+            <button class="btn btn-sm btn-copy" title="Copy"><svg class="lexicon-icon"><use xlink:href="${pathPrefix}/images/icons/icons.svg#paste"></use></svg></button>
             ${node.value}
         </div>`;
     });

src/components/Blog/BlogArticle/BlogArticle.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import MDXRenderer from 'gatsby-mdx/mdx-renderer';
-import {Link} from 'gatsby';
+import { Link, withPrefix } from 'gatsby';
 import Typography from '../../Typography';
 
 export default class BlogArticle extends Component {
@@ -44,17 +44,17 @@ const SocialShare = (props) => (
         <div className="social-buttons">
             <a className="social-button facebook" href={`https://www.facebook.com/sharer/sharer.php?u=${props.location.href}`} target="_blank" rel="noopener noreferrer">
                 <svg className="lexicon-icon">
-                    <use xlinkHref="/images/icons/icons.svg#social-facebook"></use>
+                    <use xlinkHref={withPrefix("images/icons/icons.svg#social-facebook")}></use>
                 </svg>
             </a>
             <a className="social-button twitter" href={`https://twitter.com/home?status=${props.location.href}`} target="_blank" rel="noopener noreferrer">
                 <svg className="lexicon-icon">
-                    <use xlinkHref="/images/icons/icons.svg#twitter"></use>
+                    <use xlinkHref={withPrefix("images/icons/icons.svg#twitter")}></use>
                 </svg>
             </a>
             <a className="social-button linkedin" href={`https://www.linkedin.com/shareArticle?mini=true&amp;url=${props.location.href}`} target="_blank" rel="noopener noreferrer">
                 <svg className="lexicon-icon">
-                    <use xlinkHref="/images/icons/icons.svg#social-linkedin"></use>
+                    <use xlinkHref={withPrefix("images/icons/icons.svg#social-linkedin")}></use>
                 </svg>
             </a>
         </div>

src/components/Blog/BlogList/BlogList.js

@@ -1,4 +1,5 @@
-import { Link, StaticQuery, graphql } from 'gatsby';
+import { window } from 'browser-monads';
+import { Link, StaticQuery, withPrefix, graphql } from 'gatsby';
 import React, { Component } from 'react';
 import CodeTabs from '../../CodeTabs';
 import CodeClipboard from '../../CodeClipboard';
@@ -84,7 +85,7 @@ const internalLinkTo = (post, index) => {
 const card = (post, index) => {
     return(
         <div key={index} className="card">
-            <img className="mx-auto" alt="banner" src={post.banner} />
+            <img className="mx-auto" alt="banner" src={isExternalUrl(post.banner) ? post.banner : withPrefix(post.banner)} />
             <div className="card-body">
                 <h2 className="clay-h2 font-weight-bold">{post.title}</h2>
                 <p className="clay-p">{post.description}</p>
@@ -93,4 +94,15 @@ const card = (post, index) => {
             </div>
         </div>
     );
-};
+};
+
+const isExternalUrl = (url) => {
+    const match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);
+    if (typeof match[1] === "string" && match[1].length > 0 && match[1].toLowerCase() !== window.location.protocol) {
+        return true;
+    }
+    if (typeof match[2] === "string" && match[2].length > 0 && match[2].replace(new RegExp(":(" + { "http:": 80, "https:": 443 }[window.location.protocol] + ")?$"), "") !== window.location.host) {
+        return true;
+    }
+    return false;
+}

src/components/Footer/Footer.js

@@ -1,12 +1,13 @@
 import React from 'react';
+import { withPrefix } from 'gatsby';
 
 const Footer = () => {
     return (
         <div className="footer">
             <div className="container-fluid container-fluid-max-lg">
                 <div className="row">
                     <div className="col-lg text-center text-lg-left mb-4 mb-lg-0">
-                        <img className="logo" alt="liferay logo" src="/images/liferayLogo.png" />
+                        <img className="logo" alt="liferay logo" src={withPrefix("images/liferayLogo.png")} />
 
                         <div className="clearfix d-lg-none"></div>
 

src/components/LayoutNav/LayoutNav.js

@@ -1,6 +1,6 @@
 import { window, document } from 'browser-monads';
 import React, { Component } from 'react';
-import { Link } from "gatsby";
+import { Link, withPrefix } from 'gatsby';
 import classnames from 'classnames';
 
 import { isLoggedIn, logout } from '../../services/auth';
@@ -69,14 +69,14 @@ class LayoutNav extends Component {
             <nav ref="navElement" className={styles}>
                 <div className="container-fluid">
                     <Link to="/" className="navbar-brand">
-                        <img className="logo mr-2" src="/images/home/liferay_logo.svg" alt="Liferay Logo" />
+                        <img className="logo mr-2" src={withPrefix("/images/home/liferay_logo.svg")} alt="Liferay Logo" />
                         <span className="title align-middle">{process.env.PROJECT_NAME}</span>
                     </Link>
 
                     {sidebarHamburguerIcon &&
                         <button onClick={this.expandToggler} className="navbar-toggler p-2 order-md-1" type="button" data-toggle="collapse" data-target="#claySidebar" aria-controls="claySidebar" aria-expanded="false" aria-label="Toggle navigation">
                             <svg aria-hidden="true" className="lexicon-icon lexicon-icon-bars">
-                                <use xlinkHref="/images/icons/icons.svg#bars" />
+                                <use xlinkHref={withPrefix("images/icons/icons.svg#bars")} />
                             </svg>
                         </button>
                     }
@@ -101,7 +101,7 @@ class LayoutNav extends Component {
                         ) : ''}
                         <li className="nav-item">
                             <a className="mx-3 mr-lg-0" href={process.env.GITHUB_REPO}  target="_blank" rel="noopener noreferrer">
-                                <img src="/images/home/GitHub-Mark-64px.svg" alt="" />
+                                <img src={withPrefix("/images/home/GitHub-Mark-64px.svg")} alt="" />
                             </a>
                         </li>
                     </ul>

src/components/Sidebar/Navigation.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import classNames from 'classnames';
-import { Link } from "gatsby"
+import { Link, withPrefix } from "gatsby"
 
 class Navigation extends Component {
     _handleOnClick(index, depth, section, event) {
@@ -61,7 +61,7 @@ const Anchor = ({page}) => {
             <a className="align-middle" href="#no">
                 <span>{page.title}</span>
                 <svg className="collapse-toggle clay-icon icon-monospaced">
-                    <use xlinkHref="/images/icons/icons.svg#caret-bottom" />
+                    <use xlinkHref={withPrefix("images/icons/icons.svg#caret-bottom")} />
                 </svg>
             </a>
         );

src/components/Sidebar/Search.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { withPrefix } from 'gatsby';
 
 const apiKey = process.env.ALGOLIA_API_KEY;
 
@@ -47,7 +48,7 @@ class Search extends Component {
 							/>
 							<span className="input-group-addon">
 								<svg className="lexicon-icon">
-									<use xlinkHref="/images/icons/icons.svg#search" />
+									<use xlinkHref={withPrefix("images/icons/icons.svg#search")} />
 								</svg>
 							</span>
 						</div>

src/components/SimpleFooter/SimpleFooter.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { withPrefix } from 'gatsby';
 
 const SimpleFooter = (props) => {
 
@@ -15,13 +16,13 @@ const SimpleFooter = (props) => {
                         <li className="mr-2">
                             <a className="rounded-circle sticker sticker-secondary" href={issuesURL} target="_blank" rel="noopener noreferrer">
                                 <svg aria-hidden="true" className="lexicon-icon lexicon-icon-bars">
-                                    <use xlinkHref="/images/icons/icons.svg#comments" />
+                                    <use xlinkHref={withPrefix("images/icons/icons.svg#comments")} />
                                 </svg>
                             </a>
                         </li>
                         <li>
                             <a className="rounded-circle sticker sticker-secondary" href={`${editContentURL}/${slug.replace("html", "md")}`} target="_blank" rel="noopener noreferrer">
-                                <img className="lexicon-icon" src="/images/home/GitHub-Mark-64px.svg" alt="Github Logo" />
+                                <img className="lexicon-icon" src={withPrefix("images/home/GitHub-Mark-64px.svg")} alt="Github Logo" />
                             </a>
                         </li>
                     </ul>

src/components/Timeline/Timeline.js

@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import { withPrefix } from 'gatsby';
 
 class Timeline extends Component {
     _compareVersions(a, b) {
@@ -25,7 +26,7 @@ class Timeline extends Component {
                                         <span className="panel-title">{featProp.title}</span>
                                         <div className="timeline-increment">
                                             <svg aria-hidden="true" className={`lexicon-icon lexicon-icon-${featProp.icon}`}>
-                                                <use xlinkHref={`/images/icons/icons.svg#${featProp.icon}`}></use>
+                                                <use xlinkHref={withPrefix(`images/icons/icons.svg#${featProp.icon}`)}></use>
                                             </svg>
                                         </div>
                                         <div className="timeline-item-label">

src/html.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { withPrefix } from 'gatsby';
 
 class HTML extends Component {
     render() {
@@ -11,11 +12,11 @@ class HTML extends Component {
                         name="viewport"
                         content="width=device-width, initial-scale=1.0"
                     />
-                    <link rel="shortcut icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="16x16 32x32" />
-                    <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
-                    <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
-                    <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
-                    <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#0b5fff" />
+                    <link rel="shortcut icon" type="image/png" href={withPrefix("favicons/favicon-32x32.png")} sizes="16x16 32x32" />
+                    <link rel="apple-touch-icon" sizes="180x180" href={withPrefix("favicons/apple-touch-icon.png")} />
+                    <link rel="icon" type="image/png" sizes="32x32" href={withPrefix("favicons/favicon-32x32.png")} />
+                    <link rel="icon" type="image/png" sizes="16x16" href={withPrefix("favicons/favicon-16x16.png")} />
+                    <link rel="mask-icon" href={withPrefix("/favicons/safari-pinned-tab.svg")} color="#0b5fff" />
                     <meta name="msapplication-TileColor" content="#ffffff" />
                     <meta name="theme-color" content="#ffffff" />
                     {this.props.headComponents}

src/pages/404.js

@@ -1,9 +1,10 @@
 import React from 'react';
+import { withPrefix } from 'gatsby';
 
 const ErrorPage = () => (
     <>
         <div className="container-fluid container-fluid-max-lg">
-            <img className="image-fluid" alt="not found" src="/images/ray.png"></img>
+            <img className="image-fluid" alt="not found" src={withPrefix("images/ray.png")}></img>
             <h1 className="h1">Not Found</h1>
         </div>
     </>

src/pages/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
-import { Link } from 'gatsby';
+import { withPrefix, Link } from 'gatsby';
 import LayoutNav from '../components/LayoutNav';
 import {WOW} from 'wowjs';
 import Footer from '../components/Footer';
@@ -57,7 +57,7 @@ class Index extends Component {
                             <div className="row">
                                 <div className="col-md-4 ml-auto mr-lg-4 wow zoomIn" data-wow-duration="1.2s">
                                     <div className="text-center text-lg-right">
-                                        <img src="/images/home/github.svg" alt="Github Logo" />
+                                        <img src={withPrefix("images/home/github.svg")} alt="Github Logo" />
                                     </div>
                                 </div>
                                 <div className="col-md-6 mr-auto wow zoomIn" data-wow-duration="0.8s">