diff --git a/website/siteConfig.js b/website/siteConfig.js index 1f069e2d0..4f9ee0c26 100644 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -33,8 +33,12 @@ const siteConfig = { highlight: { theme: 'default', }, + scripts: [ + 'https://buttons.github.io/buttons.js', + 'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js', + '/js/code-blocks-buttons.js', + ], repoUrl, - scripts: ['https://buttons.github.io/buttons.js'], stylesheets: [], onPageNav: 'separate', }; diff --git a/website/static/css/code-blocks-buttons.css b/website/static/css/code-blocks-buttons.css new file mode 100644 index 000000000..3efb38878 --- /dev/null +++ b/website/static/css/code-blocks-buttons.css @@ -0,0 +1,46 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +/* "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: #222; + 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; +} \ No newline at end of file diff --git a/website/static/js/code-blocks-buttons.js b/website/static/js/code-blocks-buttons.js new file mode 100644 index 000000000..44a9dd9c0 --- /dev/null +++ b/website/static/js/code-blocks-buttons.js @@ -0,0 +1,54 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +// 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 = + '