Skip to content

Commit

Permalink
chore(website): add copy button the code blocks (#9750)
Browse files Browse the repository at this point in the history
  • Loading branch information
SimenB authored Apr 4, 2020
1 parent 7e5e422 commit 8aea972
Show file tree
Hide file tree
Showing 6 changed files with 95 additions and 3 deletions.
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,5 @@ website/build
website/node_modules
website/i18n/*.js
website/translated_docs
website/static
!.eslintrc.js
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 2 additions & 0 deletions scripts/checkCopyrightHeaders.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down
7 changes: 6 additions & 1 deletion website/siteConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
39 changes: 39 additions & 0 deletions website/static/css/code-block-buttons.css
Original file line number Diff line number Diff line change
@@ -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 0.25s ease-out;
}

pre .btnIcon:hover {
text-decoration: none;
}

.btnIcon__body {
align-items: center;
display: flex;
}

.btnIcon svg {
fill: currentColor;
margin-right: 0.4em;
}

.btnIcon__label {
font-size: 11px;
}

.btnClipboard {
right: 10px;
}
45 changes: 45 additions & 0 deletions website/static/js/code-block-buttons.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
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 =
'<div class="btnIcon__body">' +
icon +
'<strong class="btnIcon__label">' +
label +
'</strong>' +
'</div>';
return btn;
}

function addButtons(codeBlockSelector, btn) {
document.querySelectorAll(codeBlockSelector).forEach(function (code) {
code.parentNode.appendChild(btn.cloneNode(true));
});
}

const copyIcon =
'<svg width="12" height="12" viewBox="340 364 14 15" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M342 375.974h4v.998h-4v-.998zm5-5.987h-5v.998h5v-.998zm2 2.994v-1.995l-3 2.993 3 2.994v-1.996h5v-1.995h-5zm-4.5-.997H342v.998h2.5v-.997zm-2.5 2.993h2.5v-.998H342v.998zm9 .998h1v1.996c-.016.28-.11.514-.297.702-.187.187-.422.28-.703.296h-10c-.547 0-1-.452-1-.998v-10.976c0-.546.453-.998 1-.998h3c0-1.107.89-1.996 2-1.996 1.11 0 2 .89 2 1.996h3c.547 0 1 .452 1 .998v4.99h-1v-2.995h-10v8.98h10v-1.996zm-9-7.983h8c0-.544-.453-.996-1-.996h-1c-.547 0-1-.453-1-.998 0-.546-.453-.998-1-.998-.547 0-1 .452-1 .998 0 .545-.453.998-1 .998h-1c-.547 0-1 .452-1 .997z" fill-rule="evenodd"/></svg>';

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);
});
});

0 comments on commit 8aea972

Please sign in to comment.