Bloc

Syslog

El mòdul Syslog a Drupal és una eina que permet registrar esdeveniments del lloc als fitxers de registre del sistema utilitzant el protocol estàndard Syslog. Aquest mòdul és útil per integrar el registre d'esdeveniments de Drupal amb els sistemes de monitoratge de servidors existents.

Característiques principals:

1. Compatibilitat amb estàndards: Utilitza el protocol Syslog, que és àmpliament suportat en sistemes operatius com Linux, Unix i macOS.
2. Substitució del registre en la base de dades: En lloc de registrar els esdeveniments a la base de dades, el mòdul Syslog envia aquests esdeveniments al sistema de registre del servidor, reduint la càrrega de la base de dades.
3. Configuració flexible: Permet filtrar i classificar els missatges segons la seva gravetat, com ara advertiments, errors o informació general.
4. Millor integració amb eines externes: Els esdeveniments registrats mitjançant Syslog poden ser analitzats per eines externes com Splunk, Logstash o Graylog.

Avantatges:

• Redueix la sobrecàrrega a la base de dades en delegar els registres al sistema operatiu.
• Ofereix una millor integració amb els sistemes de monitoratge i auditoria centralitzats.
• És altament configurable i adequat per a entorns de producció.

Consideracions:

• Requereix accés i configuració del sistema operatiu per habilitar Syslog.
• No emmagatzema els esdeveniments directament a Drupal, fet que pot dificultar l'accés als desenvolupadors sense accés al servidor.

Aquest mòdul és ideal per a llocs de trànsit elevat que necessiten una solució de registre eficient i escalable.

Instal·lació de rsyslog en sistemes basats en Debian/Ubuntu

A partir de la versión 10.3 del core de Drupal, se incorporo un nuevo tipo de extensión llamado Recipes(recetas) y que si bien cumple una función similar a las ya existentes como los Profiles(perfiles de instalación) o módulos, poseen algunas particularidades que pueden resultarnos muy útiles. 
Hasta la actualidad, poseíamos los Profiles, que servían como punto de arranque para tener, desde el inicio, un producto adaptado a nuestras necesidades. En este sentido, las recipes comparten esta funcionalidad, ya que se pueden hacer recetas que estén disponibles al momento de inicializar un proyecto, pero la diferencia mas notable entre ambos, reside en que los profiles solo están disponibles al momento de inicializar el proyecto y solo puede usarse uno por sitio.

API's

Las recetas funcionan sobre 4 API's:

- Recipes (propia recipes).
- Action (alterar configuracion[plugins]).
- Checkpoint (como fallback, requerido para deshacer si la recipe falla)
antes de aplicar una recipe, crea una marca para volver atras si falla, sino se borra .
- Default content (importar contenido por defecto).

Caracteristicas

 Repasemos un poco las características de las recetas:

- No se instalan, se aplican (Actúan a modo de script) (no dejan huella, una vez aplicadas no dejan rastro)
- No contienen código 
- Mediante dependencias las recipes pueden llegar a instalar código, esto es, módulos y temas gráficos, pero ellas como tal no contienen archivos PHP
- Pueden modificar la configuración existente (mediante un nuevo soporte llamado config actions)
- Pueden crear contenido
- No borran nada (en principio estan pensadas para no borrar nada)

Estructura

Dentro de una receta, encontraremos al menos un archivo que es el recipe.yml, que tiene una estructura de este tipo:

Nombre y descripción:

name: 'Drupal Base'
description: 'A recipe tailored to best practices for kickstarting a new Drupal 10 project.

Tipo

En las recetas, el tipo es similar al paquete (package) en los módulos, agrupa recetas según criterio de utilidad. El tipo 'Site' significa que la receta será listada como una opción en el instalador.

type: 'Content type'

Recipes

Si la receta depende de otras, se listarán aquí. Todas se aplicarán antes que ella misma.

recipes:
	- editorial_ui_for_publishers
	- another_recipe

Install

Dependencias generales (módulos o temas gráficos) de la receta.

install:
	- node
	- text

Config import

La receta puede controlar qué entidades de configuración instalar o no de las provistas por los módulos listados en sus dependencias.

config:
	import:
		easy_breadcrumb:
			- views.view.easy_breadcrumbs
		node:
			- node.type.article
		text: *

En el ejemplo "text" lleva un asterisco que indica que debe importarse toda la configuración de ese modulo.

Config actions

Aquí se relacionan las 'config actions' o acciones a realizar sobre configuración existente. Se declara el nombre de la configuración a tratar, la acción concreta a realizar (esto lo hace un plugin) y posibles argumentos. 
En el ejemplo, el rol de usuario 'Editor' será creado si no existe y luego obtendrá varios permisos para trabajar sobre el tipo de contenido Artículo.

config:
	actions:
		user.role.editor:
			ensure_exists:
				label: 'Editor'
			grantPermissions:
				- 'delete any article content'
				- 'edit any article content'

Content

Se puede proveer un directorio con contenido a crear una vez la configuración de la receta se haya instalado.

content:
	node:
		foo.yml

Importar una receta

Vía comando PHP:

php core/scripts/drupal recipe recipes/recipe_name

Vía drush:

drush recipe [RUTA RECETA]

Si su receta tiene un archivo «composer.json», puede alojarse en Packagist.org para que se pueda encontrar e incluir en cualquier proyecto. Sin embargo, para descargar la receta en un directorio «recipes» es necesario realizar algunos cambios en el archivo «composer.json» del proyecto:

composer require oomphinc/composer-installers-extender:2.0.1

Actualizar las claves «installer-types» e «installer-paths» en el «composer.json»

"installer-types": ["drupal-recipe"], 
"installer-paths": {
 "web/recipes/{$name}": [ "type:drupal-recipe" ]
}

Con esto, cuando solicites a Composer una receta, la colocará automáticamente en el directorio «recipes» de tu proyecto, de forma similar a como gestiona módulos o temas. Una vez que esto está configurado, puede utilizar Composer para requerir el paquete como de costumbre.

composer require foo/bar

Enlaces de interés

• En Drupal.org hay algunas recetas que podemos probar, ver como están formadas y funcionan: Recipes Cookbook
• DrupalCamp Spain 2024 - Teoría y práctica sobre Drupal recipes

Què és SDC?

Single-Directory Components ens permet la implementació de components a Drupal. Els components són parts de l’aplicació web amb un propòsit concret, per ser usats de forma modular i reutilitzable, com podria ser la creació d’un botó o d’un bàner.

Estructura dels components

Estan formats principalment pels següents fitxers, que es carregaran de manera automàtica en incloure el component a la nostra plantilla o mòdul si els fitxers estan nomenats correctament:

• TWIG: Plantilla amb l'estructura HTML.
• YML: Metadades necessàries per definir el component.
• Recursos CSS i JS (opcional).

A més, es poden afegir elements extra com imatges, README, SCSS, etc.

Exemple en l'estructura d'un component, col·locat dins d'un tema o mòdul, a la carpeta components:

button
| - button.component.yml (requerit)
| - button.twig (requerit)
| - button.css
| - button.js

Principals avantatges i inconvenients

Avantatges:

• Millora l'organització dels components, encapsulant tot el que està relacionat amb el recurs dins d'una carpeta. Això facilita molt les millores, el manteniment i la comprensió dels elements.
• Millora l’escalabilitat dels components si s’aniden correctament.
• Millora la reutilització dels components en altres projectes.

Inconvenients:

• Per a paràmetres genèrics del tema (per exemple, variables per als colors), cal seguir important dades externes al mòdul, fet que impedeix un encapsulament complet.
• Si es comencen a generar components molt petits, pot acabar dificultant el desenvolupament per la dificultat de trobar-los o adonar-se que ja existeixen.
• Pot ser que realment no aporti gaire si el lloc no requereix molta reutilització d’elements i, en canvi, només redueixi el rendiment.

Metadades

Aquí tenim un exemple senzill de metadades per a un component que generarà un modal:

name: Modal
props:
  type: object
  properties:
    title:
      type: string
      title: Title
      description: The modal title.
    classes:
      type: string
      title: Classes
      description: Extra classes to be added to modal element.
    text:
      type: string
      title: Text
      description: The text inside the modal.
    close_button:
      type: boolean
      title: Close button
      description: If TRUE, the modal will show a close button.

Càrrega del component

Podem carregar el component als nostres fitxers twig de dues maneres diferents.

La primera és amb include:

