Show anchor links on headings

statiqdev · Jan 28, 2023 · 812ba29 · 812ba29
1 parent 15c8841
commit 812ba29
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/input/Shared/_ChildPages.cshtml b/input/Shared/_ChildPages.cshtml
@@ -5,7 +5,7 @@
         .ToDocumentList();
     @if (!Document.GetBool(SiteKeys.NoChildPages) && children.Count > 0)
     {
-        <h4 class="h-section mb-2">Child Pages</h4>
+        <h4 class="h-section mb-2 no-anchor">Child Pages</h4>
         @foreach (IDocument child in children)
         {
             <div>

diff --git a/input/Shared/_ChildPagesItem.cshtml b/input/Shared/_ChildPagesItem.cshtml
@@ -4,7 +4,7 @@
 @{
     string excerpt = Model.GetString(Keys.Excerpt);
     <div class="p-3 mb-2 bg-light page-box">
-        <h4>@Html.DocumentLink(Model)</h4>
+        <h4 class="no-anchor">@Html.DocumentLink(Model)</h4>
 
         @if (!string.IsNullOrEmpty(excerpt))
         {

diff --git a/input/_Layout.cshtml b/input/_Layout.cshtml
@@ -36,6 +36,7 @@
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-core.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/autoloader/prism-autoloader.min.js" data-no-mirror></script>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/anchor.min.js"></script>
 
         <!-- Lunr search -->
         @if (Context.GetBool(WebKeys.GenerateSearchIndex))
@@ -233,6 +234,9 @@
 
         <!-- Scripts -->
         <script>
+            // Should run before document.ready. See https://github.com/bryanbraun/anchorjs/issues/69#issuecomment-255503575
+            anchors.add('#content h1:not(.no-anchor), #content h2:not(.no-anchor), #content h3:not(.no-anchor), #content h4:not(.no-anchor)');
+
             $(document).ready(function() {
                 quicklink.listen();
 

diff --git a/input/assets/css/theme.scss b/input/assets/css/theme.scss
@@ -436,6 +436,17 @@ code, code[class*="language-"], pre[class*="language-"] {
     }
 }
 
+/* Anchors */
+
+.anchorjs-link {
+    color: $gray-400;
+
+    &:hover {
+        color: $gray-400;
+        text-decoration: none;
+    }    
+}
+
 /* Mermaid */
 .mermaid {
     overflow: hidden !important;