Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

Update snapshots and packages and format w/ new Prettier #3902

Merged
merged 2 commits into from
Feb 7, 2018
Merged

Update snapshots and packages and format w/ new Prettier #3902

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
42c8fd4
Update snapshots and packages and format w/ new Prettier
KyleAMathews Feb 7, 2018
e1cc50c
Update snapshot in embed package
KyleAMathews Feb 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 19 additions & 21 deletions docs/blog/2017-12-07-taking-gatsby-for-a-spin/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,27 +52,25 @@ Data from anywhere with static output. That's sort of the holy grail isn't it? R

```es6
export const query = graphql`
query BlogPostQuery($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
fields {
slug
}
frontmatter {
title
date(formatString: "DD MMMM, YYYY")
cover {
childImageSharp {
resolutions(
width: 1200,
) {
src
}
}
}
}
}
}
query BlogPostQuery($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
fields {
slug
}
frontmatter {
title
date(formatString: "DD MMMM, YYYY")
cover {
childImageSharp {
resolutions(width: 1200) {
src
}
}
}
}
}
}
`;
```

Expand Down
7 changes: 2 additions & 5 deletions docs/blog/2018-2-3-sites-with-headless-cms/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ Most traditional CMSs can't run on [edge servers](https://www.cloudflare.com/lea

When content exists in a tight relationship with the presentation layer, adapting that content for new formats like smart watches, kiosks, and virtual reality can be challenging and expensive.


## What is a headless CMS?

> "A headless CMS does nothing but manage content. It doesn’t deliver content to humans at all. Rather, it
Expand All @@ -31,7 +30,7 @@ When content exists in a tight relationship with the presentation layer, adaptin

To add to Deane Barker's eloquent explanation in the quote above (see his article [here](https://gadgetopia.com/post/9743)), a headless CMS only handles two things--content and managing that content through admin screens. This means that a separate presentation layer (or “head”) like GatsbyJS must reformat the content for delivery to a CDN and then final delivery to humans.

*Note on how CMSs usually work:* Most headless CMSs require you to create various structures for your content, typically called "content models", and then enter content into that structure. Content can include words, images, URLs, lists, etc. Then, outside of the CMS, you push this content through a presentation layer (GraphQL queries are one way to do this pushing).
_Note on how CMSs usually work:_ Most headless CMSs require you to create various structures for your content, typically called "content models", and then enter content into that structure. Content can include words, images, URLs, lists, etc. Then, outside of the CMS, you push this content through a presentation layer (GraphQL queries are one way to do this pushing).

Following are some advantages to using a headless CMS.

Expand All @@ -49,7 +48,7 @@ The separation between a headless CMS and the presentation layer allows both to

![The Jetson’s microwave shoots food at them and makes it so easy to eat!](the-jetsons.jpeg)

When businesses specialize in one thing instead of several, they tend to become more time-efficient and can produce things at a lower cost. In human terms, this means that headless CMSs tend to cost you less than traditional CMSs, because they cost less up front or they take you less time to maintain.
When businesses specialize in one thing instead of several, they tend to become more time-efficient and can produce things at a lower cost. In human terms, this means that headless CMSs tend to cost you less than traditional CMSs, because they cost less up front or they take you less time to maintain.

