diff --git a/README.md b/README.md index 78419156528b5..4eea5e01e650d 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,7 @@ Websites built with Gatsby: * [React](https://reactjs.org/) ([source](https://github.com/reactjs/reactjs.org)) * [Sourcegraph](https://about.sourcegraph.com) * [Simply](https://simply.co.za) +* [The freeCodeCamp Guide](https://guide.freecodecamp.org) * [FloydHub's Blog](https://blog.floydhub.com) * [mParticle's Documentation](https://docs.mparticle.com) * [Segment's Blog](https://segment.com/blog/) @@ -69,6 +70,10 @@ Websites built with Gatsby: * [GRANDstack - GraphQL, React, Apollo, Neo4j Database](http://grandstack.io/) * [GraphCMS's website](https://graphcms.com) * [Mannequin.io](https://mannequin.io) ([source](https://github.com/LastCallMedia/Mannequin/tree/master/site)) +* [API Platform](https://api-platform.com) ([source](https://github.com/api-platform/website)) +* [Bottender Docs](https://bottender.js.org/) ([source](https://github.com/bottenderjs/bottenderjs.github.io)) +* [How to GraphQL](https://www.howtographql.com/) ([source](https://github.com/howtographql/howtographql)) +* [greglobinski.com](https://greglobinski.com) ([source](https://github.com/greglobinski/greglobinski-com)) ## Docs diff --git a/examples/using-react-url-query/src/pages/index.js b/examples/using-react-url-query/src/pages/index.js index b732c0fcf9521..a1c05984ea2c4 100644 --- a/examples/using-react-url-query/src/pages/index.js +++ b/examples/using-react-url-query/src/pages/index.js @@ -18,12 +18,14 @@ export default class IndexPage extends React.PureComponent { The example shows how to use{` `} react-url-query - {` `} + + {` `} for binding url query parameters to props.

- The value of this input is reflected in the URL as the t{` `} + The value of this input is reflected in the URL as the t + {` `} query parameter (with a max length of 8).

@@ -31,7 +33,8 @@ export default class IndexPage extends React.PureComponent {

- The value of this input is reflected in the URL as the n{` `} + The value of this input is reflected in the URL as the n + {` `} query parameter.

diff --git a/examples/using-remark-copy-linked-files/.eslintrc b/examples/using-remark-copy-linked-files/.eslintrc new file mode 100644 index 0000000000000..aadde9c0aa03d --- /dev/null +++ b/examples/using-remark-copy-linked-files/.eslintrc @@ -0,0 +1,8 @@ +{ + "env": { + "browser": true + }, + "globals": { + "graphql": false + } +} \ No newline at end of file diff --git a/examples/using-remark-copy-linked-files/.gitignore b/examples/using-remark-copy-linked-files/.gitignore new file mode 100644 index 0000000000000..8f5b35a4a9cbc --- /dev/null +++ b/examples/using-remark-copy-linked-files/.gitignore @@ -0,0 +1,3 @@ +public +.cache +node_modules diff --git a/examples/using-remark-copy-linked-files/README.md b/examples/using-remark-copy-linked-files/README.md new file mode 100644 index 0000000000000..7fdb0992b5a07 --- /dev/null +++ b/examples/using-remark-copy-linked-files/README.md @@ -0,0 +1,5 @@ +# using-gatsby-remark-copy-linked-files + +https://using-gatsby-remark-copy-linked-files.gatsbyjs.org + +Stub README description diff --git a/examples/using-remark-copy-linked-files/gatsby-config.js b/examples/using-remark-copy-linked-files/gatsby-config.js new file mode 100644 index 0000000000000..435c868f0e87d --- /dev/null +++ b/examples/using-remark-copy-linked-files/gatsby-config.js @@ -0,0 +1,66 @@ +module.exports = { + siteMetadata: { + title: `Gatsby Starter Blog`, + author: `Kyle Mathews`, + }, + plugins: [ + { + resolve: `gatsby-source-filesystem`, + options: { + path: `${__dirname}/src/pages`, + name: `pages`, + }, + }, + { + resolve: `gatsby-transformer-remark`, + options: { + plugins: [ + { + resolve: `gatsby-remark-responsive-iframe`, + options: { + wrapperStyle: `margin-bottom: 1.0725rem`, + }, + }, + `gatsby-remark-prismjs`, + // { + // resolve: `gatsby-remark-images`, + // options: { + // maxWidth: 740, + // }, + // }, + { + resolve: `gatsby-remark-copy-linked-files`, + options: { + // `ignoreFileExtensions` defaults to [`png`, `jpg`, `jpeg`, `bmp`, `tiff`] + // as we assume you'll use gatsby-remark-images to handle + // images in markdown as it automatically creates responsive + // versions of images. + // + // If you'd like to not use gatsby-remark-images and just copy your + // original images to the public directory, set + // `ignoreFileExtensions` to an empty array. + ignoreFileExtensions: [], + }, + }, + `gatsby-remark-smartypants`, + ], + }, + }, + `gatsby-transformer-sharp`, + `gatsby-plugin-sharp`, + { + resolve: `gatsby-plugin-google-analytics`, + options: { + //trackingId: `ADD YOUR TRACKING ID HERE`, + }, + }, + `gatsby-plugin-offline`, + `gatsby-plugin-react-helmet`, + { + resolve: `gatsby-plugin-typography`, + options: { + pathToConfigModule: `src/utils/typography`, + }, + }, + ], +} diff --git a/examples/using-remark-copy-linked-files/gatsby-node.js b/examples/using-remark-copy-linked-files/gatsby-node.js new file mode 100644 index 0000000000000..165f44bc32a35 --- /dev/null +++ b/examples/using-remark-copy-linked-files/gatsby-node.js @@ -0,0 +1,44 @@ +const _ = require(`lodash`) +const Promise = require(`bluebird`) +const path = require(`path`) + +exports.createPages = ({ graphql, boundActionCreators }) => { + const { createPage } = boundActionCreators + + return new Promise((resolve, reject) => { + const blogPost = path.resolve(`./src/templates/blog-post.js`) + resolve( + graphql( + ` + { + allMarkdownRemark(limit: 1000) { + edges { + node { + frontmatter { + path + } + } + } + } + } + ` + ).then(result => { + if (result.errors) { + console.log(result.errors) + reject(result.errors) + } + + // Create blog posts pages. + _.each(result.data.allMarkdownRemark.edges, edge => { + createPage({ + path: edge.node.frontmatter.path, + component: blogPost, + context: { + path: edge.node.frontmatter.path, + }, + }) + }) + }) + ) + }) +} diff --git a/examples/using-remark-copy-linked-files/package.json b/examples/using-remark-copy-linked-files/package.json new file mode 100644 index 0000000000000..168f9983efed9 --- /dev/null +++ b/examples/using-remark-copy-linked-files/package.json @@ -0,0 +1,47 @@ +{ + "name": "using-remark-copy-linked-files", + "private": true, + "description": "Gatsby example site on gatsby-remark-copy-linked-files", + "author": "Florian Kissling ", + "dependencies": { + "gatsby": "^1.9.108", + "gatsby-link": "^1.6.24", + "gatsby-plugin-google-analytics": "^1.0.12", + "gatsby-plugin-offline": "^1.0.10", + "gatsby-plugin-react-helmet": "^1.0.8", + "gatsby-plugin-sharp": "^1.6.20", + "gatsby-plugin-typography": "^1.7.10", + "gatsby-remark-copy-linked-files": "^1.5.20", + "gatsby-remark-images": "^1.5.31", + "gatsby-remark-prismjs": "^1.2.9", + "gatsby-remark-responsive-iframe": "^1.4.14", + "gatsby-remark-smartypants": "^1.4.8", + "gatsby-source-filesystem": "^1.5.8", + "gatsby-transformer-remark": "^1.7.20", + "gatsby-transformer-sharp": "^1.6.13", + "hast-util-to-html": "^3.1.0", + "lodash": "^4.15.0", + "react-responsive-grid": "^0.3.3", + "typeface-merriweather": "^0.0.35", + "typeface-montserrat": "^0.0.37", + "typography-theme-wordpress-2016": "^0.15.1" + }, + "devDependencies": { + "eslint": "^4.9.0", + "eslint-plugin-react": "^7.4.0", + "gh-pages": "^0.12.0", + "prettier": "^1.8.1" + }, + "license": "MIT", + "main": "n/a", + "scripts": { + "dev": "gatsby develop", + "lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .", + "test": "echo \"Error: no test specified\" && exit 1", + "format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js'", + "develop": "gatsby develop", + "build": "gatsby build", + "deploy": "gatsby build --prefix-paths && gh-pages -d public", + "fix-semi": "eslint --quiet --ignore-pattern node_modules --ignore-pattern public --parser babel-eslint --no-eslintrc --rule '{\"semi\": [2, \"never\"], \"no-extra-semi\": [2]}' --fix gatsby-node.js" + } +} diff --git a/examples/using-remark-copy-linked-files/src/components/Bio.js b/examples/using-remark-copy-linked-files/src/components/Bio.js new file mode 100644 index 0000000000000..6e39c7324ae6e --- /dev/null +++ b/examples/using-remark-copy-linked-files/src/components/Bio.js @@ -0,0 +1,41 @@ +import React from "react" + +// Import typefaces +import "typeface-montserrat" +import "typeface-merriweather" + +import profilePic from "./profile-pic.jpg" +import { rhythm } from "../utils/typography" + +class Bio extends React.Component { + render() { + return ( +
+ {`Kyle +

+ Written by Kyle Mathews who lives and works in San + Francisco building useful things.{` `} + + You should follow him on Twitter + +

+
+ ) + } +} + +export default Bio diff --git a/examples/using-remark-copy-linked-files/src/components/profile-pic.jpg b/examples/using-remark-copy-linked-files/src/components/profile-pic.jpg new file mode 100644 index 0000000000000..3d476d1b4b5ff Binary files /dev/null and b/examples/using-remark-copy-linked-files/src/components/profile-pic.jpg differ diff --git a/examples/using-remark-copy-linked-files/src/layouts/index.js b/examples/using-remark-copy-linked-files/src/layouts/index.js new file mode 100644 index 0000000000000..d9372d714c678 --- /dev/null +++ b/examples/using-remark-copy-linked-files/src/layouts/index.js @@ -0,0 +1,76 @@ +import React from "react" +import Link from "gatsby-link" +import { Container } from "react-responsive-grid" + +import { rhythm, scale } from "../utils/typography" + +require(`prismjs/themes/prism-solarizedlight.css`) + +class Template extends React.Component { + render() { + const { location, children } = this.props + let header + + let rootPath = `/` + if (typeof __PREFIX_PATHS__ !== `undefined` && __PREFIX_PATHS__) { + rootPath = __PATH_PREFIX__ + `/` + } + + if (location.pathname === rootPath) { + header = ( +

+ + Gatsby Starter Blog + +

+ ) + } else { + header = ( +

+ + Gatsby Starter Blog + +

+ ) + } + return ( + + {header} + {children()} + + ) + } +} + +export default Template diff --git a/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/Creativecommons-informational-flyer_eng.pdf b/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/Creativecommons-informational-flyer_eng.pdf new file mode 100644 index 0000000000000..c590f0895e82f Binary files /dev/null and b/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/Creativecommons-informational-flyer_eng.pdf differ diff --git a/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/alex-holyoake- 388538.jpg b/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/alex-holyoake- 388538.jpg new file mode 100644 index 0000000000000..22c17e65c5db7 Binary files /dev/null and b/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/alex-holyoake- 388538.jpg differ diff --git a/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/alex-holyoake-327106.jpg b/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/alex-holyoake-327106.jpg new file mode 100644 index 0000000000000..8470933d5f42a Binary files /dev/null and b/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/alex-holyoake-327106.jpg differ diff --git a/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/alex-holyoake-340782.jpg b/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/alex-holyoake-340782.jpg new file mode 100644 index 0000000000000..c7654f4a1e12c Binary files /dev/null and b/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/alex-holyoake-340782.jpg differ diff --git a/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/alex-holyoake-388536.jpg b/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/alex-holyoake-388536.jpg new file mode 100644 index 0000000000000..b477fc6ea6744 Binary files /dev/null and b/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/alex-holyoake-388536.jpg differ diff --git a/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/gatsbygram.mp4 b/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/gatsbygram.mp4 new file mode 100644 index 0000000000000..f4704f0807a0c Binary files /dev/null and b/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/gatsbygram.mp4 differ diff --git a/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/index.md b/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/index.md new file mode 100755 index 0000000000000..763f6989dcd22 --- /dev/null +++ b/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/index.md @@ -0,0 +1,125 @@ +--- +title: "Using gatsby-remark-copy-linked-files" +excerpt: "Using gatsby-remark-copy-linked-files." +date: "2017-11-13T10:19:45.267Z" +draft: false +path: "/using-gatsby-remark-copy-linked-files/" +--- + +Plugin documentation: [gatsby-remark-copy-linked-files](https://www.gatsbyjs.org/packages/gatsby-remark-copy-linked-files/)--_"Copies local files linked to/from markdown to your `public` folder."_ + +HTML small test (see the [gatsby/#2696](https://github.com/gatsbyjs/gatsby/issues/2696)--_"[gatsby-transformer-remark] Content of inline HTML tags from markdown source is outside of tags in HTML output."_): + +_This is a `` HTML tag with some Markdown formatting and inline code and CSS class of `caption`. Styles for the latter are defined in `utils/typography.js`._ + +## Images + +A simple Markdown image tag: + +![Markdown image tag](./alex-holyoake-388536.jpg) + +The HTML equivalent, with some inline `style`: + +HTML image tag + +_Two HTML image tags with inline styles in two Markdown paragraphs, image width set to `160px` and `280px` via inline `style`:_ + + We interrupt this program to annoy you and make things generally irritating. I cut down trees, I skip and jump, I like to press wildflowers, image #1 should be floating `left`. + +Hegel is arguing that the reality is merely an a priori adjunct of non-naturalistic ethics, Kant via the categorical imperative is holding that ontologically it exists only in the imagination, and Marx claims it was offside. + +### Markdown Headline `

` + + And whereas in most professions these would be considerable drawbacks, in chartered accountancy, they're a positive boon. Image #2 should be floating `right`. We're not cheap--here's a HTML href example.com on top! + +__Paragraph tags with Markdown content__ with two HTML images inline, running across multiple lines: ![inline image](./alex-holyoake-340782.jpg) + +

+ HTML Paragraph with two inline images: + + and another one: +

+ +## Links + +A HTML href on a single line: + +Download PDF + +HTML paragraph with text and HTML href inside: + +

Lorem ipsum Download PDF

+ +A HTML href on three lines – opening tag, inline text, closing tag: + + + Download PDF + + +Paragraph in regular Markdown and HTML href: Download PDF + +Paragraph in regular Markdown and Markdown href: [Download PDF](Creativecommons-informational-flyer_eng.pdf) + +## Fails & Wins + +_Wins are easily recognizable by either an image or a video being displayed--Fails are marked._ + +### Markdown Images containing a space + + + +Here's a Markdown image with space in filename: + +![](./alex-holyoake- 388538.jpg) + +But: HTML image with space in filename: + + + +### Embedding Video + +HTML video tag with `source` and a fallback paragraph, multiple lines: + + + +However doing the same in just one line of HTML fails-- +Video, single line: + + + +## gatsby-config.js + +```javascript +{ + resolve: `gatsby-transformer-remark`, + options: { + plugins: [ + { + resolve: `gatsby-remark-responsive-iframe`, + options: { + wrapperStyle: `margin-bottom: 1.0725rem`, + }, + }, + 'gatsby-remark-prismjs', + { + resolve: 'gatsby-remark-copy-linked-files', + options: { + // `ignoreFileExtensions` defaults to [`png`, `jpg`, `jpeg`, `bmp`, `tiff`] + // as we assume you'll use gatsby-remark-images to handle + // images in markdown as it automatically creates responsive + // versions of images. + // + // If you'd like to not use gatsby-remark-images and just copy your + // original images to the public directory, set + // `ignoreFileExtensions` to an empty array. + ignoreFileExtensions: [], + }, + }, + 'gatsby-remark-smartypants', + ], + }, +}, +``` diff --git a/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/my-name-is-yanick- 87426.jpg b/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/my-name-is-yanick- 87426.jpg new file mode 100644 index 0000000000000..d50dd78199fbc Binary files /dev/null and b/examples/using-remark-copy-linked-files/src/pages/2017-11-13-gatsby-remark-copy-linked-files/my-name-is-yanick- 87426.jpg differ diff --git a/examples/using-remark-copy-linked-files/src/pages/index.js b/examples/using-remark-copy-linked-files/src/pages/index.js new file mode 100644 index 0000000000000..31db7173b041f --- /dev/null +++ b/examples/using-remark-copy-linked-files/src/pages/index.js @@ -0,0 +1,70 @@ +import React from "react" +import Link from "gatsby-link" +import get from "lodash/get" +import Helmet from "react-helmet" + +import Bio from "../components/Bio" +import { rhythm } from "../utils/typography" + +class BlogIndex extends React.Component { + render() { + const siteTitle = get(this, `props.data.site.siteMetadata.title`) + const posts = get(this, `props.data.allMarkdownRemark.edges`) + + return ( +
+ + + {posts.map(post => { + if (post.node.frontmatter.path !== `/404/`) { + const title = get(post, `node.frontmatter.title`) || post.node.path + return ( +
+

+ + {title} + +

+ {post.node.frontmatter.date} +

+

+ ) + } + })} +
+ ) + } +} + +export default BlogIndex + +export const pageQuery = graphql` + query IndexQuery { + site { + siteMetadata { + title + } + } + allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) { + edges { + node { + excerpt + frontmatter { + path + date(formatString: "DD MMMM, YYYY") + } + frontmatter { + title + } + } + } + } + } +` diff --git a/examples/using-remark-copy-linked-files/src/templates/blog-post.js b/examples/using-remark-copy-linked-files/src/templates/blog-post.js new file mode 100644 index 0000000000000..0de6e51d5eec7 --- /dev/null +++ b/examples/using-remark-copy-linked-files/src/templates/blog-post.js @@ -0,0 +1,58 @@ +import React from "react" +import Helmet from "react-helmet" +import get from "lodash/get" + +import Bio from "../components/Bio" +import { rhythm, scale } from "../utils/typography" + +class BlogPostTemplate extends React.Component { + render() { + const post = this.props.data.markdownRemark + const siteTitle = get(this.props, `data.site.siteMetadata.title`) + + return ( +
+ +

{post.frontmatter.title}

+

+ {post.frontmatter.date} +

+
+
+ +
+ ) + } +} + +export default BlogPostTemplate + +export const pageQuery = graphql` + query BlogPostByPath($path: String!) { + site { + siteMetadata { + title + author + } + } + markdownRemark(frontmatter: { path: { eq: $path } }) { + id + html + frontmatter { + title + date(formatString: "MMMM DD, YYYY") + } + } + } +` diff --git a/examples/using-remark-copy-linked-files/src/utils/typography.js b/examples/using-remark-copy-linked-files/src/utils/typography.js new file mode 100644 index 0000000000000..68898b48daec7 --- /dev/null +++ b/examples/using-remark-copy-linked-files/src/utils/typography.js @@ -0,0 +1,41 @@ +import Typography from "typography" +import Wordpress2016 from "typography-theme-wordpress-2016" + +Wordpress2016.overrideThemeStyles = () => { + return { + "a.gatsby-resp-image-link": { + boxShadow: `none`, + }, + ".caption": { + maxWidth: `24rem`, + display: `block`, + lineHeight: 1.6, + }, + ".caption code": { + lineHeight: 1, + fontStyle: `normal`, + }, + code: { + background: `#fdf6e3`, + color: `rgba(0,0,0,0.75)`, + }, + ".fail": { + color: `crimson`, + fontWeight: `bold`, + borderBottom: `2px solid crimson`, + }, + ".win": { + color: `limegreen`, + fontWeight: `bold`, + }, + } +} + +const typography = new Typography(Wordpress2016) + +// Hot reload typography in development. +if (process.env.NODE_ENV !== `production`) { + typography.injectStyles() +} + +export default typography diff --git a/packages/gatsby-link/index.d.ts b/packages/gatsby-link/index.d.ts index 1569e23435ef1..05bdcf43f546d 100644 --- a/packages/gatsby-link/index.d.ts +++ b/packages/gatsby-link/index.d.ts @@ -8,4 +8,6 @@ export interface GatsbyLinkProps extends NavLinkProps { export const navigateTo: (path: string) => void; +export const withPrefix: (path: string) => string; + export default class GatsbyLink extends React.Component { } diff --git a/packages/gatsby-remark-code-repls/package.json b/packages/gatsby-remark-code-repls/package.json index 6695172dc5468..7aa54610f2e5d 100644 --- a/packages/gatsby-remark-code-repls/package.json +++ b/packages/gatsby-remark-code-repls/package.json @@ -6,6 +6,7 @@ "dependencies": { "babel-runtime": "^6.26.0", "lz-string": "^1.4.4", + "normalize-path": "^2.1.1", "recursive-readdir-synchronous": "^0.0.3", "unist-util-map": "^1.0.3" }, diff --git a/packages/gatsby-remark-code-repls/src/constants.js b/packages/gatsby-remark-code-repls/src/constants.js index e700beb1385e4..7cdbfa6f51082 100644 --- a/packages/gatsby-remark-code-repls/src/constants.js +++ b/packages/gatsby-remark-code-repls/src/constants.js @@ -1,12 +1,12 @@ "use strict" const { join } = require(`path`) +const normalizePath = require(`normalize-path`) module.exports = { OPTION_DEFAULT_LINK_TEXT: `REPL`, - OPTION_DEFAULT_REDIRECT_TEMPLATE_PATH: join( - __dirname, - `default-redirect-template.js` + OPTION_DEFAULT_REDIRECT_TEMPLATE_PATH: normalizePath( + join(__dirname, `default-redirect-template.js`) ), PROTOCOL_BABEL: `babel://`, PROTOCOL_CODEPEN: `codepen://`, diff --git a/packages/gatsby-remark-code-repls/src/gatsby-node.js b/packages/gatsby-remark-code-repls/src/gatsby-node.js index 311aeb29b4276..9a90fa00162e9 100644 --- a/packages/gatsby-remark-code-repls/src/gatsby-node.js +++ b/packages/gatsby-remark-code-repls/src/gatsby-node.js @@ -3,6 +3,7 @@ const fs = require(`fs`) const { extname, resolve } = require(`path`) const recursiveReaddir = require(`recursive-readdir-synchronous`) +const normalizePath = require(`normalize-path`) const { OPTION_DEFAULT_LINK_TEXT, @@ -65,7 +66,8 @@ exports.createPages = ( createPage({ path: slug, - component: resolve(redirectTemplate), + // Normalize the path so tests pass on Linux + Windows + component: normalizePath(resolve(redirectTemplate)), context: { action, payload, diff --git a/packages/gatsby-remark-code-repls/src/index.js b/packages/gatsby-remark-code-repls/src/index.js index 1e34afbc9dd99..34499a0e17bc8 100644 --- a/packages/gatsby-remark-code-repls/src/index.js +++ b/packages/gatsby-remark-code-repls/src/index.js @@ -4,6 +4,7 @@ const fs = require(`fs`) const LZString = require(`lz-string`) const { join } = require(`path`) const map = require(`unist-util-map`) +const normalizePath = require(`normalize-path`) const { OPTION_DEFAULT_LINK_TEXT, @@ -48,7 +49,7 @@ module.exports = ( if (!filePath.endsWith(`.js`)) { filePath += `.js` } - filePath = join(directory, filePath) + filePath = normalizePath(join(directory, filePath)) return filePath } diff --git a/packages/gatsby-remark-copy-linked-files/package.json b/packages/gatsby-remark-copy-linked-files/package.json index d6659b0864d8e..c260629f99bec 100644 --- a/packages/gatsby-remark-copy-linked-files/package.json +++ b/packages/gatsby-remark-copy-linked-files/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-remark-copy-linked-files", "description": "Find files which are linked to from markdown and copy them to the public directory", - "version": "1.5.20", + "version": "1.5.21", "author": "Kyle Mathews ", "dependencies": { "babel-runtime": "^6.26.0", diff --git a/packages/gatsby-remark-copy-linked-files/src/__tests__/index.js b/packages/gatsby-remark-copy-linked-files/src/__tests__/index.js index acc315be2f94f..8e163ba477b0a 100644 --- a/packages/gatsby-remark-copy-linked-files/src/__tests__/index.js +++ b/packages/gatsby-remark-copy-linked-files/src/__tests__/index.js @@ -92,6 +92,16 @@ describe(`gatsby-remark-copy-linked-files`, () => { expect(fsExtra.copy).toHaveBeenCalled() }) + it(`can copy HTML file links`, async () => { + const path = `files/sample-file.txt` + + const markdownAST = remark.parse(`link to file`) + + await plugin({ files: getFiles(path), markdownAST, markdownNode, getNode }) + + expect(fsExtra.copy).toHaveBeenCalled() + }) + it(`can copy HTML images`, async () => { const path = `images/sample-image.gif` @@ -120,6 +130,37 @@ describe(`gatsby-remark-copy-linked-files`, () => { expect(fsExtra.copy).toHaveBeenCalledTimes(2) }) + it(`can copy HTML videos`, async () => { + const path = `videos/sample-video.mp4` + + const markdownAST = remark.parse( + `` + ) + + await plugin({ files: getFiles(path), markdownAST, markdownNode, getNode }) + + expect(fsExtra.copy).toHaveBeenCalled() + }) + + it(`leaves HTML nodes alone`, async () => { + const openingTag = `` + + const markdownAST = remark.parse(`${openingTag}Link to example.com`) + + await plugin({ + markdownAST, + markdownNode, + getNode, + }).then(() => { + // we expect the resulting markdownAST to consist + // of a paragraph with three children: + // openingTag, text, and closing tag + expect(markdownAST.children[0].children[0].value).toBe(openingTag) + }) + }) + it(`leaves absolute file paths alone`, async () => { const path = `https://google.com/images/sample-image.gif` @@ -192,4 +233,39 @@ describe(`gatsby-remark-copy-linked-files`, () => { }) }) }) + + describe(`options.ignoreFileExtensions`, () => { + const pngImagePath = `images/sample-image.png` + const jpgImagePath = `images/sample-image.jpg` + const jpegImagePath = `images/sample-image.jpeg` + const bmpImagePath = `images/sample-image.bmp` + const tiffImagePath = `images/sample-image.tiff` + + it(`optionally copies PNG, JPG/JPEG, BPM and TIFF files`, async () => { + const markdownAST = remark.parse( + `![PNG](${pngImagePath}) ![JPG](${jpgImagePath}) ![JPEG](${ + jpegImagePath + }) ![BPM](${bmpImagePath}) ![TIFF](${tiffImagePath})` + ) + await plugin( + { + files: [ + ...getFiles(pngImagePath), + ...getFiles(jpgImagePath), + ...getFiles(jpegImagePath), + ...getFiles(bmpImagePath), + ...getFiles(tiffImagePath), + ], + markdownAST, + markdownNode, + getNode, + }, + { + ignoreFileExtensions: [], + } + ) + + expect(fsExtra.copy).toHaveBeenCalledTimes(5) + }) + }) }) diff --git a/packages/gatsby-remark-copy-linked-files/src/index.js b/packages/gatsby-remark-copy-linked-files/src/index.js index 27317048bcfee..49f6f9d4d44c2 100644 --- a/packages/gatsby-remark-copy-linked-files/src/index.js +++ b/packages/gatsby-remark-copy-linked-files/src/index.js @@ -87,7 +87,7 @@ module.exports = ( // Takes a node and generates the needed images and then returns // the needed HTML replacement for the image - const generateImagesAndUpdateNode = function(image) { + const generateImagesAndUpdateNode = function(image, node) { const imagePath = path.posix.join( getNode(markdownNode.parent).dir, image.attr(`src`) @@ -107,7 +107,10 @@ module.exports = ( // use that data to update our ref const link = { url: image.attr(`src`) } visitor(link) - image.attr(`src`, link.url) + node.value = node.value.replace( + new RegExp(image.attr(`src`), `g`), + link.url + ) let dimensions @@ -189,7 +192,7 @@ module.exports = ( return } - generateImagesAndUpdateNode(thisImg) + generateImagesAndUpdateNode(thisImg, node) } catch (err) { // Ignore } @@ -221,7 +224,10 @@ module.exports = ( // use that data to update our ref const link = { url: thisVideo.attr(`src`) } visitor(link) - thisVideo.attr(`src`, link.url) + node.value = node.value.replace( + new RegExp(thisVideo.attr(`src`), `g`), + link.url + ) } catch (err) { // Ignore } @@ -253,7 +259,11 @@ module.exports = ( // use that data to update our ref const link = { url: thisATag.attr(`href`) } visitor(link) - thisATag.attr(`href`, link.url) + + node.value = node.value.replace( + new RegExp(thisATag.attr(`href`), `g`), + link.url + ) } catch (err) { // Ignore } diff --git a/packages/gatsby/cache-dir/__tests__/loader.js b/packages/gatsby/cache-dir/__tests__/loader.js index 5e99e30f06051..dfd3c2dd5deee 100644 --- a/packages/gatsby/cache-dir/__tests__/loader.js +++ b/packages/gatsby/cache-dir/__tests__/loader.js @@ -1,4 +1,4 @@ -const loader = require(`../loader.js`) +import loader from "../loader.js" describe(`Loader`, () => { beforeEach(() => { diff --git a/packages/gatsby/cache-dir/component-renderer.js b/packages/gatsby/cache-dir/component-renderer.js index a017a1cbd9a2a..e9272dc449cc1 100644 --- a/packages/gatsby/cache-dir/component-renderer.js +++ b/packages/gatsby/cache-dir/component-renderer.js @@ -12,8 +12,18 @@ const DefaultLayout = ({ children }) =>
{children()}
class ComponentRenderer extends React.Component { constructor(props) { super() + let location = props.location + + // This covers layout for when page not found, especially during production + if (!loader.getPage(location.pathname)) { + location = Object.assign({}, location, { + ...location, + pathname: `/404.html`, + }) + } + this.state = { - location: props.location, + location, pageResources: loader.getResourcesForPathname(props.location.pathname), } } @@ -61,7 +71,10 @@ class ComponentRenderer extends React.Component { // This is only useful on delayed transitions as the page will get rendered // without the necessary page resources and then re-render once those come in. emitter.on(`onPostLoadPageResources`, e => { - if (e.page.path === loader.getPage(this.state.location.pathname).path) { + if ( + loader.getPage(this.state.location.pathname) && + e.page.path === loader.getPage(this.state.location.pathname).path + ) { this.setState({ pageResources: e.pageResources }) } }) diff --git a/packages/gatsby/cache-dir/loader.js b/packages/gatsby/cache-dir/loader.js index 191e431404a6c..4a6941948c837 100644 --- a/packages/gatsby/cache-dir/loader.js +++ b/packages/gatsby/cache-dir/loader.js @@ -222,10 +222,15 @@ const queue = { navigator.serviceWorker .getRegistrations() .then(function(registrations) { - for (let registration of registrations) { - registration.unregister() + // We would probably need this to + // prevent unnecessary reloading of the page + // while unregistering of ServiceWorker is not happening + if (registrations.length) { + for (let registration of registrations) { + registration.unregister() + } + window.location.reload() } - window.location.reload() }) } } @@ -249,7 +254,7 @@ const queue = { if (!page) { console.log(`A page wasn't found for "${path}"`) - return + return cb() } // Use the path from the page so the pathScriptsCache uses diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js index 614c7c68eaca5..467d85400dd6a 100644 --- a/packages/gatsby/cache-dir/production-app.js +++ b/packages/gatsby/cache-dir/production-app.js @@ -161,7 +161,8 @@ apiRunnerAsync(`onClientEntry`).then(() => { }) } else { return createElement(ComponentRenderer, { - location: { page: true, pathname: `/404.html` }, + page: true, + location: { pathname: `/404.html` }, }) } }, diff --git a/packages/gatsby/package.json b/packages/gatsby/package.json index 99210d17b08d4..6aeba7b4f2248 100644 --- a/packages/gatsby/package.json +++ b/packages/gatsby/package.json @@ -1,7 +1,7 @@ { "name": "gatsby", "description": "React.js Static Site Generator", - "version": "1.9.108", + "version": "1.9.109", "author": "Kyle Mathews ", "bin": { "gatsby": "./dist/bin/gatsby.js" diff --git a/packages/gatsby/src/internal-plugins/query-runner/graphql-errors.js b/packages/gatsby/src/internal-plugins/query-runner/graphql-errors.js index 95198a7ecb385..2457d06fea31c 100644 --- a/packages/gatsby/src/internal-plugins/query-runner/graphql-errors.js +++ b/packages/gatsby/src/internal-plugins/query-runner/graphql-errors.js @@ -64,6 +64,7 @@ function extractError(error: Error): { message: string, docName: string } { if (matches.index === docRegex.lastIndex) docRegex.lastIndex++ ;[, message, docName] = matches } + if (!message) message = error.toString() return { message, docName } } diff --git a/www/src/templates/template-blog-post.js b/www/src/templates/template-blog-post.js index 909173da0d15c..ffebb0cbae324 100644 --- a/www/src/templates/template-blog-post.js +++ b/www/src/templates/template-blog-post.js @@ -73,15 +73,17 @@ class BlogPostTemplate extends React.Component { {post.frontmatter.image && ( )} {post.frontmatter.image && ( )}