Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/improsocial/impro
An extensible Bluesky client for web impro.social
Something went wrong. Try again.
JavaScript
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283import { html } from "/js/lib/lit-html.js";import { sanitizeUri } from "/js/utils.js";import { isVideoLink } from "/js/dataHelpers.js";import "/js/components/app-icon.js";
function getDomainFromUri(uri) { try { return new URL(uri).hostname; } catch (error) { return null; }}
export function externalLinkTemplate({ url, title, description, image, lazyLoadImages, disableNavigation, onClick, ariaLabel = null,}) { let clickHandler = null; if (onClick) { clickHandler = (event) => { if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) { return; } event.preventDefault(); event.stopPropagation(); onClick(event); }; } else if (disableNavigation) { clickHandler = (event) => event.preventDefault(); } return html`<div class="external-link embed-card" data-testid="external-link"> <a href="${sanitizeUri(url)}" target="_blank" aria-label=${ariaLabel ?? (title || url)} @click=${clickHandler} > <div class="external-link-content"> ${image ? html`<div class="external-link-image-wrapper"> <img class="external-link-image" src="${image}" alt=${title} loading=${lazyLoadImages ? "lazy" : "eager"} /> ${isVideoLink(url) ? html`<app-icon icon="play"></app-icon>` : ""} </div>` : isVideoLink(url) ? html`<div class="external-link-image-wrapper external-link-video-placeholder" > <app-icon icon="play"></app-icon> </div>` : ""} <div class="external-link-text"> <div class="external-link-title" data-testid="external-link-title"> ${title || url} </div> ${description ? html`<div class="external-link-description" data-testid="external-link-description" > ${description} </div>` : ""} <hr /> <span class="external-link-uri" data-testid="external-link-domain" >${getDomainFromUri(url)}</span > </div> </div> </a> </div>`;}