This specialization also means that headless CMSs perform well in scenarios in which a traditional CMS would prove inadequate. I’d like to point to Deane Barker’s [excellent article on use cases for headless CMSs](https://gadgetopia.com/post/9743), from which we've extracted a partial list:

Expand All @@ -61,7 +60,6 @@ This specialization also means that headless CMSs perform well in scenarios in w

In all of these cases, a headless CMS is an excellent solution for you.


## Which headless CMS should I choose?

Whether or not you’re convinced that a headless CMS is a good idea, the next step would be to try some out for yourself. I found this handy site with a [list of headless CMSs to keep an eye on](https://headlesscms.org/about/).
Expand All @@ -88,7 +86,6 @@ I already built this site http://watson.surge.sh/ with Contentful and talk about

This system gives you lots of options when it comes to creating content. Maybe too many options. For example, the free trial account comes preloaded with a sample project. When I clicked on a sample book description, there was a list of about 12 hyperlinks and because of the sheer number of choices, and the fact that I'm unfamiliar with their terminology, I felt overwhelmed. Otherwise, this system has pixelated graphics and a workflow that was hard to navigate as an editor of content; it felt more like a series of rabbit holes instead of a flow. On the upside, some of the capabilities seem really useful, like a button that said "make it multilingual." Could it be that easy?


## Conclusion

I’d definitely choose a headless CMS over a traditional CMS if I had talented front-end developers, because they could choose their favorite framework for the presentation layer. That setup would give us the flexibility to switch delivery methods, presentation methods, and content management methods with agility.
58 changes: 28 additions & 30 deletions docs/docs/adding-images-fonts-files.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,50 +61,48 @@ Examples:

* Copy all `.pdf` files you have in your data layer to your build directory and return URLs to them:

```graphql
{
allFile(filter: { extension: { eq: "pdf" } }) {
edges {
node {
publicURL
}
```graphql
{
allFile(filter: { extension: { eq: "pdf" } }) {
edges {
node {
publicURL
}
}
}
```
}
```

* Copy post attachments defined in your Markdown files:

Link to your attachments in the markdown frontmatter:

```markdown
---

title: "Title of article"
attachments:
```

- "./assets.zip"
- ## "./presentation.pdf"
```markdown
---
title: "Title of article"
attachments:
- "./assets.zip"
- "./presentation.pdf"
---

Hi, this is a great article.
Hi, this is a great article.
```

````
In the article template component file, you can query for the attachments:
In the article template component file, you can query for the attachments:

```graphql
query TemplateBlogPost($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
frontmatter {
title
attachments {
publicURL
}
```graphql
query TemplateBlogPost($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
frontmatter {
title
attachments {
publicURL
}
}
}
```
}
```

## Using the `static` Folder

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-eslint": "^7.2.3",
"babel-eslint": "^8.2.1",
"babel-jest": "^20.0.3",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-lodash": "^3.2.11",
Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-remark-embed-snippet/src/__tests__/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1066,11 +1066,11 @@ Object {
},
"type": "html",
"value": "<div class=\\"gatsby-highlight\\">
<pre class=\\"language-bash\\"><code><span class=\\"token comment\\" spellcheck=\\"true\\"># Yarn</span>
<pre class=\\"language-bash\\"><code><span class=\\"token comment\\"># Yarn</span>
yarn init
<span class=\\"gatsby-highlight-code-line\\">yarn add react react-dom
</span>
<span class=\\"token comment\\" spellcheck=\\"true\\"># NPM</span>
<span class=\\"token comment\\"># NPM</span>
<span class=\\"token function\\">npm</span> init
<span class=\\"gatsby-highlight-code-line\\"><span class=\\"token function\\">npm</span> <span class=\\"token function\\">install</span> --save react react-dom
</span></code></pre>
Expand Down
14 changes: 7 additions & 7 deletions packages/gatsby-remark-images/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,13 @@ plugins: [

## Options

| Name | Default | Description |
|------|---------|-------------|
| `maxWidth` | `650` | The `maxWidth` in pixels of the div where the markdown will be displayed. This value is used when deciding what the width of the various responsive thumbnails should be. |
| `linkImagesToOriginal` | `true` | Add a link to each image to the original image. Sometimes people want to see a full-sized version of an image e.g. to see extra detail on a part of the image and this is a convenient and common pattern for enabling this. Set this option to false to disable this behavior. |
| `sizeByPixelDensity` | `false` | Analyze images' pixel density to make decisions about target image size. This is what GitHub is doing when embedding images in tickets. This is a useful setting for documentation pages with a lot of screenshots. It can have unintended side effects on high pixel density artworks.<br/><br/>Example: A screenshot made on a retina screen with a resolution of 144 (e.g. Macbook) and a width of 100px, will be rendered at 50px.|
| `wrapperStyle` | | Add custom styles to the div wrapping the responsive images. Use the syntax for the style attribute e.g. `margin-bottom:10px; background: red;` |
| `backgroundColor` | `white` | Set the background color of the image to match the background image of your design |
| Name | Default | Description |
| ---------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `maxWidth` | `650` | The `maxWidth` in pixels of the div where the markdown will be displayed. This value is used when deciding what the width of the various responsive thumbnails should be. |
| `linkImagesToOriginal` | `true` | Add a link to each image to the original image. Sometimes people want to see a full-sized version of an image e.g. to see extra detail on a part of the image and this is a convenient and common pattern for enabling this. Set this option to false to disable this behavior. |
| `sizeByPixelDensity` | `false` | Analyze images' pixel density to make decisions about target image size. This is what GitHub is doing when embedding images in tickets. This is a useful setting for documentation pages with a lot of screenshots. It can have unintended side effects on high pixel density artworks.<br/><br/>Example: A screenshot made on a retina screen with a resolution of 144 (e.g. Macbook) and a width of 100px, will be rendered at 50px. |
| `wrapperStyle` | | Add custom styles to the div wrapping the responsive images. Use the syntax for the style attribute e.g. `margin-bottom:10px; background: red;` |
| `backgroundColor` | `white` | Set the background color of the image to match the background image of your design |

[1]: https://jmperezperez.com/medium-image-progressive-loading-placeholder/
[2]: https://code.facebook.com/posts/991252547593574/the-technology-behind-preview-photos/
8 changes: 4 additions & 4 deletions packages/gatsby-remark-prismjs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@
"author": "Kyle Mathews <mathews.kyle@gmail.com>",
"dependencies": {
"babel-runtime": "^6.26.0",
"parse-numeric-range": "^0.0.2",
"prismjs": "^1.7.0",
"unist-util-visit": "^1.1.1"
"parse-numeric-range": "0.0.2",
"prismjs": "^1.11.0",
"unist-util-visit": "^1.3.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"cross-env": "^5.0.5",
"cross-env": "^5.1.3",
"remark": "^7.0.1"
},
"keywords": [
Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/highlight-code.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@ exports[`highlight code and lines with PrismJS for language jsx 1`] = `
<span class=\\"gatsby-highlight-code-line\\"> <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>div</span><span class=\\"token punctuation\\">></span></span>
</span><span class=\\"gatsby-highlight-code-line\\"> <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>h1</span><span class=\\"token punctuation\\">></span></span>Counter<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>h1</span><span class=\\"token punctuation\\">></span></span>
</span> <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>p</span><span class=\\"token punctuation\\">></span></span>current count<span class=\\"token punctuation\\">:</span> <span class=\\"token punctuation\\">{</span><span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>state<span class=\\"token punctuation\\">.</span>count<span class=\\"token punctuation\\">}</span><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>p</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"gatsby-highlight-code-line\\"> <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>button</span> <span class=\\"token attr-name\\">onClick</span><span class=\\"token script language-javascript\\"><span class=\\"token punctuation\\">=</span><span class=\\"token punctuation\\">{</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span> <span class=\\"token operator\\">=></span> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span><span class=\\"token function\\">setState</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">{</span> count<span class=\\"token punctuation\\">:</span> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>state<span class=\\"token punctuation\\">.</span>count <span class=\\"token operator\\">+</span> <span class=\\"token number\\">1</span> <span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">}</span></span><span class=\\"token punctuation\\">></span></span>
<span class=\\"gatsby-highlight-code-line\\"> <span class=\\"token operator\\">&lt;</span>button onClick<span class=\\"token operator\\">=</span><span class=\\"token punctuation\\">{</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span> <span class=\\"token operator\\">=></span> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span><span class=\\"token function\\">setState</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">{</span> count<span class=\\"token punctuation\\">:</span> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>state<span class=\\"token punctuation\\">.</span>count <span class=\\"token operator\\">+</span> <span class=\\"token number\\">1</span> <span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">}</span><span class=\\"token operator\\">></span>
</span> plus
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>button</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>button</span> <span class=\\"token attr-name\\">onClick</span><span class=\\"token script language-javascript\\"><span class=\\"token punctuation\\">=</span><span class=\\"token punctuation\\">{</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span> <span class=\\"token operator\\">=></span> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span><span class=\\"token function\\">setState</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">{</span> count<span class=\\"token punctuation\\">:</span> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>state<span class=\\"token punctuation\\">.</span>count <span class=\\"token operator\\">-</span> <span class=\\"token number\\">1</span> <span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">}</span></span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token operator\\">&lt;</span>button onClick<span class=\\"token operator\\">=</span><span class=\\"token punctuation\\">{</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span> <span class=\\"token operator\\">=></span> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span><span class=\\"token function\\">setState</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">{</span> count<span class=\\"token punctuation\\">:</span> <span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>state<span class=\\"token punctuation\\">.</span>count <span class=\\"token operator\\">-</span> <span class=\\"token number\\">1</span> <span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">}</span><span class=\\"token operator\\">></span>
minus
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>button</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>div</span><span class=\\"token punctuation\\">></span></span>
Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Object {
},
"type": "html",
"value": "<div class=\\"gatsby-highlight\\">
<pre class=\\"custom-js\\"><code><span class=\\"token comment\\" spellcheck=\\"true\\">// Fake</span>
<pre class=\\"custom-js\\"><code><span class=\\"token comment\\">// Fake</span>
</code></pre>
</div>",
},
Expand Down Expand Up @@ -67,7 +67,7 @@ Object {
},
"type": "html",
"value": "<div class=\\"gatsby-highlight\\">
<pre class=\\"language-js\\"><code><span class=\\"token comment\\" spellcheck=\\"true\\">// Fake</span>
<pre class=\\"language-js\\"><code><span class=\\"token comment\\">// Fake</span>
</code></pre>
</div>",
},
Expand Down
Loading