From 5f43325e11a0073c93c516cc689f851952c4c0a1 Mon Sep 17 00:00:00 2001 From: Michael H Date: Fri, 16 Mar 2018 22:04:59 -0700 Subject: [PATCH] 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