feat: add id anchors on composition blocks titles

gbif · Jun 22, 2022 · 73e3928 · 73e3928
1 parent 1808c07
commit 73e3928
Show file tree

Hide file tree

Showing 11 changed files with 24 additions and 16 deletions.
diff --git a/app/nunjucks/filters.js b/app/nunjucks/filters.js
@@ -17,15 +17,9 @@ let md = require('markdown-it')({html: true, linkify: true, typographer: false,
     md.use(require('markdown-it-imsize'), {autofill: false});
 
     // adding anchor headers to markdown would be nice, but the problem is the navbar offset
-    // md.use(require('markdown-it-anchor'), {
-    //    level: 1,
-    //    slugify: function(str){return '_' + format.getSlug(str)},
-    //    permalink: true,
-    //    // renderPermalink: (slug, opts, state, permalink) => {},
-    //    permalinkClass: 'gb-icon-link header-anchor inherit noUnderline',
-    //    permalinkSymbol: '',
-    //    permalinkBefore: false
-    // });
+    md.use(require('markdown-it-anchor'), {
+       slugify: function(str){return '_' + encodeURIComponent(format.getSlug(str))},
+    });
 
 module.exports = function(nunjucksConfiguration) {
     (function() {
@@ -122,6 +116,10 @@ module.exports = function(nunjucksConfiguration) {
         nunjucksConfiguration.addFilter('toCamelCase', format.toCamelCase);
     })();
 
+    (function() {
+        nunjucksConfiguration.addFilter('slug', format.getSlug);
+    })();
+
     (function() {
         nunjucksConfiguration.addFilter('constantCase', changeCase.constantCase);
     })();

diff --git a/app/views/pages/resource/blocks/carousel/carousel.nunjucks b/app/views/pages/resource/blocks/carousel/carousel.nunjucks
@@ -2,7 +2,7 @@
   <div class="container--desktop">
     <div class="block_carousel" dir="auto">
       {% if main.fields.title and not main.fields.hideTitle %}
-      <h2 class="block__header">{$ main.fields.title | renderMarkdownCustom(["i", "a"], ["name"]) | sanitizeTrusted(gb.locales.urlPrefix) | addPortalClasses | safe $}</h2>
+      <h2 class="block__header" id="_{$ main.fields.title | slug() $}">{$ main.fields.title | renderMarkdownCustom(["i", "a"], ["name"]) | sanitizeTrusted(gb.locales.urlPrefix) | addPortalClasses | safe $}</h2>
       {% endif %}
       {% if main.fields.body %}
       <div class="block__description">

diff --git a/app/views/pages/resource/blocks/featuredTextBlock/featuredTextBlock.nunjucks b/app/views/pages/resource/blocks/featuredTextBlock/featuredTextBlock.nunjucks
@@ -4,7 +4,7 @@
   <div class="container--desktop">
     <div class="featured_text_block {% if main.fields.reverse %} block-reverse{% endif %}">
       {% if main.fields.title and not main.fields.hideTitle %}
-      <h2 class="block__header" dir="auto">{$ main.fields.title | renderMarkdownCustom(["i", "a"], ["name"]) | sanitizeTrusted(gb.locales.urlPrefix) | addPortalClasses | safe $}</h2>
+      <h2 class="block__header" dir="auto" id="_{$ main.fields.title | slug() $}">{$ main.fields.title | renderMarkdownCustom(["i", "a"], ["name"]) | sanitizeTrusted(gb.locales.urlPrefix) | addPortalClasses | safe $}</h2>
       {% endif %}
       <div class="container--narrow">
         <div class="featured_text_block__content">

diff --git a/app/views/pages/resource/blocks/features.nunjucks b/app/views/pages/resource/blocks/features.nunjucks
@@ -1,5 +1,5 @@
 <section class="home">
-  <h4 class="card-header">{$ main.fields.title | renderMarkdownCustom(["i", "a"], ["name"]) $}</h4>
+  <h4 class="card-header" id="_{$ main.fields.title | slug() $}">{$ main.fields.title | renderMarkdownCustom(["i", "a"], ["name"]) $}</h4>
   <div class="featureBlock">
     {% for featureRef in main.fields.features %}
       {% set feature = resolved.Entry[featureRef.sys.id].fields %}

diff --git a/app/views/pages/resource/blocks/features/features.nunjucks b/app/views/pages/resource/blocks/features/features.nunjucks
@@ -2,7 +2,7 @@
   <div class="container--desktop">
     <div class="block_features">
       {% if main.fields.title and not main.fields.hideTitle %}
-      <h2 class="block__header">{$ main.fields.title | renderMarkdownCustom(["i", "a"], ["name"]) | sanitizeTrusted(gb.locales.urlPrefix) | addPortalClasses | safe $}</h2>
+      <h2 class="block__header" id="_{$ main.fields.title | slug() $}">{$ main.fields.title | renderMarkdownCustom(["i", "a"], ["name"]) | sanitizeTrusted(gb.locales.urlPrefix) | addPortalClasses | safe $}</h2>
       {% endif %}
       {% if main.fields.body %}
       <div class="block__description">

diff --git a/app/views/pages/resource/blocks/media/media.nunjucks b/app/views/pages/resource/blocks/media/media.nunjucks
@@ -4,7 +4,7 @@
   <div class="container--desktop">
     <article class="block_media {% if main.fields.reverse %} block-reverse{% endif %}">
       {% if main.fields.title and not main.fields.hideTitle %}
-      <h2 class="block__header" dir="auto">{$ main.fields.title | renderMarkdownCustom(["i", "a"], ["name"]) | sanitizeTrusted(gb.locales.urlPrefix) | addPortalClasses | safe $}</h2>
+      <h2 class="block__header" dir="auto" id="_{$ main.fields.title | slug() $}">{$ main.fields.title | renderMarkdownCustom(["i", "a"], ["name"]) | sanitizeTrusted(gb.locales.urlPrefix) | addPortalClasses | safe $}</h2>
       {% endif %}
       <div class="block_media__content">
         <div class="block_media__mediaArea {% if main.fields.roundImage %} block__imageArea--rounded {% endif %}">

diff --git a/app/views/pages/resource/key/composition/blocks/header.nunjucks b/app/views/pages/resource/key/composition/blocks/header.nunjucks
@@ -2,7 +2,7 @@
   <div class="article-header">
     <header class="text-center">
       {% if not main.fields.hideTitle %}
-      <h1 dir="auto">{$ main.fields.title | renderMarkdownCustom(["i", "a"], ["name"]) $}</h1>
+      <h1 dir="auto" id="_{$ main.fields.title | slug() $}">{$ main.fields.title | renderMarkdownCustom(["i", "a"], ["name"]) $}</h1>
       {% endif %}
       <div class="article-header__intro m-b-2" dir="auto">
           {$ main.fields.summary | renderMarkdown | sanitizeTrusted(gb.locales.urlPrefix) | addPortalClasses | safe $}

diff --git a/app/views/pages/resource/key/composition/blocks/text.nunjucks b/app/views/pages/resource/key/composition/blocks/text.nunjucks
@@ -1,7 +1,7 @@
 <div class="horizontal-stripe {$ main.fields.backgroundColour | default("white") $}-background">
     <div class="container--narrow">
         {% if main.fields.title and not main.fields.hideTitle %}
-        <h2>{$ main.fields.title | renderMarkdownCustom(["i", "a"], ["name"]) $}</h2>
+        <h2 id="_{$ main.fields.title | slug() $}">{$ main.fields.title | renderMarkdownCustom(["i", "a"], ["name"]) $}</h2>
         {% endif %}
         {% include "../../body.nunjucks" %}
     </div>

diff --git a/app/views/shared/layout/html/html.styl b/app/views/shared/layout/html/html.styl
@@ -152,3 +152,7 @@ ul, ol {
 //    clip rect(0, 0, 0, 0)
 //    border 0
 //}
+
+:target { 
+    scroll-margin-top: 70px;
+}
diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
diff --git a/package.json b/package.json
@@ -136,6 +136,7 @@
     "lost": "^6.6.3",
     "lunr": "^2.1.6",
     "markdown-it": "^8.0.0",
+    "markdown-it-anchor": "^8.6.4",
     "markdown-it-imsize": "^2.0.1",
     "markdown-it-video": "^0.6.3",
     "marked": "^0.3.16",