security-widget v1.0.0

Security Widget

A modern, embeddable JavaScript widget that displays security information on websites.

Features

• Lightweight and dependency-free
• Customizable appearance (themes, positions)
• Easy to embed with a single script tag
• Configuration via data attributes or JavaScript API
• Responsive design that works on all devices
• Semantic versioning for reliable updates

Installation

Via CDN (Recommended)

Add the following script tag to your HTML:

<script 
  src="https://cdn.example.com/security-widget/1.0.0/widget.js" 
  data-security-widget 
  data-theme="light" 
  data-position="bottom-right" 
  data-title="Security Status" 
  data-show-icon="true" 
  data-auto-show="true">
</script>

Self-hosted

1. Download the latest release from the releases page
2. Include the script in your HTML:

<script 
  src="/path/to/widget.1.0.0.js" 
  data-security-widget 
  data-theme="light" 
  data-position="bottom-right">
</script>

Configuration Options

You can configure the widget using data attributes on the script tag or via the JavaScript API.

Data Attributes

JavaScript API

// Import the widget (if using modules)
// import SecurityWidget from 'security-widget';

// Initialize with configuration
SecurityWidget.init({
  theme: 'light',
  position: 'bottom-right',
  title: 'Security Status',
  showIcon: true,
  cookiesSecure: true,
  dataProtection: false,
  onOpen: function() {
    console.log('Widget opened');
  },
  onClose: function() {
    console.log('Widget closed');
  }
});

// Show the widget
SecurityWidget.show();

// Hide the widget
SecurityWidget.hide();

// Toggle widget visibility
SecurityWidget.toggle();

// Update configuration
SecurityWidget.updateConfig({
  theme: 'dark',
  position: 'top-right'
});

// Get the widget instance
const instance = SecurityWidget.getInstance();

// Get the widget version
const version = SecurityWidget.getVersion();
// or
const version = SecurityWidget.VERSION;

// Destroy the widget
SecurityWidget.destroy();

Versioning

This widget follows Semantic Versioning (SemVer):

• MAJOR version for incompatible API changes (e.g., 1.0.0 → 2.0.0)
• MINOR version for new functionality in a backward compatible manner (e.g., 1.0.0 → 1.1.0)
• PATCH version for backward compatible bug fixes (e.g., 1.0.0 → 1.0.1)

When using the widget in production, we recommend:

1. Pinning to a specific version: widget.1.0.0.js
2. Or pinning to a major version: widget.1.x.x.js (if your CDN supports this pattern)

CDN Deployment

For production use, the widget is available on multiple CDNs:

<!-- From our CDN -->
<script src="https://cdn.example.com/security-widget/1.0.0/widget.js"></script>

<!-- If published to npm, from unpkg -->
<script src="https://unpkg.com/security-widget@1.0.0/dist/widget.js"></script>

<!-- If published to npm, from jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/security-widget@1.0.0/dist/widget.js"></script>

Development

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Setup

1. Clone the repository:

   git clone https://github.com/yourusername/security-widget.git
   cd security-widget

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Build for production:

   npm run build           # Regular build
   npm run build:patch     # Increment patch version (1.0.0 → 1.0.1)
   npm run build:minor     # Increment minor version (1.0.0 → 1.1.0)
   npm run build:major     # Increment major version (1.0.0 → 2.0.0)

License

MIT