feat: docs

README.md

@@ -1,62 +1,86 @@
-# XngBreadcrumb
+<h1 align="center" style="color: teal">xng-breadcrumb</h1>
 
-<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
+<div align="center">
 
-✨ **This workspace has been generated by [Nx, Smart Monorepos · Fast CI.](https://nx.dev)** ✨
+> A lightweight, declarative and dynamic breadcrumbs solution for Angular 6 and beyond. <https://www.npmjs.com/package/xng-breadcrumb>
 
-## Integrate with editors
+[![CircleCI](https://dl.circleci.com/status-badge/img/gh/udayvunnam/xng-breadcrumb/tree/main.svg?style=shield)](https://dl.circleci.com/status-badge/redirect/gh/udayvunnam/xng-breadcrumb/tree/main)
+[![npm version](https://img.shields.io/npm/v/xng-breadcrumb.svg)](https://www.npmjs.com/package/xng-breadcrumb)
+![bundle size](https://img.shields.io/bundlephobia/minzip/xng-breadcrumb)
+[![license](https://img.shields.io/npm/l/xng-breadcrumb.svg)](https://github.com/udayvunnam/xng-breadcrumb/blob/main/LICENSE)
 
-Enhance your Nx experience by installing [Nx Console](https://nx.dev/nx-console) for your favorite editor. Nx Console
-provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and
-comes with a LSP for Vim users.
+![npm downloads](https://img.shields.io/npm/dt/xng-breadcrumb?style=social)
+![Twitter follow](https://img.shields.io/twitter/follow/udayvunnam_?style=social)
 
-## Start the application
+</div>
 
-Run `npx nx serve material-ui` to start the development server. Happy coding!
+## About
 
-## Build for production
+- In applications with deep navigation hierarchy, it is essential to have breadcrumbs.
+- Breadcrumbs easily allow going back to states higher up in the hierarchy.
 
-Run `npx nx build material-ui` to build the application. The build artifacts are stored in the output directory (e.g. `dist/` or `build/`), ready to be deployed.
+## Documentation
 
-## Running tasks
+[A step by step guide to integrate xng-breadcrumb into your Angular application](https://udayvunnam.github.io/xng-breadcrumb/#/)
 
-To execute tasks with Nx use the following syntax:
+## Demo
 
-```
-npx nx <target> <project> <...options>
-```
+[Demo App](https://xng-breadcrumb.vercel.app/) - A demo app showcasing `xng-breadcrumb` library usage in an Angular app. Navigate through different links to see breadcrumbs behavior.
 
-You can also run multiple targets:
+<a href="https://xng-breadcrumb.vercel.app//dashboard" rel="noopener" target="_blank" ><img width="945" alt="xng-breadcrumb usage" src="https://github.com/udayvunnam/xng-breadcrumb/assets/20707504/02aa26d1-a41f-4a47-a1fe-009d6dfcd0b7"></a></p>
 
-```
-npx nx run-many -t <target1> <target2>
-```
+## Features
 
-..or add `-p` to filter specific projects
+- ✅ **Zero configuration**: Just add `<xng-breadcrumb></xng-breadcrumb>` anywhere in the app. Breadcrumb labels are auto-generated by analyzing Angular Route configuration in your App.
 
-```
-npx nx run-many -t <target1> <target2> -p <proj1> <proj2>
-```
+- ✅ **Custom labels**: Each route can have a custom label defined via Angular Route Config. These labels are used automatically while generating breadcrumbs.
 
-Targets can be defined in the `package.json` or `projects.json`. Learn more [in the docs](https://nx.dev/features/run-tasks).
+- ✅ **Update labels dynamically**: Change breadcrumb labels dynamically using `BreadcrumbService.set()`. You can either use _route path_ or _route path alias_ to update label.
 
-## Set up CI!
+- ✅ **Skip breadcrumb**: Skip specific routes from displaying in breadcrumbs, conditionally.
 
-Nx comes with local caching already built-in (check your `nx.json`). On CI you might want to go a step further.
+- ✅ **Disable breadcrumb**: Disable specific routes so that navigation is disbaled to intermediate routes.
 
-- [Set up remote caching](https://nx.dev/features/share-your-cache)
-- [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution)
-- [Learn more how to setup CI](https://nx.dev/recipes/ci)
+- ✅ **Customization**: Customize breadcrumb template to show **icons with label**, **use pipes on text**, **add i18n with ngx-translate**, etc.
 
-## Explore the project graph
+- ✅ **Styling**: **Separator** and **Styles** can be customized with ease.
 
-Run `npx nx graph` to show the graph of the workspace.
-It will show tasks that you can run with Nx.
+- ✅ **QueryParams and Fragment**: Preserves QueryParams and Fragemnet while navigating via breadcrumbs
 
-- [Learn more about Exploring the Project Graph](https://nx.dev/core-features/explore-graph)
+- ✅ **SSR**: Supports server side rendering with nguniversal
 
-## Connect with us!
+## ❤️ [Become a Sponsor!](http://paypal.me/udayvunnam)
 
-- [Join the community](https://nx.dev/community)
-- [Subscribe to the Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
-- [Follow us on Twitter](https://twitter.com/nxdevtools)
+## Contributors ✨
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://www.linkedin.com/in/udayvunnam/"><img src="https://avatars.githubusercontent.com/u/20707504?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Uday Vunnam</b></sub></a><br /><a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=udayvunnam" title="Code">💻</a> <a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=udayvunnam" title="Documentation">📖</a> <a href="#maintenance-udayvunnam" title="Maintenance">🚧</a></td>
+    <td align="center"><a href="https://github.com/anthonythiry"><img src="https://avatars.githubusercontent.com/u/28025542?v=4?s=100" width="100px;" alt=""/><br /><sub><b>anthonythiry</b></sub></a><br /><a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=anthonythiry" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/dedrazer"><img src="https://avatars.githubusercontent.com/u/23525418?v=4?s=100" width="100px;" alt=""/><br /><sub><b>dedrazer</b></sub></a><br /><a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=dedrazer" title="Code">💻</a></td>
+    <td align="center"><a href="https://dannyfeliz.com/"><img src="https://avatars.githubusercontent.com/u/5460365?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Danny Feliz</b></sub></a><br /><a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=DannyFeliz" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/kapenzo"><img src="https://avatars.githubusercontent.com/u/16196222?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kapsky</b></sub></a><br /><a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=kapenzo" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/andreicojea"><img src="https://avatars.githubusercontent.com/u/4705022?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Andrei Cojea</b></sub></a><br /><a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=andreicojea" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/jontze"><img src="https://avatars.githubusercontent.com/u/42588836?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jonathan</b></sub></a><br /><a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=jontze" title="Code">💻</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://pavankjadda.dev/"><img src="https://avatars.githubusercontent.com/u/17564080?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Pavan Kumar Jadda</b></sub></a><br /><a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=pavankjadda" title="Code">💻</a> <a href="#maintenance-pavankjadda" title="Maintenance">🚧</a></td>
+    <td align="center"><a href="https://github.com/LeonFretter"><img src="https://avatars.githubusercontent.com/u/40633983?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Leon Fretter</b></sub></a><br /><a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=LeonFretter" title="Code">💻</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+
+To add new contributor _username_, who made a contribution of type _contribution_:
+
+`pnpm all-contributors add <username> <contribution>` Example: `pnpm all-contributors add jfmengels code,doc`

docs/README.md

@@ -0,0 +1,82 @@
+<h1 align="center" style="color: teal">xng-breadcrumb</h1>
+
+<div align="center">
+
+> A lightweight, declarative and dynamic breadcrumbs solution for Angular 6 and beyond. <https://www.npmjs.com/package/xng-breadcrumb>
+
+[![CircleCI](https://dl.circleci.com/status-badge/img/gh/udayvunnam/xng-breadcrumb/tree/main.svg?style=shield)](https://dl.circleci.com/status-badge/redirect/gh/udayvunnam/xng-breadcrumb/tree/main)
+[![npm version](https://img.shields.io/npm/v/xng-breadcrumb.svg)](https://www.npmjs.com/package/xng-breadcrumb)
+![bundle size](https://img.shields.io/bundlephobia/minzip/xng-breadcrumb)
+[![license](https://img.shields.io/npm/l/xng-breadcrumb.svg)](https://github.com/udayvunnam/xng-breadcrumb/blob/main/LICENSE)
+
+![npm downloads](https://img.shields.io/npm/dt/xng-breadcrumb?style=social)
+![Twitter follow](https://img.shields.io/twitter/follow/udayvunnam_?style=social)
+
+</div>
+
+## About
+
+- In applications with deep navigation hierarchy, it is essential to have breadcrumbs.
+- Breadcrumbs easily allow going back to states higher up in the hierarchy.
+
+## Demo
+
+[Demo App](https://xng-breadcrumb.vercel.app/) - A demo app showcasing `xng-breadcrumb` library usage in an Angular app. Navigate through different links to see breadcrumbs behavior.
+
+<a href="https://xng-breadcrumb.vercel.app//dashboard" rel="noopener" target="_blank" ><img width="945" alt="xng-breadcrumb usage" src="https://github.com/udayvunnam/xng-breadcrumb/assets/20707504/02aa26d1-a41f-4a47-a1fe-009d6dfcd0b7"></a></p>
+
+## Features
+
+- ✅ **Zero configuration**: Just add `<xng-breadcrumb></xng-breadcrumb>` anywhere in the app. Breadcrumb labels are auto-generated by analyzing Angular Route configuration in your App.
+
+- ✅ **Custom labels**: Each route can have a custom label defined via Angular Route Config. These labels are used automatically while generating breadcrumbs.
+
+- ✅ **Update labels dynamically**: Change breadcrumb labels dynamically using `BreadcrumbService.set()`. You can either use _route path_ or _route path alias_ to update label.
+
+- ✅ **Skip breadcrumb**: Skip specific routes from displaying in breadcrumbs, conditionally.
+
+- ✅ **Disable breadcrumb**: Disable specific routes so that navigation is disbaled to intermediate routes.
+
+- ✅ **Customization**: Customize breadcrumb template to show **icons with label**, **use pipes on text**, **add i18n with ngx-translate**, etc.
+
+- ✅ **Styling**: **Separator** and **Styles** can be customized with ease.
+
+- ✅ **QueryParams and Fragment**: Preserves QueryParams and Fragemnet while navigating via breadcrumbs
+
+- ✅ **SSR**: Supports server side rendering with nguniversal
+
+## ❤️ [Become a Sponsor!](http://paypal.me/udayvunnam)
+
+## Contributors ✨
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://www.linkedin.com/in/udayvunnam/"><img src="https://avatars.githubusercontent.com/u/20707504?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Uday Vunnam</b></sub></a><br /><a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=udayvunnam" title="Code">💻</a> <a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=udayvunnam" title="Documentation">📖</a> <a href="#maintenance-udayvunnam" title="Maintenance">🚧</a></td>
+    <td align="center"><a href="https://github.com/anthonythiry"><img src="https://avatars.githubusercontent.com/u/28025542?v=4?s=100" width="100px;" alt=""/><br /><sub><b>anthonythiry</b></sub></a><br /><a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=anthonythiry" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/dedrazer"><img src="https://avatars.githubusercontent.com/u/23525418?v=4?s=100" width="100px;" alt=""/><br /><sub><b>dedrazer</b></sub></a><br /><a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=dedrazer" title="Code">💻</a></td>
+    <td align="center"><a href="https://dannyfeliz.com/"><img src="https://avatars.githubusercontent.com/u/5460365?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Danny Feliz</b></sub></a><br /><a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=DannyFeliz" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/kapenzo"><img src="https://avatars.githubusercontent.com/u/16196222?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kapsky</b></sub></a><br /><a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=kapenzo" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/andreicojea"><img src="https://avatars.githubusercontent.com/u/4705022?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Andrei Cojea</b></sub></a><br /><a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=andreicojea" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/jontze"><img src="https://avatars.githubusercontent.com/u/42588836?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jonathan</b></sub></a><br /><a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=jontze" title="Code">💻</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://pavankjadda.dev/"><img src="https://avatars.githubusercontent.com/u/17564080?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Pavan Kumar Jadda</b></sub></a><br /><a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=pavankjadda" title="Code">💻</a> <a href="#maintenance-pavankjadda" title="Maintenance">🚧</a></td>
+    <td align="center"><a href="https://github.com/LeonFretter"><img src="https://avatars.githubusercontent.com/u/40633983?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Leon Fretter</b></sub></a><br /><a href="https://github.com/udayvunnam/xng-breadcrumb/commits?author=LeonFretter" title="Code">💻</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+
+To add new contributor _username_, who made a contribution of type _contribution_:
+
+`pnpm all-contributors add <username> <contribution>` Example: `pnpm all-contributors add jfmengels code,doc`

docs/_sidebar.md

@@ -0,0 +1,28 @@
+- Getting started
+
+  - [Quick start](quickstart.md)
+  - [Declarative breadcrumbs](declarative-breadcrumbs.md)
+  - [Dynamic breadcrumbs](dynamic-breadcrumbs.md)
+
+- Guide
+
+  - [Skip breadcrumb](skip-breadcrumb.md)
+  - [Custom styles](custom-styles.md)
+  - [Disable breadcrumb navigation](disable-breadcrumb-navigation.md)
+  - [Intercept breadcrumb onclick](intercept-breadcrumb-onclick.md)
+
+- Customization
+
+  - [Custom template](custom-template.md)
+  - [Add icon with label](add-icon-with-label.md)
+  - [Use filter to change text case](use-filter.md)
+  - [Internationalization](internationalization.md)
+  - [Custom seperator](custom-separator.md)
+
+- [API](api.md)
+- [Where to define breadcrumbs](where-to-define-breadcrumbs.md)
+- [Angular Version Compatibility](angular-version-compatibility.md)
+- [accessibility](accessibility.md)
+- [Local development guide](local-development-guide.md)
+- [❤️Become a Sponsor!](http://paypal.me/udayvunnam)
+- [Changelog](https://github.com/udayvunnam/xng-breadcrumb/blob/main/CHANGELOG.md)

docs/accessibility.md

@@ -0,0 +1,6 @@
+# Accessibility
+
+- A `<nav>` with `aria-label="breadcrumb"` identifies type of navigation as breadcrumb by screen readers.
+- The breadcrumb links are structured using an ordered list `<ol>`.
+- The last `<li>` element represents the current page, so it doesn't have to be clickable.
+- Separators between links have `aria-hidden=true`. This prevents the screen reader announcement of visual separators.

docs/add-icon-with-label.md

@@ -0,0 +1,30 @@
+# Add icon with label
+
+Define 'info' associated with breadcrumb in route config. 'info' has type <any>. you can pass string or object as you need.
+
+```javascript
+  {
+    path: '',
+    pathMatch: 'full',
+    component: HomeComponent,
+    data: {
+      breadcrumb: {
+        label: 'app home',
+        info: 'home'
+      }
+    }
+  }
+```
+
+`info` is available in the context of `*xngBreadcrumbItem`. Additionally `first`, `last` and `index` are passed to identify the respective items.
+
+```html
+<xng-breadcrumb>
+  <ng-container
+    *xngBreadcrumbItem="let breadcrumb; let info = info; let first = first"
+  >
+    <mat-icon *ngIf="info">{{ info }}</mat-icon>
+    <ng-container *ngIf="!first">{{ breadcrumb }}</ng-container>
+  </ng-container>
+</xng-breadcrumb>
+```

docs/angular-version-compatibility.md

@@ -0,0 +1,10 @@
+# Angular Version Compatibility
+
+| xng-breadcrumb | Angular                    |
+| -------------- | -------------------------- |
+| 4.x.x          | 6.x, 7.x                   |
+| 6.x.x          | 8.x, 9.x, 10.x, 11.x, 12.x |
+| 7.x.x          | 13.x                       |
+| 8.x.x          | 14.x                       |
+| 9.x.x          | 15.x                       |
+| 1o.x.x         | 16.x                       |