cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: dry up webmentions

Browse source
This commit is contained in:
Cory Dransfeldt 2023-08-14 09:50:29 -07:00
parent 561bf48c74
commit f3faf8feab
No known key found for this signature in database
10 changed files with 70 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/_includes/partials/footer.liquid
View file

@ -1,7 +1,7 @@
<footer>
<div class="mt-8 pt-8 pb-4 flex gap-2 md:gap-3 justify-center w-full">
{% for link in nav.social %}
{% render "partials/linked-icon.liquid", name: link.name, link: link.url, icon: link.icon %}
{% render "partials/nav/linked-icon.liquid", name: link.name, link: link.url, icon: link.icon %}
{% endfor %}
</div>
<div class="flex justify-center text-sm text-gray-500 dark:text-gray-100 pb-8 text-center">

0
src/_includes/partials/linked-icon.liquid → src/_includes/partials/nav/linked-icon.liquid
View file

2
src/_includes/partials/nav/menu.liquid
View file

@ -1,7 +1,7 @@
<nav>
<ul class="flex">
{% for link in nav.menu %}
<li class="mr-6">
<li{% if not forloop.last %} class="mr-6"{% endif %}>
{% render "partials/nav/link.liquid", page: page, link: link.name, icon: link.icon %}
</li>
{% endfor %}

49
src/_includes/partials/webmentions.liquid
View file

@ -1,49 +0,0 @@
{% if webmentions %}
<div class="border-t border-gray-200 mt-12 pt-14 dark:border-gray-700">
{% assign mentions = webmentions.mentions | webmentionsByUrl: page.url %}
{% if mentions['repost-of'].size > 0 %}
<h2 class="text-lg md:text-xl font-black leading-tight dark:text-gray-200">Reposts</h2>
<div class="flex flex-row items-center mt-4 mb-6">
<ul class="ml-3 flex flex-row flex-wrap">
{% for mention in mentions['repost-of'] %}
<li class="-ml-3 inline">
<a href={{mention.url}}>
{% image mention.author.photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-pink-500 dark:hover:border-pink-500', '56px' %}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if mentions['like-of'].size > 0 %}
<h2 class="text-lg md:text-xl font-black leading-tight dark:text-gray-200">Likes</h2>
<div class="flex flex-row items-center mt-4 mb-6">
<ul class="ml-3 flex flex-row flex-wrap">
{% for mention in mentions['like-of'] %}
<li class="-ml-3 inline">
<a href={{mention.url}}>
{% image mention.author.photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all ease-in-out duration-300 hover:border-pink-500 dark:hover:border-pink-500', '56px' %}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if mentions['in-reply-to'].size > 0 %}
<h2 class="text-lg md:text-xl font-black leading-tight dark:text-gray-200">Comments</h2>
<div class="mt-4 flex flex-col items-center not-prose">
{% for mention in mentions['in-reply-to'] %}
<div class="border-bottom flex flex-row items-center border-gray-100 pb-4 w-full">
<a class="text-gray-700 dark:text-gray-200 group flex flex-row space-between items-center" href={{mention.url}}>
{% image mention.author.photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all ease-in-out duration-300 group-hover:border-pink-500 dark:group-hover:border-pink-500', '56px' %}
<div class="ml-3">
<p class="text-sm group-hover:text-pink-500 dark:group-hover:text-pink-500">{{ mention.content.text }}</p>
<p class="mt-1 text-xs group-hover:text-pink-500 dark:group-hover:text-pink-500">{{ mention.published | isoDateOnly }}</p>
</div>
</a>
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% endif %}

16
src/_includes/partials/webmentions/comments.liquid Normal file
View file

@ -0,0 +1,16 @@
{% if mentions['in-reply-to'].size > 0 %}
<h2 class="text-lg md:text-xl font-black leading-tight dark:text-gray-200">Comments</h2>
<div class="mt-4 flex flex-col items-center not-prose">
{% for mention in mentions['in-reply-to'] %}
<div class="border-bottom flex flex-row items-center border-gray-100 pb-4 w-full">
<a class="text-gray-700 dark:text-gray-200 group flex flex-row space-between items-center" href={{mention.url}}>
{% image mention.author.photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all ease-in-out duration-300 group-hover:border-pink-500 dark:group-hover:border-pink-500', '56px' %}
<div class="ml-3">
<p class="text-sm group-hover:text-pink-500 dark:group-hover:text-pink-500">{{ mention.content.text }}</p>
<p class="mt-1 text-xs group-hover:text-pink-500 dark:group-hover:text-pink-500">{{ mention.published | isoDateOnly }}</p>
</div>
</a>
</div>
{% endfor %}
</div>
{% endif %}

8
src/_includes/partials/webmentions/container.liquid Normal file
View file

@ -0,0 +1,8 @@
{% if webmentions %}
<div class="border-t border-gray-200 mt-12 pt-14 dark:border-gray-700">
{% assign mentions = webmentions.mentions | webmentionsByUrl: page.url %}
{% render "partials/webmentions/interaction.liquid", mentions: mentions, type: 'repost-of' %}
{% render "partials/webmentions/interaction.liquid", mentions: mentions, type: 'like-of' %}
{% render "partials/webmentions/comments.liquid", mentions: mentions %}
</div>
{% endif %}

21
src/_includes/partials/webmentions/interaction.liquid Normal file
View file

@ -0,0 +1,21 @@
{%- capture title %}
{% if type == 'repost-of' %}
Reposts
{% elsif type == 'like-of' %}
Likes
{% endif %}
{% endcapture -%}
{% if mentions[type].size > 0 %}
<h2 class="text-lg md:text-xl font-black leading-tight dark:text-gray-200">{{ title }}</h2>
<div class="flex flex-row items-center mt-4 mb-6">
<ul class="ml-3 flex flex-row flex-wrap">
{% for mention in mentions[type] %}
<li class="-ml-3 inline">
<a href={{mention.url}}>
{% image mention.author.photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-pink-500 dark:hover:border-pink-500', '56px' %}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}

2
src/_includes/post.liquid
View file

@ -12,6 +12,6 @@ layout: main
</div>
</article>
{% render "partials/post-tags.liquid", tags: tags %}
{% render "partials/webmentions.liquid", webmentions: webmentions, page: page %}
{% render "partials/webmentions/container.liquid", webmentions: webmentions, page: page %}
{% render "partials/author.liquid", site: site %}
{% render "partials/popular-posts.liquid", posts: collections.posts, analytics: analytics %}