blob: 503dbf0d70747eca59c790247a077fe06d29cafa (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
<div id="summary" class="flex items-center">
<button id="button-likes-{{ md5 .Permalink }}" class="flex items-center mr-6 p-3 bg-gray-100 hover:bg-white transition duration-300 ease-in-out rounded-md">
<svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
</svg>
<span id="webmentions-total-likes" class="mr-1"></span>
</button>
<button id="button-interactions-{{ md5 .Permalink }}" class="flex items-center mr-6 p-3 bg-gray-100 hover:bg-white transition duration-300 ease-in-out rounded-md">
<svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z" clip-rule="evenodd" />
</svg>
<span id="webmentions-total-interactions" class="mr-1"></span>
</button>
<div class="flex-grow">
<div id="webmentions-avatars" class="flex -space-x-2 overflow-hidden"></div>
</div>
<a class="p-3 bg-gray-100 hover:bg-white transition duration-300 ease-in-out rounded-md text-gray-600" href="https://indieweb.org/Webmention" title="What are Webmentions?">
<svg class="fill-current w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
</svg>
</a>
</div>
<template id="reply-template" class="list-none">
<li class="flex mb-8 text-base">
<a class="js-author flex-shrink-0" href="">
<img class="js-avatar w-8 h-8 rounded-full mr-3" alt="" src=""/>
</a>
<div>
<div>
<strong><a class="js-author-name no-underline" href=""></a></strong>
<small><a class="js-date js-source no-underline ml-2" href=""></a></small>
</div>
<div class="js-content"></div>
</div>
</li>
</template>
<template id="like-template" class="list-none">
<li class="flex mb-8 text-base">
<a class="js-author flex-shrink-0" href="">
<img class="js-avatar w-8 h-8 rounded-full mr-3" alt="" src=""/>
</a>
<a class="js-source no-underline" href="">
<span class="js-sentence js-author-name" href=""></span>
<small class="js-date ml-2" href=""></small>
</a>
</li>
</template>
<div id="webmentions-interactions-{{ md5 .Permalink }}" class="hidden">
<h4>Replies & Shares</h4>
<ul id="replies"></ul>
<ul id="shares"></ul>
</div>
<div id="webmentions-likes-{{ md5 .Permalink }}" class="hidden">
<h4>Likes</h4>
<ul id="likes"></ul>
</div>
<script type="text/javascript">
var webmentions = (permalink, aliases, productionBaseUrl) => {
fetchWebmentions(permalink, aliases, productionBaseUrl);
document.querySelector('#button-interactions-{{ md5 .Permalink }}').addEventListener('click', () => {
document.querySelector('#webmentions-interactions-{{ md5 .Permalink }}').classList.toggle('hidden');
});
document.querySelector('#button-likes-{{ md5 .Permalink }}').addEventListener('click', () => {
document.querySelector('#webmentions-likes-{{ md5 .Permalink }}').classList.toggle('hidden');
});
};
document.addEventListener('turbolinks:load', webmentions({{ .Permalink }}, {{ .Aliases }}, {{ .Site.Params.productionBaseUrl }}));
</script>
|
