New browser API to allow overriding of scrolling behavior

On old skool web sites, browsers maintain your scroll position for you as you navigate between pages and back. So if you scroll down on a page, click to another link, and then click back — your scroll position on the original page will be set to where you were before clicking away.

But as Gatsby turns your website into a single-page-app, this default browser handling of scroll position has to be emulated. For that we use @taion's great library https://github.com/taion/react-router-scroll

In Gatsby's web-entry.js file where React Router is setup and we do React's rendering to DOM, we have a function which determines whether or not to use the remembered scroll position. For the vast majority of websites, the behavior specified there is correct but occasionally you'll be building something special and will want to use different logic.

To enable customizing scroll behavior, @Rusta, in #663, added a new lifecycle API for overriding the default scroll behavior.

Thanks @Rusta!

New browser lifecycle API: `modifyRoutes`

@scottyeck and @stevensurgnier have been working on a way to add client-side redirects and remove trailing slashes from routes and towards that aim added a new browser lifecycle API modifyRoutes in #657

Some examples they came up with.

Add redirects:

exports.modifyRoutes = routes => {
    const redirects = [
        {
            path: '/cat',
            onEnter: (nextState, replace) => replace('/dog?utm_campaign=cat')
        }
    ];
    const childRoutesLength = routes.childRoutes.length;
    const childRoutesButLast = routes.childRoutes.slice(0, childRoutesLength - 1);
    const childRoutesLast = routes.childRoutes[childRoutesLength - 1];
    routes.childRoutes = childRoutesButLast.concat(redirects).concat([childRoutesLast]);
    return routes;
};

Remove trailing slashes:

exports.modifyRoutes = routes => {
    routes.childRoutes.forEach(route => route.path = route.path.replace(/\/$/, ''));
    return routes;
};

Updates to webpack config

• @antoniocapelo noticed that while our README promised you could override plugins like you can override loaders... we hadn't defined core plugins with webpack-configurator (the lib that makes it easy to override Gatsby's webpack config in userspace) and then submitted a PR to fix this! Thanks! #626
• @jbolda added postcss to the loader stack for Sass/Less so they can take advantage of the prefixing built in to our postcss config. https://github.com/gatsbyjs/gatsby/pull/628/files

Support more markdown extensions

@MKDong becomes our 100th contributor in #612 where he added support for additional markdown extensions (e.g. mdwn).

Thanks Mingkai and our 99 other contributors!

JS Frontmatter!

@jbolda fixed the 2nd issue ever filed for Gatsby! Supporting "frontmatter" in javascript files. This should still be considered experimental but you can now export an object from your JS pages and that data will be available in your templates, other pages, etc.

I added a quick example of how this works on the starter blog

• http://gatsbyjs.github.io/gatsby-starter-blog/2016-12-9-react-component-post/
• gatsbyjs/gatsby-starter-blog@e333cb1

Note that this initial release is still fairly limited at the moment. This only works in js/jsx files and you must export your data using commonjs (e.g. exports.data = {}). Also we only parse data layer one level deep so

this works:

exports.data = {
  title: "My sweet title",
}

this still does not work:

exports.data = {
  title: "My sweet title",
  goingDeeper: {
    word: "to your mother",
  }
}

PRs welcome to make this work on es6 exports (export const data) as well as for subobjects!

Typescript support 🎉

@rothfels added Typescript support! #578

To give it a go, checkout his starter project at https://github.com/rothfels/gatsby-starter-typescript.

Recently launched sites

• http://www.damianmullins.com
• https://angulartoreact.com
• https://www.spencerdixon.com/

UX improvements and support .yml files

• We tell people Gatsby sites work w/o Javascript and then people fire up a development server w/o javascript... and see a blank screen. The development server actually does need javascript to power hot-reloading, etc. @nason add a default <noscript /> message for people who've turned off Javascript to tell them what's happening and how to test their site w/ no javascript (gatsby build; gatsby serve-build) #566
• @vinnymac borrowed a nice recent addition to create-react-app where they're not just telling you that your desired port is taken but also which process is (probably) using it #579
  ~
• @briancappello added support for the .yml file extension (a less common variant file extension for YAML files). #580

Thanks everyone!

1.0.0-alpha10

Added

• Did the intitial build of the new gatsbyjs.org! It's in the www
  subdirectory on the 1.0 branch and is built on each push! That's my
  kind of integration testing 😎 You can see the early version of the
  site at https://gatsbyjs.netlify.com/.
• Added <link preload> for page JS bundles. This speeds up loading scripts
  slightly by telling the browser to start downloading the scripts when
  the HTML first starts being parsed instead of when the browser reaches
  the end. This is especially helpful for large HTML documents on slow
  mobile networks. PR

Changed

• Use namedmodulesplugin instead of recordsPath for ensuring
  deterministic builds and long-term cachability. The previous PR adding
  support for recordsPath
  proved unpleasant as you had to build locally and commit the outputted
  records.json which was confusing and annoying.
  PR
• Replaced the scripts prop that was passed into the body with a postBodyComponents prop that mirrors the headerComponents prop. This is more flexible as it'll let sites/plugins to do things like pass in analytics snippets, etc. easily.

1.0.0-alpha9

Added

• Put the routes module on window to support experimental idea. See
  this issue for more](#537).
  commit

Changed

• Removed the package sharp as it's not used and is preventing Gatsby
  1.0 from being installed on Windows.
  commit

1.0.0-alpha8

Prepping to launch first big website on Gatsby 1.0.0! Knocking out some remaining bugs.

Added

• Extension API swOnUpdated for when a service worker finishes
  updating. Use this to alert users of your app to reload to see the
  latest version.
  commit

Fixed

• hot reloading now fully works. Apparently you can't use function
  components for top-level routes on react-router with react-hot-loader
  3.0 ¯\_(ツ)_/¯ #532 and
  commit
• Webpack needs the help of an obscure setting recordsPath to preserve
  module ids across builds. Big thanks to @NekR, @bebraw, and @TheLarkInn for helping me with this. Previous to this change, loading changed JS chunks could cause a JS
  error as the module ids the new chunk expects wouldn't match the module
  ids from the older chunks.
  #533

Changed

• Disabled hard-source-webpack-plugin. It speeds up builds significantly
  but has been causing hard-to-debug errors while developing. We'll
  circle back to it down the road.
  commit
• Restored using ChunkManifestPlugin. It was disabled while trying to
  debug the mismatched module id bug but that being fixed, we're using
  it again.
  commit
• Name modules ids in development for easier debugging. Primary benefit
  is you can see which modules are getting hot reloaded.
  commit