Minimalist Tweet Card

\n {text.split(\"\\n\").map((line, index) => (\n \n {line}\n {index < text.split(\"\\n\").length - 1 &&
} {/* Add
except for the last line */}\n \n ))}\n

\n );\n};\n\nconst ExternalLink = ({ url }: { url: string }) => {\n return (\n \n \n \n \n \n \n \n \n );\n};\n\nfunction TweetCard({ tweet }: { tweet: TweetData }) {\n return (\n

\n \n \n {tweet.author.name}\n @{tweet.author.screen_name}\n \n

\n \n

\n \n {tweet.media && }\n

\n 💬 {makeFriendly(tweet.replies)}\n 🔁 {makeFriendly(tweet.retweets)}\n ❤️ {makeFriendly(tweet.likes)}\n

\n \n {new Date(tweet.created_at).toLocaleDateString()}\n \n

\n );\n}\n\ninterface TweetMediaProps {\n media: {\n videos?: TweetVideo[];\n photos?: TweetPhoto[];\n };\n}\n\nconst TweetMedia = ({ media }: TweetMediaProps) => {\n const mediaItems = [...(media.videos || []), ...(media.photos || [])];\n\n return (\n

\n {mediaItems.map((item, index) => (\n

\n {item.type === \"video\"\n ? $\"Video$ \n : $\"Tweet$ }\n

\n ))}\n

\n );\n};\n\nfunction App() {\n return (\n

\n \n

\n View source on Val Town\n

\n );\n}\n\nfunction client() {\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n createRoot(rootElement).render();\n } else {\n console.error(\"Root element not found\");\n }\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default function server(request: Request): Response {\n return new Response(\n `\n \n \n Minimalist Tweet Card\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[193],{"_103":202,"_95":99,"_155":203,"_157":-5,"_158":140,"_159":204,"_161":117,"_105":205,"_100":206,"_163":207,"_165":208,"_167":22,"_168":-5,"_169":209,"_98":210},"bb13dfc0-209c-11f0-ac20-569c3dd06744","b266dba2-209c-11f0-8ff4-569c3dd06744",32,["D",1745451797400],2,"script","export default `\nbody {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica,\n Arial, sans-serif;\n background-color: #f0f2f5;\n margin: 0;\n padding: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n}\n\n.container {\n max-width: 500px;\n width: 100%;\n}\n\n.tweet-card {\n background-color: white;\n border-radius: 12px;\n padding: 20px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n}\n\n.tweet-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 15px;\n}\n\n.author-container {\n display: flex;\n align-items: center;\n}\n\n.avatar {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n margin-right: 12px;\n}\n\n.author-info {\n display: flex;\n flex-direction: column;\n gap: 2.5px;\n}\n\n.author-name {\n font-weight: bold;\n}\n\na.author-info {\n color: inherit;\n text-decoration: inherit;\n}\n\n.author-handle {\n color: #536471;\n font-size: 0.9em;\n}\n\n.external-link {\n color: #536471;\n transition: color 0.2s ease;\n display: flex;\n align-items: center;\n}\n\n.external-link:hover {\n color: #1da1f2;\n}\n\n.tweet-text {\n margin-bottom: 15px;\n line-height: 1.5;\n}\n\n.tweet-media {\n width: 100%;\n border-radius: 12px;\n margin-bottom: 15px;\n}\n\n.tweet-stats {\n display: flex;\n justify-content: space-between;\n color: #536471;\n font-size: 0.9em;\n margin-bottom: 10px;\n gap: 10px;\n}\n\n.stats {\n display: flex;\n gap: 10px;\n}\n\n.date {\n align-self: center;\n}\n\n.attribution {\n text-align: center;\n margin-top: 20px;\n font-size: 0.8em;\n color: #536471;\n}\n\n.attribution a {\n color: #1da1f2;\n text-decoration: none;\n}\n\n.attribution a:hover {\n text-decoration: underline;\n}`;",[],[99],{"_103":212,"_95":213,"_155":214,"_157":-5,"_158":140,"_159":215,"_161":117,"_105":216,"_100":32,"_163":207,"_165":217,"_167":22,"_168":-5,"_169":218,"_98":219},"592cbade-209c-11f0-b247-569c3dd06744","tweetCardTypes.ts","592cbc64-209c-11f0-b247-569c3dd06744",13,["D",1745451633152],"export type TwitterCardType =\n\t| \"tweet\"\n\t| \"summary\"\n\t| \"summary_large_image\"\n\t| \"player\";\n\nexport type MediaType = \"photo\" | \"video\" | \"gif\";\n\nexport interface BaseMedia {\n\ttype: MediaType;\n\turl: string;\n\twidth: number;\n\theight: number;\n}\n\nexport interface APIPhoto extends BaseMedia {\n\ttype: \"photo\";\n}\n\nexport interface APIVideo extends BaseMedia {\n\ttype: \"video\" | \"gif\";\n\tthumbnail_url: string;\n\tformat: string;\n}\n\nexport interface APIExternalMedia {\n\ttype: string;\n\turl: string;\n\theight: number;\n\twidth: number;\n\tduration: number;\n}\n\nexport interface APIMosaicPhotoFormats {\n\twebp: string;\n\tjpeg: string;\n}\n\nexport interface APIMosaicPhoto {\n\ttype: \"mosaic_photo\";\n\twidth: number;\n\theight: number;\n\tformats: APIMosaicPhotoFormats;\n}\n\nexport interface TweetMedia {\n\tall?: APIVideo[];\n\texternal?: APIExternalMedia;\n\tphotos?: APIPhoto[];\n\tvideos?: APIVideo[];\n\tmosaic?: APIMosaicPhoto;\n}\n\nexport interface APIPollChoice {\n\tlabel: string;\n\tcount: number;\n\tpercentage: number;\n}\n\nexport interface APIPoll {\n\tchoices: APIPollChoice[];\n\ttotal_votes: number;\n\tends_at: string;\n\ttime_left_en: string;\n}\n\nexport interface APITranslate {\n\ttext: string;\n\tsource_lang: string;\n\ttarget_lang: string;\n}\n\nexport interface APIAuthor {\n\tname: string;\n\tscreen_name: string;\n\tavatar_url?: string;\n\tavatar_color?: string;\n\tbanner_url?: string;\n}\n\nexport interface APITweet {\n\tid: string;\n\turl: string;\n\ttext: string;\n\tcreated_at: string;\n\tcreated_timestamp: number;\n\tcolor?: string;\n\tlang: string | null;\n\treplying_to: string | null;\n\treplying_to_status: string | null;\n\ttwitter_card: TwitterCardType;\n\tauthor: APIAuthor;\n\tsource: string;\n\n\tlikes: number;\n\tretweets: number;\n\treplies: number;\n\tviews: number | null;\n\n\tquote?: APITweet;\n\tpoll?: APIPoll;\n\ttranslation?: APITranslate;\n\tmedia?: TweetMedia;\n}\n\nexport interface TweetAuthor {\n\tname: string;\n\tscreen_name: string;\n\tavatar_url: string;\n\turl: string;\n}\n\nexport interface TweetData {\n\turl: string;\n\tid: string;\n\ttext: string;\n\tauthor: TweetAuthor;\n\treplies: number;\n\tretweets: number;\n\tlikes: number;\n\tcreated_at: string;\n\tmedia?: {\n\t\tvideos?: TweetVideo[];\n\t\tphotos?: TweetPhoto[];\n\t};\n}\n\nexport interface TweetPhoto extends Omit {\n\ttype: \"photo\";\n\turl: string;\n}\n\nexport interface TweetVideo extends Omit {\n\ttype: \"video\" | \"gif\";\n}\n",[],[213],{"_103":221,"_95":222,"_155":223,"_157":-5,"_158":140,"_159":224,"_161":117,"_105":225,"_100":226,"_163":207,"_165":227,"_167":22,"_168":-5,"_169":228,"_98":229},"d7635fd4-209c-11f0-adc2-569c3dd06744","tweetCardUtils.ts","592f6d6a-209c-11f0-9a55-569c3dd06744",36,["D",1745451844899],1,"import type {\n APIPhoto,\n APITweet,\n APIVideo,\n TweetData,\n TweetPhoto,\n TweetVideo,\n} from \"https://esm.town/v/nbbaier/twitterCards/tweetCardTypes.ts\";\n\nfunction intlFormat(num: number) {\n return new Intl.NumberFormat().format(Math.round(num * 10) / 10);\n}\n\nexport function makeFriendly(num: number) {\n if (num >= 1000000) return `${intlFormat(num / 1000000)}M`;\n if (num >= 1000) return `${intlFormat(num / 1000)}k`;\n return intlFormat(num);\n}\n\nfunction transformAuthor(author: APITweet[\"author\"]): TweetAuthor {\n return {\n name: author.name,\n screen_name: author.screen_name,\n avatar_url: author.avatar_url ?? \"\",\n url: `https://x.com/${author.screen_name}`,\n };\n}\n\nfunction getTweetMedia(\n media: NonNullable,\n): TweetData[\"media\"] {\n const result: TweetData[\"media\"] = {};\n\n if (media.videos) {\n result.videos = media.videos.map(transformVideo);\n }\n\n if (media.photos) {\n result.photos = media.photos.map(transformPhoto);\n }\n\n return result;\n}\n\nexport function transformTweet(tweet: APITweet): TweetData {\n return {\n url: tweet.url,\n id: tweet.id,\n text: tweet.text,\n author: transformAuthor(tweet.author),\n replies: tweet.replies,\n retweets: tweet.retweets,\n likes: tweet.likes,\n created_at: tweet.created_at,\n media: tweet.media ? getTweetMedia(tweet.media) : undefined,\n };\n}\n\nexport async function fetchTweet(url: URL | string): Promise {\n const response = await fetch(url);\n const { tweet } = (await response.json()) as {\n code: number;\n tweet: APITweet;\n message: string;\n };\n\n return tweet;\n}\n\nexport function transformPhoto(inputPhoto: APIPhoto): TweetPhoto {\n return {\n url: inputPhoto.url,\n type: inputPhoto.type,\n };\n}\n\nexport function transformVideo(inputVideo: APIVideo): TweetVideo {\n return {\n url: inputVideo.thumbnail_url,\n type: inputVideo.type,\n };\n}",[],[222],{"_103":231,"_95":232,"_155":233,"_157":-5,"_158":140,"_159":139,"_161":117,"_105":234,"_100":226,"_163":207,"_165":235,"_167":22,"_168":-5,"_169":236,"_98":237},"8b0d171e-209d-11f0-a6b7-569c3dd06744","tweetThings.ts","890f3604-209d-11f0-a7e6-569c3dd06744",["D",1745452146321],"import { fetchTweet, makeFriendly, transformTweet } from \"https://esm.town/v/nbbaier/twitterCards/tweetCardUtils.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite?v=6\";\n\nconst res = await sqlite.execute(\n \"select link_url from tana_links where link_url like '%twitter.com%' order by random() limit 2\",\n);\n\nconst urls = res.rows.map(r => {\n const url = new URL(r[0]);\n return \"https://api.fxtwitter.com\" + url.pathname;\n});\n\nfor (const url of urls) {\n const tweet = await fetchTweet(url);\n const tweetData = transformTweet(tweet);\n\n const tweetTextHTML = `

\n ${\n tweetData.text.split(\"\\n\").map((line, index) => `\n \n ${line}\n ${index < tweetData.text.split(\"\\n\").length - 1 ? \"
\" : \"\"}\n \n `).join(\"\")\n }\n

`;\n\n const tweetHTML = `

\n \n ${tweetData.author.name}\n @${tweetData.author.screen_name}\n \n

\n \n

\n ${tweetTextHTML}\n

\n 💬 ${makeFriendly(tweetData.replies)}\n 🔁 ${makeFriendly(tweetData.retweets)}\n ❤️ ${makeFriendly(tweetData.likes)}\n

\n ${new Date(tweetData.created_at).toLocaleDateString()}\n

`;\n console.log(tweetHTML);\n}",[],[232],{"_103":239,"_95":240,"_155":241,"_157":-5,"_158":140,"_159":119,"_161":117,"_105":242,"_100":206,"_163":187,"_165":243,"_167":22,"_168":-5,"_169":244,"_98":245},"53e99a0a-209d-11f0-a275-569c3dd06744","twitterCards.tsx","43116cbc-209d-11f0-bdce-569c3dd06744",["D",1745452053816],"import { sqlite } from \"https://esm.town/v/std/sqlite?v=6\";\nimport { html } from \"https://esm.town/v/stevekrouse/html?v=5\";\n\nconst res = await sqlite.execute(\n \"select link_url from tana_links where link_url like '%twitter.com%' order by random() limit 2\",\n);\n\nconst urls = res.rows.map(r => {\n const url = new URL(r[0]);\n return url.origin + url.pathname;\n});\n\nconst tweetList = [];\n\nfor (const url of urls) {\n tweetList.push(`

`);\n}\n\nexport default async function(req: Request): Promise {\n return html(`\n \n \n \n Test Page\n \n \n \n

\n ${urls.map(url => `

`).join(\"\\n\")}\n

\n\n \n \n\n\n`);\n}",[],[240],"files",[152,172,181,191,201,211,220,230,238],"counts",{"_250":32,"_251":226,"_252":32,"_253":254},"pulls","branches","forks","envVars",{"_255":32,"_256":32},"count","emptyCount","contents",[],{"_103":202,"_95":99,"_155":203,"_157":-5,"_158":140,"_159":204,"_161":117,"_105":260,"_100":206,"_163":207,"_165":208,"_167":22,"_168":-5,"_98":261},["D",1745451797400],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":270,"_150":275,"_246":303,"_164":304,"_257":306,"_307":-5,"_308":-5,"_309":-5,"_310":-5,"_311":312},{"_103":104,"_95":96,"_105":271,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":115,"_116":117,"_118":119,"_120":32,"_16":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":272,"_134":273,"_137":274,"_149":22},["D",1745450398025],{"_93":94,"_132":133},{"_93":94,"_136":133},{"_100":139,"_95":43,"_103":140,"_141":104,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":96,"_148":94},[276,279,282,285,288,291,294,297,300],{"_103":153,"_95":154,"_155":156,"_157":-5,"_158":140,"_159":160,"_161":117,"_105":162,"_100":32,"_163":164,"_165":166,"_167":22,"_168":-5,"_169":277,"_98":278},[],[154],{"_103":173,"_95":174,"_155":175,"_157":-5,"_158":140,"_159":176,"_161":117,"_105":177,"_100":32,"_163":164,"_165":178,"_167":22,"_168":-5,"_169":280,"_98":281},[],[174],{"_103":182,"_95":183,"_155":115,"_157":-5,"_158":140,"_159":184,"_161":117,"_105":185,"_100":186,"_163":187,"_165":188,"_167":22,"_168":-5,"_169":283,"_98":284},[],[183],{"_103":192,"_95":193,"_155":194,"_157":-5,"_158":140,"_159":195,"_161":117,"_105":196,"_100":197,"_163":187,"_165":198,"_167":22,"_168":-5,"_169":286,"_98":287},[],[193],{"_103":202,"_95":99,"_155":203,"_157":-5,"_158":140,"_159":204,"_161":117,"_105":205,"_100":206,"_163":207,"_165":208,"_167":22,"_168":-5,"_169":289,"_98":290},[],[99],{"_103":212,"_95":213,"_155":214,"_157":-5,"_158":140,"_159":215,"_161":117,"_105":216,"_100":32,"_163":207,"_165":217,"_167":22,"_168":-5,"_169":292,"_98":293},[],[213],{"_103":221,"_95":222,"_155":223,"_157":-5,"_158":140,"_159":224,"_161":117,"_105":225,"_100":226,"_163":207,"_165":227,"_167":22,"_168":-5,"_169":295,"_98":296},[],[222],{"_103":231,"_95":232,"_155":233,"_157":-5,"_158":140,"_159":139,"_161":117,"_105":234,"_100":226,"_163":207,"_165":235,"_167":22,"_168":-5,"_169":298,"_98":299},[],[232],{"_103":239,"_95":240,"_155":241,"_157":-5,"_158":140,"_159":119,"_161":117,"_105":242,"_100":206,"_163":187,"_165":243,"_167":22,"_168":-5,"_169":301,"_98":302},[],[240],[276,279,282,285,288,291,294,297,300],{"_103":202,"_95":99,"_155":203,"_157":-5,"_158":140,"_159":204,"_161":117,"_105":260,"_100":206,"_163":207,"_165":208,"_167":22,"_168":-5,"_98":305},[99],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]