Merge branch 'master' into topics/multiple-remark-source

Alexandre Kirszenberg · Alexandre Kirszenberg · commit 59aadf55db69 · 2018-08-26T13:39:17.000+02:00
diff --git a/docs/docs/recipes.md b/docs/docs/recipes.md
@@ -2,7 +2,102 @@
 title: Recipes
 ---
 
-This is a stub. Help our community expand it.
+<!-- Basic template:
+Task to accomplish.
+1-2 sentences about it.
+Relevant links out (tutorial, doc pages, plugin readmes, etc).
 
-Please use the [Gatsby Style Guide](/docs/gatsby-style-guide/) to ensure your
-pull request gets accepted.
+Links:
+* tutorial link
+* docs link
+* additional, if needed
+
+And yeah — those three things are exactly what we're thinking. A first step would be to just go through the tutorial and pull out all the basic things we teach there in a condensed form e.g. creating a site, creating a page, linking between pages, etc. -->
+
+Craving a happy medium between doing the [full tutorial](/tutorial/) and crawling the [full docs]((/tutorial/))? Here's a quick guiding reference for how to build things, Gatsby style.
+
+## Table of Contents
+- [Using a starter](#using-a-starter)
+- [Creating pages](#creating-pages)
+- [Linking between pages](#linking-between-pages)
+- [Styling](#styling)
+- [Creating layouts](#creating-layouts)
+- [Deploying](#deploying)
+- [Querying data](#querying-data)
+- [Sourcing data](#sourcing-data)
+- [Transforming data](#transforming-data)
+
+## Using a starter
+
+Starters are boilerplate Gatsby sites maintained officially, or by the community.
+
+* Learn how to use the Gatsby CLI tool to use starters in [tutorial part one](/tutorial/part-one/#using-gatsby-starters)
+* See a list of [official and community starters](/docs/gatsby-starters/)
+* Check out Gatsby's [official default starter](https://github.com/gatsbyjs/gatsby-starter-default)
+
+## Creating pages
+
+You can create pages in Gatsby explicitly by definining React components in `src/pages/`, or programmatically by using the `createPages` API. 
+
+* Walk through creating a page by defining a React component in `src/pages` in [tutorial part one](/tutorial/part-one/#familiarizing-with-gatsby-pages)
+* Walk through programmatically creating pages in [tutorial part seven](/tutorial/part-seven/)
+* Check out the docs overview on [creating and modifying pages](/docs/creating-and-modifying-pages/)
+
+## Linking between pages
+
+Routing in Gatsby relies on the `<Link />` component, a wrapper around [@reach/router's Link component](https://reach.tech/router/api/Link).
+
+* Walk through using Gatsby's `<Link />` component in [tutorial part one](/tutorial/part-one/#linking-between-pages)
+* Learn more about how `<Link />` works [in the docs](/docs/gatsby-link/)
+
+## Styling
+There are so many ways to add styles to your website; Gatsby supports almost every possible option, through official and community plugins.
+
+* Walk through adding global styles to an example site in [tutorial part two](/tutorial/part-two/#creating-global-styles)
+    * More on global styles [with standard CSS files](/docs/creating-global-styles/#how-to-add-global-styles-in-gatsby-with-standard-css-files)
+    * More on global styles with [CSS-in-JS](/docs/creating-global-styles/#how-to-add-global-styles-in-gatsby-using-css-in-js)
+    * More on global styles [with CSS files and no layout component](/docs/creating-global-styles/#add-global-styles-with-css-files-and-no-layout-component)
+* Use the CSS-in-JS library [Glamor](/docs/glamor/)
+* Use the CSS-in-JS library [Styled Components](/docs/styled-components/)
+* Use [CSS Modules](/tutorial/part-two/#css-modules)
+
+## Creating layouts
+
+To wrap pages with layouts, use normal React components.
+
+* Walk through creating a layout component in [tutorial part three](/tutorial/part-three/#your-first-layout-component)
+* Gatsby v1 approached layouts differently. If the context is helpful, learn about the [differences in v2](/blog/2018-06-08-life-after-layouts/)
+
+## Deploying
+
+Showtime.
+
+* Walk through building and deploying an example site in [tutorial part one](/tutorial/part-one/#deploying-a-gatsby-site)
+* Learn how to make sure your site is configured properly to be [searchable, sharable, and properly navigable](/docs/preparing-for-site-launch/)
+* Learn about [performance optimization](/docs/performance/)
+* Read about [other deployment related topics](/docs/deploying-and-hosting/)
+
+## Querying data
+
+In Gatsby, you access data through a query language called [GraphQL](https://graphql.org/).
+
+* Walk through an example of how Gatsby's data layer [pulls data into components using GraphQL](/tutorial/part-four/#how-gatsbys-data-layer-uses-graphql-to-pull-data-into-components)
+* Walk through [using Gatsby's `graphql` tag for page queries](/tutorial/part-five/#build-a-page-with-a-graphql-query)
+* Read through a conceptual guide on [querying data with GraphQL in Gatsby](/docs/querying-with-graphql/)
+* Learn more about the `graphql` tag -- [querying data in a Gatsby page](/docs/page-query/)
+* Learn more about `<StaticQuery />` -- [querying data in (non-page) components](/docs/static-query/)
+
+## Sourcing data
+
+Data sourcing in Gatsby is plugin-driven; Source plugins fetch data from their source (e.g. the `gatsby-source-filesystem` plugin fetches data from the file system, the `gatsby-source-wordpress` plugin fetches data from the WordPress API, etc).
+
+* Walk through an example using the `gatsby-source-filesystem` plugin in [tutorial part five](/tutorial/part-five/#source-plugins)
+* Search available source plugins in the [Gatsby library](/plugins/?=source)
+* Understand source plugins by building one in the [source plugin tutorial](/docs/source-plugin-tutorial/)
+
+## Transforming data
+
+Transforming data in Gatsby is also plugin-driven; Transformer plugins take data fetched using source plugins, and process it into something more usable (e.g. JSON into JavaScript objects, markdown to HTML, and more).
+
+* Walk through an example using the `gatsby-transformer-remark` plugin to transform markdown files [tutorial part six](/tutorial/part-six/#transformer-plugins)
+* Search available transformer plugins in the [Gatsby library](/plugins/?=transformer)
diff --git a/docs/sites.yml b/docs/sites.yml
@@ -644,12 +644,15 @@
 - title: The Rick and Morty API
   main_url: 'https://rickandmortyapi.com/'
   url: 'https://rickandmortyapi.com/'
+  built_by: Axel Fuhrmann
+  built_by_url: https://axelfuhrmann.com/
   featured: false
   categories:
     - Web Dev
     - Entertainment
     - Documentation
     - Open Source
+    - API
 - title: Santa Compañía Creativa
   main_url: 'https://santacc.es/'
   url: 'https://santacc.es/'
@@ -2167,3 +2170,55 @@
     - Software
     - Documentation
   featured: false
+- title: Insights
+  main_url: https://justaskusers.com/
+  url: https://justaskusers.com/
+  description: >
+    Insights helps user experience (UX) researchers conduct their research and make sense of the findings.
+  categories:
+    - User Experience
+    - Research
+    - Design
+  built_by: Just Ask Users
+  built_by_url: https://justaskusers.com/
+  featured: false
+- title: Tensiq
+  main_url: https://tensiq.com
+  url: https://tensiq.com
+  source_url: https://github.com/Tensiq/tensiq-site
+  description: >
+    Tensiq is an e-Residency startup, that provides development in cutting-edge technology while delivering secure, resilient, performant solutions.
+  categories:
+    - Game Dev
+    - Web Dev
+    - Mobile Dev
+    - Agency
+    - Open Source
+  built_by: Jens
+  built_by_url: https://github.com/arrkiin
+  featured: false
+- title: SendGrid
+  main_url: https://sendgrid.com/docs/
+  url: https://sendgrid.com/docs/
+  description: >
+    SendGrid delivers your transactional and marketing emails through the world's largest cloud-based email delivery platform.
+  categories:
+    - Technology
+    - Tool
+    - Software
+    - Documentation
+  featured: false
+- title: Mintfort
+  main_url: https://mintfort.com/
+  url: https://mintfort.com/
+  source_url: https://github.com/MintFort/mintfort.com
+  description: >
+    Mintfort, the first crypto-friendly bank account. Store and manage assets on the blockchain.
+  categories:
+    - Technology
+    - Tool
+    - Bank
+    - Software
+  built_by: Axel Fuhrmann
+  built_by_url: https://axelfuhrmann.com/
+  featured: false
diff --git a/docs/tutorial/part-two/index.md b/docs/tutorial/part-two/index.md
@@ -237,7 +237,7 @@ Now, all the text font sizes should be slightly bigger. Try changing the
 `baseFontSize` to `24px` then `12px`. All elements get resized as their
 `font-size` is based on the `baseFontSize`.
 
-_Note that if you use `gatsby-plugin-typography` with the default starter, you'll need to delete the default index.css used by that starter as it overrides the Typography.js CSS_
+_Note that if you use `gatsby-plugin-typography` with the default starter, you'll need to delete the default layout.css used by that starter as it overrides the Typography.js CSS_
 
 There are
 [many themes available](https://github.com/KyleAMathews/typography.js#published-typographyjs-themes)
diff --git a/examples/gatsbygram/package.json b/examples/gatsbygram/package.json
@@ -51,7 +51,7 @@
     "cy:run": "cypress run"
   },
   "devDependencies": {
-    "cypress": "^2.1.0",
+    "cypress": "^3.1.0",
     "start-server-and-test": "^1.1.4"
   }
 }
diff --git a/packages/gatsby-plugin-typescript/CHANGELOG.md b/packages/gatsby-plugin-typescript/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="2.0.0-rc.1"></a>
+
+# [2.0.0-rc.1](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-typescript/compare/gatsby-plugin-typescript@2.0.0-rc.0...gatsby-plugin-typescript@2.0.0-rc.1) (2018-08-21)
+
+**Note:** Version bump only for package gatsby-plugin-typescript
+
 <a name="2.0.0-rc.0"></a>
 
 # [2.0.0-rc.0](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-typescript/compare/gatsby-plugin-typescript@2.0.0-beta.10...gatsby-plugin-typescript@2.0.0-rc.0) (2018-08-21)
diff --git a/packages/gatsby-plugin-typescript/index.js b/packages/gatsby-plugin-typescript/index.js
@@ -0,0 +1 @@
+// noop
diff --git a/packages/gatsby-plugin-typescript/package.json b/packages/gatsby-plugin-typescript/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gatsby-plugin-typescript",
   "description": "Adds TypeScript support to Gatsby",
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0-rc.1",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"
diff --git a/packages/gatsby-plugin-typescript/src/gatsby-node.js b/packages/gatsby-plugin-typescript/src/gatsby-node.js
@@ -6,5 +6,25 @@ function onCreateBabelConfig({ actions }, pluginOptions) {
   })
 }
 
+function onCreateWebpackConfig({ actions, loaders }) {
+  const jsLoader = loaders.js()
+
+  if (!jsLoader) {
+    return
+  }
+
+  actions.setWebpackConfig({
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: jsLoader,
+        },
+      ],
+    },
+  })
+}
+
 exports.resolvableExtensions = resolvableExtensions
 exports.onCreateBabelConfig = onCreateBabelConfig
+exports.onCreateWebpackConfig = onCreateWebpackConfig
diff --git a/packages/gatsby-plugin-typescript/src/resolve.js b/packages/gatsby-plugin-typescript/src/resolve.js
diff --git a/packages/gatsby-plugin-typography/README.md b/packages/gatsby-plugin-typography/README.md
@@ -2,7 +2,7 @@
 
 A Gatsby plugin for utilizing the [Typography](https://kyleamathews.github.io/typography.js/) library with minimal configuration.
 
-See it in action in the [Tutorial](https://www.gatsbyjs.org/tutorial/part-two/)
+See it in action in the [Tutorial](https://www.gatsbyjs.org/tutorial/part-two/#typographyjs)
 ([source](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-typography))
 
 ## Install
diff --git a/packages/gatsby-remark-prismjs/README.md b/packages/gatsby-remark-prismjs/README.md
@@ -127,7 +127,7 @@ CSS along your PrismJS theme and the styles for `.gatsby-highlight-code-line`:
   min-width: 100%; /* 2 */
 }
 .gatsby-highlight pre[class*="language-"].line-numbers {
-  paddingleft: 2.8em; /* 3 */
+  padding-left: 2.8em; /* 3 */
 }
 ```
 
diff --git a/www/gatsby-node.js b/www/gatsby-node.js
@@ -51,6 +51,7 @@ exports.createPages = ({ graphql, actions }) => {
   return new Promise((resolve, reject) => {
     const docsTemplate = path.resolve(`src/templates/template-docs-markdown.js`)
     const blogPostTemplate = path.resolve(`src/templates/template-blog-post.js`)
+    const blogListTemplate = path.resolve(`src/templates/template-blog-list.js`)
     const tagTemplate = path.resolve(`src/templates/tags.js`)
     const contributorPageTemplate = path.resolve(
       `src/templates/template-contributor-page.js`
@@ -162,7 +163,24 @@ exports.createPages = ({ graphql, actions }) => {
         return undefined
       })
 
-      // Create blog pages.
+      // Create blog-list pages.
+      const postsPerPage = 8
+      const numPages = Math.ceil(blogPosts.length / postsPerPage)
+
+      Array.from({ length: numPages }).forEach((_, i) => {
+        createPage({
+          path: i === 0 ? `/blog` : `/blog/${i + 1}`,
+          component: slash(blogListTemplate),
+          context: {
+            limit: postsPerPage,
+            skip: i * postsPerPage,
+            numPages,
+            currentPage: i + 1,
+          },
+        })
+      })
+
+      // Create blog-post pages.
       blogPosts.forEach((edge, index) => {
         const next = index === 0 ? null : blogPosts[index - 1].node
         const prev =
diff --git a/www/package.json b/www/package.json
@@ -7,7 +7,7 @@
     "bluebird": "^3.5.1",
     "email-validator": "^1.1.1",
     "fuse.js": "^3.2.0",
-    "gatsby": "^2.0.0-beta.102",
+    "gatsby": "^2.0.0-rc.0",
     "gatsby-image": "next",
     "gatsby-plugin-canonical-urls": "next",
     "gatsby-plugin-catch-links": "next",
diff --git a/www/src/components/pagination/PaginationLink.js b/www/src/components/pagination/PaginationLink.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import { Link } from 'gatsby'
+import { colors } from "../../utils/presets"
+
+const PaginationLink = ({ to, children, ...props }) => {
+  if (to) {
+    return (
+      <Link to={to} {...props}>
+        {children}
+      </Link>
+    )
+  }
+  return <span css={{ color: colors.gray.calm }}>{children}</span>
+}
+
+export default PaginationLink
diff --git a/www/src/components/pagination/index.js b/www/src/components/pagination/index.js
diff --git a/www/src/templates/template-blog-list.js b/www/src/templates/template-blog-list.js

Original file line number	Diff line number	Diff line change
`@@ -51,7 +51,7 @@`
`51`	`51`	`"cy:run": "cypress run"`
`52`	`52`	`},`
`53`	`53`	`"devDependencies": {`
`54`		`- "cypress": "^2.1.0",`
	`54`	`+ "cypress": "^3.1.0",`
`55`	`55`	`"start-server-and-test": "^1.1.4"`
`56`	`56`	`}`
`57`	`57`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "gatsby-plugin-typescript",`
`3`	`3`	`"description": "Adds TypeScript support to Gatsby",`
`4`		`- "version": "2.0.0-rc.0",`
	`4`	`+ "version": "2.0.0-rc.1",`
`5`	`5`	`"author": "Kyle Mathews <[email protected]>",`
`6`	`6`	`"bugs": {`
`7`	`7`	`"url": "https://github.com/gatsbyjs/gatsby/issues"`