-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #70 from MurhafSousli/ng-16
Update again
- Loading branch information
Showing
4 changed files
with
203 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,104 @@ | ||
<p align="center"> | ||
<img height="150px" width="150px" style="text-align: center;" src="https://cdn.rawgit.com/MurhafSousli/ngx-disqus/55fb00f5/src/assets/logo.svg"> | ||
<h1 align="center">Angular Disqus Module</h1> | ||
</p> | ||
|
||
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: `<disqus [identifier]="pageId"></disqus>` | ||
}) | ||
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 | ||
<disqus [identifier]="pageId" [url]="url" [category]="catId" [language]="'en'" | ||
(newComment)="onComment($event)" (ready)="onReady($event)" (paginate)="onPaginate($event)"></disqus> | ||
``` | ||
|
||
___ | ||
|
||
### 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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,24 +1,104 @@ | ||
# NgxDisqus | ||
<p align="center"> | ||
<img height="150px" width="150px" style="text-align: center;" src="https://cdn.rawgit.com/MurhafSousli/ngx-disqus/55fb00f5/src/assets/logo.svg"> | ||
<h1 align="center">Angular Disqus Module</h1> | ||
</p> | ||
|
||
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: `<disqus [identifier]="pageId"></disqus>` | ||
}) | ||
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 | ||
<disqus [identifier]="pageId" [url]="url" [category]="catId" [language]="'en'" | ||
(newComment)="onComment($event)" (ready)="onReady($event)" (paginate)="onPaginate($event)"></disqus> | ||
``` | ||
|
||
___ | ||
|
||
### 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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters