[Internal-QA]: Fixes for social media seo

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/dot-edit-content.component.html

@@ -40,15 +40,22 @@
         *dotShowHideFeature="featureFlagSeo; alternate: disabledComponent"
         [ngTemplateOutlet]="enabledComponent"></ng-container>
 
-    <div class="dot-edit-content__wrapper">
+    <div
+        class="dot-edit-content__wrapper"
+        [class.dot-edit-content__preview]="!isEditMode"
+        data-testId="edit-content-wrapper">
         <dot-loading-indicator fullscreen="true"></dot-loading-indicator>
         <dot-results-seo-tool
             *ngIf="pageState.seoMedia; else dotEditIframe"
             [hostName]="pageState.page.hostName"
             [seoMedia]="pageState.seoMedia"
+            [device]="pageState.viewAs.device"
             [seoOGTagsResults]="seoOGTagsResults"
             [seoOGTags]="seoOGTags"></dot-results-seo-tool>
         <ng-template #dotEditIframe>
+            <dot-select-seo-tool
+                *ngIf="pageState.viewAs.device"
+                [device]="pageState.viewAs.device"></dot-select-seo-tool>
             <div
                 class="dot-edit__page-wrapper"
                 [class.dot-edit__page-wrapper--deviced]="pageState.viewAs.device">

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/dot-edit-content.component.scss

