@jjlmoya/utils-babies 1.1.0

package/src/tool/baby-size-converter/i18n/es.ts

@@ -0,0 +1,203 @@
+import type { BabySizeConverterLocaleContent } from '../index';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+
+const slug = 'conversor-tallas-bebe';
+const title = 'Conversor de Tallas de Bebé';
+const description = 'Convierte tallas de ropa de bebé entre Zara, H&M, Primark, Carter\'s, Kiabi, Mango y Mayoral. Introduce la altura y el peso para obtener la talla exacta de cada marca.';
+const faq = [
+  {
+    question: '¿Cómo sé qué talla de ropa le corresponde a mi bebé?',
+    answer: 'Lo más fiable es usar la altura del bebé como referencia principal. Las tallas europeas (50, 56, 62...) corresponden directamente a la altura en centímetros. Introduce la altura y el peso del bebé en el conversor para obtener la talla recomendada por cada marca.',
+  },
+  {
+    question: '¿Por qué las tallas varían tanto entre marcas?',
+    answer: 'Cada marca tiene su propio patrón de corte. H&M y Primark tienden a tallar más grande, mientras que Carter\'s y Mayoral tienen cortes más ajustados. Usa siempre las medidas del bebé, no solo la edad.',
+  },
+  {
+    question: '¿Qué medida debo tomar si está entre dos tallas?',
+    answer: 'Elige siempre la talla superior. Los bebés crecen muy rápidamente y una talla más grande garantiza mayor durabilidad y comodidad.',
+  },
+  {
+    question: '¿Las tallas en pulgadas funcionan igual?',
+    answer: 'Las marcas americanas como Carter\'s usan pulgadas y el peso como referencia. El conversor automáticamente te muestra las equivalencias en el sistema imperial si lo activas.',
+  },
+];
+const howTo = [
+  {
+    name: 'Introduce la altura del bebé',
+    text: 'Usa el slider o los botones para ajustar la altura actual del bebé en centímetros o pulgadas.',
+  },
+  {
+    name: 'Introduce el peso del bebé',
+    text: 'Ajusta el peso en kg o libras para afinar los resultados, ya que algunas marcas usan el peso como referencia complementaria.',
+  },
+  {
+    name: 'Selecciona una marca',
+    text: 'Elige la marca de ropa para ver la talla sugerida y las medidas estimadas de la prenda.',
+  },
+  {
+    name: 'Consulta las equivalencias',
+    text: 'En el panel derecho verás las tallas equivalentes de todas las marcas disponibles de un vistazo.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faq.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howTo.map((step) => ({
+    '@type': 'HowToStep',
+    name: step.name,
+    text: step.text,
+  })),
+};
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'es',
+};
+
+export const content: BabySizeConverterLocaleContent = {
+  slug,
+  title,
+  description,
+  ui: {
+    labelInput: 'Medidas del bebé',
+    labelResults: 'Equivalencias estimadas',
+    labelHeight: 'Altura del bebé',
+    labelWeight: 'Peso actual del bebé',
+    labelPresets: 'Preajustes por edad típica',
+    unitMetric: 'Métrico (cm/kg)',
+    unitImperial: 'Imperial (in/lb)',
+    labelCm: 'cm',
+    labelKg: 'kg',
+    labelIn: 'in',
+    labelLb: 'lb',
+    labelBrandFit: 'Marca y Corte',
+    labelSuggested: 'Talla sugerida',
+    labelChest: 'Pecho',
+    labelWaist: 'Cintura',
+    labelGarmentMeasures: 'Medidas estimadas de la prenda',
+    fitRegular: 'Corte regular',
+    fitLarge: 'Corte amplio',
+    fitSmall: 'Corte ajustado',
+    tipTitle: 'Consejo de experto',
+    tipText: 'Los bebés crecen en picos de desarrollo muy rápidos. Si el resultado está en el límite superior de una talla, elige siempre la talla superior para garantizar la durabilidad y comodidad del bebé.',
+    shareAriaLabel: 'Compartir talla',
+    faqTitle: 'Preguntas frecuentes',
+    bibliographyTitle: 'Referencias',
+  },
+  seo: [
+    { type: 'title', text: 'Guía de tallas de bebé: Zara, H&M, Primark y marcas españolas', level: 2 },
+    { type: 'stats', columns: 3, items: [
+      { value: '2.5 cm', label: 'Crecimiento mensual' },
+      { value: '3 meses', label: 'Duración de cada talla' },
+      { value: '95%', label: 'Fiabilidad por altura' },
+    ]},
+    { type: 'tip', html: 'Usa siempre la altura como referencia principal para elegir talla, no la edad. Dos bebés del mismo mes pueden tener hasta 8–10 cm de diferencia, lo que supone saltar una talla completa.' },
+    { type: 'title', text: 'Tallas por edad, altura y peso', level: 3 },
+    { type: 'table', headers: ['Edad aprox.', 'Altura (cm)', 'Peso (kg)', 'Talla habitual', 'Uso estimado'], rows: [
+      ['Recién nacido', '50–56', '3–4.5', '50 / RN', '4–6 semanas'],
+      ['1–3 meses', '56–62', '4.5–6', '56–62', '6–8 semanas'],
+      ['3–6 meses', '62–68', '6–8', '62–68', '6–8 semanas'],
+      ['6–9 meses', '68–74', '8–9.5', '68–74', '6–8 semanas'],
+      ['9–12 meses', '74–80', '9.5–11', '74–80', '6–8 semanas'],
+      ['12–18 meses', '80–86', '11–13', '80–86', '3–4 meses'],
+      ['18–24 meses', '86–92', '13–15', '86–92', '3–4 meses'],
+    ]},
+    { type: 'title', text: 'Marcas que tallan grande vs ajustado', level: 3 },
+    { type: 'comparative', columns: 2, items: [
+      {
+        title: 'Tallan grande (elige talla inferior)',
+        description: 'Estas marcas usan cortes más amplios; toma una talla menos de la habitual.',
+        points: [
+          'H&M: suele tallar una talla más',
+          'Primark: corte amplio generalizado',
+          'Lupilu (Lidl): corte holgado',
+          'Recomendado para bebés en percentil bajo',
+        ],
+      },
+      {
+        title: 'Tallan ajustado (elige talla superior)',
+        description: 'Estas marcas usan cortes más ceñidos; toma una talla más de la habitual.',
+        points: [
+          "Carter's: corte americano ceñido",
+          'Mayoral: corte europeo ajustado',
+          'Neck & Neck: tallas reducidas',
+          'Recomendado para bebés en percentil alto',
+        ],
+      },
+    ]},
+    { type: 'title', text: 'Claves para acertar con la talla', level: 3 },
+    { type: 'list', items: [
+      'Mide siempre al bebé antes de comprar, no te fíes solo de la edad',
+      'Si está en el límite entre dos tallas, elige la talla superior',
+      'Ten en cuenta el margen para el pañal en prendas de cuerpo entero',
+      'Las tallas europeas (50, 56, 62...) corresponden a la altura en cm',
+      'Lava siempre antes de usar: el algodón puede encoger hasta un 5%',
+    ]},
+    { type: 'glossary', items: [
+      {
+        term: 'Talla 50 / Recién nacido',
+        definition: 'Pensada para bebés de hasta 50 cm de altura y unos 3.5 kg. Muchos bebés la superan muy rápidamente, incluso en las primeras semanas.',
+      },
+      {
+        term: 'Medida del tiro',
+        definition: 'Distancia desde la entrepierna hasta la cintura. Fundamental en bodies y peleles: un tiro corto limita el movimiento del bebé aunque el resto de la prenda encaje bien.',
+      },
+      {
+        term: 'Referencia por peso',
+        definition: "Algunas marcas americanas como Carter's usan el peso como referencia primaria. Útil para bebés con proporciones fuera del percentil estándar.",
+      },
+      {
+        term: 'Cuello de sobre',
+        definition: 'Diseño del escote de bodies y camisetas que permite vestir al bebé deslizando la prenda hacia abajo en lugar de pasarla por la cabeza. Imprescindible en los primeros meses.',
+      },
+    ]},
+    { type: 'summary', title: 'Lo que debes recordar', items: [
+      'La altura es el indicador más fiable para elegir talla, por encima de la edad.',
+      "H&M y Primark tienden a tallar grande; Carter's y Mayoral tallan ajustado.",
+      'Las tallas europeas numéricas (50, 56, 62...) corresponden a la altura en cm.',
+      'En el límite entre tallas, elegir la superior garantiza mayor durabilidad.',
+      'El cuello de sobre y el tiro amplio son los detalles clave de comodidad.',
+    ]},
+  ],
+  faqTitle: "Preguntas frecuentes",
+  faq,
+  bibliographyTitle: "Referencias",
+  bibliography: [
+    {
+      name: 'Zara - Guía de tallas infantiles',
+      url: 'https://www.zara.com/es/es/size-guide.html',
+    },
+    {
+      name: 'H&M - Guía de tallas para bebé',
+      url: 'https://www2.hm.com/es_es/customer-service/sizeguide.html',
+    },
+    {
+      name: 'OMS - Estándares de crecimiento infantil',
+      url: 'https://www.who.int/tools/child-growth-standards',
+    },
+    {
+      name: 'Mayoral - Guía de tallas',
+      url: 'https://www.mayoral.com/es-es/guia-tallas',
+    },
+  ],
+  howTo,
+  schemas: [faqSchema as any, howToSchema as any, appSchema],
+};

