desy-html 7.1.2 → 7.3.0

package/src/templates/includes/_acciones-de-cabecera.njk

@@ -0,0 +1,28 @@
+{% from "components/button/_macro.button.njk" import componentButton %}
+
+<nav aria-labelledby="acciones-de-cabecera">
+  <p class="sr-only" id="acciones-de-cabecera">Menú de acciones</p>
+  <ul class="flex flex-wrap flex-column-reverse lg:flex-row-reverse gap-sm lg:items-center lg:ml-auto lg:pl-base">
+    <li>
+      {{ componentButton({
+        "text": "Guardar y salir",
+        "href": "#",
+        "classes": "c-button--primary c-button--sm"
+      })  }}
+    </li>
+    <li>
+      {{ componentButton({
+        "text": "Guardar",
+        "href": "#",
+        "classes": "c-button--sm"
+      })  }}
+    </li>
+    <li>
+      {{ componentButton({
+        "text": "Salir",
+        "href": "#",
+        "classes": "c-button--sm"
+      })  }}
+    </li>
+  </ul>
+</nav>

package/src/templates/includes/_ejemplo-titulo-h2-parrafo.njk

@@ -0,0 +1,5 @@
+<div class="pb-lg"></div>
+<h2 class="c-h1">Título de página (h2)</h2>
+<p class="c-paragraph-base">
+  Aqui un ejemplo de párrafo explicativo de la página. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum, nobis quae amet esse! Accusamus, enim. Corrupti expedita officia perferendis quas dicta earum placeat voluptates, laudantium at, optio minus consequuntur pariatur.
+</p>

package/src/templates/includes/_ejemplo-titulo-parrafo.njk

@@ -0,0 +1,5 @@
+<div class="pb-lg"></div>
+<h1 class="c-h1">Título de página (h1)</h1>
+<p class="c-paragraph-base">
+  Aqui un ejemplo de párrafo explicativo de la página. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum, nobis quae amet esse! Accusamus, enim. Corrupti expedita officia perferendis quas dicta earum placeat voluptates, laudantium at, optio minus consequuntur pariatur.
+</p>

package/src/templates/includes/_loremipsum-large.njk

