Merge pull request #2 from xoxys/add-anchor-position

Add anchor position

CHANGELOG.md

@@ -1,2 +1,2 @@
 * FEATURE
-  * Add anchor links for headlines
+  * Add option to move anchor links to the left site of headlines

exampleSite/content/shortcodes/toc.md

@@ -8,10 +8,22 @@ Simple wrapper to generate a page Table of Content from a shortcode.
 
 ## Level 1
 
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+
 ## Level 2
 
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
+
 ### Level 2.1
 
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
+
+#### Level 2.1.1
+
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
+
 ### Level 2.2
 
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
 
+no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

exampleSite/content/usage/configuration.md

@@ -52,6 +52,9 @@
 
   # (Optional, default true) Add an anchor link to headlines.
   geekdocAnchor = true
+
+  # (Optional, default false) Move anchor link to the left side of headlines.
+  geekdocAnchorLeft = false
 ```
 
 {{< /tab >}}
@@ -107,6 +110,9 @@ params:
 
   # (Optional, default true) Add an anchor link to headlines.
   geekdocAnchor: true
+
+  # (Optional, default false) Move anchor link to the left side of headlines.
+  geekdocAnchorLeft: false
 ```
 
 {{< /tab >}}

layouts/partials/content.html

@@ -1,8 +1,11 @@
 {{ $showAnchor := (and (default true .Page.Params.GeekdocAnchor) (default true .Site.Params.GeekdocAnchor)) }}
+{{ $anchorLeft := (default false .Site.Params.GeekdocAnchorLeft) }}
 
 {{ $.Scratch.Set "content" (.Content | replaceRE `<nav id="TableOfContents">\s*<ul>\s*<li>\s*<ul>` `<nav id="TableOfContents"><ul>` | replaceRE `</ul>\s*</li>\s*</ul>\s*</nav>` `</ul></nav>` | safeHTML) }}
-{{ if $showAnchor }}
-    {{ $.Scratch.Set "content" ($.Scratch.Get "content" | replaceRE "(<h[2-9] id=\"([^\"]+)\".+)(</h[2-9]+>)" `${1}&nbsp;<a class="gdoc-page__anchor" href="#${2}"><svg class="icon link"><use xlink:href="#link"></use></svg></a> ${3}</h>` | safeHTML) }}
+{{ if and $showAnchor $anchorLeft }}
+    {{ $.Scratch.Set "content" ($.Scratch.Get "content" | replaceRE "(<h[2-9] id=\"([^\"]+)\"[^>]*>)(.*?)(</h[2-9]+>)" `${1}<a class="gdoc-page__anchor gdoc-page__anchor--left" href="#${2}"><svg class="icon link"><use xlink:href="#link"></use></svg></a>${3}${4}` | safeHTML) }}
+{{ else if and $showAnchor (not $anchorLeft) }}
+    {{ $.Scratch.Set "content" ($.Scratch.Get "content" | replaceRE "(<h[2-9] id=\"([^\"]+)\"[^>]*>)(.*?)(</h[2-9]+>)" `${1}${3}<a class="gdoc-page__anchor gdoc-page__anchor--right" href="#${2}"><svg class="icon link"><use xlink:href="#link"></use></svg></a>${4}` | safeHTML) }}
 {{ end }}
 
 {{ $.Scratch.Get "content" }}

src/sass/_base.scss

@@ -222,9 +222,20 @@ img {
     }
   }
 
-  &__anchor .icon {
+  &__anchor{
+    &--left {
+      min-width: 35px;
+      text-align: left;
+    }
+
+    &--right {
+      margin-left: 0.5em;
+    }
+
+    .icon {
       color: $gray-400;
     }
+  }
 }
 
 .gdoc-post {