Feature/#266 cv monochrome force create header section

packages/manfred-common/src/doc-parts/profile-section/profile-section.mapper.spec.ts

@@ -82,6 +82,9 @@ describe('Testing profile-section.mapper.ts', () => {
         fullname: ' ',
         emails: [] as string[],
         relevantLinks: [] as RelevantLinkVm[],
+        avatarUrl: '',
+        city: '',
+        country: '',
       };
 
       // Act
@@ -101,6 +104,9 @@ describe('Testing profile-section.mapper.ts', () => {
         fullname: ' ',
         emails: [] as string[],
         relevantLinks: [] as RelevantLinkVm[],
+        avatarUrl: '',
+        city: '',
+        country: '',
       };
 
       // Act
@@ -132,6 +138,9 @@ describe('Testing profile-section.mapper.ts', () => {
         fullname: ' ',
         emails: [] as string[],
         relevantLinks: [] as RelevantLinkVm[],
+        avatarUrl: '',
+        city: '',
+        country: '',
       };
 
       // Act
@@ -163,6 +172,9 @@ describe('Testing profile-section.mapper.ts', () => {
         fullname: ' ',
         emails: [] as string[],
         relevantLinks: [] as RelevantLinkVm[],
+        avatarUrl: '',
+        city: '',
+        country: '',
       };
 
       // Act
@@ -203,6 +215,9 @@ describe('Testing profile-section.mapper.ts', () => {
         fullname: ' ',
         emails: [] as string[],
         relevantLinks: [] as RelevantLinkVm[],
+        avatarUrl: '',
+        city: '',
+        country: '',
       };
 
       // Act
@@ -244,6 +259,9 @@ describe('Testing profile-section.mapper.ts', () => {
         fullname: ' ',
         emails: [] as string[],
         relevantLinks: [] as RelevantLinkVm[],
+        avatarUrl: '',
+        city: '',
+        country: '',
       };
 
       // Act
@@ -270,9 +288,9 @@ describe('Testing profile-section.mapper.ts', () => {
         title: 'Computer Science Bachelor',
         description: 'Frontend developer',
         birthday: '30/03/1990',
-        avatar: undefined,
+        avatar: { link: 'http://manfredexport.com' },
         contact: theContact,
-        location: undefined,
+        location: { municipality: 'Madrid', country: 'Spain' },
       };
 
       const cv: ManfredAwesomicCV = {
@@ -295,6 +313,9 @@ describe('Testing profile-section.mapper.ts', () => {
         fullname: 'John Doe',
         emails: ['[email protected]', '[email protected]'] as string[],
         relevantLinks: [theLink] as RelevantLinkVm[],
+        avatarUrl: 'http://manfredexport.com',
+        city: 'Madrid',
+        country: 'Spain',
       };
 
       // Act

packages/manfred-common/src/doc-parts/profile-section/profile-section.mapper.ts

@@ -27,6 +27,12 @@ export const mapFromMacCvToProfileSectionVm = (cv: ManfredAwesomicCV): ProfileSe
   const description = cv?.aboutMe?.profile?.description ?? '';
   const fullname = `${name ?? ''} ${surnames ?? ''}`;
   const emails = (cv?.aboutMe?.profile?.contact?.contactMails as string[]) ?? [];
+
+  const avatarUrl = (cv?.aboutMe?.profile?.avatar?.link as string) ?? '';
+
+  const city = cv?.aboutMe?.profile?.location?.municipality ?? '';
+  const country = cv?.aboutMe?.profile?.location?.country ?? '';
+
   const relevantLinks = cv?.aboutMe?.relevantLinks
     ? mapRelevantLinksToVm(cv.aboutMe.relevantLinks as ManfredRelevantLink[])
     : [];
@@ -39,5 +45,8 @@ export const mapFromMacCvToProfileSectionVm = (cv: ManfredAwesomicCV): ProfileSe
     fullname,
     emails,
     relevantLinks,
+    avatarUrl,
+    city,
+    country,
   };
 };

packages/manfred-common/src/doc-parts/profile-section/profile-section.vm.ts

@@ -6,6 +6,9 @@ export interface ProfileSectionVm {
   fullname: string;
   emails: string[];
   relevantLinks: RelevantLinkVm[];
+  avatarUrl: string;
+  city: string;
+  country: string;
 }
 
 export interface RelevantLinkVm {

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/header-element-end/header-element-end.ejs

@@ -0,0 +1 @@
+</header>

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/header-element-end/header-element-end.part.ts

@@ -0,0 +1,4 @@
+import ejs from 'ejs';
+import headerElementEndTemplate from './header-element-end.ejs?raw';
+
+export const generateHeaderElementEnd = (): string => ejs.render(headerElementEndTemplate);

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/header-element-end/index.ts

@@ -0,0 +1 @@
+export * from './header-element-end.part';

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/header-element-start/header-element-start.ejs

@@ -0,0 +1,2 @@
+<div class="background"></div>
+<header class="container header">

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/header-element-start/header-element-start.part.ts

@@ -0,0 +1,4 @@
+import ejs from 'ejs';
+import headerElementStartTemplate from './header-element-start.ejs?raw';
+
+export const generateHeaderElementStart = (): string => ejs.render(headerElementStartTemplate);

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/header-element-start/index.ts

@@ -0,0 +1 @@
+export * from './header-element-start.part';

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/html-document-end/html-document-end.ejs

@@ -1,4 +1,4 @@
-<script>
+  <script>
     // Selecciona un elemento del DOM
     const elementInDOM = selector => document.querySelector(selector);
 

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/html-document-start/html-document-start.ejs

@@ -250,7 +250,7 @@
       .header__image {
         width: 100%;
         height: 100%;
-        background-image: url('https://media-asgard.s3.eu-west-1.amazonaws.com/22/11/22/46a1d99e-54b1-4d4f-b887-bd32b97684d8_david_squared_2018.jpg');
+        background-image: url('<%= avatarUrl -%>');
         background-size: cover;
         filter: saturate(25%);
         background-repeat: no-repeat;
@@ -711,5 +711,4 @@
       }
     </style>
   </head>
-  <body>
-    <h1 class="title">Probando</h1>
+  <body>

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/html-document-start/html-document-start.part.ts

@@ -1,5 +1,12 @@
 import ejs from 'ejs';
 import { HexColor } from '@/model';
+import { ManfredAwesomicCV } from '@lemoncode/manfred-common/model';
 import htmlDocumentStartTemplate from './html-document-start.ejs?raw';
+import { mapFromMacCvToProfileSectionVm } from '@lemoncode/manfred-common/profile-section';
 
-export const generateHtmlDocumentStart = (color: HexColor): string => ejs.render(htmlDocumentStartTemplate, { color });
+export const generateHtmlDocumentStart = (cv: ManfredAwesomicCV, color: HexColor): string => {
+  const profileSectionVm = mapFromMacCvToProfileSectionVm(cv);
+  const avatarUrl = profileSectionVm.avatarUrl;
+
+  return ejs.render(htmlDocumentStartTemplate, { color, avatarUrl });
+};

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/index.ts

@@ -1,2 +1,5 @@
 export * from './html-document-start';
 export * from './html-document-end';
+export * from './header-element-start';
+export * from './header-element-end';
+export * from './profile-section';

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/profile-section/index.ts

@@ -0,0 +1 @@
+export * from './profile-section';

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/profile-section/profile-section.ejs

@@ -0,0 +1,17 @@
+<%_ if (profile && profile !=='undefined' ) { -%>
+    <div class="header__text">
+        <h1 class="header__title">
+            <%= profile?.name %><br />
+            <span><%= profile?.surnames %></span>
+        </h1>
+        <p class="header__subtitle">
+            <%= profile?.title %>
+        </p>
+    </div>
+    <%_ if (profile.avatarUrl && profile.avatarUrl !=='undefined' ) { -%>
+        <div class="header__avatar">
+            <div class="header__image"></div>
+            <div class="header__filter"></div>
+        </div>
+    <%_ } -%>
+<%_ } -%>

packages/manfred2html/src/engine/cv-monochrome-force/html-parts/profile-section/profile-section.ts

@@ -0,0 +1,19 @@
+import ejs from 'ejs';
+import { ProfileSectionVm, mapFromMacCvToProfileSectionVm } from '@lemoncode/manfred-common/profile-section';
+import { ManfredAwesomicCV } from '@lemoncode/manfred-common/model';
+
+import profileSectionTemplate from './profile-section.ejs?raw';
+
+export const generateProfileSection = (cv: ManfredAwesomicCV): string => {
+  const profileSectionVm = mapFromMacCvToProfileSectionVm(cv);
+
+  return generateProfileSectionInner(profileSectionVm);
+};
+
+const generateProfileSectionInner = (profileSectionVm: ProfileSectionVm): string => {
+  const rootObject = {
+    profile: profileSectionVm,
+  };
+
+  return ejs.render(profileSectionTemplate, rootObject);
+};

packages/manfred2html/src/engine/cv-monochrome-force/index.ts

@@ -1,15 +1,27 @@
 import { ManfredAwesomicCV, Settings } from '@/model';
-import { generateHtmlDocumentStart, generateHtmlDocumentEnd } from './html-parts';
+import {
+  generateHtmlDocumentStart,
+  generateHtmlDocumentEnd,
+  generateHeaderElementStart,
+  generateHeaderElementEnd,
+  generateProfileSection,
+} from './html-parts';
 
 export const exportManfredJSonToCVMonochromeForceHTML = (
   manfredJsonContent: ManfredAwesomicCV,
   settings: Settings
 ): string => {
-  const htmlDocumentStart = generateHtmlDocumentStart(settings.colorTheme);
+  const htmlDocumentStart = generateHtmlDocumentStart(manfredJsonContent, settings.colorTheme);
   const htmlDocumentEnd = generateHtmlDocumentEnd();
+  const headerElementStart = generateHeaderElementStart();
+  const headerElementEnd = generateHeaderElementEnd();
+  const profileSection = generateProfileSection(manfredJsonContent);
 
   return `
     ${htmlDocumentStart}
+      ${headerElementStart}
+        ${profileSection}
+      ${headerElementEnd}
     ${htmlDocumentEnd}
   `;
 };