diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..b479fef --- /dev/null +++ b/.eslintignore @@ -0,0 +1,5 @@ +node +node_modules +tests +dist +webpack.config.js diff --git a/definitions.cnd b/definitions.cnd index 0b2e0b9..f07f20a 100644 --- a/definitions.cnd +++ b/definitions.cnd @@ -60,7 +60,7 @@ [luxe:textIllustrated] > jnt:content, luxemix:luxeContent - title (string) primary i18n mandatory - - text (string,richtext[ckeditor.toolbar='Light']) i18n mandatory + - text (string,richtext[ckeditor.toolbar='Basic']) i18n mandatory - image (weakreference, picker[type='image']) - arrangement (string,choicelist[resourceBundle]) = 'left' < 'right', 'left' diff --git a/resources/luxe-jahia-demo.properties b/resources/luxe-jahia-demo.properties index 2b8c533..c650cc6 100644 --- a/resources/luxe-jahia-demo.properties +++ b/resources/luxe-jahia-demo.properties @@ -2,42 +2,86 @@ luxemix_destination = Destination Page luxemix_destination.enableEstates = Display a list of selected Real Estate luxemix_destination.enableAgencies = Display the list of local agencies +luxe_header = Page Header +luxe_header.title = Title +luxe_header.teaser = Teaser +luxe_header.teaser.ui.tooltip = The teaser is only shown with certain views +luxe_header.image = Image + +luxe_highlightNumber = Highlight Number +luxe_highlightNumber.text = Text +luxe_highlightNumber.number = Number + luxe_section = Page section luxe_section.arrangement = Arrangement -luxe_section.arrangement.ui.tooltip = Define the arrangement of the elements inside the section +luxe_section.arrangement.ui.tooltip = Specify the arrangement of elements within the section. luxe_section.arrangement.left = Left luxe_section.arrangement.center = Center luxe_section.arrangement.right = Right luxe_cols = Page Columns +luxe_cols.colsNumber = Number of columns +luxe_cols.colsNumber.ui.tooltip = Indicate the desired number of columns for your section. -luxe_estate.type.house = house -luxe_estate.type.apartment = apartment -luxe_estate.type.building = building - +luxe_estate = Real Estate +luxe_estate.title = Title +luxe_estate.description = Description +luxe_estate.description.ui.tooltip = Provide a description of the property and emphasize its key features and strengths. +luxe_estate.price = Price +luxe_estate.gallery = Image Gallery +luxe_estate.country = Country +luxe_estate.country.ui.tooltip = The country where the property is located +luxe_estate.type = Type of Real Estate +luxe_estate.type.house = House +luxe_estate.type.apartment = Apartment +luxe_estate.type.building = Building +luxe_estate.surface = Surface +luxe_estate.surface.ui.tooltip = Surface in square meters +luxe_estate.rooms = Number of Rooms +luxe_estate.rooms.ui.tooltip = Full number of rooms in the property +luxe_estate.bedrooms = Number of Bedrooms +luxe_estate.bathrooms = Number of Bathrooms +luxe_estate.options = Options luxe_estate.options.garage = Garage luxe_estate.options.swimmingPool = Swimming Pool luxe_estate.options.garden = Garden luxe_estate.options.balcony = Balcony +luxe_textIllustrated = Text Illustrated +luxe_textIllustrated.title = Title +luxe_textIllustrated.text = Text +luxe_textIllustrated.image = Image +luxe_textIllustrated.arrangement = Arrangement +luxe_textIllustrated.arrangement.ui.tooltip = Specify whether the image should be positioned to the right or left of the text. luxe_textIllustrated.arrangement.right = Image Right luxe_textIllustrated.arrangement.left = Image Left luxe_agency = Real Estate Agency +luxe_agency.name = Agency Name +luxe_agency.description = Agency Presentation +luxe_agency.image = Image +luxe_agency.image.ui.tooltip = Image to illustrate the real estate agency +luxe_agency.creationDate = Agency Creation Date +luxe_agency.languages = Agency Languages +luxe_agency.languages.ui.tooltip = Languages spoken in the real estate agency luxe_agency.languages.fr = French luxe_agency.languages.en = English luxe_agency.languages.de = German luxe_agency.languages.es = Spanish - -luxe_agency.creationDate = Creation Date +luxe_agency.country = Agency Country +luxe_agency.address = Agency Address +luxe_agency.phone = Agency contact phone number +luxe_agency.email = Agency contact email luxe_realtor = Realtor -luxe_realtor.firstName = Firstname -luxe_realtor.lastName = Lastname -luxe_realtor.jobPosition = Job Position +luxe_realtor.firstName = Realtor Firstname +luxe_realtor.lastName = Realtor Lastname +luxe_realtor.jobPosition = Realtor Job Position luxe_realtor.jobPosition.junior = Junior Agent luxe_realtor.jobPosition.senior = Senior Agent luxe_realtor.jobPosition.director = Agency Director -luxe_realtor.image = Your profile image -luxe_realtor.experience = Years of experience \ No newline at end of file +luxe_realtor.image = Realtor profile image +luxe_realtor.experience = Realtor Years of experience +luxe_realtor.phone = Realtor contact phone number +luxe_realtor.email = Realtor contact email \ No newline at end of file diff --git a/resources/luxe-jahia-demo_de.properties b/resources/luxe-jahia-demo_de.properties new file mode 100644 index 0000000..fbc721f --- /dev/null +++ b/resources/luxe-jahia-demo_de.properties @@ -0,0 +1,86 @@ +luxemix_destination = Zielseite +luxemix_destination.enableEstates = Zeige eine Liste ausgewählter Immobilien +luxemix_destination.enableAgencies = Zeige eine Liste lokaler Agenturen + +luxe_header = Seitenkopf +luxe_header.title = Titel +luxe_header.teaser = Teaser +luxe_header.teaser.ui.tooltip = Der Teaser wird nur bei bestimmten Ansichten angezeigt +luxe_header.image = Bild + +luxe_highlightNumber = Hervorgehobene Nummer +luxe_highlightNumber.text = Text +luxe_highlightNumber.number = Nummer + +luxe_section = Seitenabschnitt +luxe_section.arrangement = Anordnung +luxe_section.arrangement.ui.tooltip = Geben Sie die Anordnung der Elemente innerhalb des Abschnitts an. +luxe_section.arrangement.left = Links +luxe_section.arrangement.center = Zentriert +luxe_section.arrangement.right = Rechts + +luxe_cols = Seiten Spalten +luxe_cols.colsNumber = Anzahl der Spalten +luxe_cols.colsNumber.ui.tooltip = Geben Sie die gewünschte Anzahl von Spalten für Ihren Abschnitt an. + +luxe_estate = Immobilie +luxe_estate.title = Titel +luxe_estate.description = Beschreibung +luxe_estate.description.ui.tooltip = Geben Sie eine Beschreibung des Objekts an und heben Sie seine Hauptmerkmale und Stärken hervor. +luxe_estate.price = Preis +luxe_estate.gallery = Bildergalerie +luxe_estate.country = Land +luxe_estate.country.ui.tooltip = Das Land, in dem sich die Immobilie befindet +luxe_estate.type = Immobilienart +luxe_estate.type.house = Haus +luxe_estate.type.apartment = Wohnung +luxe_estate.type.building = Gebäude +luxe_estate.surface = Fläche +luxe_estate.surface.ui.tooltip = Fläche in Quadratmetern +luxe_estate.rooms = Anzahl der Zimmer +luxe_estate.rooms.ui.tooltip = Gesamtzahl der Zimmer in der Immobilie +luxe_estate.bedrooms = Anzahl der Schlafzimmer +luxe_estate.bathrooms = Anzahl der Badezimmer +luxe_estate.options = Optionen +luxe_estate.options.garage = Garage +luxe_estate.options.swimmingPool = Swimmingpool +luxe_estate.options.garden = Garten +luxe_estate.options.balcony = Balkon + +luxe_textIllustrated = Illustrierter Text +luxe_textIllustrated.title = Titel +luxe_textIllustrated.text = Text +luxe_textIllustrated.image = Bild +luxe_textIllustrated.arrangement = Anordnung +luxe_textIllustrated.arrangement.ui.tooltip = Geben Sie an, ob das Bild rechts oder links vom Text positioniert werden soll. +luxe_textIllustrated.arrangement.right = Bild rechts +luxe_textIllustrated.arrangement.left = Bild links + +luxe_agency = Immobilienagentur +luxe_agency.name = Agenturname +luxe_agency.description = Agenturvorstellung +luxe_agency.image = Bild +luxe_agency.image.ui.tooltip = Bild zur Veranschaulichung der Immobilienagentur +luxe_agency.creationDate = Gründungsdatum der Agentur +luxe_agency.languages = Agentursprachen +luxe_agency.languages.ui.tooltip = In der Immobilienagentur gesprochene Sprachen +luxe_agency.languages.fr = Französisch +luxe_agency.languages.en = Englisch +luxe_agency.languages.de = Deutsch +luxe_agency.languages.es = Spanisch +luxe_agency.country = Agenturland +luxe_agency.address = Agenturadresse +luxe_agency.phone = Telefonnummer der Agentur +luxe_agency.email = Kontakt-E-Mail der Agentur + +luxe_realtor = Immobilienmakler +luxe_realtor.firstName = Vorname des Immobilienmaklers +luxe_realtor.lastName = Nachname des Immobilienmaklers +luxe_realtor.jobPosition = Position des Immobilienmaklers +luxe_realtor.jobPosition.junior = Junioragent +luxe_realtor.jobPosition.senior = Senioragent +luxe_realtor.jobPosition.director = Agenturleiter +luxe_realtor.image = Profilbild des Immobilienmaklers +luxe_realtor.experience = Jahre Erfahrung des Immobilienmaklers +luxe_realtor.phone = Telefonnummer des Immobilienmaklers +luxe_realtor.email = Kontakt-E-Mail des Immobilienmaklers \ No newline at end of file diff --git a/resources/luxe-jahia-demo_es.properties b/resources/luxe-jahia-demo_es.properties new file mode 100644 index 0000000..d02fd80 --- /dev/null +++ b/resources/luxe-jahia-demo_es.properties @@ -0,0 +1,86 @@ +luxemix_destination = Página de destino +luxemix_destination.enableEstates = Mostrar una lista de propiedades seleccionadas +luxemix_destination.enableAgencies = Mostrar la lista de agencias locales + +luxe_header = Encabezado de página +luxe_header.title = Título +luxe_header.teaser = Titular +luxe_header.teaser.ui.tooltip = El titular solo se muestra con determinadas vistas +luxe_header.image = Imagen + +luxe_highlightNumber = Número destacado +luxe_highlightNumber.text = Texto +luxe_highlightNumber.number = Número + +luxe_section = Sección de página +luxe_section.arrangement = Disposición +luxe_section.arrangement.ui.tooltip = Especifique la disposición de los elementos dentro de la sección. +luxe_section.arrangement.left = Izquierda +luxe_section.arrangement.center = Centro +luxe_section.arrangement.right = Derecha + +luxe_cols = Columnas de página +luxe_cols.colsNumber = Número de columnas +luxe_cols.colsNumber.ui.tooltip = Indique el número de columnas deseado para su sección. + +luxe_estate = Propiedad inmobiliaria +luxe_estate.title = Título +luxe_estate.description = Descripción +luxe_estate.description.ui.tooltip = Proporcione una descripción de la propiedad y destaque sus características y puntos fuertes. +luxe_estate.price = Precio +luxe_estate.gallery = Galería de imágenes +luxe_estate.country = País +luxe_estate.country.ui.tooltip = El país donde se encuentra la propiedad +luxe_estate.type = Tipo de propiedad inmobiliaria +luxe_estate.type.house = Casa +luxe_estate.type.apartment = Apartamento +luxe_estate.type.building = Edificio +luxe_estate.surface = Superficie +luxe_estate.surface.ui.tooltip = Superficie en metros cuadrados +luxe_estate.rooms = Número de habitaciones +luxe_estate.rooms.ui.tooltip = Número total de habitaciones en la propiedad +luxe_estate.bedrooms = Número de dormitorios +luxe_estate.bathrooms = Número de baños +luxe_estate.options = Opciones +luxe_estate.options.garage = Garaje +luxe_estate.options.swimmingPool = Piscina +luxe_estate.options.garden = Jardín +luxe_estate.options.balcony = Balcón + +luxe_textIllustrated = Texto ilustrado +luxe_textIllustrated.title = Título +luxe_textIllustrated.text = Texto +luxe_textIllustrated.image = Imagen +luxe_textIllustrated.arrangement = Disposición +luxe_textIllustrated.arrangement.ui.tooltip = Especifique si la imagen debe colocarse a la derecha o a la izquierda del texto. +luxe_textIllustrated.arrangement.right = Imagen a la derecha +luxe_textIllustrated.arrangement.left = Imagen a la izquierda + +luxe_agency = Agencia inmobiliaria +luxe_agency.name = Nombre de la agencia +luxe_agency.description = Presentación de la agencia +luxe_agency.image = Imagen +luxe_agency.image.ui.tooltip = Imagen para ilustrar la agencia inmobiliaria +luxe_agency.creationDate = Fecha de creación de la agencia +luxe_agency.languages = Idiomas de la agencia +luxe_agency.languages.ui.tooltip = Idiomas hablados en la agencia inmobiliaria +luxe_agency.languages.fr = Francés +luxe_agency.languages.en = Inglés +luxe_agency.languages.de = Alemán +luxe_agency.languages.es = Español +luxe_agency.country = País de la agencia +luxe_agency.address = Dirección de la agencia +luxe_agency.phone = Número de teléfono de contacto de la agencia +luxe_agency.email = Correo electrónico de contacto de la agencia + +luxe_realtor = Agente inmobiliario +luxe_realtor.firstName = Nombre del agente inmobiliario +luxe_realtor.lastName = Apellido del agente inmobiliario +luxe_realtor.jobPosition = Cargo del agente inmobiliario +luxe_realtor.jobPosition.junior = Agente Junior +luxe_realtor.jobPosition.senior = Agente Senior +luxe_realtor.jobPosition.director = Director de agencia +luxe_realtor.image = Imagen de perfil del agente inmobiliario +luxe_realtor.experience = Años de experiencia del agente inmobiliario +luxe_realtor.phone = Número de teléfono de contacto del agente inmobiliario +luxe_realtor.email = Correo electrónico de contacto del agente inmobiliario \ No newline at end of file diff --git a/resources/luxe-jahia-demo_fr.properties b/resources/luxe-jahia-demo_fr.properties index aa78d70..565fa2b 100644 --- a/resources/luxe-jahia-demo_fr.properties +++ b/resources/luxe-jahia-demo_fr.properties @@ -1,42 +1,86 @@ -luxemix_destination = Destination Page -luxemix_destination.enableEstates = Display a list of selected Real Estate -luxemix_destination.enableAgencies = Display the list of local agencies +luxemix_destination = Page de destination +luxemix_destination.enableEstates = Afficher une liste de biens immobiliers sélectionnés +luxemix_destination.enableAgencies = Afficher la liste des agences locales + +luxe_header = En-tête de page +luxe_header.title = Titre +luxe_header.teaser = Accroche +luxe_header.teaser.ui.tooltip = L'accroche n'est affichée que par certaines vues +luxe_header.image = Image + +luxe_highlightNumber = Nombre mis en avant +luxe_highlightNumber.text = Texte +luxe_highlightNumber.number = Nombre luxe_section = Section de page -luxe_section.arrangement = Arrangement -luxe_section.arrangement.ui.tooltip = Define the arrangement of the elements inside the section -luxe_section.arrangement.left = Left -luxe_section.arrangement.center = Center -luxe_section.arrangement.right = Right +luxe_section.arrangement = Agencement +luxe_section.arrangement.ui.tooltip = Spécifiez l'agencement des éléments au sein de la section. +luxe_section.arrangement.left = Gauche +luxe_section.arrangement.center = Centre +luxe_section.arrangement.right = Droite luxe_cols = Colonnes de page +luxe_cols.colsNumber = Nombre de colonnes +luxe_cols.colsNumber.ui.tooltip = Indiquez le nombre de colonnes souhaité pour votre section. +luxe_estate = Bien immobilier +luxe_estate.title = Titre +luxe_estate.description = Description +luxe_estate.description.ui.tooltip = Fournir une description de la propriété et mettre en avant ses caractéristiques et ses points forts. +luxe_estate.price = Prix +luxe_estate.gallery = Galerie d'images +luxe_estate.country = Pays +luxe_estate.country.ui.tooltip = Le pays où se trouve la propriété +luxe_estate.type = Type de bien immobilier luxe_estate.type.house = Maison luxe_estate.type.apartment = Appartement luxe_estate.type.building = Immeuble - +luxe_estate.surface = Surface +luxe_estate.surface.ui.tooltip = Surface en mètres carrés +luxe_estate.rooms = Nombre de pièces +luxe_estate.rooms.ui.tooltip = Nombre total de pièces dans la propriété +luxe_estate.bedrooms = Nombre de chambres +luxe_estate.bathrooms = Nombre de salles de bains +luxe_estate.options = Options luxe_estate.options.garage = Garage luxe_estate.options.swimmingPool = Piscine luxe_estate.options.garden = Jardin luxe_estate.options.balcony = Balcon +luxe_textIllustrated = Texte illustré +luxe_textIllustrated.title = Titre +luxe_textIllustrated.text = Texte +luxe_textIllustrated.image = Image +luxe_textIllustrated.arrangement = Agencement +luxe_textIllustrated.arrangement.ui.tooltip = Spécifiez si l'image doit être positionnée à droite ou à gauche du texte. luxe_textIllustrated.arrangement.right = Image à droite luxe_textIllustrated.arrangement.left = Image à gauche -luxe_agency = Agence Immobilière +luxe_agency = Agence immobilière +luxe_agency.name = Nom de l'agence +luxe_agency.description = Présentation de l'agence +luxe_agency.image = Image +luxe_agency.image.ui.tooltip = Image pour illustrer l'agence immobilière +luxe_agency.creationDate = Date de création de l'agence +luxe_agency.languages = Langues de l'agence +luxe_agency.languages.ui.tooltip = Langues parlées dans l'agence immobilière luxe_agency.languages.fr = Français luxe_agency.languages.en = Anglais luxe_agency.languages.de = Allemand luxe_agency.languages.es = Espagnol +luxe_agency.country = Pays où est situé l'agence +luxe_agency.address = Adresse de l'agence +luxe_agency.phone = Numéro de téléphone de l'agence +luxe_agency.email = Adresse e-mail de contact de l'agence -luxe_agency.creationDate = Date de création - -luxe_realtor = Agent Immobilier -luxe_realtor.firstName = Prénom -luxe_realtor.lastName = Nom -luxe_realtor.jobPosition = Titre +luxe_realtor = Agent immobilier +luxe_realtor.firstName = Prénom de l'agent immobilier +luxe_realtor.lastName = Nom de famille de l'agent immobilier +luxe_realtor.jobPosition = Poste de l'agent immobilier luxe_realtor.jobPosition.junior = Agent Junior luxe_realtor.jobPosition.senior = Agent Senior luxe_realtor.jobPosition.director = Directeur d'agence -luxe_realtor.image = Votre image de profil -luxe_realtor.experience = Années d'expérience +luxe_realtor.image = Image de profil de l'agent immobilier +luxe_realtor.experience = Années d'expérience de l'agent immobilier +luxe_realtor.phone = Numéro de téléphone de l'agent immobilier +luxe_realtor.email = Adresse e-mail de contact de l'agent immobilier \ No newline at end of file diff --git a/src/server/components/Figure.jsx b/src/server/components/Figure.jsx index 3999474..d04c0a3 100644 --- a/src/server/components/Figure.jsx +++ b/src/server/components/Figure.jsx @@ -12,12 +12,16 @@ const CSSfigcaption = { }; export const Figure = ({ - imgURL, - altText, + src, + alt, layout = 'imgCentered', caption, className }) => { + if (!src) { + return null; + } + return (
{altText} { const btnProps = { 'x-on:click': 'alert(\'holalala\')' @@ -45,7 +44,9 @@ export const EstateMainView = ({ className="pb-0" />
-
+
@@ -139,7 +140,3 @@ EstateMainView.propTypes = { parent: PropTypes.object, isBackBtnEnabled: PropTypes.bool }; - -EstateMainView.defaultProps = { - isBackBtnEnabled: false -}; diff --git a/src/server/templates/pages/Destination.jsx b/src/server/templates/pages/Destination.jsx new file mode 100644 index 0000000..b01f5c5 --- /dev/null +++ b/src/server/templates/pages/Destination.jsx @@ -0,0 +1,40 @@ +import React from 'react'; +import {JArea} from '@jahia/js-server-engine'; +import {MainLayout} from '../../layouts'; + +export const Destination = () => { + return ( + + +
+
+
+ +
+
+
+
+
+ +
+
+
+
+ +
+
+ + + ); +}; + +Destination.jahiaComponent = { + id: 'pageDestinationCmp', + nodeType: 'jnt:page', + name: 'destination', + displayName: 'Destination', + componentType: 'template' +}; diff --git a/src/server/templates/pages/Destination.jsx.disabled b/src/server/templates/pages/Destination.jsx.disabled deleted file mode 100644 index 7fb0433..0000000 --- a/src/server/templates/pages/Destination.jsx.disabled +++ /dev/null @@ -1,119 +0,0 @@ -import React from 'react'; -import {JArea} from '@jahia/js-server-engine'; -import {MainLayout} from '../../layouts'; - -export const Destination = () => { - return ( - - <> -
-
- -
-
-
-
- - -
-
-
-
-

- Explorer des marchés immobiliers exclusifs et - découvrir des destinations uniques est la clé pour - un investissement réussi dans le secteur du luxe. -

-

- Que vous soyez à la recherche de résidences de rêve - en bord de mer, de villas de montagne élégantes ou - d'appartements haut de gamme au cœur des villes - emblématiques, cette page vous guidera à travers une - sélection soigneusement choisie de destinations où - le luxe rencontre l'investissement. -

-

- Plongez dans un voyage immersif à travers les coins - les plus attractifs de la planète, où chaque - propriété est une expérience exclusive en soi. -

-
-
-
- -

- La Suisse, un pays au cœur des Alpes, allie beauté - naturelle à couper le souffle, horlogerie précise - renommée et qualité de vie exceptionnelle. -

-

- Une fusion harmonieuse entre tradition et modernité. -

- En savoir plus - -
-
- -

- Paris, la ville Lumière, est une métropole - enchanteresse où l'histoire, l'art et la culture - s'entrelacent. Ses rues pavées, ses monuments - emblématiques et sa gastronomie raffinée en font une - destination intemporelle. -

- En savoir plus - -
-
- -

- La Grèce, berceau de la civilisation occidentale, - enchante par son histoire millénaire, ses paysages - méditerranéens et ses îles pittoresques. Un mélange - unique de culture ancienne et de charme - contemporain. -

- En savoir plus - -
- - - ); -}; - -Destination.jahiaComponent = { - id: 'destinationCmp', - nodeType: 'jnt:page', - name: 'destination', - displayName: 'Destination', - componentType: 'template' -}; - diff --git a/src/server/templates/pages/Destinations.jsx b/src/server/templates/pages/Destinations.jsx index 41f2a01..4f1b370 100644 --- a/src/server/templates/pages/Destinations.jsx +++ b/src/server/templates/pages/Destinations.jsx @@ -5,20 +5,22 @@ import {MainLayout} from '../../layouts'; export const Destinations = () => { return ( - +
- +
+ +
- -
-
-
-
- +
diff --git a/src/server/templates/pages/index.js b/src/server/templates/pages/index.js index f9703f3..7afad17 100644 --- a/src/server/templates/pages/index.js +++ b/src/server/templates/pages/index.js @@ -1,2 +1,3 @@ export * from './Home'; export * from './Destinations'; +export * from './Destination'; diff --git a/src/server/views/estate/Card.jsx b/src/server/views/estate/Card.jsx index eda0469..cd4434c 100644 --- a/src/server/views/estate/Card.jsx +++ b/src/server/views/estate/Card.jsx @@ -17,7 +17,7 @@ export const Card = () => { return ( - {estate.title} + {image.getDisplayableName()}

{estate.title}

{estate.bedrooms} chambres ✦{' '} diff --git a/src/server/views/estate/ContentEditor.jsx b/src/server/views/estate/ContentEditor.jsx index f5d66aa..7bb7cb4 100644 --- a/src/server/views/estate/ContentEditor.jsx +++ b/src/server/views/estate/ContentEditor.jsx @@ -1,7 +1,6 @@ import React, {Fragment} from 'react'; -import {useServerContext, getNodeProps, jUrl, jAddCacheDependency, JAddResources} from '@jahia/js-server-engine'; -import {ChevronLeftIcon} from '@heroicons/react/24/solid'; -import {EstateMainView, Figure, PageHeader} from '../../components'; +import {useServerContext, getNodeProps, jAddCacheDependency, JAddResources} from '@jahia/js-server-engine'; +import {EstateMainView} from '../../components'; export const ContentEditor = () => { const {currentNode, currentResource} = useServerContext(); @@ -21,6 +20,7 @@ export const ContentEditor = () => { const image = estate.gallery[0]; jAddCacheDependency({node: image}); + return ( <> diff --git a/src/server/views/header/ImageCover.jsx b/src/server/views/header/ImageCover.jsx index dce6e66..49e026b 100644 --- a/src/server/views/header/ImageCover.jsx +++ b/src/server/views/header/ImageCover.jsx @@ -1,15 +1,20 @@ import React from 'react'; -import {useServerContext, getNodeProps} from '@jahia/js-server-engine'; +import {useServerContext, getNodeProps, jAddCacheDependency} from '@jahia/js-server-engine'; export const ImageCover = () => { const {currentNode} = useServerContext(); const header = getNodeProps(currentNode, ['title', 'image']); + + if (header.image) { + jAddCacheDependency({node: header.image}); + } + return (

{header.image && ( diff --git a/src/server/views/header/MainHeaderTextDown.jsx b/src/server/views/header/MainHeaderTextDown.jsx new file mode 100644 index 0000000..6e487af --- /dev/null +++ b/src/server/views/header/MainHeaderTextDown.jsx @@ -0,0 +1,41 @@ +import React from 'react'; +import {useServerContext, getNodeProps, jAddCacheDependency} from '@jahia/js-server-engine'; +import {Figure} from '../../components'; + +export const MainHeaderTextDown = () => { + const {currentNode} = useServerContext(); + const header = getNodeProps(currentNode, ['title', 'teaser', 'image']); + + if (header.image) { + jAddCacheDependency({node: header.image}); + } + + return ( + <> + {header.image && +
+
+
+
+
} + +
+
+

{header.title}

+

+ {header.teaser} +

+
+
+ + ); +}; + +MainHeaderTextDown.jahiaComponent = { + id: 'mainHeaderTextDownCmp', + nodeType: 'luxe:header', + name: 'mainHeader-textDown', + componentType: 'view' +}; diff --git a/src/server/views/header/MainHeader.jsx b/src/server/views/header/MainHeaderTextUp.jsx similarity index 53% rename from src/server/views/header/MainHeader.jsx rename to src/server/views/header/MainHeaderTextUp.jsx index fc80865..f2b6665 100644 --- a/src/server/views/header/MainHeader.jsx +++ b/src/server/views/header/MainHeaderTextUp.jsx @@ -1,10 +1,15 @@ import React from 'react'; -import {useServerContext, getNodeProps} from '@jahia/js-server-engine'; +import {useServerContext, getNodeProps, jAddCacheDependency} from '@jahia/js-server-engine'; import {Figure, PageHeader} from '../../components'; -export const MainHeader = () => { +export const MainHeaderTextUp = () => { const {currentNode} = useServerContext(); const header = getNodeProps(currentNode, ['title', 'teaser', 'image']); + + if (header.image) { + jAddCacheDependency({node: header.image}); + } + return ( <>
@@ -13,19 +18,22 @@ export const MainHeader = () => { description={header.teaser} />
+ + {header.image &&
-
+
-
- +
} ); }; -MainHeader.jahiaComponent = { - id: 'mainHeaderCmp', +MainHeaderTextUp.jahiaComponent = { + id: 'mainHeaderTextUpCmp', nodeType: 'luxe:header', - name: 'mainHeader', + name: 'mainHeader-textUp', componentType: 'view' }; diff --git a/src/server/views/header/index.js b/src/server/views/header/index.js index bafb0e2..c475291 100644 --- a/src/server/views/header/index.js +++ b/src/server/views/header/index.js @@ -1,2 +1,3 @@ export * from './ImageCover'; -export * from './MainHeader'; +export * from './MainHeaderTextUp'; +export * from './MainHeaderTextDown'; diff --git a/src/server/views/section/Section.jsx b/src/server/views/section/Section.jsx index 56793c9..d360442 100644 --- a/src/server/views/section/Section.jsx +++ b/src/server/views/section/Section.jsx @@ -1,9 +1,9 @@ -import React, {Fragment} from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { useServerContext, getNodeProps, - JArea, JRender, JAddContentButtons, getChildNodes + JRender, JAddContentButtons, getChildNodes } from '@jahia/js-server-engine'; import clsx from 'clsx'; @@ -34,33 +34,17 @@ export const Section = () => { return (
- {/* {sectionContents.map(content => ( */} - {/* */} - - {/* ))} */} {sectionContents.map(content => ( ))} - {/* */}
); }; -// Section.propTypes = { -// className: PropTypes.string -// }; - Section.jahiaComponent = { id: 'sectionCmp', nodeType: 'luxe:section', diff --git a/src/server/views/textIllustrated/Default.jsx b/src/server/views/textIllustrated/Default.jsx index b236a92..e0c392d 100644 --- a/src/server/views/textIllustrated/Default.jsx +++ b/src/server/views/textIllustrated/Default.jsx @@ -10,21 +10,21 @@ import {TextIllustrated} from '../../components'; export const Default = () => { const {currentNode, renderContext} = useServerContext(); const modulePath = renderContext.getURLGenerator().getCurrentModule(); - const textIllustrated = getNodeProps(currentNode, ['title', 'text', 'image', 'arrangement']); + const textI9d = getNodeProps(currentNode, ['title', 'text', 'image', 'arrangement']); - const imageNode = textIllustrated.image; - jAddCacheDependency({node: imageNode}); + if (textI9d.image) { + jAddCacheDependency({node: textI9d.image}); + } - const image = { - src: imageNode?.getUrl() || `${modulePath}/assets/img/img-placeholder.jpg`, - alt: imageNode?.getDisplayableName() || 'placeholder' - }; return ( ); };