├── .editorconfig ├── .github └── workflows │ └── gh-pages.yml ├── .gitignore ├── .vscode ├── extensions.json ├── launch.json └── tasks.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── angular.json ├── package-lock.json ├── package.json ├── projects └── ngx-disqus │ ├── README.md │ ├── ng-package.json │ ├── package.json │ ├── src │ ├── lib │ │ ├── disqus.model.ts │ │ ├── disqus.module.ts │ │ ├── disqus.service.ts │ │ └── disqus.ts │ └── public-api.ts │ ├── tsconfig.lib.json │ ├── tsconfig.lib.prod.json │ └── tsconfig.spec.json ├── src ├── app │ ├── app.component.html │ ├── app.component.scss │ ├── app.component.ts │ ├── app.config.ts │ └── docs │ │ ├── docs.component.html │ │ ├── docs.component.scss │ │ └── docs.component.ts ├── assets │ ├── .gitkeep │ └── logo.svg ├── favicon.ico ├── index.html ├── main.ts └── styles.scss ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.github/workflows/gh-pages.yml: -------------------------------------------------------------------------------- 1 | name: Build and Deploy 2 | on: 3 | push: 4 | branches: 5 | - master 6 | jobs: 7 | build: 8 | 9 | runs-on: ubuntu-latest 10 | 11 | steps: 12 | - uses: actions/checkout@v3 13 | - name: Angular Deploy gh-pages Actions 14 | uses: AhsanAyaz/angular-deploy-gh-pages-actions@v1.4.0 15 | with: 16 | github_access_token: ${{ secrets.GITHUB_TOKEN }} 17 | build_configuration: production 18 | base_href: /ngx-disqus/ 19 | deploy_branch: gh-pages 20 | angular_dist_build_folder: dist/ngx-disqus-demo 21 | 22 | permissions: 23 | contents: write 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 3 | "recommendations": ["angular.ng-template"] 4 | } 5 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "name": "ng serve", 7 | "type": "chrome", 8 | "request": "launch", 9 | "preLaunchTask": "npm: start", 10 | "url": "http://localhost:4200/" 11 | }, 12 | { 13 | "name": "ng test", 14 | "type": "chrome", 15 | "request": "launch", 16 | "preLaunchTask": "npm: test", 17 | "url": "http://localhost:9876/debug.html" 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 3 | "version": "2.0.0", 4 | "tasks": [ 5 | { 6 | "type": "npm", 7 | "script": "start", 8 | "isBackground": true, 9 | "problemMatcher": { 10 | "owner": "typescript", 11 | "pattern": "$tsc", 12 | "background": { 13 | "activeOnStart": true, 14 | "beginsPattern": { 15 | "regexp": "(.*?)" 16 | }, 17 | "endsPattern": { 18 | "regexp": "bundle generation complete" 19 | } 20 | } 21 | } 22 | }, 23 | { 24 | "type": "npm", 25 | "script": "test", 26 | "isBackground": true, 27 | "problemMatcher": { 28 | "owner": "typescript", 29 | "pattern": "$tsc", 30 | "background": { 31 | "activeOnStart": true, 32 | "beginsPattern": { 33 | "regexp": "(.*?)" 34 | }, 35 | "endsPattern": { 36 | "regexp": "bundle generation complete" 37 | } 38 | } 39 | } 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## 3.0.1 4 | 5 | - Upgrade to Angular 16 6 | 7 | ## 2.4.3 8 | 9 | - enhance(Disqus): Ability to provide disqus shortname value using the `DISQUS_SHORTNAME` token. 10 | 11 | ## 2.4.2 12 | 13 | - refactor(DisqusService): Remove Window provider in favor of document.defaultView, in [f427ea9](https://github.com/MurhafSousli/ngx-disqus/pull/52/commits/f427ea99e455fd21cee711242d3a6c12e6c7933e). 14 | 15 | ## 2.4.1 16 | 17 | - fix peerDependencies for Angular > 5, closes [#50](https://github.com/MurhafSousli/ngx-disqus/issues/50) in [1019a0b](https://github.com/MurhafSousli/ngx-disqus/pull/51/commits/1019a0bf1346fee553e7e791328cf43fdf97d686). 18 | - refactor(Disqus): Provide `DisqusService` using `providedIn: 'root'` in [87514ac](https://github.com/MurhafSousli/ngx-disqus/pull/51/commits/87514accb7dc8104f92c2d70faffe56c6e23394d). 19 | 20 | ## 2.4.0 21 | 22 | - fix(Disqus): Duplicated disqus scripts and styles in the head tag, closes [#42](https://github.com/MurhafSousli/ngx-disqus/issues/42) in [e98d224](https://github.com/MurhafSousli/ngx-disqus/pull/43/commits/e98d224ce737830a949bbeabc1600eb8ea14dd85). 23 | - refactor(Disqus): Improve disqus service, adds window provider. 24 | - export `DisqusService` so it can be importable everywhere. 25 | 26 | ## 2.3.7 27 | 28 | No changes, republished the library with ng-packagr@2.0.0-rc.7, fixes [#33](https://github.com/MurhafSousli/ngx-disqus/issues/33). 29 | 30 | ## 2.3.5 31 | 32 | - Fix(no provider for rendered2) closes [#28](https://github.com/MurhafSousli/ngx-disqus/issues/28) 33 | 34 | ## 2.3.1 35 | 36 | - Recompile with the next version of ng-packagr 37 | 38 | ## 2.3.0 39 | 40 | ### Breaking changes 41 | 42 | - rename `onReady` output to `ready`. 43 | - rename `onPaginate` output to `paginate`. 44 | - rename `onNewComment` output to `newComment`. 45 | 46 | rename 47 | 48 | ## 2.2.1 49 | 50 | - Fix cannot resolve all parameter warning, closes #18. 51 | 52 | ## 2.2.0 53 | 54 | - feat(onReady, onPaginate) events. 55 | - rename `comment` output to `onNewComment`. 56 | 57 | ## 2.1.1 58 | 59 | - support for Universal 60 | 61 | ## 2.1.0 62 | 63 | - refactor(DisqusComponent) remove unnecessary checks for input changes 64 | - refactor(DisqusService) remove unnecessary getters for `window` 65 | 66 | **Breaking changes** 67 | 68 | - `shortname` input is removed, set your disqus shortname here `DisqusModule.forRoot('disqus_shortname')` 69 | - `categoryId` input is renamed to `category` 70 | 71 | ## 2.0.0 72 | 73 | - Change package name to `ngx-disqus` 74 | 75 | ## 1.1.1 76 | 77 | - Cleanup 78 | - Update dependencies 79 | 80 | ## 1.1.0 81 | 82 | - (fix) Passing identifiers, closes [#3](https://github.com/MurhafSousli/ng2-disqus/issues/3) 83 | - (feat) @Output() `comment` callback (output) 84 | - **[removeOnDestroy]** input is deprecated, it will remove disqus script on destroy by default. 85 | 86 | ## 1.0.4 87 | - Improve component code 88 | - Add URL validator 89 | - Add tests for window service 90 | 91 | ## 1.0.3 92 | - AOT support 93 | - Adds window service 94 | 95 | ## 1.0.2 96 | - initial release 97 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018-2023 Murhaf Sousli 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

Angular Disqus Component

4 |

5 | 6 | Add Disqus to your app instantly! 7 | 8 | [![npm](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://murhafsousli.github.io/ngx-disqus/) 9 | [![Stackblitz](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-disqus) 10 | [![npm](https://img.shields.io/npm/v/ngx-disqus.svg)](https://www.npmjs.com/package/ngx-disqus) 11 | [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/ngx-disqus.svg)](https://bundlephobia.com/result?p=ngx-disqus) 12 | [![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE) 13 | 14 | ## Installation 15 | 16 | ```bash 17 | npm i ngx-disqus 18 | ``` 19 | 20 | ## Usage 21 | 22 | Set the Disqus shortname which is the unique identifier for your website as registered on Disqus 23 | 24 | ```ts 25 | import { DISQUS_SHORTNAME } from 'ngx-disqus'; 26 | 27 | export const appConfig: ApplicationConfig = { 28 | providers: [ 29 | { 30 | provide: DISQUS_SHORTNAME, 31 | useValue: 'disqus_shortname' 32 | }, 33 | ] 34 | } 35 | ``` 36 | 37 | Now you can use the Disqus component 38 | 39 | ```ts 40 | import { DisqusModule } from 'ngx-disqus'; 41 | 42 | @Component({ 43 | standalone: true, 44 | imports: [DisqusModule], 45 | selector: 'single-post', 46 | template: `` 47 | }) 48 | export class SinglePostComponent { 49 | pageId: string = '/post/123'; 50 | } 51 | ``` 52 | 53 | - Disqus component requires the `identifier` input to work properly on your app 54 | - For example if the page URL is `localhost:4200/about` then the identifier should be `/about`. 55 | 56 | Here is a [stackblitz](https://stackblitz.com/edit/ngx-disqus) 57 | 58 | ## More Options 59 | 60 | See Disqus official documentation ([JavaScript configuration variables](https://help.disqus.com/customer/portal/articles/472098-javascript-configuration-variables)) before using these inputs. 61 | 62 | ```ts 63 | 65 | ``` 66 | 67 | ___ 68 | 69 | ### NOTE 70 | 71 | The HashLocationStrategy is not compatible with Disqus 72 | 73 | For more info check [DISQUS on ajax sites](https://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites) 74 | 75 | ___ 76 | 77 | ## Issues 78 | 79 | 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)! 80 | 81 | ## Author 82 | 83 | **Murhaf Sousli** 84 | 85 | - [github/murhafsousli](https://github.com/MurhafSousli) 86 | - [twitter/murhafsousli](https://twitter.com/MurhafSousli) 87 | 88 | ## More plugins 89 | 90 | - [ngx-sharebuttons](https://github.com/MurhafSousli/ngx-sharebuttons) 91 | - [ngx-gallery](https://github.com/MurhafSousli/ngx-gallery) 92 | - [ngx-progressbar](https://github.com/MurhafSousli/ngx-progressbar) 93 | - [ngx-scrollbar](https://github.com/MurhafSousli/ngx-scrollbar) 94 | - [ngx-bar-rating](https://github.com/MurhafSousli/ngx-bar-rating) 95 | - [ngx-disqus](https://github.com/MurhafSousli/ngx-disqus) 96 | - [ngx-highlightjs](https://github.com/MurhafSousli/ngx-highlightjs) 97 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "ngx-disqus-demo": { 7 | "projectType": "application", 8 | "schematics": { 9 | "@schematics/angular:component": { 10 | "style": "scss", 11 | "standalone": true 12 | }, 13 | "@schematics/angular:directive": { 14 | "standalone": true 15 | }, 16 | "@schematics/angular:pipe": { 17 | "standalone": true 18 | } 19 | }, 20 | "root": "", 21 | "sourceRoot": "src", 22 | "prefix": "app", 23 | "architect": { 24 | "build": { 25 | "builder": "@angular-devkit/build-angular:browser", 26 | "options": { 27 | "outputPath": "dist/ngx-disqus-demo", 28 | "index": "src/index.html", 29 | "main": "src/main.ts", 30 | "polyfills": [ 31 | "zone.js" 32 | ], 33 | "tsConfig": "tsconfig.app.json", 34 | "inlineStyleLanguage": "scss", 35 | "assets": [ 36 | "src/favicon.ico", 37 | "src/assets" 38 | ], 39 | "styles": [ 40 | "src/styles.scss" 41 | ], 42 | "scripts": [] 43 | }, 44 | "configurations": { 45 | "production": { 46 | "budgets": [ 47 | { 48 | "type": "initial", 49 | "maximumWarning": "500kb", 50 | "maximumError": "1mb" 51 | }, 52 | { 53 | "type": "anyComponentStyle", 54 | "maximumWarning": "2kb", 55 | "maximumError": "4kb" 56 | } 57 | ], 58 | "outputHashing": "all" 59 | }, 60 | "development": { 61 | "buildOptimizer": false, 62 | "optimization": false, 63 | "vendorChunk": true, 64 | "extractLicenses": false, 65 | "sourceMap": true, 66 | "namedChunks": true 67 | } 68 | }, 69 | "defaultConfiguration": "production" 70 | }, 71 | "serve": { 72 | "builder": "@angular-devkit/build-angular:dev-server", 73 | "configurations": { 74 | "production": { 75 | "browserTarget": "ngx-disqus-demo:build:production" 76 | }, 77 | "development": { 78 | "browserTarget": "ngx-disqus-demo:build:development" 79 | } 80 | }, 81 | "defaultConfiguration": "development" 82 | }, 83 | "extract-i18n": { 84 | "builder": "@angular-devkit/build-angular:extract-i18n", 85 | "options": { 86 | "browserTarget": "ngx-disqus-demo:build" 87 | } 88 | }, 89 | "test": { 90 | "builder": "@angular-devkit/build-angular:karma", 91 | "options": { 92 | "polyfills": [ 93 | "zone.js", 94 | "zone.js/testing" 95 | ], 96 | "tsConfig": "tsconfig.spec.json", 97 | "inlineStyleLanguage": "scss", 98 | "assets": [ 99 | "src/favicon.ico", 100 | "src/assets" 101 | ], 102 | "styles": [ 103 | "src/styles.scss" 104 | ], 105 | "scripts": [] 106 | } 107 | } 108 | } 109 | }, 110 | "ngx-disqus": { 111 | "projectType": "library", 112 | "root": "projects/ngx-disqus", 113 | "sourceRoot": "projects/ngx-disqus/src", 114 | "prefix": "lib", 115 | "architect": { 116 | "build": { 117 | "builder": "@angular-devkit/build-angular:ng-packagr", 118 | "options": { 119 | "project": "projects/ngx-disqus/ng-package.json" 120 | }, 121 | "configurations": { 122 | "production": { 123 | "tsConfig": "projects/ngx-disqus/tsconfig.lib.prod.json" 124 | }, 125 | "development": { 126 | "tsConfig": "projects/ngx-disqus/tsconfig.lib.json" 127 | } 128 | }, 129 | "defaultConfiguration": "production" 130 | }, 131 | "test": { 132 | "builder": "@angular-devkit/build-angular:karma", 133 | "options": { 134 | "tsConfig": "projects/ngx-disqus/tsconfig.spec.json", 135 | "polyfills": [ 136 | "zone.js", 137 | "zone.js/testing" 138 | ] 139 | } 140 | } 141 | } 142 | } 143 | } 144 | } 145 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-disqus", 3 | "description": "Angular Disqus Module", 4 | "version": "0.0.0", 5 | "homepage": "http://github.com/murhafsousli/ngx-disqus", 6 | "author": { 7 | "name": "Murhaf Sousli", 8 | "url": "http://github.com/murhafsousli" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git://github.com/murhafsousli/ngx-disqus.git" 13 | }, 14 | "license": "MIT", 15 | "keywords": [ 16 | "angular", 17 | "comments", 18 | "disqus" 19 | ], 20 | "bugs": { 21 | "url": "http://github.com/murhafsousli/ngx-disqus/issues" 22 | }, 23 | "scripts": { 24 | "ng": "ng", 25 | "start": "ng serve", 26 | "test": "ng test", 27 | "lint": "ng lint", 28 | "e2e": "ng e2e", 29 | "build": "ng build --configuration production --base-href https://murhafsousli.github.io/ngx-disqus/", 30 | "build-lib": "ng build ngx-disqus" 31 | }, 32 | "dependencies": { 33 | "@angular/animations": "^16.1.4", 34 | "@angular/common": "^16.1.4", 35 | "@angular/compiler": "^16.1.4", 36 | "@angular/core": "^16.1.4", 37 | "@angular/forms": "^16.1.4", 38 | "@angular/platform-browser": "^16.1.4", 39 | "@angular/platform-browser-dynamic": "^16.1.4", 40 | "@angular/router": "^16.1.4", 41 | "highlight.js": "^11.8.0", 42 | "ngx-highlightjs": "^10.0.0", 43 | "rxjs": "~7.8.0", 44 | "tslib": "^2.3.0", 45 | "zone.js": "~0.13.0" 46 | }, 47 | "devDependencies": { 48 | "@angular-devkit/build-angular": "^16.1.4", 49 | "@angular/cli": "~16.1.4", 50 | "@angular/compiler-cli": "^16.1.4", 51 | "@types/jasmine": "~4.3.0", 52 | "jasmine-core": "~4.6.0", 53 | "karma": "~6.4.0", 54 | "karma-chrome-launcher": "~3.2.0", 55 | "karma-coverage": "~2.2.0", 56 | "karma-jasmine": "~5.1.0", 57 | "karma-jasmine-html-reporter": "~2.1.0", 58 | "ng-packagr": "^16.1.0", 59 | "typescript": "~5.1.3" 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /projects/ngx-disqus/README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

Angular Disqus Component

4 |

5 | 6 | Add Disqus to your app instantly! 7 | 8 | [![npm](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://murhafsousli.github.io/ngx-disqus/) 9 | [![Stackblitz](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-disqus) 10 | [![npm](https://img.shields.io/npm/v/ngx-disqus.svg)](https://www.npmjs.com/package/ngx-disqus) 11 | [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/ngx-disqus.svg)](https://bundlephobia.com/result?p=ngx-disqus) 12 | [![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE) 13 | 14 | ## Installation 15 | 16 | ```bash 17 | npm i ngx-disqus 18 | ``` 19 | 20 | ## Usage 21 | 22 | Set the Disqus shortname which is the unique identifier for your website as registered on Disqus 23 | 24 | ```ts 25 | import { DISQUS_SHORTNAME } from 'ngx-disqus'; 26 | 27 | export const appConfig: ApplicationConfig = { 28 | providers: [ 29 | { 30 | provide: DISQUS_SHORTNAME, 31 | useValue: 'disqus_shortname' 32 | }, 33 | ] 34 | } 35 | ``` 36 | 37 | Now you can use the Disqus component 38 | 39 | ```ts 40 | import { DisqusModule } from 'ngx-disqus'; 41 | 42 | @Component({ 43 | standalone: true, 44 | imports: [DisqusModule], 45 | selector: 'single-post', 46 | template: `` 47 | }) 48 | export class SinglePostComponent { 49 | pageId: string = '/post/123'; 50 | } 51 | ``` 52 | 53 | - Disqus component requires the `identifier` input to work properly on your app 54 | - For example if the page URL is `localhost:4200/about` then the identifier should be `/about`. 55 | 56 | Here is a [stackblitz](https://stackblitz.com/edit/ngx-disqus) 57 | 58 | ## More Options 59 | 60 | See Disqus official documentation ([JavaScript configuration variables](https://help.disqus.com/customer/portal/articles/472098-javascript-configuration-variables)) before using these inputs. 61 | 62 | ```ts 63 | 65 | ``` 66 | 67 | ___ 68 | 69 | ### NOTE 70 | 71 | The HashLocationStrategy is not compatible with Disqus 72 | 73 | For more info check [DISQUS on ajax sites](https://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites) 74 | 75 | ___ 76 | 77 | ## Issues 78 | 79 | 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)! 80 | 81 | ## Author 82 | 83 | **Murhaf Sousli** 84 | 85 | - [github/murhafsousli](https://github.com/MurhafSousli) 86 | - [twitter/murhafsousli](https://twitter.com/MurhafSousli) 87 | 88 | ## More plugins 89 | 90 | - [ngx-sharebuttons](https://github.com/MurhafSousli/ngx-sharebuttons) 91 | - [ngx-gallery](https://github.com/MurhafSousli/ngx-gallery) 92 | - [ngx-progressbar](https://github.com/MurhafSousli/ngx-progressbar) 93 | - [ngx-scrollbar](https://github.com/MurhafSousli/ngx-scrollbar) 94 | - [ngx-bar-rating](https://github.com/MurhafSousli/ngx-bar-rating) 95 | - [ngx-disqus](https://github.com/MurhafSousli/ngx-disqus) 96 | - [ngx-highlightjs](https://github.com/MurhafSousli/ngx-highlightjs) 97 | -------------------------------------------------------------------------------- /projects/ngx-disqus/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/ngx-disqus", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /projects/ngx-disqus/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-disqus", 3 | "description": "Angular Disqus Module", 4 | "version": "3.0.1", 5 | "homepage": "http://github.com/murhafsousli/ngx-disqus", 6 | "author": { 7 | "name": "Murhaf Sousli", 8 | "url": "http://github.com/murhafsousli" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git://github.com/murhafsousli/ngx-disqus.git" 13 | }, 14 | "license": "MIT", 15 | "keywords": [ 16 | "angular", 17 | "comments", 18 | "disqus" 19 | ], 20 | "bugs": { 21 | "url": "http://github.com/murhafsousli/ngx-disqus/issues" 22 | }, 23 | "peerDependencies": { 24 | "@angular/common": "^16.1.0", 25 | "@angular/core": "^16.1.0" 26 | }, 27 | "dependencies": { 28 | "tslib": "^2.3.0" 29 | }, 30 | "sideEffects": false 31 | } 32 | -------------------------------------------------------------------------------- /projects/ngx-disqus/src/lib/disqus.model.ts: -------------------------------------------------------------------------------- 1 | import { InjectionToken } from '@angular/core'; 2 | 3 | export const DISQUS_SHORTNAME: InjectionToken = new InjectionToken('DISQUS_SHORTNAME'); 4 | 5 | export interface DisqusComment { 6 | id: number; 7 | name: string; 8 | } 9 | 10 | export interface DisqusReady { 11 | height: number; 12 | } 13 | -------------------------------------------------------------------------------- /projects/ngx-disqus/src/lib/disqus.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Disqus } from './disqus'; 3 | 4 | @NgModule({ 5 | imports: [Disqus], 6 | exports: [Disqus] 7 | }) 8 | export class DisqusModule { 9 | } 10 | -------------------------------------------------------------------------------- /projects/ngx-disqus/src/lib/disqus.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, Inject } from '@angular/core'; 2 | import { DOCUMENT } from '@angular/common'; 3 | import { DISQUS_SHORTNAME } from './disqus.model'; 4 | 5 | @Injectable({ 6 | providedIn: 'root' 7 | }) 8 | export class DisqusService { 9 | 10 | get DISQUS(): any { 11 | return this.document.defaultView['DISQUS']; 12 | } 13 | 14 | get config(): any { 15 | return this.document.defaultView['disqus_config']; 16 | } 17 | 18 | set config(config: any) { 19 | this.document.defaultView['disqus_config'] = config; 20 | } 21 | 22 | constructor(@Inject(DISQUS_SHORTNAME) public shortname: string, @Inject(DOCUMENT) private document: Document) { 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /projects/ngx-disqus/src/lib/disqus.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | Inject, 4 | Input, 5 | Output, 6 | EventEmitter, 7 | OnChanges, 8 | ElementRef, 9 | Renderer2, 10 | ChangeDetectionStrategy 11 | } from '@angular/core'; 12 | import { DisqusComment, DisqusReady } from './disqus.model'; 13 | import { DisqusService } from './disqus.service'; 14 | 15 | @Component({ 16 | standalone: true, 17 | selector: 'disqus', 18 | template: '
', 19 | changeDetection: ChangeDetectionStrategy.OnPush 20 | }) 21 | export class Disqus implements OnChanges { 22 | 23 | /** DISQUS options */ 24 | @Input() url: string; 25 | @Input() identifier: string; 26 | @Input() title: string; 27 | @Input() category: string; 28 | @Input() language: string; 29 | 30 | /** DISQUS events */ 31 | @Output() newComment = new EventEmitter(true); 32 | @Output() ready = new EventEmitter(true); 33 | @Output() paginate = new EventEmitter(true); 34 | 35 | constructor(private disqus: DisqusService, 36 | private renderer: Renderer2, 37 | private el: ElementRef) { 38 | } 39 | 40 | ngOnChanges(): void { 41 | /** Reset Disqus if any input changed */ 42 | if (!this.disqus.DISQUS) { 43 | this.addDisqusScript(); 44 | } else { 45 | this.reset(); 46 | } 47 | } 48 | 49 | /** Add DISQUS script */ 50 | addDisqusScript(): void { 51 | /** Set DISQUS config */ 52 | this.disqus.config = this.getConfig(); 53 | 54 | const disqusScript = this.renderer.createElement('script'); 55 | disqusScript.src = `//${ this.disqus.shortname }.disqus.com/embed.js`; 56 | disqusScript.async = true; 57 | disqusScript.type = 'text/javascript'; 58 | this.renderer.setAttribute(disqusScript, 'data-timestamp', new Date().getTime().toString()); 59 | this.renderer.appendChild(this.el.nativeElement, disqusScript); 60 | } 61 | 62 | /** Reset DISQUS with the new config */ 63 | reset(): void { 64 | this.disqus.DISQUS.reset({ 65 | reload: true, 66 | config: this.getConfig() 67 | }); 68 | } 69 | 70 | /** Create DISQUS config from the inputs */ 71 | getConfig(): () => void { 72 | const self = this; 73 | return function (): void { 74 | this.page.identifier = self.identifier; 75 | this.page.url = self.validateUrl(self.url); 76 | this.page.title = self.title; 77 | this.category_id = self.category; 78 | this.language = self.language; 79 | 80 | /* Available callbacks are afterRender, onInit, onNewComment, onPaginate, onReady, preData, preInit, preReset */ 81 | this.callbacks.onNewComment = [(e: any) => { 82 | self.newComment.emit(e); 83 | }]; 84 | 85 | this.callbacks.onReady = [(e: any) => { 86 | self.ready.emit(e); 87 | }]; 88 | 89 | this.callbacks.onPaginate = [(e: any) => { 90 | self.paginate.emit(e); 91 | }]; 92 | }; 93 | } 94 | 95 | validateUrl(url: string): string | undefined { 96 | /** Validate URL input */ 97 | if (url) { 98 | const r = /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/; 99 | 100 | if (r.test(url)) { 101 | return url; 102 | } else { 103 | console.warn('[Disqus]: Invalid URL'); 104 | } 105 | } 106 | /** DISQUS will fallback to "Window.location.href" when URL is undefined */ 107 | return undefined; 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /projects/ngx-disqus/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of ngx-disqus 3 | */ 4 | 5 | export * from './lib/disqus'; 6 | export * from './lib/disqus.service'; 7 | export * from './lib/disqus.model'; 8 | export * from './lib/disqus.module'; 9 | -------------------------------------------------------------------------------- /projects/ngx-disqus/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/lib", 6 | "declaration": true, 7 | "declarationMap": true, 8 | "inlineSources": true, 9 | "types": [] 10 | }, 11 | "exclude": [ 12 | "**/*.spec.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /projects/ngx-disqus/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.lib.json", 4 | "compilerOptions": { 5 | "declarationMap": false 6 | }, 7 | "angularCompilerOptions": { 8 | "compilationMode": "partial" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /projects/ngx-disqus/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "include": [ 11 | "**/*.spec.ts", 12 | "**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 |

Angular Disqus Component

7 |
8 |
9 | 10 | 11 | Fork me on GitHub 13 | 14 | 15 |
16 | 17 |
18 | 19 |
20 |
21 | -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MurhafSousli/ngx-disqus/e53c50c3e8c472c70a769f1fcff2b3fbfac7f074/src/app/app.component.scss -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { DisqusModule } from 'ngx-disqus'; 4 | import { DocsComponent } from './docs/docs.component'; 5 | 6 | @Component({ 7 | selector: 'app-root', 8 | standalone: true, 9 | imports: [CommonModule, DisqusModule, DocsComponent], 10 | templateUrl: './app.component.html', 11 | styleUrls: ['./app.component.scss'] 12 | }) 13 | export class AppComponent { 14 | } 15 | -------------------------------------------------------------------------------- /src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig } from '@angular/core'; 2 | import { DISQUS_SHORTNAME } from 'ngx-disqus'; 3 | import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs'; 4 | 5 | export const appConfig: ApplicationConfig = { 6 | providers: [ 7 | { 8 | provide: DISQUS_SHORTNAME, 9 | useValue: 'ngx' 10 | }, 11 | { 12 | provide: HIGHLIGHT_OPTIONS, 13 | useValue: { 14 | coreLibraryLoader: () => import('highlight.js/lib/core'), 15 | languages: { 16 | typescript: () => import('highlight.js/lib/languages/typescript'), 17 | css: () => import('highlight.js/lib/languages/css'), 18 | xml: () => import('highlight.js/lib/languages/xml') 19 | }, 20 | themePath: 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8.0/build/styles/github.min.css' 21 | } 22 | } 23 | ] 24 | }; 25 | -------------------------------------------------------------------------------- /src/app/docs/docs.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |

Add Disqus to your 🆖 app instantly

5 | 6 |
7 | 8 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | npm 27 | 28 |
29 |
30 | 31 |
32 |

Installation

33 |

Install it with npm

34 | 
$ npm install --save ngx-disqus
35 |
36 | 37 |
38 |

Usage

39 |

Set the Disqus shortname using DISQUS_SHORTNAME injection token

40 |
41 |

Set the identifier for the disqus component

42 |
43 |
44 | 45 |
46 |

More Options

47 | 48 |

Check Disqus official documentation

49 | 50 |
51 | 52 |
53 | NOTE: 54 |

The HashLocationStrategy is not compatible with Disqus

55 |
56 |
57 | 58 | 59 |
60 |

Author

61 |

Murhaf Sousli

62 | 70 |
71 |
72 | -------------------------------------------------------------------------------- /src/app/docs/docs.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MurhafSousli/ngx-disqus/e53c50c3e8c472c70a769f1fcff2b3fbfac7f074/src/app/docs/docs.component.scss -------------------------------------------------------------------------------- /src/app/docs/docs.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { Highlight } from 'ngx-highlightjs'; 4 | 5 | @Component({ 6 | selector: 'app-docs', 7 | standalone: true, 8 | imports: [CommonModule, Highlight], 9 | templateUrl: './docs.component.html', 10 | }) 11 | export class DocsComponent { 12 | 13 | readonly usage: string = `import { DisqusModule } from 'ngx-disqus'; 14 | 15 | @Component({ 16 | standalone: true, 17 | imports: [DisqusModule], 18 | selector: 'single-post', 19 | template: \`\` 20 | }) 21 | export class SinglePostComponent { 22 | pageId: string = '/post/123'; 23 | }`; 24 | 25 | readonly shortname: string = `import { DISQUS_SHORTNAME } from 'ngx-disqus'; 26 | 27 | export const appConfig: ApplicationConfig = { 28 | providers: [ 29 | { 30 | provide: DISQUS_SHORTNAME, 31 | useValue: 'disqus_shortname' 32 | }, 33 | ] 34 | }`; 35 | 36 | readonly advancedUsage: string = ``; 39 | } 40 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MurhafSousli/ngx-disqus/e53c50c3e8c472c70a769f1fcff2b3fbfac7f074/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 8 | 10 | 14 | 15 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MurhafSousli/ngx-disqus/e53c50c3e8c472c70a769f1fcff2b3fbfac7f074/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Angular Disqus Component 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | Loading... 26 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { appConfig } from './app/app.config'; 3 | import { AppComponent } from './app/app.component'; 4 | 5 | bootstrapApplication(AppComponent, appConfig) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); 2 | //@import '~normalize.css'; 3 | 4 | * { 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | font-family: 'Roboto', sans-serif; 10 | color: #1d496a; 11 | } 12 | 13 | h1 { 14 | text-align: center; 15 | margin-bottom: 1em; 16 | } 17 | 18 | .subtitle { 19 | text-align: center; 20 | font-size: 1.1em; 21 | margin-bottom: 1.5em; 22 | } 23 | 24 | .badges { 25 | text-align: center; 26 | } 27 | 28 | .container { 29 | max-width: 700px; 30 | margin: auto; 31 | } 32 | 33 | .cover { 34 | width: 150px; 35 | margin: 6em auto 3em; 36 | } 37 | 38 | pre { 39 | margin: 2em 0; 40 | border-radius: 4px; 41 | display: flex; 42 | height: 100%; 43 | word-wrap: normal; 44 | overflow-y: auto; 45 | border: 1px solid lightgray; 46 | code { 47 | border: none; 48 | display: block; 49 | padding: 10px 16px !important; 50 | } 51 | } 52 | 53 | code { 54 | border-radius: 4px; 55 | border: 1px solid lightgray; 56 | flex: 1; 57 | padding: 7px; 58 | line-height: 1.8em; 59 | } 60 | 61 | li { 62 | margin-bottom: 1em; 63 | } 64 | 65 | section { 66 | margin-bottom: 40px; 67 | h2 { 68 | &:before { 69 | color: #e03237; 70 | content: '¶'; 71 | float: left; 72 | margin-right: 10px; 73 | } 74 | &:after { 75 | content: ''; 76 | display: block; 77 | height: 1px; 78 | width: 100%; 79 | opacity: 0.1; 80 | background-color: black; 81 | margin-top: 15px; 82 | } 83 | } 84 | } 85 | 86 | img { 87 | max-width: 100%; 88 | } 89 | 90 | a { 91 | color: #0677b7; 92 | text-decoration: none; 93 | transition: all ease 0.35s; 94 | margin: 0.2em; 95 | &:hover { 96 | color: rgba(#0677b7, 0.7); 97 | } 98 | } 99 | 100 | .note { 101 | border-radius: 4px; 102 | padding: 16px; 103 | border: 1px dashed #e03237; 104 | p { 105 | margin-bottom: 0; 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "forceConsistentCasingInFileNames": true, 8 | "strict": false, 9 | "noImplicitOverride": true, 10 | "noPropertyAccessFromIndexSignature": true, 11 | "noImplicitReturns": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "sourceMap": true, 14 | "paths": { 15 | "ngx-disqus": [ 16 | "projects/ngx-disqus/src/public-api" 17 | ] 18 | }, 19 | "declaration": false, 20 | "downlevelIteration": true, 21 | "experimentalDecorators": true, 22 | "moduleResolution": "node", 23 | "importHelpers": true, 24 | "target": "ES2022", 25 | "module": "ES2022", 26 | "useDefineForClassFields": false, 27 | "lib": [ 28 | "ES2022", 29 | "dom" 30 | ] 31 | }, 32 | "angularCompilerOptions": { 33 | "enableI18nLegacyMessageIdFormat": false, 34 | "strictInjectionParameters": true, 35 | "strictInputAccessModifiers": true, 36 | "strictTemplates": true 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "include": [ 11 | "src/**/*.spec.ts", 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | --------------------------------------------------------------------------------