fix: issues with async load) (#31)

weirdpattern · Jun 28, 2020 · 339d817 · 339d817
1 parent ee96bcc
commit 339d817
Show file tree

Hide file tree

Showing 3 changed files with 164 additions and 53 deletions.
diff --git a/README.md b/README.md
@@ -4,12 +4,12 @@
 [![Travis badge](https://img.shields.io/travis/weirdpattern/gatsby-remark-embed-gist.svg?branch=master&style=flat-square)](https://travis-ci.org/weirdpattern/gatsby-remark-embed-gist)
 [![codecov](https://codecov.io/gh/weirdpattern/gatsby-remark-embed-gist/branch/master/graph/badge.svg)](https://codecov.io/gh/weirdpattern/gatsby-remark-embed-gist)
 
-This plugin allows content authors to embed [Gist](https://gist.github.com/) 
+This plugin allows content authors to embed [Gist](https://gist.github.com/)
 snippets.
 
 ## Getting started
 
-To embed a Gist snippet in you markdown/remark content, simply add an inline code 
+To embed a Gist snippet in you markdown/remark content, simply add an inline code
 block using the `gist:` protocol.
 
 ```md
@@ -23,16 +23,18 @@ block using the `gist:` protocol.
 `gist:[<username>/]<gist_id>?file=<gist_file>?highlights=<number|ranges>&lines=<number|ranges>`
 ```
 
-Where: 
+Where:
+
 - **username**, represents the github handler whose gist is to be accessed. 
-Can be defaulted via configuration.
-- **gist_id**, is the id of the gist to be accessed.  
-This is the hash value in the gist url, e.g. https://gist.github.com/<username\>/`ce54fdb1e5621b5966e146026995b974`).
-- **gist_file**, is the name of the file in the gist to be accessed. 
+ Can be defaulted via configuration.
+- **gist_id**, is the id of the gist to be accessed. 
+ This is the hash value in the gist url, e.g. https://gist.github.com/<username\>/`ce54fdb1e5621b5966e146026995b974`).
+- **gist_file**, is the name of the file in the gist to be accessed.
 
 Highlights and lines can be defined using:
+
 - A single number (e.g. `highlights=1`, `lines=1`)
-- A list of numbers (e.g. `highlights=1,4`, `lines=1,4`) 
+- A list of numbers (e.g. `highlights=1,4`, `lines=1,4`)
 - A range of numbers (e.g. `highlights=1-4`, `lines=1-4`)
 - A combination of all above (e.g. `highlights=1,3,7-9`, `lines=1,3,7-9`)
 
@@ -54,11 +56,25 @@ Highlights and lines can be defined using:
  // Optional:
 
  // the github handler whose gists are to be accessed
- username: 'weirdpattern',
+ username: "<string>",
+
+ // a flag indicating whether the github default gist css should be included or not
+ // default: true
+ // DEPRECATED (PLEASE USE gistDefaultCssInclude)
+ includeDefaultCss: true || false,
 
  // a flag indicating whether the github default gist css should be included or not
  // default: true
- includeDefaultCss: true
+ gistDefaultCssInclude: true || false,
+
+ // a flag indicating whether the github default gist css should be preloaded or not
+ // use this if you want to load the default css asynchronously.
+ // default: false
+ gistCssPreload: true || false,
+
+ // a string that represents the github default gist css url.
+ // defaults: "https://github.githubassets.com/assets/gist-embed-b3b573358bfc66d89e1e95dbf8319c09.css"
+ gistCssUrlAddress: "<string>"
  }
  }
  ]
@@ -68,45 +84,68 @@ Highlights and lines can be defined using:
 
 ## Example
 
-Turns this... 
+Turns this...
+
 ```md
 `gist:weirdpattern/ce54fdb1e5621b5966e146026995b974#syntax.text`
 ```
 
-Into this... 
+Into this...
+
 ```html
 <div id="gist90436059" class="gist">
- <div class="gist-file">
- <div class="gist-data">
- <div class="js-gist-file-update-container js-task-list-container file-box">
- <div id="file-syntax-text" class="file">
- <div itemprop="text" class="blob-wrapper data type-text">
- <table class="highlight tab-size js-file-line-container" data-tab-size="8">
- <tbody>
- <tr>
- <td id="file-syntax-text-L1" class="blob-num js-line-number" data-line-number="1"></td>
- <td id="file-syntax-text-LC1" class="blob-code blob-code-inner js-file-line">&lt;operation&gt; [n]&gt; /dev/null [options]</td>
- </tr>
- </tbody>
- </table>
- </div>
+ <div class="gist-file">
+ <div class="gist-data">
+ <div
+ class="js-gist-file-update-container js-task-list-container file-box"
+ >
+ <div id="file-syntax-text" class="file">
+ <div itemprop="text" class="blob-wrapper data type-text">
+ <table
+ class="highlight tab-size js-file-line-container"
+ data-tab-size="8"
+ >
+ <tbody>
+ <tr>
+ <td
+ id="file-syntax-text-L1"
+ class="blob-num js-line-number"
+ data-line-number="1"
+ ></td>
+ <td
+ id="file-syntax-text-LC1"
+ class="blob-code blob-code-inner js-file-line"
+ >
+ &lt;operation&gt; [n]&gt; /dev/null [options]
+ </td>
+ </tr>
+ </tbody>
+ </table>
  </div>
  </div>
  </div>
- <div class="gist-meta">
- <a href="https://gist.github.com/weirdpattern/ce54fdb1e5621b5966e146026995b974/raw/30a0ad953a8d79c8bcbdd76343d86a9e4bbda311/syntax.text" style="float:right">view raw</a>
- <a href="https://gist.github.com/weirdpattern/ce54fdb1e5621b5966e146026995b974#file-syntax-text">syntax.text</a>
- hosted with ❤ by <a href="https://github.com">GitHub</a>
- </div>
  </div>
+ <div class="gist-meta">
+ <a
+ href="https://gist.github.com/weirdpattern/ce54fdb1e5621b5966e146026995b974/raw/30a0ad953a8d79c8bcbdd76343d86a9e4bbda311/syntax.text"
+ style="float:right"
+ >view raw</a
+ >
+ <a
+ href="https://gist.github.com/weirdpattern/ce54fdb1e5621b5966e146026995b974#file-syntax-text"
+ >syntax.text</a
+ >
+ hosted with ❤ by <a href="https://github.com">GitHub</a>
+ </div>
+ </div>
 </div>
 ```
 
 ## Notes
 
-The order of the plugins only matters when used in conjunction with 
-`gatsby-remark-prismjs`, because this plugin transforms the inline code blocks, 
-so add `gatsby-remark-embed-gist` somewhere above this plugin. 
+The order of the plugins only matters when used in conjunction with
+`gatsby-remark-prismjs`, because this plugin transforms the inline code blocks,
+so add `gatsby-remark-embed-gist` somewhere above this plugin.
 
 ## License
 

diff --git a/specs/gatsby-ssr.specs.js b/specs/gatsby-ssr.specs.js
@@ -12,13 +12,61 @@ describe("gatsby-ssr", () => {
  expect(setHeadComponents).toHaveBeenCalledTimes(1);
  });
 
+ it("executes when gistDefaultCssInclude is default", () => {
+ onRenderBody({ setHeadComponents });
+ expect(setHeadComponents).toHaveBeenCalledTimes(1);
+ });
+
  it("executes when includeDefaultCss is true", () => {
  onRenderBody({ setHeadComponents }, { includeDefaultCss: true });
  expect(setHeadComponents).toHaveBeenCalledTimes(1);
  });
 
+ it("executes when gistDefaultCssInclude is true", () => {
+ onRenderBody({ setHeadComponents }, { gistDefaultCssInclude: true });
+ expect(setHeadComponents).toHaveBeenCalledTimes(1);
+ });
+
  it("doesn't execute when includeDefaultCss is false", () => {
  onRenderBody({ setHeadComponents }, { includeDefaultCss: false });
  expect(setHeadComponents).toHaveBeenCalledTimes(0);
  });
+
+ it("doesn't execute when gistDefaultCssInclude is false", () => {
+ onRenderBody({ setHeadComponents }, { gistDefaultCssInclude: false });
+ expect(setHeadComponents).toHaveBeenCalledTimes(0);
+ });
+
+ it("executes when gistCssPreload is missing", () => {
+ onRenderBody({ setHeadComponents });
+ expect(setHeadComponents).toHaveBeenCalledTimes(1);
+ });
+
+ it("executes when gistCssPreload is false", () => {
+ onRenderBody({ setHeadComponents }, { gistCssPreload: false });
+ expect(setHeadComponents).toHaveBeenCalledTimes(1);
+ });
+
+ it("executes when gistCssPreload is true", () => {
+ onRenderBody({ setHeadComponents }, { gistCssPreload: true });
+ expect(setHeadComponents).toHaveBeenCalledTimes(1);
+ expect(setHeadComponents.mock.calls[0][0].length).toBe(3);
+ });
+
+ it("executes when gistCssPreload is true", () => {
+ onRenderBody({ setHeadComponents }, { gistCssPreload: true });
+ expect(setHeadComponents).toHaveBeenCalledTimes(1);
+ expect(setHeadComponents.mock.calls[0][0].length).toBe(3);
+ });
+
+ it("updates the url when one is provided", () => {
+ onRenderBody(
+ { setHeadComponents },
+ { gistCssPreload: true, gistCssUrlAddress: "https://test" }
+ );
+ expect(setHeadComponents).toHaveBeenCalledTimes(1);
+
+ const value = setHeadComponents.mock.calls[0][0][0];
+ expect(value.props.href === "https://test").toBeTruthy();
+ });
 });
diff --git a/src/gatsby-ssr.js b/src/gatsby-ssr.js
@@ -12,25 +12,49 @@ import React from "react";
  * @param {PluginOptions} options the options of the plugin.
  * @returns {*} rendered body.
  */
-export function onRenderBody({ setHeadComponents }, options = {}) {
- if (options.includeDefaultCss !== false) {
- return setHeadComponents([
- <link
- as="style"
- href="https://github.githubassets.com/assets/gist-embed-b3b573358bfc66d89e1e95dbf8319c09.css"
- key="gist-embeded-b3b573358bfc66d89e1e95dbf8319c09"
- onLoad="this.onload=null;this.rel='stylesheet'"
- rel="preload"
- />,
- <noscript key="gist-embeded-noscript-b3b573358bfc66d89e1e95dbf8319c09">
- <link
- href="https://github.githubassets.com/assets/gist-embed-b3b573358bfc66d89e1e95dbf8319c09.css"
- key="gist-embeded-b3b573358bfc66d89e1e95dbf8319c09"
- rel="stylesheet"
- />
- </noscript>
- ]);
+export function onRenderBody(
+ { setHeadComponents },
+ options = {
+ gistCssPreload: false,
+ gistCssUrlAddress:
+ "https://github.githubassets.com/assets/gist-embed-b3b573358bfc66d89e1e95dbf8319c09.css"
  }
+) {
+ let includeCss = true;
+ if (options.gistDefaultCssInclude != null) {
+ includeCss = options.gistDefaultCssInclude;
+ } else if (options.includeDefaultCss != null) {
+ includeCss = options.includeDefaultCss;
+ }
+
+ const key = "gist-embed-b3b573358bfc66d89e1e95dbf8319c09";
 
- return null;
+ if (includeCss) {
+ setHeadComponents(
+ options.gistCssPreload
+ ? [
+ <link
+ id={key}
+ as="style"
+ href={options.gistCssUrlAddress}
+ key={key}
+ rel="preload"
+ />,
+ <noscript key={"noscript-" + key}>
+ <link href={options.gistCssUrlAddress} rel="stylesheet" />
+ </noscript>,
+ <script
+ dangerouslySetInnerHTML={{
+ __html: `
+ var link = document.querySelector("#${key}");
+ link.addEventListener("load", function() {
+ this.rel = "stylesheet"
+ });
+ `
+ }}
+ ></script>
+ ]
+ : [<link href={options.gistCssUrlAddress} rel="stylesheet" />]
+ );
+ }
 }