HTML new functionallity

apps/react-app/src/pods/template-export/template-export.component.tsx

@@ -6,10 +6,11 @@ import * as classes from './template-export.styles';
 interface Props {
   onExportToWord: (text: string) => void;
   onExportToMarkdown: (text: string) => void;
+  onExportToHTML: (text: string) => void;
 }
 
 export const TemplateExport: React.FC<Props> = props => {
-  const { onExportToWord, onExportToMarkdown } = props;
+  const { onExportToWord, onExportToMarkdown, onExportToHTML } = props;
   const { userChoice, setUserChoice } = useUserChoiceContext();
   const [text, setText] = React.useState<string>('');
 
@@ -27,6 +28,11 @@ export const TemplateExport: React.FC<Props> = props => {
     onExportToMarkdown(text);
   };
 
+  const handleExportToHTML = () => {
+    setUserChoice({ ...userChoice, manfredJsonContent: text });
+    onExportToHTML(text);
+  };
+
   return (
     <div className={classes.root}>
       <Navbar />
@@ -55,6 +61,14 @@ export const TemplateExport: React.FC<Props> = props => {
           >
             Export To Markdown
           </Button>
+          <Button
+            disabled={text ? false : true}
+            onClick={handleExportToHTML}
+            className={classes.buttonClass}
+            showIcon={false}
+          >
+            Export To HTML
+          </Button>
         </div>
       </div>
       <Footer />

apps/react-app/src/pods/template-export/template-export.container.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { exportManfredJSonToWordAndDownload, parseStringToManfredJSon } from '@lemoncode/manfred2word';
 import { exportManfredJSonToMarkdown } from '@lemoncode/manfred2md';
+import { exportManfredJSonToHTML } from '@lemoncode/manfred2html';
 import { DEFAULT_EXPORT_FILENAME } from '@/core';
 import { download } from '@/common';
 import { TemplateExport } from './template-export.component';
@@ -34,5 +35,24 @@ export const TemplateExportContainer: React.FC = () => {
     }
   };
 
-  return <TemplateExport onExportToWord={onExportJsonToWord} onExportToMarkdown={onExportJsonToMarkdown} />;
+  const onExportJsonToHTML = async (text: string) => {
+    try {
+      const manfredJsonContent = parseManfredJson(text);
+      const content = exportManfredJSonToHTML(manfredJsonContent);
+      const blob = new Blob([content], { type: 'text/html' });
+
+      await download(blob, 'manfred.html');
+    } catch (error) {
+      console.error(error);
+      alert('Hay un error, no está utilizando el formato correcto');
+    }
+  };
+
+  return (
+    <TemplateExport
+      onExportToWord={onExportJsonToWord}
+      onExportToMarkdown={onExportJsonToMarkdown}
+      onExportToHTML={onExportJsonToHTML}
+    />
+  );
 };

packages/manfred-common/src/doc-parts/language-section/language-section.constants.ts

@@ -1,6 +1,7 @@
 import { LanguageType, LevelLanguageType } from './language-section.vm';
 
 export const languageList: LanguageType[] = [
+  { iso: 'de', name: 'Alemán' },
   { iso: 'es', name: 'Español' },
   { iso: 'it', name: 'Italiano' },
   { iso: 'en', name: 'Inglés' },

packages/manfred2html/src/engine/html-parts/about-me-section/about-me-section.ejs

@@ -0,0 +1,9 @@
+
+  <%_ if (profile && profile !== 'undefined' ) { -%>
+    <h1><%= profile?.name %> <br /><span><%= profile?.surnames %></span></h1>
+    <hr />
+    <p class="job-title"><%= profile?.title %></p>
+    <p><%= profile?.description %></p>
+<%_ } -%>
+
+

packages/manfred2html/src/engine/html-parts/about-me-section/about-me-section.part.ts

@@ -0,0 +1,18 @@
+import { ManfredAwesomicCV } from '@/model';
+import { ProfileSectionVm, mapFromMacCvToProfileSectionVm } from '@lemoncode/manfred-common/profile-section';
+import aboutMe from './about-me-section.ejs?raw';
+import ejs from 'ejs';
+
+export const generateAboutMeSection = (cv: ManfredAwesomicCV): string => {
+  const profileSectionVm = mapFromMacCvToProfileSectionVm(cv);
+
+  return generateAboutMeSectionInner(profileSectionVm);
+};
+
+const generateAboutMeSectionInner = (profileSectionVm: ProfileSectionVm): string => {
+  const rootObject = {
+    profile: profileSectionVm,
+  };
+
+  return ejs.render(aboutMe, rootObject);
+};

packages/manfred2html/src/engine/html-parts/about-me-section/index.ts

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

packages/manfred2html/src/engine/html-parts/aside-element-end/aside-element-end.ejs

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

packages/manfred2html/src/engine/html-parts/aside-element-end/aside-element-end.part.ts

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

packages/manfred2html/src/engine/html-parts/aside-element-end/index.ts

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

packages/manfred2html/src/engine/html-parts/aside-element-start/aside-element-start.ejs

@@ -0,0 +1 @@
+<aside>

packages/manfred2html/src/engine/html-parts/aside-element-start/aside-element-start.part.ts

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

packages/manfred2html/src/engine/html-parts/aside-element-start/index.ts

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

packages/manfred2html/src/engine/html-parts/experience-section/experience-section.ejs

@@ -0,0 +1,50 @@
+<%_ if(experienceCollection && experienceCollection.length !== 0){ -%>
+  <section class="main__section">
+    <div class="main__section__header">
+      <h2>Experiencia / carrera</h2>
+      <hr class="secondary-divider" />
+    </div>
+    <%_ for(const experience of experienceCollection){ -%>
+      <div class="main__section__item">
+        <div class="date date-desktop">
+          <p>Inicio: <b><%- experience.roles[0].startDate %></b></p>
+          <%_ if(experience.roles[0].finishDate || experience.roles[0].finishDate === 'Actualidad') { -%>
+            <p>Fin: <b><%- experience.roles[0].finishDate %></b></p>
+          <%_ } -%>
+        </div>
+        <div class="line-icon">
+          <div class="circle"></div>
+          <hr class="line" />
+        </div>
+        <div class="section__content">
+          <div class="section__content__header">
+            <h3><%- experience.name %></h3>
+            <%_ if(experience.type) { -%>
+              <h4><%- experience.description %></h4>
+            <%_ } -%>
+          </div>
+          <div class="date date-mobile">
+            <p>Inicio: <b><%- experience.roles[0].startDate %></b></p>
+            <%_ if(experience.roles[0].finishDate || experience.roles[0].finishDate === 'Actualidad') { -%>
+              <p>Fin: <b><%- experience.roles[0].finishDate %></b></p>
+            <%_ } -%>
+          </div>
+          <div class="data">
+            <%_ if(experience.type) { -%>
+              <p>Tipo de organización: <b><%- experience.type %></b></p>
+            <%_ } -%>
+            <p>Roles dentro de la empresa: <b><%- experience.roles[0].name %></b></p>
+            <%_ if(experience.roles[0].challenges && experience.roles[0].challenges.length !== 0) { -%>
+              <p>Retos:</p>
+                <ul>
+                  <%_ for(const challenge of experience.roles[0].challenges){ -%>
+                    <li><%- challenge.description %></li>
+                  <%_ }-%>
+                </ul>
+              <%_ }-%>
+          </div>
+        </div>
+      </div>
+      <%_ }-%>
+    </section>
+<%_ }-%>

packages/manfred2html/src/engine/html-parts/experience-section/experience-section.part.ts

@@ -0,0 +1,18 @@
+import ejs from 'ejs';
+import { ExperienceVm, mapFromMacCvToExperienceSectionVm } from '@lemoncode/manfred-common/experience-section';
+import { ManfredAwesomicCV } from '@/model';
+import experienceTemplate from './experience-section.ejs?raw';
+
+export const generateExperiencesSection = (cv: ManfredAwesomicCV): string => {
+  const experienceSectionVm = mapFromMacCvToExperienceSectionVm(cv);
+
+  return generateExperienceSectionInner(experienceSectionVm);
+};
+
+const generateExperienceSectionInner = (experienceSectionVm: ExperienceVm[]): string => {
+  const rootObject = {
+    experienceCollection: experienceSectionVm,
+  };
+
+  return ejs.render(experienceTemplate, rootObject);
+};

packages/manfred2html/src/engine/html-parts/experience-section/index.ts

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

packages/manfred2html/src/engine/html-parts/hard-skills-section/hard-skills-section.ejs

@@ -0,0 +1,30 @@
+<%_ if (hardSkillsCollection && hardSkillsCollection.length !== 0) { -%>
+    <div class="aside__section">
+      <div class="aside__section__header">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="21"
+          height="33"
+          viewBox="0 0 21 33"
+          fill="none"
+          class="svg-stroke"
+        >
+          <path
+            d="M19.6061 22.939C18.4811 24.2172 17.0964 25.2407 15.5444 25.9412C13.9924 26.6417 12.3088 27.003 10.6061 27.001M10.6061 27.001C8.90332 27.003 7.21973 26.6417 5.66772 25.9412C4.11571 25.2407 2.73101 24.2172 1.60608 22.939M10.6061 27.001V31.501M7.60608 31.501H13.6061M10.6061 1.50098C13.9198 1.50098 16.6061 4.18727 16.6061 7.50098V15.001C16.6061 18.3147 13.9198 21.001 10.6061 21.001C7.29237 21.001 4.60608 18.3147 4.60608 15.001V7.50098C4.60608 4.18727 7.29237 1.50098 10.6061 1.50098Z"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+        <div>
+          <h3>HARD SKILLS</h3>
+          <hr class="secondary-divider" />
+        </div>
+      </div>
+      <ul class="aside__section__list-items">
+        <%_ for (const item of hardSkillsCollection) { -%>
+          <li><%- item.skill.name %></li>
+        <%_ } -%>
+      </ul>
+    </div>
+  <%_ } -%>

packages/manfred2html/src/engine/html-parts/hard-skills-section/hard-skills-section.part.ts

@@ -0,0 +1,16 @@
+import ejs from 'ejs';
+import { ManfredAwesomicCV } from '@/model';
+import { HardSkillVM, mapFromCvToHardSkillVm } from '@lemoncode/manfred-common/hard-skill-section';
+import hardSkillsSection from './hard-skills-section.ejs?raw';
+
+export const generateHardSkillsSection = (cv: ManfredAwesomicCV): string => {
+  const hardSkillsSectionVm = mapFromCvToHardSkillVm(cv);
+  return generateHardSkillsSectionInner(hardSkillsSectionVm);
+};
+
+const generateHardSkillsSectionInner = (hardSkillsSectionVm: HardSkillVM[]): string => {
+  const rootObject = {
+    hardSkillsCollection: hardSkillsSectionVm,
+  };
+  return ejs.render(hardSkillsSection, rootObject);
+};

packages/manfred2html/src/engine/html-parts/hard-skills-section/index.ts

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

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

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

packages/manfred2html/src/engine/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/html-parts/header-element-end/index.ts

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

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

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

packages/manfred2html/src/engine/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/html-parts/header-element-start/index.ts

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

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

@@ -0,0 +1,3 @@
+    </div>
+  </body>
+</html>

packages/manfred2html/src/engine/html-parts/html-document-end/html-document-end.part.ts

@@ -0,0 +1,4 @@
+import ejs from 'ejs';
+import htmlDocumentEndTemplate from './html-document-end.ejs?raw';
+
+export const generateHtmlDocumentEnd = (): string => ejs.render(htmlDocumentEndTemplate);

packages/manfred2html/src/engine/html-parts/html-document-end/index.ts

@@ -0,0 +1 @@
+export * from './html-document-end.part';