From 8e08d9fada3c0557620b3858bb3eadd6fde7f6dc Mon Sep 17 00:00:00 2001 From: Markus <1720843+maxmarkus@users.noreply.github.com> Date: Mon, 18 Nov 2019 14:13:51 +0100 Subject: [PATCH] Copy to clipboard for code blocks (#963) --- .../docs/scripts/markdown.unified-preview.js | 11 ++- website/docs/src/routes/_layout.svelte | 92 ++++++++++++++++++- .../src/unified-plugins/plugin-helpers.js | 8 ++ .../rehype-copy-to-clipboard.js | 34 +++---- .../rehype-luigi-linkparser.js | 9 +- 5 files changed, 120 insertions(+), 34 deletions(-) create mode 100644 website/docs/src/unified-plugins/plugin-helpers.js diff --git a/website/docs/scripts/markdown.unified-preview.js b/website/docs/scripts/markdown.unified-preview.js index fac2652728..139555512a 100644 --- a/website/docs/scripts/markdown.unified-preview.js +++ b/website/docs/scripts/markdown.unified-preview.js @@ -11,9 +11,10 @@ const filesToProcess = [ filesToProcess.forEach(async (name) => { const fileContent = readFileSync(__dirname + '/mocks/' + name); - const result = await MarkdownSvc.process(String(fileContent), { shortName: name.replace('.md', '') }); - console.log(`============== ${name} =================`); - console.log(result) - console.log(`============ end: ${name} ==============`); - console.log(''); + MarkdownSvc.process(String(fileContent), { shortName: name.replace('.md', '') }).then(result => { + console.log(`============== ${name} =================`); + console.log(result) + console.log(`============ end: ${name} ==============`); + console.log(''); + }).catch(e => console.error); }); \ No newline at end of file diff --git a/website/docs/src/routes/_layout.svelte b/website/docs/src/routes/_layout.svelte index ecaeebcd9b..d66d8af5ce 100644 --- a/website/docs/src/routes/_layout.svelte +++ b/website/docs/src/routes/_layout.svelte @@ -199,10 +199,100 @@ } } + .copyCodeContainer { + position: relative; + } + + .copyCode { + position: absolute; + right: -10px; + top: -10px; + width: 28px; + height: 28px; + border-radius: 50%; + background-color: $primary-color; + border: 1px $primary-color solid; + box-shadow: 0 0 4px 0 $primary-color; + cursor: pointer; + & > div { + position: relative; + display: flex; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; + } + img { + width: 13px; + height: 16px; + } + .popoverCopy { + position: absolute; + right: 0; + bottom: -37px; + font-family: 'Open Sans', sans-serif; + display: none; + font-size: 11px; + line-height: 13px; + color: $secondary-color; + background-color: white; + border: 1px $primary-color solid; + padding: 5px 11px; + white-space: nowrap; + + // Arrow needs to be added + &:before, + &:after { + content: ' '; + position: absolute; + bottom: 100%; + width: 0; + height: 0; + } + + &:before { + right: 2px; + border: 10px solid transparent; + border-bottom-color: $primary-color; + } + + // cutout + &:after { + right: 3px; + border: 9px solid transparent; + border-bottom-color: white; + background-color: transparent; + } + + @media screen and (min-width: (1024px - $side-nav-width)) { + + left: 50%; + right: auto; + transform: translateX(-50%); + + &:before { + left: 34px; + right: auto; + } + + &:after { + left: 35px; + right: auto; + } + } + } + &:hover { + background-color: white; + border-color: $primary-color; + .popoverCopy { + display: block; + } + } + } + pre { width: 100%; display: block; - position: relative; width: 1px; min-width: 100%; *width: 100%; diff --git a/website/docs/src/unified-plugins/plugin-helpers.js b/website/docs/src/unified-plugins/plugin-helpers.js new file mode 100644 index 0000000000..bb7ca6382f --- /dev/null +++ b/website/docs/src/unified-plugins/plugin-helpers.js @@ -0,0 +1,8 @@ + + export function prependForExport() { + if (process.env.NODE_ENV == 'production') { + return '/docu-microfrontend'; + } else { + return ''; + } + } \ No newline at end of file diff --git a/website/docs/src/unified-plugins/rehype-copy-to-clipboard.js b/website/docs/src/unified-plugins/rehype-copy-to-clipboard.js index 035541b00a..90916c4cd1 100644 --- a/website/docs/src/unified-plugins/rehype-copy-to-clipboard.js +++ b/website/docs/src/unified-plugins/rehype-copy-to-clipboard.js @@ -1,16 +1,6 @@ import h from 'hastscript'; -import has from 'hast-util-has-property'; import visit from 'unist-util-visit'; -import fs from 'fs'; - -let log = () => {} -if (process.env.NODE_ENV === 'debug') { - const debugFile = __dirname + '/debug.log'; - fs.writeFileSync(debugFile, ''); - log = (text = '') => { - fs.appendFileSync(debugFile, text); - } -} +import { prependForExport } from './plugin-helpers'; export default function addCopyToClipboard() { return function transformer(tree) { @@ -20,17 +10,21 @@ export default function addCopyToClipboard() { } function modify(node, prop) { - if (node.tagName === 'pre') { + const notYetProcessed = !node.properties.className || node.properties.className.indexOf('canCopyCode') === -1; // prevent infinite loop + if (node.tagName === 'pre' && notYetProcessed) { // Docu: https://github.com/syntax-tree/hastscript#use - const copyCode = h('a.copyCode', { onclick: 'copyCode(event, this)' }, [ - h('div', [ - h('img', { src: '/images/copy-clipboard-default.svg' }), - h('.popoverCopy', [ - 'Click to copy' - ]), - ]), + const newNodeData = h('div.copyCodeContainer', [ + h('a.copyCode', { onclick: 'copyCode(event, this)' }, + [h('div', [ + h('img', { src: prependForExport() + '/images/copy-clipboard-default.svg' }), + h('.popoverCopy', [ + 'Click to copy' + ])] + )] + ), + h('pre.canCopyCode', node.children) ]); - node.children.unshift(copyCode); + Object.assign(node, newNodeData); } } } \ No newline at end of file diff --git a/website/docs/src/unified-plugins/rehype-luigi-linkparser.js b/website/docs/src/unified-plugins/rehype-luigi-linkparser.js index 037118d689..415981769a 100644 --- a/website/docs/src/unified-plugins/rehype-luigi-linkparser.js +++ b/website/docs/src/unified-plugins/rehype-luigi-linkparser.js @@ -2,6 +2,7 @@ import has from 'hast-util-has-property'; import url from 'url'; import visit from 'unist-util-visit'; import { writeFileSync, appendFileSync } from 'fs'; +import { prependForExport } from './plugin-helpers'; let log = () => {} if (process.env.NODE_ENV === 'debug') { @@ -21,14 +22,6 @@ export default function luigiLinkParser(options) { }); } - function prependForExport() { - if (process.env.NODE_ENV == 'production') { - return '/docu-microfrontend'; - } else { - return ''; - } - } - function modify(node, prop) { const githubMaster = 'https://github.com/SAP/luigi/blob/master/'; if (has(node, prop)) {