Feature/0.0.3 (#1)

* Fix bugs

* 0.0.2

* Add customization to success/failure message

* 0.0.3

* Add test job

.eleventy.js

@@ -4,8 +4,10 @@ const UglifyJS = require('uglify-js');
 
 const defaultPluginOptions = {
   clipboardJSVersion: '2.0.8',
-  buttonClass: 'code-copy'
-}
+  buttonClass: 'code-copy',
+  successMessage: 'Copied!',
+  failureMessage: 'Failed...',
+};
 
 const defaultRendererOptions = {
   iconStyle: 'font-size: 15px; opacity: 0.8;',
@@ -20,7 +22,7 @@ function renderCode(origRule, pluginOptions, rendererOptions) {
   return (tokens, idx, options, env, self) => {
     const origRendered = origRule(tokens, idx, options, env, self);
     if (tokens[idx].tag === 'code' && !tokens[idx].info) {
-      return origRendered
+      return origRendered;
     }
     if (tokens[idx].content.length === 0) {
       return origRendered;
@@ -42,7 +44,9 @@ function renderCode(origRule, pluginOptions, rendererOptions) {
 
 function initClipboardJS(options) {
   const originSource = fs.readFileSync(path.join(__dirname, '/init-clipboard.js')).toString();
-  const script = originSource.replace('new ClipboardJS("")', `new ClipboardJS(".${options.buttonClass}")`);
+  const script = originSource.replace('new ClipboardJS(\'\')', `new ClipboardJS('.${options.buttonClass}')`)
+    .replace('Copied!', options.successMessage)
+    .replace('Failed...', options.failureMessage);
   const minified = UglifyJS.minify(script);
   if (minified.error) {
     throw minified.error;
@@ -62,8 +66,12 @@ module.exports = {
       const rendererFallbackOptions = {
         ...defaultRendererOptions,
         ...rendererOptions,
-      }
-      md.renderer.rules.fence = renderCode(md.renderer.rules.fence, pluginFallbackOptions, rendererFallbackOptions);
-    }
+      };
+      md.renderer.rules.fence = renderCode(
+        md.renderer.rules.fence,
+        pluginFallbackOptions,
+        rendererFallbackOptions,
+      );
+    };
   },
-}
+};

.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
   extends: [
     'airbnb-base',
   ],
+  ignorePatterns: ['!.eleventy.js'],
   parserOptions: {
     ecmaVersion: 13,
   },

.github/workflows/test.yml

@@ -0,0 +1,37 @@
+name: test
+
+on:
+  pull_request:
+    branches: [ main ]
+  workflow_dispatch:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          ref: ${{ github.head_ref }}
+
+      - name: Set up Node.js environment
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+
+      - name: Cache Node.js modules
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS
+          key: ${{ runner.OS }}-node-${{ hashFiles('package-lock.json') }}
+          restore-keys: |
+            ${{ runner.OS }}-node-
+            ${{ runner.OS }}-
+
+      - name: Install
+        run: npm ci
+
+      - name: Test
+        run: |
+          set -eu
+          npm run lint
+          npm run test

.npmignore

@@ -1 +1,3 @@
-test
+test
+.github
+.eslintrc

README.md

@@ -9,14 +9,14 @@ Plugin consists of the following contents.
 
 `markdown-it custom renderer`
 
-The code fence with language are attached clipboard copy button(nothing to do with non-language block).
+This custom renderer attaches clipboard copy button to code block with language(nothing to do with non-language block).
 Of course, it only supports eleventy markdown template(markdown-it).
 
 The clipboard button is provided by [Material Design Icons](https://materialdesignicons.com/) `content-copy` icon.
 
 `eleventy shortcode function`
 
-This shortcode initializes clipboard.js on window.onload.
+This shortcode initializes clipboard.js on window.onload event.
 If clipboard copy succeeded, it shows a tooltips with message(default to `Copied!`).
 Tooltips use [Primer Tooltips](https://primer.style/css/components/tooltips) CSS framework.
 
@@ -74,4 +74,40 @@ Add 11ty shortcode(named `initClipboardJS`) function your template. This will ge
 
 ## Configuration
 
-T.B.D
+plugin options
+
+```js
+eleventyConfig.addPlugin(codeClipboard, {
+  // Version of clipboard.js to use. default to 2.0.8.
+  clipboardJSVersion: '2.0.8',
+  // Name of clipboard button css class. default to code-copy.
+  // This class is also used to renderer
+  // Click event of element with this class is listened by clipboard.js.
+  buttonClass: 'code-copy',
+  // Message if copy succeeds. default to "Copied!"
+  successMessage: 'Copied!',
+  // Message if copy failes. default to "Failed..."
+  failureMessage: 'Failed...',
+});
+```
+
+renderer options(markdown-it)
+
+```js
+const markdownLibrary = markdownIt({
+  html: true
+}).use(codeClipboard.markdownItCopyButton, {
+  // Style attributes of clipboard icon. default to the following.
+  iconStyle: 'font-size: 15px; opacity: 0.8;',
+  // Class attributes of clipboard icon. default to "mdi mdi-content-copy".
+  iconClass: 'mdi mdi-content-copy',
+  // Name of HTML tag of clipboard icon. default to span.
+  iconTag: 'span',
+  // Style attributes of button. default to the following.
+  buttonStyle: 'position: absolute; top: 7.5px; right: 6px; cursor: pointer; outline: none; opacity: 0.8;',
+  // Additional class attributes in addition to the plugin option(buttonClass). default to empty.
+  additionalButtonClass: '',
+  // Name of title attribute in Button. default to "Copy".
+  title: 'Copy',
+});
+```

package.json

@@ -1,20 +1,22 @@
 {
   "name": "eleventy-plugin-code-clipboard",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "eleventy plugin to copy fence into clipboard",
   "homepage": "https://github.com/mamezou-tech/eleventy-plugin-code-clipboard",
   "main": ".eleventy.js",
   "scripts": {
     "test": "jest ./test/test.js",
     "test:update-snapshot": "jest ./test/test.js --updateSnapshot",
-    "lint": "eslint --fix ."
+    "lint:fix": "eslint --fix .",
+    "lint": "eslint ."
   },
   "author": "kudoh",
   "license": "MIT",
   "keywords": [
-    "11ty plugin",
-    "eleventy plugin",
-    "clipboard"
+    "11ty-plugin",
+    "eleventy-plugin",
+    "clipboard",
+    "markdown-it"
   ],
   "devDependencies": {
     "eslint": "^8.6.0",

test/__snapshots__/test.js.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`clipboard.js initialization custom plugin config 1`] = `
-"<script>function toggleTooltip(e,o){e.trigger.className.includes(\\"tooltipped\\")||(e.trigger.children[0].className=\\"tooltipped tooltipped-s\\",e.trigger.children[0].ariaLabel=o),setTimeout(()=>{e.trigger.children[0].className=\\"\\",e.trigger.children[0].ariaLabel=\\"\\"},2e3)}window.onload=()=>{const e=new ClipboardJS(\\"\\");e.on(\\"success\\",e=>toggleTooltip(e,\\"Copied!\\")),e.on(\\"error\\",e=>toggleTooltip(e,\\"Failed...\\"))};</script>
+"<script>function toggleTooltip(e,o){e.trigger.className.includes(\\"tooltipped\\")||(e.trigger.children[0].className=\\"tooltipped tooltipped-s\\",e.trigger.children[0].ariaLabel=o),setTimeout(()=>{e.trigger.children[0].className=\\"\\",e.trigger.children[0].ariaLabel=\\"\\"},2e3)}window.onload=()=>{const e=new ClipboardJS(\\".test-button\\");e.on(\\"success\\",e=>toggleTooltip(e,\\"Success!!\\")),e.on(\\"error\\",e=>toggleTooltip(e,\\"Failure!!\\"))};</script>
 <script src=\\"https://cdn.jsdelivr.net/npm/clipboard@2.0.0/dist/clipboard.js\\"></script>"
 `;
 
 exports[`clipboard.js initialization default plugin config 1`] = `
-"<script>function toggleTooltip(e,o){e.trigger.className.includes(\\"tooltipped\\")||(e.trigger.children[0].className=\\"tooltipped tooltipped-s\\",e.trigger.children[0].ariaLabel=o),setTimeout(()=>{e.trigger.children[0].className=\\"\\",e.trigger.children[0].ariaLabel=\\"\\"},2e3)}window.onload=()=>{const e=new ClipboardJS(\\"\\");e.on(\\"success\\",e=>toggleTooltip(e,\\"Copied!\\")),e.on(\\"error\\",e=>toggleTooltip(e,\\"Failed...\\"))};</script>
+"<script>function toggleTooltip(e,o){e.trigger.className.includes(\\"tooltipped\\")||(e.trigger.children[0].className=\\"tooltipped tooltipped-s\\",e.trigger.children[0].ariaLabel=o),setTimeout(()=>{e.trigger.children[0].className=\\"\\",e.trigger.children[0].ariaLabel=\\"\\"},2e3)}window.onload=()=>{const e=new ClipboardJS(\\".code-copy\\");e.on(\\"success\\",e=>toggleTooltip(e,\\"Copied!\\")),e.on(\\"error\\",e=>toggleTooltip(e,\\"Failed...\\"))};</script>
 <script src=\\"https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.js\\"></script>"
 `;
 

test/test.js

@@ -19,6 +19,8 @@ describe('clipboard.js initialization', () => {
     plugin.configFunction(eleventyConfig, {
       clipboardJSVersion: '2.0.0',
       buttonClass: 'test-button',
+      successMessage: 'Success!!',
+      failureMessage: 'Failure!!',
     });
     expect(mockAddShortcode).toHaveBeenCalledTimes(1);
     const onloadScript = mockAddShortcode.mock.calls[0][1]();