docs: fix Angular README #79

daybrush · Apr 6, 2023 · 4f8b64d · 4f8b64d
1 parent a7be435
commit 4f8b64d
Show file tree

Hide file tree

Showing 2 changed files with 206 additions and 27 deletions.
diff --git a/packages/ngx-guides/README.md b/packages/ngx-guides/README.md
@@ -1,27 +1,115 @@
-# NgxGuidesProject
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.9.
 
-## Development server
+<p align="middle" ><img src="https://raw.githubusercontent.com/daybrush/guides/master/demo/images/guides.png"/></p>
+<h2 align="middle">Angular Guides</h2>
+<p align="middle">
+<a href="https://www.npmjs.com/package/ngx-guides" target="_blank"><img src="https://img.shields.io/npm/v/ngx-guides.svg?style=flat-square&color=007acc&label=version" alt="npm version" /></a>
+<img src="https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square"/>
+<a href="https://github.com/daybrush/guides/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/github/license/daybrush/guides.svg?style=flat-square&label=license&color=08CE5D"/></a>
+<a href="https://github.com/daybrush/guides/tree/master/packages/react-guides" target="_blank"><img alt="React" src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb"></a>
+<a href="https://github.com/daybrush/guides/tree/master/packages/preact-guides" target="_blank"><img alt="Preact" src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&color=673ab8"></a>
+<a href="https://github.com/daybrush/guides/tree/master/packages/ngx-guides" target="_blank"><img alt="Angular" src="https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&color=C82B38"></a>
+<a href="https://github.com/daybrush/guides/tree/master/packages/vue-guides" target="_blank"><img
+    alt="Vue"
+    src="https://img.shields.io/static/v1.svg?label=&message=Vue2&style=flat-square&color=3fb984"></a>
+<a href="https://github.com/daybrush/guides/tree/master/packages/ngx-guides" target="_blank"><img
+    alt="Vue3"
+    src="https://img.shields.io/static/v1.svg?label=&message=Vue3&style=flat-square&color=3fb984"></a>
+<a href="https://github.com/daybrush/guides/tree/master/packages/svelte-guides" target="_blank"><img
+    alt="Vue"
+    src="https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&color=C82B38"></a>
+</p>
+<p align="middle">An Angular Guides component that can draw grids and scroll infinitely.</p>
+<p align="middle">
+    <a href="https://daybrush.com/guides" target="_blank"><strong>Demo</strong></a> /
+    <a href="https://codesandbox.io/s/ngx-guides-demo-tdqjxo" target="_blank"><strong>CodeSandbox</strong></a> /
+    <a href="https://daybrush.com/guides/release/latest/doc/" target="_blank"><strong>API</strong></a> /
+    <a href="https://github.com/daybrush/ruler" target="_blank"><strong>Ruler</strong></a> /
+    <a href="https://github.com/daybrush/scena" target="_blank"><strong>Main Project</strong></a>
+</p>
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
 
-## Code scaffolding
+## ⚙️ Installation
+### npm
+```sh
+$ npm i ngx-guides
+```
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+## 🚀 How to use
+* app.component.html
+```html
+<div class="guides">
+  <ngx-guides
+    type="horizontal" ref="guides"
+    v-on:changeGuides="onChangeGuides"
+  ></ngx-guides>
+</div>
+```
+* app.module.ts
+```ts
+import { BrowserModule } from "@angular/platform-browser";
+import { NgModule } from "@angular/core";
+import { NgxGuidesModule } from "ngx-guides";
+import { AppComponent } from "./app.component";
 
-## Build
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, NgxGuidesModule],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}
+```
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
 
