feat(imágenes_darkmode): Cambiar imágenes de los patrocinadores en da…

…rkmode (#228) - Referencia al Issue #128 - Resumen de cambios: - Modificación al componente "SponsorInfoRouter.vue" para cambiar la imagen de acuerdo al valor de isDark. - Creación de un nuevo frontmatter 'cover_dark' que contiene la dirección de la imagen. - Modificaciones a los documentos .md de cada patrocinador que posee una imagen para el modo oscuro.
somosnlp · Apr 1, 2024 · 934d50f · 934d50f
1 parent a27050d
commit 934d50f
Show file tree

Hide file tree

Showing 15 changed files with 22 additions and 3 deletions.
diff --git a/pages/patrocinios/aaaimx.md b/pages/patrocinios/aaaimx.md
@@ -2,6 +2,7 @@
 title: Capítulo Estudiantil AAAIMX
 description:
 cover: https://somosnlp.github.io/assets/images/patrocinios/AAAIMX.png
+cover_dark: https://somosnlp.github.io/assets/images/patrocinios/AAAIMX_dark.png
 twitter: https://www.facebook.com/aaaimx/
 linkedin: https://www.linkedin.com/company/aaaimx
 website: https://www.aaaimx.org/

diff --git a/pages/patrocinios/agilmentor.md b/pages/patrocinios/agilmentor.md
@@ -2,6 +2,7 @@
 title: AgilMentor
 description:
 cover: https://somosnlp.github.io/assets/images/patrocinios/AgilMentor.png
+cover_dark: https://somosnlp.github.io/assets/images/patrocinios/AgilMentor_dark.png
 twitter: 
 linkedin: https://www.linkedin.com/company/agilmentor/
 website: https://agilmentor.com

diff --git a/pages/patrocinios/divertles.md b/pages/patrocinios/divertles.md
@@ -2,6 +2,7 @@
 title: DiverTLes
 description: Diversidad de Tecnologías del Lenguaje en España
 cover: https://somosnlp.github.io/assets/images/patrocinios/DiverTLes.png
+cover_dark: https://somosnlp.github.io/assets/images/patrocinios/DiverTLes_dark.png
 twitter: https://twitter.com/divertlespln
 linkedin:
 website: https://divertles.ujaen.es/

diff --git a/pages/patrocinios/ibidat.md b/pages/patrocinios/ibidat.md
@@ -2,6 +2,7 @@
 title: IBiDat
 description: 
 cover: https://somosnlp.github.io/assets/images/patrocinios/IBiDat.png
+cover_dark: https://somosnlp.github.io/assets/images/patrocinios/IBiDat_dark.png
 twitter: 
 linkedin:
 website: 

diff --git a/pages/patrocinios/iic.md b/pages/patrocinios/iic.md
@@ -2,6 +2,7 @@
 title: Instituto de Ingeniería del Conocimiento
 description:
 cover: https://somosnlp.github.io/assets/images/patrocinios/iic.bmp
+cover_dark: https://somosnlp.github.io/assets/images/patrocinios/iic_dark.bmp
 twitter: https://twitter.com/IIConocimiento
 linkedin: https://www.linkedin.com/company/instituto-de-ingenieria-del-conocimiento-iic
 website: https://www.iic.uam.es 

diff --git a/pages/patrocinios/iimas_unam.md b/pages/patrocinios/iimas_unam.md
@@ -2,6 +2,7 @@
 title: Instituto de Investigaciones en Matemáticas Aplicadas y en Sistemas de la Universidad Nacional Autónoma de México
 description:
 cover: https://somosnlp.github.io/assets/images/patrocinios/UNAM.png
+cover_dark: https://somosnlp.github.io/assets/images/patrocinios/UNAM_dark.png
 twitter: 
 linkedin:
 website: 

diff --git a/pages/patrocinios/imfd.md b/pages/patrocinios/imfd.md
@@ -2,6 +2,7 @@
 title: Instituto Milenio Fundamentos de los Datos
 description:
 cover: https://somosnlp.github.io/assets/images/patrocinios/IMFD.png
+cover_dark: https://somosnlp.github.io/assets/images/patrocinios/IMFD_dark.png
 twitter: https://www.twitter.com/IMFDChile
 linkedin: https://www.linkedin.com/company/fundamentosdelosdatos/
 website: https://www.imfd.cl

diff --git a/pages/patrocinios/narrativa.md b/pages/patrocinios/narrativa.md
@@ -2,6 +2,7 @@
 title: Narrativa
 description:
 cover: https://somosnlp.github.io/assets/images/patrocinios/Narrativa.png
+cover_dark: https://somosnlp.github.io/assets/images/patrocinios/Narrativa_dark.png
 twitter: https://twitter.com/NarrativaAI
 linkedin: https://www.linkedin.com/company/narrativaai/
 website: narrativa.com 

diff --git a/pages/patrocinios/nova.md b/pages/patrocinios/nova.md
@@ -2,6 +2,7 @@
 title: Nova
 description: Red global de talento
 cover: https://somosnlp.github.io/assets/images/patrocinios/Nova.png
+cover_dark: https://somosnlp.github.io/assets/images/patrocinios/Nova_dark.png
 twitter: https://twitter.com/NovaTalent_
 linkedin: https://www.linkedin.com/company/nova/
 website: https://www.novatalent.com/

diff --git a/pages/patrocinios/platzi.md b/pages/patrocinios/platzi.md
@@ -2,6 +2,7 @@
 title: Platzi
 description:
 cover: https://somosnlp.github.io/assets/images/patrocinios/platzi.png
+cover_dark: https://somosnlp.github.io/assets/images/patrocinios/platzi_dark.png
 twitter: 
 linkedin:
 website: 

diff --git a/pages/patrocinios/q-blocks.md b/pages/patrocinios/q-blocks.md
@@ -2,6 +2,7 @@
 title: Q Blocks
 description:
 cover: https://somosnlp.github.io/assets/images/patrocinios/QBlocks.png
+cover_dark: https://somosnlp.github.io/assets/images/patrocinios/QBlocks_dark.png
 twitter: https://twitter.com/blocks_q
 linkedin: https://www.linkedin.com/company/q-blocks/
 website: https://qblocks.cloud/

diff --git a/pages/patrocinios/software-themis.md b/pages/patrocinios/software-themis.md
@@ -2,6 +2,7 @@
 title: Software Themis
 description:
 cover: https://somosnlp.github.io/assets/images/patrocinios/SoftwareThemis.png
+cover_dark: https://somosnlp.github.io/assets/images/patrocinios/SoftwareThemis_dark.png
 twitter: https://twitter.com/SoftwareThemis_
 linkedin: https://www.linkedin.com/company/software-themis/
 website: https://www.themis.es

diff --git a/pages/patrocinios/spain-ai.md b/pages/patrocinios/spain-ai.md
@@ -2,6 +2,7 @@
 title: Spain AI
 description:
 cover: https://somosnlp.github.io/assets/images/patrocinios/SpainAI.png
+cover_dark: https://somosnlp.github.io/assets/images/patrocinios/SpainAI_dark.png
 twitter: https://twitter.com/Spain_AI_ 
 linkedin: https://www.linkedin.com/company/spainai/
 website: https://www.spain-ai.com

diff --git a/pages/patrocinios/unl.md b/pages/patrocinios/unl.md
@@ -2,6 +2,7 @@
 title: Universidad Nacional de Loja
 description:
 cover: https://somosnlp.github.io/assets/images/patrocinios/UNL.png
+cover_dark: https://somosnlp.github.io/assets/images/patrocinios/UNL_dark.png
 twitter: https://twitter.com/UNLoficial
 linkedin: https://www.linkedin.com/school/universidad-nacional-de-loja/mycompany/
 website: https://unl.edu.ec

diff --git a/src/components/SponsorInfoRouter.vue b/src/components/SponsorInfoRouter.vue
@@ -6,23 +6,28 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { RouteRecordNormalized } from 'vue-router'
+import { isDark } from '~/logic'
 
 const props = defineProps<{
     route: RouteRecordNormalized
 }>()
 
 const frontmatter = computed(() => (props.route.meta as any).frontmatter)
+const imgSrc = computed(() => isDark.value ? frontmatter.value.cover_dark || frontmatter.value.cover: frontmatter.value.cover || 'images/logo.svg' )
 </script>
 
 <template>
     <router-link :to="route.path" :key="route.path" target="_blank" class="contents">
         <div class="rounded-md grid p-4 gap-4 place-items-center <sm:grid-cols-1 <lg:grid-cols-2"
             hover="bg-gray-50 dark:bg-gray-800">
             <div>
-                <img class="bg-white rounded-md object-cover max-h-200px" dark="bg-gray-900" width="180" height="180"
-                    :src="frontmatter.cover ? frontmatter.cover : 'images/logo.svg'" :alt="frontmatter.title" />
+                <img class="bg-white rounded-md object-cover max-h-200px" 
+                    dark="bg-dark-900" width="180" height="180"
+                    :src="imgSrc"
+                    :alt="frontmatter.title" 
+                />
             </div>
         </div>
     </router-link>
 </template>
-
+