Skip to content

Commit 339d817

Browse files
authored
fix: issues with async load) (#31)
1 parent ee96bcc commit 339d817

File tree

3 files changed

+164
-53
lines changed

3 files changed

+164
-53
lines changed

README.md

Lines changed: 73 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44
[![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)
55
[![codecov](https://codecov.io/gh/weirdpattern/gatsby-remark-embed-gist/branch/master/graph/badge.svg)](https://codecov.io/gh/weirdpattern/gatsby-remark-embed-gist)
66

7-
This plugin allows content authors to embed [Gist](https://gist.github.com/)
7+
This plugin allows content authors to embed [Gist](https://gist.github.com/)
88
snippets.
99

1010
## Getting started
1111

12-
To embed a Gist snippet in you markdown/remark content, simply add an inline code
12+
To embed a Gist snippet in you markdown/remark content, simply add an inline code
1313
block using the `gist:` protocol.
1414

1515
```md
@@ -23,16 +23,18 @@ block using the `gist:` protocol.
2323
`gist:[<username>/]<gist_id>?file=<gist_file>?highlights=<number|ranges>&lines=<number|ranges>`
2424
```
2525

26-
Where:
26+
Where:
27+
2728
- **username**, represents the github handler whose gist is to be accessed.
28-
Can be defaulted via configuration.
29-
- **gist_id**, is the id of the gist to be accessed.
30-
This is the hash value in the gist url, e.g. https://gist.github.com/<username\>/`ce54fdb1e5621b5966e146026995b974`).
31-
- **gist_file**, is the name of the file in the gist to be accessed.
29+
Can be defaulted via configuration.
30+
- **gist_id**, is the id of the gist to be accessed.
31+
This is the hash value in the gist url, e.g. https://gist.github.com/<username\>/`ce54fdb1e5621b5966e146026995b974`).
32+
- **gist_file**, is the name of the file in the gist to be accessed.
3233

3334
Highlights and lines can be defined using:
35+
3436
- A single number (e.g. `highlights=1`, `lines=1`)
35-
- A list of numbers (e.g. `highlights=1,4`, `lines=1,4`)
37+
- A list of numbers (e.g. `highlights=1,4`, `lines=1,4`)
3638
- A range of numbers (e.g. `highlights=1-4`, `lines=1-4`)
3739
- A combination of all above (e.g. `highlights=1,3,7-9`, `lines=1,3,7-9`)
3840

@@ -54,11 +56,25 @@ Highlights and lines can be defined using:
5456
// Optional:
5557

5658
// the github handler whose gists are to be accessed
57-
username: 'weirdpattern',
59+
username: "<string>",
60+
61+
// a flag indicating whether the github default gist css should be included or not
62+
// default: true
63+
// DEPRECATED (PLEASE USE gistDefaultCssInclude)
64+
includeDefaultCss: true || false,
5865

5966
// a flag indicating whether the github default gist css should be included or not
6067
// default: true
61-
includeDefaultCss: true
68+
gistDefaultCssInclude: true || false,
69+
70+
// a flag indicating whether the github default gist css should be preloaded or not
71+
// use this if you want to load the default css asynchronously.
72+
// default: false
73+
gistCssPreload: true || false,
74+
75+
// a string that represents the github default gist css url.
76+
// defaults: "https://github.githubassets.com/assets/gist-embed-b3b573358bfc66d89e1e95dbf8319c09.css"
77+
gistCssUrlAddress: "<string>"
6278
}
6379
}
6480
]
@@ -68,45 +84,68 @@ Highlights and lines can be defined using:
6884

6985
## Example
7086

71-
Turns this...
87+
Turns this...
88+
7289
```md
7390
`gist:weirdpattern/ce54fdb1e5621b5966e146026995b974#syntax.text`
7491
```
7592

76-
Into this...
93+
Into this...
94+
7795
```html
7896
<div id="gist90436059" class="gist">
79-
<div class="gist-file">
80-
<div class="gist-data">
81-
<div class="js-gist-file-update-container js-task-list-container file-box">
82-
<div id="file-syntax-text" class="file">
83-
<div itemprop="text" class="blob-wrapper data type-text">
84-
<table class="highlight tab-size js-file-line-container" data-tab-size="8">
85-
<tbody>
86-
<tr>
87-
<td id="file-syntax-text-L1" class="blob-num js-line-number" data-line-number="1"></td>
88-
<td id="file-syntax-text-LC1" class="blob-code blob-code-inner js-file-line">&lt;operation&gt; [n]&gt; /dev/null [options]</td>
89-
</tr>
90-
</tbody>
91-
</table>
92-
</div>
97+
<div class="gist-file">
98+
<div class="gist-data">
99+
<div
100+
class="js-gist-file-update-container js-task-list-container file-box"
101+
>
102+
<div id="file-syntax-text" class="file">
103+
<div itemprop="text" class="blob-wrapper data type-text">
104+
<table
105+
class="highlight tab-size js-file-line-container"
106+
data-tab-size="8"
107+
>
108+
<tbody>
109+
<tr>
110+
<td
111+
id="file-syntax-text-L1"
112+
class="blob-num js-line-number"
113+
data-line-number="1"
114+
></td>
115+
<td
116+
id="file-syntax-text-LC1"
117+
class="blob-code blob-code-inner js-file-line"
118+
>
119+
&lt;operation&gt; [n]&gt; /dev/null [options]
120+
</td>
121+
</tr>
122+
</tbody>
123+
</table>
93124
</div>
94125
</div>
95126
</div>
96-
<div class="gist-meta">
97-
<a href="https://gist.github.com/weirdpattern/ce54fdb1e5621b5966e146026995b974/raw/30a0ad953a8d79c8bcbdd76343d86a9e4bbda311/syntax.text" style="float:right">view raw</a>
98-
<a href="https://gist.github.com/weirdpattern/ce54fdb1e5621b5966e146026995b974#file-syntax-text">syntax.text</a>
99-
hosted with ❤ by <a href="https://github.com">GitHub</a>
100-
</div>
101127
</div>
128+
<div class="gist-meta">
129+
<a
130+
href="https://gist.github.com/weirdpattern/ce54fdb1e5621b5966e146026995b974/raw/30a0ad953a8d79c8bcbdd76343d86a9e4bbda311/syntax.text"
131+
style="float:right"
132+
>view raw</a
133+
>
134+
<a
135+
href="https://gist.github.com/weirdpattern/ce54fdb1e5621b5966e146026995b974#file-syntax-text"
136+
>syntax.text</a
137+
>
138+
hosted with ❤ by <a href="https://github.com">GitHub</a>
139+
</div>
140+
</div>
102141
</div>
103142
```
104143

105144
## Notes
106145

107-
The order of the plugins only matters when used in conjunction with
108-
`gatsby-remark-prismjs`, because this plugin transforms the inline code blocks,
109-
so add `gatsby-remark-embed-gist` somewhere above this plugin.
146+
The order of the plugins only matters when used in conjunction with
147+
`gatsby-remark-prismjs`, because this plugin transforms the inline code blocks,
148+
so add `gatsby-remark-embed-gist` somewhere above this plugin.
110149

111150
## License
112151

specs/gatsby-ssr.specs.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,61 @@ describe("gatsby-ssr", () => {
1212
expect(setHeadComponents).toHaveBeenCalledTimes(1);
1313
});
1414

15+
it("executes when gistDefaultCssInclude is default", () => {
16+
onRenderBody({ setHeadComponents });
17+
expect(setHeadComponents).toHaveBeenCalledTimes(1);
18+
});
19+
1520
it("executes when includeDefaultCss is true", () => {
1621
onRenderBody({ setHeadComponents }, { includeDefaultCss: true });
1722
expect(setHeadComponents).toHaveBeenCalledTimes(1);
1823
});
1924

25+
it("executes when gistDefaultCssInclude is true", () => {
26+
onRenderBody({ setHeadComponents }, { gistDefaultCssInclude: true });
27+
expect(setHeadComponents).toHaveBeenCalledTimes(1);
28+
});
29+
2030
it("doesn't execute when includeDefaultCss is false", () => {
2131
onRenderBody({ setHeadComponents }, { includeDefaultCss: false });
2232
expect(setHeadComponents).toHaveBeenCalledTimes(0);
2333
});
34+
35+
it("doesn't execute when gistDefaultCssInclude is false", () => {
36+
onRenderBody({ setHeadComponents }, { gistDefaultCssInclude: false });
37+
expect(setHeadComponents).toHaveBeenCalledTimes(0);
38+
});
39+
40+
it("executes when gistCssPreload is missing", () => {
41+
onRenderBody({ setHeadComponents });
42+
expect(setHeadComponents).toHaveBeenCalledTimes(1);
43+
});
44+
45+
it("executes when gistCssPreload is false", () => {
46+
onRenderBody({ setHeadComponents }, { gistCssPreload: false });
47+
expect(setHeadComponents).toHaveBeenCalledTimes(1);
48+
});
49+
50+
it("executes when gistCssPreload is true", () => {
51+
onRenderBody({ setHeadComponents }, { gistCssPreload: true });
52+
expect(setHeadComponents).toHaveBeenCalledTimes(1);
53+
expect(setHeadComponents.mock.calls[0][0].length).toBe(3);
54+
});
55+
56+
it("executes when gistCssPreload is true", () => {
57+
onRenderBody({ setHeadComponents }, { gistCssPreload: true });
58+
expect(setHeadComponents).toHaveBeenCalledTimes(1);
59+
expect(setHeadComponents.mock.calls[0][0].length).toBe(3);
60+
});
61+
62+
it("updates the url when one is provided", () => {
63+
onRenderBody(
64+
{ setHeadComponents },
65+
{ gistCssPreload: true, gistCssUrlAddress: "https://test" }
66+
);
67+
expect(setHeadComponents).toHaveBeenCalledTimes(1);
68+
69+
const value = setHeadComponents.mock.calls[0][0][0];
70+
expect(value.props.href === "https://test").toBeTruthy();
71+
});
2472
});

src/gatsby-ssr.js

Lines changed: 43 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,49 @@ import React from "react";
1212
* @param {PluginOptions} options the options of the plugin.
1313
* @returns {*} rendered body.
1414
*/
15-
export function onRenderBody({ setHeadComponents }, options = {}) {
16-
if (options.includeDefaultCss !== false) {
17-
return setHeadComponents([
18-
<link
19-
as="style"
20-
href="https://github.githubassets.com/assets/gist-embed-b3b573358bfc66d89e1e95dbf8319c09.css"
21-
key="gist-embeded-b3b573358bfc66d89e1e95dbf8319c09"
22-
onLoad="this.onload=null;this.rel='stylesheet'"
23-
rel="preload"
24-
/>,
25-
<noscript key="gist-embeded-noscript-b3b573358bfc66d89e1e95dbf8319c09">
26-
<link
27-
href="https://github.githubassets.com/assets/gist-embed-b3b573358bfc66d89e1e95dbf8319c09.css"
28-
key="gist-embeded-b3b573358bfc66d89e1e95dbf8319c09"
29-
rel="stylesheet"
30-
/>
31-
</noscript>
32-
]);
15+
export function onRenderBody(
16+
{ setHeadComponents },
17+
options = {
18+
gistCssPreload: false,
19+
gistCssUrlAddress:
20+
"https://github.githubassets.com/assets/gist-embed-b3b573358bfc66d89e1e95dbf8319c09.css"
3321
}
22+
) {
23+
let includeCss = true;
24+
if (options.gistDefaultCssInclude != null) {
25+
includeCss = options.gistDefaultCssInclude;
26+
} else if (options.includeDefaultCss != null) {
27+
includeCss = options.includeDefaultCss;
28+
}
29+
30+
const key = "gist-embed-b3b573358bfc66d89e1e95dbf8319c09";
3431

35-
return null;
32+
if (includeCss) {
33+
setHeadComponents(
34+
options.gistCssPreload
35+
? [
36+
<link
37+
id={key}
38+
as="style"
39+
href={options.gistCssUrlAddress}
40+
key={key}
41+
rel="preload"
42+
/>,
43+
<noscript key={"noscript-" + key}>
44+
<link href={options.gistCssUrlAddress} rel="stylesheet" />
45+
</noscript>,
46+
<script
47+
dangerouslySetInnerHTML={{
48+
__html: `
49+
var link = document.querySelector("#${key}");
50+
link.addEventListener("load", function() {
51+
this.rel = "stylesheet"
52+
});
53+
`
54+
}}
55+
></script>
56+
]
57+
: [<link href={options.gistCssUrlAddress} rel="stylesheet" />]
58+
);
59+
}
3660
}

0 commit comments

Comments
 (0)