twitter is now 𝕏

app/external-links.tsx

@@ -14,7 +14,8 @@ const externalLinks = {
 		'https://github.com/kentcdodds/kentcdodds.com/blob/main/CONTRIBUTING.md#translation-contributions',
 	github: 'https://github.com/kentcdodds',
 	youtube: 'https://youtube.com/c/KentCDodds-vids/videos',
-	twitter: 'https://twitter.com/kentcdodds',
+	twitter: 'https://x.com/kentcdodds',
+	x: 'https://x.com/kentcdodds',
 	rss: 'https://kentcdodds.com/blog/rss.xml',
 }
 

app/routes/about.tsx

@@ -139,7 +139,7 @@ function AboutIndex() {
 						className="underlined"
 						target="_blank"
 						rel="noreferrer noopener"
-						href={`https://twitter.com/intent/tweet?${new URLSearchParams({
+						href={`https://x.com/intent/tweet?${new URLSearchParams({
 							url: permalinkAutoplay,
 							text: `I just watched @kentcdodds' life flash before my eyes.`,
 						})}`}

app/routes/blog_+/$slug.tsx

@@ -248,7 +248,7 @@ function ArticleFooter({
 						)}
 						target="_blank"
 						rel="noreferrer noopener"
-						href={`https://twitter.com/intent/tweet?${new URLSearchParams({
+						href={`https://x.com/intent/tweet?${new URLSearchParams({
 							url: permalink,
 							text: tweetMessage,
 						})}`}
@@ -265,7 +265,7 @@ function ArticleFooter({
 						)}
 						target="_blank"
 						rel="noreferrer noopener"
