chore: update website

* display tweets * big github button * display new users
2025-03-18 02:22:46 -05:00 · 2018-06-17 01:23:19 +02:00 · 2018-06-17 01:23:19 +02:00 · 78ef24d79b
commit 78ef24d79b
parent 62d30333d8
14 changed files with 327 additions and 118 deletions
--- a/docs/cli.md
+++ b/docs/cli.md
@ -8,7 +8,7 @@ The verdaccio CLI is your go start the application.
 ## Commands

 ```bash
-$ verdaccio --listen 4000 --config ~./config.yaml
+verdaccio --listen 4000 --config ~./config.yaml
 ```

 Command | Default | Example | Description
--- a/website/i18n/en.json
+++ b/website/i18n/en.json
@ -7,6 +7,7 @@
    "ansible": "Installing with Ansible",
    "authentification": "Authentification",
    "build": "Build the source code",
+    "chef": "Chef Cookbook",
    "ci": "Continuous Integration",
    "cli": "Command Line Tool",
    "configuration": "Configuration File",
@ -22,6 +23,7 @@
    "packages": "Package Access",
    "plugins": "Plugins",
    "protect-your-dependencies": "Protecting packages",
+    "puppet": "Puppet",
    "source-code": "Source Code",
    "reverse-proxy": "Reverse Proxy Setup",
    "server-configuration": "Server Configuration",
@ -61,10 +63,8 @@
    "This project is maintained by the Verdaccio community.|no description given": "This project is maintained by the Verdaccio community.",
    "Get Started|no description given": "Get Started",
    "Contribute|no description given": "Contribute",
-    "Easy to Install|no description given": "Easy to Install",
-    "Easy to Set Up|no description given": "Easy to Set Up",
-    "Easy to Use|no description given": "Easy to Use",
    "That’s it ! Enjoy your private package manager.|no description given": "That’s it ! Enjoy your private package manager.",
+    "Many great developers are already enjoying Verdaccio, join the community!|no description given": "Many great developers are already enjoying Verdaccio, join the community!",
    "**npm**, **yarn** and **pnpm** are part of any development workflow we try to catch up with the latest updates.|no description given": "**npm**, **yarn** and **pnpm** are part of any development workflow we try to catch up with the latest updates.",
    "The most popular npm clients are supported|no description given": "The most popular npm clients are supported",
    "We have an official **Docker** image ready to use|no description given": "We have an official **Docker** image ready to use",
@ -81,6 +81,12 @@
    "Add your company|no description given": "Add your company",
    "Help Translate|recruit community translators for your project": "Help Translate",
    "Edit this Doc|recruitment message asking to edit the doc source": "Edit",
-    "Translate this Doc|recruitment message asking to translate the docs": "Translate"
+    "Translate this Doc|recruitment message asking to translate the docs": "Translate",
+    "Many great developers are already enjoying Verdaccio, join the club!|no description given": "Many great developers are already enjoying Verdaccio, join the club!",
+    "Easy to Install|no description given": "Easy to Install",
+    "Easy to Set Up|no description given": "Easy to Set Up",
+    "Easy to Use|no description given": "Easy to Use",
+    "What developers are saying|no description given": "What developers are saying",
+    "Many great developers are already enjoying Verdaccio, join the community!": "Many great developers are already enjoying Verdaccio, join the community!"
  }
 }