@@ -0,0 +1 @@
+<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta quia recusandae quibusdam cum nam quaerat, reprehenderit, doloribus excepturi odit praesentium dolorum at aut cumque eius ullam reiciendis! Aspernatur, vero, doloremque! Quaerat veniam velit totam atque voluptatum facilis cupiditate aperiam a harum, voluptate sapiente repellendus natus culpa ipsum illum earum libero nostrum debitis cumque. Nihil explicabo dolorem nulla illo architecto ipsam. Tenetur minima nihil doloremque praesentium ullam, odio animi quisquam eaque aperiam suscipit porro voluptate repellendus itaque laudantium! Molestiae quos quae error corrupti minima hic eveniet quod reiciendis, consectetur suscipit quidem. Distinctio, in, assumenda nulla debitis obcaecati temporibus fuga provident excepturi vel, beatae sit reprehenderit harum unde, accusamus quod ipsa blanditiis ea aperiam quasi inventore. Beatae earum pariatur, eius officia vitae! Dolores explicabo tenetur rem illo, odio! Sint temporibus, explicabo cupiditate voluptate ex, possimus magni quibusdam, molestiae porro quidem molestias sed! Nam sit, deserunt quisquam in! Eum, nemo id nostrum illo. Officia omnis amet, officiis quia tempora reprehenderit ipsam praesentium nam at eum soluta labore impedit cum distinctio quo placeat. Est architecto omnis ducimus perspiciatis rem accusamus illum voluptatibus voluptates distinctio. Explicabo sapiente iure laboriosam hic, dignissimos ducimus inventore quaerat reiciendis iusto, sit corporis modi quam eligendi eum asperiores nihil accusantium nostrum voluptatibus sint, doloremque officiis voluptate deleniti recusandae. Impedit, consequuntur. Iusto tempora minus cumque debitis beatae itaque, aliquam corrupti quia natus, voluptas eligendi, facere voluptatum quam. Excepturi voluptatem, iste numquam tenetur corporis, adipisci similique est mollitia, nobis inventore, nemo harum. Quia ex accusantium impedit architecto quidem optio laudantium facere dolorum, minima autem eum repellendus fuga ullam praesentium cupiditate neque fugit hic quae incidunt illum accusamus, rerum, quod. Atque, consectetur, aut? Quod, in. Corrupti voluptatem natus ipsum, sunt et accusantium aliquam eum quidem dolore sint explicabo nemo neque debitis dicta necessitatibus provident dolores corporis, ut suscipit. Perferendis quo quos fuga, praesentium! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta quia recusandae quibusdam cum nam quaerat, reprehenderit, doloribus excepturi odit praesentium dolorum at aut cumque eius ullam reiciendis! Aspernatur, vero, doloremque! Quaerat veniam velit totam atque voluptatum facilis cupiditate aperiam a harum, voluptate sapiente repellendus natus culpa ipsum illum earum libero nostrum debitis cumque. Nihil explicabo dolorem nulla illo architecto ipsam. Tenetur minima nihil doloremque praesentium ullam, odio animi quisquam eaque aperiam suscipit porro voluptate repellendus itaque laudantium! Molestiae quos quae error corrupti minima hic eveniet quod reiciendis, consectetur suscipit quidem. Distinctio, in, assumenda nulla debitis obcaecati temporibus fuga provident excepturi vel, beatae sit reprehenderit harum unde, accusamus quod ipsa blanditiis ea aperiam quasi inventore. Beatae earum pariatur, eius officia vitae! Dolores explicabo tenetur rem illo, odio! Sint temporibus, explicabo cupiditate voluptate ex, possimus magni quibusdam, molestiae porro quidem molestias sed! Nam sit, deserunt quisquam in! Eum, nemo id nostrum illo. Officia omnis amet, officiis quia tempora reprehenderit ipsam praesentium nam at eum soluta labore impedit cum distinctio quo placeat. Est architecto omnis ducimus perspiciatis rem accusamus illum voluptatibus voluptates distinctio. Explicabo sapiente iure laboriosam hic, dignissimos ducimus inventore quaerat reiciendis iusto, sit corporis modi quam eligendi eum asperiores nihil accusantium nostrum voluptatibus sint, doloremque officiis voluptate deleniti recusandae. Impedit, consequuntur. Iusto tempora minus cumque debitis beatae itaque, aliquam corrupti quia natus, voluptas eligendi, facere voluptatum quam. Excepturi voluptatem, iste numquam tenetur corporis, adipisci similique est mollitia, nobis inventore, nemo harum. Quia ex accusantium impedit architecto quidem optio laudantium facere dolorum, minima autem eum repellendus fuga ullam praesentium cupiditate neque fugit hic quae incidunt illum accusamus, rerum, quod. Atque, consectetur, aut? Quod, in. Corrupti voluptatem natus ipsum, sunt et accusantium aliquam eum quidem dolore sint explicabo nemo neque debitis dicta necessitatibus provident dolores corporis, ut suscipit. Perferendis quo quos fuga, praesentium!</p>

package/src/templates/includes/_test-include.njk

@@ -0,0 +1,14 @@
+{% from "components/test-component/_macro.test-component.njk" import componentTestComponent %}
+{% from "components/test-component-caller/_macro.test-component-caller.njk" import componentTestComponentCaller %}
+
+<div class="p-base border border-neutral-base">
+  <p>Este es un include de prueba</p>
+  {{ componentTestComponent({
+    "html": 'Este es <strong class="font-bold">un componente de prueba</strong>'
+  })  }}
+  {% call componentTestComponentCaller({
+    "html": 'Este es un componente <strong class="font-bold ">con caller</strong>'
+  })  %}
+      <div class="w-48 p-2"><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
+  {% endcall %}
+</div>

package/src/templates/pages/_page.foot-headroom.njk

