External Website Favicon Detection

open-template-hub · Sep 13, 2021 · 799a31e · 799a31e
1 parent c5fc663
commit 799a31e
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 23 deletions.
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  singleQuote: true,
+};
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+    "prettier.singleQuote": true,
+    "prettier.jsxSingleQuote": true,
+    "javascript.preferences.quoteStyle": "single",
+    "typescript.preferences.quoteStyle": "single"
+}
diff --git a/src/app/page/splash-layout/external/external.component.html b/src/app/page/splash-layout/external/external.component.html
@@ -1,8 +1,12 @@
 <div class="splash-content flex-layout-column flex-center-center">
   <div class="splash-logos flex-layout-row flex-center-center">
-    <img [src]="brand.brandLogo" alt="logo"/>
+    <img [src]="brand.brandLogo" alt="logo" />
     <i aria-hidden="true" class="fa fa-arrow-alt-circle-right success-text"></i>
-    <img [src]="website.logo" alt="partner"/>
+    <img
+      [src]="website.logo"
+      alt="partner"
+      onerror="this.src='./assets/common/globe.png'"
+    />
   </div>
   <div class="alert-with-icon">
     <i aria-hidden="true" class="fas fa-info fa-lg fa-fw success-text"></i>
@@ -11,15 +15,31 @@
     </p>
     <br />
     <p>
-      {{ 'Will be redirected to: ' }}<br/><a class="link green-theme" (click)="redirect()">{{ href }}</a>
+      {{ "Will be redirected to: " }}<br /><a
+        class="link green-theme"
+        (click)="redirect()"
+        >{{ href }}</a
+      >
     </p>
   </div>
   <div class="external-component-button-wrapper">
-    <app-button1 [text]="'Home'" [lighterContrast]="true" [themeColor]="ThemeColorSettings.green" [isSleekButton]="true"
-                 transparent="true" [routerLink]="URLS.root">
+    <app-button1
+      [text]="'Home'"
+      [lighterContrast]="true"
+      [themeColor]="ThemeColorSettings.green"
+      [isSleekButton]="true"
+      transparent="true"
+      [routerLink]="URLS.root"
+    >
     </app-button1>
-    <app-button1 [text]="'Proceed'" [lighterContrast]="true" [themeColor]="ThemeColorSettings.green"
-                 [isSleekButton]="true" transparent="true" (click)="redirect()">
+    <app-button1
+      [text]="'Proceed'"
+      [lighterContrast]="true"
+      [themeColor]="ThemeColorSettings.green"
+      [isSleekButton]="true"
+      transparent="true"
+      (click)="redirect()"
+    >
     </app-button1>
   </div>
 </div>
diff --git a/src/app/page/splash-layout/external/external.component.ts b/src/app/page/splash-layout/external/external.component.ts
@@ -4,13 +4,12 @@ import { environmentCommon } from '../../../../environments/environment-common';
 import { ThemeColorSettings, URLS } from '../../../data/constant';
 import { ThemeService } from '../../../service/theme/theme.service';
 
-@Component( {
+@Component({
   selector: 'app-external',
   templateUrl: './external.component.html',
-  styleUrls: [ './external.component.scss' ]
-} )
+  styleUrls: ['./external.component.scss'],
+})
 export class ExternalComponent {
-
   href: any;
   info: string;
   website: any;
@@ -23,27 +22,34 @@ export class ExternalComponent {
   URLS = URLS;
 
   constructor(
-      private route: ActivatedRoute,
-      private router: Router,
-      private themeService: ThemeService
+    private route: ActivatedRoute,
+    private router: Router,
+    private themeService: ThemeService
   ) {
-    this.website = {
-      logo: './assets/common/globe.png'
-    };
-
     this.brand = this.themeService.brand;
 
-    this.route.queryParams.subscribe( params => {
+    this.route.queryParams.subscribe((params) => {
       this.href = params.href;
       this.info = params.info;
 
-      for ( const key in environmentCommon.website ) {
-        if ( this.href.startsWith( environmentCommon.website[ key ].url ) ) {
-          this.website = environmentCommon.website[ key ];
+      for (const key in environmentCommon.website) {
+        if (this.href.startsWith(environmentCommon.website[key].url)) {
+          this.website = environmentCommon.website[key];
           break;
         }
       }
-    } );
+
+      if (!this.website) {
+        const url = new URL(this.href);
+
+        const favicon =
+          'https://www.google.com/s2/favicons?sz=64&domain=' + url.origin;
+
+        this.website = {
+          logo: favicon,
+        };
+      }
+    });
   }
 
   redirect() {