www.byjp.me/layouts/partials/interactions.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 24 24" fill="none" stroke="lch(45% 71 270)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather"><path d="M20.248 12.654a1.61 1.61 0 0 1 2.366 1.203 1.6 1.6 0 0 1-.796 1.597l-10.522 6.075a5.471 5.471 0 0 1-4.16.554 5.5 5.5 0 0 1-3.334-2.555l-1.565-2.71a6.42 6.42 0 0 1-.198-6.064l3.128-6.321a1.65 1.65 0 0 1 2.237-.732 1.65 1.65 0 0 1 .868 1.71l-.5 3.314 9.016-5.205a1.6 1.6 0 0 1 2.185.586 1.61 1.61 0 0 1-.58 2.194l1.42-.82a1.61 1.61 0 0 1 2.18.555 1.61 1.61 0 0 1-.59 2.2l-1.42.82a1.6 1.6 0 0 1 2.185.585 1.61 1.61 0 0 1-.56 2.229zM18.427 6.28 12.86 9.495M20.037 9.069l-5.568 3.215M16.074 15.064l4.174-2.41"/></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">
      {{ $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 }}</a>: {{ .comment }}
              <span class="muted">(<a href="{{.url }}">{{- partial "rel-date.html" (dict "time" .timestamp "rel" $.Page.Date) -}}</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 }}</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
</p>
{{ end }}