Alumni

Este componente muestra la página de “Alumni” con varias secciones dinámicas basadas en los datos proporcionados por el store de Pinia. Se utilizan componentes asíncronos para mejorar el rendimiento de la página, cargando solo los necesarios.

Dependencias

El código utiliza las siguientes dependencias:

• Pinia para la gestión de estado global.
• Vue 3 con la composición asíncrona de componentes (defineAsyncComponent).
• SeoMeta para el SEO de la página.

Imports

• storeToRefs de Pinia: Para acceder a las propiedades del store.
• useDataStore del archivo @/stores/data: Se utiliza para acceder a los datos de la tienda de Pinia.
• CAROUSEL_CARDS de 3D constants: Constante usada en el constructor de carruseles.

Se importan varios componentes de manera asíncrona para optimizar la carga:

• HeaderImgAlumni: Muestra una imagen de cabecera con título, descripción y botón.
• AlumniPlus: Presenta planes exclusivos para los exalumnos.
• CarouselBuilder: Componente que genera un carrusel de elementos.
• JoinAlumni: Información para unirse a la comunidad de Alumni.
• GridAlumni: Muestra una cuadrícula de expertos Alumni.
• AffiliateAlumni: Sección de afiliación para exalumnos.

Computed Properties

carouselBuilder

Es una propiedad computada que construye los datos para el componente CarouselBuilder. Usa la función getData3d para obtener las cartas del carrusel desde el bloque de componentes de Alumni.

const carouselBuilder = computed(() => {
  return {
    carouselCards: getData3d(getAlumniComponentsBlock, 0, CAROUSEL_CARDS),
  };
});

Componente AffiliateAlumni

El componente AffiliateAlumni es una sección que presenta información sobre el programa de afiliación de exalumnos. Incluye un título, una descripción y un botón para que los usuarios puedan interactuar y obtener más información o unirse al programa.

Props

Este componente recibe las siguientes props para personalizar su contenido:

• titleAffiliate (String, requerido): Título de la sección que describe el programa de afiliación.
• descriptionAffiliate (String, requerido): Descripción detallada del programa de afiliación. Se permite contenido en formato Markdown, que es procesado y sanitizado antes de ser mostrado.
• buttonText (String, requerido): Texto que aparece en el botón de acción.
• buttonLink (String, requerido): Enlace al cual el botón redirige cuando se hace clic.

Funcionalidad

Sanitización del contenido

El componente utiliza las librerías DOMPurify y marked para procesar y sanitizar el contenido de la descripción (descriptionAffiliate). Esto permite que la descripción se pase como Markdown y sea procesada para ser visualizada en HTML sin riesgos de inyecciones maliciosas.

<p
  v-html="DOMPurify.sanitize(marked.parse(descriptionAffiliate))"
  class="affiliate-container__description"
></p>

Componente AlumniPlus

El componente AlumniPlus muestra una sección de información personalizada sobre los beneficios y planes para exalumnos. El componente acepta un título, una descripción en formato Markdown y una lista de planes que se renderizan como tarjetas utilizando el componente CardAlumni.

Props

El componente AlumniPlus recibe las siguientes props para personalizar su contenido:

• titleAlumniPlus (String, requerido): El título de la sección Alumni Plus.
• descriptionAlumniPlus (String, requerido): Descripción en formato Markdown que detalla los beneficios y características de Alumni Plus. El contenido se procesa y sanitiza para evitar posibles vulnerabilidades.
• plansAlumniPlus (Array, requerido): Un array de objetos que contiene la información de los planes disponibles para los exalumnos. Cada plan es renderizado utilizando el componente CardAlumni.

template

<template>
  <section class="alumni-plus-text">
    <h2 class="alumni-plus-text__h2">{{ titleAlumniPlus }}</h2>
    <p
      class="alumni-plus-text__description"
      v-html="DOMPurify.sanitize(marked.parse(descriptionAlumniPlus))"
    ></p>
    <div class="alumni-plus-text__cards">
      <CardAlumni v-for="plans in plansAlumniPlus" v-bind="plans"></CardAlumni>
    </div>
  </section>
</template>

• Título: Muestra el título del bloque usando la prop titleAlumniPlus.
• Descripción: La descripción se procesa desde Markdown y se sanitiza antes de ser renderizada en el bloque de texto.
• Planes: Los objetos dentro de plansAlumniPlus son renderizados en tarjetas usando el componente CardAlumni.

Componente CardAlumni

El componente CardAlumni es una tarjeta que presenta un título, una descripción en formato Markdown y un botón de acción. Se utiliza para mostrar información dentro de una tarjeta estilizada, siendo parte de una lista de opciones o planes para los exalumnos.

Props

El componente CardAlumni acepta las siguientes props:

• title (String, opcional): El título que aparecerá en la tarjeta.
• description (String, requerido): La descripción del contenido de la tarjeta, escrita en formato Markdown. Esta descripción es sanitizada para evitar vulnerabilidades.
• text_button (String, requerido): El texto que aparecerá en el botón de la tarjeta.
• link_button (String, requerido): El enlace al que redirigirá el botón de la tarjeta.

template

<template>
  <div class="card">
    <div class="card__title">{{ title }}</div>
    <ul class="card__list">
      <p v-html="DOMPurify.sanitize(marked.parse(description))"></p>
    </ul>
    <MainButton :link="link_button" :width="220" class="card__button">
      {{ text_button }}
    </MainButton>
  </div>
</template>

El template de CardAlumni incluye los siguientes elementos:

• Título: Si está disponible, muestra un título dentro de la tarjeta.
• Descripción: Se muestra en formato Markdown, convertido y sanitizado.
• Botón: Un botón de acción que lleva al enlace proporcionado en link_button.

Componente JoinAlumni

El componente JoinAlumni permite mostrar una sección de invitación para que los usuarios se unan a la comunidad de exalumnos (Alumni). Este componente incluye un título, una descripción en formato Markdown, una imagen, y un botón de acción que redirige a un enlace para unirse a la comunidad.

Props

El componente JoinAlumni acepta las siguientes props:

• titleJoin (String, requerido): El título de la sección para unirse a la comunidad Alumni.
• descriptionJoin (String, requerido): Una descripción en formato Markdown que invita al usuario a unirse a la comunidad Alumni. Esta descripción es sanitizada antes de mostrarse.
• imgJpg (String, requerido): La URL de la imagen en formato JPG que se mostrará en la sección.
• buttonText (String, requerido): El texto que se mostrará dentro del botón.
• buttonLink (String, requerido): El enlace al que redirigirá el botón cuando el usuario haga clic en él.

template

<template>
  <section class="community">
    <h2 class="community__title">{{ titleJoin }}</h2>
    <article class="community__container">
      <div class="community__container-left">
        <Pictures
          :src-jpg="imgJpg"
          :alt="`Imagen de comunidad de la web`"
          :title="`Imagen de comunidad de la web`"
        />
      </div>
      <div class="community__container-right">
        <p
          class="community__container-right-description"
          v-html="DOMPurify.sanitize(marked.parse(descriptionJoin))"
        ></p>
        <MainButton
          :link="buttonLink"
          class="community__container-right-button"
        >
          {{ buttonText }}
        </MainButton>
      </div>
    </article>
  </section>
</template>

El template del componente está estructurado en tres partes principales:

• Título: Un título para la sección de comunidad.
• Imagen: Una imagen que se muestra a la izquierda del contenido.
• Descripción y Botón: La descripción en formato Markdown y un botón de acción.