Skip to content

Commit

Permalink
Merge pull request #70 from MurhafSousli/ng-16
Browse files Browse the repository at this point in the history
Update again
  • Loading branch information
MurhafSousli authored Jul 10, 2023
2 parents 61ff06f + 8795ef0 commit 84be612
Show file tree
Hide file tree
Showing 4 changed files with 203 additions and 15 deletions.
4 changes: 2 additions & 2 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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.
SOFTWARE.
104 changes: 104 additions & 0 deletions README.md
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)
106 changes: 93 additions & 13 deletions projects/ngx-disqus/README.md
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)
4 changes: 4 additions & 0 deletions src/app/docs/docs.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
<!--GITHUB STAR-->
<iframe src="https://ghbtns.com/github-btn.html?user=murhafsousli&repo=ngx-disqus&type=star&count=true&size=small" frameborder="0"
scrolling="0" width="90px" height="20px"></iframe>
<!--STACKBLITZ -->
<a href="https://stackblitz.com/edit/ngx-disqus">
<img src="https://img.shields.io/badge/stackblitz-online-orange.svg">
</a>
<!--NPM-->
<a href="https://www.npmjs.com/package/ngx-disqus">
<img data-canonical-src="https://www.npmjs.com/package/ngx-disqus" src="https://img.shields.io/npm/v/ngx-disqus.svg?maxAge=2592000?style=plastic">
Expand Down

0 comments on commit 84be612

Please sign in to comment.