New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update to the app structure section #708

Merged
merged 1 commit into from Mar 9, 2017

Conversation

Projects
None yet
3 participants
@kristojorg

kristojorg commented Mar 9, 2017

I thought this was a more strightforward order for describing things,
and it puts one of the most unique parts of Gatsby 1.0 right at the
top.

update to the app structure section
I thought this was a more strightforward order for describing things,
and it puts one of the most unique parts of Gatsby 1.0 right at the
top.
@kristojorg

This comment has been minimized.

kristojorg commented Mar 9, 2017

As I started to put more and more thought into this it made more sense to instead take what I'm learning from reading this post and make an effort at documentation instead. Let me know what you think of this reformulation.

@gatsbybot

This comment has been minimized.

gatsbybot commented Mar 9, 2017

Deploy preview ready!

Built with commit a1dd8f8

https://deploy-preview-708--gatsbygram.netlify.com

@gatsbybot

This comment has been minimized.

gatsbybot commented Mar 9, 2017

Deploy preview ready!

Built with commit a1dd8f8

https://deploy-preview-708--gatsbyjs.netlify.com

@KyleAMathews

This comment has been minimized.

Contributor

KyleAMathews commented Mar 9, 2017

This is really nice! I think this is much clearer and more interesting. Thanks for the refactor!

And on documentation — feel free to copy anything and everything from these blog posts for doc pages. I think lots of duplication of ideas and languages is perfectly good. I see blog posts as a cheaper way to experiment with ways of explaining things.

@KyleAMathews

some small tweaks I think are needed. Thanks again!

blogs/
blog1.html
```
This is fine at first, but can be limiting. For example, in gatsbygram, we have a json data blob scraped from the instagram api. From this we want to generate a page for each image. We couldn't do this with a typical static site generator, but Gatsby lets you define routes programatically through the `createPages` api.

This comment has been minimized.

@KyleAMathews

KyleAMathews Mar 9, 2017

Contributor

Capitalize gatsbygram and instagram throughout.

This is what Gatsbygram's post template component looks like:
Gatsby uses standard React.js components to render static pages. When you define a page in the `createPages` api, you also define a component to build it with. Those components, usually called templates get reused with different data to generate different pages. Usually, we will pass some simple information about what page we are on to the template component, and then the template will make a `graphql` query using that information to get the data it needs.

This comment has been minimized.

@KyleAMathews

KyleAMathews Mar 9, 2017

Contributor

change "render static pages" to just "render pages" as pages can of course be highly dynamic even completely dynamic e.g. don't render anything until the client.

This comment has been minimized.

@KyleAMathews

KyleAMathews Mar 9, 2017

Contributor

Add comma after "usually called templates"

This comment has been minimized.

@KyleAMathews

KyleAMathews Mar 9, 2017

Contributor

Don't need commas in "Usually, we will..." sentence. That probably should be broken into two sentences remove the "and" in the middle.

Gatsby lets you build pages from individual React.js components. Like
template components, you can add GraphQL queries to query for data.
In addition to creating a page for every one of our instagram images, we also want to make an index page that shows off our insta grid. To do so, Gatsby lets us define pages using the file system, just like your standard static site generators:

This comment has been minimized.

@KyleAMathews

KyleAMathews Mar 9, 2017

Contributor

"insta grid" typo.

about.js
```
These react components can query our graphql schema for data, and will each be generated into their own pages at `gatsbygram.com/` and `gatsbygram.com/about`.

This comment has been minimized.

@KyleAMathews

KyleAMathews Mar 9, 2017

Contributor

React should be capitalized throughout

This comment has been minimized.

@KyleAMathews

KyleAMathews Mar 9, 2017

Contributor

"our graphql schema" a bit awkward — perhaps "query the Gatsbygram GraphQL schema" or just "query their site's GraphQL schema".

This comment has been minimized.

@KyleAMathews

KyleAMathews Mar 9, 2017

Contributor

GraphQL proper capitalization

This comment has been minimized.

@KyleAMathews

KyleAMathews Mar 9, 2017

Contributor

"will each be generated" — a bit awkward

@KyleAMathews

This comment has been minimized.

Contributor

KyleAMathews commented Mar 9, 2017

Hey, trying to get the post out this morning. Just going to merge and edit locally. Thanks again!

@KyleAMathews KyleAMathews merged commit de76121 into gatsbyjs:1-blog-update Mar 9, 2017

1 of 2 checks passed

continuous-integration/travis-ci/pr The Travis CI build failed
Details
deploy/netlify Deploy preview ready!
Details
@kristojorg

This comment has been minimized.

kristojorg commented Mar 9, 2017

Yea these updates look good to me!

KyleAMathews added a commit that referenced this pull request Mar 9, 2017

Add Gatsbygram case study and code for blog (#707)
* WIP commit on 1st blog post

* Get author mapping to blog posts working

* Update to latest canary

* Add missing files

* Tweak styles for blog post template

* Shrink bioline slightly on mobile

* Shrink header a bit

* Don't error on components w/o queries + write out empty json file

* Update to the latest canary

* rough draft of blog post

* some blog-specific styling

* Style tweaks

* Make bio use header font

* WIP push

* WIP

* WIP

* MOER changes

* Lots of changes

* Copy edits

* Spell check and copy edits

* Run prettier 0.20

* Responsive stylings for new gatsbygram about page

* Do cache bust JS urls in service worker

* Update packages

* Start gatsbygram case study blog post

* Tweak docs layout

* Sort blog posts

* Update yarn.lock

* Up canary build

* Don't use back ticks for requires as turns out Webpack dislikes this

* Up dependencies

* Rum lerna bootstrap when publishing sites

* Try script again

* try again

* Fix requring debug

* nuder try

* Make website + example sites packages so they get setup with bootstrap w/ latest versions of packages

* Fix another broken require

* Use yarn for lerna bootstrap

* Make using yarn for lerna global

* Revert making sites bootstrappable — Gatsby breaks with symlinked packages

* Just use canary versions of the site until can get bootstrapping worked out

* Up dependencies

* Fix another broken node require

* Upppidity

* Updates to gatsbygram case study

* Copy updates

* Crop photo

* copy edits

* Add repeat view filmstrip

* Fix another require

* Add lots of code comments to Gatsbygram

* Copy edits

* Up gatsby version

* Copy edits plus screenshot of post detail page

* copy edits

* Copy edits

* Copy edits

* Copy edits

* Don't show draft posts in blog index

* Allow setting background color of markdown responsive images

* Update instagram scrapper to only get 100 posts

* Remove .netlify file

* Set maxHeight so images cropped nicely — sadly much slower

* Don't use SW for navigation for normal files

* Up packages

* Up dependencies

* Adjust publish date

* Copy edit

* Open responsive image in new tab so react-router won't interfer

* Add social metadata to pages

* location not available on server

* Copy edits

* Typo

* update to the app structure section (#708)

I thought this was a more strightforward order for describing things,
and it puts one of the most unique parts of Gatsby 1.0 right at the
top.

* Copy edits brought over from google doc

* copy updates

* Preload www fonts

* Add new Google Analytics tracking id for gatsbyjs.org

* Add thanks for reviewers

* Server render helmet data + ensure no inlined icons

* Correct typo
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment