Une expérience développeur inégalée

Le développement commence par décrire ce que vous voulez stocker, et Jahia détermine la structure de la couche de persistance et génère des interfaces d'édition interactives pour vos éditeurs.

Cela se fait avec un langage simple et expressif : le langage de définition compacte de nœud (CND). Voici comment l'extrait de code suivant s'auto-définit en CND :

[example:codeSnippet] > jnt:content
 - language (string, choicelist) mandatory < 'js', 'html', 'css'
 - code (string, textarea) mandatory

Le rendu est fait côté serveur avec React en tant que moteur de template, offrant une expérience développeur (DX) de premier ordre. Nous nous occupons de l'interface avec Jahia, vous récupérez les données sous forme d'objets JavaScript natifs :

import { Island, jahiaComponent } from "@jahia/javascript-modules-library"
import Copy from "./Copy.client.tsx"

jahiaComponent(
  { componentType: "view", nodeType: "training:codeSnippet" },
  ({ code, language }) => (
    <div>
      <Island component={Copy} props={{ code }} />
      <pre>{code}</pre>
    </div>
  )
)

Besoin d'interactivité ? Exploitez toute la puissance des composants React côté client avec notre implémentation de l'architecture en archipel (Island Architecture), offrant à la fois performance et flexibilité.

import { useState } from "react"
import classes from "./styles.module.css"

export default function Copy(props: { code: string }) {
  const [copied, setCopied] = useState(false)

  return <button
    className={classes.copy}
    onClick={() => {
      navigator.clipboard.writeText(props.code)
      setCopied(true)
    }}
  >
    {copied ? "Copied!" : "Copy"}
  </button>
}

Adoptez les CSS Modules pour passer vos styles à l'échelle, cette approche moderne et modulaire pour styliser vos composants. Les conflits de CSS appartiennent au passé.

.wrapper {
  position: relative;
}

.copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

Ne perdez plus de temps à configurer vos outils de build, nous utilisons le très apprécié Vite pour tout ce qui concerne le front end.

import jahia from "@jahia/vite-plugin"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [
    jahia()
    // Add tailwind, SVG processing...
  ]
})