#25959 adding preview component

dotCMS · Oct 17, 2023 · b376597 · b376597
1 parent 2f9a16c
commit b376597
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 21 deletions.
diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/dot-edit-content.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/dot-edit-content.component.ts
@@ -532,12 +532,9 @@ browse from the page internal links
                 this.isEditMode = true;
             });
         } else {
-            this.dotEditContentHtmlService.renderPage(pageState, this.iframe);
-            this.dotPageStateService.state$.subscribe(() => {
-                if (pageState.seoMedia) {
-                    this.seoOGTags = this.dotEditContentHtmlService.getMetaTags();
-                    this.seoOGTagsResults = this.dotEditContentHtmlService.getMetaTagsResults();
-                }
+            this.dotEditContentHtmlService.renderPage(pageState, this.iframe).then(() => {
+                this.seoOGTags = this.dotEditContentHtmlService.getMetaTags();
+                this.seoOGTagsResults = this.dotEditContentHtmlService.getMetaTagsResults();
             });
             this.isEditMode = false;
         }

diff --git a/...tcms-ui/src/app/portlets/dot-edit-page/content/services/html/dot-seo-meta-tags.service.ts b/...tcms-ui/src/app/portlets/dot-edit-page/content/services/html/dot-seo-meta-tags.service.ts
@@ -27,6 +27,7 @@ import {
 @Injectable()
 export class DotSeoMetaTagsService {
     readMoreValues: Record<SEO_MEDIA_TYPES, string[]>;
+    seoMedia: string;
 
     constructor(
         private dotMessageService: DotMessageService,
@@ -760,11 +761,19 @@ export class DotSeoMetaTagsService {
     }
 
     /**
-     * This uploads the image temporaly to get the file size, only if it is external
+     * This uploads the image temporaly to get the file size, only if it is external.
+     * Checks if the imageUrl has been sent or seoMedia is not null.
      * @param imageUrl string
      * @returns
      */
     getImageFileSize(imageUrl: string): Observable<DotCMSTempFile | ImageMetaData> {
+        if (!imageUrl) {
+            return of({
+                length: 0,
+                url: IMG_NOT_FOUND_KEY
+            });
+        }
+
         return from(fetch(imageUrl)).pipe(
             mergeMap((response) => {
                 if (response.status === 404) {

diff --git a/...ets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.html b/...ets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.html
@@ -13,10 +13,18 @@
                             [class.results-seo-tool__version--small]="preview.isMobile"
                             data-testId="seo-preview-mobile">
                             <div class="results-seo-tool__card-title">
-                                <img
+                                <div
                                     class="results-seo-tool__card-favicon"
-                                    [src]="seoOGTags.favicon"
-                                    alt="favicon" />
+                                    *ngIf="noFavicon; else favicon">
+                                    <i class="pi pi-globe"></i>
+                                </div>
+                                <ng-template #favicon>
+                                    <img
+                                        class="results-seo-tool__card-favicon"
+                                        [src]="seoOGTags.favicon"
+                                        (error)="onFaviconError()"
+                                        alt="favicon" />
+                                </ng-template>
                                 <span data-testId="page-hostName">{{ preview.hostName }}</span>
                             </div>
                             <a
@@ -33,15 +41,15 @@
                     </div>
                 </div>
                 <div *ngSwitchCase="seoMediaTypes.TWITTER">
-                    <dot-seo-image-preview image="mainPreview.image"></dot-seo-image-preview>
+                    <dot-seo-image-preview [image]="mainPreview.image"></dot-seo-image-preview>
                     <div class="results-seo-tool__preview">
                         <span data-testId="page-hostName">{{ mainPreview.hostName }}</span>
                         <h5>{{ mainPreview.twitterTitle }}</h5>
                         <p>{{ mainPreview.twitterDescription }}</p>
                     </div>
                 </div>
                 <div *ngSwitchDefault>
-                    <dot-seo-image-preview image="mainPreview.image"></dot-seo-image-preview>
+                    <dot-seo-image-preview [image]="mainPreview.image"></dot-seo-image-preview>
                     <div class="results-seo-tool__preview">
                         <span data-testId="page-hostName">{{ mainPreview.hostName }}</span>
                         <h5>{{ mainPreview.title }}</h5>

diff --git a/...ets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.scss b/...ets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.scss
@@ -48,6 +48,7 @@
     border-radius: 6.25rem;
     background: $color-palette-gray-200;
     padding: $spacing-1;
+    color: $color-palette-gray-800;
 }
 
 .results-seo-tool__search-title {

diff --git a/...tlets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.ts b/...tlets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.ts
@@ -67,7 +67,7 @@ export class DotResultsSeoToolComponent implements OnInit, OnChanges {
     allPreview: MetaTagsPreview[];
     mainPreview: MetaTagsPreview;
     seoMediaTypes = SEO_MEDIA_TYPES;
-    defaultPreview = false;
+    noFavicon = false;
 
     ngOnInit() {
         const title =
@@ -120,4 +120,8 @@ export class DotResultsSeoToolComponent implements OnInit, OnChanges {
             })
         );
     }
+
+    onFaviconError(): void {
+        this.noFavicon = true;
+    }
 }
diff --git a/...s/dot-edit-page/seo/components/dot-seo-image-preview/dot-seo-image-preview.component.html b/...s/dot-edit-page/seo/components/dot-seo-image-preview/dot-seo-image-preview.component.html
@@ -4,8 +4,8 @@ <h5>{{ 'seo.rules.media.preview.not.defined' | dm }}</h5>
 </div>
 <ng-template #imagePreview>
     <img
-        class="results-seo-tool__preview-image"
+        class="dot-seo-image-preview__image"
         [src]="image"
-        (error)="onImageError($event)"
+        (error)="onImageError()"
         alt="preview image" />
 </ng-template>
diff --git a/...s/dot-edit-page/seo/components/dot-seo-image-preview/dot-seo-image-preview.component.scss b/...s/dot-edit-page/seo/components/dot-seo-image-preview/dot-seo-image-preview.component.scss
@@ -18,17 +18,12 @@ $image-height: 23.875rem;
     flex-direction: column;
     color: $black;
     background-color: $color-palette-gray-100;
-
-    .pi {
-        font-size: $font-size-xxl;
-        color: $color-alert-red;
-    }
 }
 
 :host ::ng-deep {
     .dot-seo-image-preview__default {
         .pi {
-            font-size: 2.5rem;
+            font-size: $font-size-xxxl;
             color: $color-alert-red;
         }
     }