refactor(readme): update readme

bruno-sartori · Aug 25, 2024 · af200d7 · af200d7
1 parent 10b4325
commit af200d7
Show file tree

Hide file tree

Showing 27 changed files with 224 additions and 96 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,9 @@
-[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/) 
+[![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)
+
 
 # Weeb Logger
 
-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 
+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
 
 ## Installation
 
@@ -27,14 +28,95 @@ logger.configure({
 });
 
 logger.info('SOME LABEL', 'A string or object here!');
-logger.warning('WARN', 'This is an warning');
+logger.warn('WARN', 'This is an warning');
 logger.error('Api Error', 'This is an error');
 logger.success('JSON', { lorem: 'ipsum', dolor: {
   sit: 'amet'
 }});
 logger.highlight('IMPORTANT', 'This is an highlight info');
 ```
 
+This will result in:
+
+![Log in DevTools](./docs/devtools-log.jpg)
+
+
+### Using visual: true will create the visual logger container on your web project
+
+![Log in DevTools](./docs/logger-on-web-project.jpg)
+
+### Resizable
+![Log in DevTools](./docs/resizing.gif)
+
+### Available Waifus
+```
+name: 'akeno'
+```
+![Log in DevTools](./docs/logger-akeno.jpg)
+```
+name: 'alya'
+```
+![Log in DevTools](./docs/logger-alya.jpg)
+```
+name: 'tohka'
+```
+![Log in DevTools](./docs/logger-tohka.jpg)
+```
+name: 'aqua'
+```
+![Log in DevTools](./docs/logger-aqua.jpg)
+```
+name: 'ayano'
+```
+![Log in DevTools](./docs/logger-ayano.jpg)
+```
+name: 'darkness'
+```
+![Log in DevTools](./docs/logger-darkness.jpg)
+```
+name: 'koneko'
+```
+![Log in DevTools](./docs/logger-koneko.jpg)
+```
+name: 'masha'
+```
+![Log in DevTools](./docs/logger-masha.jpg)
+```
+name: 'megumin'
+```
+![Log in DevTools](./docs/logger-megumin.jpg)
+```
+name: 'yuki'
+```
+![Log in DevTools](./docs/logger-yuki.jpg)
+```
+name: 'zerotwo'
+```
+![Log in DevTools](./docs/logger-zerotwo.jpg)
+
+
+## Testing
+
+To test the package, simply run:
+
+```sh
+yarn test
+```
+Please make sure all tests pass before submiting a PR
+
+![Log in DevTools](./docs/test.jpg)
+
+## Technologies used in this project
+
+| Name           | Description                                                                                                                             |
+|----------------|-----------------------------------------------------------------------------------------------------------------------------------------|
+| [Node.js](https://nodejs.org/en)                                      | Node.js is a Javascript runtime bbuild on Chrome`s V8 JavaScript                 |
+| [Jest](https://jestjs.io/)                                            | Jest is a JavaScript framework for testing                                       |
+| [Typescript](https://www.typescriptlang.org)                          | Typescript extends JavaScript by adding types to the language                    |
+| [Chalk](https://github.com/chalk/chalk)                               | Chalk is a nodejs dependency for terminal string                                 |
+| [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 |
+
+
 ## Contributing
 
 Pull requests are welcome. For major changes, please open an issue first

diff --git a/coverage/clover.xml b/coverage/clover.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1724608120061" clover="3.2.0">
-  <project timestamp="1724608120061" name="All files">
-    <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"/>
+<coverage generated="1724611056000" clover="3.2.0">
+  <project timestamp="1724611056000" name="All files">
+    <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"/>
     <file name="CanvasHandler.ts" path="C:\Users\BrunoSartori\Documents\Projects\logger\src\CanvasHandler.ts">
       <metrics statements="77" coveredstatements="76" conditionals="15" coveredconditionals="11" methods="9" coveredmethods="9"/>
       <line num="1" count="1" type="stmt"/>
@@ -91,7 +91,7 @@
       <line num="17" count="1" type="stmt"/>
     </file>
     <file name="index.ts" path="C:\Users\BrunoSartori\Documents\Projects\logger\src\index.ts">
-      <metrics statements="151" coveredstatements="102" conditionals="75" coveredconditionals="53" methods="14" coveredmethods="11"/>
+      <metrics statements="151" coveredstatements="102" conditionals="93" coveredconditionals="65" methods="14" coveredmethods="11"/>
       <line num="1" count="1" type="stmt"/>
       <line num="2" count="1" type="stmt"/>
       <line num="3" count="1" type="stmt"/>

diff --git a/coverage/coverage-final.json b/coverage/coverage-final.json
diff --git a/coverage/lcov-report/CanvasHandler.ts.html b/coverage/lcov-report/CanvasHandler.ts.html
@@ -550,7 +550,7 @@ <h1><a href="index.html">All files</a> CanvasHandler.ts</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-08-25T17:48:40.028Z
+                at 2024-08-25T18:37:35.973Z
             </div>
         <script src="prettify.js"></script>
         <script>

diff --git a/coverage/lcov-report/constants.ts.html b/coverage/lcov-report/constants.ts.html
@@ -159,7 +159,14 @@ <h1><a href="index.html">All files</a> constants.ts</h1>
 <a name='L94'></a><a href='#L94'>94</a>
 <a name='L95'></a><a href='#L95'>95</a>
 <a name='L96'></a><a href='#L96'>96</a>
-<a name='L97'></a><a href='#L97'>97</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<a name='L97'></a><a href='#L97'>97</a>
+<a name='L98'></a><a href='#L98'>98</a>
+<a name='L99'></a><a href='#L99'>99</a>
+<a name='L100'></a><a href='#L100'>100</a>
+<a name='L101'></a><a href='#L101'>101</a>
+<a name='L102'></a><a href='#L102'>102</a>
+<a name='L103'></a><a href='#L103'>103</a>
+<a name='L104'></a><a href='#L104'>104</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -255,6 +262,13 @@ <h1><a href="index.html">All files</a> constants.ts</h1>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">export const SCROLLBAR_WIDTH = 10;
 &nbsp;
 export const MIN_WIDTH = 400;
@@ -272,77 +286,84 @@ <h1><a href="index.html">All files</a> constants.ts</h1>
 };
 &nbsp;
 export const WAIFU_THEME = {
-  'akeno': {
+  default: {
+    logContainer: `background-color: rgba(32, 32, 32, 0.5);`,
+    scrollbarTrack: `background-color: #ccc`,
+    scrollbarThumb: `background-color: #888;`,
+    scrollbarThumbHover: `background-color: #555;`,
+    textColor: '#fff'
+  },
+  akeno: {
     logContainer: `background-color: rgba(79, 77, 100, 0.7);`,
     scrollbarTrack: `background-color: #511243;`,
     scrollbarThumb: `background-color: #7d2761;`,
     scrollbarThumbHover: `background-color: #c65d9c;`,
     textColor: '#fff'
   },
-  'alya': {
+  alya: {
     logContainer: `background-color: rgba(223, 187, 202, 0.7);`,
     scrollbarTrack: `background-color: #fcc7d1;`,
     scrollbarThumb: `background-color: #83cedd;`,
     scrollbarThumbHover: `background-color: #9fd7e2;`,
     textColor: '#fff'
   },
-  'aqua': {
+  aqua: {
     logContainer: `background-color: rgba(42, 53, 106, 0.7);`,
     scrollbarTrack: `background-color: #6093c4;`,
     scrollbarThumb: `background-color: #9dd1e2;`,
     scrollbarThumbHover: `background-color: #c9f5f7;`,
     textColor: '#fff',
   },
-  'ayano': {
+  ayano: {
     logContainer: `background-color: rgba(80, 82, 85, 0.7);`,
     scrollbarTrack: `background-color: #755b61;`,
     scrollbarThumb: `background-color: #ba8a7c;`,
     scrollbarThumbHover: `background-color: #ccbfb7;`,
     textColor: '#fff'
   },
-  'darkness': {
+  darkness: {
     logContainer: `background-color: rgba(255, 177, 33, 0.7);`,
     scrollbarTrack: `background-color: #fbbe44;`,
     scrollbarThumb: `background-color: #f38c28;`,
     scrollbarThumbHover: `background-color: #bd722c;`,
     textColor: '#fff',
   },
-  'koneko': {
+  koneko: {
     logContainer: `background-color: rgba(237, 229, 223, 0.7);`,
     scrollbarTrack: `background-color: #ba265e;`,
     scrollbarThumb: `background-color: #ca941f;`,
     scrollbarThumbHover: `background-color: #e5a943;`,
     textColor: '#000',
   },
-  'masha': {
+  masha: {
     logContainer: `background-color: rgba(202, 166, 144, 0.7);`,
     scrollbarTrack: `background: #834826;`,
     scrollbarThumb: `background: #c49d6d;`,
     scrollbarThumbHover: `background: #e4be9d;`,
     textColor: '#fff'
   },
-  'megumin': {
+  megumin: {
     logContainer: `background-color: rgba(133, 43, 62, 0.7);`,
     scrollbarTrack: `background: #720b0f;`,
     scrollbarThumb: `background: #b7213a;`,
     scrollbarThumbHover: `background: #c24448;`,
     textColor: '#fff',
   },
-  'tohka': {
+  tohka: {
     logContainer: `background-color: rgba(74, 35, 82, 0.7);`,
     scrollbarTrack: `background: #3b2754;`,
     scrollbarThumb: `background: #6136a5;`,
     scrollbarThumbHover: `background: #b62289;`,
     textColor: '#fff',
   },
-  'yuki': {
+  yuki: {
     logContainer: `background-color: rgba(96, 84, 94, 0.7);`,
     scrollbarTrack: `background-color: #744462;`,
     scrollbarThumb: `background-color: #8f5e89;`,
     scrollbarThumbHover: `background-color: #a577a2;`,
     textColor: '#fff'
   },
-  'zerotwo': {
+  zerotwo: {
     logContainer: `background-color: rgba(238, 198, 202, 0.7);`,
     scrollbarTrack: `background: #a64b5b;`,
     scrollbarThumb: `background: #940200;`,
@@ -358,7 +379,7 @@ <h1><a href="index.html">All files</a> constants.ts</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-08-25T17:48:40.028Z
+                at 2024-08-25T18:37:35.973Z
             </div>
         <script src="prettify.js"></script>
         <script>

diff --git a/coverage/lcov-report/index.html b/coverage/lcov-report/index.html
@@ -30,9 +30,9 @@ <h1>All files</h1>
 
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">76.27% </span>
+                <span class="strong">75% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>90/118</span>
+                <span class='fraction'>102/136</span>
             </div>
 
 
@@ -115,8 +115,8 @@ <h1>All files</h1>
 	</td>
 	<td data-value="67.76" class="pct medium">67.76%</td>
 	<td data-value="152" class="abs medium">103/152</td>
-	<td data-value="70.66" class="pct medium">70.66%</td>
-	<td data-value="75" class="abs medium">53/75</td>
+	<td data-value="69.89" class="pct medium">69.89%</td>
+	<td data-value="93" class="abs medium">65/93</td>
 	<td data-value="78.57" class="pct medium">78.57%</td>
 	<td data-value="14" class="abs medium">11/14</td>
 	<td data-value="67.54" class="pct medium">67.54%</td>
@@ -146,7 +146,7 @@ <h1>All files</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-08-25T17:48:40.028Z
+                at 2024-08-25T18:37:35.973Z
             </div>
         <script src="prettify.js"></script>
         <script>

diff --git a/coverage/lcov-report/index.ts.html b/coverage/lcov-report/index.ts.html
@@ -30,9 +30,9 @@ <h1><a href="index.html">All files</a> index.ts</h1>
 
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">70.66% </span>
+                <span class="strong">69.89% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>53/75</span>
+                <span class='fraction'>65/93</span>
             </div>
 
 
@@ -946,7 +946,7 @@ <h1><a href="index.html">All files</a> index.ts</h1>
   },
   waifu: {
     showWaifu: true,
-    name: 'masha',
+    name: 'tohka',
     size: 'small',
     useTheme: true
   }
@@ -1079,7 +1079,7 @@ <h1><a href="index.html">All files</a> index.ts</h1>
           width: 100%;
           height: 100%;
           box-sizing: border-box;
-          ${WAIFU_THEME[this.config.waifu.name].logContainer}
+          ${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}
           ${BORDER_RADIUS[this.config.containerStyle.position]}
         }
 &nbsp;
@@ -1088,15 +1088,15 @@ <h1><a href="index.html">All files</a> index.ts</h1>
         }
 &nbsp;
         #log-container::-webkit-scrollbar-track {
-          ${WAIFU_THEME[this.config.waifu.name].scrollbarTrack}
+          ${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}
         }
 
         #log-container::-webkit-scrollbar-thumb {
-          ${WAIFU_THEME[this.config.waifu.name].scrollbarThumb} 
+          ${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} 
         }
 &nbsp;
         #log-container::-webkit-scrollbar-thumb:hover {
-          ${WAIFU_THEME[this.config.waifu.name].scrollbarThumbHover} 
+          ${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} 
         }
 &nbsp;
         #log-canvas {
@@ -1287,7 +1287,7 @@ <h1><a href="index.html">All files</a> index.ts</h1>
 <span class="cstat-no" title="statement not covered" >        logFn(</span>
           `%c ${dateStr} %c ${label} %c ${message}`,
           `background-color: inherit; color: inherit`,
-          `background-color: ${color}; color: #FFFFFF`,
+          `background-color: ${color}; color: ${logType === 'warn' ? '#000' : '#FFFFFF'}`,
           `background-color: inherit; color: inherit`
         );
       }
@@ -1363,7 +1363,7 @@ <h1><a href="index.html">All files</a> index.ts</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-08-25T17:48:40.028Z
+                at 2024-08-25T18:37:35.973Z
             </div>
         <script src="prettify.js"></script>
         <script>

diff --git a/coverage/lcov-report/utils.ts.html b/coverage/lcov-report/utils.ts.html
@@ -349,7 +349,7 @@ <h1><a href="index.html">All files</a> utils.ts</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-08-25T17:48:40.028Z
+                at 2024-08-25T18:37:35.973Z
             </div>
         <script src="prettify.js"></script>
         <script>