From 2a4c25469f9f459c7f33ae3f5e5f47743a766167 Mon Sep 17 00:00:00 2001 From: donocode Date: Thu, 16 Nov 2017 22:30:48 +0000 Subject: [PATCH 01/10] Replace gist links with embedded gist --- src/content.js | 2 ++ src/features/embed-gist-inline.js | 29 +++++++++++++++++++++++++++++ 2 files changed, 31 insertions(+) create mode 100644 src/features/embed-gist-inline.js diff --git a/src/content.js b/src/content.js index 758188f07b7d..4a65bccf9aed 100644 --- a/src/content.js +++ b/src/content.js @@ -50,6 +50,7 @@ import focusConfirmationButtons from './features/focus-confirmation-buttons'; import addKeyboardShortcutsToCommentFields from './features/add-keyboard-shortcuts-to-comment-fields'; import addConfirmationToCommentCancellation from './features/add-confirmation-to-comment-cancellation'; import addCILink from './features/add-ci-link'; +import embedGistInline from './features/embed-gist-inline'; import * as pageDetect from './libs/page-detect'; import {observeEl, safeElementReady, safely} from './libs/utils'; @@ -160,6 +161,7 @@ function ajaxedPagesHandler() { if (pageDetect.isPR() || pageDetect.isIssue()) { safely(linkifyIssuesInTitles); safely(addUploadBtn); + safely(embedGistInline); observeEl('.new-discussion-timeline', () => { safely(addOPLabels); diff --git a/src/features/embed-gist-inline.js b/src/features/embed-gist-inline.js new file mode 100644 index 000000000000..aee49c53b9b5 --- /dev/null +++ b/src/features/embed-gist-inline.js @@ -0,0 +1,29 @@ +import select from 'select-dom'; + +const gistRegex = /gist\.github\.com\/\w*?\/\w*/; +const isGist = link => gistRegex.test(link.href); + +const getJsonUrl = href => `${href}.json`.replace(/\.jso?n?\.json$/, '.json'); +const getGistData = href => fetch(getJsonUrl(href)).then(response => response.json()); + +const createGistElement = gistData => { + const el = document.createElement('div'); + const style = ``; + el.innerHTML = style + gistData.div; + return el; +}; + +export default async () => { + const gistLinks = select + .all('.js-comment-body p a[href^="https://gist.github.com"]:only-child') + .filter(isGist); + + gistLinks.forEach(async link => { + try { + const gistData = await getGistData(link.href); + const gistEl = createGistElement(gistData); + const linkParent = link.parentNode; + linkParent.parentNode.replaceChild(gistEl, linkParent); + } catch (e) {} + }); +}; From 8bc895001b59ce5640bd08db8ba90f2cd6a3d409 Mon Sep 17 00:00:00 2001 From: donocode Date: Fri, 17 Nov 2017 11:50:48 +0000 Subject: [PATCH 02/10] convert spaces to tabs --- src/features/embed-gist-inline.js | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/features/embed-gist-inline.js b/src/features/embed-gist-inline.js index aee49c53b9b5..456a14b57288 100644 --- a/src/features/embed-gist-inline.js +++ b/src/features/embed-gist-inline.js @@ -7,23 +7,23 @@ const getJsonUrl = href => `${href}.json`.replace(/\.jso?n?\.json$/, '.json'); const getGistData = href => fetch(getJsonUrl(href)).then(response => response.json()); const createGistElement = gistData => { - const el = document.createElement('div'); - const style = ``; - el.innerHTML = style + gistData.div; - return el; + const el = document.createElement('div'); + const style = ``; + el.innerHTML = style + gistData.div; + return el; }; export default async () => { - const gistLinks = select - .all('.js-comment-body p a[href^="https://gist.github.com"]:only-child') - .filter(isGist); + const gistLinks = select + .all('.js-comment-body p a[href^="https://gist.github.com"]:only-child') + .filter(isGist); - gistLinks.forEach(async link => { - try { - const gistData = await getGistData(link.href); - const gistEl = createGistElement(gistData); - const linkParent = link.parentNode; - linkParent.parentNode.replaceChild(gistEl, linkParent); - } catch (e) {} - }); + gistLinks.forEach(async link => { + try { + const gistData = await getGistData(link.href); + const gistEl = createGistElement(gistData); + const linkParent = link.parentNode; + linkParent.parentNode.replaceChild(gistEl, linkParent); + } catch (e) {} + }); }; From 869572b5dc92193157d0cffba90fcf8b7af3c6fe Mon Sep 17 00:00:00 2001 From: donocode Date: Fri, 17 Nov 2017 12:00:14 +0000 Subject: [PATCH 03/10] address simple review comments --- src/features/embed-gist-inline.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/features/embed-gist-inline.js b/src/features/embed-gist-inline.js index 456a14b57288..7106bccc2a52 100644 --- a/src/features/embed-gist-inline.js +++ b/src/features/embed-gist-inline.js @@ -8,7 +8,7 @@ const getGistData = href => fetch(getJsonUrl(href)).then(response => response.js const createGistElement = gistData => { const el = document.createElement('div'); - const style = ``; + const style = ``; el.innerHTML = style + gistData.div; return el; }; @@ -18,12 +18,12 @@ export default async () => { .all('.js-comment-body p a[href^="https://gist.github.com"]:only-child') .filter(isGist); - gistLinks.forEach(async link => { + for (let link of gistLinks) { try { const gistData = await getGistData(link.href); const gistEl = createGistElement(gistData); const linkParent = link.parentNode; linkParent.parentNode.replaceChild(gistEl, linkParent); - } catch (e) {} - }); + } catch (err) {} + } }; From 50f2249fa479811d85b5d4720c26ba2ee2ff8cba Mon Sep 17 00:00:00 2001 From: donocode Date: Mon, 20 Nov 2017 23:48:15 +0000 Subject: [PATCH 04/10] use JSX for gist element --- src/features/embed-gist-inline.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/features/embed-gist-inline.js b/src/features/embed-gist-inline.js index 7106bccc2a52..bf18028b2339 100644 --- a/src/features/embed-gist-inline.js +++ b/src/features/embed-gist-inline.js @@ -1,3 +1,4 @@ +import {h} from 'dom-chef'; import select from 'select-dom'; const gistRegex = /gist\.github\.com\/\w*?\/\w*/; @@ -7,9 +8,12 @@ const getJsonUrl = href => `${href}.json`.replace(/\.jso?n?\.json$/, '.json'); const getGistData = href => fetch(getJsonUrl(href)).then(response => response.json()); const createGistElement = gistData => { - const el = document.createElement('div'); - const style = ``; - el.innerHTML = style + gistData.div; + const el = ( +
+ +
+
+ ); return el; }; From 63afc629d1a51b4e9fd7a57e855fb5e36f260c57 Mon Sep 17 00:00:00 2001 From: Sindre Sorhus Date: Sun, 26 Nov 2017 12:36:59 +0100 Subject: [PATCH 05/10] Update embed-gist-inline.js --- src/features/embed-gist-inline.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/embed-gist-inline.js b/src/features/embed-gist-inline.js index bf18028b2339..8cfc64eef989 100644 --- a/src/features/embed-gist-inline.js +++ b/src/features/embed-gist-inline.js @@ -10,7 +10,7 @@ const getGistData = href => fetch(getJsonUrl(href)).then(response => response.js const createGistElement = gistData => { const el = (
- +
); From 5518228061dc6655f37682b826df67e0396fbf2b Mon Sep 17 00:00:00 2001 From: donocode Date: Wed, 6 Dec 2017 18:36:12 +0000 Subject: [PATCH 06/10] minor review changes --- src/features/embed-gist-inline.js | 47 +++++++++++++++---------------- 1 file changed, 22 insertions(+), 25 deletions(-) diff --git a/src/features/embed-gist-inline.js b/src/features/embed-gist-inline.js index 8cfc64eef989..58c4906a3dfd 100644 --- a/src/features/embed-gist-inline.js +++ b/src/features/embed-gist-inline.js @@ -1,33 +1,30 @@ -import {h} from 'dom-chef'; +import { h } from 'dom-chef'; import select from 'select-dom'; -const gistRegex = /gist\.github\.com\/\w*?\/\w*/; -const isGist = link => gistRegex.test(link.href); +const isGist = link => link.hostname.startsWith('gist.') || link.pathname.startsWith('gist/'); -const getJsonUrl = href => `${href}.json`.replace(/\.jso?n?\.json$/, '.json'); -const getGistData = href => fetch(getJsonUrl(href)).then(response => response.json()); - -const createGistElement = gistData => { - const el = ( -
- -
-
- ); - return el; +const getJsonUrl = href => `${href}.json`.replace(/\.(js|json)\.json$/, '.json'); +const getGistData = async href => { + const response = await fetch(getJsonUrl(href)); + return await response.json(); }; +const createGistElement = gistData => ( +
+ +
+
+); + export default async () => { - const gistLinks = select - .all('.js-comment-body p a[href^="https://gist.github.com"]:only-child') - .filter(isGist); + const gistLinks = select.all('.js-comment-body p a:only-child').filter(isGist); - for (let link of gistLinks) { - try { - const gistData = await getGistData(link.href); - const gistEl = createGistElement(gistData); - const linkParent = link.parentNode; - linkParent.parentNode.replaceChild(gistEl, linkParent); - } catch (err) {} - } + for (let link of gistLinks) { + try { + const gistData = await getGistData(link.href); + const gistEl = createGistElement(gistData); + const linkParent = link.parentNode; + linkParent.parentNode.replaceChild(gistEl, linkParent); + } catch (err) {} + } }; From 0452cf4c32660060c7accbd2e7d3c5165aaaa568 Mon Sep 17 00:00:00 2001 From: donocode Date: Wed, 6 Dec 2017 22:21:11 +0000 Subject: [PATCH 07/10] fix xo lint errors --- src/features/embed-gist-inline.js | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/src/features/embed-gist-inline.js b/src/features/embed-gist-inline.js index 58c4906a3dfd..7d09a27972cd 100644 --- a/src/features/embed-gist-inline.js +++ b/src/features/embed-gist-inline.js @@ -1,30 +1,29 @@ -import { h } from 'dom-chef'; import select from 'select-dom'; const isGist = link => link.hostname.startsWith('gist.') || link.pathname.startsWith('gist/'); const getJsonUrl = href => `${href}.json`.replace(/\.(js|json)\.json$/, '.json'); const getGistData = async href => { - const response = await fetch(getJsonUrl(href)); - return await response.json(); + const response = await fetch(getJsonUrl(href)); + return response.json(); }; const createGistElement = gistData => ( -
- -
-
+
+ +
+
); export default async () => { - const gistLinks = select.all('.js-comment-body p a:only-child').filter(isGist); + const gistLinks = select.all('.js-comment-body p a:only-child').filter(isGist); - for (let link of gistLinks) { - try { - const gistData = await getGistData(link.href); - const gistEl = createGistElement(gistData); - const linkParent = link.parentNode; - linkParent.parentNode.replaceChild(gistEl, linkParent); - } catch (err) {} - } + for (const link of gistLinks) { + try { + const gistData = await getGistData(link.href); + const gistEl = createGistElement(gistData); + const linkParent = link.parentNode; + linkParent.parentNode.replaceChild(gistEl, linkParent); + } catch (err) {} + } }; From 9329687878f68b05704b01881a49b12f650e9d06 Mon Sep 17 00:00:00 2001 From: Federico Brigante Date: Thu, 7 Dec 2017 23:12:11 +0800 Subject: [PATCH 08/10] Fix; Use Shadow DOM version; Exclude embeds --- src/features/embed-gist-inline.js | 35 +++++++++++++++---------------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/src/features/embed-gist-inline.js b/src/features/embed-gist-inline.js index 7d09a27972cd..26c48e08d244 100644 --- a/src/features/embed-gist-inline.js +++ b/src/features/embed-gist-inline.js @@ -1,12 +1,12 @@ +import {h} from 'dom-chef'; import select from 'select-dom'; -const isGist = link => link.hostname.startsWith('gist.') || link.pathname.startsWith('gist/'); - -const getJsonUrl = href => `${href}.json`.replace(/\.(js|json)\.json$/, '.json'); -const getGistData = async href => { - const response = await fetch(getJsonUrl(href)); - return response.json(); -}; +const isGist = link => + !link.pathname.includes('.') && // Exclude links to embed files + ( + link.hostname.startsWith('gist.') || + link.pathname.startsWith('gist/') + ); const createGistElement = gistData => (
@@ -15,15 +15,14 @@ const createGistElement = gistData => (
); -export default async () => { - const gistLinks = select.all('.js-comment-body p a:only-child').filter(isGist); - - for (const link of gistLinks) { - try { - const gistData = await getGistData(link.href); - const gistEl = createGistElement(gistData); - const linkParent = link.parentNode; - linkParent.parentNode.replaceChild(gistEl, linkParent); - } catch (err) {} - } +async function embedGist(link) { + const response = await fetch(link.href + '.json'); + const gistData = await response.json(); + const gistEl = createGistElement(gistData); + link.parentNode.attachShadow({mode: 'open'}).append(gistEl); +} +export default () => { + select.all('.js-comment-body p a:only-child') + .filter(isGist) + .forEach(embedGist); }; From 77181d5bfba73f864c0cfdb8b9c1865d06a346f4 Mon Sep 17 00:00:00 2001 From: donocode Date: Tue, 12 Dec 2017 22:20:09 +0000 Subject: [PATCH 09/10] switch json url to template string --- source/features/embed-gist-inline.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/features/embed-gist-inline.js b/source/features/embed-gist-inline.js index 26c48e08d244..3c0cf654b0a2 100644 --- a/source/features/embed-gist-inline.js +++ b/source/features/embed-gist-inline.js @@ -16,7 +16,7 @@ const createGistElement = gistData => ( ); async function embedGist(link) { - const response = await fetch(link.href + '.json'); + const response = await fetch(`${link.href}.json`); const gistData = await response.json(); const gistEl = createGistElement(gistData); link.parentNode.attachShadow({mode: 'open'}).append(gistEl); From cf726acdee3410da0aa7b1dea5c483d77ce3e435 Mon Sep 17 00:00:00 2001 From: donocode Date: Tue, 12 Dec 2017 22:31:10 +0000 Subject: [PATCH 10/10] add screenshot to new features --- readme.md | 1 + 1 file changed, 1 insertion(+) diff --git a/readme.md b/readme.md index 528820cdc9ee..659517def52c 100644 --- a/readme.md +++ b/readme.md @@ -108,6 +108,7 @@ GitHub Enterprise is also supported by [authorizing your own domain in the optio - Copy canonical link to file when [the y hotkey](https://help.github.com/articles/getting-permanent-links-to-files/) is used - Supports indenting with the tab key in textareas like the comment box (Shift Tab for original behavior) - [Uses the pull request title as commit title when merging with 'Squash and merge'](https://github.com/sindresorhus/refined-github/issues/276) +- [Replaces linked gists in issue and pull request comments with an embedded version of the gist file](https://user-images.githubusercontent.com/6978877/33911900-c62ee968-df8b-11e7-8685-506ffafc60b4.PNG) ### More actions