feat: add anchors to propertylist shortcode (#697)

layouts/_default/_markup/render-heading.html

@@ -3,16 +3,16 @@
 
 <!-- prettier-ignore-start -->
 {{- if $showAnchor -}}
-<div class="gdoc-page__anchorwrap">
+<div class="flex align-center gdoc-page__anchorwrap">
     <h{{ .Level }} id="{{ .Anchor | safeURL }}" {{- with .Attributes.class }}
         class="{{ . }}"
     {{- end }}
     >
         {{ .Text | safeHTML }}
-        <a data-clipboard-text="{{ .Page.Permalink }}#{{ .Anchor | safeURL }}" class="gdoc-page__anchor clip flex align-center" title="{{ i18n "title_anchor_prefix" }} {{ .Text | safeHTML }}" aria-label="{{ i18n "title_anchor_prefix" }} {{ .Text | safeHTML }}" href="#{{ .Anchor | safeURL }}">
-            <svg class="gdoc-icon gdoc_link"><use xlink:href="#gdoc_link"></use></svg>
-        </a>
     </h{{ .Level }}>
+    <a data-clipboard-text="{{ .Page.Permalink }}#{{ .Anchor | safeURL }}" class="gdoc-page__anchor clip flex align-center" title="{{ i18n "title_anchor_prefix" }} {{ .Text | safeHTML }}" aria-label="{{ i18n "title_anchor_prefix" }} {{ .Text | safeHTML }}" href="#{{ .Anchor | safeURL }}">
+        <svg class="gdoc-icon gdoc_link"><use xlink:href="#gdoc_link"></use></svg>
+    </a>
 </div>
 {{- else -}}
 <div class="gdoc-page__anchorwrap">

layouts/shortcodes/propertylist.html

@@ -1,6 +1,7 @@
 {{- $name := .Get "name" -}}
 {{- $sort := .Get "sort" -}}
 {{- $order := default "asc" (.Get "order") -}}
+{{- $showAnchor := (and (default true .Page.Params.geekdocAnchor) (default true .Page.Site.Params.geekdocAnchor)) -}}
 
 {{- if .Site.Data.properties }}
   <dl class="gdoc-props">
@@ -10,11 +11,11 @@
         {{- $properties = (sort $properties . $order) }}
       {{- end }}
       {{- range $properties }}
-        <dt class="flex flex-wrap align-center gdoc-props__meta">
+        <dt class="flex flex-wrap align-center gdoc-props__meta"{{ if $showAnchor }} id="{{ anchorize .name }}"{{ end }}>
           <span class="gdoc-props__title">{{ .name }}</span>
           {{- if .required }}
             <span class="gdoc-props__tag warning">{{ i18n "propertylist_required" | lower }}</span>
-          {{ else }}
+          {{- else }}
             <span class="gdoc-props__tag tip">{{ i18n "propertylist_optional" | lower }}</span>
           {{- end }}
           {{- with .type }}
@@ -30,6 +31,11 @@
               <span class="gdoc-props__tag">{{ . }}</span>
             {{- end }}
           {{- end }}
+          {{- if $showAnchor }}
+          <a data-clipboard-text="{{ .Page.Permalink }}#{{ anchorize .name | safeHTML }}" class="gdoc-page__anchor clip flex align-center" title="{{ i18n "title_anchor_prefix" }} {{ .name | safeHTML }}" aria-label="{{ i18n "title_anchor_prefix" }} {{ .name | safeHTML }}" href="#{{ anchorize .name | safeHTML }}">
+            <svg class="gdoc-icon gdoc_link"><use xlink:href="#gdoc_link"></use></svg>
+          </a>
+          {{- end }}
         </dt>
         <dd>
           <div class="gdoc-props__description">
@@ -38,9 +44,8 @@
               {{- if reflect.IsMap $desc }}
                 {{- $desc = (index $desc $.Site.Language.Lang) }}
               {{- end }}
-
               {{ $desc | $.Page.RenderString }}
-            {{ end }}
+            {{- end }}
           </div>
           <div class="gdoc-props__default">
             {{- with default "none" (.defaultValue | string) }}

src/sass/_base.scss

@@ -397,17 +397,17 @@ svg.gdoc-icon {
   }
 
   &__anchorwrap {
+    gap: 0.5em;
+
     &:hover .gdoc-page__anchor svg.gdoc-icon {
       color: var(--control-icons);
     }
   }
 
   &__anchor {
-    margin-left: $padding-8;
-
     svg.gdoc-icon {
-      width: 1.25em;
-      height: 1.25em;
+      width: 1.85em;
+      height: 1.85em;
       color: transparent;
     }
 

src/sass/_shortcodes.scss

@@ -203,17 +203,18 @@
 .gdoc-props {
   &__title,
   &__default {
+    padding: 0;
+    margin: 0;
     font-family: "Liberation Mono", monospace;
   }
 
   &__meta {
+    gap: 0.5em;
     line-height: normal;
     margin-bottom: $padding-4;
-    > span {
-      margin-bottom: $padding-2;
-      &:not(:last-child) {
-        margin-right: $padding-8;
-      }
+
+    &:hover .gdoc-page__anchor svg.gdoc-icon {
+      color: var(--control-icons);
     }
   }