diff --git a/LICENSE b/LICENSE index bb9f135..6c602dc 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2018 Murhaf Sousli +Copyright (c) 2018-2023 Murhaf Sousli Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -18,4 +18,4 @@ 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. \ No newline at end of file +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..4d01279 --- /dev/null +++ b/README.md @@ -0,0 +1,104 @@ +

+ +

Angular Disqus Module

+

+ +Add Disqus to your app instantly! + +[![npm](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://murhafsousli.github.io/ngx-disqus/) +[![Stackblitz](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-disqus) +[![npm](https://img.shields.io/npm/v/ngx-disqus.svg)](https://www.npmjs.com/package/ngx-disqus) +[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/ngx-disqus.svg)](https://bundlephobia.com/result?p=ngx-disqus) +[![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE) + +## Installation + +**NPM** + +```bash +$ npm install -S ngx-disqus +``` + +**YARN** + +```bash +$ yarn add ngx-disqus +``` + +## Usage + +Set the Disqus shortname which is the unique identifier for your website as registered on Disqus + +```ts +import { DISQUS_SHORTNAME } from 'ngx-disqus'; + +export const appConfig: ApplicationConfig = { + providers: [ + { + provide: DISQUS_SHORTNAME, + useValue: 'disqus_shortname' + }, + ] +} +``` + +Now you can use the Disqus component + +```ts +import { DisqusModule } from 'ngx-disqus'; + +@Component({ + standalone: true, + imports: [DisqusModule], + selector: 'single-post', + template: `` +}) +export class SinglePostComponent { + pageId: string = '/post/123'; +} +``` + +- Disqus component requires the `identifier` input to work properly on your app +- For example if the page URL is `localhost:4200/about` then the identifier should be `/about`. + +Here is a [stackblitz](https://stackblitz.com/edit/ngx-disqus) + +## More Options + +See Disqus official documentation ([JavaScript configuration variables](https://help.disqus.com/customer/portal/articles/472098-javascript-configuration-variables)) before using these inputs. + +```ts + +``` + +___ + +### NOTE + +The HashLocationStrategy is not compatible with Disqus + +For more info check [DISQUS on ajax sites](https://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites) + +___ + +## Issues + +If you identify any errors in this component, or have an idea for an improvement, please open an [issue](https://github.com/MurhafSousli/ngx-disqus/issues)! + +## Author + +**Murhaf Sousli** + +- [github/murhafsousli](https://github.com/MurhafSousli) +- [twitter/murhafsousli](https://twitter.com/MurhafSousli) + +## More plugins + +- [ngx-sharebuttons](https://github.com/MurhafSousli/ngx-sharebuttons) +- [ngx-gallery](https://github.com/MurhafSousli/ngx-gallery) +- [ngx-progressbar](https://github.com/MurhafSousli/ngx-progressbar) +- [ngx-scrollbar](https://github.com/MurhafSousli/ngx-scrollbar) +- [ngx-bar-rating](https://github.com/MurhafSousli/ngx-bar-rating) +- [ngx-disqus](https://github.com/MurhafSousli/ngx-disqus) +- [ngx-highlightjs](https://github.com/MurhafSousli/ngx-highlightjs) diff --git a/projects/ngx-disqus/README.md b/projects/ngx-disqus/README.md index 45f50b7..4d01279 100644 --- a/projects/ngx-disqus/README.md +++ b/projects/ngx-disqus/README.md @@ -1,24 +1,104 @@ -# NgxDisqus +

+ +

Angular Disqus Module

+

-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.0. +Add Disqus to your app instantly! -## Code scaffolding +[![npm](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://murhafsousli.github.io/ngx-disqus/) +[![Stackblitz](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-disqus) +[![npm](https://img.shields.io/npm/v/ngx-disqus.svg)](https://www.npmjs.com/package/ngx-disqus) +[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/ngx-disqus.svg)](https://bundlephobia.com/result?p=ngx-disqus) +[![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE) -Run `ng generate component component-name --project ngx-disqus` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-disqus`. -> Note: Don't forget to add `--project ngx-disqus` or else it will be added to the default project in your `angular.json` file. +## Installation -## Build +**NPM** -Run `ng build ngx-disqus` to build the project. The build artifacts will be stored in the `dist/` directory. +```bash +$ npm install -S ngx-disqus +``` -## Publishing +**YARN** -After building your library with `ng build ngx-disqus`, go to the dist folder `cd dist/ngx-disqus` and run `npm publish`. +```bash +$ yarn add ngx-disqus +``` -## Running unit tests +## Usage -Run `ng test ngx-disqus` to execute the unit tests via [Karma](https://karma-runner.github.io). +Set the Disqus shortname which is the unique identifier for your website as registered on Disqus -## Further help +```ts +import { DISQUS_SHORTNAME } from 'ngx-disqus'; -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. +export const appConfig: ApplicationConfig = { + providers: [ + { + provide: DISQUS_SHORTNAME, + useValue: 'disqus_shortname' + }, + ] +} +``` + +Now you can use the Disqus component + +```ts +import { DisqusModule } from 'ngx-disqus'; + +@Component({ + standalone: true, + imports: [DisqusModule], + selector: 'single-post', + template: `` +}) +export class SinglePostComponent { + pageId: string = '/post/123'; +} +``` + +- Disqus component requires the `identifier` input to work properly on your app +- For example if the page URL is `localhost:4200/about` then the identifier should be `/about`. + +Here is a [stackblitz](https://stackblitz.com/edit/ngx-disqus) + +## More Options + +See Disqus official documentation ([JavaScript configuration variables](https://help.disqus.com/customer/portal/articles/472098-javascript-configuration-variables)) before using these inputs. + +```ts + +``` + +___ + +### NOTE + +The HashLocationStrategy is not compatible with Disqus + +For more info check [DISQUS on ajax sites](https://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites) + +___ + +## Issues + +If you identify any errors in this component, or have an idea for an improvement, please open an [issue](https://github.com/MurhafSousli/ngx-disqus/issues)! + +## Author + +**Murhaf Sousli** + +- [github/murhafsousli](https://github.com/MurhafSousli) +- [twitter/murhafsousli](https://twitter.com/MurhafSousli) + +## More plugins + +- [ngx-sharebuttons](https://github.com/MurhafSousli/ngx-sharebuttons) +- [ngx-gallery](https://github.com/MurhafSousli/ngx-gallery) +- [ngx-progressbar](https://github.com/MurhafSousli/ngx-progressbar) +- [ngx-scrollbar](https://github.com/MurhafSousli/ngx-scrollbar) +- [ngx-bar-rating](https://github.com/MurhafSousli/ngx-bar-rating) +- [ngx-disqus](https://github.com/MurhafSousli/ngx-disqus) +- [ngx-highlightjs](https://github.com/MurhafSousli/ngx-highlightjs) diff --git a/src/app/docs/docs.component.html b/src/app/docs/docs.component.html index 5547925..cd88def 100644 --- a/src/app/docs/docs.component.html +++ b/src/app/docs/docs.component.html @@ -7,6 +7,10 @@ + + + +