package/src/tool/baby-size-converter/i18n/fr.ts

@@ -0,0 +1,203 @@
+import type { BabySizeConverterLocaleContent } from '../index';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+
+const slug = 'convertisseur-tailles-bebe';
+const title = 'Convertisseur de tailles bébé';
+const description = "Convertissez les tailles de vêtements bébé entre Zara, H&M, Primark, Carter's, Kiabi, Mango et Mayoral. Entrez la taille et le poids de votre bébé pour obtenir la pointure exacte de chaque marque.";
+const faq = [
+  {
+    question: "Comment savoir quelle taille de vêtement correspond à mon bébé ?",
+    answer: "Le plus fiable est d'utiliser la taille du bébé comme référence principale. Les tailles européennes (50, 56, 62...) correspondent directement à la taille en centimètres. Entrez la taille et le poids dans le convertisseur pour obtenir la taille recommandée par chaque marque.",
+  },
+  {
+    question: 'Pourquoi les tailles varient-elles autant selon les marques ?',
+    answer: "Chaque marque a son propre patron de coupe. H&M et Primark ont tendance à tailler grand, tandis que Carter's et Mayoral ont des coupes plus ajustées. Utilisez toujours les mesures du bébé, pas seulement son âge.",
+  },
+  {
+    question: 'Que faire si le bébé est entre deux tailles ?',
+    answer: "Choisissez toujours la taille supérieure. Les bébés grandissent très vite et une taille plus grande garantit une meilleure durabilité et un meilleur confort.",
+  },
+  {
+    question: "Les tailles en pouces fonctionnent-elles de la même façon ?",
+    answer: "Les marques américaines comme Carter's utilisent les pouces et le poids comme référence principale. Le convertisseur affiche automatiquement les équivalences en système impérial lorsque vous l'activez.",
+  },
+];
+const howTo = [
+  {
+    name: 'Entrez la taille du bébé',
+    text: 'Utilisez le curseur ou les boutons pour ajuster la taille actuelle du bébé en centimètres ou en pouces.',
+  },
+  {
+    name: 'Entrez le poids du bébé',
+    text: 'Ajustez le poids en kg ou en livres pour affiner les résultats, car certaines marques utilisent le poids comme référence complémentaire.',
+  },
+  {
+    name: 'Sélectionnez une marque',
+    text: 'Choisissez la marque de vêtements pour voir la taille suggérée et les mesures estimées du vêtement.',
+  },
+  {
+    name: 'Consultez les équivalences',
+    text: 'Le panneau de droite affiche les tailles équivalentes de toutes les marques disponibles en un coup d\'oeil.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faq.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howTo.map((step) => ({
+    '@type': 'HowToStep',
+    name: step.name,
+    text: step.text,
+  })),
+};
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'fr',
+};
+
+export const content: BabySizeConverterLocaleContent = {
+  slug,
+  title,
+  description,
+  ui: {
+    labelInput: 'Mesures du bébé',
+    labelResults: 'Équivalences estimées',
+    labelHeight: 'Taille du bébé',
+    labelWeight: 'Poids actuel du bébé',
+    labelPresets: 'Préréglages par âge typique',
+    unitMetric: 'Métrique (cm/kg)',
+    unitImperial: 'Impérial (in/lb)',
+    labelCm: 'cm',
+    labelKg: 'kg',
+    labelIn: 'in',
+    labelLb: 'lb',
+    labelBrandFit: 'Marque et coupe',
+    labelSuggested: 'Taille suggérée',
+    labelChest: 'Poitrine',
+    labelWaist: 'Tour de taille',
+    labelGarmentMeasures: 'Mesures estimées du vêtement',
+    fitRegular: 'Coupe régulière',
+    fitLarge: 'Coupe ample',
+    fitSmall: 'Coupe ajustée',
+    tipTitle: 'Conseil expert',
+    tipText: "Les bébés grandissent très rapidement. Si le résultat se situe à la limite supérieure d'une taille, choisissez toujours la taille supérieure pour garantir la durabilité et le confort du bébé.",
+    shareAriaLabel: 'Partager la taille',
+    faqTitle: 'Questions fréquentes',
+    bibliographyTitle: 'Références',
+  },
+  seo: [
+    { type: 'title', text: "Guide des tailles bébé : Zara, H&M, Primark et grandes marques", level: 2 },
+    { type: 'stats', columns: 3, items: [
+      { value: '2,5 cm', label: 'Croissance mensuelle' },
+      { value: '3 mois', label: 'Durée par taille' },
+      { value: '95 %', label: 'Fiabilité par taille' },
+    ]},
+    { type: 'tip', html: "Utilisez toujours la taille comme référence principale pour choisir une pointure, pas l'âge. Deux bébés du même mois peuvent avoir jusqu'à 8–10 cm de différence, ce qui représente une taille complète." },
+    { type: 'title', text: 'Tailles par âge, taille et poids', level: 3 },
+    { type: 'table', headers: ['Âge approx.', 'Taille (cm)', 'Poids (kg)', 'Taille habituelle', 'Utilisation estimée'], rows: [
+      ['Nouveau-né', '50–56', '3–4,5', '50 / NB', '4–6 semaines'],
+      ['1–3 mois', '56–62', '4,5–6', '56–62', '6–8 semaines'],
+      ['3–6 mois', '62–68', '6–8', '62–68', '6–8 semaines'],
+      ['6–9 mois', '68–74', '8–9,5', '68–74', '6–8 semaines'],
+      ['9–12 mois', '74–80', '9,5–11', '74–80', '6–8 semaines'],
+      ['12–18 mois', '80–86', '11–13', '80–86', '3–4 mois'],
+      ['18–24 mois', '86–92', '13–15', '86–92', '3–4 mois'],
+    ]},
+    { type: 'title', text: 'Marques qui taillent grand vs ajusté', level: 3 },
+    { type: 'comparative', columns: 2, items: [
+      {
+        title: 'Taillent grand (prendre une taille en dessous)',
+        description: "Ces marques utilisent des coupes plus amples ; prenez une taille en moins par rapport à l'habituel.",
+        points: [
+          'H&M : taille généralement une taille de plus',
+          'Primark : coupe ample généralisée',
+          'Lupilu (Lidl) : coupe large',
+          'Recommandé pour les bébés en percentile bas',
+        ],
+      },
+      {
+        title: 'Taillent ajusté (prendre une taille au-dessus)',
+        description: "Ces marques utilisent des coupes plus cintrées ; prenez une taille de plus par rapport à l'habituel.",
+        points: [
+          "Carter's : coupe américaine cintrée",
+          'Mayoral : coupe européenne ajustée',
+          'Neck & Neck : tailles réduites',
+          'Recommandé pour les bébés en percentile élevé',
+        ],
+      },
+    ]},
+    { type: 'title', text: 'Conseils pour trouver la bonne taille', level: 3 },
+    { type: 'list', items: [
+      "Mesurez toujours le bébé avant d'acheter, ne vous fiez pas uniquement à l'âge",
+      'Si le résultat se situe entre deux tailles, choisissez toujours la taille supérieure',
+      'Tenez compte de la place pour la couche dans les bodies et combinaisons',
+      'Les tailles européennes (50, 56, 62...) correspondent à la taille en cm',
+      "Lavez toujours avant utilisation : le coton peut rétrécir jusqu'à 5 %",
+    ]},
+    { type: 'glossary', items: [
+      {
+        term: 'Taille 50 / Nouveau-né',
+        definition: "Conçue pour les bébés jusqu'à 50 cm et environ 3,5 kg. De nombreux bébés la dépassent très rapidement, même dans les premières semaines.",
+      },
+      {
+        term: 'Longueur entrejambe',
+        definition: "Distance de l'entrejambe à la taille. Fondamentale dans les bodies et combinaisons : une longueur courte limite les mouvements du bébé même si le reste du vêtement convient.",
+      },
+      {
+        term: 'Référence par poids',
+        definition: "Certaines marques américaines comme Carter's utilisent le poids comme référence principale. Utile pour les bébés dont les proportions sortent du percentile standard.",
+      },
+      {
+        term: 'Col enveloppe',
+        definition: "Design de l'encolure des bodies et T-shirts permettant d'habiller le bébé en faisant glisser le vêtement vers le bas plutôt que par la tête. Indispensable dans les premiers mois.",
+      },
+    ]},
+    { type: 'summary', title: "Ce qu'il faut retenir", items: [
+      "La taille est l'indicateur le plus fiable pour choisir la bonne pointure, avant l'âge.",
+      "H&M et Primark taillent généralement grand ; Carter's et Mayoral taillent ajusté.",
+      'Les tailles européennes numériques (50, 56, 62...) correspondent à la taille en cm.',
+      'En cas de doute entre deux tailles, choisir la supérieure garantit une meilleure durabilité.',
+      "Le col enveloppe et un entrejambe généreux sont les détails de confort essentiels.",
+    ]},
+  ],
+  faqTitle: "Questions fréquentes",
+  faq,
+  bibliographyTitle: "Références",
+  bibliography: [
+    {
+      name: 'Zara - Guide des tailles enfant',
+      url: 'https://www.zara.com/fr/fr/size-guide.html',
+    },
+    {
+      name: 'H&M - Guide des tailles bébé',
+      url: 'https://www2.hm.com/fr_fr/customer-service/sizeguide.html',
+    },
+    {
+      name: 'OMS - Normes de croissance de l\'enfant',
+      url: 'https://www.who.int/tools/child-growth-standards',
+    },
+    {
+      name: 'Kiabi - Guide des tailles',
+      url: 'https://www.kiabi.com/guide-des-tailles',
+    },
+  ],
+  howTo,
+  schemas: [faqSchema as any, howToSchema as any, appSchema],
+};

