Merge branch 'master' into alternate

* master: docs: add ibm case study blog post (gatsbyjs#10474) Update sites.yml (gatsbyjs#10512) Update starters.yml (gatsbyjs#10505) chore(release): Publish fix(graphql-skip-limit): fix hasNextPage (gatsbyjs#10504) chore: use cjs instead of esm for consistency (gatsbyjs#10494) feat(gatsby-remark-copy-linked-files): add support for video elements with `src` attribute (gatsbyjs#10395) typofix (gatsbyjs#10488) Add kobit.in to showcase (gatsbyjs#10496) fix(docs): window.reload => window.location.reload (gatsbyjs#10459) # Conflicts: # packages/gatsby/CHANGELOG.md # packages/gatsby/package.json
wconnorwalsh · Dec 17, 2018 · 042770f · 042770f
2 parents c71c1b9 + 6755405
commit 042770f
Show file tree

Hide file tree

Showing 20 changed files with 225 additions and 116 deletions.
diff --git a/docs/blog/2018-12-17-ibm-case-study/images/carbon.png b/docs/blog/2018-12-17-ibm-case-study/images/carbon.png
diff --git a/docs/blog/2018-12-17-ibm-case-study/images/lighthouse.png b/docs/blog/2018-12-17-ibm-case-study/images/lighthouse.png
diff --git a/docs/blog/2018-12-17-ibm-case-study/index.md b/docs/blog/2018-12-17-ibm-case-study/index.md
@@ -0,0 +1,62 @@
+---
+title: IBM uses Gatsby to manage enterprise-level content
+date: 2018-12-17
+author: Linda Watkins
+tags:
+  - case study
+---
+
+[![Carbon Design System](./images/carbon.png)][carbon]
+
+## Big Company. Big Website.
+
+When IBM, one of the biggest companies in the world, went looking for a solution to help them manage a vast website, they found Gatsby. Carbon Design System is the open source library for all IBM software products. That’s _all_ IBM software - which means the Carbon Design System website has hundreds of pages and more than a dozen developers, designers, and non-technical content contributors. IBM is one of the biggest companies in the world. And that was the problem - so much content led to a site that was difficult to optimize for performance. They needed to launch a refreshed site dedicated to product design requirements for all IBM-related product launches that worked as smart, fast, and reliably as IBM.
+
+## When Your Website Performance Score is a Seven...
+
+The problem with being one of the biggest businesses in the world is the incredible amount of content that must be housed. It’s IBM’s own in-house director of internal content controls, features, standards, templates, and really everything related to marketing and web-based content. But to find what you were looking for, you had to sort through a lot of information, layered on pages and pages (literally hundreds of pages) of content. With a [Lighthouse][lighthouse] website performance score of only 7 out of 100, up was the only way to go.
+
+The original site was a home-grown static site based on Markdown and React that was complicated to update. Add to that many, many hands and minds working on it constantly - some with technical experience and some without. The large volume of content and content creators made it difficult to accomplish the main business objective for the website, which was to make it easy for anyone to contribute content, regardless of their level of technical ability.
+
+The main goals for the new site were simple:
+
+- A faster and easier site that anyone could update - even if they didn’t know how to code
+- Good documentation - if anyone leaves the project, all the documentation is there, which eliminates the need to search around for how it was created
+
+## Easy onboarding with Gatsby
+
+Alison Joseph, Front-End Developer at IBM, took over this project from a coworker who had already done great work choosing the framework for the website rebuild. Taking on a new project mid-stream can be daunting but Alison found the Gatsby documentation was top notch and better than any other open source docs she’s seen.
+
+Alison was the only developer able to focus full-time on the Gatsby project and it took about six months before the new site launched in October 2018. She’s quick to point out if they had gone the custom, in-house route, the project would have easily taken twice as long and required more than one developer.
+
+<pullquote>
+Gatsby just works. With the old system, I had to fight with something for a few days to troubleshoot issues. With Gatsby, you install and it just works. It’s stress-free.
+</pullquote>
+
+With non-technical content writers and designers needing the ability to add content quickly to the site, the “second to none onboarding” made it easy for everyone, regardless of skill level, to be successful. The Gatsby documentation made it easy to onboard new developers and the process was simple enough for any of the content creators to understand. This achieved one of the most important goals for the website: the documentation and process was there for the next person so they wouldn’t struggle.
+
+<pullquote>
+A home-grown system goes down when the people who created it leave. Gatsby doesn’t allow for that - it grows with whoever is at the controls then seamlessly passes on to the next person.
+</pullquote>
+
+## A New Era
+
+The new Carbon Design System website launched October 3, 2018, and is referenced by designers and developers as an open source project as well as internally at IBM. With a seamless design feel, most users didn’t “see” any changes, but they sure felt them with the lightning fast page load times. Alison pointed out their new Lighthouse performance score went from 7 to 96 (that’s a 89 point jump!) with PWA, Accessibility, Best Practices, and SEO scores in the high 90s - 100.
+
+<figure>
+  <img alt="Gatsby swag posts on Twitter." src="./images/lighthouse.png" />
+  <figcaption>
+    Lighthouse Performance Scores with Gatsby
+  </figcaption>
+</figure>
+
+<pullquote>
+We’re copying Gatsby as a best practice. Whenever we’re working out how to engage our community, we look to Gatsby as the shining example and ask ourselves, What does Gatsby do?
+</pullquote>
+
+## Final Thoughts
+
+IBM is the original tech company. Reaching for Gatsby shows they are still on the leading edge of technology and finding the newest and best routes for their people and clients. As the only developer on the Carbon team able to focus solely on the website rebuild, Alison used Gatsby to completely transform the vast mesh of content to provide an experience that literally any user can access, use, update and transform - leaving it even better for the next person. How can Gatsby do the same for you?
+
+[carbon]: https://www.carbondesignsystem.com/
+[lighthouse]: https://developers.google.com/web/tools/lighthouse/
diff --git a/docs/docs/add-offline-support-with-a-service-worker.md b/docs/docs/add-offline-support-with-a-service-worker.md
@@ -55,7 +55,7 @@ exports.onServiceWorkerUpdateFound = () => {
   )
 
   if (answer === true) {
-    window.reload()
+    window.location.reload()
   }
 }
 ```

diff --git a/docs/docs/adding-tags-and-categories-to-blog-posts.md b/docs/docs/adding-tags-and-categories-to-blog-posts.md
@@ -109,7 +109,7 @@ const Tags = ({ pageContext, data }) => {
 }
 
 Tags.propTypes = {
-  pathContext: PropTypes.shape({
+  pageContext: PropTypes.shape({
     tag: PropTypes.string.isRequired,
   }),
   data: PropTypes.shape({

diff --git a/docs/sites.yml b/docs/sites.yml
@@ -3769,3 +3769,28 @@
   built_by_url: "https://www.nearform.com/"
   description: >
     Tools to help diagnose and pinpoint Node.js performance issues.
+- title: KOBIT
+  main_url: "https://kobit.in"
+  url: "https://kobit.in"
+  description: Automated Google Analytics Report with everything you need and more
+  featured: false
+  categories:
+    - Marketing
+    - Blog
+  built_by: mottox2
+  built_by_url: "https://mottox2.com"
+- title: Aleksander Hansson
+  main_url: https://ahansson.com
+  url: https://ahansson.com
+  featured: false
+  description: >
+    Portfolio website for Aleksander Hansson
+  categories:
+    - Portfolio
+    - Business
+    - Freelance
+    - Technology
+    - Web Development
+    - Consulting
+  built_by: Aleksander Hansson
+  built_by_url: https://www.linkedin.com/in/aleksanderhansson/
diff --git a/docs/starters.yml b/docs/starters.yml
@@ -1375,3 +1375,14 @@
     - Mobile-friendly design
     - Styling done with Sass
     - Gatsby version 2
+- url: https://gatsby-typescript-starter-blog.netlify.com/
+  repo: https://github.com/frnki/gatsby-typescript-starter-blog
+  description: A starter blog for TypeScript-based Gatsby projects with minimal settings.
+  tags:
+    - TypeScript
+    - Blog
+    - Styling:None
+  features:
+    - Typescrip & TSLint
+    - No Styling (No Typography.js)
+    - Minimal settings based on official starter blog
diff --git a/packages/gatsby-plugin-offline/CHANGELOG.md b/packages/gatsby-plugin-offline/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="2.0.20"></a>
+
+## [2.0.20](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-offline/compare/[email protected]@2.0.20) (2018-12-17)
+
+### Bug Fixes
+
+- **gatsby-plugin-offline:** prevent incorrect revisioning of static file by workbox ([#10416](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-offline/issues/10416)) ([008b5db](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-offline/commit/008b5db))
+
 <a name="2.0.19"></a>
 
 ## [2.0.19](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-offline/compare/[email protected]@2.0.19) (2018-12-07)

diff --git a/packages/gatsby-plugin-offline/package.json b/packages/gatsby-plugin-offline/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gatsby-plugin-offline",
   "description": "Gatsby plugin which sets up a site to be able to run offline",
-  "version": "2.0.19",
+  "version": "2.0.20",
   "author": "Kyle Mathews <[email protected]>",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"

diff --git a/packages/gatsby-remark-copy-linked-files/CHANGELOG.md b/packages/gatsby-remark-copy-linked-files/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="2.0.8"></a>
+
+## [2.0.8](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-copy-linked-files/compare/gatsby-remark-copy-linked-files@[email protected]) (2018-12-17)
+
+### Features
+
+- **gatsby-remark-copy-linked-files:** add support for video elements with `src` attribute ([#10395](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-copy-linked-files/issues/10395)) ([4ceb0f8](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-copy-linked-files/commit/4ceb0f8))
+
 <a name="2.0.7"></a>
 
 ## [2.0.7](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-copy-linked-files/compare/gatsby-remark-copy-linked-files@[email protected]) (2018-11-29)

diff --git 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": "2.0.7",
+  "version": "2.0.8",
   "author": "Kyle Mathews <[email protected]>",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"

diff --git a/packages/gatsby-remark-copy-linked-files/src/__tests__/index.js b/packages/gatsby-remark-copy-linked-files/src/__tests__/index.js
@@ -170,6 +170,18 @@ describe(`gatsby-remark-copy-linked-files`, () => {
     expect(fsExtra.copy).toHaveBeenCalled()
   })
 
+  it(`can copy HTML videos from video elements with the src attribute`, async () => {
+    const path = `videos/sample-video.mp4`
+
+    const markdownAST = remark.parse(
+      `<video controls="controls" autoplay="true" src="${path}">\n<p>Your browser does not support the video element.</p>\n</video>`
+    )
+
+    await plugin({ files: getFiles(path), markdownAST, markdownNode, getNode })
+
+    expect(fsExtra.copy).toHaveBeenCalled()
+  })
+
   it(`can copy HTML videos when some siblings are in ignore extensions`, async () => {
     const path = `videos/sample-video.mp4`
     const path1 = `images/sample-image.jpg`

diff --git a/packages/gatsby-remark-copy-linked-files/src/index.js b/packages/gatsby-remark-copy-linked-files/src/index.js
@@ -206,127 +206,69 @@ module.exports = (
   visit(markdownAST, `html`, node => {
     const $ = cheerio.load(node.value)
 
-    // Handle Images
-    const imageRefs = []
-    $(`img`).each(function() {
-      try {
-        if (isRelativeUrl($(this).attr(`src`))) {
-          imageRefs.push($(this))
-        }
-      } catch (err) {
-        // Ignore
-      }
-    })
-
-    for (let thisImg of imageRefs) {
+    function processUrl({ url }) {
       try {
-        const ext = thisImg
-          .attr(`src`)
-          .split(`.`)
-          .pop()
-        if (!options.ignoreFileExtensions.includes(ext)) {
-          generateImagesAndUpdateNode(thisImg, node)
-        }
-      } catch (err) {
-        // Ignore
-      }
-    }
-
-    // Handle video tags.
-    const videoRefs = []
-    $(`video source`).each(function() {
-      try {
-        if (isRelativeUrl($(this).attr(`src`))) {
-          videoRefs.push($(this))
-        }
-      } catch (err) {
-        // Ignore
-      }
-    })
-
-    for (let thisVideo of videoRefs) {
-      try {
-        const ext = thisVideo
-          .attr(`src`)
-          .split(`.`)
-          .pop()
+        const ext = url.split(`.`).pop()
         if (!options.ignoreFileExtensions.includes(ext)) {
           // The link object will be modified to the new location so we'll
           // use that data to update our ref
-          const link = { url: thisVideo.attr(`src`) }
+          const link = { url }
           visitor(link)
-          node.value = node.value.replace(
-            new RegExp(thisVideo.attr(`src`), `g`),
-            link.url
-          )
+          node.value = node.value.replace(new RegExp(url, `g`), link.url)
         }
       } catch (err) {
         // Ignore
       }
     }
 
-    // Handle audio tags.
-    const audioRefs = []
-    $(`audio source`).each(function() {
-      try {
-        if (isRelativeUrl($(this).attr(`src`))) {
-          audioRefs.push($(this))
-        }
-      } catch (err) {
-        // Ignore
-      }
-    })
-
-    for (let thisAudio of audioRefs) {
-      try {
-        const ext = thisAudio
-          .attr(`src`)
-          .split(`.`)
-          .pop()
-        if (!options.ignoreFileExtensions.includes(ext)) {
-          const link = { url: thisAudio.attr(`src`) }
-          visitor(link)
-          node.value = node.value.replace(
-            new RegExp(thisAudio.attr(`src`), `g`),
-            link.url
-          )
-        }
-      } catch (err) {
-        // Ignore
-      }
+    // extracts all elements that have the provided url attribute
+    function extractUrlAttributeAndElement(selection, attribute) {
+      return (
+        selection
+          // extract the elements that have the attribute
+          .map(function() {
+            const element = $(this)
+            const url = $(this).attr(attribute)
+            if (url && isRelativeUrl(url)) {
+              return { url, element }
+            }
+            return undefined
+          })
+          // cheerio object -> array
+          .toArray()
+          // filter out empty or undefined values
+          .filter(Boolean)
+      )
     }
 
-    // Handle a tags.
-    const aRefs = []
-    $(`a`).each(function() {
-      try {
-        if (isRelativeUrl($(this).attr(`href`))) {
-          aRefs.push($(this))
+    // Handle Images
+    extractUrlAttributeAndElement($(`img[src]`), `src`).forEach(
+      ({ url, element }) => {
+        try {
+          const ext = url.split(`.`).pop()
+          if (!options.ignoreFileExtensions.includes(ext)) {
+            generateImagesAndUpdateNode(element, node)
+          }
+        } catch (err) {
+          // Ignore
         }
-      } catch (err) {
-        // Ignore
       }
-    })
+    )
 
-    for (let thisATag of aRefs) {
-      try {
-        const ext = thisATag
-          .attr(`href`)
-          .split(`.`)
-          .pop()
-        if (!options.ignoreFileExtensions.includes(ext)) {
-          const link = { url: thisATag.attr(`href`) }
-          visitor(link)
+    // Handle video tags.
+    extractUrlAttributeAndElement(
+      $(`video source[src], video[src]`),
+      `src`
+    ).forEach(processUrl)
 
-          node.value = node.value.replace(
-            new RegExp(thisATag.attr(`href`), `g`),
-            link.url
-          )
-        }
-      } catch (err) {
-        // Ignore
-      }
-    }
+    // Handle audio tags.
+    extractUrlAttributeAndElement(
+      $(`audio source[src], audio[src]`),
+      `src`
+    ).forEach(processUrl)
+
+    // Handle a tags.
+    extractUrlAttributeAndElement($(`a[href]`), `href`).forEach(processUrl)
 
     return
   })

diff --git a/packages/gatsby/CHANGELOG.md b/packages/gatsby/CHANGELOG.md
@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="2.0.68"></a>
+
+## [2.0.68](https://github.com/gatsbyjs/gatsby/compare/[email protected]@2.0.68) (2018-12-17)
+
+**Note:** Version bump only for package gatsby
+
+<a name="2.0.67"></a>
+
+## [2.0.67](https://github.com/gatsbyjs/gatsby/compare/[email protected]@2.0.67) (2018-12-13)
+
+### Bug Fixes
+
+- **gatsby:** fix extracting StaticQuery nested in shorthand fragment ([#10443](https://github.com/gatsbyjs/gatsby/issues/10443)) ([d504d44](https://github.com/gatsbyjs/gatsby/commit/d504d44))
+
 <a name="2.0.66"></a>
 
 ## [2.0.66](https://github.com/gatsbyjs/gatsby/compare/[email protected]@2.0.66) (2018-12-11)
-Original file line number
+Diff line change
@@ Expand Up / @@ -55,7 +55,7 @@ exports.onServiceWorkerUpdateFound = () => { @@
       )
       if (answer === true) {
-        window.reload()
+        window.location.reload()
       }
     }
     ```
@@ Expand Down @@