Skip to content

Commit 0017635

Browse files
dev-aditya-labdev-aditya-lab
committed
update README and CDN documentation; bump version to 1.1.3; remove obsolete test HTML file
1 parent ef4c185 commit 0017635

File tree

4 files changed

+46
-153
lines changed

4 files changed

+46
-153
lines changed

‎README.md‎

Lines changed: 5 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
![npm](https://img.shields.io/npm/v/webdev-power-kit)
2+
![license](https://img.shields.io/npm/l/webdev-power-kit)
3+
![issues](https://img.shields.io/github/issues/dev-aditya-lab/webdev-power-kit)
4+
5+
16
# Webdev Power Kit ⚡
27

38
A modern JavaScript toolkit that makes using powerful browser features super easy.
@@ -10,58 +15,7 @@ Copy to clipboard, send notifications, check battery level, vibrate device, and
1015
```bash
1116
npm install webdev-power-kit
1217
```
13-
14-
## 🌐 CDN Usage (Vanilla HTML + JS)
15-
16-
You can use it directly in your browser using **Skypack CDN** or **jsDelivr**.
17-
18-
> ✅ Works in `type="module"` script
19-
> ⚠️ Works only on `https` or `localhost` due to browser API restrictions.
20-
21-
### ✅ Example using **[jsDelivr](https://cdn.jsdelivr.net/npm/webdev-power-kit/+esm)**
22-
23-
```html
24-
<!DOCTYPE html>
25-
<html lang="en">
26-
<head>
27-
<title>WebDev Power Kit - CDN Example</title>
28-
</head>
29-
<body>
30-
<button id="copyBtn">Copy to Clipboard</button>
31-
32-
<script type="module">
33-
import { copyToClipboard } from 'https://cdn.jsdelivr.net/npm/webdev-power-kit/+esm';
34-
35-
document.getElementById("copyBtn").addEventListener("click", () => {
36-
copyToClipboard("Text from WebDev Power Kit!");
37-
alert("Text copied ✅");
38-
});
39-
</script>
40-
</body>
41-
</html>
42-
```
43-
4418
---
45-
46-
### 🔁 CDN Mirror Options
47-
48-
- **[jsDelivr](https://cdn.jsdelivr.net/npm/webdev-power-kit/+esm)**
49-
```url
50-
https://cdn.jsdelivr.net/npm/webdev-power-kit/+esm
51-
```
52-
53-
- **[UNPKG](https://unpkg.com/webdev-power-kit/+esm)**
54-
```url
55-
https://unpkg.com/webdev-power-kit/+esm
56-
```
57-
58-
- **[Skypack](https://cdn.skypack.dev/webdev-power-kit)**
59-
```url
60-
https://cdn.skypack.dev/webdev-power-kit
61-
```
62-
63-
---
64-
6519
# 📋 Clipboard API – webdev-power-kit
6620

6721
This module gives you two super easy functions to interact with the browser clipboard using modern APIs.

‎cnddocs.md‎

Lines changed: 40 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,51 @@
11

2-
# 🌙 Dark Mode API – webdev-power-kit
3-
4-
This module detects whether the user prefers dark or light mode, and lets you listen to theme changes in real-time using the system’s color scheme preference.
5-
6-
---
7-
8-
## ✨ Features
9-
10-
* Detect if dark mode is enabled by system/browser
11-
* Listen for real-time theme changes
12-
* Useful for automatic theming or toggles
13-
* Uses native `window.matchMedia`
14-
15-
---
16-
17-
## ✅ Functions
18-
19-
### 1. `isDarkMode()`
20-
21-
📌 Returns whether the user’s system prefers dark mode.
22-
23-
```js
24-
import { isDarkMode } from "webdev-power-kit";
25-
26-
if (isDarkMode()) {
27-
console.log("🌙 Dark mode is enabled");
28-
} else {
29-
console.log("☀️ Light mode is enabled");
30-
}
2+
## 🌐 CDN Usage (Vanilla HTML + JS)
3+
4+
You can use it directly in your browser using **Skypack CDN** or **jsDelivr**.
5+
6+
> ✅ Works in `type="module"` script
7+
> ⚠️ Works only on `https` or `localhost` due to browser API restrictions.
8+
9+
### ✅ Example using **[jsDelivr](https://cdn.jsdelivr.net/npm/webdev-power-kit/+esm)**
10+
11+
```html
12+
<!DOCTYPE html>
13+
<html lang="en">
14+
<head>
15+
<title>WebDev Power Kit - CDN Example</title>
16+
</head>
17+
<body>
18+
<button id="copyBtn">Copy to Clipboard</button>
19+
20+
<script type="module">
21+
import { copyToClipboard } from 'https://cdn.jsdelivr.net/npm/webdev-power-kit/+esm';
22+
23+
document.getElementById("copyBtn").addEventListener("click", () => {
24+
copyToClipboard("Text from WebDev Power Kit!");
25+
alert("Text copied ✅");
26+
});
27+
</script>
28+
</body>
29+
</html>
3130
```
3231

33-
#### 🔁 Returns:
34-
35-
* `true` → if user prefers dark mode
36-
* `false` → if light mode is preferred
37-
3832
---
3933

40-
### 2. `listenDarkMode(callback)`
34+
### 🔁 CDN Mirror Options
4135

42-
📌 Listen to changes in the system theme (dark ↔️ light) in real-time.
43-
44-
```js
45-
import { listenDarkMode } from "webdev-power-kit";
46-
47-
listenDarkMode((isDark) => {
48-
console.log("Theme changed:", isDark ? "Dark" : "Light");
49-
});
36+
- **[jsDelivr](https://cdn.jsdelivr.net/npm/webdev-power-kit/+esm)**
37+
```url
38+
https://cdn.jsdelivr.net/npm/webdev-power-kit/+esm
5039
```
5140

52-
#### 📥 Parameters:
53-
54-
| Param | Type | Description |
55-
| ---------- | --------------------------- | -------------------------------------------------------- |
56-
| `callback` | `(isDark: boolean) => void` | Called with `true` for dark mode, `false` for light mode |
57-
58-
#### 🔁 Returns:
59-
60-
* A function to unsubscribe and stop listening
61-
62-
---
63-
64-
## 🔐 Browser Support
41+
- **[UNPKG](https://unpkg.com/webdev-power-kit/+esm)**
42+
```url
43+
https://unpkg.com/webdev-power-kit/+esm
44+
```
6545

66-
| Browser | Supported? | Notes |
67-
| ------- | ---------- | -------------------------------- |
68-
| Chrome | ✅ | Fully supported |
69-
| Firefox | ✅ | Fully supported |
70-
| Edge | ✅ | Fully supported |
71-
| Safari | ✅ | Fully supported (macOS/iOS only) |
72-
| Mobile | ✅ | Most modern devices supported |
46+
- **[Skypack](https://cdn.skypack.dev/webdev-power-kit)**
47+
```url
48+
https://cdn.skypack.dev/webdev-power-kit
49+
```
7350

7451
---
75-
76-
## 💡 Use Cases
77-
78-
* Auto-switch theme on page load
79-
* Show theme toggle suggestion
80-
* Sync app theme with OS settings
81-
* Apply different CSS styles dynamically
82-

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "webdev-power-kit",
3-
"version": "1.1.2",
3+
"version": "1.1.3",
44
"description": "A powerful toolkit that simplifies access to browser features like clipboard, notifications, battery, vibration, and more — perfect for modern web developers.",
55
"keywords": [
66
"webdev",

‎test/index.html‎

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +0,0 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>Webdev Power Kit Test</title>
6-
</head>
7-
<body>
8-
<h2>Clipboard Test</h2>
9-
<button id="copy">Copy Text</button>
10-
<button id="read">Read Clipboard</button>
11-
<p id="result"></p>
12-
<hr>
13-
<button id="notify">Send Notification</button>
14-
<hr>
15-
<button id="battery">Check Battery</button>
16-
<p id="battery-output"></p>
17-
<hr>
18-
<p id="status">Checking network...</p>
19-
<hr>
20-
<p id="tab-status">Tab visibility: ...</p>
21-
<hr>
22-
<p id="idle">Status: Active</p>
23-
<hr>
24-
<button id="enable">Enable Tab Protection</button>
25-
<button id="disable">Disable Tab Protection</button>
26-
<hr>
27-
<p id="theme-status">Checking theme...</p>
28-
<script type="module" src="testScript.js"> </script>
29-
</body>
30-
</html>

0 commit comments

Comments
 (0)