@@ -0,0 +1,32 @@
+<!-- page.foot-headroom -->
+<script src="js/headroom.min.js"></script>
+<script>
+  const modules = document.querySelectorAll('[data-module]');
+  for (const item in modules) if (modules.hasOwnProperty(item)) {
+    const moduleValue = modules[item].getAttribute('data-module');
+
+    if (moduleValue == 'c-header'){
+      const options = {
+        // vertical offset in px before element is first unpinned
+        offset : 0,
+        // scroll tolerance in px before state changes
+        tolerance : {
+          up : 0,
+          down : 0
+        },
+        // callback when unpinned, `this` is headroom object
+        onUnpin : function() {
+          // oculta todos los dropdowns que hubiese abiertos en el header
+        }
+      };
+      const headroom = new Headroom(modules[item], options);
+      headroom.init();
+    }
+  }
+</script>
+<script src="js/popper.min.js"></script>
+<script src="js/tippy-bundle.umd.min.js"></script>
+<script type="module" src="js/index.js"></script>
+</body>
+</html>
+

package/src/templates/pages/_page.foot.njk

@@ -0,0 +1,7 @@
+<!-- page.foot -->
+<script src="js/popper.min.js"></script>
+<script src="js/tippy-bundle.umd.min.js"></script>
+<script type="module" src="js/index.js"></script>
+</body>
+</html>
+

package/src/templates/pages/_page.footer.njk

@@ -0,0 +1,20 @@
+<!-- page.footer -->
+{% from "components/footer/_macro.footer.njk" import componentFooter %}
+{{ componentFooter({
+  "meta": {
+    "visuallyHiddenTitle": "Enlaces a pie de página",
+    "items": [
+      {
+        "href": "pagina-accesibilidad.html",
+        "text": "Accesibilidad"
+      },
+      {
+        "href": "pagina-mapa-web.html",
+        "text": "Mapa web"
+      }
+    ],
+    "html": 'Creado por <a href="https://sda.aragon.es/" class="c-link c-link--neutral">SDA Servicios Digitales de Aragón</a>'
+  },
+  "classes": "mt-lg lg:mt-48"
+})  }}
+<!-- /page.footer -->

package/src/templates/pages/_page.head.njk

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{ title if title else "Project title" }}</title>
+  <link rel="icon" type="image/x-icon" href="https://aplicaciones.aragon.es/favicon.ico">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="css/styles.css">
+</head>
+<!-- /page.head -->

package/src/templates/pages/_page.notification-edit-inner-content.njk

