From d5b137edff6c991ab6523616ba535f257f622f74 Mon Sep 17 00:00:00 2001 From: Lipis Date: Tue, 6 Nov 2018 21:35:05 +0200 Subject: [PATCH] chore: Format assets (#8622) --- CHANGELOG.md | 42 +- .../2018-10-09-hacktoberfest-kickoff/index.md | 2 +- .../2018-10-15-beyond-static-intro/index.md | 14 +- docs/docs/adding-website-functionality.md | 1 - docs/docs/behind-the-scenes.md | 2 +- docs/docs/creating-slugs-for-pages.md | 2 +- docs/docs/deploying-to-aerobatic.md | 1 + docs/docs/deploying-to-heroku.md | 5 + docs/docs/deploying-to-s3-cloudfront.md | 1 + docs/docs/environment-variables.md | 22 +- docs/docs/gatsby-cli.md | 10 +- docs/docs/gatsby-link.md | 1 - docs/docs/linking-between-pages.md | 2 +- docs/docs/node-creation.md | 2 +- docs/docs/node-tracking.md | 7 +- docs/docs/page-creation.md | 2 +- docs/docs/post-css.md | 12 +- docs/docs/query-behind-the-scenes.md | 3 +- docs/docs/query-execution.md | 19 +- docs/docs/query-extraction.md | 2 - docs/docs/schema-connections.md | 15 +- docs/docs/schema-generation.md | 1 - docs/docs/sourcing-from-drupal.md | 5 +- docs/docs/sourcing-from-wordpress.md | 1 + docs/docs/static-folder.md | 26 +- docs/docs/static-vs-normal-queries.md | 5 +- docs/docs/testing.md | 1 + examples/hn/src/css/news.css | 549 +++++++++++++----- .../src/styles/another-page.module.css | 1 - .../src/styles/index.module.css | 2 +- .../src/styles/sass.module.scss | 6 +- examples/using-faker/src/layouts/index.css | 42 +- .../2017-03-09-choropleth-on-d3v4/style.scss | 92 +-- .../style.scss | 92 +-- .../src/components/SiteLinks/style.css | 27 +- .../src/components/SiteNav/style.css | 26 +- .../src/static/css/base.scss | 24 +- .../src/static/fonts/fontawesome/style.css | 27 +- .../src/layouts/layout.css | 42 +- .../src/pages/style.css | 1 - .../using-redirects/src/components/layout.css | 42 +- .../src/components/selected.css | 2 +- examples/using-sass/src/styles/main.scss | 10 +- examples/using-sqip/src/index.css | 2 +- packages/gatsby-cli/README.md | 10 +- packages/gatsby-image/README.md | 2 +- packages/gatsby-plugin-layout/README.md | 6 +- packages/gatsby-plugin-netlify-cms/README.md | 16 +- packages/gatsby-plugin-page-creator/README.md | 2 +- .../README.md | 3 +- .../README.md | 8 +- packages/gatsby-transformer-pdf/README.md | 1 + packages/gatsby-transformer-remark/README.md | 2 +- 53 files changed, 767 insertions(+), 476 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fd0027500fc4c..db68aa37e8580 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,39 +3,41 @@ ## [2.0.0] - 2018-09-13 ### Added + - Improve Gatsby's routing accessibility by integrating @reach/router (#6918) @KyleAMathews - Add new onPreRenderHTML SSR API to manage head components in html.js (#6760) @octalmage -- Improve build speeds on larger sites (HulkSmash!) (#6226) @KyleAMathews -- Add multi-process HTML rendering support(#6417) @KyleAMathews -- Add babel-plugin-macros for custom babel config (#7129) @porfirioribeiro +- Improve build speeds on larger sites (HulkSmash!) (#6226) @KyleAMathews +- Add multi-process HTML rendering support(#6417) @KyleAMathews +- Add babel-plugin-macros for custom babel config (#7129) @porfirioribeiro - Upgrade webpack to v3, improve webpack utils (#3126) @jquense -- Add gatsby-remark-graphviz plugin to render dot (graphviz) code blocks to SVG (#7341) @Moocar +- Add gatsby-remark-graphviz plugin to render dot (graphviz) code blocks to SVG (#7341) @Moocar - Improve support for non-latin language content in gatsby-transformer-remark (#6992) @youngboy - Improve support for Drupal relationships in gatsby-source-drupal (#5020) @pieh -- Add support for extra connection string params in gatsby-source-mongodb (#5972) @lcostea +- Add support for extra connection string params in gatsby-source-mongodb (#5972) @lcostea - Add support for additional options supplied to gatsby-plugin-styled-components (#5240) @nihgwu -- Add guide on debugging the Gatsby build process (#6369) @pieh -- Add docs on unit testing, Cypress, react-testing-library and testing CSS-in-JS (#6678, #6708) @ascorbic, @LeKoArts -- Redesigned docs navigation and expanded docs topics (#6245, #6610) @shannonbux, @fk -- Allow plugins to override core prefetching behavior (#5320) @KyleAMathews -- Add gatsby-codemods package to assist v1 -> v2 transition (#6122) @jquense -- Add gatsby-plugin-layout package to allow use of v1 layout components in v2 (#7204) @pieh -- Add support for service worker caching of prefetched resources in gatsby-plugin-offline (#6566) @kkemple +- Add guide on debugging the Gatsby build process (#6369) @pieh +- Add docs on unit testing, Cypress, react-testing-library and testing CSS-in-JS (#6678, #6708) @ascorbic, @LeKoArts +- Redesigned docs navigation and expanded docs topics (#6245, #6610) @shannonbux, @fk +- Allow plugins to override core prefetching behavior (#5320) @KyleAMathews +- Add gatsby-codemods package to assist v1 -> v2 transition (#6122) @jquense +- Add gatsby-plugin-layout package to allow use of v1 layout components in v2 (#7204) @pieh +- Add support for service worker caching of prefetched resources in gatsby-plugin-offline (#6566) @kkemple - Add critical scripts and links to static file globs in service worker in gatsby-plugin-offline (#6316) @kkemple - Add snapshot testing for gatsby-link (#7090) @alexandernanberg -- Introduce REPL command to gatsby-cli (#7262) @kkemple -- Add support for webpackPrefetch (#5901) @pistachiology +- Introduce REPL command to gatsby-cli (#7262) @kkemple +- Add support for webpackPrefetch (#5901) @pistachiology - Explicitly export graphql tag from Gatsby (#5415) @pieh - Add eslint-loader and eslint configuration (#4893) @kkemple - Improve loading graphql query results ("ludicrous mode!") (#4555) @m-allanson -- Improve error messaging when Gatsby is not installed (#7106) @KyleAMathews -- Improve modifyWebpackConfig error messaging (#7152) @m-allanson +- Improve error messaging when Gatsby is not installed (#7106) @KyleAMathews +- Improve modifyWebpackConfig error messaging (#7152) @m-allanson - Add support for open tracing with zipkin (#6347) @Moocar -- Improve error messaging when plugin can't be loaded (#7023) @KyleAMathews -- Display formatted message for graphql resolver errors (#6142) @pieh -- Improve error formatting on HTML build errors (#6188) @pieh +- Improve error messaging when plugin can't be loaded (#7023) @KyleAMathews +- Display formatted message for graphql resolver errors (#6142) @pieh +- Improve error formatting on HTML build errors (#6188) @pieh ### Fixed + - Fix out of memory error by saving state to after bootstrap is complete (#6636) @KyleAMathews - Fix out of memory error by flattening entry values (#6797) @chuntley - Fix code syntax formatting bug which highlighted keywords in plaintext (#7342) @tryzniak @@ -44,7 +46,7 @@ - Fix service worker bug originating from inlining webpack-runtime (#5540) @KyleAMathews - Fix bug producing duplicates when naming GraphQL queries (#6765) @fusepilot - Fix typo in type annotation (#6288) @sudodoki -- Fix showing 404 page in development (#7140) @KyleAMathews +- Fix showing 404 page in development (#7140) @KyleAMathews - Tighten externals matching to prevent code imports from causing build errors (#7325) @m-allanson ## [1.5.0] - 2017-07-27 diff --git a/docs/blog/2018-10-09-hacktoberfest-kickoff/index.md b/docs/blog/2018-10-09-hacktoberfest-kickoff/index.md index 52fd90112debe..8f4721ab515c8 100644 --- a/docs/blog/2018-10-09-hacktoberfest-kickoff/index.md +++ b/docs/blog/2018-10-09-hacktoberfest-kickoff/index.md @@ -49,7 +49,7 @@ You may also want to check out [the main issue](https://github.com/gatsbyjs/gats Through the month, we’ll be continuously curating and adding “Hacktoberfest” labeled issues targeting many different facets of the Gatsby ecosystem (docs, core, packages, etc). If everything is claimed, don’t worry! More issues are being added regularly. (And of course feel free to peruse [other open issues](https://github.com/gatsbyjs/gatsby/issues) in the queue). This is our first time actively organizing around Hacktoberfest, and we aim to be as responsive and supportive as possible. -If you’re considering contributing to Gatsby for the first time -- or if you've already contributed -- we’re so glad you’re here! +If you’re considering contributing to Gatsby for the first time -- or if you've already contributed -- we’re so glad you’re here! ## Still have questions? diff --git a/docs/blog/2018-10-15-beyond-static-intro/index.md b/docs/blog/2018-10-15-beyond-static-intro/index.md index 144fef5544240..32e787a8e3afa 100644 --- a/docs/blog/2018-10-15-beyond-static-intro/index.md +++ b/docs/blog/2018-10-15-beyond-static-intro/index.md @@ -7,9 +7,9 @@ showImageInArticle: false tags: ["apps", "beyond static", "webinar"] --- -We hear it regularly. Gatsby is for static sites, Next.js (or similar) is for when your data changes regularly and/or you need an "app." This raises a question... what actually _is_ an app? +We hear it regularly. Gatsby is for static sites, Next.js (or similar) is for when your data changes regularly and/or you need an "app." This raises a question... what actually _is_ an app? -If this question interests you, consider attending [the upcoming webinar][webinar] where we'll focus on shedding some light on this very question as well as talk about how to build dynamic web apps with Gatsby. +If this question interests you, consider attending [the upcoming webinar][webinar] where we'll focus on shedding some light on this very question as well as talk about how to build dynamic web apps with Gatsby. Until then, I’d like to offer some brief teasers of some of the content we’ll be discussing during the webinar and some introductory information in _how_ Gatsby enables app development. @@ -19,11 +19,11 @@ Until then, I’d like to offer some brief teasers of some of the content we’l ## What is an app? -It's surprisingly challenging to define what separates an app from a static site. +It's surprisingly challenging to define what separates an app from a static site. -- Authentication? -- Reacting to remote data changes? -- A shopping cart? +- Authentication? +- Reacting to remote data changes? +- A shopping cart? It's surprisingly murky where that line is drawn and why exactly many seem to clearly delineate the two _separate_ concepts. @@ -43,7 +43,7 @@ One of the central ideas of Gatsby is that we statically generate our HTML conte 1. Invoke [ReactDOM.hydrate method][hydrate] to pick up just where we left our static HTML 1. Transfer rendering to the [React reconciler][reconciler] -It's this last phase that bridges the gap between static sites and full-fledged applications. In this phase you can make data calls, authenticate users, and perform all the app-like functionality you desire. +It's this last phase that bridges the gap between static sites and full-fledged applications. In this phase you can make data calls, authenticate users, and perform all the app-like functionality you desire. It's really that easy. diff --git a/docs/docs/adding-website-functionality.md b/docs/docs/adding-website-functionality.md index 0293ed0c93110..d9bb8d498dac5 100644 --- a/docs/docs/adding-website-functionality.md +++ b/docs/docs/adding-website-functionality.md @@ -8,5 +8,4 @@ This is a stub. Help our community expand it. Please use the [Gatsby Style Guide](/docs/gatsby-style-guide/) to ensure your pull request gets accepted. - [[guidelist]] diff --git a/docs/docs/behind-the-scenes.md b/docs/docs/behind-the-scenes.md index 4243e819b35cd..9a2158812c02b 100644 --- a/docs/docs/behind-the-scenes.md +++ b/docs/docs/behind-the-scenes.md @@ -2,7 +2,7 @@ title: Behind the Scenes --- -Curious how Gatsby works under the hood? The pages in this section describe how a Gatsby build works from an internal code/architecture point of view. It should be useful for anyone who needs to work on the internals of Gatsby, or for those who are simply curious how it all works, or perhaps you're a plugin author and need to understand how core works to track down a bug? Come one, come all! +Curious how Gatsby works under the hood? The pages in this section describe how a Gatsby build works from an internal code/architecture point of view. It should be useful for anyone who needs to work on the internals of Gatsby, or for those who are simply curious how it all works, or perhaps you're a plugin author and need to understand how core works to track down a bug? Come one, come all! If you're looking for information on how to _use_ Gatsby to write your own site, or create a plugin, check out the rest of the Gatsby docs. This section is quite low level. diff --git a/docs/docs/creating-slugs-for-pages.md b/docs/docs/creating-slugs-for-pages.md index 2c3b24196ca17..2209b5b1adf98 100644 --- a/docs/docs/creating-slugs-for-pages.md +++ b/docs/docs/creating-slugs-for-pages.md @@ -46,4 +46,4 @@ Open refresh Graph_i_QL, then run this GraphQL query to see all your slugs: } } } -``` \ No newline at end of file +``` diff --git a/docs/docs/deploying-to-aerobatic.md b/docs/docs/deploying-to-aerobatic.md index 0a842e2b1ca45..47fcd4e87dc92 100644 --- a/docs/docs/deploying-to-aerobatic.md +++ b/docs/docs/deploying-to-aerobatic.md @@ -38,4 +38,5 @@ plugins: ``` ## Other resources + - Learn more about Gatsy and Aerobatic on [Aerobatic's site](https://www.aerobatic.com/docs/static-site-generators/#react). diff --git a/docs/docs/deploying-to-heroku.md b/docs/docs/deploying-to-heroku.md index 6c57271b310f5..d0b48ec549dd7 100644 --- a/docs/docs/deploying-to-heroku.md +++ b/docs/docs/deploying-to-heroku.md @@ -1,11 +1,13 @@ --- title: Deploying to Heroku --- + You can use the [heroku buildpack static](https://github.com/heroku/heroku-buildpack-static) to handle the static files of your site. Set the `heroku/node.js` and `heroku-buildpack-static` buildpacks on your application creating an `app.json` file on the root of your project. app.json: + ``` { "buildpacks": [ @@ -24,6 +26,7 @@ Sometimes specifying buildpacks via the `app.json` file doesn’t work. If this Add a `heroku-postbuild` script in your `package.json`: package.json: + ``` { // ... @@ -35,7 +38,9 @@ package.json: // ... } ``` + Finally, add a `static.json` file in the root of your project to define the directory where your static assets will be. You can check all the options for this file in the [heroku-buildpack-static](https://github.com/heroku/heroku-buildpack-static#configuration) configuration. + ``` { "root": "public/", diff --git a/docs/docs/deploying-to-s3-cloudfront.md b/docs/docs/deploying-to-s3-cloudfront.md index 1a79c84f54f45..44fca4aeaec2f 100644 --- a/docs/docs/deploying-to-s3-cloudfront.md +++ b/docs/docs/deploying-to-s3-cloudfront.md @@ -118,6 +118,7 @@ Here, we'll be prompted for what we would like to change about the project confi > To learn more about AWS Amplify, check out the [Getting Started](https://aws-amplify.github.io/media/get_started) page. ## References: + - [Publishing Your Next Gatsby Site to AWS With AWS Amplify](https://www.gatsbyjs.org/blog/2018-08-24-gatsby-aws-hosting/) - [Escalade Sports: From $5000 to $5/month in Hosting With Gatsby](https://www.gatsbyjs.org/blog/2018-06-14-escalade-sports-from-5000-to-5-in-hosting/) - [Deploy your Gatsby.js Site to AWS S3](https://benenewton.com/deploy-your-gatsby-js-site-to-aws-s-3) diff --git a/docs/docs/environment-variables.md b/docs/docs/environment-variables.md index 1decd2ec61f0e..13320285e9296 100644 --- a/docs/docs/environment-variables.md +++ b/docs/docs/environment-variables.md @@ -4,10 +4,10 @@ title: "Environment Variables" ## Environments and Environment Variables -You can provide environment variables to your site to customise it's behaviour in different environments. +You can provide environment variables to your site to customise it's behaviour in different environments. Note that we need to distinguish in this discussion between variables which have been defined in -special places in order to be used in different deployment environments, and true OS-level +special places in order to be used in different deployment environments, and true OS-level environment variables that could be used in, for example, command-line calls. We'll call the former "Project Env Vars" and the latter "OS Env Vars". In both cases we want to be able to access the relavant value of these variable for the environment @@ -15,9 +15,9 @@ we're in. By default gatsby supports only 2 environments: - * If you run `gatsby develop`, then you will be in the 'development' environment. - * If you run `gatsby build` + `gatsby serve`, then you will be in the 'production' environment. - +- If you run `gatsby develop`, then you will be in the 'development' environment. +- If you run `gatsby build` + `gatsby serve`, then you will be in the 'production' environment. + If you want to define other environments then you'll need to do a little more work. See 'Additional Environments' below. ## Accessing Environment Variables in JavaScript @@ -55,12 +55,14 @@ normal ways e.g. by adding environment variables through your hosting/build tool calling Gatsby on the command line. In Linux terminals this can be done with: + ``` MY_ENV_VAR=foo gatsby develop ``` + In Windows it's a little more complex. [Check out this Stack Overflow article for some options](https://stackoverflow.com/questions/1420719/powershell-setting-an-environment-variable-for-a-single-command-only documents some options.) -However, the Project Env Vars that you defined in the `.env.*` files will *NOT* be immediately available +However, the Project Env Vars that you defined in the `.env.*` files will _NOT_ be immediately available in your Node.js scripts. To use those variables, use NPM package [dotenv](https://www.npmjs.com/package/dotenv) to examine the active `.env.*` file and attached those values, It's already a dependency of Gatsby, so you can require it in your `gatsby-config.js` or `gatsby-node.js` like this: @@ -100,8 +102,8 @@ render() { } ``` - ## Reserved Environment Variables: + > You can not override certain environment variables as some are used internally > for optimizations during build @@ -126,9 +128,9 @@ API_URL="http://foo.bar" ``` ```javascript:title=gatsby-config.js -let activeEnv = process.env.ACTIVE_ENV || process.env.NODE_ENV || 'development' +let activeEnv = process.env.ACTIVE_ENV || process.env.NODE_ENV || "development" -console.log(`Using environment config: '${activeEnv}'`); +console.log(`Using environment config: '${activeEnv}'`) require("dotenv").config({ path: `.env.${activeEnv}`, @@ -137,7 +139,7 @@ require("dotenv").config({ module.exports = { siteMetadata: { title: "Gatsby Default Starter", - apiUrl: process.env.GA_TRACKING_ID + apiUrl: process.env.GA_TRACKING_ID, }, plugins: [ { diff --git a/docs/docs/gatsby-cli.md b/docs/docs/gatsby-cli.md index b2090e6912187..c01c44cc7f1ee 100644 --- a/docs/docs/gatsby-cli.md +++ b/docs/docs/gatsby-cli.md @@ -64,11 +64,11 @@ the site for testing. #### Options -| Option | Description | -| :--------------: | ------------------------------------------------------------------------------- | -| `-H`, `--host` | Set host. Defaults to localhost | -| `-p`, `--port` | Set port. Defaults to 8000 | -| `-o`, `--open` | Open the site in your (default) browser for you | +| Option | Description | +| :--------------: | ---------------------------------------------------------------------------------------- | +| `-H`, `--host` | Set host. Defaults to localhost | +| `-p`, `--port` | Set port. Defaults to 8000 | +| `-o`, `--open` | Open the site in your (default) browser for you | | `--prefix-paths` | Serve site with link paths prefixed (if built with pathPrefix in your gatsby-config.js). | ### Info diff --git a/docs/docs/gatsby-link.md b/docs/docs/gatsby-link.md index de8b1daaf3534..81177ecd8507e 100644 --- a/docs/docs/gatsby-link.md +++ b/docs/docs/gatsby-link.md @@ -183,5 +183,4 @@ You can similarly check for file downloads: ) } - ``` diff --git a/docs/docs/linking-between-pages.md b/docs/docs/linking-between-pages.md index c8af9127bfed7..31a0cdf59cfb9 100644 --- a/docs/docs/linking-between-pages.md +++ b/docs/docs/linking-between-pages.md @@ -27,5 +27,5 @@ export default () => ( ## Other resources -- For the complete example of how to link between pages, see [Part One](/tutorial/part-one/#linking-between-pages/) in the Tutorial +- For the complete example of how to link between pages, see [Part One](/tutorial/part-one/#linking-between-pages/) in the Tutorial - Check out more detail on routing in Gatsby in the [API doc for Gatsby Link](/docs/gatsby-link/). diff --git a/docs/docs/node-creation.md b/docs/docs/node-creation.md index f7fdbe6ba6697..6ea9d046f51fe 100644 --- a/docs/docs/node-creation.md +++ b/docs/docs/node-creation.md @@ -53,7 +53,7 @@ Let's say you create the following node by passing it to `createNode` The value for `baz` is itself an object. That value's parent is the top level object. In this case, Gatsby simply saves the top level node as is to redux. It doesn't attempt to extract `baz` into its own node. It does however track the subobject's root NodeID using [Node Tracking](/docs/node-tracking/) -During schema compilation, Gatsby will infer the sub object's type while [creating the gqlType](/docs/schema-gql-type#plain-object-or-value-field). +During schema compilation, Gatsby will infer the sub object's type while [creating the gqlType](/docs/schema-gql-type#plain-object-or-value-field). ## Fresh/stale nodes diff --git a/docs/docs/node-tracking.md b/docs/docs/node-tracking.md index 6a2838ecc97dc..19ce6445790e3 100644 --- a/docs/docs/node-tracking.md +++ b/docs/docs/node-tracking.md @@ -10,15 +10,15 @@ You may see calls to `trackInlineObjectsInRootNode()` and `findRootNodeAncestor( let nodeA = { id: `id2`, internal: { - type: `footype` + type: `footype`, }, foo: { myfile: "blog/my-blog.md", - b: 2 + b: 2, }, bar: 7, parent: `id1`, - baz: [ { x: 8 }, 9 ] + baz: [{ x: 8 }, 9], } ``` @@ -59,4 +59,3 @@ Now, where do we use this information? In 2 places. 1. In the `File` type resolver. It is used to lookup the node's root, which should be of type `File`. We can then use that root node's base directory attribute to create the full path of the resolved field's value, and therefore find the actual `File` node that the string value is describing. See [File GqlType inference](/docs/schema-gql-type/#file-types) for more info. 1. To recursively look up node descriptions in [type-conflict-reporter.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/schema/type-conflict-reporter.js) - diff --git a/docs/docs/page-creation.md b/docs/docs/page-creation.md index 3a145cdf25363..aecc18c3b1185 100644 --- a/docs/docs/page-creation.md +++ b/docs/docs/page-creation.md @@ -14,7 +14,7 @@ The `pages` redux namespace is a map of page `path` to page object. The [pages r ## Update Components redux namespace -The `components` redux namespace is a map of [componentPath](/docs/behind-the-scenes-terminology/#component) (file with React component) to the Component object. A Component object is simply the Page object but with an empty query string (that will be set during [Query Extraction](/docs/query-extraction/#store-queries-in-redux)). +The `components` redux namespace is a map of [componentPath](/docs/behind-the-scenes-terminology/#component) (file with React component) to the Component object. A Component object is simply the Page object but with an empty query string (that will be set during [Query Extraction](/docs/query-extraction/#store-queries-in-redux)). ## onCreatePage API diff --git a/docs/docs/post-css.md b/docs/docs/post-css.md index b1f4234f5826a..3e47f114d1f59 100644 --- a/docs/docs/post-css.md +++ b/docs/docs/post-css.md @@ -10,13 +10,13 @@ This guide assumes that you have a Gatsby project set up. If you need to set up 1. Install the Gatsby plugin [**gatsby-plugin-postcss**](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-postcss). - `npm install --save gatsby-plugin-postcss` +`npm install --save gatsby-plugin-postcss` 2. Include the plugin in your `gatsby-config.js` file. - ```javascript:title=gatsby-config.js - plugins: [`gatsby-plugin-postcss`], - ``` +```javascript:title=gatsby-config.js +plugins: [`gatsby-plugin-postcss`], +``` 3. Write your stylesheets using PostCSS (.css files) and require or import them as normal. @@ -28,7 +28,7 @@ If you need to pass options to PostCSS use the plugins options; see postcss-load @custom-media --med (width <= 50rem); @media (--med) { - a { + a { &:hover { color: color-mod(black alpha(54%)); } @@ -71,4 +71,4 @@ module.exports = () => ({ ### Other resources -* [Introduction to postcss](https://www.smashingmagazine.com/2015/12/introduction-to-postcss/) +- [Introduction to postcss](https://www.smashingmagazine.com/2015/12/introduction-to-postcss/) diff --git a/docs/docs/query-behind-the-scenes.md b/docs/docs/query-behind-the-scenes.md index ef078cf2b729f..de7947cecc466 100644 --- a/docs/docs/query-behind-the-scenes.md +++ b/docs/docs/query-behind-the-scenes.md @@ -2,7 +2,7 @@ title: How Queries Work --- -We're talking about GraphQL queries here. These can be tagged graphql expressions at the bottom of your component source file (e.g [query for Gatsby frontpage](https://github.com/gatsbyjs/gatsby/blob/master/www/src/pages/index.js#L225)), StaticQueries within your components (e.g [showcase site details](https://github.com/gatsbyjs/gatsby/blob/master/www/src/components/showcase-details.js#L103)), or fragments created by plugins (e.g [gatsby-source-contentful](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-contentful/src/fragments.js)). +We're talking about GraphQL queries here. These can be tagged graphql expressions at the bottom of your component source file (e.g [query for Gatsby frontpage](https://github.com/gatsbyjs/gatsby/blob/master/www/src/pages/index.js#L225)), StaticQueries within your components (e.g [showcase site details](https://github.com/gatsbyjs/gatsby/blob/master/www/src/components/showcase-details.js#L103)), or fragments created by plugins (e.g [gatsby-source-contentful](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-contentful/src/fragments.js)). Note that we are NOT talking about queries involved in the creation of your pages, which is usually performed in your site's gatsby-node.js (e.g [Gatby's website](https://github.com/gatsbyjs/gatsby/blob/master/www/gatsby-node.js#L85)). We're only talking about queries that are tied to particular pages or templates. @@ -10,4 +10,3 @@ Almost all logic to do with queries is in the internal-plugin [query-runner](htt 1. [Query Extraction](/docs/query-extraction/) 2. [Query Execution](/docs/query-execution/) - diff --git a/docs/docs/query-execution.md b/docs/docs/query-execution.md index eb48ba26ecb21..2f8e2b834011a 100644 --- a/docs/docs/query-execution.md +++ b/docs/docs/query-execution.md @@ -15,7 +15,7 @@ Here's an overview of how it all relates: ```dot digraph { compound = true; - + subgraph cluster_other { style = invis; extractQueries [ label = "query-watcher.js", shape = box ]; @@ -23,16 +23,16 @@ digraph { components [ label = "components\l (redux)", shape = cylinder ]; createNode [ label = "CREATE_NODE action", shape = box ]; } - + subgraph cluster_pageQueryRunner { label = "page-query-runner.js" - + dirtyActions [ label = "dirtyActions", shape = cylinder ]; - extractedQueryQ [ label = "queueQueryForPathname()", shape = box ]; + extractedQueryQ [ label = "queueQueryForPathname()", shape = box ]; findIdsWithoutDD [ label = "findIdsWithoutDataDependencies()", shape = box ]; findDirtyActions [ label = "findDirtyActions()", shape = box ]; queryJobs [ label = "runQueriesForPathnames()", shape = box ]; - + extractedQueryQ -> queryJobs; findIdsWithoutDD -> queryJobs; dirtyActions -> findDirtyActions [ weight = 100 ]; @@ -43,15 +43,15 @@ digraph { label = "query-queue.js"; queryQ [ label = "better-queue", shape = box ]; } - + subgraph cluster_queryRunner { label = "query-runner.js" graphqlJs [ label = "graphqlJs(schema, query, context, ...)" ]; result [ label = "Query Result" ]; - + graphqlJs -> result; } - + diskResult [ label = "/public/static/d/${dataPath}", shape = cylinder ]; jsonDataPaths [ label = "jsonDataPaths\l(redux)", shape = cylinder ]; @@ -79,7 +79,7 @@ All queries queued after being extracted (from `query-watcher.js`). ##### Queries without node dependencies -All queries whose component path isn't listed in `componentDataDependencies`. As a recap, in [Schema Generation](/docs/schema-generation/), we showed that all Type resolvers record a dependency between the page whose query we're running and any nodes that were successfully resolved. So, If a component is declared in the `components` redux namespace (occurs during [Page Creation](/docs/page-creation/)), but is *not* contained in `componentDataDependencies`, then by definition, the query has not been run. Therefore we need to run it. Checkout [Page -> Node Dependencies](/docs/page-node-dependencies/) for more info. The code for this step is in [findIdsWithoutDataDependencies](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/internal-plugins/query-runner/page-query-runner.js#L89). +All queries whose component path isn't listed in `componentDataDependencies`. As a recap, in [Schema Generation](/docs/schema-generation/), we showed that all Type resolvers record a dependency between the page whose query we're running and any nodes that were successfully resolved. So, If a component is declared in the `components` redux namespace (occurs during [Page Creation](/docs/page-creation/)), but is _not_ contained in `componentDataDependencies`, then by definition, the query has not been run. Therefore we need to run it. Checkout [Page -> Node Dependencies](/docs/page-node-dependencies/) for more info. The code for this step is in [findIdsWithoutDataDependencies](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/internal-plugins/query-runner/page-query-runner.js#L89). ##### Pages that depend on dirty nodes @@ -132,4 +132,3 @@ As queries are consumed from the queue and executed, their results are saved to For static queries, instead of using the page's jsonName, we just use a hash of the query. Now we need to store the association of the page -> the query result in redux so we can recall it later. This is accomplished via the [json-data-paths](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/redux/reducers/json-data-paths.js) reducer which we invoke by creating a `SET_JSON_DATA_PATH` action with the page's jsonName and the saved dataPath. - diff --git a/docs/docs/query-extraction.md b/docs/docs/query-extraction.md index e62029d37cf18..13291e345f782 100644 --- a/docs/docs/query-extraction.md +++ b/docs/docs/query-extraction.md @@ -80,12 +80,10 @@ digraph { } ``` - #### Queue for execution Now that we've saved our query, we're ready to queue it for execution. Query execution is mainly handled by [page-query-runner.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/internal-plugins/query-runner/page-query-runner.js), so we accomplish this by passing the component's path to `queueQueryForPathname` function. - ```dot digraph { compound = true; diff --git a/docs/docs/schema-connections.md b/docs/docs/schema-connections.md index 3352f130fb17e..4e750e90af31d 100644 --- a/docs/docs/schema-connections.md +++ b/docs/docs/schema-connections.md @@ -22,17 +22,17 @@ Other features covered by schema connections are aggregators and reducers such a ### Connection/Edge -A connection is an abstraction that describes a collection of nodes of a type, and how to query and navigate through them. In the above example query, `allMarkdownRemark` is a Connection Type. Its field `edges` is analogous to `results`. Each Edge points at a `node` (in the collection of all markdownRemark nodes), but it also points to the logical `next` and `previous` nodes, relative to the `node` in the collection (meaningful if you provided a `sort` arg). +A connection is an abstraction that describes a collection of nodes of a type, and how to query and navigate through them. In the above example query, `allMarkdownRemark` is a Connection Type. Its field `edges` is analogous to `results`. Each Edge points at a `node` (in the collection of all markdownRemark nodes), but it also points to the logical `next` and `previous` nodes, relative to the `node` in the collection (meaningful if you provided a `sort` arg). _Fun Fact: This stuff is all based on [relay connections](https://facebook.github.io/relay/graphql/connections.htm) concepts_ -The ConnectionType also defines input args to perform paging using the `skip/limit` pattern. The actual logic for paging is defined in the [graphql-skip-limit](https://www.npmjs.com/package/graphql-skip-limit) library in [arrayconnection.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/graphql-skip-limit/src/connection/arrayconnection.js). It is invoked as the last part of the [run-sift](/docs/schema-sift#5-run-sift-query-on-all-nodes) function. To aid in paging, the ConnectionType also defines a `pageInfo` field with a `hasNextPage` field. +The ConnectionType also defines input args to perform paging using the `skip/limit` pattern. The actual logic for paging is defined in the [graphql-skip-limit](https://www.npmjs.com/package/graphql-skip-limit) library in [arrayconnection.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/graphql-skip-limit/src/connection/arrayconnection.js). It is invoked as the last part of the [run-sift](/docs/schema-sift#5-run-sift-query-on-all-nodes) function. To aid in paging, the ConnectionType also defines a `pageInfo` field with a `hasNextPage` field. The ConnectionType is defined in the [graphql-skip-limit connection.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/graphql-skip-limit/src/connection/connection.js) file. Its construction function takes a Type, and uses it to create a connectionType. E.g passing in `MarkdownRemark` Type would result in a `MarkdownRemarkConnection` type whose `edges` field would be of type `MarkdownRemarkEdge`. ### GroupConnection -A GroupConnection is a Connection with extended functionality. Instead of simply providing the means to access nodes in a collection, it allows you to group those nodes by one of its fields. It _is_ a `Connection` Type itself, but with 3 new fields: `field`, `fieldValue`, and `totalCount`. It adds a new input argument to `ConnectionType` whose value can be any (possibly nested) field on the original type. +A GroupConnection is a Connection with extended functionality. Instead of simply providing the means to access nodes in a collection, it allows you to group those nodes by one of its fields. It _is_ a `Connection` Type itself, but with 3 new fields: `field`, `fieldValue`, and `totalCount`. It adds a new input argument to `ConnectionType` whose value can be any (possibly nested) field on the original type. The creation of the GroupConnection is handled in [build-connection-fields.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/schema/build-connection-fields.js#L57). It's added as the `group` field to the top level type connection. This is most easily shown in the below diagram. @@ -61,8 +61,8 @@ Let's see this in practice. Say we were trying to group all markdown nodes by th frontmatter { title } - }, - }, + } + } } } } @@ -78,7 +78,7 @@ Note, the same enum mechanism is used for creation of `distinct` fields #### Group Resolver -The resolver for the Group type is created in [build-connection-fields.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/schema/build-connection-fields.js#L57). It operates on the result of the core connection query (e.g `allMarkdownRemark`), which is a `Connection` object with edges. From these edges, we retrieve all the nodes (each edge has a `node` field). And now we can use lodash to group those nodes by the fieldname argument (e.g `field: frontmatter___author`). +The resolver for the Group type is created in [build-connection-fields.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/schema/build-connection-fields.js#L57). It operates on the result of the core connection query (e.g `allMarkdownRemark`), which is a `Connection` object with edges. From these edges, we retrieve all the nodes (each edge has a `node` field). And now we can use lodash to group those nodes by the fieldname argument (e.g `field: frontmatter___author`). If sorting was specified ([see below](#sorting)), we sort the groups by fieldname, and then apply any `skip/limit` arguments using the [graphql-skip-limit](https://www.npmjs.com/package/graphql-skip-limit) library. Finally we are ready to fill in our `field`, `fieldValue`, and `totalCount` fields on each group, and we can return our resolved node. @@ -88,11 +88,10 @@ Just like in [gql type input filters](/docs/schema-input-gql), we must generate ### Sorting -A `sort` argument can be added to the `Connection` type (not the `GroupConnection` type). You can sort by any (possibly nested) field in the connection results. These are enums that are created via the same mechanism described in [enum fields](#field-enum-value). Except that the inference of these enums occurs in [infer-graphql-input-type.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/schema/infer-graphql-input-fields.js#L302). +A `sort` argument can be added to the `Connection` type (not the `GroupConnection` type). You can sort by any (possibly nested) field in the connection results. These are enums that are created via the same mechanism described in [enum fields](#field-enum-value). Except that the inference of these enums occurs in [infer-graphql-input-type.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/schema/infer-graphql-input-fields.js#L302). The Sort Input Type itself is created in [build-node-connections.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/schema/build-node-connections.js#L49) and implemented by [create-sort-field.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/schema/create-sort-field.js). The actual sorting occurs in run-sift (below). ### Connection Resolver (sift) Finally, we're ready to define the resolver for our Connection type (in [build-node-connections.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/schema/build-node-connections.js#L65)). This is where we come up with the name `all${type}` (e.g `allMarkdownRemark`) that is so common in Gatsby queries. The resolver is fairly simple. It uses the [sift.js](https://www.npmjs.com/package/sift) library to query across all nodes of the same type in redux. The big difference is that we supply the `connection: true` parameter to `run-sift.js` which is where sorting, and pagination is actually executed. See [Querying with Sift](/docs/schema-sift) for how this actually works. - diff --git a/docs/docs/schema-generation.md b/docs/docs/schema-generation.md index 64fd3549d243a..596b8c969ffd9 100644 --- a/docs/docs/schema-generation.md +++ b/docs/docs/schema-generation.md @@ -62,4 +62,3 @@ Finally, we have everything we need to construct our final Gatsby Type object (k #### 5. Create Connections for each type We've inferred all GraphQL Types, and the ability to query for a single node. But now we need to be able to query for collections of that type (e.g `allMarkdownRemark`). [Schema Connections](/docs/schema-connections/) takes care of that. - diff --git a/docs/docs/sourcing-from-drupal.md b/docs/docs/sourcing-from-drupal.md index 624329c1c93f3..0d0aaf5e69daf 100644 --- a/docs/docs/sourcing-from-drupal.md +++ b/docs/docs/sourcing-from-drupal.md @@ -13,9 +13,11 @@ It only takes a few steps to use Gatsby with Drupal as a headless CMS (also know ## How to implement Drupal + Gatsby ### Quick start + This guide assumes that you have a Gatsby project set up. If you need to set up a project, head to the [Quick Start guide](/docs), then come back. ### gatsby-config.js + Hooking up Gatsby to a new or existing Drupal site takes only a few steps. - Follow the `gatsby-source-drupal` [installation instructions](/packages/gatsby-source-drupal/?=drupal) to add the plugin to your Gatsby site @@ -23,7 +25,6 @@ Hooking up Gatsby to a new or existing Drupal site takes only a few steps. An example of how to include the `gatsby-source-drupal` plugin in your `gatsby-config.js` file: ```javascript:title=gatsby-config.js - module.exports = { siteMetadata: { title: `Gatsby with Drupal`, @@ -83,5 +84,3 @@ Using Gatsby together with Drupal offers a powerful, full-featured, open-source, - Watch [Kyle Mathews’ presentation on Gatsby + Drupal](https://2017.badcamp.net/session/coding-development/beginner/headless-drupal-building-blazing-fast-websites-reactgatsbyjs) - Get started with Robert Ngo’s [Decoupling Drupal with Gatsby tutorial](https://evolvingweb.ca/blog/decoupling-drupal-gatsby) and watch his [Evolving Web 2018 Drupal conference presentation](https://www.youtube.com/watch?v=s5kUJRGDz6I) - Example site that demonstrates [how to build Gatsby sites that pull data from the Drupal CMS](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-drupal). - - diff --git a/docs/docs/sourcing-from-wordpress.md b/docs/docs/sourcing-from-wordpress.md index b84777ad71eee..6751cecae2883 100644 --- a/docs/docs/sourcing-from-wordpress.md +++ b/docs/docs/sourcing-from-wordpress.md @@ -63,6 +63,7 @@ module.exports = { ``` ## Using WordPress data + Once your source plugin is pulling data, you can construct your site pages by implementing the `createPages` API in `gatsby-node.js`. When this is called, your data has already been fetched and is available to query with GraphQL. Gatsby uses [GraphQL at build time](/docs/querying-with-graphql/#how-does-graphql-and-gatsby-work-together); Your source plugin (in this case, `gatsby-source-wordpress`) fetches your data, and Gatsby uses that data to "[automatically _infer_ a GraphQL schema](/docs/querying-with-graphql/#how-does-graphql-and-gatsby-work-together)" that you can query against. The `createPages` API exposes the `graphql` function: diff --git a/docs/docs/static-folder.md b/docs/docs/static-folder.md index bee2d6a7972d3..d15e63ca389c8 100644 --- a/docs/docs/static-folder.md +++ b/docs/docs/static-folder.md @@ -2,30 +2,31 @@ title: Static folder --- -In general, every website needs assets: images, stylesheets, scripts, etc. When using Gatsby, we recommend - [Adding Images, Fonts, and Files](/docs/adding-images-fonts-files/) in JavaScript files, - because of the benefits it provides: +In general, every website needs assets: images, stylesheets, scripts, etc. When using Gatsby, we recommend +[Adding Images, Fonts, and Files](/docs/adding-images-fonts-files/) in JavaScript files, +because of the benefits it provides: - Scripts and stylesheets are minified and bundled together to avoid extra network requests. - Missing files cause compilation errors instead of 404 errors for your users. - Result filenames include content hashes so you don’t need to worry about - browsers caching their old versions. - + browsers caching their old versions. + However, there is an **escape hatch** that you can use to add an asset outside of the module system. ## Adding Assets Outside of the Module System You can create a folder named `static` at the root of your project. Every file - you put into that folder will be copied into the `public` folder. E.g. if you - add a file named `sun.jpg` to the static folder, it'll be copied to - `public/sun.jpg` - +you put into that folder will be copied into the `public` folder. E.g. if you +add a file named `sun.jpg` to the static folder, it'll be copied to +`public/sun.jpg` + ### Referencing your static asset - + In order to reference assets from the `static` folder in your code, you'll need to [import the `withPrefix` helper function from `gatsby`](/docs/gatsby-link/#prefixed-paths-helper): + ```js import { withPrefix } from 'gatsby' @@ -35,8 +36,8 @@ render() { // as described in the “Adding Images, Fonts, and Files” page. return Logo; } -``` - +``` + And make sure you [set `pathPrefix` in your gatsby-config.js](/docs/path-prefix/): @@ -47,7 +48,6 @@ module.exports = { } ``` - ### Downsides Keep in mind the downsides of this approach: diff --git a/docs/docs/static-vs-normal-queries.md b/docs/docs/static-vs-normal-queries.md index fa61accfb30e5..27203ff64dfa1 100644 --- a/docs/docs/static-vs-normal-queries.md +++ b/docs/docs/static-vs-normal-queries.md @@ -34,8 +34,9 @@ TODO: in query-watcher.js/handleQuery, we remove jsonName from dataDependencies. ### Usages - [websocket-manager](TODO). TODO -- [query-watcher](TODO). +- [query-watcher](TODO). + - `getQueriesSnapshot` returns map with snapshot of `state.staticQueryComponents` - handleComponentsWithRemovedQueries. For each staticQueryComponent, if passed in queries doesn't include `staticQueryComponent.componentPath`. TODO: Where is StaticQueryComponent created? TODO: Where is queries passed into `handleComponentsWithRemovedQueries`? - + TODO: Finish above diff --git a/docs/docs/testing.md b/docs/docs/testing.md index 652703047a722..dbc06147cedf5 100644 --- a/docs/docs/testing.md +++ b/docs/docs/testing.md @@ -6,4 +6,5 @@ overview: true [[guidelist]] ## Other resources + - Read the article ["Quality assurance in GatsbyJS projects - linting and testing" by Kalin Chernev](https://kalinchernev.github.io/gatsbyjs-qa-linting-testing/) diff --git a/examples/hn/src/css/news.css b/examples/hn/src/css/news.css index 62375d72c277c..dc629c28120c1 100644 --- a/examples/hn/src/css/news.css +++ b/examples/hn/src/css/news.css @@ -1,173 +1,458 @@ -html { overflow-y: scroll; } -body { font-family:Verdana, Geneva, sans-serif; font-size:10pt; color:#828282; } -td { font-family:Verdana, Geneva, sans-serif; font-size:10pt; color:#828282; } +html { + overflow-y: scroll; +} +body { + font-family: Verdana, Geneva, sans-serif; + font-size: 10pt; + color: #828282; +} +td { + font-family: Verdana, Geneva, sans-serif; + font-size: 10pt; + color: #828282; +} -.admin td { font-family:Verdana, Geneva, sans-serif; font-size:8.5pt; color:#000000; } -.subtext td { font-family:Verdana, Geneva, sans-serif; font-size: 7pt; color:#828282; } +.admin td { + font-family: Verdana, Geneva, sans-serif; + font-size: 8.5pt; + color: #000000; +} +.subtext td { + font-family: Verdana, Geneva, sans-serif; + font-size: 7pt; + color: #828282; +} -input { font-family:monospace; font-size:10pt; color:#000000; } -input[type=\"submit\"] { font-family:Verdana, Geneva, sans-serif; } -textarea { font-family:monospace; font-size:10pt; color:#000000; } +input { + font-family: monospace; + font-size: 10pt; + color: #000000; +} +input[type=\"submit\"] { + font-family: Verdana, Geneva, sans-serif; +} +textarea { + font-family: monospace; + font-size: 10pt; + color: #000000; +} -a:link { color:#000000; text-decoration:none; } -a:visited { color:#828282; text-decoration:none; } +a:link { + color: #000000; + text-decoration: none; +} +a:visited { + color: #828282; + text-decoration: none; +} -.default { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color:#828282; } -.admin { font-family:Verdana, Geneva, sans-serif; font-size:8.5pt; color:#000000; } -.title { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color:#828282; } -.subtext { font-family:Verdana, Geneva, sans-serif; font-size: 7pt; color:#828282; } -.yclinks { font-family:Verdana, Geneva, sans-serif; font-size: 8pt; color:#828282; } -.pagetop { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color:#222222; } -.comhead { font-family:Verdana, Geneva, sans-serif; font-size: 8pt; color:#828282; } -.comment { font-family:Verdana, Geneva, sans-serif; font-size: 9pt; } -.hnname { margin-right: 5px; } +.default { + font-family: Verdana, Geneva, sans-serif; + font-size: 10pt; + color: #828282; +} +.admin { + font-family: Verdana, Geneva, sans-serif; + font-size: 8.5pt; + color: #000000; +} +.title { + font-family: Verdana, Geneva, sans-serif; + font-size: 10pt; + color: #828282; +} +.subtext { + font-family: Verdana, Geneva, sans-serif; + font-size: 7pt; + color: #828282; +} +.yclinks { + font-family: Verdana, Geneva, sans-serif; + font-size: 8pt; + color: #828282; +} +.pagetop { + font-family: Verdana, Geneva, sans-serif; + font-size: 10pt; + color: #222222; +} +.comhead { + font-family: Verdana, Geneva, sans-serif; + font-size: 8pt; + color: #828282; +} +.comment { + font-family: Verdana, Geneva, sans-serif; + font-size: 9pt; +} +.hnname { + margin-right: 5px; +} -.comment a:link, .comment a:visited { text-decoration: underline; } -.noshow { display: none; } -.nosee { visibility: hidden; pointer-events: none; cursor: default } +.comment a:link, +.comment a:visited { + text-decoration: underline; +} +.noshow { + display: none; +} +.nosee { + visibility: hidden; + pointer-events: none; + cursor: default; +} -.c00, .c00 a:link { color:#000000; } -.c5a, .c5a a:link, .c5a a:visited { color:#5a5a5a; } -.c73, .c73 a:link, .c73 a:visited { color:#737373; } -.c82, .c82 a:link, .c82 a:visited { color:#828282; } -.c88, .c88 a:link, .c88 a:visited { color:#888888; } -.c9c, .c9c a:link, .c9c a:visited { color:#9c9c9c; } -.cae, .cae a:link, .cae a:visited { color:#aeaeae; } -.cbe, .cbe a:link, .cbe a:visited { color:#bebebe; } -.cce, .cce a:link, .cce a:visited { color:#cecece; } -.cdd, .cdd a:link, .cdd a:visited { color:#dddddd; } +.c00, +.c00 a:link { + color: #000000; +} +.c5a, +.c5a a:link, +.c5a a:visited { + color: #5a5a5a; +} +.c73, +.c73 a:link, +.c73 a:visited { + color: #737373; +} +.c82, +.c82 a:link, +.c82 a:visited { + color: #828282; +} +.c88, +.c88 a:link, +.c88 a:visited { + color: #888888; +} +.c9c, +.c9c a:link, +.c9c a:visited { + color: #9c9c9c; +} +.cae, +.cae a:link, +.cae a:visited { + color: #aeaeae; +} +.cbe, +.cbe a:link, +.cbe a:visited { + color: #bebebe; +} +.cce, +.cce a:link, +.cce a:visited { + color: #cecece; +} +.cdd, +.cdd a:link, +.cdd a:visited { + color: #dddddd; +} -.pagetop a:visited { color:#000000;} -.topsel a:link, .topsel a:visited { color:#ffffff; } +.pagetop a:visited { + color: #000000; +} +.topsel a:link, +.topsel a:visited { + color: #ffffff; +} -.subtext a:link, .subtext a:visited { color:#828282; } -.subtext a:hover { text-decoration:underline; } +.subtext a:link, +.subtext a:visited { + color: #828282; +} +.subtext a:hover { + text-decoration: underline; +} -.comhead a:link, .subtext a:visited { color:#828282; } -.comhead a:hover { text-decoration:underline; } +.comhead a:link, +.subtext a:visited { + color: #828282; +} +.comhead a:hover { + text-decoration: underline; +} -.default p { margin-top: 8px; margin-bottom: 0px; } +.default p { + margin-top: 8px; + margin-bottom: 0px; +} -.pagebreak {page-break-before:always} +.pagebreak { + page-break-before: always; +} -pre { overflow: auto; padding: 2px; } -pre:hover { overflow:auto } +pre { + overflow: auto; + padding: 2px; +} +pre:hover { + overflow: auto; +} .votearrow { - width: 10px; - height: 10px; - border: 0px; - margin: 3px 2px 6px; - background: url("grayarrow.gif") - no-repeat; + width: 10px; + height: 10px; + border: 0px; + margin: 3px 2px 6px; + background: url("grayarrow.gif") no-repeat; } -@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { - .votearrow { background-size: 10px; background-image: url("grayarrow2x.gif"); } +@media only screen and (-webkit-min-device-pixel-ratio: 2), + only screen and (min-device-pixel-ratio: 2) { + .votearrow { + background-size: 10px; + background-image: url("grayarrow2x.gif"); + } } .rotate180 { - -webkit-transform: rotate(180deg); /* Chrome and other webkit browsers */ - -moz-transform: rotate(180deg); /* FF */ - -o-transform: rotate(180deg); /* Opera */ - -ms-transform: rotate(180deg); /* IE9 */ - transform: rotate(180deg); /* W3C complaint browsers */ + -webkit-transform: rotate(180deg); /* Chrome and other webkit browsers */ + -moz-transform: rotate(180deg); /* FF */ + -o-transform: rotate(180deg); /* Opera */ + -ms-transform: rotate(180deg); /* IE9 */ + transform: rotate(180deg); /* W3C complaint browsers */ /* IE8 and below */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand'); } -#hnmain { width: 85%; } +#hnmain { + width: 85%; +} /* mobile device */ -@media only screen -and (min-width : 300px) -and (max-width : 750px) { - #hnmain { width: 100%; } - body { padding: 0; margin: 0; width: 100%; -webkit-text-size-adjust: none; } - td { height: inherit !important; } - .title, .comment { font-size: inherit; } - span.pagetop { display: block; margin: 3px 5px; font-size: 12px; } - span.pagetop b { display: block; font-size: 15px; } - table.comment-tree .comment a { display: inline-block; max-width: 200px; overflow: hidden; white-space: nowrap; - text-overflow: ellipsis; vertical-align:top; } - img[src='s.gif'][width='40'] { width: 12px; } - img[src='s.gif'][width='80'] { width: 24px; } - img[src='s.gif'][width='120'] { width: 36px; } - img[src='s.gif'][width='160'] { width: 48px; } - img[src='s.gif'][width='200'] { width: 60px; } - img[src='s.gif'][width='240'] { width: 72px; } - img[src='s.gif'][width='280'] { width: 84px; } - img[src='s.gif'][width='320'] { width: 96px; } - img[src='s.gif'][width='360'] { width: 108px; } - img[src='s.gif'][width='400'] { width: 120px; } - img[src='s.gif'][width='440'] { width: 132px; } - img[src='s.gif'][width='480'] { width: 144px; } - img[src='s.gif'][width='520'] { width: 156px; } - img[src='s.gif'][width='560'] { width: 168px; } - img[src='s.gif'][width='600'] { width: 180px; } - img[src='s.gif'][width='640'] { width: 192px; } - img[src='s.gif'][width='680'] { width: 204px; } - img[src='s.gif'][width='720'] { width: 216px; } - img[src='s.gif'][width='760'] { width: 228px; } - img[src='s.gif'][width='800'] { width: 240px; } - img[src='s.gif'][width='840'] { width: 252px; } - .title { font-size: 11pt; line-height: 14pt; } - .subtext { font-size: 9pt; } - .itemlist { padding-right: 5px;} - .votearrow { transform: scale(1.3,1.3); margin-right: 6px; } +@media only screen and (min-width: 300px) and (max-width: 750px) { + #hnmain { + width: 100%; + } + body { + padding: 0; + margin: 0; + width: 100%; + -webkit-text-size-adjust: none; + } + td { + height: inherit !important; + } + .title, + .comment { + font-size: inherit; + } + span.pagetop { + display: block; + margin: 3px 5px; + font-size: 12px; + } + span.pagetop b { + display: block; + font-size: 15px; + } + table.comment-tree .comment a { + display: inline-block; + max-width: 200px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + vertical-align: top; + } + img[src="s.gif"][width="40"] { + width: 12px; + } + img[src="s.gif"][width="80"] { + width: 24px; + } + img[src="s.gif"][width="120"] { + width: 36px; + } + img[src="s.gif"][width="160"] { + width: 48px; + } + img[src="s.gif"][width="200"] { + width: 60px; + } + img[src="s.gif"][width="240"] { + width: 72px; + } + img[src="s.gif"][width="280"] { + width: 84px; + } + img[src="s.gif"][width="320"] { + width: 96px; + } + img[src="s.gif"][width="360"] { + width: 108px; + } + img[src="s.gif"][width="400"] { + width: 120px; + } + img[src="s.gif"][width="440"] { + width: 132px; + } + img[src="s.gif"][width="480"] { + width: 144px; + } + img[src="s.gif"][width="520"] { + width: 156px; + } + img[src="s.gif"][width="560"] { + width: 168px; + } + img[src="s.gif"][width="600"] { + width: 180px; + } + img[src="s.gif"][width="640"] { + width: 192px; + } + img[src="s.gif"][width="680"] { + width: 204px; + } + img[src="s.gif"][width="720"] { + width: 216px; + } + img[src="s.gif"][width="760"] { + width: 228px; + } + img[src="s.gif"][width="800"] { + width: 240px; + } + img[src="s.gif"][width="840"] { + width: 252px; + } + .title { + font-size: 11pt; + line-height: 14pt; + } + .subtext { + font-size: 9pt; + } + .itemlist { + padding-right: 5px; + } + .votearrow { + transform: scale(1.3, 1.3); + margin-right: 6px; + } .votearrow.rotate180 { - -webkit-transform: rotate(180deg) scale(1.3,1.3); /* Chrome and other webkit browsers */ - -moz-transform: rotate(180deg) scale(1.3,1.3); /* FF */ - -o-transform: rotate(180deg) scale(1.3,1.3); /* Opera */ - -ms-transform: rotate(180deg) scale(1.3,1.3); /* IE9 */ - transform: rotate(180deg) scale(1.3,1.3); /* W3C complaint browsers */ + -webkit-transform: rotate(180deg) scale(1.3, 1.3); /* Chrome and other webkit browsers */ + -moz-transform: rotate(180deg) scale(1.3, 1.3); /* FF */ + -o-transform: rotate(180deg) scale(1.3, 1.3); /* Opera */ + -ms-transform: rotate(180deg) scale(1.3, 1.3); /* IE9 */ + transform: rotate(180deg) scale(1.3, 1.3); /* W3C complaint browsers */ + } + .votelinks { + min-width: 18px; + } + .votelinks a { + display: block; + margin-bottom: 9px; + } + input[type="text"], + input[type="number"], + textarea { + font-size: 16px; + width: 90%; } - .votelinks { min-width: 18px; } - .votelinks a { display: block; margin-bottom: 9px; } - input[type='text'], input[type='number'], textarea { font-size: 16px; width: 90%; } } -.comment { max-width: 1215px; overflow: auto } -pre { max-width: 900px; } +.comment { + max-width: 1215px; + overflow: auto; +} +pre { + max-width: 900px; +} -@media only screen and (min-width : 300px) and (max-width : 389px) { - .comment { max-width: 270px; overflow: auto } - pre { max-width: 200px; } +@media only screen and (min-width: 300px) and (max-width: 389px) { + .comment { + max-width: 270px; + overflow: auto; + } + pre { + max-width: 200px; + } } -@media only screen and (min-width : 390px) and (max-width : 509px) { - .comment { max-width: 350px; overflow: auto } - pre { max-width: 260px; } +@media only screen and (min-width: 390px) and (max-width: 509px) { + .comment { + max-width: 350px; + overflow: auto; + } + pre { + max-width: 260px; + } } -@media only screen and (min-width : 510px) and (max-width : 599px) { - .comment { max-width: 460px; overflow: auto } - pre { max-width: 340px; } +@media only screen and (min-width: 510px) and (max-width: 599px) { + .comment { + max-width: 460px; + overflow: auto; + } + pre { + max-width: 340px; + } } -@media only screen and (min-width : 600px) and (max-width : 689px) { - .comment { max-width: 540px; overflow: auto } - pre { max-width: 400px; } +@media only screen and (min-width: 600px) and (max-width: 689px) { + .comment { + max-width: 540px; + overflow: auto; + } + pre { + max-width: 400px; + } } -@media only screen and (min-width : 690px) and (max-width : 809px) { - .comment { max-width: 620px; overflow: auto } - pre { max-width: 460px; } +@media only screen and (min-width: 690px) and (max-width: 809px) { + .comment { + max-width: 620px; + overflow: auto; + } + pre { + max-width: 460px; + } } -@media only screen and (min-width : 810px) and (max-width : 899px) { - .comment { max-width: 730px; overflow: auto } - pre { max-width: 540px; } +@media only screen and (min-width: 810px) and (max-width: 899px) { + .comment { + max-width: 730px; + overflow: auto; + } + pre { + max-width: 540px; + } } -@media only screen and (min-width : 900px) and (max-width : 1079px) { - .comment { max-width: 810px; overflow: auto } - pre { max-width: 600px; } +@media only screen and (min-width: 900px) and (max-width: 1079px) { + .comment { + max-width: 810px; + overflow: auto; + } + pre { + max-width: 600px; + } } -@media only screen and (min-width : 1080px) and (max-width : 1169px) { - .comment { max-width: 970px; overflow: auto } - pre { max-width: 720px; } +@media only screen and (min-width: 1080px) and (max-width: 1169px) { + .comment { + max-width: 970px; + overflow: auto; + } + pre { + max-width: 720px; + } } -@media only screen and (min-width : 1170px) and (max-width : 1259px) { - .comment { max-width: 1050px; overflow: auto } - pre { max-width: 780px; } +@media only screen and (min-width: 1170px) and (max-width: 1259px) { + .comment { + max-width: 1050px; + overflow: auto; + } + pre { + max-width: 780px; + } } -@media only screen and (min-width : 1260px) and (max-width : 1349px) { - .comment { max-width: 1130px; overflow: auto } - pre { max-width: 840px; } +@media only screen and (min-width: 1260px) and (max-width: 1349px) { + .comment { + max-width: 1130px; + overflow: auto; + } + pre { + max-width: 840px; + } } diff --git a/examples/using-css-modules/src/styles/another-page.module.css b/examples/using-css-modules/src/styles/another-page.module.css index 46b9705f6ac90..c6d983ad5f00e 100644 --- a/examples/using-css-modules/src/styles/another-page.module.css +++ b/examples/using-css-modules/src/styles/another-page.module.css @@ -17,4 +17,3 @@ font-size: 4rem; line-height: 1; } - diff --git a/examples/using-css-modules/src/styles/index.module.css b/examples/using-css-modules/src/styles/index.module.css index 6cbf2c9f2a745..59a38de563c24 100644 --- a/examples/using-css-modules/src/styles/index.module.css +++ b/examples/using-css-modules/src/styles/index.module.css @@ -4,7 +4,7 @@ font-size: 3rem; } .subheader { - color: #485B88; + color: #485b88; line-height: 0.7; } diff --git a/examples/using-css-modules/src/styles/sass.module.scss b/examples/using-css-modules/src/styles/sass.module.scss index 8405040e25851..98ce6ea0dce1a 100644 --- a/examples/using-css-modules/src/styles/sass.module.scss +++ b/examples/using-css-modules/src/styles/sass.module.scss @@ -1,4 +1,4 @@ -$pageBackground: #F4FA58; +$pageBackground: #f4fa58; .page { background: $pageBackground; @@ -11,7 +11,7 @@ $pageBackground: #F4FA58; margin-bottom: 1rem; } .link { - background: #FE2E2E; - color: #FBFBEF; + background: #fe2e2e; + color: #fbfbef; font-size: 2rem; } diff --git a/examples/using-faker/src/layouts/index.css b/examples/using-faker/src/layouts/index.css index e485487be9b3e..9e53afc65d0a4 100644 --- a/examples/using-faker/src/layouts/index.css +++ b/examples/using-faker/src/layouts/index.css @@ -60,7 +60,7 @@ dfn { } h1 { font-size: 2em; - margin: .67em 0; + margin: 0.67em 0; } mark { background-color: #ff0; @@ -77,10 +77,10 @@ sup { vertical-align: baseline; } sub { - bottom: -.25em; + bottom: -0.25em; } sup { - top: -.5em; + top: -0.5em; } img { border-style: none; @@ -122,29 +122,29 @@ button, select { text-transform: none; } -[type=reset], -[type=submit], +[type="reset"], +[type="submit"], button, -html [type=button] { +html [type="button"] { -webkit-appearance: button; } -[type=button]::-moz-focus-inner, -[type=reset]::-moz-focus-inner, -[type=submit]::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0; } -[type=button]:-moz-focusring, -[type=reset]:-moz-focusring, -[type=submit]:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring, button:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { border: 1px solid silver; margin: 0 2px; - padding: .35em .625em .75em; + padding: 0.35em 0.625em 0.75em; } legend { box-sizing: border-box; @@ -157,26 +157,26 @@ legend { textarea { overflow: auto; } -[type=checkbox], -[type=radio] { +[type="checkbox"], +[type="radio"] { box-sizing: border-box; padding: 0; } -[type=number]::-webkit-inner-spin-button, -[type=number]::-webkit-outer-spin-button { +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { height: auto; } -[type=search] { +[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } -[type=search]::-webkit-search-cancel-button, -[type=search]::-webkit-search-decoration { +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-input-placeholder { color: inherit; - opacity: .54; + opacity: 0.54; } ::-webkit-file-upload-button { -webkit-appearance: button; diff --git a/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/style.scss b/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/style.scss index cc0fb0c5877ad..07ac4808538ba 100644 --- a/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/style.scss +++ b/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/style.scss @@ -1,46 +1,46 @@ - .state{ - fill: none; - stroke: #a9a9a9; - stroke-width: 1; - } - .state:hover{ - fill-opacity:0.5; - } - #tooltip { - position: absolute; - text-align: center; - padding: 20px; - margin: 10px; - font: 12px sans-serif; - background: lightsteelblue; - border: 1px; - border-radius: 2px; - pointer-events: none; - } - #tooltip h4{ - margin:0; - font-size:14px; - } - #tooltip{ - background:rgba(0,0,0,0.9); - border:1px solid grey; - border-radius:5px; - font-size:12px; - width:auto; - padding:4px; - color:white; - opacity:0; - } - #tooltip table{ - table-layout:fixed; - } - #tooltip tr td{ - padding:0; - margin:0; - } - #tooltip tr td:nth-child(1){ - width:50px; - } - #tooltip tr td:nth-child(2){ - text-align:center; - } \ No newline at end of file +.state { + fill: none; + stroke: #a9a9a9; + stroke-width: 1; +} +.state:hover { + fill-opacity: 0.5; +} +#tooltip { + position: absolute; + text-align: center; + padding: 20px; + margin: 10px; + font: 12px sans-serif; + background: lightsteelblue; + border: 1px; + border-radius: 2px; + pointer-events: none; +} +#tooltip h4 { + margin: 0; + font-size: 14px; +} +#tooltip { + background: rgba(0, 0, 0, 0.9); + border: 1px solid grey; + border-radius: 5px; + font-size: 12px; + width: auto; + padding: 4px; + color: white; + opacity: 0; +} +#tooltip table { + table-layout: fixed; +} +#tooltip tr td { + padding: 0; + margin: 0; +} +#tooltip tr td:nth-child(1) { + width: 50px; +} +#tooltip tr td:nth-child(2) { + text-align: center; +} diff --git a/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/style.scss b/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/style.scss index cc0fb0c5877ad..07ac4808538ba 100644 --- a/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/style.scss +++ b/examples/using-javascript-transforms/src/articles/2017-05-30-choropleth-on-d3v4-alternate/style.scss @@ -1,46 +1,46 @@ - .state{ - fill: none; - stroke: #a9a9a9; - stroke-width: 1; - } - .state:hover{ - fill-opacity:0.5; - } - #tooltip { - position: absolute; - text-align: center; - padding: 20px; - margin: 10px; - font: 12px sans-serif; - background: lightsteelblue; - border: 1px; - border-radius: 2px; - pointer-events: none; - } - #tooltip h4{ - margin:0; - font-size:14px; - } - #tooltip{ - background:rgba(0,0,0,0.9); - border:1px solid grey; - border-radius:5px; - font-size:12px; - width:auto; - padding:4px; - color:white; - opacity:0; - } - #tooltip table{ - table-layout:fixed; - } - #tooltip tr td{ - padding:0; - margin:0; - } - #tooltip tr td:nth-child(1){ - width:50px; - } - #tooltip tr td:nth-child(2){ - text-align:center; - } \ No newline at end of file +.state { + fill: none; + stroke: #a9a9a9; + stroke-width: 1; +} +.state:hover { + fill-opacity: 0.5; +} +#tooltip { + position: absolute; + text-align: center; + padding: 20px; + margin: 10px; + font: 12px sans-serif; + background: lightsteelblue; + border: 1px; + border-radius: 2px; + pointer-events: none; +} +#tooltip h4 { + margin: 0; + font-size: 14px; +} +#tooltip { + background: rgba(0, 0, 0, 0.9); + border: 1px solid grey; + border-radius: 5px; + font-size: 12px; + width: auto; + padding: 4px; + color: white; + opacity: 0; +} +#tooltip table { + table-layout: fixed; +} +#tooltip tr td { + padding: 0; + margin: 0; +} +#tooltip tr td:nth-child(1) { + width: 50px; +} +#tooltip tr td:nth-child(2) { + text-align: center; +} diff --git a/examples/using-javascript-transforms/src/components/SiteLinks/style.css b/examples/using-javascript-transforms/src/components/SiteLinks/style.css index 3edfa16065856..c4a88505f24f1 100644 --- a/examples/using-javascript-transforms/src/components/SiteLinks/style.css +++ b/examples/using-javascript-transforms/src/components/SiteLinks/style.css @@ -1,30 +1,29 @@ - .blog-social { - margin-top: 30px; + margin-top: 30px; } .blog-social ul { - list-style: none; - padding: 0; - margin: 10px 0; - clear: fix-legacy; + list-style: none; + padding: 0; + margin: 10px 0; + clear: fix-legacy; } .blog-social ul > li { - margin-right: 5px; - height: 24px; + margin-right: 5px; + height: 24px; } .blog-social ul > li > a { - border-bottom: 0; + border-bottom: 0; } .blog-social ul > li > a > i { - color: #606060; - font-size: 14px; - line-height: 24px; + color: #606060; + font-size: 14px; + line-height: 24px; } .blog-social ul > li:hover a > i { - color: #444; - font-color: #444; + color: #444; + font-color: #444; } diff --git a/examples/using-javascript-transforms/src/components/SiteNav/style.css b/examples/using-javascript-transforms/src/components/SiteNav/style.css index a4f21298e4c85..dc8f86e995bfb 100644 --- a/examples/using-javascript-transforms/src/components/SiteNav/style.css +++ b/examples/using-javascript-transforms/src/components/SiteNav/style.css @@ -1,24 +1,24 @@ .blog-nav { - margin: 20px 0px 10px; + margin: 20px 0px 10px; } .blog-nav ul { - list-style: none; - padding-left: 0; + list-style: none; + padding-left: 0; } .blog-nav ul li { - margin: 10px 0 10px; + margin: 10px 0 10px; } .blog-nav ul li a { - font-size: 16px; - line-heigh: 26px; - margin-bottom: 26px; - border-bottom: 0; - font-weight: 400; - color: #222; + font-size: 16px; + line-heigh: 26px; + margin-bottom: 26px; + border-bottom: 0; + font-weight: 400; + color: #222; } .blog-nav ul li a.current { - border-bottom: 1px solid; + border-bottom: 1px solid; } .blog-nav ul li a:hover { - border-bottom: 1px solid; -} \ No newline at end of file + border-bottom: 1px solid; +} diff --git a/examples/using-javascript-transforms/src/static/css/base.scss b/examples/using-javascript-transforms/src/static/css/base.scss index aa250277246df..d85726fe55397 100644 --- a/examples/using-javascript-transforms/src/static/css/base.scss +++ b/examples/using-javascript-transforms/src/static/css/base.scss @@ -1,17 +1,17 @@ -@import '~normalize.css'; +@import "~normalize.css"; // Override variables here // You can add new ones or update existing ones: $primary: #ad42f4; -$info: #0060F0; -$success: #14A900; -$warning: #F0B800; -$danger: #E80000; -$text: #5C5C5C; -$body-background: #FFFFFF; -$background: #FFFFFF; -$family-sans-serif: 'Varela Round', sans-serif; -$family-serif: 'Lora', serif; // Add a serif family +$info: #0060f0; +$success: #14a900; +$warning: #f0b800; +$danger: #e80000; +$text: #5c5c5c; +$body-background: #ffffff; +$background: #ffffff; +$family-sans-serif: "Varela Round", sans-serif; +$family-serif: "Lora", serif; // Add a serif family -@import '~bulma'; -@import '~prismjs/themes/prism-coy'; +@import "~bulma"; +@import "~prismjs/themes/prism-coy"; diff --git a/examples/using-javascript-transforms/src/static/fonts/fontawesome/style.css b/examples/using-javascript-transforms/src/static/fonts/fontawesome/style.css index 92fad1608ab0f..948401931a3b7 100644 --- a/examples/using-javascript-transforms/src/static/fonts/fontawesome/style.css +++ b/examples/using-javascript-transforms/src/static/fonts/fontawesome/style.css @@ -6,9 +6,14 @@ /* FONT PATH * -------------------------- */ @font-face { - font-family: 'FontAwesome'; - src: url('./fontawesome-webfont.eot?v=4.5.0'); - src: url('./fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('./fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('./fontawesome-webfont.woff?v=4.5.0') format('woff'), url('./fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('./fontawesome-webfont.svg?v=4.5.0') format('svg'); + font-family: "FontAwesome"; + src: url("./fontawesome-webfont.eot?v=4.5.0"); + src: url("./fontawesome-webfont.eot?#iefix&v=4.5.0") + format("embedded-opentype"), + url("./fontawesome-webfont.woff2?v=4.5.0") format("woff2"), + url("./fontawesome-webfont.woff?v=4.5.0") format("woff"), + url("./fontawesome-webfont.ttf?v=4.5.0") format("truetype"), + url("./fontawesome-webfont.svg?v=4.5.0") format("svg"); font-weight: normal; font-style: normal; } @@ -73,9 +78,9 @@ } .fa-border { - padding: .2em .25em .15em; + padding: 0.2em 0.25em 0.15em; border: solid 0.08em #eeeeee; - border-radius: .1em; + border-radius: 0.1em; } .fa-pull-left { @@ -87,11 +92,11 @@ } .fa.fa-pull-left { - margin-right: .3em; + margin-right: 0.3em; } .fa.fa-pull-right { - margin-left: .3em; + margin-left: 0.3em; } /* Deprecated as of 4.4.0 */ @@ -104,11 +109,11 @@ } .fa.pull-left { - margin-right: .3em; + margin-right: 0.3em; } .fa.pull-right { - margin-left: .3em; + margin-left: 0.3em; } .fa-spin { @@ -131,7 +136,6 @@ -webkit-transform: rotate(359deg); transform: rotate(359deg); } - } @keyframes fa-spin { @@ -144,7 +148,6 @@ -webkit-transform: rotate(359deg); transform: rotate(359deg); } - } .fa-rotate-90 { @@ -2728,4 +2731,4 @@ .fa-percent:before { content: "\f295"; -} \ No newline at end of file +} diff --git a/examples/using-page-transitions/src/layouts/layout.css b/examples/using-page-transitions/src/layouts/layout.css index e485487be9b3e..9e53afc65d0a4 100644 --- a/examples/using-page-transitions/src/layouts/layout.css +++ b/examples/using-page-transitions/src/layouts/layout.css @@ -60,7 +60,7 @@ dfn { } h1 { font-size: 2em; - margin: .67em 0; + margin: 0.67em 0; } mark { background-color: #ff0; @@ -77,10 +77,10 @@ sup { vertical-align: baseline; } sub { - bottom: -.25em; + bottom: -0.25em; } sup { - top: -.5em; + top: -0.5em; } img { border-style: none; @@ -122,29 +122,29 @@ button, select { text-transform: none; } -[type=reset], -[type=submit], +[type="reset"], +[type="submit"], button, -html [type=button] { +html [type="button"] { -webkit-appearance: button; } -[type=button]::-moz-focus-inner, -[type=reset]::-moz-focus-inner, -[type=submit]::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0; } -[type=button]:-moz-focusring, -[type=reset]:-moz-focusring, -[type=submit]:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring, button:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { border: 1px solid silver; margin: 0 2px; - padding: .35em .625em .75em; + padding: 0.35em 0.625em 0.75em; } legend { box-sizing: border-box; @@ -157,26 +157,26 @@ legend { textarea { overflow: auto; } -[type=checkbox], -[type=radio] { +[type="checkbox"], +[type="radio"] { box-sizing: border-box; padding: 0; } -[type=number]::-webkit-inner-spin-button, -[type=number]::-webkit-outer-spin-button { +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { height: auto; } -[type=search] { +[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } -[type=search]::-webkit-search-cancel-button, -[type=search]::-webkit-search-decoration { +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-input-placeholder { color: inherit; - opacity: .54; + opacity: 0.54; } ::-webkit-file-upload-button { -webkit-appearance: button; diff --git a/examples/using-prefetching-preloading-modules/src/pages/style.css b/examples/using-prefetching-preloading-modules/src/pages/style.css index 51bed5f448ab2..dd3e5e4536d46 100644 --- a/examples/using-prefetching-preloading-modules/src/pages/style.css +++ b/examples/using-prefetching-preloading-modules/src/pages/style.css @@ -1,4 +1,3 @@ - .changeable-title { color: red; } diff --git a/examples/using-redirects/src/components/layout.css b/examples/using-redirects/src/components/layout.css index e485487be9b3e..9e53afc65d0a4 100644 --- a/examples/using-redirects/src/components/layout.css +++ b/examples/using-redirects/src/components/layout.css @@ -60,7 +60,7 @@ dfn { } h1 { font-size: 2em; - margin: .67em 0; + margin: 0.67em 0; } mark { background-color: #ff0; @@ -77,10 +77,10 @@ sup { vertical-align: baseline; } sub { - bottom: -.25em; + bottom: -0.25em; } sup { - top: -.5em; + top: -0.5em; } img { border-style: none; @@ -122,29 +122,29 @@ button, select { text-transform: none; } -[type=reset], -[type=submit], +[type="reset"], +[type="submit"], button, -html [type=button] { +html [type="button"] { -webkit-appearance: button; } -[type=button]::-moz-focus-inner, -[type=reset]::-moz-focus-inner, -[type=submit]::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0; } -[type=button]:-moz-focusring, -[type=reset]:-moz-focusring, -[type=submit]:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring, button:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { border: 1px solid silver; margin: 0 2px; - padding: .35em .625em .75em; + padding: 0.35em 0.625em 0.75em; } legend { box-sizing: border-box; @@ -157,26 +157,26 @@ legend { textarea { overflow: auto; } -[type=checkbox], -[type=radio] { +[type="checkbox"], +[type="radio"] { box-sizing: border-box; padding: 0; } -[type=number]::-webkit-inner-spin-button, -[type=number]::-webkit-outer-spin-button { +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { height: auto; } -[type=search] { +[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } -[type=search]::-webkit-search-cancel-button, -[type=search]::-webkit-search-decoration { +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-input-placeholder { color: inherit; - opacity: .54; + opacity: 0.54; } ::-webkit-file-upload-button { -webkit-appearance: button; diff --git a/examples/using-redirects/src/components/selected.css b/examples/using-redirects/src/components/selected.css index 35c16bb4295e6..35105a1aeb59b 100644 --- a/examples/using-redirects/src/components/selected.css +++ b/examples/using-redirects/src/components/selected.css @@ -1,3 +1,3 @@ .selected { color: #396; -} \ No newline at end of file +} diff --git a/examples/using-sass/src/styles/main.scss b/examples/using-sass/src/styles/main.scss index 50174a0e93dfa..7a3ad97a84ff2 100644 --- a/examples/using-sass/src/styles/main.scss +++ b/examples/using-sass/src/styles/main.scss @@ -1,14 +1,16 @@ -@import '~tachyons-sass/tachyons.scss'; -@import 'variables'; +@import "~tachyons-sass/tachyons.scss"; +@import "variables"; -@mixin borderRadius ($radius: 5px) { +@mixin borderRadius($radius: 5px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .sass-nav-example { - li { display: inline-block; } + li { + display: inline-block; + } a { @include borderRadius(3px); diff --git a/examples/using-sqip/src/index.css b/examples/using-sqip/src/index.css index ecf76f6cf7163..27acefbd1314f 100644 --- a/examples/using-sqip/src/index.css +++ b/examples/using-sqip/src/index.css @@ -680,5 +680,5 @@ blockquote p { text-align: center; font-size: 1.4vw; /* Hate me or not, Comic Sans is a great fit here */ - font-family: "Comic Sans MS", cursive, sans-serif; + font-family: 'Comic Sans MS', cursive, sans-serif; } diff --git a/packages/gatsby-cli/README.md b/packages/gatsby-cli/README.md index 36eda9d8abbba..f213583f1904f 100644 --- a/packages/gatsby-cli/README.md +++ b/packages/gatsby-cli/README.md @@ -60,11 +60,11 @@ the site for testing. #### Options -| Option | Description | -| :--------------: | ------------------------------------------------------------------------------- | -| `-H`, `--host` | Set host. Defaults to localhost | -| `-p`, `--port` | Set port. Defaults to 8000 | -| `-o`, `--open` | Open the site in your (default) browser for you | +| Option | Description | +| :--------------: | ---------------------------------------------------------------------------------------- | +| `-H`, `--host` | Set host. Defaults to localhost | +| `-p`, `--port` | Set port. Defaults to 8000 | +| `-o`, `--open` | Open the site in your (default) browser for you | | `--prefix-paths` | Serve site with link paths prefixed (if built with pathPrefix in your gatsby-config.js). | ### Info diff --git a/packages/gatsby-image/README.md b/packages/gatsby-image/README.md index d3dca4c586139..0bd96a6188a74 100644 --- a/packages/gatsby-image/README.md +++ b/packages/gatsby-image/README.md @@ -262,7 +262,7 @@ prop. e.g. `` ## `gatsby-image` props | Name | Type | Description | -| -----------------------| ------------------- | --------------------------------------------------------------------------------------------------------------------------- | +| ---------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- | | `fixed` | `object` | Data returned from the `fixed` query | | `fluid` | `object` | Data returned from the `fluid` query | | `fadeIn` | `bool` | Defaults to fading in the image on load | diff --git a/packages/gatsby-plugin-layout/README.md b/packages/gatsby-plugin-layout/README.md index 4962f8c465570..3cc4d347fd8aa 100644 --- a/packages/gatsby-plugin-layout/README.md +++ b/packages/gatsby-plugin-layout/README.md @@ -201,11 +201,9 @@ And then in `src/layouts/index.js`: ```js export default ({ children, pageContext }) => { - if (pageContext.layout === 'special') { + if (pageContext.layout === "special") { return {children} } - return ( - {children} - ) + return {children} } ``` diff --git a/packages/gatsby-plugin-netlify-cms/README.md b/packages/gatsby-plugin-netlify-cms/README.md index d8c45056f3a0e..bcc27f6da35fd 100644 --- a/packages/gatsby-plugin-netlify-cms/README.md +++ b/packages/gatsby-plugin-netlify-cms/README.md @@ -73,7 +73,7 @@ The js module might look like this: * extension registration methods, such as `registerWidget` and * `registerPreviewTemplate`. */ -import CMS from 'netlify-cms' +import CMS from "netlify-cms" /** * Any imported styles will automatically be applied to the editor preview @@ -81,16 +81,16 @@ import CMS from 'netlify-cms' * All of the example imports below would result in styles being applied to the * preview pane. */ -import 'module-that-imports-styles.js' -import 'styles.scss' -import '../other-styles.css' +import "module-that-imports-styles.js" +import "styles.scss" +import "../other-styles.css" /** * Let's say you've created widget and preview components for a custom image * gallery widget in separate files: */ -import ImageGalleryWidget from './image-gallery-widget.js' -import ImageGalleryPreview from './image-gallery-preview.js' +import ImageGalleryWidget from "./image-gallery-widget.js" +import ImageGalleryPreview from "./image-gallery-preview.js" /** * Register the imported widget: @@ -118,7 +118,7 @@ plugins: [ The js module might look like this: ```javascript -import CMS, { init } from 'netlify-cms' +import CMS, { init } from "netlify-cms" /** * Optionally pass in a config object. This object will be merged into `config.yml` if it exists @@ -127,7 +127,7 @@ import CMS, { init } from 'netlify-cms' init({ config: { backend: { - name: 'git-gateway', + name: "git-gateway", }, }, }) diff --git a/packages/gatsby-plugin-page-creator/README.md b/packages/gatsby-plugin-page-creator/README.md index 407fb075bc0b1..25214ff2d5a9e 100644 --- a/packages/gatsby-plugin-page-creator/README.md +++ b/packages/gatsby-plugin-page-creator/README.md @@ -3,7 +3,7 @@ Gatsby plugin that automatically creates pages from React components in specified directories. Gatsby includes this plugin automatically in all sites for creating pages from components in `src/pages`. -With this plugin, *any* file that lives in the `src/pages` folder (or subfolders) will be expected to export a React Component to generate a Page. The following files are automatically excluded: +With this plugin, _any_ file that lives in the `src/pages` folder (or subfolders) will be expected to export a React Component to generate a Page. The following files are automatically excluded: - `template-*` - `__tests__/*` diff --git a/packages/gatsby-plugin-remove-trailing-slashes/README.md b/packages/gatsby-plugin-remove-trailing-slashes/README.md index 569d30f7f137f..dcdf024bb71cf 100644 --- a/packages/gatsby-plugin-remove-trailing-slashes/README.md +++ b/packages/gatsby-plugin-remove-trailing-slashes/README.md @@ -4,6 +4,7 @@ This plugin removes trailing slashes from your project's paths. For example, `yoursite.com/about/` becomes `yoursite.com/about`. ## Important considerations + This plugin is intended to remove trailing slashes from paths generated by Gatsby itself. This however does not prevent the resolution of pages that have trailing slashes, due to the way browsers are built to interpret URLs as paths. @@ -17,6 +18,7 @@ This is an important factor when relying on path driven logic, such as in the us For example, if the current route is `/about`, the component `` wouldn't match because of the slash. #### Netlify Trailing Slashes + [Netlify](https://www.netlify.com) users should also take into account that that the service will match paths to redirect rules regardless of whether or not they contain a trailing slash, potentially causing infinite redirect loops and unexpected behaviours. This can be negated through the use of their Pretty URL feature, which rewrites URLs to pretty URLs. @@ -24,7 +26,6 @@ This can be negated through the use of their Pretty URL feature, which rewrites Please see the Netlify docs for more information: [https://www.netlify.com/docs/redirects/#trailing-slash](https://www.netlify.com/docs/redirects/#trailing-slash) - ## Usage Install: diff --git a/packages/gatsby-transformer-javascript-frontmatter/README.md b/packages/gatsby-transformer-javascript-frontmatter/README.md index 85cd6be85bede..cbcd0ea4e2be3 100644 --- a/packages/gatsby-transformer-javascript-frontmatter/README.md +++ b/packages/gatsby-transformer-javascript-frontmatter/README.md @@ -18,11 +18,11 @@ module.exports = { resolve: `gatsby-source-filesystem`, options: { name: `pages`, - path: `${__dirname}/src/pages/` - } + path: `${__dirname}/src/pages/`, + }, }, - 'gatsby-transformer-javascript-frontmatter' - ] + "gatsby-transformer-javascript-frontmatter", + ], } ``` diff --git a/packages/gatsby-transformer-pdf/README.md b/packages/gatsby-transformer-pdf/README.md index 541c82276231e..ca2d08f6d94d5 100644 --- a/packages/gatsby-transformer-pdf/README.md +++ b/packages/gatsby-transformer-pdf/README.md @@ -39,6 +39,7 @@ Then you'll be able to query the textual content of your pdfs files like: } } ``` + Which would return: ```javascript diff --git a/packages/gatsby-transformer-remark/README.md b/packages/gatsby-transformer-remark/README.md index 8be95e939140d..3faa7bc117e14 100644 --- a/packages/gatsby-transformer-remark/README.md +++ b/packages/gatsby-transformer-remark/README.md @@ -83,7 +83,7 @@ By default the tableOfContents is using the field `slug` to generate URLs. You c ### Excerpt length -By default, excerpts have a maximum length of 140 characters. You can change the default using the ```pruneLength``` argument. For example, if you need 500 characters, you can specify: +By default, excerpts have a maximum length of 140 characters. You can change the default using the `pruneLength` argument. For example, if you need 500 characters, you can specify: ```graphql {