package/src/tool/baby-size-converter/index.ts

@@ -0,0 +1,53 @@
+import type { BabiesToolEntry, ToolDefinition, ToolLocaleContent } from '../../types';
+import BabySizeConverterComponent from './component.astro';
+import BabySizeConverterSEO from './seo.astro';
+import BabySizeConverterBibliography from './bibliography.astro';
+
+export interface BabySizeConverterUI {
+  [key: string]: string;
+  labelInput: string;
+  labelResults: string;
+  labelHeight: string;
+  labelWeight: string;
+  labelPresets: string;
+  unitMetric: string;
+  unitImperial: string;
+  labelCm: string;
+  labelKg: string;
+  labelIn: string;
+  labelLb: string;
+  labelBrandFit: string;
+  labelSuggested: string;
+  labelChest: string;
+  labelWaist: string;
+  labelGarmentMeasures: string;
+  fitRegular: string;
+  fitLarge: string;
+  fitSmall: string;
+  tipTitle: string;
+  tipText: string;
+  shareAriaLabel: string;
+  faqTitle: string;
+  bibliographyTitle: string;
+}
+
+export type BabySizeConverterLocaleContent = ToolLocaleContent<BabySizeConverterUI>;
+
+export const babySizeConverter: BabiesToolEntry<BabySizeConverterUI> = {
+  id: 'baby-size-converter',
+  icons: { bg: 'mdi:tshirt-crew', fg: 'mdi:tshirt-crew-outline' },
+  i18n: {
+    es: () => import('./i18n/es').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+  },
+};
+
+export { BabySizeConverterComponent, BabySizeConverterSEO, BabySizeConverterBibliography };
+
+export const BABY_SIZE_CONVERTER_TOOL: ToolDefinition = {
+  entry: babySizeConverter,
+  Component: BabySizeConverterComponent,
+  SEOComponent: BabySizeConverterSEO,
+  BibliographyComponent: BabySizeConverterBibliography,
+};

