From 5f43325e11a0073c93c516cc689f851952c4c0a1 Mon Sep 17 00:00:00 2001 From: Michael H Date: Fri, 16 Mar 2018 22:04:59 -0700 Subject: [PATCH 1/4] Added crossorigin Attribute Documentation --- docs/docs/using-the-crossorigin-attribute.md | 70 ++++++++++++++++++++ www/src/pages/docs/doc-links.yaml | 2 + 2 files changed, 72 insertions(+) create mode 100644 docs/docs/using-the-crossorigin-attribute.md diff --git a/docs/docs/using-the-crossorigin-attribute.md b/docs/docs/using-the-crossorigin-attribute.md new file mode 100644 index 0000000000000..0f9c32b3644f0 --- /dev/null +++ b/docs/docs/using-the-crossorigin-attribute.md @@ -0,0 +1,70 @@ +--- +title: Using the crossorigin Attribute +--- + +Many times when we need to include html tags which require the `crossorigin` +attribute which will output to a standard html page's source but in GatsbyJS we +need to use `crossOrigin`. This is because GatsbyJS uses +[webpack - output.crossOriginLoading](https://webpack.js.org/configuration/output/#output-crossoriginloading). +For more information on `crossOrigin` in webpack take look at +[webpack - output.crossOriginLoading](https://webpack.js.org/configuration/output/#output-crossoriginloading) +and webpack PR [#5729](https://github.com/webpack/webpack/pull/5729). + +### Example Usage of crossOrigin +In these examples cases where `crossorigin` is required that we have used +`crossOrigin` instead so everything will function as expected when GatsbyJS +compiles our site. Note that the 'o' in 'origin' is now uppercase. + +### GatsbyJS's gatsby/www/src/html.js + +```html + + + + + + +``` + +### For Bootstrap's 4.0.0 CDNs + +```html + + + +``` + +### For jQuery and Popper.js + +```html + + + +``` diff --git a/www/src/pages/docs/doc-links.yaml b/www/src/pages/docs/doc-links.yaml index e984df870e0ea..c63e782f68390 100644 --- a/www/src/pages/docs/doc-links.yaml +++ b/www/src/pages/docs/doc-links.yaml @@ -68,6 +68,8 @@ link: /docs/glamor/ - title: Using CSS-in-JS Library Styled Components link: /docs/styled-components/ + - title: Using the crossorigin Attribute + link: /docs/using-the-crossorigin-attribute/ - title: Adding Markdown Pages link: /docs/adding-markdown-pages/ - title: Adding a List of Markdown Blog Posts From 376c981379df6d124b218b1a34a447d7f75f773c Mon Sep 17 00:00:00 2001 From: Michael H Date: Fri, 16 Mar 2018 22:15:26 -0700 Subject: [PATCH 2/4] Fixed Small Typo in crossOrigin on 64 and 68 --- docs/docs/using-the-crossorigin-attribute.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/docs/using-the-crossorigin-attribute.md b/docs/docs/using-the-crossorigin-attribute.md index 0f9c32b3644f0..53092fd51c5ae 100644 --- a/docs/docs/using-the-crossorigin-attribute.md +++ b/docs/docs/using-the-crossorigin-attribute.md @@ -61,10 +61,10 @@ compiles our site. Note that the 'o' in 'origin' is now uppercase. ``` From c1c2b4c1854a16a0ba1c408ea14e74223ab79357 Mon Sep 17 00:00:00 2001 From: Michael H Date: Fri, 16 Mar 2018 22:28:56 -0700 Subject: [PATCH 3/4] Removed when so the sentence makes sense --- docs/docs/using-the-crossorigin-attribute.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/using-the-crossorigin-attribute.md b/docs/docs/using-the-crossorigin-attribute.md index 53092fd51c5ae..b74bfcf4383d7 100644 --- a/docs/docs/using-the-crossorigin-attribute.md +++ b/docs/docs/using-the-crossorigin-attribute.md @@ -2,7 +2,7 @@ title: Using the crossorigin Attribute --- -Many times when we need to include html tags which require the `crossorigin` +Many times we need to include html tags which require the `crossorigin` attribute which will output to a standard html page's source but in GatsbyJS we need to use `crossOrigin`. This is because GatsbyJS uses [webpack - output.crossOriginLoading](https://webpack.js.org/configuration/output/#output-crossoriginloading). From cb6f7cecb8f9c91070dba48940685d862e9c7c31 Mon Sep 17 00:00:00 2001 From: Michael H Date: Fri, 16 Mar 2018 22:47:25 -0700 Subject: [PATCH 4/4] Give reason why crossorigin is used --- docs/docs/using-the-crossorigin-attribute.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/docs/using-the-crossorigin-attribute.md b/docs/docs/using-the-crossorigin-attribute.md index b74bfcf4383d7..630778b7864ef 100644 --- a/docs/docs/using-the-crossorigin-attribute.md +++ b/docs/docs/using-the-crossorigin-attribute.md @@ -4,7 +4,8 @@ title: Using the crossorigin Attribute Many times we need to include html tags which require the `crossorigin` attribute which will output to a standard html page's source but in GatsbyJS we -need to use `crossOrigin`. This is because GatsbyJS uses +need to use `crossOrigin`; otherwise, `crossorigin` will not output to our page's +source when GatsbyJS compiles. This is because GatsbyJS uses [webpack - output.crossOriginLoading](https://webpack.js.org/configuration/output/#output-crossoriginloading). For more information on `crossOrigin` in webpack take look at [webpack - output.crossOriginLoading](https://webpack.js.org/configuration/output/#output-crossoriginloading)