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

chore: drop webmentions

Browse source
This commit is contained in:
Cory Dransfeldt 2024-02-10 20:23:04 -08:00
parent 6a8fa53478
commit fdcdb2e0ce
No known key found for this signature in database
11 changed files with 2 additions and 272 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/_data/webmentions.js
View file

@ -1,20 +0,0 @@
import EleventyFetch from '@11ty/eleventy-fetch'
export default async function () {
const KEY_CORYD = process.env.API_KEY_WEBMENTIONS_CORYD_DEV
const url = `https://webmention.io/api/mentions.jf2?token=${KEY_CORYD}&per-page=1000`
if (process.env.ELEVENTY_PRODUCTION) {
const res = EleventyFetch(url, {
duration: '1h',
type: 'json',
}).catch()
const webmentions = await res
return {
mentions: webmentions['children'],
}
} else {
return {
mentions: []
}
}
}

24
src/_includes/partials/webmentions/comments.liquid
View file

@ -1,24 +0,0 @@
{% if mentions['in-reply-to'].size > 0 %}
<h2>Comments</h2>
<div class="interaction comments">
{% for mention in mentions['in-reply-to'] %}
<div class="comment__wrapper flex--centered">
<div class="comment__wrapper--interior flex--centered">
<a href={{mention.url}}>
<div class="avatar__wrapper flex--centered">
{% capture authorAlt %}{{ mention.author.name | escape }}{% endcapture %}
{% capture fallbackIcon %}{% tablericon "user" authorAlt %}{% endcapture %}
{% image mention.author.photo, authorAlt, 'avatar__image', 'lazy', 'square', fallbackIcon %}
</div>
</a>
<div class="comment">
<a href={{mention.url}}>
<p>{{ mention.content.text | webmentionsSanitizeComments }}</p>
<time>{{ mention.published | isoDateOnly }}</time>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}

13
src/_includes/partials/webmentions/container.liquid
View file

@ -1,13 +0,0 @@
{% assign mentions = webmentions.mentions | webmentionsByUrl: page.url %}
{% if mentions %}
{% capture css %}
{% render "../../../assets/styles/widgets/webmentions.css" %}
{% endcapture %}
<style>{{ css }}</style>
<div class="webmentions">
{% 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 %}
{% render "partials/webmentions/links.liquid", mentions: mentions %}
</div>
{% endif %}

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

@ -1,21 +0,0 @@
{%- capture title %}
{% if type == 'repost-of' %}
Reposts
{% elsif type == 'like-of' %}
Likes
{% endif %}
{% endcapture -%}
{% if mentions[type].size > 0 %}
<h2>{{ title }}</h2>
<div class="interaction flex--centered">
{% for mention in mentions[type] %}
<a href={{mention.url}}>
<div class="avatar__wrapper flex--centered">
{% capture authorAlt %}{{ mention.author.name | escape }}{% endcapture %}
{% capture fallbackIcon %}{% tablericon "user" authorAlt %}{% endcapture %}
{% image mention.author.photo, authorAlt, 'avatar__image', 'lazy', 'square', fallbackIcon %}
</div>
</a>
{% endfor %}
</div>
{% endif %}

12
src/_includes/partials/webmentions/links.liquid
View file

@ -1,12 +0,0 @@
{% if mentions['link-to'].size > 0 %}
<h2>Links</h2>
<ul class="link__list">
{% for mention in mentions['link-to'] %}
<li>
<a class="no-underline" href="{{ mention.url }}">
{{ mention.name }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}

1
src/_includes/post.liquid
View file

@ -30,5 +30,4 @@ schema: blog
</article>
</div>
{% render "partials/post-tags.liquid", tags: tags %}
{% render "partials/webmentions/container.liquid", webmentions: webmentions, page: page %}
{% render "partials/popular-posts.liquid", posts: collections.posts, analytics: analytics %}

105
src/assets/styles/widgets/webmentions.css
View file

@ -1,105 +0,0 @@
.webmentions {
border-top: 1px solid var(--gray-light);
border-bottom: 1px solid var(--gray-light);
margin-top: 1.5rem;
margin-bottom: 2.5rem;
padding-top: 1rem;
padding-bottom: 2.5rem;
}
.webmentions h2:not(:first-child) {
margin-top: 2rem;
}
.webmentions .interaction {
cursor: pointer;
margin-top: 1rem;
margin-bottom: 1.5rem;
}
.webmentions .interaction .comment__wrapper {
width: 100%;
padding-bottom: 1rem;
}
.webmentions .interaction .comment__wrapper:last-child {
padding-bottom: 0;
}
.webmentions .interaction .avatar__wrapper:hover,
.webmentions .interaction .avatar__wrapper:focus,
.webmentions .interaction .avatar__wrapper:active,
.webmentions .interaction .comment__wrapper:hover .avatar__wrapper,
.webmentions .interaction .comment__wrapper:focus .avatar__wrapper
.webmentions .interaction .comment__wrapper:active .avatar__wrapper {
border-color: var(--accent-color-hover);
}
.webmentions .interaction .comment__wrapper--interior {
justify-content: space-between;
}
.webmentions .interaction .comment__wrapper--interior .comment {
margin-left: .75rem;
}
.webmentions .interaction .comment__wrapper--interior .comment a {
color: var(--text-color);
text-decoration: none;
}
.webmentions .interaction .comment__wrapper--interior .comment p {
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
margin: 0;
word-break: break-word;
}
.webmentions .interaction .comment__wrapper--interior .comment time {
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
margin-top: .25rem;
}
.webmentions .interaction {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 0 0 .75rem;
padding: 0;
}
.webmentions .interaction.comments {
flex-direction: column;
margin: 0;
}
.webmentions .interaction > a {
margin-left: -.75rem;
height: 3.5rem;
}
.webmentions .interaction .avatar__wrapper {
border: 4px solid var(--background-color);
background-color: var(--background-color-inverted);
width: 3.5rem;
height: 3.5rem;
margin-bottom: 0;
overflow: hidden;
border-radius: var(--rounded-full);
transition-property: border-color;
transition-timing-function: var(--transition-ease-in-out);
transition-duration: var(--transition-duration-default);
}
.webmentions .interaction .avatar__wrapper img {
width: 100%;
height: 100%;
border-radius: var(--rounded-full);
}
.webmentions .interaction .avatar__wrapper > picture {
display: flex;
flex-direction: column;
align-items: center;
}