www.byjp.me/layouts/partials/interactions.html
JP Hastings-Spital db44af2e52 Fix ????s in interaction names
These arrive because webmentions.io can't cope with inbound emoji. Until that's fixed, this strips the ???s out at render time, to keep things looking nice.
2025-02-03 22:47:14 +00:00

83 lines
No EOL
6.6 KiB
HTML

{{- define "partials/reactionsvg.html" -}}
{{- if eq .emoji "♥️" }}<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="lch(55% 71 27)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>{{ end -}}
{{- if eq .emoji "⭐️" }}<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="lch(65% 71 81)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>{{ end -}}
{{- if eq .emoji "👍" }}<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="lch(55% 71 270)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>{{ end -}}
{{- if eq .emoji "👏" }}<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256" fill="lch(45% 71 270)"><path d="M160.22,24V8a8,8,0,0,1,16,0V24a8,8,0,0,1-16,0ZM196.1,41a7.91,7.91,0,0,0,4.17,1.17,8,8,0,0,0,6.84-3.83l8-13.11a8,8,0,0,0-13.68-8.33l-8,13.1A8,8,0,0,0,196.1,41Zm47.51,12.59a8,8,0,0,0-10.08-5.16l-15.06,4.85a8,8,0,0,0,2.46,15.62,8.15,8.15,0,0,0,2.46-.39l15.05-4.85A8,8,0,0,0,243.61,53.55ZM217,97.58a80.22,80.22,0,0,1-10.22,94c-.34,1.73-.72,3.46-1.19,5.18A80.17,80.17,0,0,1,58.77,216L23.5,155a26,26,0,0,1,19.24-38.79l-3-5.2a26,26,0,0,1,19.2-38.78L58.24,71A26,26,0,0,1,95.47,36.53,26.06,26.06,0,0,1,140.3,37l12.26,21.2A26.07,26.07,0,0,1,195.81,61ZM109.07,55l0,0h0l25,43.17a26,26,0,0,1,17.33-10L126.42,45a10,10,0,1,0-17.35,10ZM72.12,63l6.46,11.17a26.05,26.05,0,0,1,17.32-10L89.45,53A10,10,0,1,0,72.12,63Zm111.54,81-20.22-35a10,10,0,0,0-17.74,9.25L158.3,140a8,8,0,0,1-13.87,8l-36.5-63A10,10,0,1,0,90.58,95l26.05,45a8,8,0,0,1-13.87,8L71,93h0l0,0a10,10,0,0,0-17.33,10l35.22,61A8,8,0,0,1,75,172L54.72,137a10,10,0,0,0-17.34,10l35.27,61a64.12,64.12,0,0,0,117.42-15.44A63.52,63.52,0,0,0,183.66,144Zm19.41-38.42L181.93,69A10,10,0,0,0,164.55,79l33,57.05A80.2,80.2,0,0,1,207,161.51,64.23,64.23,0,0,0,203.07,105.58Z"></path></svg>{{ end -}}
{{- if eq .emoji "🔁" }}<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="lch(55% 71 130)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-repeat"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg>{{ end -}}
{{- if eq .emoji "💬" }}<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="lch(65% 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>{{ end -}}
{{- if .name }}: {{ end -}}
{{- end -}}
{{- $index := (split .Path "/") | after 1 -}}
{{- $interactions := index .Site.Data.interactions $index -}}
{{ with $interactions }}
<div class="interactions" id="interactions">
{{ $most := 0 }}
{{ $emoji := "" }}
{{ range $thisEm, $count := .reactions }}
{{ if gt $count $most }}
{{ $most = $count }}
{{ $emoji = $thisEm }}
{{ end }}
{{ end -}}
<details open>
<summary>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
Reactions & comments
</summary>
{{- $interactionMap := dict -}}
{{- range $in := .interactions -}}
{{- $oldList := index $interactionMap $in.emoji }}
{{- $newList := append $in $oldList -}}
{{- $interactionMap = merge $interactionMap (dict $in.emoji $newList) -}}
{{- end -}}
<ul class="reactions">
{{- range $thisEm, $items := $interactionMap -}}
{{- $count := len $items -}}
{{- if gt $count 0 -}}
<li>
{{ partial "partials/reactionsvg.html" (dict "emoji" $thisEm) }}
{{ $count }}
</li>
{{ end }}
{{ end }}
</ul>
<ol class="comments">
{{ range .interactions }}
{{ if not .comment }}
{{ continue }}
{{ end }}
<li>
<a href="{{.author.url}}">{{ .author.name | replaceRE `(\?\x{200D}?){2,}` "" | strings.TrimSpace }}</a>: {{ .comment }}
<span class="muted">(<a href="{{.url }}" target="_blank">{{ partial "rel-date.html" (dict "time" .timestamp "rel" $.Page.PublishDate) }}</a>)</span>
</li>
{{ end }}
</ol>
<ul class="named-reactions">
{{- range $thisEm, $items := $interactionMap -}}
{{- if ne $thisEm "💬" -}}
<li>
{{ partial "partials/reactionsvg.html" (dict "emoji" $thisEm "name" true) -}}
{{- range $i, $in := $items -}}
<a href="{{ $in.url | default $in.author.url }}" target="_blank">{{ $in.author.name | replaceRE `(\?\x{200D}?){2,}` "" | strings.TrimSpace }}</a>
{{- if ne $i (sub (len $items) 1) }}, {{ end -}}
{{- end -}}
</li>
{{- end -}}
{{ end }}
</ul>
</details>
</div>
{{ else }}
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
No comments or reactions from elsewhere on the web
</p>
{{ end }}