desy-html 8.1.2 → 8.1.3

package/docs/_macro.example-render.njk

@@ -135,7 +135,7 @@ import componentTree %}
   {% for example in examples %}
     <div class="grid grid-cols-1 gap-x-xl mt-xl">
       <div class="pt-xl">
-        <h3 id="example-title-{{ loop.index }}" class="c-h3 group">{{ example.name | capitalize }} <a href="#{{ example.name | capitalize | urlencode }}" class="hidden font-semibold text-neutral-base underline group-hover:inline-block">#</a></h3>
+        <h3 id="example-title-{{ loop.index }}" class="c-h3 group">{{ example.name | capitalize }} <a href="#{{ example.name |filterslugify }}" class="hidden font-semibold text-neutral-base underline group-hover:inline-block">#</a></h3>
         <p class="c-paragraph-base mb-0">{{ example.description | safe }}</p>
       </div>
       <div class="pt-base lg:pt-lg">

package/docs/ds/_ds.macro.section-title.njk

@@ -1,3 +1,3 @@
 {% macro DSSectionTitle(params) %}
-<h2 id="{{ params.title | urlencode }}" class="c-h2 mb-xl pb-sm border-b group">{{params.title}} <a href="#{{ params.title | urlencode }}" class="hidden font-semibold text-neutral-base underline group-hover:inline-block">#</a></h2>
+<h2 id="{{ params.title | filterslugify }}" class="c-h2 mb-xl pb-sm border-b group">{{params.title}} <a href="#{{ params.title | filterslugify }}" class="hidden font-semibold text-neutral-base underline group-hover:inline-block">#</a></h2>
 {% endmacro %}

package/docs/ds/_ds.macro.subsection-title.njk

@@ -1,3 +1,3 @@
 {% macro DSSubsectionTitle(params) %}
-<h3 id="{{ params.title | urlencode }}" class="c-h3 mb-xl group">{{ params.title }} <a href="#{{ params.title | urlencode }}" class="hidden font-semibold text-neutral-base underline group-hover:inline-block">#</a></h3>
+<h3 id="{{ params.title | filterslugify }}" class="c-h3 mb-xl group">{{ params.title }} <a href="#{{ params.title | filterslugify }}" class="hidden font-semibold text-neutral-base underline group-hover:inline-block">#</a></h3>
 {% endmacro %}

package/docs/ds/_ds.section.layout.njk

@@ -59,6 +59,7 @@
         <li>una columna (100%)</li>
         <li>dos columnas (50% + 50%)</li>
       </ul>
+      <div class="pb-lg"></div>
     </div>
   </div>
   {{ showHtmlFromFile("ds/_ds.example.layout-movil.njk") }}

package/docs/index.html

@@ -37,6 +37,10 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.8.1.3</h3>
+  <ul class="text-sm">
+    <li>Fixed anchors in docs.</li>
+  </ul>
   <h3>v.8.1.2</h3>
   <ul class="text-sm">
     <li>Improvements in estilos page in docs.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "8.1.2",
+  "version": "8.1.3",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "author": {
     "name": "Desy (SDA Servicios Digitales de Aragón)",

package/src/js/filters/filter-slugify.js

@@ -0,0 +1,11 @@
+function filterSlugify(str) {
+  // Replace spaces with hyphens
+  let slug = str.replace(/\s+/g, '-');
+  // Remove special characters
+  slug = slug.replace(/[^\w-]+/g, '');
+  // Convert to lowercase
+  slug = slug.toLowerCase();
+  return slug;
+}
+
+module.exports = filterSlugify

package/src/js/filters/index.js

@@ -3,8 +3,10 @@
  */
 const highlight = require('./highlight')
 const filtercaller = require('./filter-caller')
+const filterslugify = require('./filter-slugify')
 
 module.exports = {
   highlight,
-  filtercaller
+  filtercaller,
+  filterslugify
 }