github/hugo-geekdoc
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekdoc.git synced 2024-11-21 20:30: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 --> <!-- prettier-ignore-start -->
{{- if $showAnchor -}} {{- if $showAnchor -}}
<div class="gdoc-page__anchorwrap"> <div class="flex align-center gdoc-page__anchorwrap">
<h{{ .Level }} id="{{ .Anchor | safeURL }}" {{- with .Attributes.class }} <h{{ .Level }} id="{{ .Anchor | safeURL }}" {{- with .Attributes.class }}
class="{{ . }}" class="{{ . }}"
{{- end }} {{- end }}
> >
{{ .Text | safeHTML }} {{ .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 }}> </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> </div>
{{- else -}} {{- else -}}
<div class="gdoc-page__anchorwrap"> <div class="gdoc-page__anchorwrap">

13
layouts/shortcodes/propertylist.html
View File

@ -1,6 +1,7 @@
{{- $name := .Get "name" -}} {{- $name := .Get "name" -}}
{{- $sort := .Get "sort" -}} {{- $sort := .Get "sort" -}}
{{- $order := default "asc" (.Get "order") -}} {{- $order := default "asc" (.Get "order") -}}
{{- $showAnchor := (and (default true .Page.Params.geekdocAnchor) (default true .Page.Site.Params.geekdocAnchor)) -}}
{{- if .Site.Data.properties }} {{- if .Site.Data.properties }}
<dl class="gdoc-props"> <dl class="gdoc-props">
@ -10,11 +11,11 @@
{{- $properties = (sort $properties . $order) }} {{- $properties = (sort $properties . $order) }}
{{- end }} {{- end }}
{{- range $properties }} {{- 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> <span class="gdoc-props__title">{{ .name }}</span>
{{- if .required }} {{- if .required }}
<span class="gdoc-props__tag warning">{{ i18n "propertylist_required" | lower }}</span> <span class="gdoc-props__tag warning">{{ i18n "propertylist_required" | lower }}</span>
{{ else }} {{- else }}
<span class="gdoc-props__tag tip">{{ i18n "propertylist_optional" | lower }}</span> <span class="gdoc-props__tag tip">{{ i18n "propertylist_optional" | lower }}</span>
{{- end }} {{- end }}
{{- with .type }} {{- with .type }}
@ -30,6 +31,11 @@
<span class="gdoc-props__tag">{{ . }}</span> <span class="gdoc-props__tag">{{ . }}</span>
{{- end }} {{- end }}
{{- 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> </dt>
<dd> <dd>
<div class="gdoc-props__description"> <div class="gdoc-props__description">
@ -38,9 +44,8 @@
{{- if reflect.IsMap $desc }} {{- if reflect.IsMap $desc }}
{{- $desc = (index $desc $.Site.Language.Lang) }} {{- $desc = (index $desc $.Site.Language.Lang) }}
{{- end }} {{- end }}
{{ $desc | $.Page.RenderString }} {{ $desc | $.Page.RenderString }}
{{ end }} {{- end }}
</div> </div>
<div class="gdoc-props__default"> <div class="gdoc-props__default">
{{- with default "none" (.defaultValue | string) }} {{- with default "none" (.defaultValue | string) }}

8
src/sass/_base.scss
View File

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

11
src/sass/_shortcodes.scss
View File

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