Merge branch 'release-0.9.3'

README.md

@@ -4,6 +4,10 @@ The Techdoc is a Hugo Theme for technical documentation.
 
 ![The Techdoc screenshot](https://raw.githubusercontent.com/thingsym/hugo-theme-techdoc/master/images/screenshot.png)
 
+- Hugo Themes page: [https://themes.gohugo.io/hugo-theme-techdoc/](https://themes.gohugo.io/hugo-theme-techdoc/)
+- Demo site: [https://themes.gohugo.io/theme/hugo-theme-techdoc/](https://themes.gohugo.io/theme/hugo-theme-techdoc/)
+- Download: [https://github.com/thingsym/hugo-theme-techdoc](https://github.com/thingsym/hugo-theme-techdoc)
+
 ## Features
 
 * Modern, Simple layout
@@ -12,6 +16,7 @@ The Techdoc is a Hugo Theme for technical documentation.
 * Table Of Contents for the page (selective)
 * Theme color
 * Edit link to documentation repository
+* Header link to HTML headings
 * Custom Shortcodes
 * Search Shortcode powered by [Algolia](https://www.algolia.com/)
 * Open Graph
@@ -119,16 +124,17 @@ tree .
 │   │   ├── list.html
 │   │   └── single.html
 │   └── shortcodes
-│       ├── button.html
-│       └── panel.html
-│       └── search.html
+│       ├── button.html
+│       ├── panel.html
+│       └── search.html
 ├── LICENSE.md
 ├── package.json
 ├── package-lock.json
 ├── README.md
 ├── resources
 ├── src
 │   ├── js
+│   │   ├── headerlink.js
 │   │   ├── jquery.backtothetop
 │   │   │   ├── jquery.backtothetop.js
 │   │   │   └── jquery.backtothetop.min.js
@@ -215,6 +221,10 @@ Small patches and bug reports can be submitted a issue tracker in Github. Forkin
 
 ## Changelog
 
+* Version 0.9.3 - 2020.08.02
+  * remove jQuery dependency with keydown nav
+  * add header link
+
 * Version 0.9.2 - 2020.06.14
   * add note and sample to document
   * fix tableOfContents endLevel
@@ -301,4 +311,4 @@ Techdoc bundles the following third-party resources:
 
 [thingsym](https://github.com/thingsym)
 
-Copyright (c) 2017-2020 by thingsym
+Copyright (c) 2017-2020 by [thingsym](https://management.thingslabo.com/)

exampleSite/config.toml

@@ -17,7 +17,7 @@ enableMissingTranslationPlaceholders = false
     # Source Code repository section
     description = "put your description"
     github_repository = "https://github.com/thingsym/hugo-theme-techdoc"
-    version = "0.9.2"
+    version = "0.9.3"
 
     # Documentation repository section
     # documentation repository (set edit link to documentation repository)

exampleSite/content/getting-started/configuration.md

@@ -15,7 +15,7 @@ For an example of `config.toml`, see [config.toml](https://github.com/thingsym/h
     # Source Code repository section
     description = "put your description"
     github_repository = "https://github.com/thingsym/hugo-theme-techdoc"
-    version = "0.9.2"
+    version = "0.9.3"
 
     # Documentation repository section
     # documentation repository (set edit link to documentation repository)
@@ -80,7 +80,7 @@ default: `https://github.com/thingsym/hugo-theme-techdoc`
 
 The version of souce code
 
-default: `0.9.2`
+default: `0.9.3`
 
 #### `github_doc_repository`
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hugo-theme-techdoc",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "The Techdoc is a Hugo Theme for technical documentation.",
   "main": "gulpfile.js",
   "author": "Thingsym",

src/js/headerlink.js

@@ -0,0 +1,22 @@
+(function() {
+  document.addEventListener('DOMContentLoaded', function(){
+    const targetElements = document.querySelector('main').querySelectorAll('h1, h2, h3, h4, h5, h6');
+
+    targetElements.forEach(( el ) => {
+      if (el.id) {
+        const headerlink = document.createElement('a');
+        headerlink.setAttribute('class', 'headerlink');
+        headerlink.setAttribute('href', '#' + el.id);
+        headerlink.setAttribute('title', 'Permalink to this headline');
+
+        const icon = document.createElement('i');
+        icon.setAttribute('class', 'fas fa-hashtag');
+        icon.setAttribute('aria-hidden', 'true');
+
+        headerlink.append(icon);
+
+        el.append(headerlink);
+      }
+    });
+  });
+})();

src/js/keydown-nav.js

@@ -1,22 +1,18 @@
-(function($) {
-  $(document).ready(function() {
-    $('.nav-prev').on( 'click', function() {
-      location.href = $(this).attr('href');
-    });
-    $('.nav-next').on('click', function() {
-      location.href = $(this).attr('href');
-    });
+(function() {
+  document.addEventListener('DOMContentLoaded', function(){
+    const nav_prev = document.querySelector('.nav-prev');
+    const nav_next = document.querySelector('.nav-next');
 
-    $(document).on( 'keydown', function(e) {
-      // prev links - left arrow key
-      if(e.which == '37') {
-        $('.nav-prev').click();
+    // prev links - left arrow key
+    document.addEventListener( 'keydown', event => {
+      if (nav_prev && event.keyCode === 37) {
+        location.href = nav_prev.getAttribute('href');
       }
 
       // next links - right arrow key
-      if(e.which == '39') {
-        $('.nav-next').click();
+      if (nav_next && event.keyCode === 39) {
+        location.href = nav_next.getAttribute('href');
       }
     });
   });
-})(jQuery);
+})();

src/js/main.js

@@ -1,3 +1,4 @@
 require( './sidebar-menu.js' );
 require( './keydown-nav.js' );
 require( './jquery.backtothetop/jquery.backtothetop.min.js' );
+require( './headerlink.js' );

src/scss/_component.scss

@@ -191,6 +191,11 @@ figure > figcaption h4 {
 
 }
 
+.headerlink > .svg-inline--fa {
+	margin-left: .4rem;
+	width: .8rem;
+}
+
 .ais-SearchBox {
 	.ais-SearchBox-input {
 		width: 70%;

static/css/theme.css

@@ -938,6 +938,11 @@ figure > figcaption h4 {
   margin-left: 10rem;
 }
 
+.headerlink > .svg-inline--fa {
+  margin-left: .4rem;
+  width: .8rem;
+}
+
 .ais-SearchBox .ais-SearchBox-input {
   width: 70%;
 }