package/src/tool/baby-size-converter/logic.ts

@@ -0,0 +1,44 @@
+export interface BrandSize {
+  label: string;
+  age: number;
+  height: number;
+  weight: number;
+  chest: number;
+  waist: number;
+}
+
+export interface Brand {
+  id: string;
+  name: string;
+  fit: string;
+  sizes: BrandSize[];
+}
+
+export function findBestSize(brand: Brand, height: number, weight: number): BrandSize {
+  let best = brand.sizes[0]!;
+  let diff = Infinity;
+  brand.sizes.forEach((s) => {
+    const d = Math.abs(s.height - height) + Math.abs(s.weight - weight) * 8;
+    if (d < diff) {
+      diff = d;
+      best = s;
+    }
+  });
+  return best;
+}
+
+export function toImperialHeight(cm: number): string {
+  return (cm / 2.54).toFixed(1);
+}
+
+export function toImperialWeight(kg: number): string {
+  return (kg * 2.20462).toFixed(1);
+}
+
+export function buildShareUrl(height: number, weight: number, brandId: string): string {
+  const params = new URLSearchParams();
+  params.set('h', height.toString());
+  params.set('w', weight.toString());
+  params.set('b', brandId);
+  return `${window.location.pathname}?${params.toString()}`;
+}

package/src/tool/baby-size-converter/seo.astro

