Gatsby: [1.0] Starting of project - Solution Structure

[ghost]

Hi Team Gatsby,

To start off on my exploration I have setup a following project without executing it. So far, it just represent skeleton of it. Question are against the folder structure I put in following screenshot from my VSCode.

1. Please confirm, data is directory where I can download my content from contentful as pre-compilation step ?
   
   
   
   • My idea is to download text content in JSON & images from CMS/DMS which don’t change often. For example article, product detail page etc.,
   
   
2. I will download data in multiple separate folders for different section of site, but to confirm I can use these data sources as follows..
   
3. Utils at root at your gatsbygram example, is folder where we can put JavaScript utility which can be called from Node on compile time.
4. For defining components, what you recommend for example using React BootStrap Components, or creating own atomic components to follow Atomic design principle ?
5. Is it good idea to create composite components using above atomic components with other public available components if required ?
6. As the name say for itself, default.js is layout, but actually you can define your overall HTML structure in html.js also, so why we need layout folder, or I miss something here ?
7. Pages Directory though straightforward which will convert your files here to directly HTML pages on build. But I have more question on it.
   a. In above screenshot,tips-and-articles.js will transform into html page. But what if I want further page down the URL structure like www.abc.com/en-us/tips-and-articles/how-to-do-this .
   b. What if I want to generate the whole IA(information architecture or hierarchy of pages of website) using CMS where business author can define the pages itself in CMS.
   c. What if I want to localize these pages tomorrow where pages are now in www.abc.com/fr-fr/Conseils-et-articles/how-to-do-ce.
8. In your Gatsbygram example you show Instagram posts in modal dialog, what if I want them as each individual pages for SEO and better tracking purpose. How I will generate those pages, using templates ?
9. What is use of utils folder under SRC beyond maintaining key value pair or CSS declaration.
10. You have used inline CSS in all of the cases, we know it is good for critical css but Don’t you see usual classes based CSS implementation in components using PostCSS or SaSS model.
11. Taking inspiration from your scrape.js, will use to generate & download content from Contentful.
12. It would be great if somebody explain in detail each of highlighted files in point 12 in above screenshot.

[KyleAMathews]

Answers below:

1) sounds reasonable. Where you put your data is totally up to you but a directory named data is a common convention.
2) you only need the first instance of the plugin actually as it scans for files recursively so sub-directories will be included.
3) 👍
4) your own generally. It's hard to build a unique design for a site if you base things off bootstrap. Individual bootstrap components from https://react-bootstrap.github.io/ could be helpful.
5) if an open source component meets your needs, can't see why you wouldn't use it.
6) html.js is for defining everything outside of <div id="react-mount"></div>. Layout components are for stuff like headers and footers. Page components are for the guts of pages inside the header/footer.
7)
a) just put the file in a sub-folder matching the desired URL
b/c) pages are created programatically from data so there's lots of ways of accomplishing these https://github.com/gatsbyjs/gatsby/issues/421
8) refresh the gatsbygram site when a picture is in the modal ;-)
9) the src/utils folder isn't required. I like using them to stash random "utility" modules but there are other organization schemes.
10) it's not actually inline css. It's using a css-in-js library called Glamor https://github.com/threepointone/glamor which extracts out the styles from the components to regular CSS. There's a lot of advantages to css-in-js but regardless, Sass/Less/PostCSS are fully supported and there'll be more examples of using these in the future.
11) 👍
12) gatsby-config.js is for setting up Gatsby. gatsby-node/gatsby-browser/gatsby-ssr are for implementing various Gatsby APIs (as needed) for accomplishing things like, creating pages, processing data e.g. to create slugs, adding analytics in the browser on route changes, etc.