{{ include ('mytheme:modal', {
  title: 'Atención',
  text: 'Está previsto un mantenimiento de la web de 13:00 a 14:00',
  close_button: true,
}) }}

La segona és amb embed:

{% embed 'mytheme:modal' with {
  title: 'Atención',
  text: 'Está previsto un mantenimiento de la web de 13:00 a 14:00',
  close_button: true,
} %} {% endembed %}

Estendre components

Una de les propietats més potents de SDC és la possibilitat d’estendre components per fer ajustos particulars. Per exemple, podem estendre la modal per crear una modal-primary, de manera que el nou component tindrà estils o classes noves que li donaran un aspecte més específic.

Això ho faríem mitjançant el yml, i incloent, per exemple, un nou fitxer CSS que aportarà noves regles a l’element:

name: Modal Primary
extends: modal

El fitxer twig del modal-primary podria ser així:

{{ include ('mytheme:modal', { classes: 'modal-primary' }) }}

Nota: L’exemple potser no és el més pràctic, és merament didàctic.

Props i Slots

Fins ara hem vist exemples de components als quals passem dades de forma estructurada (clau:valor). Això són els props (com també es pot apreciar al fitxer yml d'exemple).

A més d’aquests, tenim un altre tipus de dades, els slots. Aquests són dades desestructurades, com components anidats o HTML, que no estan definits a l'esquema JSON de clau:valor i no són tipats.

Exemple de slots amb un slider:

name: Slider
slots:
  slide1:
    title: Slide 1
    description: "Slide 1"
  slide2:
    title: Slide 2
    description: "Slide 2"
  slide3:
    title: Slide 3
    description: "Slide 3"

Per utilitzar el slider, carregarem els 3 slides com a components extra que passarem per omplir els slots:

{% embed 'mytheme:slider' %}
  {% block slide_1 %}
    {{ include('mytheme:slide', { title: 'Slide A', description: 'This is the slider A' }) }}
  {% endblock %}
  {% block slide_2 %}
    {{ include('mytheme:slide', { title: 'Slide B', description: 'This is the slider B' }) }}
  {% endblock %}
  {% block slide_3 %}
    {{ include('mytheme:slide', { title: 'Slide C' }) }}
  {% endblock %}
{% endembed %}

El problema de carregar els slots d’aquesta manera és que s’haurien de definir espais exactes (3 en aquest cas), i no seria dinàmic:
 

<div class="slider">
  {% block slide_1 %}{% endblock %}
  {% block slide_2 %}{% endblock %}
  {% block slide_3 %}{% endblock %}
</div>

Slots dinàmics

Per carregar slots de manera dinàmica, hauríem de definir el twig així:

<div class="slider">
  {% for slide in slots.slides %}
    <div class="slider-slide">
      {{ slide|raw }}
    </div>
  {% endfor %}
</div>

Les metadades:

label: "Slider"
slots:
  slides:
    title: 'Slides'
    description: "Array con los slides del slider."

El bloc d'inserció del component:

{{ include('mytheme:slider', {
  slots: {
    slides: [
      include('mytheme:slide', { title: 'Slide A', description: 'This is the slider A' }),
      include('mytheme:slide', { title: 'Slide B', description: 'This is the slider B' }),
      include('mytheme:slide', { title: 'Slide C' }),
    ]
  }
}) }}

Consideracions

Variables externes

Per resoldre el problema de variables SCSS globalitzades, es poden importar dins del fitxer SCSS del component:

@import "../../scss/vars";

Una altra solució seria generar variables CSS i usar-les dins del component.

Llibreries externes

Per utilitzar llibreries externes, com Bootstrap, es poden definir al YML:

name: "Button"
description: "A reusable button component based on Bootstrap." 
libraries: 
  - mytheme/bootstrap
props:
  type: object
  properties:
    text:
      type: string
      title: Text
      description: The button text.

Format correcte de càrrega dels components

Els components s’han d’incloure en el format nom_tema:component.

{{ include ('@mytheme/components/modal.twig', {
    title: 'Atención',
    text: 'Está previsto un mantenimiento de la web de 13:00 a 14:00',
    close_button: true,
}) }}

URLs interessants

Documentació oficial

https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components

DrupalCamp 2023 - SDC

DrupalCamp Spain 2023 - Diseño basado en componentes usando Single Directory Components (SDC)