@kung-fu/components

A lightweight, dependency-free library for enhancing HTML with vanilla JavaScript.

Overview

@kung-fu/components provides vanilla JavaScript utilities to enhance HTML documents with common UI patterns without the need for heavy frameworks. This library focuses on simplicity, performance, and zero external dependencies.

Features

- AudioPlayer: Create customizable audio players with playlist support
- List Style Management: Automatically apply appropriate styles to nested lists
- Figure Generation: Enhance image semantics by wrapping them with figure and figcaption elements

Installation

``bash
npm install @kung-fu/components
`

Usage

$3

`javascript
import { createAudioPlayer } from '@kung-fu/components';

// Create a simple audio player
const player = createAudioPlayer('audio-container', 'default.mp3');

// Add playlist functionality
player.withPlaylist('playlist-container');
`

HTML Structure:

`html


Track 1

Track 2


`

$3

`javascript
import { rotateListStyleType } from '@kung-fu/components';

// Apply default style rotation to all lists
rotateListStyleType();

// Apply custom style rotation to specific lists
rotateListStyleType('.content-list', ['decimal', 'lower-alpha', 'lower-roman']);
`

$3

`javascript
import { wrapImageWithFigure } from '@kung-fu/components';

// Wrap all images with figure elements
wrapImageWithFigure();

// Wrap only specific images
wrapImageWithFigure('.article-image');

// Use a custom attribute to exclude images
wrapImageWithFigure('img', 'data-no-figure');
`

Documentation

Complete API documentation is available in the docs folder or by running:

`bash
npm run docs:serve
``

Then open your browser to http://localhost:3000/

License

MIT