The best React-based framework with performance, scalability and security built in.
MIT License
Published by KyleAMathews over 7 years ago
@kennethormandy fixed a problem with our PostCSS webpack config where because of how it was setup, you couldn't override the browserlist using a custom .browserslist
file in your site. And by removing our custom option, we can now rely on the PostCSS default browserlist which is preferable as Gatsby doesn't have unique needs here so better to rely on the community maintaining a standard than us. https://github.com/gatsbyjs/gatsby/pull/787
Published by KyleAMathews over 7 years ago
Our 40th patch release on the 0.12 minor series! Woot!
Two nice feature additions from two new Gatsby contributors.
gatsby new
https://github.com/gatsbyjs/gatsby/pull/782
exports.data = {
titles: ['My title', 'My other title'],
}
Published by KyleAMathews over 7 years ago
gatsby new
which is wasteful as we just throw away the git repo. So in #730 he fixed that to just do a shallow clone.Published by KyleAMathews over 7 years ago
@lb- corrected a miswording in a terminal warning in #702 thanks!
Published by KyleAMathews over 7 years ago
gatsby-ssr.js
file which can be added to your site similar to gatsby-browser.js
and gatsby-node.js
. He added a wrapRootComponent
API similar to what was recently added to the browser but the method is now available if we need to add additional SSR APIs.Thanks everyone!
Published by KyleAMathews over 7 years ago
@omaksi noticed that in a couple internal client modules we were importing the entire Lodash utility module. He replaced those with individual imports. Thanks!
https://github.com/gatsbyjs/gatsby/commit/66d7bf51e20f5ebcdfeb95c10e857282cd78512f
Published by KyleAMathews over 7 years ago
This past week or two has seen a flood of new browser lifecycle APIs :-) which I guess means some people are building some interesting Gatsby sites!
In the latest @iansu added in https://github.com/gatsbyjs/gatsby/pull/666 two ways of modifying the βRootβ Gatsby React component. A low-level API replaceDOMRenderer
and high-level one wrapRootComponent
.
The high-level API is if you want to simply wrap the root component e.g. to add Redux or Mobx to a Gatsby site.
// in your gatsby-browser.js
import { Provider } from 'react-redux'
import store from './store'
// This gets returned to Gatsby which then renders the Root component as normal.
exports.wrapRootComponent = Root => {
return () => (
<Provider store={store}>
<Root />
</Provider>
);
};
The low-level API is for completely replacing the DOM rendering e.g. if you want to override the default React Router setup.
// in your gatsby-browser.js
import { applyRouterMiddleware, hashHistory, Router } from 'react-router'
// Change the router to use hashHistory instead of browserHistory
exports.replaceDOMRenderer = ({ routes, defaultShouldUpdateScroll, onUpdate }) => (
ReactDOM.render(
<Router
history={hashHistory}
routes={routes}
render={applyRouterMiddleware(useScroll(defaultShouldUpdateScroll))}
onUpdate={onUpdate}
/>,
typeof window !== 'undefined' ? document.getElementById('react-mount') : void 0)
)
In the land of bug fixes, @4rkanoid noticed that Gatsby wasn't handling correctly custom site .babelrc
files that had presets in their array form. https://github.com/gatsbyjs/gatsby/pull/668
Thanks all for your great PRs!
Published by KyleAMathews over 7 years ago
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!
Published by KyleAMathews over 7 years ago
@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;
};
Published by KyleAMathews almost 8 years ago
Published by KyleAMathews almost 8 years ago
@mkdong becomes our 100th contributor in https://github.com/gatsbyjs/gatsby/pull/612 where he added support for additional markdown extensions (e.g. mdwn).
Thanks Mingkai and our 99 other contributors!
Published by KyleAMathews almost 8 years ago
@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
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!
Published by KyleAMathews almost 8 years ago
@rothfels added Typescript support! #578
To give it a go, checkout his starter project at https://github.com/rothfels/gatsby-starter-typescript.
Published by KyleAMathews almost 8 years ago
<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
) https://github.com/gatsbyjs/gatsby/pull/566
.yml
file extension (a less common variant file extension for YAML files). https://github.com/gatsbyjs/gatsby/pull/580
Thanks everyone!
Published by KyleAMathews almost 8 years ago
www
<link preload>
for page JS bundles. This speeds up loading scriptsscripts
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.Published by KyleAMathews almost 8 years ago
window
to support experimental idea. Seesharp
as it's not used and is preventing GatsbyPublished by KyleAMathews almost 8 years ago
Prepping to launch first big website on Gatsby 1.0.0! Knocking out some remaining bugs.
swOnUpdated
for when a service worker finishesΒ―\_(γ)_/Β―
#532 andrecordsPath
to preservePublished by KyleAMathews almost 8 years ago
node_modules/gatsby/node_modules
. This was added to help whennpm link
but when Gatsby is installednode_modules/gatsby/node_modules
doesn't now exist.Published by KyleAMathews almost 8 years ago
Published by KyleAMathews almost 8 years ago
Some nice bug fixes of some long-standing annoyances by @mojodna and @TheAncientGoat
publicPath
working across all the build steps and adds the linkPrefix
as needed #502. Fixed #392 and #473