Merge pull request #11 from Ovski4/webpack-build

Webpack build

.github/workflows/node.js.yml

@@ -0,0 +1,28 @@
+name: Node.js CI
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x, 18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run build --if-present
+    - run: npm test

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -1,9 +1,16 @@
 Jekyll Tabs
 ===========
 
+[![Jest tests](https://github.com/Ovski4/jekyll-tabs/actions/workflows/node.js.yml/badge.svg)](https://github.com/Ovski4/jekyll-tabs/actions/workflows/node.js.yml)
+
 This Jekyll plugin provides tags used to add tabs in your content. It is heavily inspired from https://github.com/clustergarage/jekyll-code-tabs.
-  * It works with multiple tab panels on the same page
-  * It does not require a specific javascript framework
+  * It works with multiple tab panels on the same page.
+  * It does not require a specific javascript framework.
+
+Additionally, you can:
+  * Sync tabs with similar labels.
+  * Have a specific tab automatically opened on page load.
+  * Add a "copy to clipboard" button for tabs that contain code.
 
 Installation
 ------------
@@ -140,13 +147,36 @@ Which is why in the above example, we have 2 groups of tabs: `data-struct` and `
 Additional configuration
 ------------------------
 
+Developers can configure specific tab behaviors by passing an object as an argument to the `jekyllTabs` module [init()](https://github.com/Ovski4/jekyll-tabs/blob/master/docs/tabs.js#L3) method. Without passing any object, the default configuration is equivalent to the following:
+
+```
+jekyllTabs.init({
+    syncTabsWithSameLabels: false,
+    activateTabFromUrl: false,
+    addCopyToClipboardButtons: false,
+    copyToClipboardButtonHtml: '<button>Copy</button>',
+});
+```
+
 ### Sync tabs with similar labels
 
-To get all tabs with the same label synced, set the `syncTabsWithSameLabels` value to **true** in the `jekyllTabsConfiguration` object ([link to related line of code](https://github.com/Ovski4/jekyll-tabs/blob/master/docs/tabs.js#L5)).
+To get all tabs with the same label synced, set the `syncTabsWithSameLabels` property value to **true**.
+
+```
+jekyllTabs.init({
+    syncTabsWithSameLabels: true,
+});
+```
 
 ### Open a specific tab on page load
 
-To link and open a specific tab on page load, set the `activateTabFromUrl` value to **true** in the `jekyllTabsConfiguration` object ([link to related line of code](https://github.com/Ovski4/jekyll-tabs/blob/master/docs/tabs.js#L6)).
+To link and open a specific tab on page load, set the `activateTabFromUrl` property value to **true**.
+
+```
+jekyllTabs.init({
+    activateTabFromUrl: true,
+});
+```
 
 You will need to append a combination of url anchor (#) and query param (?active_tab) to the page URL.
 
@@ -157,8 +187,15 @@ Clicking on a tab will automatically set the anchor and query parameter in the u
 
 ### Add a copy to clipboard button
 
-To get a button to copy the code within a tab, set the `addCopyToClipboardButton` value to **true** in the `jekyllTabsConfiguration` object ([link to related line of code](https://github.com/Ovski4/jekyll-tabs/blob/master/docs/tabs.js#L7)).
+To get a button that will copy the code within a tab, set the `addCopyToClipboardButtons` property value to **true**.
 
 This will apply only if `<pre>` tags can be found inside the tabs contents.
 
-You can override the button HTML using the `copyToClipboardButtonHtml` property.
+You can override the button HTML using the `copyToClipboardButtonHtml` property. The default value is `<button>Copy</button>`.
+
+```
+jekyllTabs.init({
+    addCopyToClipboardButtons: true,
+    copyToClipboardButtonHtml: '<button class="btn">Copy me!</button>'
+});
+```

jest.config.js

@@ -0,0 +1,8 @@
+/** @type {import('jest').Config} */
+const config = {
+    verbose: true,
+    testEnvironment: 'jsdom',
+    collectCoverage: true,
+};
+
+module.exports = config;