From 1529fe740544231d830e42ab94d3fddac68772ff Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Tue, 18 Jun 2024 10:21:42 -0300 Subject: content: gCTExternalLinkSection: inline linkExternalAsIcon behavior --- ...nerateContributionTooltipExternalLinkSection.js | 70 ++++++++++++++-------- src/content/dependencies/linkExternalAsIcon.js | 55 ----------------- 2 files changed, 45 insertions(+), 80 deletions(-) delete mode 100644 src/content/dependencies/linkExternalAsIcon.js (limited to 'src/content') diff --git a/src/content/dependencies/generateContributionTooltipExternalLinkSection.js b/src/content/dependencies/generateContributionTooltipExternalLinkSection.js index 2a2b760f..a9d17457 100644 --- a/src/content/dependencies/generateContributionTooltipExternalLinkSection.js +++ b/src/content/dependencies/generateContributionTooltipExternalLinkSection.js @@ -1,13 +1,26 @@ import {stitchArrays} from '#sugar'; export default { - contentDependencies: ['linkExternalAsIcon'], + contentDependencies: [ + 'generateExternalHandle', + 'generateExternalIcon', + 'generateExternalPlatform', + ], + extraDependencies: ['html', 'language'], relations: (relation, contribution) => ({ - artistIcons: + icons: + contribution.artist.urls + .map(url => relation('generateExternalIcon', url)), + + handles: + contribution.artist.urls + .map(url => relation('generateExternalHandle', url)), + + platforms: contribution.artist.urls - .map(url => relation('linkExternalAsIcon', url)), + .map(url => relation('generateExternalPlatform', url)), }), data: (contribution) => ({ @@ -18,32 +31,39 @@ export default { language.encapsulate('misc.artistLink', capsule => html.tags( stitchArrays({ - icon: relations.artistIcons, + icon: relations.icons, + handle: relations.handles, + platform: relations.platforms, url: data.urls, - }).map(({icon, url}) => { - icon.setSlots({ - context: 'artist', - }); - - let platformText = - language.formatExternalLink(url, { - context: 'artist', - style: 'platform', - }); - - // This is a pretty ridiculous hack, but we currently - // don't have a way of telling formatExternalLink to *not* - // use the fallback string, which just formats the URL as - // its host/domain... so is technically detectable. - if (platformText.toString() === (new URL(url)).host) { - platformText = - language.$(capsule, 'noExternalLinkPlatformName'); + }).map(({icon, handle, platform, url}) => { + for (const template of [icon, handle, platform]) { + template.setSlot('context', 'artist'); } - const platformSpan = + return [ + html.tag('a', {class: 'icon'}, + {href: url}, + {class: 'has-text'}, + + [ + icon, + + html.tag('span', {class: 'icon-text'}, + (html.isBlank(handle) + ? platform + : handle)), + ]), + html.tag('span', {class: 'icon-platform'}, - platformText); + // This is a pretty ridiculous hack, but we currently + // don't have a way of telling formatExternalLink to *not* + // use the fallback string, which just formats the URL as + // its host/domain... so is technically detectable. + ((html.resolve(platform, {normalize: 'string'}) === + (new URL(url)).host) - return [icon, platformSpan]; + ? language.$(capsule, 'noExternalLinkPlatformName') + : platform)), + ]; }))), }; diff --git a/src/content/dependencies/linkExternalAsIcon.js b/src/content/dependencies/linkExternalAsIcon.js deleted file mode 100644 index 0217e9d6..00000000 --- a/src/content/dependencies/linkExternalAsIcon.js +++ /dev/null @@ -1,55 +0,0 @@ -import {isExternalLinkContext} from '#external-links'; - -export default { - contentDependencies: [ - 'generateExternalHandle', - 'generateExternalIcon', - 'generateExternalPlatform', - ], - - extraDependencies: ['html'], - - relations: (relation, url) => ({ - icon: - relation('generateExternalIcon', url), - - handle: - relation('generateExternalHandle', url), - - platform: - relation('generateExternalPlatform', url), - }), - - data: (url) => ({url}), - - slots: { - context: { - validate: () => isExternalLinkContext, - default: 'generic', - }, - }, - - generate(data, relations, slots, {html}) { - for (const template of [ - relations.icon, - relations.handle, - relations.platform, - ]) { - template.setSlot('context', slots.context); - } - - return ( - html.tag('a', {class: 'icon'}, - {href: data.url}, - {class: 'has-text'}, - - [ - relations.icon, - - html.tag('span', {class: 'icon-text'}, - (html.isBlank(relations.handle) - ? relations.platform - : relations.handle)), - ])); - }, -}; -- cgit 1.3.0-6-gf8a5