Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack build #11

Merged
merged 21 commits into from
Dec 3, 2023
Merged
Show file tree
Hide file tree
Changes from 18 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions .github/workflows/node.js.yml
Original file line number Diff line number Diff line change
@@ -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
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules
47 changes: 41 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,13 @@ Jekyll Tabs
===========

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
------------
Expand Down Expand Up @@ -140,13 +145,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.

Expand All @@ -157,8 +185,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>'
});
```
241 changes: 2 additions & 239 deletions docs/tabs.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 8 additions & 0 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/** @type {import('jest').Config} */
const config = {
verbose: true,
testEnvironment: 'jsdom',
collectCoverage: true,
};

module.exports = config;
Loading