style-logs 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +112 -0
- package/dist/index.d.mts +39 -2
- package/dist/index.d.ts +39 -2
- package/dist/index.js +584 -68
- package/dist/index.mjs +577 -63
- package/package.json +8 -14
package/README.md
ADDED
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
|
|
3
|
+
<img src="https://raw.githubusercontent.com/kunalkandepatil/.github/refs/heads/main/assets/style-logs/banner.svg" alt="style-logs banner" />
|
|
4
|
+
<br>
|
|
5
|
+
<br>
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
# **˗ˏˋ Style Logs ´ˎ˗**
|
|
9
|
+
Bring your terminal to life with a simple, CSS-like syntax. Effortlessly create vibrant logs featuring gradients, rainbows, badges, and animations directly inside your template literals.
|
|
10
|
+
|
|
11
|
+
[](https://www.npmjs.com/package/style-logs)
|
|
12
|
+
[](https://www.npmjs.com/package/style-logs)
|
|
13
|
+
[](https://github.com/kunalkandepatil/style-logs/blob/main/LICENSE)
|
|
14
|
+
[](https://github.com/kunalkandepatil/style-logs)
|
|
15
|
+
|
|
16
|
+
<br>
|
|
17
|
+
|
|
18
|
+
<img src="https://raw.githubusercontent.com/kunalkandepatil/.github/refs/heads/main/assets/style-logs/features.svg" alt="style-logs features" />
|
|
19
|
+
|
|
20
|
+
<br>
|
|
21
|
+
|
|
22
|
+
</div>
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## 📄 Documentation
|
|
26
|
+
### ╰┈1️⃣ Quick Start
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
npm install style-logs
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
```javascript
|
|
33
|
+
const { log } = require("style-logs");
|
|
34
|
+
|
|
35
|
+
log(`{color: red; bold}Hello World!{/}`);
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
<p align="center">≪ ◦ ✦ ◦ ≫</p>
|
|
39
|
+
|
|
40
|
+
### ╰┈2️⃣ Preview
|
|
41
|
+
Run this -> **[Example](Example/index.js)**
|
|
42
|
+
|
|
43
|
+
<img src="https://raw.githubusercontent.com/kunalkandepatil/.github/refs/heads/main/assets/style-logs/preview.gif" alt="style-logs features" />
|
|
44
|
+
<br>
|
|
45
|
+
<br>
|
|
46
|
+
<p align="center">≪ ◦ ✦ ◦ ≫</p>
|
|
47
|
+
|
|
48
|
+
### ╰┈3️⃣ Features
|
|
49
|
+
|
|
50
|
+
#### 1. The Magic Syntax
|
|
51
|
+
Use curly braces `{}` to style text. It's like CSS for your console.
|
|
52
|
+
|
|
53
|
+
```javascript
|
|
54
|
+
log(`{color: cyan}I am Cyan!{/}`);
|
|
55
|
+
log(`{bg: yellow; color: black}Warning!{/}`);
|
|
56
|
+
log(`{bold; underline}Important Text{/}`);
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
#### 2. Gradients & Rainbows
|
|
60
|
+
Why settle for one color?
|
|
61
|
+
|
|
62
|
+
```javascript
|
|
63
|
+
// Two color gradient
|
|
64
|
+
log(`{gradient: red, blue}This looks amazing!{/}`);
|
|
65
|
+
|
|
66
|
+
// Full spectrum rainbow
|
|
67
|
+
log(`{rainbow; bold}Taste the rainbow!{/}`);
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
#### 3. Badges & Borders
|
|
71
|
+
Perfect for status messages.
|
|
72
|
+
|
|
73
|
+
```javascript
|
|
74
|
+
log(`{badge: success} Success {/} {badge: error} Failed {/}`);
|
|
75
|
+
|
|
76
|
+
log(`{border: green}
|
|
77
|
+
Everything is inside
|
|
78
|
+
a nice green box!
|
|
79
|
+
{/}`);
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
#### 4. Animations
|
|
83
|
+
Bring your logs to life.
|
|
84
|
+
|
|
85
|
+
```javascript
|
|
86
|
+
const { animate } = require("style-logs");
|
|
87
|
+
|
|
88
|
+
// Typewriter effect
|
|
89
|
+
await animate.typewriter("{color: green}Wake up, Neo...{/}");
|
|
90
|
+
|
|
91
|
+
// Glitch effect
|
|
92
|
+
await animate.glitch("{color: red}System Failure{/}");
|
|
93
|
+
|
|
94
|
+
// Looping Rainbow
|
|
95
|
+
const loop = animate.rainbow("Party Time!", { loop: true });
|
|
96
|
+
// Stop it later
|
|
97
|
+
loop.stop();
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
#### 5. AI Features
|
|
101
|
+
Building an AI tool? We got you.
|
|
102
|
+
|
|
103
|
+
```javascript
|
|
104
|
+
// Thinking spinner
|
|
105
|
+
await animate.thinking("AI is thinking...", promise, { frames: "dots" });
|
|
106
|
+
|
|
107
|
+
// Stream text like ChatGPT
|
|
108
|
+
await animate.stream("Here is the generated response...");
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
## 🎧 Support Server
|
|
112
|
+
<a href="https://discord.gg/W8wTjESM3t"><img src="https://raw.githubusercontent.com/kunalkandepatil/.github/refs/heads/main/assets/discord.svg" alt="support server" /></a>
|
package/dist/index.d.mts
CHANGED
|
@@ -1,3 +1,40 @@
|
|
|
1
|
-
|
|
1
|
+
type AnimationControl = Promise<void> & {
|
|
2
|
+
stop: () => void;
|
|
3
|
+
};
|
|
4
|
+
declare const SPINNERS: {
|
|
5
|
+
line: string[];
|
|
6
|
+
circle: string[];
|
|
7
|
+
dots: string[];
|
|
8
|
+
bounce: string[];
|
|
9
|
+
spin: string[];
|
|
10
|
+
pulse: string[];
|
|
11
|
+
quarter: string[];
|
|
12
|
+
clock: string[];
|
|
13
|
+
square: string[];
|
|
14
|
+
bar: string[];
|
|
15
|
+
hourglass: string[];
|
|
16
|
+
};
|
|
17
|
+
declare const animate: {
|
|
18
|
+
typewriter: (text: string, speedOrOptions?: number | {
|
|
19
|
+
speed?: number;
|
|
20
|
+
loop?: boolean;
|
|
21
|
+
}) => AnimationControl;
|
|
22
|
+
gradient: (text: string, durationOrOptions?: number | {
|
|
23
|
+
duration?: number;
|
|
24
|
+
loop?: boolean;
|
|
25
|
+
}) => AnimationControl;
|
|
26
|
+
glitch: (text: string, durationOrOptions?: number | {
|
|
27
|
+
duration?: number;
|
|
28
|
+
loop?: boolean;
|
|
29
|
+
}) => AnimationControl;
|
|
30
|
+
thinking: (text: string, durationOrPromise?: number | Promise<any>, colorOrOptions?: string | {
|
|
31
|
+
color?: string;
|
|
32
|
+
frames?: string[] | keyof typeof SPINNERS;
|
|
33
|
+
}) => Promise<void>;
|
|
34
|
+
stream: (text: string, minSpeed?: number, maxSpeed?: number) => AnimationControl;
|
|
35
|
+
};
|
|
2
36
|
|
|
3
|
-
|
|
37
|
+
declare function style(input: string): string;
|
|
38
|
+
declare function log(args: string | TemplateStringsArray, ...values: any[]): void;
|
|
39
|
+
|
|
40
|
+
export { animate, log, style };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,40 @@
|
|
|
1
|
-
|
|
1
|
+
type AnimationControl = Promise<void> & {
|
|
2
|
+
stop: () => void;
|
|
3
|
+
};
|
|
4
|
+
declare const SPINNERS: {
|
|
5
|
+
line: string[];
|
|
6
|
+
circle: string[];
|
|
7
|
+
dots: string[];
|
|
8
|
+
bounce: string[];
|
|
9
|
+
spin: string[];
|
|
10
|
+
pulse: string[];
|
|
11
|
+
quarter: string[];
|
|
12
|
+
clock: string[];
|
|
13
|
+
square: string[];
|
|
14
|
+
bar: string[];
|
|
15
|
+
hourglass: string[];
|
|
16
|
+
};
|
|
17
|
+
declare const animate: {
|
|
18
|
+
typewriter: (text: string, speedOrOptions?: number | {
|
|
19
|
+
speed?: number;
|
|
20
|
+
loop?: boolean;
|
|
21
|
+
}) => AnimationControl;
|
|
22
|
+
gradient: (text: string, durationOrOptions?: number | {
|
|
23
|
+
duration?: number;
|
|
24
|
+
loop?: boolean;
|
|
25
|
+
}) => AnimationControl;
|
|
26
|
+
glitch: (text: string, durationOrOptions?: number | {
|
|
27
|
+
duration?: number;
|
|
28
|
+
loop?: boolean;
|
|
29
|
+
}) => AnimationControl;
|
|
30
|
+
thinking: (text: string, durationOrPromise?: number | Promise<any>, colorOrOptions?: string | {
|
|
31
|
+
color?: string;
|
|
32
|
+
frames?: string[] | keyof typeof SPINNERS;
|
|
33
|
+
}) => Promise<void>;
|
|
34
|
+
stream: (text: string, minSpeed?: number, maxSpeed?: number) => AnimationControl;
|
|
35
|
+
};
|
|
2
36
|
|
|
3
|
-
|
|
37
|
+
declare function style(input: string): string;
|
|
38
|
+
declare function log(args: string | TemplateStringsArray, ...values: any[]): void;
|
|
39
|
+
|
|
40
|
+
export { animate, log, style };
|