From e3533fb6db18cedb7b89d68221733a28595c65b4 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Tue, 18 Jun 2024 09:17:10 -0300 Subject: content: generateExternalIcon, extract from linkExternalAsIcon --- src/content/dependencies/generateExternalIcon.js | 28 +++++++++++++++++++ src/content/dependencies/linkContribution.js | 1 - src/content/dependencies/linkExternalAsIcon.js | 34 ++++++++++-------------- 3 files changed, 42 insertions(+), 21 deletions(-) create mode 100644 src/content/dependencies/generateExternalIcon.js (limited to 'src/content') diff --git a/src/content/dependencies/generateExternalIcon.js b/src/content/dependencies/generateExternalIcon.js new file mode 100644 index 00000000..cb65a00a --- /dev/null +++ b/src/content/dependencies/generateExternalIcon.js @@ -0,0 +1,28 @@ +import {isExternalLinkContext} from '#external-links'; + +export default { + extraDependencies: ['html', 'language', 'to'], + + data: (url) => ({url}), + + slots: { + context: { + // This awkward syntax is because the slot descriptor validator can't + // differentiate between a function that returns a validator (the usual + // syntax) and a function that is itself a validator. + validate: () => isExternalLinkContext, + default: 'generic', + }, + }, + + generate: (data, slots, {html, language, to}) => + html.tag('svg', + html.tag('use', { + href: + to('staticMisc.icon', + language.formatExternalLink(data.url, { + style: 'icon-id', + context: slots.context, + })), + })), +}; diff --git a/src/content/dependencies/linkContribution.js b/src/content/dependencies/linkContribution.js index aee93d60..4e1c8977 100644 --- a/src/content/dependencies/linkContribution.js +++ b/src/content/dependencies/linkContribution.js @@ -90,7 +90,6 @@ export default { }).map(({icon, url}) => { icon.setSlots({ context: 'artist', - withText: true, }); let platformText = diff --git a/src/content/dependencies/linkExternalAsIcon.js b/src/content/dependencies/linkExternalAsIcon.js index e2ce4b3c..9b146a4c 100644 --- a/src/content/dependencies/linkExternalAsIcon.js +++ b/src/content/dependencies/linkExternalAsIcon.js @@ -1,7 +1,13 @@ import {isExternalLinkContext} from '#external-links'; export default { - extraDependencies: ['html', 'language', 'to'], + contentDependencies: ['generateExternalIcon'], + extraDependencies: ['html', 'language'], + + relations: (relation, url) => ({ + icon: + relation('generateExternalIcon', url), + }), data: (url) => ({url}), @@ -13,39 +19,27 @@ export default { validate: () => isExternalLinkContext, default: 'generic', }, - - withText: {type: 'boolean'}, }, - generate(data, slots, {html, language, to}) { + generate(data, relations, slots, {html, language}) { const format = style => language.formatExternalLink(data.url, {style, context: slots.context}); const platformText = format('platform'); const handleText = format('handle'); - const iconId = format('icon-id'); - return html.tag('a', {class: 'icon'}, - {href: data.url}, - - slots.withText && + return ( + html.tag('a', {class: 'icon'}, + {href: data.url}, {class: 'has-text'}, - [ - html.tag('svg', [ - !slots.withText && - html.tag('title', platformText), - - html.tag('use', { - href: to('staticMisc.icon', iconId), - }), - ]), + [ + relations.icon, - slots.withText && html.tag('span', {class: 'icon-text'}, (html.isBlank(handleText) ? platformText : handleText)), - ]); + ])); }, }; -- cgit 1.3.0-6-gf8a5