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}",[],[192],{"_102":201,"_95":202,"_154":203,"_156":-5,"_157":139,"_158":204,"_160":116,"_104":205,"_99":206,"_162":207,"_164":208,"_166":22,"_167":-5,"_168":209,"_98":210},"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}`;",[],[202],{"_102":212,"_95":213,"_154":214,"_156":-5,"_157":139,"_158":215,"_160":116,"_104":216,"_99":32,"_162":207,"_164":217,"_166":22,"_167":-5,"_168":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],{"_102":221,"_95":222,"_154":223,"_156":-5,"_157":139,"_158":224,"_160":116,"_104":225,"_99":226,"_162":207,"_164":227,"_166":22,"_167":-5,"_168":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],{"_102":231,"_95":232,"_154":233,"_156":-5,"_157":139,"_158":138,"_160":116,"_104":234,"_99":226,"_162":207,"_164":235,"_166":22,"_167":-5,"_168":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],{"_102":239,"_95":240,"_154":241,"_156":-5,"_157":139,"_158":118,"_160":116,"_104":242,"_99":206,"_162":186,"_164":243,"_166":22,"_167":-5,"_168":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",[151,171,180,190,200,211,220,230,238],"counts",{"_250":32,"_251":226,"_252":32,"_253":254},"pulls","branches","forks","envVars",{"_255":32,"_256":32},"count","emptyCount","contents",[259,262,265,268,271,274,277,280,283],{"_102":152,"_95":153,"_154":155,"_156":-5,"_157":139,"_158":159,"_160":116,"_104":260,"_99":32,"_162":163,"_164":165,"_166":22,"_167":-5,"_98":261},["D",1745451208224],[153],{"_102":172,"_95":173,"_154":174,"_156":-5,"_157":139,"_158":175,"_160":116,"_104":263,"_99":32,"_162":163,"_164":177,"_166":22,"_167":-5,"_98":264},["D",1745451208225],[173],{"_102":181,"_95":182,"_154":114,"_156":-5,"_157":139,"_158":183,"_160":116,"_104":266,"_99":185,"_162":186,"_164":187,"_166":22,"_167":-5,"_98":267},["D",1745451208159],[182],{"_102":191,"_95":192,"_154":193,"_156":-5,"_157":139,"_158":194,"_160":116,"_104":269,"_99":196,"_162":186,"_164":197,"_166":22,"_167":-5,"_98":270},["D",1745451867517],[192],{"_102":201,"_95":202,"_154":203,"_156":-5,"_157":139,"_158":204,"_160":116,"_104":272,"_99":206,"_162":207,"_164":208,"_166":22,"_167":-5,"_98":273},["D",1745451797400],[202],{"_102":212,"_95":213,"_154":214,"_156":-5,"_157":139,"_158":215,"_160":116,"_104":275,"_99":32,"_162":207,"_164":217,"_166":22,"_167":-5,"_98":276},["D",1745451633152],[213],{"_102":221,"_95":222,"_154":223,"_156":-5,"_157":139,"_158":224,"_160":116,"_104":278,"_99":226,"_162":207,"_164":227,"_166":22,"_167":-5,"_98":279},["D",1745451844899],[222],{"_102":231,"_95":232,"_154":233,"_156":-5,"_157":139,"_158":138,"_160":116,"_104":281,"_99":226,"_162":207,"_164":235,"_166":22,"_167":-5,"_98":282},["D",1745452146321],[232],{"_102":239,"_95":240,"_154":241,"_156":-5,"_157":139,"_158":118,"_160":116,"_104":284,"_99":206,"_162":186,"_164":243,"_166":22,"_167":-5,"_98":285},["D",1745452053816],[240],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_93":94,"_95":96,"_100":294,"_253":299},{"_102":103,"_95":96,"_104":295,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":114,"_115":116,"_117":118,"_119":32,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":296,"_133":297,"_136":298,"_148":22},["D",1745450398025],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_99":138,"_95":43,"_102":139,"_140":103,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":96,"_147":94},[],"actionData","errors"]

nbbaier

twitterCards

Environment variables