#26262 readmore styling

dotCMS · Oct 5, 2023 · dcbcde6 · dcbcde6
1 parent d0f3abe
commit dcbcde6
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 14 deletions.
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
@@ -75,10 +75,10 @@ <h5>{{ mainPreview.title }}</h5>
         </div>
     </ng-template>
     <ul class="results-seo-tool__result-card-list">
-        <li *ngFor="let item of readMore">
+        <li *ngFor="let item of readMore[seoMedia]">
             <i class="results-seo-tool__result-icon pi pi-info-circle"></i>
-            <a [href]="item.url" target="_blank">{{ item.label }}</a>
-            <i class="pi pi-external-link"></i>
+            <span [innerHTML]="item.label | safeHtml"></span>
+            <i class="pi pi-external-link" *ngIf="item.link"></i>
         </li>
     </ul>
 </p-card>
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
@@ -87,10 +87,11 @@
     display: flex;
     gap: $spacing-3;
     color: $black;
+    align-items: center;
 }
 
 .results-seo-tool__result-card-list li:not(:last-child) {
-    margin-bottom: $spacing-3;
+    margin-bottom: $spacing-4;
 }
 
 .results-seo-tool__result-icon {
@@ -155,6 +156,7 @@
 
     .results-seo-tool__result-card-list .pi-external-link {
         color: $color-palette-gray-700;
+        font-size: 12px;
     }
 
     .results-seo-tool__main-card .p-card .p-card-body {

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
@@ -62,16 +62,87 @@ export class DotResultsSeoToolComponent implements OnInit, OnChanges {
     allPreview: MetaTagsPreview[];
     mainPreview: MetaTagsPreview;
     seoMediaTypes = SEO_MEDIA_TYPES;
-    readMore = [
-        {
-            label: 'The Open Graph protocol',
-            url: 'https://ogp.me/'
-        },
-        {
-            label: 'Sharing Debugger - Meta for Developers',
-            url: 'https://developers.facebook.com/tools/debug/'
-        }
-    ];
+    readMore = {
+        [SEO_MEDIA_TYPES.FACEBOOK]: [
+            {
+                label: 'Learn more about <a target="_blank" href="https://ogp.me/">The Open Graph Protocol.</a>',
+                link: true
+            },
+            {
+                label: '<a target="_blank" href="https://developers.facebook.com/tools/debug/">Sharing Debugger - Meta for Developers</a>',
+                link: true
+            },
+            {
+                label: 'og:title content should be between 55 and 150 characters.'
+            },
+
+            {
+                label: 'og:title content should be unique across your site.'
+            },
+            {
+                label: 'og:image sizes should be under 1200 x 630 pixels.'
+            },
+            {
+                label: 'og:image file sizes should be under 8 MB.'
+            },
+            {
+                label: 'Read more about social media tile  <a target="_blank" href="https://blog.hootsuite.com/social-media-image-sizes-guide/">image sizes</a>',
+                link: true
+            }
+        ],
+        [SEO_MEDIA_TYPES.TWITTER]: [
+            {
+                label: 'The Open Graph protocol',
+                url: 'https://ogp.me/'
+            },
+            {
+                label: 'Sharing Debugger - Meta for Developers',
+                url: 'https://developers.facebook.com/tools/debug/'
+            }
+        ],
+        [SEO_MEDIA_TYPES.LINKEDIN]: [
+            {
+                label: 'LinkedIn’s <a target="_blank"  href="https://www.linkedin.com/post-inspector/">Post Inspector</a> Tool',
+                link: true
+            },
+            {
+                label: '<a target="_blank" href="https://www.linkedin.com/pulse/meta-tags-getting-them-right-linkedin-evelyn-pei/">Meta Tags: Getting Them Right for LinkedIn.</a>',
+                link: true
+            },
+            {
+                label: 'Read more about social media tile <a target="_blank" href="https://blog.hootsuite.com/social-media-image-sizes-guide/">image sizes.</a>',
+                link: true
+            }
+        ],
+        [SEO_MEDIA_TYPES.GOOGLE]: [
+            {
+                label: 'Favicons should be <a target="_blank" href="https://favicon.io/">.ico</a> files.',
+                link: true
+            },
+            {
+                label: 'HTML Title content should be between 30 and 60 characters.'
+            },
+            {
+                label: 'HTML Title content should be unique per page across your site.'
+            },
+            { label: 'Meta Description tags should be under 160 characters.' },
+            {
+                label: 'The length of the Description allowed will depend on the reader/\'/s device size; on the smallest size only about 110 characters are allowed. Longer descriptions will show up with some sort of "read more" or "expand" option.'
+            },
+            {
+                label: '<a target="_blank" href="https://ahrefs.com/blog/seo-meta-tags/">Meta Tags for SEO: A Simple Guide for Beginners</a>',
+                link: true
+            },
+            {
+                label: '<a target="_blank" href="https://moz.com/learn/seo/meta-description">What Are Meta Descriptions And How to Write Them</a>',
+                link: true
+            },
+            {
+                label: 'Read more about social media tile <a target="_blank" href="https://blog.hootsuite.com/social-media-image-sizes-guide/">image sizes.</a>',
+                link: true
+            }
+        ]
+    };
 
     ngOnInit() {
         this.allPreview = [