-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add disqus comments to the posts component
- Loading branch information
1 parent
e48bf59
commit a6e4fba
Showing
11 changed files
with
323 additions
and
52 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
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
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,50 @@ | ||
| import { | ||
| Component, | ||
| NgModule, | ||
| Renderer2, | ||
| ElementRef, | ||
| AfterViewInit, | ||
| } from '@angular/core'; | ||
| import { ScullyRoutesService } from '@scullyio/ng-lib'; | ||
|
|
||
| import { Router } from '@angular/router'; | ||
| import { first } from 'rxjs/operators'; | ||
|
|
||
| import { CommentsService } from './comments.service'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-post-comments', | ||
| template: ` <div id="{{ containerId }}"></div> `, | ||
| styles: [''], | ||
| }) | ||
| export class PostCommentsComponent implements AfterViewInit { | ||
| containerId = this.commentsService.containerId; | ||
|
|
||
| constructor( | ||
| private renderer: Renderer2, | ||
| private el: ElementRef, | ||
| private router: Router, | ||
| private routeService: ScullyRoutesService, | ||
| private commentsService: CommentsService | ||
| ) {} | ||
|
|
||
| ngAfterViewInit() { | ||
| this.routeService | ||
| .getCurrent() | ||
| .pipe(first()) | ||
| .subscribe((route) => { | ||
| const config = { | ||
| url: this.router.url, | ||
| title: `Brandon Roberts - ${route.title}`, | ||
| }; | ||
|
|
||
| this.commentsService.initialize(config, this.renderer, this.el); | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| @NgModule({ | ||
| declarations: [PostCommentsComponent], | ||
| exports: [PostCommentsComponent], | ||
| }) | ||
| export class PostCommentsComponentModule {} |
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,111 @@ | ||
| import { | ||
| Injectable, | ||
| InjectionToken, | ||
| Inject, | ||
| ElementRef, | ||
| Renderer2, | ||
| } from '@angular/core'; | ||
| import { environment } from 'src/environments/environment'; | ||
|
|
||
| export interface DisqusConfig { | ||
| url: string; | ||
| identifier: string; | ||
| title: string; | ||
| } | ||
|
|
||
| export interface Disqus { | ||
| reset: (config: object) => void; | ||
| } | ||
|
|
||
| export type WindowDisqus = Window & { | ||
| DISQUS: Disqus; | ||
| disqus_config: () => void; | ||
| disqus_container_id: string; | ||
| }; | ||
|
|
||
| export const WINDOW_TOKEN = new InjectionToken<WindowDisqus>('Window', { | ||
| providedIn: 'root', | ||
| factory: () => { | ||
| return window as any; | ||
| }, | ||
| }); | ||
|
|
||
| export const DISQUS_TOKEN = new InjectionToken<Disqus>('DISQUS', { | ||
| providedIn: 'root', | ||
| factory: () => { | ||
| return (window as any).DISQUS; | ||
| }, | ||
| }); | ||
|
|
||
| @Injectable({ | ||
| providedIn: 'root', | ||
| }) | ||
| export class CommentsService { | ||
| readonly containerId = 'comments_thread'; | ||
|
|
||
| constructor( | ||
| @Inject(WINDOW_TOKEN) private window: WindowDisqus, | ||
| @Inject(DISQUS_TOKEN) private disqus: Disqus | ||
| ) {} | ||
|
|
||
| initialize( | ||
| page: { url: string; title: string }, | ||
| renderer: Renderer2, | ||
| element: ElementRef | ||
| ) { | ||
| this.window.disqus_container_id = this.containerId; | ||
|
|
||
| const config: DisqusConfig = { | ||
| url: environment.disqusConfig.url, | ||
| identifier: page.url, | ||
| title: page.title, | ||
| }; | ||
|
|
||
| if (!this.initialized()) { | ||
| this.initializeComments(config, renderer, element); | ||
| } else { | ||
| this.reset(config); | ||
| } | ||
| } | ||
|
|
||
| reset(page: DisqusConfig) { | ||
| const config = this.getConfig(page); | ||
|
|
||
| this.disqus.reset({ | ||
| reload: true, | ||
| config, | ||
| }); | ||
| } | ||
|
|
||
| private initialized() { | ||
| return !!this.disqus; | ||
| } | ||
|
|
||
| private initializeComments( | ||
| page: DisqusConfig, | ||
| renderer: Renderer2, | ||
| element: ElementRef | ||
| ) { | ||
| this.getConfig(page); | ||
|
|
||
| const disqusScript = renderer.createElement('script'); | ||
| disqusScript.src = `//${environment.disqusConfig.shortname}.disqus.com/embed.js`; | ||
| disqusScript.async = true; | ||
| disqusScript.type = 'text/javascript'; | ||
|
|
||
| renderer.setAttribute( | ||
| disqusScript, | ||
| 'data-timestamp', | ||
| new Date().getTime().toString() | ||
| ); | ||
| renderer.appendChild(element.nativeElement, disqusScript); | ||
| } | ||
|
|
||
| private getConfig(page: DisqusConfig) { | ||
| this.window.disqus_config = function () { | ||
| this.page = page; | ||
| }; | ||
|
|
||
| return this.window.disqus_config; | ||
| } | ||
| } |
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
Oops, something went wrong.