@@ -0,0 +1,36 @@
+---
+import {
+  SEOTitle, SEOStats, SEOTip, SEOTable,
+  SEOList, SEOSummary, SEOComparative, SEOGlossary, SEOArticle,
+} from '@jjlmoya/utils-shared';
+import { babySizeConverter } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props { locale?: KnownLocale; }
+const { locale = 'es' } = Astro.props;
+const content = await babySizeConverter.i18n[locale]?.();
+if (!content) return null;
+const { seo } = content;
+---
+<SEOArticle>
+  {seo.map((section: any) => {
+    switch (section.type) {
+      case 'summary':    return <SEOSummary title={section.title} items={section.items} />;
+      case 'title':      return <SEOTitle title={section.text} level={section.level || 2} />;
+      case 'paragraph':  return <p set:html={section.html} />;
+      case 'stats':      return <SEOStats stats={section.items} columns={section.columns} />;
+      case 'tip':        return <SEOTip><Fragment set:html={section.html} /></SEOTip>;
+      case 'table':      return (
+        <SEOTable headers={section.headers}>
+          {section.rows.map((row: string[]) => (
+            <tr>{row.map((cell: string) => <td set:html={cell} />)}</tr>
+          ))}
+        </SEOTable>
+      );
+      case 'list':       return <SEOList items={section.items} />;
+      case 'comparative': return <SEOComparative items={section.items} columns={section.columns} />;
+      case 'glossary':   return <SEOGlossary items={section.items} />;
+      default:           return null;
+    }
+  })}
+</SEOArticle>