@@ -2,7 +2,7 @@
 @import "mixins";
 
 :host {
-    background-color: $color-palette-gray-200;
+    background-color: $white;
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -19,7 +19,7 @@ dot-whats-changed,
 }
 
 .dot-edit__page-wrapper {
-    background-color: $color-palette-gray-200;
+    background-color: $white;
     height: 100%;
     max-width: 100%;
     padding: $spacing-5;
@@ -41,6 +41,10 @@ dot-whats-changed,
     flex-grow: 1;
     z-index: 1;
     padding-right: 80px;
+
+    &.dot-edit-content__preview {
+        flex-direction: column;
+    }
 }
 
 .dot-edit__device-wrapper {
@@ -53,8 +57,7 @@ dot-whats-changed,
     .dot-edit__page-wrapper--deviced & {
         flex-grow: 0;
         border-radius: 10px;
-        border: 2px solid #ddd;
-        box-shadow: 4px 4px 15px $color-palette-black-op-10;
+        box-shadow: $md-shadow-6;
         background: $white;
         background: linear-gradient(135deg, $white 0%, rgba(240, 240, 240, 1) 100%);
         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=1);

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/dot-edit-content.component.spec.ts

@@ -731,19 +731,24 @@ describe('DotEditContentComponent', () => {
 
                 it('should render in preview mode', fakeAsync(() => {
                     detectChangesForIframeRender(fixture);
-
+                    component.isEditMode = false;
                     expect(dotEditContentHtmlService.renderPage).toHaveBeenCalledWith(
                         mockRenderedPageState,
                         jasmine.any(ElementRef)
                     );
+                    fixture.detectChanges();
+                    const wrapperEdit = de.query(By.css('[data-testId="edit-content-wrapper"]'));
+
                     expect(dotEditContentHtmlService.initEditMode).not.toHaveBeenCalled();
                     expect(dotEditContentHtmlService.setCurrentPage).toHaveBeenCalledWith(
                         mockRenderedPageState.page
                     );
+                    expect(wrapperEdit.nativeElement).toHaveClass('dot-edit-content__preview');
                 }));
 
                 it('should render in edit mode', fakeAsync(() => {
                     spyOn(dotLicenseService, 'isEnterprise').and.returnValue(of(true));
+                    component.isEditMode = true;
                     const state = new DotPageRenderState(
                         mockUser(),
                         new DotPageRender({
@@ -761,7 +766,9 @@ describe('DotEditContentComponent', () => {
                         content: state
                     });
                     detectChangesForIframeRender(fixture);
+                    fixture.detectChanges();
 
+                    const wrapperEdit = de.query(By.css('[data-testId="edit-content-wrapper"]'));
                     expect(dotEditContentHtmlService.initEditMode).toHaveBeenCalledWith(
                         state,
                         jasmine.any(ElementRef)
@@ -770,6 +777,7 @@ describe('DotEditContentComponent', () => {
                     expect(dotEditContentHtmlService.setCurrentPage).toHaveBeenCalledWith(
                         state.page
                     );
+                    expect(wrapperEdit.nativeElement).not.toHaveClass('dot-edit-content__preview');
                 }));
 
                 it('should show/hide content palette in edit mode with correct content', fakeAsync(() => {

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/dot-edit-content.module.ts

@@ -44,6 +44,7 @@ import { DotSeoMetaTagsService } from './services/html/dot-seo-meta-tags.service
 
 import { DotEditPageToolbarSeoComponent } from '../seo/components/dot-edit-page-toolbar-seo/dot-edit-page-toolbar-seo.component';
 import { DotResultsSeoToolComponent } from '../seo/components/dot-results-seo-tool/dot-results-seo-tool.component';
+import { DotSelectSeoToolComponent } from '../seo/components/dot-select-seo-tool/dot-select-seo-tool.component';
 const routes: Routes = [
     {
         component: DotEditContentComponent,
@@ -75,7 +76,8 @@ const routes: Routes = [
         DotIconModule,
         DotEditPageToolbarSeoComponent,
         DotShowHideFeatureDirective,
-        DotResultsSeoToolComponent
+        DotResultsSeoToolComponent,
+        DotSelectSeoToolComponent
     ],
     exports: [DotEditContentComponent],
     providers: [

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/services/dot-edit-content-html/models/meta-tags-model.ts

@@ -25,14 +25,18 @@ export enum SEO_LIMITS {
     MIN_TITLE_LENGTH = 30,
     MAX_TITLE_LENGTH = 60,
     MIN_OG_TITLE_LENGTH = 30,
-    MAX_OG_TITLE_LENGTH = 160,
+    MAX_OG_TITLE_LENGTH = 60,
     MIN_OG_DESCRIPTION_LENGTH = 55,
     MAX_OG_DESCRIPTION_LENGTH = 150,
+    MIN_DESCRIPTION_LENGTH = 55,
+    MAX_DESCRIPTION_LENGTH = 160,
     MAX_FAVICONS = 1,
     MAX_TITLES = 1,
     MAX_IMAGE_BYTES = 8000000,
     MAX_TWITTER_IMAGE_BYTES = 5000000,
-    MAX_TWITTER_DESCRIPTION_LENGTH = 200
+    MAX_TWITTER_DESCRIPTION_LENGTH = 200,
+    MIN_TWITTER_TITLE_LENGTH = 30,
+    MAX_TWITTER_TITLE_LENGTH = 70
 }
 
 export enum SEO_RULES_COLORS {
@@ -59,7 +63,6 @@ export interface SeoMetaTagsResult {
     keyColor: string;
     items: SeoRulesResult[];
     sort: number;
-    info?: string;
 }
 
 export interface SeoMetaTags {
@@ -71,6 +74,7 @@ export interface SeoMetaTags {
     imageOgElements?: NodeListOf<Element>;
     descriptionOgElements?: NodeListOf<Element>;
     description?: string;
+    descriptionElements?: NodeListOf<Element>;
     'og:description'?: string;
     'og:image'?: string;
     'og:title'?: string;
@@ -93,7 +97,7 @@ export const SeoMediaKeys = {
         SEO_OPTIONS.TWITTER_DESCRIPTION,
         SEO_OPTIONS.TWITTER_IMAGE
     ],
-    linkedin: [SEO_OPTIONS.DESCRIPTION, SEO_OPTIONS.OG_IMAGE, SEO_OPTIONS.OG_TITLE],
+    linkedin: [SEO_OPTIONS.OG_DESCRIPTION, SEO_OPTIONS.OG_IMAGE, SEO_OPTIONS.OG_TITLE],
     all: [
         SEO_OPTIONS.DESCRIPTION,
         SEO_OPTIONS.OG_IMAGE,
@@ -116,7 +120,6 @@ export interface ImageMetaData {
 export interface OpenGraphOptions {
     getItems: (object: SeoMetaTags) => Observable<SeoRulesResult[]>;
     sort: number;
-    info: string;
 }
 
 export interface MetaTagsPreview {
@@ -148,3 +151,32 @@ export const SEO_TAGS = [
     SEO_OPTIONS.TWITTER_DESCRIPTION,
     SEO_OPTIONS.TWITTER_IMAGE
 ];
+
+export const socialMediaTiles: Record<SEO_MEDIA_TYPES, SocialMediaOption> = {
+    [SEO_MEDIA_TYPES.FACEBOOK]: {
+        label: 'Facebook',
+        value: SEO_MEDIA_TYPES.FACEBOOK,
+        icon: 'pi pi-facebook'
+    },
+    [SEO_MEDIA_TYPES.TWITTER]: {
+        label: 'X (Formerly Twitter)',
+        value: SEO_MEDIA_TYPES.TWITTER,
+        icon: 'pi pi-twitter'
+    },
+    [SEO_MEDIA_TYPES.LINKEDIN]: {
+        label: 'Linkedin',
+        value: SEO_MEDIA_TYPES.LINKEDIN,
+        icon: 'pi pi-linkedin'
+    },
+    [SEO_MEDIA_TYPES.GOOGLE]: {
+        label: 'Google',
+        value: SEO_MEDIA_TYPES.GOOGLE,
+        icon: 'pi pi-google'
+    }
+};
+
+export interface SocialMediaOption {
+    label: string;
+    value: SEO_MEDIA_TYPES;
+    icon: string;
+}

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/services/html/dot-seo-meta-tags.service.spec.ts

@@ -39,29 +39,25 @@ describe('DotSetMetaTagsService', () => {
                             'HTML Title found, with an appropriate amount of content!',
                         'seo.resuls.tool.read.more': 'Read More',
                         'seo.resuls.tool.version': 'Version',
-                        'seo.rules.description.info':
-                            "The length of the description allowed will depend on the reader's device size; on the smallest size only about 110 characters are allowed.",
-                        'seo.rules.title.info':
-                            'HTML Title content should be between 30 and 60 characters.',
                         'seo.rules.og-title.not.found':
-                            'og:title metatag not found! Showing HTML Title instead.',
-                        'seo.rules.og-title.more.one.found': 'more than 1 og:title metatag found!',
+                            'og:title meta tag not found! Showing HTML Title instead.',
+                        'seo.rules.og-title.more.one.found': 'more than 1 og:title meta tag found!',
                         'seo.rules.og-title.more.one.found.empty':
-                            'og:title metatag found, but is empty!',
+                            'og:title meta tag found, but is empty!',
                         'seo.rules.og-title.greater':
-                            'og:title metatag found, but has more than 160 characters.',
+                            'og:title meta tag found, but has more than 160 characters.',
                         'seo.rules.og-title.less':
-                            'title metatag found, but has fewer than 30 characters of content.',
+                            'title meta tag found, but has fewer than 30 characters of content.',
                         'seo.rules.og-title.found':
-                            'og:title metatag found, with an appropriate amount of content!',
-                        'seo.rules.og-image.not.found': 'og:image metatag not found!',
-                        'seo.rules.og-image.more.one.found': 'more than 1 og:image metatag found!',
+                            'og:title meta tag found, with an appropriate amount of content!',
+                        'seo.rules.og-image.not.found': 'og:image meta tag not found!',
+                        'seo.rules.og-image.more.one.found': 'more than 1 og:image meta tag found!',
                         'seo.rules.og-image.more.one.found.empty':
-                            'og:image metatag found, but is empty!',
+                            'og:image meta tag found, but is empty!',
                         'seo.rules.og-image.over':
-                            'og:image metatag found, but image is over 8 MB.',
+                            'og:image meta tag found, but image is over 8 MB.',
                         'seo.rules.og-image.found':
-                            'og:image metatag found, with an appropriate sized image!',
+                            'og:image meta tag found, with an appropriate sized image!',
                         'seo.rules.twitter-card.not.found': 'twitter:card meta tag not found!',
                         'seo.rules.twitter-card.more.one.found':
                             'more than 1 twitter:card meta tag found!',
@@ -109,7 +105,9 @@ describe('DotSetMetaTagsService', () => {
                         'seo.rules.og-description.less':
                             'og:description meta tag found, but has fewer than 55 characters of content.',
                         'seo.rules.og-description.found':
-                            'og:description meta tag with valid content found!'
+                            'og:description meta tag with valid content found!',
+                        'seo.rules.description.more.one.found':
+                            'More than 1 Meta Description found!'
                     })
                 },
                 DotUploadService
@@ -172,7 +170,7 @@ describe('DotSetMetaTagsService', () => {
         const twitterDescriptionElements = testDoc.querySelectorAll(
             'meta[name="twitter:description"]'
         );
-
+        const descriptionElements = testDoc.querySelectorAll('meta[name="description"]');
         const descriptionOgElements = testDoc.querySelectorAll('meta[property="og:description"]');
 
         expect(service.getMetaTags(testDoc)).toEqual({
@@ -190,7 +188,8 @@ describe('DotSetMetaTagsService', () => {
             twitterTitleElements,
             twitterImageElements,
             twitterDescriptionElements,
-            descriptionOgElements
+            descriptionOgElements,
+            descriptionElements
         });
     });
 
@@ -202,7 +201,7 @@ describe('DotSetMetaTagsService', () => {
         });
     });
 
-    it('should that got more than one og-description error', (done) => {
+    it('should get more than one og-description error', (done) => {
         const ogMetaDescription = document.createElement('meta');
         ogMetaDescription.setAttribute('property', 'og:description');
         ogMetaDescription.setAttribute('content', 'BE');
@@ -215,17 +214,17 @@ describe('DotSetMetaTagsService', () => {
         testDoc.head.appendChild(ogMetaDescriptionSecond);
 
         service.getMetaTagsResults(testDoc).subscribe((value) => {
-            expect(value[0].items[0].message).toEqual(
+            expect(value[5].items[0].message).toEqual(
                 'more than 1 <code>og:description</code> meta tag found!'
             );
-            expect(value[0].items[1].message).toEqual(
+            expect(value[5].items[1].message).toEqual(
                 '<code>og:description</code> meta tag found, but has fewer than 55 characters of content.'
             );
             done();
         });
     });
 
-    it('should that got more than one og:title error', (done) => {
+    it('should get more than one og:title error', (done) => {
         const ogMetaTitle = document.createElement('meta');
         ogMetaTitle.setAttribute('property', 'og:title');
         ogMetaTitle.setAttribute('content', 'Costa Rica Special Offer');
@@ -239,12 +238,32 @@ describe('DotSetMetaTagsService', () => {
 
         service.getMetaTagsResults(testDoc).subscribe((value) => {
             expect(value[2].items[0].message).toEqual(
-                'more than 1 <code>og:title</code> metatag found!'
+                'more than 1 <code>og:title</code> meta tag found!'
             );
             expect(value[2].items[1].message).toEqual(
-                'title metatag found, but has fewer than 30 characters of content.'
+                'title meta tag found, but has fewer than 30 characters of content.'
             );
             done();
         });
     });
+
+    it('should get more than description error', (done) => {
+        const description = document.createElement('meta');
+        description.setAttribute('name', 'description');
+        description.setAttribute('content', 'Costa Rica Special Offer');
+
+        testDoc.head.appendChild(description);
+
+        service.getMetaTagsResults(testDoc).subscribe((value) => {
+            expect(value[0].items[0].message).toEqual('More than 1 Meta Description found!');
+            done();
+        });
+    });
+
+    it('should get description found', (done) => {
+        service.getMetaTagsResults(testDoc).subscribe((value) => {
+            expect(value[0].items[0].message).toEqual('Meta Description found!');
+            done();
+        });
+    });
 });