@@ -0,0 +1,31 @@
+{% from "components/alert/_macro.alert.njk" import componentAlert %}
+{% from "components/notification/_macro.notification.njk" import componentNotification %}
+<!-- page.notification-edit-inner-content -->
+<section id="notification-inner-content-container" aria-labelledby="notification-inner-content-heading" class="sticky top-base z-10 lg:top-28 w-full" aria-hidden="true"> {# aria-hidden must dissapear when a notification appears #}{# top-28 depends on the fixed heading height #}
+  <h2 id="notification-inner-content-heading" class="sr-only">Avisos importantes en contenido central</h2>
+  {% call componentAlert({
+    "button": {
+      "text": "Mostrar notificación",
+      "classes": "hidden",
+      "attributes": {
+        "onclick": "openAlert('notification-inner-content', this)"
+      }
+    },
+    "id": "notification-inner-content",
+    "attributes": {
+      "role": "alert",
+      "aria-live": "assertive"
+    }
+  })  %}
+    {{ componentNotification({
+      "title": {
+        "text": "El documento se ha cargado correctamente"
+      },
+      "type": "success",
+      "id": "type-success",
+      "isDismissible": true,
+      "classes": "c-notification--success mb-base"
+    })  }}
+  {% endcall %}
+</section>
+<!-- /page.notification-edit-inner-content -->

package/src/templates/pages/_page.notification-edit.njk

@@ -0,0 +1,31 @@
+{% from "components/alert/_macro.alert.njk" import componentAlert %}
+{% from "components/notification/_macro.notification.njk" import componentNotification %}
+<!-- page.notification-edit -->
+<section id="notification-header-container" aria-labelledby="notification-header-heading" class="sticky top-base z-10 lg:top-28 w-full" aria-hidden="true"> {# aria-hidden must dissapear when a notification appears #}{# top-28 depends on the fixed heading height #}
+  <h2 id="notification-header-heading" class="sr-only">Avisos importantes</h2>
+  {% call componentAlert({
+    "button": {
+      "text": "Mostrar notificación",
+      "classes": "hidden",
+      "attributes": {
+        "onclick": "openAlert('notification-header', this)"
+      }
+    },
+    "id": "notification-header",
+    "attributes": {
+      "role": "alert",
+      "aria-live": "assertive"
+    }
+  })  %}
+    {{ componentNotification({
+      "title": {
+        "text": "El documento se ha cargado correctamente"
+      },
+      "type": "success",
+      "id": "type-success",
+      "isDismissible": true,
+      "classes": "c-notification--success mt-base"
+    })  }}
+  {% endcall %}
+</section>
+<!-- /page.notification-edit -->

package/src/templates/pages/_page.notification-footer.njk

@@ -0,0 +1,33 @@
+{% from "components/alert/_macro.alert.njk" import componentAlert %}
+{% from "components/notification/_macro.notification.njk" import componentNotification %}
+<!-- page.notification-footer -->
+<section id="notification-footer-container" aria-labelledby="notification-footer-heading" class="fixed z-10 inset-x-0 bottom-base w-full" aria-hidden="true">{# aria-hidden must dissapear when a notification appears #}
+  <div class="container mx-auto px-base">
+    <h2 id="notification-footer-heading" class="sr-only">Avisos importantes a pie de página</h2>
+    {% call componentAlert({
+      "button": {
+        "text": "Mostrar notificación",
+        "classes": "hidden",
+        "attributes": {
+          "onclick": "openAlert('notification-footer', this)"
+        }
+      },
+      "id": "notification-footer",
+      "attributes": {
+        "role": "alert",
+        "aria-live": "assertive"
+      }
+    })  %}
+      {{ componentNotification({
+        "title": {
+          "text": "El documento se ha cargado correctamente"
+        },
+        "type": "success",
+        "id": "type-success",
+        "isDismissible": true,
+        "classes": "c-notification--success"
+      })  }}
+    {% endcall %}
+  </div>
+</section>
+<!-- /page.notification-footer -->

package/src/templates/pages/_page.notification-header-fixed.njk

@@ -0,0 +1,31 @@
+{% from "components/alert/_macro.alert.njk" import componentAlert %}
+{% from "components/notification/_macro.notification.njk" import componentNotification %}
+<!-- page.notification-header-fixed -->
+<section id="notification-header-container" aria-labelledby="notification-header-heading" class="sticky z-10 top-base lg:top-2xl w-full" aria-hidden="true">{# aria-hidden must dissapear when a notification appears #}
+  <h2 id="notification-header-heading" class="sr-only">Avisos importantes</h2>
+  {% call componentAlert({
+    "button": {
+      "text": "Mostrar notificación",
+      "classes": "hidden",
+      "attributes": {
+        "onclick": "openAlert('notification-header', this)"
+      }
+    },
+    "id": "notification-header",
+    "attributes": {
+      "role": "alert",
+      "aria-live": "assertive"
+    }
+  })  %}
+    {{ componentNotification({
+      "title": {
+        "text": "El documento se ha cargado correctamente"
+      },
+      "type": "success",
+      "id": "type-success",
+      "isDismissible": true,
+      "classes": "c-notification--success mt-base"
+    })  }}
+  {% endcall %}
+</section>
+<!-- /page.notification-header-fixed -->

package/src/templates/pages/_page.notification-header.njk

@@ -0,0 +1,31 @@
+{% from "components/alert/_macro.alert.njk" import componentAlert %}
+{% from "components/notification/_macro.notification.njk" import componentNotification %}
+<!-- page.notification-header -->
+<section id="notification-header-container" aria-labelledby="notification-header-heading" class="sticky z-10 top-base w-full" aria-hidden="true">{# aria-hidden must dissapear when a notification appears #}
+  <h2 id="notification-header-heading" class="sr-only">Avisos importantes</h2>
+  {% call componentAlert({
+    "button": {
+      "text": "Mostrar notificación",
+      "classes": "hidden",
+      "attributes": {
+        "onclick": "openAlert('notification-header', this)"
+      }
+    },
+    "id": "notification-header",
+    "attributes": {
+      "role": "alert",
+      "aria-live": "assertive"
+    }
+  })  %}
+    {{ componentNotification({
+      "title": {
+        "text": "El documento se ha cargado correctamente"
+      },
+      "type": "success",
+      "id": "type-success",
+      "isDismissible": true,
+      "classes": "c-notification--success mt-base"
+    })  }}
+  {% endcall %}
+</section>
+<!-- /page.notification-header -->

package/src/templates/pages/_page.sidebar-content.njk

@@ -0,0 +1,21 @@
+<!-- page.sidebar-content -->
+<div class="grid grid-cols-2 lg:grid-cols-4 gap-xl">
+  <div class="col-span-2 lg:col-span-1">
+    <!-- sidebarBlock -->
+    {% block sidebarBlock %}
+    {% endblock %}
+    <!-- /sidebarBlock -->
+  </div>
+  <div class="col-span-2 lg:col-span-3">
+    <!-- notificationInnerContentBlock -->
+    {% block notificationInnerContentBlock %}
+      {% include "pages/_page.notification-edit-inner-content.njk" %}
+    {% endblock %}
+    <!-- /notificationInnerContentBlock -->
+    <!-- innerContentBlock -->
+    {% block innerContentBlock %}
+    {% endblock %}
+    <!-- /innerContentBlock -->
+  </div>
+</div>
+<!-- /page.sidebar-content -->

package/src/templates/pages/_page.spinner-block.njk

@@ -0,0 +1,15 @@
+{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
+<!-- page.spinner-block -->
+<div class="relative pb-2xl lg:pb-0">
+  <p>
+    {{ componentSpinner({
+      "text": "Espera por favor, el contenido principal de la página se está cargando",
+      "classes": "absolute inset-0 z-50 h-full pt-2xl text-4xl text-neutral-base",
+      "attributes": {
+        "id": spinnerId if spinnerId else "spinner-block"
+      }
+    })  }}
+  </p>
+  {# This spinner must be visible for 5 seconds. When new content is loaded, the text must change to "Se ha cargado la página _título de la página_"... After 5 seconds the spinner must dissapear #}
+</div>
+<!-- /page.spinner-block -->

package/src/templates/pages/_page.spinner-show.njk

@@ -0,0 +1,16 @@
+{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
+<!-- page.spinner-show -->
+<aside aria-labelledby="page-spinner">
+  <p>
+    {{ componentSpinner({
+      "text": "Espera por favor, el contenido principal de la página se está cargando",
+      "classes": "fixed inset-0 z-50 h-screen text-6xl text-neutral-base",
+      "attributes": {
+        "id": "page-spinner"
+      }
+    })  }}
+  </p>
+  {# This spinner must be visible for 5 seconds. When new content is loaded, the text must change to "Se ha cargado la página _título de la página_"... After 5 seconds the spinner must dissapear #}
+  {# Habría que validar una vez que se carga el contenido, qué anuncia el lector (si se ha previsto algún mensaje de “contenido principal cargado”) y qué elemento coge el foco (puesto que el usuario puede moverse por la página, no debería movérsele el foco). #}
+</aside>
+<!-- /page.spinner-show -->

package/src/templates/pages/_page.spinner.njk

@@ -0,0 +1,16 @@
+{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
+<!-- page.spinner -->
+<aside aria-labelledby="page-spinner" aria-hidden="true">
+  <p>
+    {{ componentSpinner({
+      "text": "Espera por favor, la página se está cargando",
+      "classes": "hidden fixed inset-0 z-50 h-screen text-6xl text-neutral-base",
+      "attributes": {
+        "id": "page-spinner"
+      }
+    })  }}
+  </p>
+  {# aria-hidden and .hidden must dissapear when showing the spinner in page #}{# When new content is loaded, the text must change to "Se ha cargado la página _título de la página_"... #}
+  {# Habría que validar una vez que se carga el contenido: qué anuncia el lector (si se ha previsto algún mensaje de "página cargada") y qué elemento coge el foco (puesto que se está cargando la página entera, lo esperable sería el primer elemento, esto es, el botón Ir al contenido principal). #}
+</aside>
+<!-- /page.spinner -->

package/src/templates/pages/_template.edit-fixed-with-sticky-sidebar.njk

@@ -0,0 +1,36 @@
+{% extends "pages/_template.edit-fixed.njk" %}
+
+{% from "components/skip-link/_macro.skip-link.njk" import componentSkipLink %}
+
+{% block headerSkipLinkBlock %}
+  <!-- headerSkipLinkBlock -->
+  {{ componentSkipLink({
+    "text": "Saltar al contenido principal",
+    "href": "#content-center"
+  })  }}
+  <!-- /headerSkipLinkBlock -->
+{% endblock %}
+
+{% block contentBlock %}
+  <!-- contentBlock -->
+  <div class="grid grid-cols-4 gap-x-lg">
+    <div class="sticky top-0 hidden lg:block lg:col-span-1 h-screen  lg:-mt-2xl lg:pt-24 pb-lg overflow-y-auto">
+      <!-- sidebarBlock -->
+      {% block sidebarBlock %}
+      {% endblock %}
+      <!-- /sidebarBlock -->
+    </div>
+    <section id="content-center" class="col-span-4 lg:col-span-3 py-base lg:-mt-2xl lg:pt-28 lg:pl-lg" aria-label="Contenido central">
+      <!-- notificationInnerContentBlock -->
+      {% block notificationInnerContentBlock %}
+        {% include "pages/_page.notification-edit-inner-content.njk" %}
+      {% endblock %}
+      <!-- /notificationInnerContentBlock -->
+      <!-- innerContentBlock -->
+      {% block innerContentBlock %}
+      {% endblock %}
+      <!-- /innerContentBlock -->
+    </section>
+  </div>
+  <!-- /contentBlock -->
+{% endblock %}

package/src/templates/pages/_template.edit-fixed.njk

@@ -0,0 +1,74 @@
+{% include "pages/_page.head.njk" %}
+
+{% from "components/button/_macro.button.njk" import componentButton %}
+{% from "components/skip-link/_macro.skip-link.njk" import componentSkipLink %}
+
+<body>
+  <!-- pageSpinnerBlock -->
+  {% block pageSpinnerBlock %}
+    {% include "pages/_page.spinner.njk" %}
+  {% endblock %}
+  <!-- /pageSpinnerBlock -->
+  <header class="lg:fixed lg:inset-x-0 lg:top-0 z-40 bg-white border-b border-neutral-base">
+    <div class="container mx-auto px-base ">
+      <!-- headerSkipLinkBlock -->
+      {% block headerSkipLinkBlock %}
+        {{ componentSkipLink({
+          "text": "Saltar al contenido principal",
+          "href": "#content"
+        })  }}
+      {% endblock %}
+      <!-- /headerSkipLinkBlock -->
+      <div class="lg:flex lg:flex-wrap lg:w-full py-base">
+        <div class="w-full">
+          <!-- headerNavigationEditBlock -->
+          {% block headerNavigationEditBlock %}
+          {% endblock %}
+          <!-- /headerNavigationEditBlock -->
+        </div>
+        <div class="flex-1 mb-base lg:mb-0">
+          <!-- headerTitleEditBlock -->
+          {% block headerTitleEditBlock %}
+            <h1 class="uppercase">
+              Editando item
+              <span class="c-h3 block mt-xs normal-case">Título del item editado (h1)</span>
+            </h1>
+          {% endblock %}
+          <!-- /headerTitleEditBlock -->
+        </div>
+        <!-- headerActionsEditBlock -->
+        {% block headerActionsEditBlock %}
+          {% include "includes/_acciones-de-cabecera.njk" %}
+        {% endblock %}
+        <!-- /headerActionsEditBlock -->
+      </div>
+    </div>
+  </header>
+  <main id="content" class="relative container mx-auto px-base">
+    <div class="lg:pb-2xl"></div> {# This is to push the content to avoid overlapping with he fixed header. Customize this according to the header height #}
+    <!-- notificationHeaderBlock -->
+    {% block notificationHeaderBlock %}
+      {% include "pages/_page.notification-edit.njk" %}
+    {% endblock %}
+    <!-- /notificationHeaderBlock -->
+    <!-- contentBlock -->
+    {% block contentBlock %}
+      {% include "pages/_page.spinner-block.njk" %}
+    {% endblock %}
+    <!-- /contentBlock -->
+    <!-- notificationFooterBlock -->
+    {% block notificationFooterBlock %}
+      {% include "pages/_page.notification-footer.njk" %}
+    {% endblock %}
+    <!-- /notificationFooterBlock -->
+  </main>
+  <!-- footerBlock -->
+  {% block footerBlock %}
+    {% include "pages/_page.footer.njk" %}
+  {% endblock %}
+  <!-- /footerBlock -->
+  <!-- modalBlock -->
+  {% block modalBlock %}
+  {% endblock %}
+  <!-- /modalBlock -->
+{% include "pages/_page.foot-headroom.njk" %}

package/src/templates/pages/_template.home.njk

@@ -0,0 +1,109 @@
+{% include "pages/_page.head.njk" %}
+
+{% from "components/header/_macro.header.njk" import componentHeader %}
+{% from "components/nav/_macro.nav.njk" import componentNav %}
+{% from "components/details/_macro.details.njk" import componentDetails %}
+<!-- template.home -->
+<body>
+  <!-- pageSpinnerBlock -->
+  {% block pageSpinnerBlock %}
+    {% include "pages/_page.spinner.njk" %}
+  {% endblock %}
+  <!-- /pageSpinnerBlock -->
+  <!-- headerBlock -->
+  {% block headerBlock %}
+    {% call componentHeader({
+      "homepageUrl": "index.html",
+      "mobileTitle": {
+        "text": "desy-html-starter"
+      },
+      "expandedLogo": true,
+      "navigation": {
+        "items": [
+          {
+            "href": "index.html",
+            "text": "Inicio",
+            "active": true
+          },
+          {
+            "href": "#plantillas",
+            "text": "Plantillas"
+          },
+          {
+            "href": "#spinners",
+            "text": "Spinners"
+          },
+          {
+            "href": "#paginas",
+            "text": "Páginas"
+          }
+          ]
+      },
+      "offcanvas": {
+        "text": "Menu",
+        "textClose": "Cerrar menu"
+      }
+    }) %}
+      <nav class="w-full p-2" aria-label="Menú móvil">
+        <h3 class="p-base text-base font-bold">Plantillas para desy-html</h3>
+        {{ componentNav({
+          "idPrefix": "nav-mobile-pages",
+          "hasNav": false,
+          "items": [
+            {
+              "href": "index.html",
+              "text": "Inicio",
+              "active": true
+            },
+            {
+              "href": "#plantillas",
+              "text": "Plantillas"
+            },
+            {
+              "href": "#spinners",
+              "text": "Spinners"
+            },
+            {
+              "href": "#paginas",
+              "text": "Páginas"
+            }
+          ],
+          "attributes": {
+            "aria-label": "Lista de páginas"
+          }
+        })  }}
+      </nav>
+    {% endcall %}
+  {% endblock %}
+  <!-- /headerBlock -->
+   <!-- subheaderBlock -->
+  {% block subheaderBlock %}
+  {% endblock %}
+  <!-- /subheaderBlock -->
+  <main id="content" class="relative container mx-auto px-base">
+    <!-- notificationHeaderBlock -->
+    {% block notificationHeaderBlock %}
+      {% include "pages/_page.notification-header.njk" %}
+    {% endblock %}
+    <!-- /notificationHeaderBlock -->
+    <!-- contentBlock -->
+    {% block contentBlock %}
+      {% include "pages/_page.spinner-block.njk" %}
+    {% endblock %}
+    <!-- /contentBlock -->
+    <!-- notificationFooterBlock -->
+    {% block notificationFooterBlock %}
+      {% include "pages/_page.notification-footer.njk" %}
+    {% endblock %}
+    <!-- /notificationFooterBlock -->
+  </main>
+  <!-- footerBlock -->
+  {% block footerBlock %}
+    {% include "pages/_page.footer.njk" %}
+  {% endblock %}
+  <!-- /footerBlock -->
+  <!-- modalBlock -->
+  {% block modalBlock %}
+  {% endblock %}
+  <!-- /modalBlock -->
+{% include "pages/_page.foot.njk" %}