@kung-fu/components v0.4.0

@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

npm install @kung-fu/components

Usage

Audio Player

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:

<div id="audio-container">
  <audio></audio>
  <div id="audio-player-cover"></div>
  <div id="audio-player-title"></div>
  <div id="audio-player-date"></div>
  <div id="audio-player-summary"></div>
</div>

<dl id="playlist-container">
  <dt data-source="track1.mp3" data-cover-img="cover1.jpg" data-title="Track 1" data-pub="2023-01-01" data-summary="This is track 1">Track 1</dt>
  <dt data-source="track2.mp3" data-cover-img="cover2.jpg" data-title="Track 2" data-pub="2023-01-02" data-summary="This is track 2">Track 2</dt>
</dl>

List Style Management

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']);

Figure Generation

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:

npm run docs:serve

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

License

MIT

Additional Documentation

• Globals