github/hugo-geekdoc
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekdoc.git synced 2024-06-03 00:49:43 +02:00
Code Issues Projects Releases Wiki Activity

feat: add anchors to propertylist shortcode

Browse Source
This commit is contained in:
Robert Kaussow 2023-08-31 22:25:18 +02:00
parent 6d75ee9288
commit 8a7e86b8d1
Signed by: xoxys
GPG Key ID: 4E692A2EAECC03C0
4 changed files with 23 additions and 18 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">

8
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,8 +11,8 @@
{{- $properties = (sort $properties . $order) }}
{{- end }}
{{- range $properties }}
<dt class="flex flex-wrap align-center gdoc-props__meta">
<span class="gdoc-props__title">{{ .name }}</span>
<dt class="flex flex-wrap align-center gdoc-props__meta gdoc-page__anchorwrap">
<h6 class="gdoc-props__title" id="{{ anchorize .name }}">{{ .name }}</h6>
{{- if .required }}
<span class="gdoc-props__tag warning">{{ i18n "propertylist_required" | lower }}</span>
{{ else }}
@ -30,6 +31,9 @@
<span class="gdoc-props__tag">{{ . }}</span>
{{- end }}
{{- end }}
<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>
</dt>
<dd>
<div class="gdoc-props__description">

16
src/sass/_base.scss
View File

@ -342,7 +342,9 @@ svg.gdoc-icon {
.gdoc-language__list {
background: var(--body-background);
border-radius: $border-radius;
box-shadow: 0 1px 3px 0 var(--accent-color-dark), 0 1px 2px 0 var(--accent-color);
box-shadow:
0 1px 3px 0 var(--accent-color-dark),
0 1px 2px 0 var(--accent-color);
position: absolute;
margin: 0;
padding: $padding-8 $padding-4 !important;
@ -395,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;
}
@ -584,7 +586,9 @@ svg.gdoc-icon {
padding: $padding-8;
padding-left: $padding-32;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition:
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
border: 1px solid transparent;
border-radius: $border-radius;

9
src/sass/_shortcodes.scss
View File

@ -203,18 +203,15 @@
.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;
}
}
}
@each $name, $color in $hint-colors {