96 lines
4.5 KiB
Svelte
96 lines
4.5 KiB
Svelte
<script>
|
|
export let message;
|
|
export let author;
|
|
export let handle;
|
|
export let avatar;
|
|
export let media;
|
|
export let likes = 100;
|
|
export let replies = 100;
|
|
export let verified;
|
|
export let date = new Date();
|
|
export let link = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
|
|
|
|
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
|
const fmtDateTime = d => `${d.toLocaleTimeString().replace(/:\d+ /g, ' ')} - ${months[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
|
|
const fmtCount = x => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
|
|
const fmtMessage = msg => msg
|
|
.replace(/#(\w+)/g, `<a href=${link} class="PrettyLink hashtag customisable" dir="ltr" rel="tag"><span class="PrettyLink-prefix">#</span><span class="PrettyLink-value">$1</span></a>`)
|
|
.replace(/@([a-zA-Z0-9_]{1,15})/g, `<a href=${link} class="PrettyLink profile customisable h-card" dir="ltr"><span class="PrettyLink-prefix">@</span><span class="PrettyLink-value">$1</span></a>`);
|
|
</script>
|
|
|
|
<div class="SandboxRoot env-bp-350">
|
|
<div class="EmbeddedTweet EmbeddedTweet--cta js-clickToOpenTarget" id="twitter-widget-0" lang="en">
|
|
|
|
<div class="EmbeddedTweet-tweetContainer">
|
|
<div class="EmbeddedTweet-tweet">
|
|
<blockquote class="Tweet h-entry js-tweetIdInfo subject expanded" cite={link}>
|
|
<div class="Tweet-header">
|
|
<a class="TweetAuthor-avatar Identity-avatar u-linkBlend" href={link}><img class="Avatar" data-src-2x={avatar} alt="" data-src-1x={avatar} src={avatar}></a>
|
|
<div class="TweetAuthor js-inViewportScribingTarget">
|
|
<a class="TweetAuthor-link Identity u-linkBlend" href={link}>
|
|
<div class="TweetAuthor-nameScreenNameContainer">
|
|
<span class="TweetAuthor-decoratedName">
|
|
<span class="TweetAuthor-name Identity-name customisable-highlight" title={author}>{author}</span>
|
|
{#if verified}
|
|
<span class="TweetAuthor-verifiedBadge"><div class="Icon Icon--verified" title="Verified Account" role="img"></div>
|
|
<b class="u-hiddenVisually">✔</b></span>
|
|
{/if}
|
|
</span>
|
|
<span class="TweetAuthor-screenName Identity-screenName" title={`@${handle}`} dir="ltr">@{handle}</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="Tweet-brand">
|
|
<a href={link}><span class="FollowButton-bird"><div class="Icon Icon--twitter" title="View on Twitter" role="presentation"></div>
|
|
</span></a>
|
|
</div>
|
|
</div>
|
|
<div class="Tweet-body e-entry-content">
|
|
|
|
<div class="Tweet-target js-inViewportScribingTarget"></div>
|
|
<p class="Tweet-text e-entry-title" dir="ltr" lang="en">{@html fmtMessage(message)}</p>
|
|
|
|
<div class="Tweet-card">
|
|
{#if media}
|
|
<article class="MediaCard customisable-border" dir="ltr">
|
|
<div class="MediaCard-media">
|
|
<div class="MediaCard-widthConstraint js-cspForcedStyle" style="max-width: 960px">
|
|
<div class="MediaCard-mediaContainer js-cspForcedStyle MediaCard--roundedTop MediaCard--roundedBottom" style="padding-bottom: 56.3542%">
|
|
<a href={link} class="MediaCard-mediaAsset NaturalImage">
|
|
<img class="NaturalImage-image" title="View image on Twitter" alt="View image on Twitter" src={media} width="960" height="541">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
{/if}
|
|
</div>
|
|
<div class="TweetInfo">
|
|
<div class="TweetInfo-like">
|
|
<a class="TweetInfo-heart" title="Like" href={link}>
|
|
<div><div class="Icon Icon--heart" title="Like" role="img"></div>
|
|
</div>
|
|
<span class="TweetInfo-heartStat">{fmtCount(likes)}</span>
|
|
</a>
|
|
</div>
|
|
<div class="TweetInfo-timeGeo">
|
|
<a class="u-linkBlend u-url customisable-highlight long-permalink" href={link}>
|
|
<time class="dt-updated" datetime={date.toJSON()} pubdate="" title={`Time posted: ${date.toUTCString()}`}>{fmtDateTime(date)}</time></a></div>
|
|
<div class="tweet-InformationCircle"><a href={link} class="Icon Icon--informationCircleWhite js-inViewportScribingTarget" title="Twitter Ads info and privacy"><span class="u-hiddenVisually">Twitter Ads info and privacy</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<a class="CallToAction" title="View the conversation on Twitter" href={link}>
|
|
<div class="CallToAction-icon"><div class="Icon Icon--replyCTA" title="View conversation on Twitter" role="img"></div>
|
|
</div>
|
|
<div class="CallToAction-text">{fmtCount(replies)} people are talking about this</div>
|
|
<div class="CallToAction-chevron"><div class="Icon Icon--chevronRightCTA" title="View on Twitter" role="img"></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|