--- a/website/package.json
+++ b/website/package.json
@ -1,6 +1,7 @@
 {
+  "version": "3.2.0",
  "scripts": {
-    "examples": "docusaurus-examples",
+    "examples": "verdaccio-website",
    "start": "docusaurus-start",
    "build": "docusaurus-build",
    "publish-gh-pages": "docusaurus-publish",
@ -8,6 +9,7 @@
    "version": "docusaurus-version",
    "rename-version": "docusaurus-rename-version"
  },
+  "license": "MIT",
  "devDependencies": {
    "docusaurus": "1.2.0"
  }
--- a/website/pages/en/index.js
+++ b/website/pages/en/index.js
@ -1,21 +1,78 @@
-/**
- * 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.
- */
-
 const React = require('react');

 const CompLibrary = require('../../core/CompLibrary.js');
 const translate = require("../../server/translate.js").translate;
 const translation = require('../../server/translation.js');
-const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;

 const siteConfig = require(process.cwd() + '/siteConfig.js');

+class TweetsSection extends React.Component {
+  render() {
+    return(
+      <div className="tweets-section">
+        <div>
+          {this.renderTweetUpRight()}
+        </div>
+        <div>
+          {this.renderTweetUpLeft()}
+        </div>
+        <div>
+          {this.renderTweetDownRight()}
+        </div>
+        <div>
+          {this.renderTweetDownLeft()}
+        </div>
+      </div>);
+  }
+
+  renderTweetUpRight() {
+    return (<blockquote className="twitter-tweet" data-cards="hidden" data-lang="es"><p lang="en" dir="ltr">In a world
+        where <a href="https://twitter.com/npmjs?ref_src=twsrc%5Etfw">@npmjs</a> and other core infrastructure fully
+        embraced the &quot;move fast and break things&quot; mindset, it&#39;s great to see other people care deeply about
+        stability. <a href="https://t.co/uVk7xFeiwU">https://t.co/uVk7xFeiwU</a> &quot;just works&quot; and has saved us
+        countless headaches. Thanks <a href="https://twitter.com/verdaccio_npm?ref_src=twsrc%5Etfw">@verdaccio_npm</a> !
+      </p>&mdash; Sheet JS (@SheetJS) <a
+        href="https://twitter.com/SheetJS/status/1002609907370250241?ref_src=twsrc%5Etfw">1 de junio de 2018</a>
+      </blockquote>);
+  }
+
+  renderTweetUpLeft() {
+    return (
+      <blockquote className="twitter-tweet" data-lang="es"><p lang="en" dir="ltr">Woke up to <a
+        href="https://twitter.com/timer150?ref_src=twsrc%5Etfw">@timer150</a> fixing end-to-end test flakiness in Create
+        React App 👏 Background: we have a Lerna monorepo and used very complex hacks for integration testing of
+        generated projects. Solution: run a local npm registry to simulate a publish 😁 <a
+          href="https://t.co/ggNfS4PpFv">https://t.co/ggNfS4PpFv</a></p>&mdash; Dan Abramov (@dan_abramov) <a
+        href="https://twitter.com/dan_abramov/status/951427300070916096?ref_src=twsrc%5Etfw">11 de enero de 2018</a>
+      </blockquote>);
+  }
+
+  renderTweetDownRight() {
+    return (
+      <blockquote className="twitter-tweet" data-lang="es"><p lang="en" dir="ltr">Verdaccio is my personal hero. A
+        lightweight npm registry &amp; cache. Just two commands to install + use it. <a
+          href="https://twitter.com/hashtag/incredibile?src=hash&amp;ref_src=twsrc%5Etfw">#incredibile</a> <a
+          href="https://t.co/X0uNgS6UMz">https://t.co/X0uNgS6UMz</a></p>&mdash; Manfred Steyer (@ManfredSteyer) <a
+        href="https://twitter.com/ManfredSteyer/status/1002153128140136448?ref_src=twsrc%5Etfw">31 de mayo de 2018</a>
+      </blockquote>)
+  }
+
+  renderTweetDownLeft() {
+    return (
+      <blockquote className="twitter-tweet" data-conversation="none" data-cards="hidden" data-lang="es">
+        <p lang="en" dir="ltr">
+          <a href="https://twitter.com/verdaccio_npm?ref_src=twsrc%5Etfw">@verdaccio_npm</a> is a pretty good open-source
+        tool and seems to be growing. We&#39;re currently using them at NodeSource for some internal caching and
+        modules, and are happy so far. Easy to setup for both business and use.<br/><br/>🔗
+          <a href="https://t.co/ow5JRgZYrU">https://t.co/ow5JRgZYrU</a>
+        </p>&mdash; Tierney Cyren (@bitandbang) <a
+        href="https://twitter.com/bitandbang/status/1001297542779424768?ref_src=twsrc%5Etfw">29 de mayo de 2018</a>
+      </blockquote>);
+  }
+}
+
 class Button extends React.Component {
  render() {
    return (
@ -32,6 +89,32 @@ Button.defaultProps = {
  target: '_self',
 };

+class HeaderButtons extends React.Component {
+  buildUrl(relativePath) {
+    return `${siteConfig.baseUrl}docs/${this.props.language}${relativePath}`;
+  }
+
+  render() {
+    return (
+      <div className="pluginRowBlock">
+        <Button href={this.buildUrl('/what-is-verdaccio.html')}>
+          <translate>
+            Get Started
+          </translate>
+        </Button>
+        <Button href="https://github.com/verdaccio">
+          Github
+        </Button>
+        <Button href={this.buildUrl('/contributing.html')}>
+          <translate>
+            Contribute
+          </translate>
+        </Button>
+      </div>
+    )
+  }
+}
+
 class HomeSplash extends React.Component {
  render() {
    return (
@ -39,57 +122,27 @@ class HomeSplash extends React.Component {
        <div className="homeSplashFade">
          <div className="wrapper homeWrapper">
            <div className="inner">
-              <h2 className="projectTitle">
-              <img title={siteConfig.title} src={siteConfig.baseUrl + 'img/verdaccio@2x.png'} />
+              <h1 className="projectTitle">
+              <img title={siteConfig.title} alt={siteConfig.title} src={siteConfig.baseUrl + 'img/verdaccio@2x.png'} />
                <small>
                  {
-                    translation[this.props.language]['localized-strings']
-                      .tagline
+                    translation[this.props.language]['localized-strings'].tagline
                  }
                </small>
-              </h2>
+              </h1>
              <div className="section promoSection">
                <div className="promoRow">
-                  <div className="pluginRowBlock">
-                    <Button
-                      href={
-                        siteConfig.baseUrl +
-                        'docs/' +
-                        this.props.language +
-                        '/what-is-verdaccio.html'
-                      }>
-                      <translate>
-                        Get Started
-                      </translate>
-                    </Button>
-                    <Button href="https://github.com/verdaccio">Github</Button>
-                    <Button
-                      href={
-                        siteConfig.baseUrl +
-                        'docs/' +
-                        this.props.language +
-                        '/contributing.html'
-                      }>
-                      <translate>
-                        Contribute
-                      </translate>
-                    </Button>
-                  </div>
+                  <HeaderButtons language={this.props.language}/>
                </div>
              </div>
-              <div className="githubButton" style={{minHeight: '20px'}}>
-                <a
-                  className="github-button"
-                  href={siteConfig.repoUrl}
-                  data-icon="octicon-star"
-                  data-count-href="/verdaccio/verdaccio/stargazers"
-                  data-show-count={true}
-                  data-count-aria-label="# stargazers on GitHub"
-                  aria-label="Star verdaccio/verdaccio on GitHub"
-                >
-                  Star
-                </a>
-              </div>
+              <iframe
+                src={"https://ghbtns.com/github-btn.html?user=verdaccio&repo=verdaccio&type=star&count=true&size=large"}
+                frameBorder="0"
+                scrolling="0"
+                width="160px"
+                height="30px"
+                style={{marginTop: '8px'}}
+              />
            </div>
          </div>
        </div>
@ -98,6 +151,32 @@ class HomeSplash extends React.Component {
  }
 }

+const FeatureSection = () => (
+  <GridBlock
+    align="center"
+    contents={[
+      {
+        content: '```bash\n' +
+        'npm install --global verdaccio'
+      }
+    ]}
+    layout="twoColumn"
+  />
+);
+
+const MiddleTitle = (props) => {
+  return (
+    <div className="productShowcaseSection paddingBottom"
+         style={{textAlign: 'center'}}>
+      <h2>
+        {props.children}
+      </h2>
+    </div>
+  );
+}
+
+
+
 class Index extends React.Component {
  render() {
    let language = this.props.language || 'en';
@ -108,7 +187,7 @@ class Index extends React.Component {
      .map(user => {
        return (
          <a href={user.infoLink}>
-            <img src={user.image} title={user.caption} />
+            <img src={user.image} alt={user.caption} title={user.caption} />
          </a>
        );
      });
@ -117,51 +196,22 @@ class Index extends React.Component {
      <div>
        <HomeSplash language={language} />
        <div className="mainContainer">
-          <Container padding={['bottom', 'top']}>
-            <GridBlock
-              align="center"
-              contents={[
-                {
-                  content: '```bash\n' +
-                  '$> npm install --global verdaccio \n' +
-                  '$> yarn global add verdaccio\n' +
-                  '```',
-                  title: <translate>Easy to Install</translate>,
-                },
-                {
-                  content: '```bash\n' +
-                  '$> npm set registry http://localhost:4873 \n' +
-                  '$> npm adduser --registry http://localhost:4873\n' +
-                  '```',
-                  title: <translate>Easy to Set Up</translate>,
-                }
-              ]}
-              layout="fourColumn"
-            />
+          <Container padding={['top']}>
+            <FeatureSection/>
          </Container>
-
-          <div
-            className="productShowcaseSection paddingBottom"
-            style={{textAlign: 'center'}}>
-            <h2>
-              <translate>
-                Easy to Use
-              </translate>
-            </h2>
-            <MarkdownBlock>
-              ```bash&#8232;
-                $> verdaccio &#8232;
-                warn --- config file  - /home/.config/verdaccio/config.yaml &#8232;
-                warn --- http address - http://localhost:4873/ - verdaccio/3.0.0&#8232;
-              ```
-            </MarkdownBlock>
-            <h2>
+          <MiddleTitle>
              <translate>
                That’s it ! Enjoy your private package manager.
              </translate>
-            </h2>
-          </div>
-
+          </MiddleTitle>
+          <Container>
+            <TweetsSection/>
+          </Container>
+          <MiddleTitle>
+            <translate>
+              Many great developers are already enjoying Verdaccio, join the community!
+            </translate>
+          </MiddleTitle>
          <Container padding={['bottom', 'top']} background="light">
            <GridBlock
              contents={[
@ -169,6 +219,7 @@ class Index extends React.Component {
                  content: <translate>**npm**, **yarn** and **pnpm** are part of any development workflow
                    we try to catch up with the latest updates.</translate>,
                  image: siteConfig.baseUrl + 'img/package_managers_grey.png',
+                  imageAlt: 'The most popular npm clients are supported',
                  imageAlign: 'right',
                  title: <translate>The most popular npm clients are supported</translate>,
                },
--- a/website/siteConfig.js
+++ b/website/siteConfig.js
@ -9,17 +9,45 @@
 const users = [
  {
    caption: "Filiosoft",
-    image: "/img/filiosoft.png",
+    image: "/img/users/filiosoft.png",
    infoLink: "https://filiosoft.com/",
    fbOpenSource: false,
    pinned: false,
  },
  {
    caption: "SheetJS",
-    image: "/img/sheetjs.png",
+    image: "/img/users/sheetjs.png",
    infoLink: "https://sheetjs.com/",
    fbOpenSource: false,
    pinned: true,
+  },
+  {
+    caption: "Mozilla Neutrino",
+    image: "/img/users/neutrino.png",
+    infoLink: "https://neutrinojs.org/",
+    fbOpenSource: false,
+    pinned: true,
+  },
+  {
+    caption: "pnpm",
+    image: "/img/users/pnpm.svg",
+    infoLink: "https://pnpm.js.org/",
+    fbOpenSource: false,
+    pinned: true,
+  },
+  {
+    caption: "nodesource",
+    image: "/img/users/nodesource.jpg",
+    infoLink: "https://nodesource.com/",
+    fbOpenSource: false,
+    pinned: true,
+  },
+  {
+    caption: "Strapi",
+    image: "/img/users/strapijs.jpg",
+    infoLink: "https://strapi.io/",
+    fbOpenSource: false,
+    pinned: true,
  }
 ];

@ -33,31 +61,28 @@ const siteConfig = {
  baseUrl: '/' /* base url for your project */,
  projectName: 'verdaccio',
  headerLinks: [
-    {doc: 'installation', label: 'Docs'},
-    {page: 'help', label: 'Help'},
+    { doc: 'installation', label: 'Docs'},
+    { page: 'help', label: 'Help'},
    { href: "https://medium.com/verdaccio", label: 'Blog'},
    { href: "https://github.com/verdaccio", label: "GitHub" }
  ],
  users,
-  /* path to images for header/footer */
  headerIcon: 'img/verdaccio-tiny.png',
  footerIcon: 'img/verdaccio-blackwhite.png',
  favicon: 'img/favicon.ico',
-  /* colors for website */
  colors: {
    primaryColor: '#4B5E40',
    secondaryColor: '#205C3B',
  },
+  translationRecruitingLink: 'https://crowdin.com/project/verdaccio',
  // This copyright info is used in /core/Footer.js and blog rss/atom feeds.
  copyright:
-    'Copyright © ' +
-    new Date().getFullYear() +
-    ' Verdaccio community',
+    'Copyright © ' + new Date().getFullYear() + ' Verdaccio community',
  // organizationName: 'deltice', // or set an env variable ORGANIZATION_NAME
  // projectName: 'test-site', // or set an env variable PROJECT_NAME
+  usePrism: ['jsx'],
  highlight: {
-    // Highlight.js theme to use for syntax highlighting in code blocks
-    theme: 'default',
+    theme: 'atom-one-dark',
  },
  algolia: {
    apiKey: 'a8b4d117e513cd8d71d6a95e3d9d4a91',
@ -65,9 +90,21 @@ const siteConfig = {
  },
  gaTrackingId: 'UA-2527438-21',
  twitter: true,
-  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-blocks-buttons.js',
+  ],
+  stylesheets: [
+      '/css/code-blocks-buttons.css',
+  ],
  // You may provide arbitrary config keys to be used as needed by your template.
  repoUrl: 'https://github.com/verdaccio/verdaccio',
+  cleanUrl: true,
+  scrollToTop: true,
+  scrollToTopOptions: {
+    zIndex: 100,
+  },
 };

 module.exports = siteConfig;
--- a/website/static/css/code-blocks-buttons.css
+++ b/website/static/css/code-blocks-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: #fff;
+  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;
+}
--- a/website/static/css/custom.css
+++ b/website/static/css/custom.css
@ -1,5 +1,10 @@
 /* your custom css */

+/*.mainContainer .wrapper code {*/
+  /*padding: 2px;*/
+  /*font-family: inherit;*/
+/*}*/
+
 .mainContainer .wrapper a,
 .inner .projectIntro a {
  background-color: rgba(10, 78, 31, 0.15);
@ -18,17 +23,36 @@
  margin-left: initial;
 }

-@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
+.tweets-section {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
 }

-@media only screen and (min-width: 1024px) {
+.tweets-section > div {
+  padding: 20px;
+  flex: 2;
+  box-sizing:border-box;
+  text-align: center;
+   margin: 0 auto;
 }

-@media only screen and (max-width: 1023px) {
+.tweets-section > div  .twitter-tweet {
+  margin: 0 auto !important;
 }

-@media only screen and (min-width: 1400px) {
-}
+/*@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {*/
+/*}*/

-@media only screen and (min-width: 1500px) {
-}
+/*@media only screen and (min-width: 1024px) {*/
+/*}*/
+
+/*@media only screen and (max-width: 1023px) {*/
+/*}*/
+
+/*@media only screen and (min-width: 1400px) {*/
+/*}*/
+
+/*@media only screen and (min-width: 1500px) {*/
+/*}*/
--- a/website/static/img/users/filiosoft.png
+++ b/website/static/img/users/filiosoft.png
--- a/website/static/img/users/neutrino.png
+++ b/website/static/img/users/neutrino.png
--- a/website/static/img/users/nodesource.jpg
+++ b/website/static/img/users/nodesource.jpg
--- a/website/static/img/users/pnpm.svg
+++ b/website/static/img/users/pnpm.svg
@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="76.58987244897958 44 164.00775510204068 164" width="160.01" height="160"><defs><path d="M237.6 95L187.6 95L187.6 45L237.6 45L237.6 95Z" id="a7nkpY5fFy"></path><path d="M182.59 95L132.59 95L132.59 45L182.59 45L182.59 95Z" id="b21kvNK4d7"></path><path d="M127.59 95L77.59 95L77.59 45L127.59 45L127.59 95Z" id="en4AbanYM"></path><path d="M237.6 150L187.6 150L187.6 100L237.6 100L237.6 150Z" id="a3fjOVtiTl"></path><path d="M182.59 150L132.59 150L132.59 100L182.59 100L182.59 150Z" id="ceoxWhMH1"></path><path d="M182.59 205L132.59 205L132.59 155L182.59 155L182.59 205Z" id="a6qEju1"></path><path d="M237.6 205L187.6 205L187.6 155L237.6 155L237.6 205Z" id="adUpTWfSm"></path><path d="M127.59 205L77.59 205L77.59 155L127.59 155L127.59 205Z" id="b1mjaQmkkR"></path></defs><g><g><use xlink:href="#a7nkpY5fFy" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#b21kvNK4d7" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#en4AbanYM" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#a3fjOVtiTl" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#ceoxWhMH1" opacity="1" fill="#ffffff" fill-opacity="1"></use></g><g><use xlink:href="#a6qEju1" opacity="1" fill="#ffffff" fill-opacity="1"></use></g><g><use xlink:href="#adUpTWfSm" opacity="1" fill="#ffffff" fill-opacity="1"></use></g><g><use xlink:href="#b1mjaQmkkR" opacity="1" fill="#ffffff" fill-opacity="1"></use></g></g></svg>
--- a/website/static/img/users/sheetjs.png
+++ b/website/static/img/users/sheetjs.png
--- a/website/static/img/users/strapijs.jpg
+++ b/website/static/img/users/strapijs.jpg
--- a/website/static/js/code-blocks-buttons.js
+++ b/website/static/js/code-blocks-buttons.js
@ -0,0 +1,47 @@
+/* global ClipboardJS */
+
+window.addEventListener('load', function() {
+  function button(label, ariaLabel, icon, className) {
+    const btn = document.createElement('button');
+    btn.classList.add('btnIcon', className);
+    btn.setAttribute('aria-label', ariaLabel);
+    btn.innerHTML =
+      '<div class="btnIcon__body">' +
+      icon +
+      '<strong class="btnIcon__label">' +
+      label +
+      '</strong>' +
+      '</div>' +
+      '</button>';
+    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);
+  });
+});