From 339d81706545e582f19fb80328691b85cbab08b4 Mon Sep 17 00:00:00 2001 From: Patricio Trevino Date: Sun, 28 Jun 2020 00:49:24 -0500 Subject: [PATCH] fix: issues with async load) (#31) --- README.md | 107 ++++++++++++++++++++++++++------------ specs/gatsby-ssr.specs.js | 48 +++++++++++++++++ src/gatsby-ssr.js | 62 +++++++++++++++------- 3 files changed, 164 insertions(+), 53 deletions(-) diff --git a/README.md b/README.md index 899449c..3e10242 100644 --- 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:[/]?file=?highlights=&lines=` ``` -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//`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//`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: "", + + // 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: "" } } ] @@ -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
-
-
-
-
-
- - - - - - - -
<operation> [n]> /dev/null [options]
-
+
+
+
+
+
+ + + + + + + +
+ <operation> [n]> /dev/null [options] +
-
- view raw - syntax.text - hosted with ❤ by GitHub -
+
+ view raw + syntax.text + hosted with ❤ by GitHub +
+
``` ## 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 index 0828fb8..41bcee9 100644 --- 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 index 4f519a3..da46d4d 100644 --- 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([ - , - - ]); +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 + ? [ + , + , + + ] + : [] + ); + } }