desy-html 16.0.4 → 17.0.0

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

@@ -1,16 +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>
+{% 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

@@ -1,36 +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 %}
+{% 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

@@ -1,74 +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" %}
+{% 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

@@ -1,112 +1,112 @@
-{% 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({,
-      "skipLink": {
-        "href": "#content"
-      },
-      "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.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({,
+      "skipLink": {
+        "href": "#content"
+      },
+      "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" %}

package/src/templates/pages/_template.logged-out.njk

@@ -1,56 +1,56 @@
-{% 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.logged-out -->
-<body>
-  <!-- pageSpinnerBlock -->
-  {% block pageSpinnerBlock %}
-    {% include "pages/_page.spinner.njk" %}
-  {% endblock %}
-  <!-- /pageSpinnerBlock -->
-  <!-- headerBlock -->
-  {% block headerBlock %}
-    {{ componentHeader({
-      "homepageUrl": "index.html",
-      "expandedLogo": true,
-      "classes": "relative z-40",
-      "skipLink": {
-        "href": "#content"
-      }
-    }) }}
-  {% 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" %}
+{% 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.logged-out -->
+<body>
+  <!-- pageSpinnerBlock -->
+  {% block pageSpinnerBlock %}
+    {% include "pages/_page.spinner.njk" %}
+  {% endblock %}
+  <!-- /pageSpinnerBlock -->
+  <!-- headerBlock -->
+  {% block headerBlock %}
+    {{ componentHeader({
+      "homepageUrl": "index.html",
+      "expandedLogo": true,
+      "classes": "relative z-40",
+      "skipLink": {
+        "href": "#content"
+      }
+    }) }}
+  {% 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" %}