Merge pull request #318 from MTeresaMB/feature/#317-Update-header-styles

Closed #317

packages/manfred2html/src/engine/cv-x-wing-squadron/html-parts/avatar-section/avatar-section.ejs

@@ -0,0 +1,3 @@
+<%_ if (profile.avatar) { -%>
+  <img src="<%= profile?.avatar%>" alt="photo cv">
+<%_ } -%>

packages/manfred2html/src/engine/cv-x-wing-squadron/html-parts/header-section/header-section.part.ts → packages/manfred2html/src/engine/cv-x-wing-squadron/html-parts/avatar-section/avatar-section.part.ts

@@ -1,16 +1,16 @@
 import { ManfredAwesomicCV } from '@/model';
 import { ProfileSectionVm, mapFromMacCvToProfileSectionVm } from '@lemoncode/manfred-common/profile-section';
-import headerSection from './header-section.ejs?raw';
+import avatarSection from './avatar-section.ejs?raw';
 import ejs from 'ejs';
 
-export const generateHeaderSection = (cv: ManfredAwesomicCV): string => {
+export const generateAvatarSection = (cv: ManfredAwesomicCV): string => {
   const profileSectionVm = mapFromMacCvToProfileSectionVm(cv);
-  return generateHeaderSectionInner(profileSectionVm);
+  return generateAvatarSectionInner(profileSectionVm);
 };
 
-const generateHeaderSectionInner = (profileSectionVm: ProfileSectionVm): string => {
+const generateAvatarSectionInner = (profileSectionVm: ProfileSectionVm): string => {
   const rootObject = {
     profile: profileSectionVm,
   };
-  return ejs.render(headerSection, rootObject);
+  return ejs.render(avatarSection, rootObject);
 };

packages/manfred2html/src/engine/cv-x-wing-squadron/html-parts/avatar-section/index.ts

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

packages/manfred2html/src/engine/cv-x-wing-squadron/html-parts/header-section-end/header-section-end.ejs

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

packages/manfred2html/src/engine/cv-x-wing-squadron/html-parts/header-section-end/header-section-end.part.ts

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

packages/manfred2html/src/engine/cv-x-wing-squadron/html-parts/header-section-end/index.ts

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

packages/manfred2html/src/engine/cv-x-wing-squadron/html-parts/header-section-start/header-section-start.ejs

@@ -0,0 +1,3 @@
+<section class="header__content">
+
+

packages/manfred2html/src/engine/cv-x-wing-squadron/html-parts/header-section-start/header-section-start.part.ts

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

packages/manfred2html/src/engine/cv-x-wing-squadron/html-parts/header-section-start/index.ts

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

packages/manfred2html/src/engine/cv-x-wing-squadron/html-parts/index.ts

@@ -1,8 +1,11 @@
 export * from './html-document-start';
 export * from './html-document-end';
 export * from './header-element-start';
+export * from './avatar-section';
 export * from './header-element-end';
-export * from './header-section';
+export * from './header-section-start';
+export * from './header-section-end';
+export * from './userInfo-section';
 export * from './main-element-start';
 export * from './main-element-end';
 export * from './about-me-section';

packages/manfred2html/src/engine/cv-x-wing-squadron/html-parts/relevants-links-section/relevants-links-section.ejs

@@ -66,6 +66,5 @@
         </a>
       <%_ } -%>
     <%_ } -%>
-    </div>
-  </section>
+  </div>
 <%_ } -%>

packages/manfred2html/src/engine/cv-x-wing-squadron/html-parts/userInfo-section/index.ts

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

packages/manfred2html/src/engine/cv-x-wing-squadron/html-parts/userInfo-section/userInfo-section.ejs

