Skip to content

Commit af200d7

Browse files
bruno-sartoribruno-sartori
committed
refactor(readme): update readme
1 parent 10b4325 commit af200d7

27 files changed

+224
-96
lines changed

‎README.md‎

Lines changed: 85 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)
1+
[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/) ![NPM Version](https://img.shields.io/npm/v/%40bsartori%2Fweeb-logger)
2+
23

34
# Weeb Logger
45

5-
Weeb Logger is a JS Canvas component for logging on devices that are problematic to use debugging tools (specially if you are using some external framework for developing those ahead) like Samsung Tizen, LG webOS or Chromecast. Plus you can customize it with your favorite waifu! :3
6+
Weeb Logger is a JS Canvas component for logging on devices that are problematic to use debugging tools (specially if you are using some external framework for developing those ahead) like Samsung Tizen, LG webOS or Chromecast. Plus you can customize it with your favorite waifu! :3
67

78
## Installation
89

@@ -27,14 +28,95 @@ logger.configure({
2728
});
2829

2930
logger.info('SOME LABEL', 'A string or object here!');
30-
logger.warning('WARN', 'This is an warning');
31+
logger.warn('WARN', 'This is an warning');
3132
logger.error('Api Error', 'This is an error');
3233
logger.success('JSON', { lorem: 'ipsum', dolor: {
3334
sit: 'amet'
3435
}});
3536
logger.highlight('IMPORTANT', 'This is an highlight info');
3637
```
3738

39+
This will result in:
40+
41+
![Log in DevTools](./docs/devtools-log.jpg)
42+
43+
44+
### Using visual: true will create the visual logger container on your web project
45+
46+
![Log in DevTools](./docs/logger-on-web-project.jpg)
47+
48+
### Resizable
49+
![Log in DevTools](./docs/resizing.gif)
50+
51+
### Available Waifus
52+
```
53+
name: 'akeno'
54+
```
55+
![Log in DevTools](./docs/logger-akeno.jpg)
56+
```
57+
name: 'alya'
58+
```
59+
![Log in DevTools](./docs/logger-alya.jpg)
60+
```
61+
name: 'tohka'
62+
```
63+
![Log in DevTools](./docs/logger-tohka.jpg)
64+
```
65+
name: 'aqua'
66+
```
67+
![Log in DevTools](./docs/logger-aqua.jpg)
68+
```
69+
name: 'ayano'
70+
```
71+
![Log in DevTools](./docs/logger-ayano.jpg)
72+
```
73+
name: 'darkness'
74+
```
75+
![Log in DevTools](./docs/logger-darkness.jpg)
76+
```
77+
name: 'koneko'
78+
```
79+
![Log in DevTools](./docs/logger-koneko.jpg)
80+
```
81+
name: 'masha'
82+
```
83+
![Log in DevTools](./docs/logger-masha.jpg)
84+
```
85+
name: 'megumin'
86+
```
87+
![Log in DevTools](./docs/logger-megumin.jpg)
88+
```
89+
name: 'yuki'
90+
```
91+
![Log in DevTools](./docs/logger-yuki.jpg)
92+
```
93+
name: 'zerotwo'
94+
```
95+
![Log in DevTools](./docs/logger-zerotwo.jpg)
96+
97+
98+
## Testing
99+
100+
To test the package, simply run:
101+
102+
```sh
103+
yarn test
104+
```
105+
Please make sure all tests pass before submiting a PR
106+
107+
![Log in DevTools](./docs/test.jpg)
108+
109+
## Technologies used in this project
110+
111+
| Name | Description |
112+
|----------------|-----------------------------------------------------------------------------------------------------------------------------------------|
113+
| [Node.js](https://nodejs.org/en) | Node.js is a Javascript runtime bbuild on Chrome`s V8 JavaScript |
114+
| [Jest](https://jestjs.io/) | Jest is a JavaScript framework for testing |
115+
| [Typescript](https://www.typescriptlang.org) | Typescript extends JavaScript by adding types to the language |
116+
| [Chalk](https://github.com/chalk/chalk) | Chalk is a nodejs dependency for terminal string |
117+
| [Canvas](https://developer.mozilla.org/pt-BR/docs/Web/API/Canvas_API) | Canvas provides a means for drawing graphics via JavaScript and the HTML element |
118+
119+
38120
## Contributing
39121

40122
Pull requests are welcome. For major changes, please open an issue first

‎coverage/clover.xml‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<?xml version="1.0" encoding="UTF-8"?>
2-
<coverage generated="1724608120061" clover="3.2.0">
3-
<project timestamp="1724608120061" name="All files">
4-
<metrics statements="279" coveredstatements="227" conditionals="118" coveredconditionals="90" methods="34" coveredmethods="31" elements="431" coveredelements="348" complexity="0" loc="279" ncloc="279" packages="1" files="4" classes="4"/>
2+
<coverage generated="1724611056000" clover="3.2.0">
3+
<project timestamp="1724611056000" name="All files">
4+
<metrics statements="279" coveredstatements="227" conditionals="136" coveredconditionals="102" methods="34" coveredmethods="31" elements="449" coveredelements="360" complexity="0" loc="279" ncloc="279" packages="1" files="4" classes="4"/>
55
<file name="CanvasHandler.ts" path="C:\Users\BrunoSartori\Documents\Projects\logger\src\CanvasHandler.ts">
66
<metrics statements="77" coveredstatements="76" conditionals="15" coveredconditionals="11" methods="9" coveredmethods="9"/>
77
<line num="1" count="1" type="stmt"/>
@@ -91,7 +91,7 @@
9191
<line num="17" count="1" type="stmt"/>
9292
</file>
9393
<file name="index.ts" path="C:\Users\BrunoSartori\Documents\Projects\logger\src\index.ts">
94-
<metrics statements="151" coveredstatements="102" conditionals="75" coveredconditionals="53" methods="14" coveredmethods="11"/>
94+
<metrics statements="151" coveredstatements="102" conditionals="93" coveredconditionals="65" methods="14" coveredmethods="11"/>
9595
<line num="1" count="1" type="stmt"/>
9696
<line num="2" count="1" type="stmt"/>
9797
<line num="3" count="1" type="stmt"/>

‎coverage/coverage-final.json‎

Lines changed: 2 additions & 2 deletions
Large diffs are not rendered by default.

‎coverage/lcov-report/CanvasHandler.ts.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -550,7 +550,7 @@ <h1><a href="index.html">All files</a> CanvasHandler.ts</h1>
550550
<div class='footer quiet pad2 space-top1 center small'>
551551
Code coverage generated by
552552
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
553-
at 2024-08-25T17:48:40.028Z
553+
at 2024-08-25T18:37:35.973Z
554554
</div>
555555
<script src="prettify.js"></script>
556556
<script>

‎coverage/lcov-report/constants.ts.html‎

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,14 @@ <h1><a href="index.html">All files</a> constants.ts</h1>
159159
<a name='L94'></a><a href='#L94'>94</a>
160160
<a name='L95'></a><a href='#L95'>95</a>
161161
<a name='L96'></a><a href='#L96'>96</a>
162-
<a name='L97'></a><a href='#L97'>97</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
162+
<a name='L97'></a><a href='#L97'>97</a>
163+
<a name='L98'></a><a href='#L98'>98</a>
164+
<a name='L99'></a><a href='#L99'>99</a>
165+
<a name='L100'></a><a href='#L100'>100</a>
166+
<a name='L101'></a><a href='#L101'>101</a>
167+
<a name='L102'></a><a href='#L102'>102</a>
168+
<a name='L103'></a><a href='#L103'>103</a>
169+
<a name='L104'></a><a href='#L104'>104</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
163170
<span class="cline-any cline-neutral">&nbsp;</span>
164171
<span class="cline-any cline-yes">1x</span>
165172
<span class="cline-any cline-neutral">&nbsp;</span>
@@ -255,6 +262,13 @@ <h1><a href="index.html">All files</a> constants.ts</h1>
255262
<span class="cline-any cline-neutral">&nbsp;</span>
256263
<span class="cline-any cline-neutral">&nbsp;</span>
257264
<span class="cline-any cline-neutral">&nbsp;</span>
265+
<span class="cline-any cline-neutral">&nbsp;</span>
266+
<span class="cline-any cline-neutral">&nbsp;</span>
267+
<span class="cline-any cline-neutral">&nbsp;</span>
268+
<span class="cline-any cline-neutral">&nbsp;</span>
269+
<span class="cline-any cline-neutral">&nbsp;</span>
270+
<span class="cline-any cline-neutral">&nbsp;</span>
271+
<span class="cline-any cline-neutral">&nbsp;</span>
258272
<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">export const SCROLLBAR_WIDTH = 10;
259273
&nbsp;
260274
export const MIN_WIDTH = 400;
@@ -272,77 +286,84 @@ <h1><a href="index.html">All files</a> constants.ts</h1>
272286
};
273287
&nbsp;
274288
export const WAIFU_THEME = {
275-
'akeno': {
289+
default: {
290+
logContainer: `background-color: rgba(32, 32, 32, 0.5);`,
291+
scrollbarTrack: `background-color: #ccc`,
292+
scrollbarThumb: `background-color: #888;`,
293+
scrollbarThumbHover: `background-color: #555;`,
294+
textColor: '#fff'
295+
},
296+
akeno: {
276297
logContainer: `background-color: rgba(79, 77, 100, 0.7);`,
277298
scrollbarTrack: `background-color: #511243;`,
278299
scrollbarThumb: `background-color: #7d2761;`,
279300
scrollbarThumbHover: `background-color: #c65d9c;`,
280301
textColor: '#fff'
281302
},
282-
'alya': {
303+
alya: {
283304
logContainer: `background-color: rgba(223, 187, 202, 0.7);`,
284305
scrollbarTrack: `background-color: #fcc7d1;`,
285306
scrollbarThumb: `background-color: #83cedd;`,
286307
scrollbarThumbHover: `background-color: #9fd7e2;`,
287308
textColor: '#fff'
288309
},
289-
'aqua': {
310+
aqua: {
290311
logContainer: `background-color: rgba(42, 53, 106, 0.7);`,
291312
scrollbarTrack: `background-color: #6093c4;`,
292313
scrollbarThumb: `background-color: #9dd1e2;`,
293314
scrollbarThumbHover: `background-color: #c9f5f7;`,
294315
textColor: '#fff',
295316
},
296-
'ayano': {
317+
ayano: {
297318
logContainer: `background-color: rgba(80, 82, 85, 0.7);`,
298319
scrollbarTrack: `background-color: #755b61;`,
299320
scrollbarThumb: `background-color: #ba8a7c;`,
300321
scrollbarThumbHover: `background-color: #ccbfb7;`,
301322
textColor: '#fff'
302323
},
303-
'darkness': {
324+
darkness: {
304325
logContainer: `background-color: rgba(255, 177, 33, 0.7);`,
305326
scrollbarTrack: `background-color: #fbbe44;`,
306327
scrollbarThumb: `background-color: #f38c28;`,
307328
scrollbarThumbHover: `background-color: #bd722c;`,
308329
textColor: '#fff',
309330
},
310-
'koneko': {
331+
koneko: {
311332
logContainer: `background-color: rgba(237, 229, 223, 0.7);`,
312333
scrollbarTrack: `background-color: #ba265e;`,
313334
scrollbarThumb: `background-color: #ca941f;`,
314335
scrollbarThumbHover: `background-color: #e5a943;`,
315336
textColor: '#000',
316337
},
317-
'masha': {
338+
masha: {
318339
logContainer: `background-color: rgba(202, 166, 144, 0.7);`,
319340
scrollbarTrack: `background: #834826;`,
320341
scrollbarThumb: `background: #c49d6d;`,
321342
scrollbarThumbHover: `background: #e4be9d;`,
322343
textColor: '#fff'
323344
},
324-
'megumin': {
345+
megumin: {
325346
logContainer: `background-color: rgba(133, 43, 62, 0.7);`,
326347
scrollbarTrack: `background: #720b0f;`,
327348
scrollbarThumb: `background: #b7213a;`,
328349
scrollbarThumbHover: `background: #c24448;`,
329350
textColor: '#fff',
330351
},
331-
'tohka': {
352+
tohka: {
332353
logContainer: `background-color: rgba(74, 35, 82, 0.7);`,
333354
scrollbarTrack: `background: #3b2754;`,
334355
scrollbarThumb: `background: #6136a5;`,
335356
scrollbarThumbHover: `background: #b62289;`,
336357
textColor: '#fff',
337358
},
338-
'yuki': {
359+
yuki: {
339360
logContainer: `background-color: rgba(96, 84, 94, 0.7);`,
340361
scrollbarTrack: `background-color: #744462;`,
341362
scrollbarThumb: `background-color: #8f5e89;`,
342363
scrollbarThumbHover: `background-color: #a577a2;`,
343364
textColor: '#fff'
344365
},
345-
'zerotwo': {
366+
zerotwo: {
346367
logContainer: `background-color: rgba(238, 198, 202, 0.7);`,
347368
scrollbarTrack: `background: #a64b5b;`,
348369
scrollbarThumb: `background: #940200;`,
@@ -358,7 +379,7 @@ <h1><a href="index.html">All files</a> constants.ts</h1>
358379
<div class='footer quiet pad2 space-top1 center small'>
359380
Code coverage generated by
360381
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
361-
at 2024-08-25T17:48:40.028Z
382+
at 2024-08-25T18:37:35.973Z
362383
</div>
363384
<script src="prettify.js"></script>
364385
<script>

‎coverage/lcov-report/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@ <h1>All files</h1>
3030

3131

3232
<div class='fl pad1y space-right2'>
33-
<span class="strong">76.27% </span>
33+
<span class="strong">75% </span>
3434
<span class="quiet">Branches</span>
35-
<span class='fraction'>90/118</span>
35+
<span class='fraction'>102/136</span>
3636
</div>
3737

3838

@@ -115,8 +115,8 @@ <h1>All files</h1>
115115
</td>
116116
<td data-value="67.76" class="pct medium">67.76%</td>
117117
<td data-value="152" class="abs medium">103/152</td>
118-
<td data-value="70.66" class="pct medium">70.66%</td>
119-
<td data-value="75" class="abs medium">53/75</td>
118+
<td data-value="69.89" class="pct medium">69.89%</td>
119+
<td data-value="93" class="abs medium">65/93</td>
120120
<td data-value="78.57" class="pct medium">78.57%</td>
121121
<td data-value="14" class="abs medium">11/14</td>
122122
<td data-value="67.54" class="pct medium">67.54%</td>
@@ -146,7 +146,7 @@ <h1>All files</h1>
146146
<div class='footer quiet pad2 space-top1 center small'>
147147
Code coverage generated by
148148
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
149-
at 2024-08-25T17:48:40.028Z
149+
at 2024-08-25T18:37:35.973Z
150150
</div>
151151
<script src="prettify.js"></script>
152152
<script>

‎coverage/lcov-report/index.ts.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@ <h1><a href="index.html">All files</a> index.ts</h1>
3030

3131

3232
<div class='fl pad1y space-right2'>
33-
<span class="strong">70.66% </span>
33+
<span class="strong">69.89% </span>
3434
<span class="quiet">Branches</span>
35-
<span class='fraction'>53/75</span>
35+
<span class='fraction'>65/93</span>
3636
</div>
3737

3838

@@ -946,7 +946,7 @@ <h1><a href="index.html">All files</a> index.ts</h1>
946946
},
947947
waifu: {
948948
showWaifu: true,
949-
name: 'masha',
949+
name: 'tohka',
950950
size: 'small',
951951
useTheme: true
952952
}
@@ -1079,7 +1079,7 @@ <h1><a href="index.html">All files</a> index.ts</h1>
10791079
width: 100%;
10801080
height: 100%;
10811081
box-sizing: border-box;
1082-
${WAIFU_THEME[this.config.waifu.name].logContainer}
1082+
${WAIFU_THEME[!this.config.waifu.useTheme || !this.config.waifu.showWaifu ? <span class="branch-0 cbranch-no" title="branch not covered" >'default' </span>: this.config.waifu.name].logContainer}
10831083
${BORDER_RADIUS[this.config.containerStyle.position]}
10841084
}
10851085
&nbsp;
@@ -1088,15 +1088,15 @@ <h1><a href="index.html">All files</a> index.ts</h1>
10881088
}
10891089
&nbsp;
10901090
#log-container::-webkit-scrollbar-track {
1091-
${WAIFU_THEME[this.config.waifu.name].scrollbarTrack}
1091+
${WAIFU_THEME[!this.config.waifu.useTheme || !this.config.waifu.showWaifu ? <span class="branch-0 cbranch-no" title="branch not covered" >'default' </span>: this.config.waifu.name].scrollbarTrack}
10921092
}
10931093

10941094
#log-container::-webkit-scrollbar-thumb {
1095-
${WAIFU_THEME[this.config.waifu.name].scrollbarThumb}
1095+
${WAIFU_THEME[!this.config.waifu.useTheme || !this.config.waifu.showWaifu ? <span class="branch-0 cbranch-no" title="branch not covered" >'default' </span>: this.config.waifu.name].scrollbarThumb}
10961096
}
10971097
&nbsp;
10981098
#log-container::-webkit-scrollbar-thumb:hover {
1099-
${WAIFU_THEME[this.config.waifu.name].scrollbarThumbHover}
1099+
${WAIFU_THEME[!this.config.waifu.useTheme || !this.config.waifu.showWaifu ? <span class="branch-0 cbranch-no" title="branch not covered" >'default' </span>: this.config.waifu.name].scrollbarThumbHover}
11001100
}
11011101
&nbsp;
11021102
#log-canvas {
@@ -1287,7 +1287,7 @@ <h1><a href="index.html">All files</a> index.ts</h1>
12871287
<span class="cstat-no" title="statement not covered" > logFn(</span>
12881288
`%c ${dateStr} %c ${label} %c ${message}`,
12891289
`background-color: inherit; color: inherit`,
1290-
`background-color: ${color}; color: #FFFFFF`,
1290+
`background-color: ${color}; color: ${logType === 'warn' ? '#000' : '#FFFFFF'}`,
12911291
`background-color: inherit; color: inherit`
12921292
);
12931293
}
@@ -1363,7 +1363,7 @@ <h1><a href="index.html">All files</a> index.ts</h1>
13631363
<div class='footer quiet pad2 space-top1 center small'>
13641364
Code coverage generated by
13651365
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
1366-
at 2024-08-25T17:48:40.028Z
1366+
at 2024-08-25T18:37:35.973Z
13671367
</div>
13681368
<script src="prettify.js"></script>
13691369
<script>

‎coverage/lcov-report/utils.ts.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -349,7 +349,7 @@ <h1><a href="index.html">All files</a> utils.ts</h1>
349349
<div class='footer quiet pad2 space-top1 center small'>
350350
Code coverage generated by
351351
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
352-
at 2024-08-25T17:48:40.028Z
352+
at 2024-08-25T18:37:35.973Z
353353
</div>
354354
<script src="prettify.js"></script>
355355
<script>

0 commit comments

Comments
 (0)