From 3aad6cdb785a63b95057f001ea9b7b96917b15bf Mon Sep 17 00:00:00 2001 From: Simen Bekkhus Date: Thu, 2 Apr 2020 13:04:25 +0200 Subject: [PATCH 1/4] chore(website): add copy button the code blocks --- website/siteConfig.js | 7 +++- website/static/css/code-block-buttons.css | 39 +++++++++++++++++++ website/static/js/code-block-buttons.js | 47 +++++++++++++++++++++++ 3 files changed, 92 insertions(+), 1 deletion(-) create mode 100644 website/static/css/code-block-buttons.css create mode 100644 website/static/js/code-block-buttons.js diff --git a/website/siteConfig.js b/website/siteConfig.js index 0fa4fb20c98f..5f0c02dc5330 100644 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -121,7 +121,12 @@ const siteConfig = { secondaryColor: '#095708', prismColor: 'rgba(153, 66, 79, 0.03)', }, - scripts: ['https://buttons.github.io/buttons.js'], + scripts: [ + 'https://buttons.github.io/buttons.js', + 'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js', + '/js/code-block-buttons.js', + ], + stylesheets: ['/css/code-block-buttons.css'], repoUrl, siteConfigUrl: 'https://github.com/facebook/jest/edit/master/website/siteConfig.js', diff --git a/website/static/css/code-block-buttons.css b/website/static/css/code-block-buttons.css new file mode 100644 index 000000000000..f9b49da989ea --- /dev/null +++ b/website/static/css/code-block-buttons.css @@ -0,0 +1,39 @@ +/* "Copy" code block button */ +pre { + position: relative; +} + +pre .btnIcon { + position: absolute; + top: 4px; + z-index: 2; + cursor: pointer; + border: 1px solid transparent; + padding: 0; + color: var(--green); + background-color: transparent; + height: 30px; + transition: all .25s ease-out; +} + +pre .btnIcon:hover { + text-decoration: none; +} + +.btnIcon__body { + align-items: center; + display: flex; +} + +.btnIcon svg { + fill: currentColor; + margin-right: .4em; +} + +.btnIcon__label { + font-size: 11px; +} + +.btnClipboard { + right: 10px; +} diff --git a/website/static/js/code-block-buttons.js b/website/static/js/code-block-buttons.js new file mode 100644 index 000000000000..e4fb913d9870 --- /dev/null +++ b/website/static/js/code-block-buttons.js @@ -0,0 +1,47 @@ +// Turn off ESLint for this file because it's sent down to users as-is. +/* eslint-disable */ +window.addEventListener('load', function() { + function button(label, ariaLabel, icon, className) { + const btn = document.createElement('button'); + btn.classList.add('btnIcon', className); + btn.setAttribute('type', 'button'); + btn.setAttribute('aria-label', ariaLabel); + btn.innerHTML = + '
' + + icon + + '' + + label + + '' + + '
'; + return btn; + } + + function addButtons(codeBlockSelector, btn) { + document.querySelectorAll(codeBlockSelector).forEach(function(code) { + code.parentNode.appendChild(btn.cloneNode(true)); + }); + } + + const copyIcon = + ''; + + addButtons( + '.hljs', + button('Copy', 'Copy code to clipboard', copyIcon, 'btnClipboard'), + ); + + const clipboard = new ClipboardJS('.btnClipboard', { + target: function(trigger) { + return trigger.parentNode.querySelector('code'); + }, + }); + + clipboard.on('success', function(event) { + event.clearSelection(); + const textEl = event.trigger.querySelector('.btnIcon__label'); + textEl.textContent = 'Copied'; + setTimeout(function() { + textEl.textContent = 'Copy'; + }, 2000); + }); +}); From ed5e84ec36ba440ae372570a6f6506a7afc7069d Mon Sep 17 00:00:00 2001 From: Simen Bekkhus Date: Thu, 2 Apr 2020 13:08:12 +0200 Subject: [PATCH 2/4] lint ignore --- .eslintignore | 1 + website/static/js/code-block-buttons.js | 2 -- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/.eslintignore b/.eslintignore index a16ec3b78eaa..05311c4695d6 100644 --- a/.eslintignore +++ b/.eslintignore @@ -10,4 +10,5 @@ website/build website/node_modules website/i18n/*.js website/translated_docs +website/static !.eslintrc.js diff --git a/website/static/js/code-block-buttons.js b/website/static/js/code-block-buttons.js index e4fb913d9870..a2d4c5b015c4 100644 --- a/website/static/js/code-block-buttons.js +++ b/website/static/js/code-block-buttons.js @@ -1,5 +1,3 @@ -// Turn off ESLint for this file because it's sent down to users as-is. -/* eslint-disable */ window.addEventListener('load', function() { function button(label, ariaLabel, icon, className) { const btn = document.createElement('button'); From 6a10f9a680b2d4d71df9d73db2723d1c72b010a9 Mon Sep 17 00:00:00 2001 From: Simen Bekkhus Date: Thu, 2 Apr 2020 13:12:32 +0200 Subject: [PATCH 3/4] run prettier on static code --- package.json | 4 ++-- website/static/css/code-block-buttons.css | 4 ++-- website/static/js/code-block-buttons.js | 12 ++++++------ 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 45bc0aba16b4..d769a791a763 100644 --- a/package.json +++ b/package.json @@ -95,8 +95,8 @@ "jest-coverage": "yarn jest --coverage", "lint": "eslint . --cache --ext js,jsx,ts,tsx,md", "lint-es5-build": "eslint --no-eslintrc --no-ignore --env=browser packages/*/build-es5", - "lint:prettier": "prettier '**/*.{md,yml,yaml}' --write --ignore-path .gitignore", - "lint:prettier:ci": "prettier '**/*.{md,yml,yaml}' --check --ignore-path .gitignore", + "lint:prettier": "prettier '**/*.{md,yml,yaml}' 'website/static/**/*.{css,js}' --write --ignore-path .gitignore", + "lint:prettier:ci": "prettier '**/*.{md,yml,yaml}' 'website/static/**/*.{css,js}' --check --ignore-path .gitignore", "postinstall": "opencollective postinstall && yarn build", "install-no-ts-build": "node ./scripts/remove-postinstall && yarn --no-progress --frozen-lockfile && node ./scripts/build", "remove-prettier-dep": "node ./scripts/remove-prettier-dep", diff --git a/website/static/css/code-block-buttons.css b/website/static/css/code-block-buttons.css index f9b49da989ea..a6e6eef437b2 100644 --- a/website/static/css/code-block-buttons.css +++ b/website/static/css/code-block-buttons.css @@ -13,7 +13,7 @@ pre .btnIcon { color: var(--green); background-color: transparent; height: 30px; - transition: all .25s ease-out; + transition: all 0.25s ease-out; } pre .btnIcon:hover { @@ -27,7 +27,7 @@ pre .btnIcon:hover { .btnIcon svg { fill: currentColor; - margin-right: .4em; + margin-right: 0.4em; } .btnIcon__label { diff --git a/website/static/js/code-block-buttons.js b/website/static/js/code-block-buttons.js index a2d4c5b015c4..1489a599a0bc 100644 --- a/website/static/js/code-block-buttons.js +++ b/website/static/js/code-block-buttons.js @@ -1,4 +1,4 @@ -window.addEventListener('load', function() { +window.addEventListener('load', function () { function button(label, ariaLabel, icon, className) { const btn = document.createElement('button'); btn.classList.add('btnIcon', className); @@ -15,7 +15,7 @@ window.addEventListener('load', function() { } function addButtons(codeBlockSelector, btn) { - document.querySelectorAll(codeBlockSelector).forEach(function(code) { + document.querySelectorAll(codeBlockSelector).forEach(function (code) { code.parentNode.appendChild(btn.cloneNode(true)); }); } @@ -25,20 +25,20 @@ window.addEventListener('load', function() { addButtons( '.hljs', - button('Copy', 'Copy code to clipboard', copyIcon, 'btnClipboard'), + button('Copy', 'Copy code to clipboard', copyIcon, 'btnClipboard') ); const clipboard = new ClipboardJS('.btnClipboard', { - target: function(trigger) { + target: function (trigger) { return trigger.parentNode.querySelector('code'); }, }); - clipboard.on('success', function(event) { + clipboard.on('success', function (event) { event.clearSelection(); const textEl = event.trigger.querySelector('.btnIcon__label'); textEl.textContent = 'Copied'; - setTimeout(function() { + setTimeout(function () { textEl.textContent = 'Copy'; }, 2000); }); From 442f77ecd47e1d638b8785303c5b6ddb5cde1d90 Mon Sep 17 00:00:00 2001 From: Simen Bekkhus Date: Thu, 2 Apr 2020 17:02:48 +0200 Subject: [PATCH 4/4] exclude from copyright check --- scripts/checkCopyrightHeaders.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/scripts/checkCopyrightHeaders.js b/scripts/checkCopyrightHeaders.js index af68d4c78723..12d4eb78be3c 100755 --- a/scripts/checkCopyrightHeaders.js +++ b/scripts/checkCopyrightHeaders.js @@ -102,6 +102,8 @@ const CUSTOM_IGNORED_PATTERNS = [ '^packages/expect/src/jasmineUtils\\.ts$', '^packages/jest-config/src/vendor/jsonlint\\.js$', '^packages/jest-diff/src/cleanupSemantic\\.ts$', + '^website/static/css/code-block-buttons\\.css$', + '^website/static/js/code-block-buttons\\.js', ].map(createRegExp); const IGNORED_PATTERNS = [