New themes/example sites for 1.0

[KyleAMathews]

Currently we have three starters which also serve as examples. Once a theme system lands, we'll be converting starters to themes. We should create more themes + example sites to demo what you can do with Gatsby especially new capabilities coming with 1.0.

What sort of sites should we build? Add in the comments some of your favorite sites to copy or open source themes we should port over. Also crazy stuff that'd really push Gatsby. Animations, client-side interactivity, examples of pulling in code from the wider React ecosystem, etc.

[KyleAMathews]

Here's a list I've been accumulating:

• spectacular photography / blog website http://burkhardt.photography/en/journal/
• gorgeous blog/magazine style https://miscmagazine.com/
• Google Photos clone w/ albums, tiled front-page view + photo viewer
• really fun blog + love Futura/Anonymous Pro combo https://www.helloper.com/blog/2012/10/google-docs-jekyll/
• footnotes along side + js inline + like fonts + top header. Elegant and simple https://bost.ocks.org/mike/algorithms/
• http://swannodette.github.io/ — demo how to write blog posts with inline javascript examples
• https://html5up.net/ — lots of great open source themes here
• http://blog.runkit.com/ — classy simple blog theme.

[KyleAMathews]

Once an alpha or two more has been released and things are fleshed out a bit more and more usable I'll start building these and putting them in an examples folder. Please volunteer to take one from my list or one of your own!

[fk]

I would love to help out here, but I think both time and my limited React knowledge would cause me to be more of a pain than a help.

I loved discovering the reference to https://www.atlassian.com/git/ in the original "Braindump of Ideas" issue and if something like "Low Hanging Animation Options" or a basic implementation example in one of the starters would have existed back when I first stumbled across Gatsby, I would most probably have started using it for some of the static site stuff I have been building in the meantime…

Since I do not really have something valuable to add here, let me close by stating that seeing this issue and the roadmap for 1.0 are great (great!) news, especially when seen from a "user" instead of "developer" perspective!

[KyleAMathews]

@fk thanks for the validation on this issue! And I think you will quite easily be able to help. The theme system in Gatsby will be composable meaning someone can publish a theme and you'll be able to easily remix it into something similar but different or the same but extended. So it should be fairly easy to come up with compelling but unique themes in the future.

My first goal with these examples (and eventually themes) is to push the boundaries of Gatsby to make sure we can do these types of sites. But later, once the technical foundations of Gatsby are solid, there'll be lots of theme exploration to do.

[fk]

And I think you will quite easily be able to help.

Yay! I'd be happy to give things a try, and I'm sure I will do sooner or later! However I think I won't be of any help for issues like the aforementioned #429 until my React-foo improves drastically – which I would love to.

This might be a stupidly vague question, but: Is there are starter you would recommend to take a closer look at for now – without composable themeing yet working – to sharpen my understanding of React in general as well as extending the default Gatsby behavior?

[KyleAMathews]

Have you looked through the starters on the README? The blog starter might be a good place to start as it's focused and simple.

I'd start by looking first in the /pages directory then the /wrappers directory (these are React.js components that wrap static pages like markdown), and then finally the html.js. You can read the code and then explore the different imports and go read up on what they do.

[codinronan]

Hey @KyleAMathews do you have any documentation of any kind on how to build a theme? I'm assuming that code is written, just not documented... possible a bad assumption.

I'll volunteer to build one, I'm building a new site now so it won't be alot of extra effort to learn that too along the way.

[KyleAMathews]

@ronanwize the theme stuff isn't written yet — that's probably going to come post 1.0 release e.g. 1.1 or 1.2.

But in the meantime we have the concept of "starters". Would totally love it if you published one. Starters are pretty simple. They're just a github repo with a partially-built Gatsby site. The Gatsby CLI has support for cloning a repo like this and setting things up for you.

Would love it if you published a new starter. When you do, just add a PR to add your repo to the list here: https://github.com/gatsbyjs/gatsby#gatsby-starters

Once theme support is added, starters can be converted to themes (though there still might be a place for starters even w/ themes, TBD).

[codinronan]

Hey @KyleAMathews sounds good. When I finish the design I'll publish it as a starter!

[KyleAMathews]

@ronanwize great! Great themes/starters really help ease the onboarding for people new to Gatsby.

[oliverbenns]

I think that depends on the future vision of Gatsby. Themes often come about with CMS solutions, of which Gatsby (right now at least), is not.

With that said, I think the demo sites like the current starter one is a great reference point and I used it as a basis to start myself. I'm not sure on the value of having more than 2 or 3 though if we're strictly talking about the education purpose of them.

[KyleAMathews]

@oliverbenns Gatsby's "CMS" is static files :-)