diff options
Diffstat (limited to 'layouts/partials/webmentions.html')
-rw-r--r-- | layouts/partials/webmentions.html | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/layouts/partials/webmentions.html b/layouts/partials/webmentions.html new file mode 100644 index 0000000..4062aa7 --- /dev/null +++ b/layouts/partials/webmentions.html @@ -0,0 +1,71 @@ +<div id="summary" class="flex items-center"> + <div class="flex items-center mr-6 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> + <!-- <span>(Show)</span> --> + </div> + <div class="flex items-center mr-6 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> + <!-- <span>(Show)</span> --> + </div> + <div class="flex-grow"> + <div id="webmentions-avatars" class="flex -space-x-2 overflow-hidden"></div> + </div> + <div> + <a href="https://indieweb.org/Webmention" title="What are Webmentions?"> + <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> + <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> +</div> + +<template id="reply-template" class="list-none"> + <li class="h-entry flex mb-8 text-base"> + <a class="js-author flex-shrink-0" href=""> + <img class="comment-avatar u-photo js-avatar w-8 h-8 rounded-full mr-3" alt="" src=""/> + </a> + <div class="comment-note__body"> + <div class="p-author"> + <strong><a class="no-underline u-author js-author-name" href=""></a></strong> + <small><a class="no-underline u-url js-date js-source" href=""></a></small> + </div> + <div class="js-content e-entry"></div> + </div> + </li> +</template> +<template id="like-template" class="list-none"> + <li class="h-entry flex mb-8 text-base"> + <a class="reply__avatar u-author js-author flex-shrink-0" href=""> + <img class="u-photo js-avatar w-8 h-8 rounded-full mr-3" alt="" src=""/> + </a> + <a class="no-underline u-url js-source" href=""> + <span class="reply__author p-name js-sentence js-author-name" href=""></span> + <small class="reply__date js-date" href=""></small> + </a> + </li> +</template> + +<div id="webmentions-interactions"> + <ul class="replies" id="replies"></ul> + <ul class="shares" id="shares"></ul> +</div> + +<div id="webmentions-likes"> + <ul class="likes" id="likes"></ul> +</div> + +<div id="comments"></div> + +<script type="text/javascript"> + var webmentions = (permalink, aliases, productionBaseUrl) => { + fetchWebmentions(permalink, aliases, productionBaseUrl); + }; + + document.addEventListener('turbolinks:load', webmentions({{ .Permalink }}, {{ .Aliases }}, {{ .Site.Params.productionBaseUrl }})); +</script> |