github/hugo-geekdoc
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekdoc.git synced 2024-11-21 12:20:39 +00:00
Code Issues Projects Releases Wiki Activity

feat: add anchors to propertylist shortcode (#697)

Browse Source
This commit is contained in:
Robert Kaussow 2023-08-31 23:27:11 +02:00 committed by GitHub
parent 2f614e6553
commit ce62f7bc44
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
layouts/_default/_markup/render-heading.html
View File

@ -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">

13
layouts/shortcodes/propertylist.html
View File

@ -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) }}

8
src/sass/_base.scss
View File

@ -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;
}

11
src/sass/_shortcodes.scss
View File

@ -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);
}
}