libreria-astro-lefebvre 0.0.23 → 0.0.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/carbins/Imagen_2025_Bogota.ts +7 -0
- package/src/carbins/Video_2025_Valencia.ts +12 -0
- package/src/components/Astro/Contenido_2025_Malaga.astro +14 -9
- package/src/components/Astro/Imagen_2025_Bogota.astro +12 -6
- package/src/components/Astro/Repetidor_2025_Cordoba.astro +1 -1
- package/src/components/Astro/Video_2025_Valencia.astro +92 -0
- package/src/generated/componentRegistry.ts +2 -0
- package/src/index.ts +3 -1
package/package.json
CHANGED
|
@@ -64,6 +64,13 @@ export const metadata: ComponentMetadata = {
|
|
|
64
64
|
label: 'Mostrar botón',
|
|
65
65
|
mandatory: false,
|
|
66
66
|
example_value: true
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
name: 'showDescription',
|
|
70
|
+
type: 'boolean',
|
|
71
|
+
label: 'Mostrar descripción',
|
|
72
|
+
mandatory: false,
|
|
73
|
+
example_value: true
|
|
67
74
|
}
|
|
68
75
|
]
|
|
69
76
|
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { ComponentMetadata } from '../interfaces/types';
|
|
2
|
+
|
|
3
|
+
export const metadata: ComponentMetadata = {
|
|
4
|
+
component_name: 'Video_2025_Valencia',
|
|
5
|
+
category: 'Contenido',
|
|
6
|
+
name: 'Vídeos Genial 2025',
|
|
7
|
+
description: 'Vídeo para el directorio de Genial en la corporativa de Lefebvre',
|
|
8
|
+
framework: 'Astro',
|
|
9
|
+
priority: 1,
|
|
10
|
+
tags: ['video', 'genial'],
|
|
11
|
+
fields: []
|
|
12
|
+
};
|
|
@@ -21,7 +21,7 @@ const {
|
|
|
21
21
|
<section class="w-full flex items-center justify-center">
|
|
22
22
|
{showImage ? (
|
|
23
23
|
<article class={`${width === 'full' ? 'w-full' : 'w-3/5'} flex flex-col items-center justify-center py-6`}>
|
|
24
|
-
<div class={`flex-col
|
|
24
|
+
<div class={`flex-col lg:flex ${orientation === 'left' ? 'flex-row' : 'flex-row-reverse'} w-4/5 items-start gap-4`}>
|
|
25
25
|
{showIco ? (
|
|
26
26
|
<div class={`flex ${flexOrientation === 'row' ? 'flex-row' : 'flex-col'} w-1/2`}>
|
|
27
27
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-[30px]">
|
|
@@ -38,7 +38,7 @@ const {
|
|
|
38
38
|
{showH2 ? (
|
|
39
39
|
<h2 class="text-[2.25em] md:text-[2.5em] font-poppins leading-[44px] md:leading-[48px] mb-[23px] text-[#262626] font-semibold not-italic" set:html={title}></h2>
|
|
40
40
|
) : (
|
|
41
|
-
<h1 class="font-poppins text-[#262626] text-[36px] md:text-[56px] font-normal text-left leading-[44px] md:leading-[64px] px-6 md:my-[48px]" set:html={title}></h1>
|
|
41
|
+
<h1 class="font-poppins text-[#262626] text-[36px] md:text-[56px] font-normal text-left leading-[44px] md:leading-[64px] px-6 my-48px md:my-[48px]" set:html={title}></h1>
|
|
42
42
|
)
|
|
43
43
|
}
|
|
44
44
|
<div
|
|
@@ -56,19 +56,24 @@ const {
|
|
|
56
56
|
</div>
|
|
57
57
|
|
|
58
58
|
) : (
|
|
59
|
-
<style>
|
|
60
|
-
@media (max-width:
|
|
59
|
+
<style>
|
|
60
|
+
@media (max-width: 1024px) {
|
|
61
61
|
.css-mq-pl-767 {
|
|
62
62
|
padding-left: 1rem !important;
|
|
63
|
+
|
|
64
|
+
h1 {
|
|
65
|
+
margin-top:0;
|
|
66
|
+
margin-bottom: 32px;
|
|
67
|
+
}
|
|
63
68
|
}
|
|
64
|
-
}
|
|
69
|
+
}
|
|
65
70
|
</style>
|
|
66
|
-
<div class={`w-full
|
|
71
|
+
<div class={`w-full lg:w-1/2 p-4 pr-4 ${orientation === 'left' ? 'css-mq-pl-767' : 'pr-[var(--padding-left)] pl-0' }`}
|
|
67
72
|
style={{ 'padding-left': `${paddingLeft}px` }}>
|
|
68
73
|
{showH2 ? (
|
|
69
74
|
<h2 class="text-[2.25em] md:text-[2.5em] font-poppins leading-[44px] md:leading-[48px] mb-[23px] text-[#262626] font-semibold not-italic" set:html={title}></h2>
|
|
70
75
|
) : (
|
|
71
|
-
<h1 class="font-poppins text-[#262626] text-[36px] md:text-[56px] font-normal text-left leading-[44px] md:leading-[64px] px-6 pl-0 md:my-[48px]" set:html={title}></h1>
|
|
76
|
+
<h1 class="font-poppins text-[#262626] text-[36px] md:text-[56px] font-normal text-left leading-[44px] md:leading-[64px] px-6 pl-0 mb-48px md:my-[48px]" set:html={title}></h1>
|
|
72
77
|
)
|
|
73
78
|
}
|
|
74
79
|
<div
|
|
@@ -86,8 +91,8 @@ const {
|
|
|
86
91
|
|
|
87
92
|
)}
|
|
88
93
|
|
|
89
|
-
<div class={`w-full
|
|
90
|
-
<img src={image} alt={title} class="w-full
|
|
94
|
+
<div class={`w-full lg:w-1/2 p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'}`}>
|
|
95
|
+
<img src={image} alt={title} class="w-full lg:w-4/5 h-auto rounded-lg" />
|
|
91
96
|
</div>
|
|
92
97
|
</div>
|
|
93
98
|
</article>
|
|
@@ -7,7 +7,9 @@ const {
|
|
|
7
7
|
alt,
|
|
8
8
|
src,
|
|
9
9
|
iframeSrc,
|
|
10
|
-
showBtn = true
|
|
10
|
+
showBtn = true,
|
|
11
|
+
showDescription = true,
|
|
12
|
+
color = '#ffffff',
|
|
11
13
|
} = Astro.props;
|
|
12
14
|
|
|
13
15
|
const structuredData = `<script type="application/ld+json">
|
|
@@ -27,21 +29,25 @@ const {
|
|
|
27
29
|
|
|
28
30
|
<article class="w-full flex flex-col items-center justify-center p-6 h-full lg:h-[384px]">
|
|
29
31
|
|
|
30
|
-
<div class="max-w-7xl h-full flex justify-center items-center aspect-auto relative md:w-4/5 lg:aspect-video
|
|
32
|
+
<div class="max-w-full lg:max-w-7xl h-full flex justify-center items-center aspect-auto relative md:w-4/5 lg:aspect-video">
|
|
31
33
|
<div class="absolute inset-0">
|
|
32
34
|
|
|
33
35
|
{src && src !== "" ? (
|
|
34
|
-
<img src={src} alt={alt} title={title} class="object-cover object-center w-full h-full rounded-2xl">
|
|
36
|
+
<img src={src} alt={alt} title={title} class="object-cover object-center w-full h-full rounded-2xl shadow-lg">
|
|
35
37
|
) : (
|
|
36
|
-
<video autoplay loop muted playsinline class="object-cover object-center w-full h-full rounded-2xl">
|
|
38
|
+
<video autoplay loop muted playsinline class="object-cover object-center w-full h-full rounded-2xl shadow-lg">
|
|
37
39
|
<source src={iframeSrc} type="video/mp4" />
|
|
38
40
|
</video>
|
|
39
41
|
)}
|
|
40
42
|
</div>
|
|
41
43
|
|
|
42
44
|
<div class="w-4/5 relative z-10 flex flex-col justify-center items-center h-full text-center p-0 py-8 md:p-6">
|
|
43
|
-
|
|
44
|
-
|
|
45
|
+
|
|
46
|
+
{showDescription ? (
|
|
47
|
+
<h3 class={`text-[${color === '#ffffff' ? '#ffffff' : color}] font-poppins text-[36px] md:text-[40px] font-normal text-center leading-[44px] md:leading-[48px] mb-[32px]`} set:html={title}></h3>
|
|
48
|
+
<div class="text-[#ffffff] font-inter text-xl font-normal leading-[28px] mb-8 text-center" set:html={description}></div>
|
|
49
|
+
) :
|
|
50
|
+
<h3 class={`text-[${color === 'default' ? '#ffffff' : color}] font-poppins text-[36px] md:text-[40px] font-normal text-center leading-[44px] md:leading-[48px] mb-[0px]`} set:html={title}></h3>}
|
|
45
51
|
|
|
46
52
|
{showBtn ? (
|
|
47
53
|
<a href={linkBtn} class="text-[#2134F1] font-inter font-semibold bg-white px-[28px] py-[12px] border border-[#ffffff] rounded-xl hover:bg-[#2134F1] hover:border-[#2134F1] shadow-lg transition-all duration-300 hover:text-[#ffffff]">{txtBtn}</a>
|
|
@@ -52,7 +52,7 @@ const structuredData = `<script type="application/ld+json">
|
|
|
52
52
|
---
|
|
53
53
|
|
|
54
54
|
|
|
55
|
-
<div class={`flex ${positionFlex === 'items-start' ? 'items-start' : 'items-center'} p-0 md:p-6 gap-4 mb-4 md:mb-0 ${flexOrientationIcoText === 'flex-row'? 'flex-row w-full': 'flex-col w-
|
|
55
|
+
<div class={`flex ${positionFlex === 'items-start' ? 'items-start' : 'items-center'} p-0 md:p-6 gap-4 mb-4 md:mb-0 ${flexOrientationIcoText === 'flex-row'? 'flex-row w-full': 'flex-col w-2/4 md:w-1/5'}`}>
|
|
56
56
|
{showBigIco ? (
|
|
57
57
|
<div class="flex justify-center bg-[#ffffff] p-[12px] w-[90px]">
|
|
58
58
|
{
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
---
|
|
2
|
+
|
|
3
|
+
const {
|
|
4
|
+
items = [],
|
|
5
|
+
iframeSrc
|
|
6
|
+
} = Astro.props;
|
|
7
|
+
|
|
8
|
+
const idAccordion = 'js-acordeon-' + Math.random().toString(36).substring(2, 15);
|
|
9
|
+
|
|
10
|
+
const structuredData = `<script type="application/ld+json">
|
|
11
|
+
{
|
|
12
|
+
"@context": "https://schema.org",
|
|
13
|
+
"@type": "WebPageElement",
|
|
14
|
+
"name": "Interactive Content Carousel",
|
|
15
|
+
"description": "A rotating carousel component displaying multiple content items with videos",
|
|
16
|
+
"mainEntity": {
|
|
17
|
+
"@type": "ItemList",
|
|
18
|
+
"numberOfItems": ${items.length},
|
|
19
|
+
"itemListElement": [
|
|
20
|
+
${items.map((item, index) => `{
|
|
21
|
+
"@type": "ListItem",
|
|
22
|
+
"position": ${index + 1},
|
|
23
|
+
"item": {
|
|
24
|
+
"@type": "VideoObject",
|
|
25
|
+
"thumbnailUrl": "${item.thumbnailUrl || ''}",
|
|
26
|
+
"duration": "${item.duration || 'PT0M'}",
|
|
27
|
+
"name": "${item.title || ''}",
|
|
28
|
+
"description": "${item.description ? item.description.replace(/<[^>]*>/g, '').replace(/"/g, '\\"') : ''}",
|
|
29
|
+
"contentUrl": "${item.iframeSrc || ''}",
|
|
30
|
+
"embedUrl": "${item.iframeSrc || ''}",
|
|
31
|
+
"uploadDate": "${new Date().toISOString()}",
|
|
32
|
+
"duration": "PT0M",
|
|
33
|
+
"interactionStatistic": {
|
|
34
|
+
"@type": "InteractionCounter",
|
|
35
|
+
"interactionType": "https://schema.org/WatchAction",
|
|
36
|
+
"userInteractionCount": 0
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}`).join(',\n ')}
|
|
40
|
+
]
|
|
41
|
+
},
|
|
42
|
+
"interactionStatistic": {
|
|
43
|
+
"@type": "InteractionCounter",
|
|
44
|
+
"interactionType": "https://schema.org/ViewAction",
|
|
45
|
+
"userInteractionCount": 0
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
</script>`;
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
<section class="w-full flex items-center justify-center py-2">
|
|
53
|
+
<article class="w-full flex flex-col items-center justify-center">
|
|
54
|
+
<div class="w-full px-6 md:max-w-7xl px-[48px] col my-[0px] md:my-[40px]">
|
|
55
|
+
{items.map((item, index) => (
|
|
56
|
+
<div class="w-full flex flex-col lg:flex-row flex-1 gap-[48px]">
|
|
57
|
+
<div class="w-full flex flex-col justify-center">
|
|
58
|
+
<h3 class="text-[28px] md:text-[32px] leading-[36px] mb-[8px] text-[#363942] font-normal not-italic font-poppins">{item.title}</h3>
|
|
59
|
+
<p class="text-[#363942] font-poppins font-normal text-[20px] not-italic leading-[28px]" set:html={item.description}></p>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="w-full lg:w-2/2 flex items-start">
|
|
62
|
+
{/* <img src="/assets/images/genial/gradient-bg.webp" alt="Imagen" class="w-full h-auto rounded-xl" /> */}
|
|
63
|
+
<video autoplay loop muted playsinline class="w-full h-auto rounded-xl">
|
|
64
|
+
<source src={item.iframeSrc} type="video/mp4" />
|
|
65
|
+
</video>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
))}
|
|
69
|
+
</div>
|
|
70
|
+
</article>
|
|
71
|
+
</section>
|
|
72
|
+
|
|
73
|
+
<style>
|
|
74
|
+
.bg-F2F3F8 {
|
|
75
|
+
background-color: #F2F3F8;
|
|
76
|
+
}
|
|
77
|
+
.active{
|
|
78
|
+
background-color: #ffffff;
|
|
79
|
+
border: 1px solid #5F6168;
|
|
80
|
+
color: black;
|
|
81
|
+
max-width: none;
|
|
82
|
+
max-height: none;
|
|
83
|
+
font-size: 16px;
|
|
84
|
+
|
|
85
|
+
&:hover{
|
|
86
|
+
background-color: #ffffff;
|
|
87
|
+
border: 1px solid #5F6168;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
</style>
|
|
91
|
+
|
|
92
|
+
<Fragment set:html={structuredData} />
|
|
@@ -43,6 +43,7 @@ import * as TextImageHeader from '../carbins/TextImageHeader.ts';
|
|
|
43
43
|
import * as Titulo_2025_Algeciras from '../carbins/Titulo_2025_Algeciras.ts';
|
|
44
44
|
import * as Titulo_2025_Santorini from '../carbins/Titulo_2025_Santorini.ts';
|
|
45
45
|
import * as VideoAutoplay from '../carbins/VideoAutoplay.ts';
|
|
46
|
+
import * as Video_2025_Valencia from '../carbins/Video_2025_Valencia.ts';
|
|
46
47
|
import * as VueButton from '../carbins/VueButton.ts';
|
|
47
48
|
|
|
48
49
|
export const components = [
|
|
@@ -90,5 +91,6 @@ export const components = [
|
|
|
90
91
|
{component: Titulo_2025_Algeciras},
|
|
91
92
|
{component: Titulo_2025_Santorini},
|
|
92
93
|
{component: VideoAutoplay},
|
|
94
|
+
{component: Video_2025_Valencia},
|
|
93
95
|
{component: VueButton},
|
|
94
96
|
];
|
package/src/index.ts
CHANGED
|
@@ -50,12 +50,13 @@ import TextImageHeader from './components/Astro/TextImageHeader.astro';
|
|
|
50
50
|
import Titulo_2025_Algeciras from './components/Astro/Titulo_2025_Algeciras.astro';
|
|
51
51
|
import Titulo_2025_Santorini from './components/Astro/Titulo_2025_Santorini.astro';
|
|
52
52
|
import VideoAutoplay from './components/Astro/VideoAutoplay.astro';
|
|
53
|
+
import Video_2025_Valencia from './components/Astro/Video_2025_Valencia.astro';
|
|
53
54
|
import ReactButton from './components/React/ReactButton.jsx';
|
|
54
55
|
|
|
55
56
|
// Exporta todos los componentes uno a uno para que puedan ser usados directamente.
|
|
56
57
|
|
|
57
58
|
|
|
58
|
-
export { VueButton, Button, CTA_2025_Formentera, Cabecera_2025_Barcelona, Cabecera_2025_Madrid, Contenido_2025_Alcorcon, Contenido_2025_Granada, Contenido_2025_Malaga, Contenido_2025_Montevideo, CorpFooter, CorpHero, CorpNavigation, FooterCorporativo, Footer_2025_Napoles, Formulario_2025_Seul, GeometricShape, GeometricShapeCard, HeaderCorporativo, ImageTextSimple, Imagen_2025_Bogota, Repetidor_2025_Cabra, Repetidor_2025_Cordoba, Repetidor_2025_Dubai, Repetidor_2025_Estocolmo, Repetidor_2025_Mallorca, Repetidor_2025_Menorca, Repetidor_2025_Michigan, Repetidor_2025_Orcasitas, Repetidor_2025_Oslo, Repetidor_2025_Quito, Repetidor_2025_Seattle, Repetidor_2025_Tokyo, Repetidor_2025_Ubeda, Repetidor_2025_Yakarta, SEO_Head_Section, Separador_2025_Reinosa, SpectrumSeparator, TestHijo, TestPadre, TextBox, TextImageBackground, TextImageBlock, TextImageCard, TextImageHeader, Titulo_2025_Algeciras, Titulo_2025_Santorini, VideoAutoplay, ReactButton };
|
|
59
|
+
export { VueButton, Button, CTA_2025_Formentera, Cabecera_2025_Barcelona, Cabecera_2025_Madrid, Contenido_2025_Alcorcon, Contenido_2025_Granada, Contenido_2025_Malaga, Contenido_2025_Montevideo, CorpFooter, CorpHero, CorpNavigation, FooterCorporativo, Footer_2025_Napoles, Formulario_2025_Seul, GeometricShape, GeometricShapeCard, HeaderCorporativo, ImageTextSimple, Imagen_2025_Bogota, Repetidor_2025_Cabra, Repetidor_2025_Cordoba, Repetidor_2025_Dubai, Repetidor_2025_Estocolmo, Repetidor_2025_Mallorca, Repetidor_2025_Menorca, Repetidor_2025_Michigan, Repetidor_2025_Orcasitas, Repetidor_2025_Oslo, Repetidor_2025_Quito, Repetidor_2025_Seattle, Repetidor_2025_Tokyo, Repetidor_2025_Ubeda, Repetidor_2025_Yakarta, SEO_Head_Section, Separador_2025_Reinosa, SpectrumSeparator, TestHijo, TestPadre, TextBox, TextImageBackground, TextImageBlock, TextImageCard, TextImageHeader, Titulo_2025_Algeciras, Titulo_2025_Santorini, VideoAutoplay, Video_2025_Valencia, ReactButton };
|
|
59
60
|
|
|
60
61
|
|
|
61
62
|
// Exporta la función listComponents para que sea usado en el Pagebuilder en Vue.
|
|
@@ -117,5 +118,6 @@ export const components = {
|
|
|
117
118
|
Titulo_2025_Algeciras: Titulo_2025_Algeciras,
|
|
118
119
|
Titulo_2025_Santorini: Titulo_2025_Santorini,
|
|
119
120
|
VideoAutoplay: VideoAutoplay,
|
|
121
|
+
Video_2025_Valencia: Video_2025_Valencia,
|
|
120
122
|
ReactButton: ReactButton
|
|
121
123
|
};
|