@@ -0,0 +1,28 @@
+<%_ if (profile && profile !== undefined) { -%>
+  <div class="header__content__name">
+    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="10" viewBox="0 0 64 10" fill="none">
+      <path d="M1.10269e-06 5L64 5" stroke="#3BA0B7" stroke-width="9" />
+    </svg>
+    <h1><%= profile.name %> </h1>
+    <h2 class="surname"><%= profile?.surnames %></h2>
+    <p class="job-title"><%= profile?.title %></p>
+  </div>
+  <%_ if (profile.regionLocation) { -%>
+    <div class="header__content__address">
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewBox="0 0 18 24" fill="none">
+        <g clip-path="url(#clip0_1762_1661)">
+          <path
+            d="M10.1109 23.4C12.5156 20.3906 18 13.0969 18 9C18 4.03125 13.9688 0 9 0C4.03125 0 0 4.03125 0 9C0 13.0969 5.48438 20.3906 7.88906 23.4C8.46562 24.1172 9.53438 24.1172 10.1109 23.4ZM14.2969 6.79688L8.29688 12.7969C7.85625 13.2375 7.14375 13.2375 6.70781 12.7969L3.70312 9.79688C3.2625 9.35625 3.2625 8.64375 3.70312 8.20781C4.14375 7.77188 4.85625 7.76719 5.29219 8.20781L7.49531 10.4109L12.7031 5.20312C13.1438 4.7625 13.8562 4.7625 14.2922 5.20312C14.7281 5.64375 14.7328 6.35625 14.2922 6.79219L14.2969 6.79688Z"
+            fill="#3BA0B7"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_1762_1661">
+            <rect width="18" height="24" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+      <p><%= profile?.regionLocation %>, <%= profile?.countryLocation %></p>
+    </div>
+  <%_}-%>
+<%_}-%>

packages/manfred2html/src/engine/cv-x-wing-squadron/html-parts/userInfo-section/userInfo-section.part.ts

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

packages/manfred2html/src/engine/cv-x-wing-squadron/index.ts

@@ -4,7 +4,10 @@ import {
   generateHtmlDocumentEnd,
   generateHeaderElementEnd,
   generateHeaderElementStart,
-  generateHeaderSection,
+  generateHeaderSectionStart,
+  generateHeaderSectionEnd,
+  generateAvatarSection,
+  generateUserInfoSection,
   generateMainElementStart,
   generateAboutMeSection,
   generateMainElementEnd,
@@ -18,24 +21,30 @@ import {
 
 export const exportManfredJsonToCVXWingHTML = (manfredJsonContent: ManfredAwesomicCV, settings: Settings): string => {
   const htmlDocumentStart = generateHtmlDocumentStart();
-  const htmlDocumentEnd = generateHtmlDocumentEnd();
   const headerElementStart = generateHeaderElementStart();
+  const headerSectionStart = generateHeaderSectionStart();
+  const headerSectionEnd = generateHeaderSectionEnd();
+  const avatarSection = generateAvatarSection(manfredJsonContent);
+  const userInfoSection = generateUserInfoSection(manfredJsonContent);
+  const relevantLinksSection = generateRelevantLinksSection(manfredJsonContent);
   const headerElementEnd = generateHeaderElementEnd();
-  const headerSection = generateHeaderSection(manfredJsonContent);
   const mainElementStart = generateMainElementStart();
   const aboutMeSection = generateAboutMeSection(manfredJsonContent, settings);
-  const mainElementEnd = generateMainElementEnd();
-  const studiesSection = generateStudiesSection(manfredJsonContent, settings);
-  const experienceSection = generateExperienceSection(manfredJsonContent, settings);
-  const softSkillsSection = generateSoftSkillsSection(manfredJsonContent, settings);
-  const hardSkillsSection = generateHardSkillsSection(manfredJsonContent, settings);
   const languageSection = generateLanguageSection(manfredJsonContent, settings);
-  const relevantLinksSection = generateRelevantLinksSection(manfredJsonContent);
+  const hardSkillsSection = generateHardSkillsSection(manfredJsonContent, settings);
+  const softSkillsSection = generateSoftSkillsSection(manfredJsonContent, settings);
+  const experienceSection = generateExperienceSection(manfredJsonContent, settings);
+  const studiesSection = generateStudiesSection(manfredJsonContent, settings);
+  const mainElementEnd = generateMainElementEnd();
+  const htmlDocumentEnd = generateHtmlDocumentEnd();
   return `
     ${htmlDocumentStart}
       ${headerElementStart}
-      ${headerSection}
-        ${relevantLinksSection}
+        ${avatarSection}
+        ${headerSectionStart}
+          ${userInfoSection}
+          ${relevantLinksSection}
+        ${headerSectionEnd}
       ${headerElementEnd}
       ${mainElementStart}
         ${aboutMeSection}