Re-add jump link stuff

Access4all · Jun 18, 2018 · a5af5c7 · a5af5c7
1 parent 700a081
commit a5af5c7
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git a/gulp/helpers/markdown.js b/gulp/helpers/markdown.js
@@ -101,6 +101,21 @@ module.exports = rootDir => filePath => {
 
         tokens[idx].attrSet('title', metaTitle)
       })
+      .use(() => {
+        // Add the #main-h1 ID to each page's main heading.
+        markdown.core.ruler.push('manipulate_main_heading', state => {
+          var isMainHeading = true
+
+          state.tokens.forEach(token => {
+            if (['heading_open'].includes(token.type)) {
+              if (token.tag == 'h1' && isMainHeading) {
+                token.attrSet('id', 'main-h1')
+                isMainHeading = false
+              }
+            }
+          })
+        })
+      })
       // .use(() => {
       //   // Currently unused: Increase heading levels by 1
       //   markdown.core.ruler.push('increase_heading_level', state => {

diff --git a/src/assets/css/_layout.scss b/src/assets/css/_layout.scss
@@ -74,3 +74,18 @@ html {
 		}
 	}
 }
+
+#jump {
+  position: absolute;
+  z-index: -1;
+  font-weight: 500;
+  border: 1px solid var(--theme-color-dark);
+  background-color: var(--theme-color-light);
+  color: var(--theme-color-ark);
+  padding: 10px;
+
+  &:focus {
+    z-index: 2;
+    outline: none;
+  }
+}
diff --git a/src/templates/layout.hbs b/src/templates/layout.hbs
@@ -37,10 +37,7 @@
 <body class="js-theme theme{{#if section }} theme-{{section}}{{/if}}">
   <div id="body">
     <div id="main">
-      <!-- <header class="header" id="header">
-        <div class="l-site_width">
-          <h1 class="visuallyhidden">Header</h1>
-        </div> -->
+      <a id="jump" href="#main-h1">Jump to content</a>
       </header>
       {{> "global/navbar/navbar"}}
       {{> "global/search/search"}}