Improve anchor in title and refItem

Author: Ndpnt

themes/opentermsarchive/assets/css/components/refItem.css

@@ -6,6 +6,14 @@
   box-shadow: inset 0 1px var(--colorBlack200);
 }
 
+.refItem-name {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color:inherit
+}
+
 .refItem-name code {
   font-weight: 600;
   overflow-y: auto;
@@ -27,6 +35,26 @@
   font-weight: 400;
 }
 
+.refItem-anchor-icon {
+  opacity: 0;
+  color: var(--colorBlack600);
+  text-decoration: none;
+  transition: opacity 0.1s ease;
+}
+
+.refItem-name:hover .refItem-anchor-icon {
+  opacity: 1;
+}
+
+.refItem-anchor-icon:hover {
+  color: var(--colorBlack800);
+}
+
+.refItem-anchor-icon {
+  width: 1em;
+  height: 1em;
+}
+
 .refItem-details {
   display: flex;
 }

themes/opentermsarchive/assets/css/elements/syntax.css

@@ -1,5 +1,5 @@
-/* Background */ .bg { background-color: var(--colorBlack200); }
-/* PreWrapper */ .chroma { background-color: var(--colorBlack200); font-size: 1.4rem; }
+/* Background */ .bg { background-color: var(--colorBlack100); border-radius: 0.2em; }
+/* PreWrapper */ .chroma { background-color: var(--colorBlack100); font-size: 1.4rem; border-radius: 0.2em;}
 /* Other */ .chroma .x {  }
 /* Error */ .chroma .err { color: var(--colorError); }
 /* CodeLine */ .chroma .cl {  }
@@ -72,11 +72,11 @@
 /* CommentPreproc */ .chroma .cp { color: #67707b; font-style: italic }
 /* CommentPreprocFile */ .chroma .cpf { color: #67707b; font-style: italic }
 /* Generic */ .chroma .g {  }
-/* GenericDeleted */ .chroma .gd {  }
+/* GenericDeleted */ .chroma .gd { background-color: rgb(255, 206, 203); }
 /* GenericEmph */ .chroma .ge {  }
 /* GenericError */ .chroma .gr {  }
 /* GenericHeading */ .chroma .gh {  }
-/* GenericInserted */ .chroma .gi {  }
+/* GenericInserted */ .chroma .gi { background-color:  rgb(172, 238, 187); }
 /* GenericOutput */ .chroma .go {  }
 /* GenericPrompt */ .chroma .gp {  }
 /* GenericStrong */ .chroma .gs {  }

themes/opentermsarchive/assets/css/elements/titles.css

@@ -120,17 +120,26 @@ h6,
   line-height: 1.25;
 }
 
+.title-link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.title-link:hover {
+  color: inherit;
+}
+
 .title-anchor {
-  color: var(--colorBlack400);
   font-size: 0.8em;
   font-weight: normal;
-  display: none;
+  opacity: 0;
+  transition: opacity 0.1s ease;
 }
 
 h2, h3, h4, h5, h6 {
-  &:hover {
-    a.title-anchor {
-      display: inline;
+  .title-link:hover {
+    .title-anchor {
+      opacity: 1;
     }
   }
 }

themes/opentermsarchive/assets/js/icons.js

@@ -1,14 +1,15 @@
 import {
   ChevronDown,
   X,
-
+  Link,
   createIcons,
 } from 'lucide';
 
 createIcons({
   icons: {
     X,
     ChevronDown,
+    Link,
   },
   attrs: { 'aria-hidden': true },
 });

themes/opentermsarchive/layouts/_default/_markup/render-heading.html

@@ -1,6 +1,12 @@
 <h{{ .Level }} id="{{ .Anchor }}">
+  {{ if ne .Level 1 }}
+  <a class="title-link" href="#{{ .Anchor }}">
+  {{ end }}
   {{ .Text | safeHTML }}
   {{ if ne .Level 1 }}
-    <a class="title-anchor" href="#{{ .Anchor }}">🔗</a>
+    <i class="title-anchor icon" data-lucide="link"></i>
+  </a>
   {{ end }}
+
+  
 </h{{ .Level }}>

themes/opentermsarchive/layouts/shortcodes/refItem.html

@@ -7,15 +7,17 @@
 {{/* Get description either from attribute or nested content */}}
 {{ $description := .Get "description" }}
 {{ $example := .Get "example" }}
+{{ $anchorID := $name | lower | replaceRE "[^a-z0-9-]" "-" | replaceRE "-+" "-" | replaceRE "^-" "" | replaceRE "-$" "" }}
 
-<div class="refItem">
-  <div class="refItem-name">
-    <code>{{ $name }}</code>
-    <span class="refItem-type">{{ $type }}</span>
-    {{ with $required }}
-      <span class="refItem-required">{{ if eq . true }}required{{ else }}{{ . | markdownify }}{{ end }}</span>
-    {{ end }}
-  </div>
+<div class="refItem" id="ref-{{ $anchorID }}">
+  <a href="#ref-{{ $anchorID }}"  class="refItem-name">
+      <code>{{ $name }}</code>
+      <span class="refItem-type">{{ $type }}</span>
+      {{ with $required }}
+        <span class="refItem-required">{{ if eq . true }}required{{ else }}{{ . | markdownify }}{{ end }}</span>
+      {{ end }}
+      <i class="refItem-anchor-icon icon" data-lucide="link"></i>
+  </a>
   <div class="refItem-description">{{ $description | markdownify | safeHTML }}</div>
   <div class="refItem-details refItem-details__{{ if .Inner }}full{{ end }}">
     {{ if $default }}