Enforce a starting and trailing slash on page urls (gatsbyjs#378)

This has been a common source of problem for users, and I think gatsby
can solve it automatically by enforcing these paths to fit a certain
criteria.

This change removes the invariant and opts to fix the path
automatically removing some of the user headache. It also enforces a
trailing slash for our current react-router setup.

lib/utils/build-page/url-resolver.js

@@ -1,7 +1,6 @@
 /* @flow weak */
 import { posix as path } from 'path'
 import _ from 'lodash'
-import invariant from 'invariant'
 
 let rewritePath
 try {
@@ -18,20 +17,27 @@ try {
 export default function pathResolver (pageData, parsedPath) {
   /**
    * Determines if a hardcoded path was given in the frontmatter of a page.
+   * Then enforces a starting and trailing slash where applicable on the url.
    */
   function hardcodedPath () {
-    if (pageData.path) {
-      const pathInvariantMessage = `
-      Hardcoded paths are relative to the website root so must be prepended with a
-      forward slash. You set the path to "${pageData.path}" in "${parsedPath.path}"
-      but it should be "/${pageData.path}"
+    if (_.isUndefined(pageData.path)) return void 0
 
-      See http://bit.ly/1qeNpdy for more.
-      `
-      invariant(pageData.path.charAt(0) === '/', pathInvariantMessage)
+    let pagePath = pageData.path
+
+    // Enforce a starting slash on all paths
+    const pathStartsWithSlash = _.startsWith(pagePath, '/')
+    if (!pathStartsWithSlash) {
+      pagePath = `/${pagePath}`
+    }
+
+    // Enforce a trailing slash on all paths
+    const pathHasExtension = path.extname(pagePath) !== ''
+    const pathEndsWithSlash = _.endsWith(pagePath, '/')
+    if (!pathEndsWithSlash && !pathHasExtension) {
+      pagePath = `${pagePath}/`
     }
 
-    return pageData.path
+    return pagePath
   }
 
   /**

test/utils/build-page/url-resolver.js

@@ -10,9 +10,30 @@ test('returns undefined when filename starts with _', t => {
 
 test('uses the path from page data', t => {
   const parsedPath = { name: 'page', dirname: 'a-directory/' }
-  const data = { path: '/page-at-root' }
+  const data = { path: '/page-at-root/' }
   const pagePath = urlResolver(data, parsedPath)
-  t.is(pagePath, '/page-at-root')
+  t.is(pagePath, '/page-at-root/')
+})
+
+test('appends a trailing slash to path from page data', t => {
+  const parsedPath = { name: 'page', dirname: 'a-directory/' }
+  const data = { path: '/user-defined-path' }
+  const pagePath = urlResolver(data, parsedPath)
+  t.is(pagePath, '/user-defined-path/')
+})
+
+test('does not append trailing slash to .html paths from page data', t => {
+  const parsedPath = { name: 'page', dirname: 'a-directory/' }
+  const data = { path: '/user-defined-path.html' }
+  const pagePath = urlResolver(data, parsedPath)
+  t.is(pagePath, '/user-defined-path.html')
+})
+
+test('prepends a slash to all paths from page data', t => {
+  const parsedPath = { name: 'page', dirname: 'a-directory/' }
+  const data = { path: 'user-defined-path/' }
+  const pagePath = urlResolver(data, parsedPath)
+  t.is(pagePath, '/user-defined-path/')
 })
 
 test('removes index from path', t => {