Skip to content
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

Added linter/formatter for markdown files; Formatted documentation #18942

Closed
wants to merge 7 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
3 changes: 3 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,6 @@ coverage

# forestry files
.forestry/**/*

# docs
docs/
7 changes: 7 additions & 0 deletions .remarkrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"plugins": [
"remark-preset-lint-gatsby",
["remark-lint-maximum-heading-length", false],
["remark-lint-list-item-content-indent", false]
]
}
2 changes: 1 addition & 1 deletion docs/README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Read docs at https://www.gatsbyjs.org/docs
## Read docs at <https://www.gatsbyjs.org/docs>

We intend the docs to be read on gatsbyjs.org — You can read them here of course
:-) Just be warned that links won't often work and other things will be missing
Expand Down
2 changes: 1 addition & 1 deletion docs/accessibility-statement.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Gatsbyjs.com is the business website for Gatsby, Inc. the startup building Gatsb

## Providing feedback and getting accessibility help

We strive to make these websites and the Gatsby framework itself as accessible as possible. Our goal is to meet [WCAG 2.0 AA](https://www.w3.org/TR/WCAG20/), with which we are partially compliant. Well be the first to admit the Gatsby ecosystem is a work in progress, and we are open to all feedback to make things better.
We strive to make these websites and the Gatsby framework itself as accessible as possible. Our goal is to meet [WCAG 2.0 AA](https://www.w3.org/TR/WCAG20/), with which we are partially compliant. We'll be the first to admit the Gatsby ecosystem is a work in progress, and we are open to all feedback to make things better.

To contact the core team with your accessibility feedback or challenges, please [file an issue on GitHub](https://github.com/gatsbyjs/gatsby/issues/new/choose).

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,22 @@ as you develop, ship, and maintain sites.
This framework would have to be:

- **universal**, work for all types of sites from simple brochureware to complex
web-apps.
web-apps.
- **simple**, not requiring any setup to start using and with thoughtful APIs to
extend the framework.
extend the framework.
- **fast**, doesn't lose customers to slow page loads. Takes advantage of
HTTP/2, browser caching, service workers, inlined critical css, and code
splitting so your site always loads incredibly fast—no matter what you build.
HTTP/2, browser caching, service workers, inlined critical css, and code
splitting so your site always loads incredibly fast—no matter what you build.
- **JavaScript-driven**, the web is huge and intensely competitive. Sites that
win are fast and richly interactive. Your framework must make it trivial to
use advanced JavaScript.
win are fast and richly interactive. Your framework must make it trivial to
use advanced JavaScript.
- **team ready**, use industry standard collaboration tools like NPM, Git, and
continuous deployment, so your team is always on the same page and shipping
new features is easy.
continuous deployment, so your team is always on the same page and shipping
new features is easy.
- **modular**, allows for cleanly separated features so fixing bugs and adding
new features is easy and complexity is contained.
new features is easy and complexity is contained.
- **internet scale**, launch your site to millions without crashing your site
(or your wallet).
(or your wallet).
- **secure**, doesn't put your users' data at risk of hacking.

I believe that Gatsby fulfills these requirements. After several years of
Expand Down Expand Up @@ -212,7 +212,7 @@ Plugins can:

- add support for webpack loaders such as Sass, Less
- add drop-in support for lightweight React-compatible frameworks
[Preact](https://preactjs.com/) and [Inferno](https://infernojs.org/)
[Preact](https://preactjs.com/) and [Inferno](https://infernojs.org/)
- add a sitemap or RSS feed
- add [Google Analytics](/packages/gatsby-plugin-google-analytics/)
- ...and many more!
Expand Down
24 changes: 12 additions & 12 deletions docs/blog/2017-05-31-introduction-to-gatsby/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,44 +2,44 @@
title: Introduction to Gatsby
date: 2018-05-31
author: Michelle Barker
excerpt: "In case you havent heard about it, Gatsby is the latest hot thing in static site generators"
excerpt: "In case you haven't heard about it, Gatsby is the latest hot thing in static site generators"
tags: ["cutting-edge-experiences", "graphql", "blogs"]
canonicalLink: https://css-irl.info/introduction-to-gatsby/
publishedAt: css-irl.info
---

In case you havent heard about it, Gatsby is the latest hot thing in static site generators. While many static site generators (SSGs) use templating languages like Handlebars or Mustache, Gatsby uses React, helping contribute to its blazing fast claim.
In case you haven't heard about it, Gatsby is the latest hot thing in static site generators. While many static site generators (SSGs) use templating languages like Handlebars or Mustache, Gatsby uses React, helping contribute to its "blazing fast" claim.

Having never used an SSG before (although Ive read about them), and with very limited experience with React, what better way to dip my toe into the water than using Gatsby to publish my brand new blog [CSS {In Real Life}](https://css-irl.info/)?
Having never used an SSG before (although I've read about them), and with very limited experience with React, what better way to dip my toe into the water than using Gatsby to publish my brand new blog [CSS {In Real Life}](https://css-irl.info/)?

### Getting started
## Getting started

It turns out that getting started with Gatsby is pretty easy. The Gatsby site features a fantastic, step-by-step tutorial that walks you through getting your first site up and running (even down to deploying), and contains a wealth of resources for when youve mastered the basics. You dont need any prior experience with React, although working with Gatsby definitely made me want to learn React to take full advantage of its power.
It turns out that getting started with Gatsby is pretty easy. The Gatsby site features a fantastic, step-by-step tutorial that walks you through getting your first site up and running (even down to deploying), and contains a wealth of resources for when you've mastered the basics. You don't need any prior experience with React, although working with Gatsby definitely made me want to learn React to take full advantage of its power.

One thing that prohibits me from publishing side projects is the thought of configuring a whole build setup with Gulp, webpack, etc. just for something small. This is where Gatsby really appeals to me. Gatsby provides an entire out-of-the-box build setup. Yep. Run `npm run develop` and immediately you can bypass all that configuration and start building cool stuff in the browser (with live reloads). Run `npm run build` and your production code is optimized (including progressive image loading and code splitting, among many other features) with _absolutely no effort on your part whatsoever_. You could feasibly get a small, performant site built and deployed in just minutes. You can also add a custom webpack config if you need to.

### CSS

There are two options when it comes to writing CSS for your components: CSS-in-JS (using libraries such as Glamor and Styled Components) or [CSS Modules](https://github.com/css-modules/css-modules). As I feel far more comfortable writing traditional CSS, I opted for the latter. CSS Modules are really interesting, and not tied to Gatsby. Styles are scoped locally by default and unique class names are generated programmatically, meaning you dont get the clashes with naming and specificity that you sometimes get in traditional CSS, and you can compose new selectors from others. I feel like Ive only scratched the surface of CSS Modules, and am looking forward to experimenting further.
There are two options when it comes to writing CSS for your components: CSS-in-JS (using libraries such as Glamor and Styled Components) or [CSS Modules](https://github.com/css-modules/css-modules). As I feel far more comfortable writing "traditional" CSS, I opted for the latter. CSS Modules are really interesting, and not tied to Gatsby. Styles are scoped locally by default and unique class names are generated programmatically, meaning you don't get the clashes with naming and specificity that you sometimes get in traditional CSS, and you can compose new selectors from others. I feel like I've only scratched the surface of CSS Modules, and am looking forward to experimenting further.

_(Side note: This doesnt mean I have a problem with traditional CSS, or that Im advocating CSS Modules in every scenario! Many of the so-called problems of CSS are actually down to misuse or misapplication. Nevertheless, CSS Modules and CSS-in-JS are good to know about, and can be useful tools to have in your arsenal.)_
_(Side note: This doesn't mean I have a problem with traditional CSS, or that I'm advocating CSS Modules in every scenario! Many of the so-called "problems" of CSS are actually down to misuse or misapplication. Nevertheless, CSS Modules and CSS-in-JS are good to know about, and can be useful tools to have in your arsenal.)_

### Plugins

There is a whole ecosystem of Gatsby plugins that you can pick and choose to tailor your project. Im using `gatsby-plugin-sass` to enable me to write Sass instead of regular CSS, `gatsby-transformer-remark` for markdown files and `gatsby-plugin-typography` which sets you up with some nice typography combos with minimal configuration. Authoring your own plugins and contributing to the Gatsby community is encouraged, if thats your bag.
There is a whole ecosystem of Gatsby plugins that you can pick and choose to tailor your project. I'm using `gatsby-plugin-sass` to enable me to write Sass instead of regular CSS, `gatsby-transformer-remark` for markdown files and `gatsby-plugin-typography` which sets you up with some nice typography combos with minimal configuration. Authoring your own plugins and contributing to the Gatsby community is encouraged, if that's your bag.

### Data

You could of course hard code all your content, but its likely youll want some sort of dynamic content on your site.
You could of course hard code all your content, but it's likely you'll want some sort of dynamic content on your site.

Gatsbys data layer is powered by GraphQL, and the tutorial walks through how to build database queries with Gatsbys GraphiQL tool. Its very visual, showing you exactly what your database queries will return, which for someone like me (who finds anything database-related a little scary) is a blessing.
Gatsby's data layer is powered by GraphQL, and the tutorial walks through how to build database queries with Gatsby's GraphiQL tool. It's very visual, showing you exactly what your database queries will return, which for someone like me (who finds anything database-related a little scary) is a blessing.

I write my blog posts in markdown files, but you could configure Gatsby to work with GitHub Pages, or the CMS of your choice for a better editorial experience.

### Deployment

After youve run the build command, Gatsby allows near-instantaneous deployment through [Surge](https://surge.sh/), [Netlify](https://www.netlify.com/) and others. I set up my hosting with Netlify – run `gatsby deploy`, set up a Netlify account and youre good to go. You can then configure Netlify to auto-deploy whenever you push to a repository. Netlify provides a simpler and more helpful experience than other hosting providers Ive used, with helpful documentation, taking all the stress away from launching a site!
After you've run the build command, Gatsby allows near-instantaneous deployment through [Surge](https://surge.sh/), [Netlify](https://www.netlify.com/) and others. I set up my hosting with Netlify – run `gatsby deploy`, set up a Netlify account and you're good to go. You can then configure Netlify to auto-deploy whenever you push to a repository. Netlify provides a simpler and more helpful experience than other hosting providers I've used, with helpful documentation, taking all the stress away from launching a site!

### In conclusion

I thoroughly recommend giving Gatsby a go if youre on the fence about trying a static site generator and want to get a simple site up and running quickly and easily. The amount of thought thats gone into every aspect of the onboarding process and the developer experience is absolutely fantastic. And, have just received a shed load of seed money to launch as a startup, its only going to get better.
I thoroughly recommend giving Gatsby a go if you're on the fence about trying a static site generator and want to get a simple site up and running quickly and easily. The amount of thought that's gone into every aspect of the onboarding process and the developer experience is absolutely fantastic. And, have just received a shed load of seed money to launch as a startup, it's only going to get better.
Loading