-						href={`https://twitter.com/search?${new URLSearchParams({
+						href={`https://x.com/search?${new URLSearchParams({
 							q: permalink,
 						})}`}
 					>

app/routes/chats_+/$season.$episode_.$slug.tsx

@@ -485,7 +485,7 @@ export default function PodcastDetail() {
 						className="flex gap-2"
 						target="_blank"
 						rel="noreferrer noopener"
-						href={`https://twitter.com/intent/tweet?${new URLSearchParams({
+						href={`https://x.com/intent/post?${new URLSearchParams({
 							url: permalink,
 							text: `I just listened to "${episode.title}" with ${listify(
 								episode.guests

app/routes/credits.tsx

@@ -231,7 +231,7 @@ function CreditsIndex() {
 			/>
 			<Grid className="prose prose-light gap-y-20 dark:prose-dark lg:gap-y-32">
 				<Paragraph className="col-span-4">
-					<a href="https://twitter.com/ryanflorence">Ryan Florence</a>
+					<a href="https://x.com/ryanflorence">Ryan Florence</a>
 					{` and other friends at `}
 					<a href="https://remix.run">Remix.run</a>
 					{`
@@ -242,7 +242,7 @@ function CreditsIndex() {
 				</Paragraph>
 				<Paragraph className="col-span-4">
 					The syntax highlighting theme in blog posts is inspired by{' '}
-					<a href="https://twitter.com/sarah_edo">Sarah Drasner&apos;s</a>{' '}
+					<a href="https://x.com/sarah_edo">Sarah Drasner&apos;s</a>{' '}
 					<a href="https://github.com/sdras/night-owl-vscode-theme">
 						Night Owl
 					</a>

app/styles/prose.css

@@ -314,7 +314,7 @@ pre {
 	background: #30c85e;
 }
 
-/* The twitter embed HTML is custom-generated in our utils/twitter.server.ts */
+/* The twitter embed HTML is custom-generated in our utils/x.server.ts */
 .prose .tweet-embed {
 	display: flex;
 	flex-direction: column;

app/utils/compile-mdx.server.ts

@@ -13,7 +13,7 @@ import remarkSlug from 'remark-slug'
 import type * as U from 'unified'
 import { visit } from 'unist-util-visit'
 import { type GitHubFile } from '#app/types.ts'
-import * as twitter from './twitter.server.ts'
+import * as x from './x.server.ts'
 
 function handleEmbedderError({ url }: { url: string }) {
 	return `<p>Error embedding <a href="${url}">${url}</a></p>.`
@@ -151,8 +151,8 @@ function optimizeCloudinaryImages() {
 }
 
 const twitterTransformer = {
-	shouldTransform: twitter.isTwitterUrl,
-	getHTML: twitter.getTweetEmbedHTML,
+	shouldTransform: x.isXUrl,
+	getHTML: x.getTweetEmbedHTML,
 }
 
 const eggheadTransformer = {

app/utils/twitter.server.ts → app/utils/x.server.ts

@@ -120,13 +120,13 @@ const arrowSvg = `<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
 
 async function buildTweetHTML(tweet: Tweet, expandQuotedTweet: boolean) {
 	const author = tweet.user
-	const tweetURL = `https://twitter.com/${author.screen_name}/status/${tweet.id_str}`
+	const postURL = `https://x.com/${author.screen_name}/status/${tweet.id_str}`
 
 	// _normal is only 48x48 which looks bad on high-res displays
 	// _bigger is 73x73 which looks better...
 	const authorImg = author.profile_image_url_https.replace('_normal', '_bigger')
 	const authorHTML = `
-    <a class="tweet-author" href="https://twitter.com/${author.screen_name}" target="_blank" rel="noreferrer noopener">
+    <a class="tweet-author" href="https://x.com/${author.screen_name}" target="_blank" rel="noreferrer noopener">
       <img src="${authorImg}" loading="lazy" alt="${author.name} avatar" />
       <div>
         <span class="tweet-author-name">${author.name}</span>
@@ -141,7 +141,8 @@ async function buildTweetHTML(tweet: Tweet, expandQuotedTweet: boolean) {
 					if (!shortLink) return
 					const longLink = await unshorten(shortLink).catch(() => shortLink)
 					const longUrl = new URL(longLink)
-					const isTwitterLink = longUrl.host === 'twitter.com'
+					const isXLink =
+						longUrl.host === 'twitter.com' || longUrl.host === 'x.com'
 					let replacement = `<a href="${longLink}" target="_blank" rel="noreferrer noopener">${
 						longUrl.hostname + longUrl.pathname
 					}</a>`
@@ -153,14 +154,14 @@ async function buildTweetHTML(tweet: Tweet, expandQuotedTweet: boolean) {
 						// we'll handle the referenced tweet later
 						replacement = ''
 					}
-					const isTwitterMediaLink =
-						isTwitterLink && /\/(video|photo)\//.test(longUrl.pathname)
-					if (isTwitterMediaLink) {
+					const isXMediaLink =
+						isXLink && /\/(video|photo)\//.test(longUrl.pathname)
+					if (isXMediaLink) {
 						// we just embed the media link as an href around the media
 						replacement = ''
 					}
 
-					if (!isTwitterLink) {
+					if (!isXLink) {
 						// we don't want to get metadata for tweets.
 						metadata = await getMetadata(longLink).catch(() => null)
 					}
@@ -172,7 +173,7 @@ async function buildTweetHTML(tweet: Tweet, expandQuotedTweet: boolean) {
 					}
 					return {
 						shortLink,
-						isTwitterLink,
+						isXLink,
 						longLink,
 						longUrl,
 						replacement,
@@ -206,16 +207,16 @@ async function buildTweetHTML(tweet: Tweet, expandQuotedTweet: boolean) {
 		}
 	}
 
-	// twitterify @mentions
+	// xify @mentions
 	blockquote = blockquote.replace(
 		/@(\w+)/g,
-		`<a href="https://twitter.com/$1" target="_blank" rel="noreferrer noopener">$&</a>`,
+		`<a href="https://x.com/$1" target="_blank" rel="noreferrer noopener">$&</a>`,
 	)
 
 	const tweetHTML = `<blockquote>${blockquote.trim()}</blockquote>`
 
 	const mediaHTML = tweet.mediaDetails?.length
-		? buildMediaList(tweet.mediaDetails, tweetURL)
+		? buildMediaList(tweet.mediaDetails, postURL)
 		: ''
 
 	const lastMetadataLink = links.reverse().find((l) => l.metadata)
@@ -243,14 +244,14 @@ async function buildTweetHTML(tweet: Tweet, expandQuotedTweet: boolean) {
 		}
 	}
 
-	const createdAtHTML = `<div class="tweet-time"><a href="${tweetURL}" target="_blank" rel="noreferrer noopener">${formatDate(
+	const createdAtHTML = `<div class="tweet-time"><a href="${postURL}" target="_blank" rel="noreferrer noopener">${formatDate(
 		tweet.created_at,
 		'h:mm a',
 	)} (UTC) · ${formatDate(new Date(tweet.created_at))}</a></div>`
 
-	const likeIntent = `https://twitter.com/intent/like?tweet_id=${tweet.id_str}`
-	const retweetIntent = `https://twitter.com/intent/retweet?tweet_id=${tweet.id_str}`
-	const replyIntent = tweetURL
+	const likeIntent = `https://x.com/intent/like?tweet_id=${tweet.id_str}`
+	const retweetIntent = `https://x.com/intent/retweet?tweet_id=${tweet.id_str}`
+	const replyIntent = postURL
 
 	const { favorite_count, conversation_count } = tweet
 	const likeCount = formatNumber(favorite_count)
@@ -260,7 +261,7 @@ async function buildTweetHTML(tweet: Tweet, expandQuotedTweet: boolean) {
       <a href="${replyIntent}" class="tweet-reply" target="_blank" rel="noreferrer noopener">${repliesSVG}<span>${replyCount}</span></a>
       <a href="${retweetIntent}" class="tweet-retweet" target="_blank" rel="noreferrer noopener">${retweetSVG}</a>
       <a href="${likeIntent}" class="tweet-like" target="_blank" rel="noreferrer noopener">${likesSVG}<span>${likeCount}</span></a>
-      <a href="${tweetURL}" class="tweet-link" target="_blank" rel="noreferrer noopener">${arrowSvg}<span></span></a>
+      <a href="${postURL}" class="tweet-link" target="_blank" rel="noreferrer noopener">${arrowSvg}<span></span></a>
     </div>
   `
 
@@ -318,9 +319,9 @@ async function getTweetEmbedHTMLImpl(urlString: string) {
 	}
 }
 
-function isTwitterUrl(urlString: string) {
+function isXUrl(urlString: string) {
 	const url = new URL(urlString)
-	return /\.?twitter\.com/.test(url.hostname)
+	return /\.?twitter\.com/.test(url.hostname) || /\.?x\.com/.test(url.hostname)
 }
 
-export { getTweetEmbedHTML, isTwitterUrl }
+export { getTweetEmbedHTML, isXUrl }