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}",[],[189],{"_107":198,"_99":199,"_151":200,"_153":-5,"_154":140,"_155":201,"_157":121,"_109":202,"_104":94,"_159":203,"_161":204,"_163":27,"_164":-5,"_165":205,"_102":206},"bb13dfc0-209c-11f0-ac20-569c3dd06744","tweetCardCSS.ts","b266dba2-209c-11f0-8ff4-569c3dd06744",32,["D",1745451797400],"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}`;",[],[199],{"_107":208,"_99":209,"_151":210,"_153":-5,"_154":140,"_155":211,"_157":121,"_109":212,"_104":33,"_159":203,"_161":213,"_163":27,"_164":-5,"_165":214,"_102":215},"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",[],[209],{"_107":217,"_99":218,"_151":219,"_153":-5,"_154":140,"_155":220,"_157":121,"_109":221,"_104":222,"_159":203,"_161":223,"_163":27,"_164":-5,"_165":224,"_102":225},"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}",[],[218],{"_107":227,"_99":103,"_151":228,"_153":-5,"_154":140,"_155":139,"_157":121,"_109":229,"_104":222,"_159":203,"_161":230,"_163":27,"_164":-5,"_165":231,"_102":232},"8b0d171e-209d-11f0-a6b7-569c3dd06744","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}",[],[103],{"_107":234,"_99":235,"_151":236,"_153":-5,"_154":140,"_155":123,"_157":121,"_109":237,"_104":94,"_159":183,"_161":238,"_163":27,"_164":-5,"_165":239,"_102":240},"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}",[],[235],"files",[148,168,177,187,197,207,216,226,233],"counts",{"_245":33,"_246":222,"_247":33,"_248":33},"pulls","branches","forks","envVars","contents",[],{"_107":227,"_99":103,"_151":228,"_153":-5,"_154":140,"_155":139,"_157":121,"_109":252,"_104":222,"_159":203,"_161":230,"_163":27,"_164":-5,"_102":253},["D",1745452146321],[103],"upstream","screenshots",{"_257":258,"_259":260},"thumbnail","https://screenshots.valtown.net/screenshot.png?width=1024&height=768&version=41&url=https%3A%2F%2Fnbbaier--7bf2fd24209911f08f46569c3dd06744.web.val.run","preview","https://screenshots.valtown.net/screenshot.png?width=1920&height=1080&version=41&url=https%3A%2F%2Fnbbaier--7bf2fd24209911f08f46569c3dd06744.web.val.run","emptyEnvVars","routes/_app.x.$handle.$name.code.$",{"_97":98,"_99":100,"_101":43,"_104":-7,"_102":103,"_105":264,"_146":268,"_241":296,"_160":297,"_249":299,"_254":-5,"_300":27,"_301":-5},{"_107":108,"_99":100,"_109":265,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":119,"_120":121,"_122":123,"_124":33,"_125":126,"_127":126,"_128":129,"_130":129,"_131":129,"_132":126,"_133":27,"_21":266,"_137":267},["D",1745450398025],{"_97":98,"_135":136},{"_104":139,"_99":43,"_107":140,"_141":108,"_142":-5,"_143":-5,"_144":-5,"_145":-5},[269,272,275,278,281,284,287,290,293],{"_107":149,"_99":150,"_151":152,"_153":-5,"_154":140,"_155":156,"_157":121,"_109":158,"_104":33,"_159":160,"_161":162,"_163":27,"_164":-5,"_165":270,"_102":271},[],[150],{"_107":169,"_99":170,"_151":171,"_153":-5,"_154":140,"_155":172,"_157":121,"_109":173,"_104":33,"_159":160,"_161":174,"_163":27,"_164":-5,"_165":273,"_102":274},[],[170],{"_107":178,"_99":179,"_151":119,"_153":-5,"_154":140,"_155":180,"_157":121,"_109":181,"_104":182,"_159":183,"_161":184,"_163":27,"_164":-5,"_165":276,"_102":277},[],[179],{"_107":188,"_99":189,"_151":190,"_153":-5,"_154":140,"_155":191,"_157":121,"_109":192,"_104":193,"_159":183,"_161":194,"_163":27,"_164":-5,"_165":279,"_102":280},[],[189],{"_107":198,"_99":199,"_151":200,"_153":-5,"_154":140,"_155":201,"_157":121,"_109":202,"_104":94,"_159":203,"_161":204,"_163":27,"_164":-5,"_165":282,"_102":283},[],[199],{"_107":208,"_99":209,"_151":210,"_153":-5,"_154":140,"_155":211,"_157":121,"_109":212,"_104":33,"_159":203,"_161":213,"_163":27,"_164":-5,"_165":285,"_102":286},[],[209],{"_107":217,"_99":218,"_151":219,"_153":-5,"_154":140,"_155":220,"_157":121,"_109":221,"_104":222,"_159":203,"_161":223,"_163":27,"_164":-5,"_165":288,"_102":289},[],[218],{"_107":227,"_99":103,"_151":228,"_153":-5,"_154":140,"_155":139,"_157":121,"_109":229,"_104":222,"_159":203,"_161":230,"_163":27,"_164":-5,"_165":291,"_102":292},[],[103],{"_107":234,"_99":235,"_151":236,"_153":-5,"_154":140,"_155":123,"_157":121,"_109":237,"_104":94,"_159":183,"_161":238,"_163":27,"_164":-5,"_165":294,"_102":295},[],[235],[269,272,275,278,281,284,287,290,293],{"_107":227,"_99":103,"_151":228,"_153":-5,"_154":140,"_155":139,"_157":121,"_109":252,"_104":222,"_159":203,"_161":230,"_163":27,"_164":-5,"_102":298},[103],[],"showCompareCallout","pull","routes/_app","actionData","errors"]