-## Running unit tests
+## ⚙️ Developments
+### `npm run start`
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+Runs the app in the development mode.<br>
+Open [http://localhost:4200](http://localhost:4200) to view it in the browser.
 
-## Running end-to-end tests
+The page will reload if you make edits.<br>
+You will also see any lint errors in the console.
 
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
 
-## Further help
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+## ⭐️ Show Your Support
+Please give a ⭐️ if this project helped you!
+
+## 👏 Contributing
+
+If you have any questions or requests or want to contribute to `ngx-guides` or other packages, please write the [issue](https://github.com/daybrush/guides/issues) or give me a Pull Request freely.
+
+## 🐞 Bug Report
+
+If you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/guides/issues) on GitHub.
+
+
+## 📝 License
+
+This project is [MIT](https://github.com/daybrush/guides/blob/master/LICENSE) licensed.
+
+```
+MIT License
+
+Copyright (c) 2019 Daybrush
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
diff --git a/packages/ngx-guides/projects/ngx-guides/README.md b/packages/ngx-guides/projects/ngx-guides/README.md
@@ -1,24 +1,115 @@
-# NgxGuides
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.0.
 
-## Code scaffolding
+<p align="middle" ><img src="https://raw.githubusercontent.com/daybrush/guides/master/demo/images/guides.png"/></p>
+<h2 align="middle">Angular Guides</h2>
+<p align="middle">
+<a href="https://www.npmjs.com/package/ngx-guides" target="_blank"><img src="https://img.shields.io/npm/v/ngx-guides.svg?style=flat-square&color=007acc&label=version" alt="npm version" /></a>
+<img src="https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square"/>
+<a href="https://github.com/daybrush/guides/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/github/license/daybrush/guides.svg?style=flat-square&label=license&color=08CE5D"/></a>
+<a href="https://github.com/daybrush/guides/tree/master/packages/react-guides" target="_blank"><img alt="React" src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb"></a>
+<a href="https://github.com/daybrush/guides/tree/master/packages/preact-guides" target="_blank"><img alt="Preact" src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&color=673ab8"></a>
+<a href="https://github.com/daybrush/guides/tree/master/packages/ngx-guides" target="_blank"><img alt="Angular" src="https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&color=C82B38"></a>
+<a href="https://github.com/daybrush/guides/tree/master/packages/vue-guides" target="_blank"><img
+    alt="Vue"
+    src="https://img.shields.io/static/v1.svg?label=&message=Vue2&style=flat-square&color=3fb984"></a>
+<a href="https://github.com/daybrush/guides/tree/master/packages/ngx-guides" target="_blank"><img
+    alt="Vue3"
+    src="https://img.shields.io/static/v1.svg?label=&message=Vue3&style=flat-square&color=3fb984"></a>
+<a href="https://github.com/daybrush/guides/tree/master/packages/svelte-guides" target="_blank"><img
+    alt="Vue"
+    src="https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&color=C82B38"></a>
+</p>
+<p align="middle">An Angular Guides component that can draw grids and scroll infinitely.</p>
+<p align="middle">
+    <a href="https://daybrush.com/guides" target="_blank"><strong>Demo</strong></a> /
+    <a href="https://codesandbox.io/s/ngx-guides-demo-tdqjxo" target="_blank"><strong>CodeSandbox</strong></a> /
+    <a href="https://daybrush.com/guides/release/latest/doc/" target="_blank"><strong>API</strong></a> /
+    <a href="https://github.com/daybrush/ruler" target="_blank"><strong>Ruler</strong></a> /
+    <a href="https://github.com/daybrush/scena" target="_blank"><strong>Main Project</strong></a>
+</p>
 
-Run `ng generate component component-name --project ngx-guides` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-guides`.
-> Note: Don't forget to add `--project ngx-guides` or else it will be added to the default project in your `angular.json` file. 
 
-## Build
+## ⚙️ Installation
+### npm
+```sh
+$ npm i ngx-guides
+```
 
-Run `ng build ngx-guides` to build the project. The build artifacts will be stored in the `dist/` directory.
+## 🚀 How to use
+* app.component.html
+```html
+<div class="guides">
+  <ngx-guides
+    type="horizontal" ref="guides"
+    v-on:changeGuides="onChangeGuides"
+  ></ngx-guides>
+</div>
+```
+* app.module.ts
+```ts
+import { BrowserModule } from "@angular/platform-browser";
+import { NgModule } from "@angular/core";
+import { NgxGuidesModule } from "ngx-guides";
+import { AppComponent } from "./app.component";
 
-## Publishing
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, NgxGuidesModule],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}
+```
 
-After building your library with `ng build ngx-guides`, go to the dist folder `cd dist/ngx-guides` and run `npm publish`.
 
-## Running unit tests
+## ⚙️ Developments
+### `npm run start`
 
-Run `ng test ngx-guides` to execute the unit tests via [Karma](https://karma-runner.github.io).
+Runs the app in the development mode.<br>
+Open [http://localhost:4200](http://localhost:4200) to view it in the browser.
 
-## Further help
+The page will reload if you make edits.<br>
+You will also see any lint errors in the console.
+
+
+
+## ⭐️ Show Your Support
+Please give a ⭐️ if this project helped you!
+
+## 👏 Contributing
+
+If you have any questions or requests or want to contribute to `ngx-guides` or other packages, please write the [issue](https://github.com/daybrush/guides/issues) or give me a Pull Request freely.
+
+## 🐞 Bug Report
+
+If you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/guides/issues) on GitHub.
+
+
+## 📝 License
+
+This project is [MIT](https://github.com/daybrush/guides/blob/master/LICENSE) licensed.
+
+```
+MIT License
+
+Copyright (c) 2019 Daybrush
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.