md2ejs

How to add an EJS new section for markdown

This example shows how to add a new section to the EJS markdown file.

import ejs from "ejs";
import experienceTemplate from "./experience-section.ejs?raw";

const generateExperienceSectionInner = (
	experienceSectionVm: ExperienceVm[]
): string => {
	const rootObject = {
		experienceCollection: experienceSectionVm,
	};

	return ejs.render(experienceTemplate, rootObject);
};

First, we import the EJS template and then we create a function that receives experience section data and returns the rendered template.

The render function receives two parameters, the first one is the template and the second one is the data that will be used to render the template.

The data that we pass to the render function is an object that contains the data that will be used in the template. In this case, we pass the experienceSectionVm object as the experienceCollection property of the rootObject.

The experienceSectionVm object is an array of ExperienceVm objects. The ExperienceVm object is defined as follows:

export interface ExperienceVm {
	name: string;
	type: string;
	description: string;
	roles: Role[];
}

The RoleVm object is defined as follows:

export interface Role {
	name: string;
	startDate: string;
	finishDate?: string;
	challenges?: {
		description: string;
		actions?: string[];
	}[];
	competences?: Competence[];
	referrals?: Person[];
	notes?: string;
}

The template ejs is defined as follows:

// experience-section.ejs

### EXPERIENCIA / CARRERA
<%_ if (experienceCollection && experienceCollection !== 'undefined') { -%>
  <%_ for (const job of experienceCollection) { -%>
  - #### <%- job.name %>
    - **Tipo de Organización:** <%- job.type %>
    - **Descripción:** <%- job.description %>
    - **Roles dentro de la empresa:**
    <%_ if (job.roles && job.roles !== 'undefined' ) { -%>
      <%_ for (const role of job.roles) { -%>
      - **<%= role.name %>**
        - **Duración:** <%= role.startDate %> - <%= role.finishDate ?? 'Actualidad' %>
        - **Retos:**
        <%_ if (role.challenges && role.challenges !== 'undefined' ) { -%>
          <%_ for (const challenge of role.challenges) { -%>
          - <%= challenge.description %>
          <%_ } -%>
        <%_ } -%>
      <%_ } -%>
    <%_ } -%>
  <%_ } -%>
<%_ } -%>

The template is a markdown file with EJS tags. The EJS tags are used to render the data that we pass to the render function.

The EJS tags are defined as follows:

• <%_ is used to execute code and delete all the whitespaces before the tag.
• <%- is used to render the value of the variable and delete all the whitespaces before the tag.
• <%= is used to render the value of the variable.
• <% is used to execute code.
• -%> is used to delete all the whitespaces after the tag.

You can find more information about EJS tags in the EJS documentation.

Is important to note that the EJS tags are not rendered in the markdown file. The EJS tags are only used to render the data that we pass to the render function but if we don't use the EJS tags correctly, the markdown file will be rendered incorrectly.

We can indent and nest EJS tags to make the code more readable, but we have to keep in mind that using the wrong tag can alter our output. To prevent nesting functions from affecting the expected result, we use the opening tag <%_ and the closing tag -%>.

The most important thing is indenting the markdown code correctly. If we don't indent the code correctly, the markdown file will be rendered incorrectly. The indentation respects the markdown syntax and this will be the same indentation that we will use in a "real markdown file".

This is part of the output of the example and the indentation is respected:

### EXPERIENCIA / CARRERA

- #### Manfred
  - **Tipo de Organización:** Startup
  - **Descripción:** Plataforma de Talento y agencia de recruiting técnico
  - **Roles dentro de la empresa:**
    - **Fundador**
      - **Duración:** 2018-06-20 - Actualidad
      - **Retos:**
        - Adaptación de la organización y procesos de la empresa para escalar las operaciones de la misma.
        - Desarrollo de producto propio para escalar las operaciones de la compañía, especialmente la aportación de valor a candidatos.
        - Culminación del [proceso de compraventa](https://bonillaware.com/manfred-sngular) de la compañía por parte de Sngular, manteniendo el núcleo de empleados de la compañía y sin que la productividad o las ventas se resintieran antes, durante y después del mismo.
        - Creación y publicación de contratos open source (candidatos y empresas) para construir un marco legal para una empresa de recruiting.
        - Definición del modelo de datos y los procesos necesarios para identificar, clasificar y gestionar perfiles de profesionales técnicos.
        - Definición de formato CV extendido.
        - Definición e implementación de la web de la compañía.
        - Apertura de nueva filial en Bilbao.