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

1
.env
View file

@ -2,7 +2,6 @@ API_KEY_LASTFM=
API_KEY_PLAUSIBLE=
API_KEY_TRAKT=
API_KEY_MOVIEDB=
API_KEY_WEBMENTIONS_CORYD_DEV=
API_TOKEN_READWISE=
SECRET_FEED_ALBUM_RELEASES=
COOKIE_STORYGRAPH=

64
config/filters/index.js
View file

@ -56,70 +56,6 @@ export default {
return tagMap[url] || ''
},
// webmentions
webmentionsByUrl: (webmentions, url) => {
if (!webmentions) return null;
const allowedTypes = ['mention-of', 'in-reply-to', 'like-of', 'repost-of']
const data = {
'like-of': [],
'repost-of': [],
'in-reply-to': [],
'mention-of': [],
'link-to': [],
}
const hasRequiredReplyFields = (entry) => {
const { author, published, content } = entry
return author.name && author.photo && published && content
}
const hasRequiredMentionFields = (entry) => {
const { name, url } = entry
return name && url
}
const filtered =
webmentions
.filter((entry) => entry['wm-target'] === `${BASE_URL}${url}`)
.filter((entry) => allowedTypes.includes(entry['wm-property'])) || []
filtered.forEach((m) => {
if (data[m['wm-property']]) {
const isReply = m['wm-property'] === 'in-reply-to'
const isMention = m['wm-property'] === 'mention-of'
const isValidReply = (isReply || isMention) && hasRequiredReplyFields(m)
if (isReply || isMention) {
if (isValidReply) {
m.sanitized = sanitizeHTML(m.content.html)
data[m['wm-property']].unshift(m)
}
if (isMention && hasRequiredMentionFields(m)) data['link-to'].push(m)
return
}
data[m['wm-property']].unshift(m)
}
})
data['in-reply-to'] = [...data['in-reply-to'], ...data['mention-of']]
data['in-reply-to'].sort((a, b) =>
a.published > b.published ? 1 : b.published > a.published ? -1 : 0
)
// delete empty keys
Object.keys(data).forEach((key) => {
if (data[key].length === 0) delete data[key]
});
if (!Object.keys(data).length) return null;
return data
},
webmentionsSanitizeComments: (comment) => {
return comment.replace(/\?\?\?\?/g, '');
},
// dates
readableDate: (date) => {
return DateTime.fromISO(date).toFormat('LLLL d, yyyy')

11
config/shortcodes/index.js
View file

@ -18,15 +18,6 @@ export const img = async (
sizes = '90vw',
formats = ['avif', 'webp', 'jpeg']
) => {
const isLocal = src?.includes('src/assets');
const imageExists = async () => {
try {
return await fetch(src, { method: 'HEAD' }).then((res) => res.ok);
} catch {
return false;
}
};
const generateImage = async () => {
const widths = [320, 570, 880, 1024, 1248];
const metadata = await Image(src, {
@ -70,7 +61,7 @@ export const img = async (
};
if (process.env.ELEVENTY_PRODUCTION) {
return isLocal ? await generateImage() : await imageExists().then(async (exists) => (exists ? await generateImage() : await generatePlaceholder()));
return await generateImage();
} else {
return await generatePlaceholder();
}

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "coryd.dev",
"version": "5.5.0",
"version": "5.6.0",
"description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
"type": "module",
"scripts": {

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;
}