Minimalist Tweet Card

\n {text.split(\"\\n\").map((line, index) => (\n \n {line}\n {index < text.split(\"\\n\").length - 1 &&
}{\" \"}\n {/* 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 ? (\n \n )\n : $\"Tweet$ }\n

\n ))}\n

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

\n \n

\n View source on{\" \"}\n 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}",[],[194],{"_103":202,"_96":203,"_156":204,"_158":-5,"_159":141,"_160":205,"_162":117,"_105":206,"_100":207,"_164":208,"_166":209,"_168":22,"_169":-5,"_170":210,"_99":211},"bb13dfc0-209c-11f0-ac20-569c3dd06744","tweetCardCSS.ts","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}`;",[],[203],{"_103":213,"_96":214,"_156":215,"_158":-5,"_159":141,"_160":216,"_162":117,"_105":217,"_100":32,"_164":208,"_166":218,"_168":22,"_169":-5,"_170":219,"_99":220},"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",[],[214],{"_103":222,"_96":223,"_156":224,"_158":-5,"_159":141,"_160":225,"_162":117,"_105":226,"_100":227,"_164":208,"_166":228,"_168":22,"_169":-5,"_170":229,"_99":230},"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}",[],[223],{"_103":232,"_96":233,"_156":234,"_158":-5,"_159":141,"_160":235,"_162":117,"_105":236,"_100":227,"_164":208,"_166":237,"_168":22,"_169":-5,"_170":238,"_99":239},"8b0d171e-209d-11f0-a6b7-569c3dd06744","tweetThings.ts","890f3604-209d-11f0-a7e6-569c3dd06744",43,["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}",[],[233],{"_103":241,"_96":242,"_156":243,"_158":-5,"_159":141,"_160":120,"_162":117,"_105":244,"_100":207,"_164":188,"_166":245,"_168":22,"_169":-5,"_170":246,"_99":247},"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}",[],[242],"files",[153,173,182,192,201,212,221,231,240],"counts",{"_252":32,"_253":227,"_254":32,"_255":256,"_259":260},"pulls","branches","forks","envVars",{"_257":32,"_258":32},"count","emptyCount","connections",{"_257":32,"_261":32},"unfilledCount","contents",[264,267,270,273,276,279,282,285,288],{"_103":154,"_96":155,"_156":157,"_158":-5,"_159":141,"_160":161,"_162":117,"_105":265,"_100":32,"_164":165,"_166":167,"_168":22,"_169":-5,"_99":266},["D",1745451208224],[155],{"_103":174,"_96":175,"_156":176,"_158":-5,"_159":141,"_160":177,"_162":117,"_105":268,"_100":32,"_164":165,"_166":179,"_168":22,"_169":-5,"_99":269},["D",1745451208225],[175],{"_103":183,"_96":184,"_156":115,"_158":-5,"_159":141,"_160":185,"_162":117,"_105":271,"_100":187,"_164":188,"_166":189,"_168":22,"_169":-5,"_99":272},["D",1745451208159],[184],{"_103":193,"_96":194,"_156":195,"_158":-5,"_159":141,"_160":140,"_162":117,"_105":274,"_100":197,"_164":188,"_166":198,"_168":22,"_169":-5,"_99":275},["D",1762790745361],[194],{"_103":202,"_96":203,"_156":204,"_158":-5,"_159":141,"_160":205,"_162":117,"_105":277,"_100":207,"_164":208,"_166":209,"_168":22,"_169":-5,"_99":278},["D",1745451797400],[203],{"_103":213,"_96":214,"_156":215,"_158":-5,"_159":141,"_160":216,"_162":117,"_105":280,"_100":32,"_164":208,"_166":218,"_168":22,"_169":-5,"_99":281},["D",1745451633152],[214],{"_103":222,"_96":223,"_156":224,"_158":-5,"_159":141,"_160":225,"_162":117,"_105":283,"_100":227,"_164":208,"_166":228,"_168":22,"_169":-5,"_99":284},["D",1745451844899],[223],{"_103":232,"_96":233,"_156":234,"_158":-5,"_159":141,"_160":235,"_162":117,"_105":286,"_100":227,"_164":208,"_166":237,"_168":22,"_169":-5,"_99":287},["D",1745452146321],[233],{"_103":241,"_96":242,"_156":243,"_158":-5,"_159":141,"_160":120,"_162":117,"_105":289,"_100":207,"_164":188,"_166":245,"_168":22,"_169":-5,"_99":290},["D",1745452053816],[242],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_94":95,"_96":97,"_98":-7,"_100":-7,"_101":299,"_262":304,"_323":-7,"_324":-5,"_325":-5,"_248":326,"_354":333,"_355":-5,"_356":-5,"_357":22,"_358":22},{"_103":104,"_96":97,"_105":300,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":115,"_116":117,"_118":-5,"_119":120,"_121":32,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":301,"_135":302,"_138":303,"_150":22},["D",1745450398025],{"_94":95,"_133":134},{"_94":95,"_137":134,"_14":113},{"_100":140,"_96":44,"_103":141,"_142":104,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":97,"_149":95},[305,307,309,311,313,315,317,319,321],{"_103":154,"_96":155,"_156":157,"_158":-5,"_159":141,"_160":161,"_162":117,"_105":265,"_100":32,"_164":165,"_166":167,"_168":22,"_169":-5,"_99":306},[155],{"_103":174,"_96":175,"_156":176,"_158":-5,"_159":141,"_160":177,"_162":117,"_105":268,"_100":32,"_164":165,"_166":179,"_168":22,"_169":-5,"_99":308},[175],{"_103":183,"_96":184,"_156":115,"_158":-5,"_159":141,"_160":185,"_162":117,"_105":271,"_100":187,"_164":188,"_166":189,"_168":22,"_169":-5,"_99":310},[184],{"_103":193,"_96":194,"_156":195,"_158":-5,"_159":141,"_160":140,"_162":117,"_105":274,"_100":197,"_164":188,"_166":198,"_168":22,"_169":-5,"_99":312},[194],{"_103":202,"_96":203,"_156":204,"_158":-5,"_159":141,"_160":205,"_162":117,"_105":277,"_100":207,"_164":208,"_166":209,"_168":22,"_169":-5,"_99":314},[203],{"_103":213,"_96":214,"_156":215,"_158":-5,"_159":141,"_160":216,"_162":117,"_105":280,"_100":32,"_164":208,"_166":218,"_168":22,"_169":-5,"_99":316},[214],{"_103":222,"_96":223,"_156":224,"_158":-5,"_159":141,"_160":225,"_162":117,"_105":283,"_100":227,"_164":208,"_166":228,"_168":22,"_169":-5,"_99":318},[223],{"_103":232,"_96":233,"_156":234,"_158":-5,"_159":141,"_160":235,"_162":117,"_105":286,"_100":227,"_164":208,"_166":237,"_168":22,"_169":-5,"_99":320},[233],{"_103":241,"_96":242,"_156":243,"_158":-5,"_159":141,"_160":120,"_162":117,"_105":289,"_100":207,"_164":188,"_166":245,"_168":22,"_169":-5,"_99":322},[242],"readme","upstream","pull",[327,330,333,336,339,342,345,348,351],{"_103":154,"_96":155,"_156":157,"_158":-5,"_159":141,"_160":161,"_162":117,"_105":163,"_100":32,"_164":165,"_166":167,"_168":22,"_169":-5,"_170":328,"_99":329},[],[155],{"_103":174,"_96":175,"_156":176,"_158":-5,"_159":141,"_160":177,"_162":117,"_105":178,"_100":32,"_164":165,"_166":179,"_168":22,"_169":-5,"_170":331,"_99":332},[],[175],{"_103":183,"_96":184,"_156":115,"_158":-5,"_159":141,"_160":185,"_162":117,"_105":186,"_100":187,"_164":188,"_166":189,"_168":22,"_169":-5,"_170":334,"_99":335},[],[184],{"_103":193,"_96":194,"_156":195,"_158":-5,"_159":141,"_160":140,"_162":117,"_105":196,"_100":197,"_164":188,"_166":198,"_168":22,"_169":-5,"_170":337,"_99":338},[],[194],{"_103":202,"_96":203,"_156":204,"_158":-5,"_159":141,"_160":205,"_162":117,"_105":206,"_100":207,"_164":208,"_166":209,"_168":22,"_169":-5,"_170":340,"_99":341},[],[203],{"_103":213,"_96":214,"_156":215,"_158":-5,"_159":141,"_160":216,"_162":117,"_105":217,"_100":32,"_164":208,"_166":218,"_168":22,"_169":-5,"_170":343,"_99":344},[],[214],{"_103":222,"_96":223,"_156":224,"_158":-5,"_159":141,"_160":225,"_162":117,"_105":226,"_100":227,"_164":208,"_166":228,"_168":22,"_169":-5,"_170":346,"_99":347},[],[223],{"_103":232,"_96":233,"_156":234,"_158":-5,"_159":141,"_160":235,"_162":117,"_105":236,"_100":227,"_164":208,"_166":237,"_168":22,"_169":-5,"_170":349,"_99":350},[],[233],{"_103":241,"_96":242,"_156":243,"_158":-5,"_159":141,"_160":120,"_162":117,"_105":244,"_100":207,"_164":188,"_166":245,"_168":22,"_169":-5,"_170":352,"_99":353},[],[242],"preview","ahead","behind","showHomeCustomizationHint","showHTTPPreviewSettingsHint","actionData","errors"]