From b2f09b9ca45ac7f439aa5160c4d1b0ac61e66846 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Fri, 1 Mar 2024 07:50:58 -0400 Subject: content, css: linkExternal: indicateExternal slot + new design --- src/content/dependencies/linkExternal.js | 55 +++++++++++++++++++++++++------- 1 file changed, 43 insertions(+), 12 deletions(-) (limited to 'src/content/dependencies/linkExternal.js') diff --git a/src/content/dependencies/linkExternal.js b/src/content/dependencies/linkExternal.js index 7a97762c..188c1f0d 100644 --- a/src/content/dependencies/linkExternal.js +++ b/src/content/dependencies/linkExternal.js @@ -24,6 +24,11 @@ export default { default: 'generic', }, + indicateExternal: { + type: 'boolean', + default: false, + }, + tab: { validate: v => v.is('default', 'separate'), default: 'default', @@ -31,29 +36,55 @@ export default { }, generate(data, slots, {html, language}) { - const linkAttributes = html.attributes(); - let linkContent = slots.content; - - if (html.isBlank(linkContent)) { - linkContent = - language.formatExternalLink(data.url, { - style: slots.style, - context: slots.context, - }); - } + let formattedLink = + language.formatExternalLink(data.url, { + style: slots.style, + context: slots.context, + }); // Fall back to platform if nothing matched the desired style. - if (html.isBlank(linkContent) && slots.style !== 'platform') { - linkContent = + if (html.isBlank(formattedLink) && slots.style !== 'platform') { + formattedLink = language.formatExternalLink(data.url, { style: 'platform', context: slots.context, }); } + const linkAttributes = html.attributes(); + const linkContent = + (html.isBlank(slots.content) + ? formattedLink + : slots.content); + linkAttributes.set('class', 'external-link'); linkAttributes.set('href', data.url); + if (slots.indicateExternal) { + linkAttributes.add('class', 'indicate-external'); + + let titleText; + if (slots.tab === 'separate') { + if (html.isBlank(slots.content)) { + titleText = + language.$('misc.external.opensInNewTab.annotation'); + } else { + titleText = + language.$('misc.external.opensInNewTab', { + link: formattedLink, + annotation: + language.$('misc.external.opensInNewTab.annotation'), + }); + } + } else if (!html.isBlank(slots.content)) { + titleText = formattedLink; + } + + if (titleText) { + linkAttributes.set('title', titleText.toString()); + } + } + if (slots.tab === 'separate') { linkAttributes.set('target', '_blank'); } -- cgit 1.3.0-6-gf8a5