From 73e39288ce8a32e06d1cf6d2a4c7f95d614fb12d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Morten=20H=C3=B8fft?=
 <6759267+MortenHofft@users.noreply.github.com>
Date: Wed, 22 Jun 2022 10:15:56 +0200
Subject: [PATCH] feat: add id anchors on composition blocks titles

---
 app/nunjucks/filters.js                          | 16 +++++++---------
 .../resource/blocks/carousel/carousel.nunjucks   |  2 +-
 .../featuredTextBlock/featuredTextBlock.nunjucks |  2 +-
 .../pages/resource/blocks/features.nunjucks      |  2 +-
 .../resource/blocks/features/features.nunjucks   |  2 +-
 .../pages/resource/blocks/media/media.nunjucks   |  2 +-
 .../key/composition/blocks/header.nunjucks       |  2 +-
 .../key/composition/blocks/text.nunjucks         |  2 +-
 app/views/shared/layout/html/html.styl           |  4 ++++
 npm-shrinkwrap.json                              |  5 +++++
 package.json                                     |  1 +
 11 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/app/nunjucks/filters.js b/app/nunjucks/filters.js
index 942d24ed9d..fffb61e9fc 100644
--- 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
index 442cf0e86c..60110d70bd 100644
--- 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
index bc87326095..4323e9d0ee 100644
--- 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
index 2574c09c50..da4cb0fe8d 100644
--- 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
index e494c6dcd5..315080b42f 100644
--- 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
index ab371799df..ff182a34a3 100644
--- 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
index 52ec71c6bf..aa2277c834 100644
--- 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
index ba184e39b2..6213bf9583 100644
--- 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
index fed7543623..f0063da5d7 100644
--- 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;
+}
\ No newline at end of file
diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index 1fa2ee0098..00759e7de7 100644
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@@ -13463,6 +13463,11 @@
         "uc.micro": "^1.0.3"
       }
     },
+    "markdown-it-anchor": {
+      "version": "8.6.4",
+      "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-8.6.4.tgz",
+      "integrity": "sha512-Ul4YVYZNxMJYALpKtu+ZRdrryYt/GlQ5CK+4l1bp/gWXOG2QWElt6AqF3Mih/wfUKdZbNAZVXGR73/n6U/8img=="
+    },
     "markdown-it-imsize": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/markdown-it-imsize/-/markdown-it-imsize-2.0.1.tgz",
diff --git a/package.json b/package.json
index 80afc92c31..978dd063f2 100644
--- 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",