Val Town React + Hono Starter

\n I've been clicked{\" \"}\n times\n

\n );\n}",[],[156,175,182,189],[156,175,182],{"_105":200,"_96":201,"_157":202,"_159":176,"_160":142,"_161":203,"_163":22,"_107":204,"_101":205,"_166":206,"_168":207,"_169":22,"_170":-5,"_171":208,"_99":209},"ee37422e-be4f-11f0-92cf-42dde27851f2","favicon.svg","e78747d0-be4f-11f0-970a-42dde27851f2",61,["D",1762791095666],3,"file","\n",[],[156,175,201],{"_105":211,"_96":212,"_157":213,"_159":176,"_160":142,"_161":214,"_163":22,"_107":215,"_101":205,"_166":206,"_168":216,"_169":22,"_170":-5,"_171":217,"_99":218},"e02b36c2-be4f-11f0-90b2-42dde27851f2","index.html","db8e6030-be4f-11f0-95e9-42dde27851f2",57,["D",1762791072099],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[156,175,212],{"_105":220,"_96":221,"_157":222,"_159":176,"_160":142,"_161":223,"_163":22,"_107":224,"_101":205,"_166":206,"_168":225,"_169":22,"_170":-5,"_171":226,"_99":227},"d228a136-be4f-11f0-84e5-42dde27851f2","style.css","cc541d1c-be4f-11f0-8078-42dde27851f2",53,["D",1762791048593],"body {\n font-family: -apple-system, Arial, sans-serif;\n color: #333;\n padding: 20px;\n}\n\nbutton {\n background-color: #4a90e2;\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #357ae8;\n}",[],[156,175,221],[156,175],{"_105":230,"_96":231,"_157":232,"_159":158,"_160":142,"_161":102,"_163":22,"_107":233,"_101":193,"_166":234,"_168":235,"_169":22,"_170":-5,"_171":236,"_99":237},"22d02e9c-be50-11f0-8f0d-42dde27851f2","index.ts","aa274610-be4f-11f0-94a5-42dde27851f2",["D",1762791183911],"http","import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono@latest\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"./frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;",[],[156,231],[156],{"_105":240,"_96":241,"_157":242,"_159":-5,"_160":142,"_161":243,"_163":119,"_107":244,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":245,"_99":411},"c101d7f2-be4e-11f0-b3c9-42dde27851f2","src","c101d8b0-be4e-11f0-b3c9-42dde27851f2",5,["D",1762790590319],[246,367,376,385,393,402],{"_105":247,"_96":248,"_157":249,"_159":242,"_160":142,"_161":193,"_163":119,"_107":250,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":251,"_99":366},"c11f7636-be4e-11f0-be3b-42dde27851f2","api","c11f77c6-be4e-11f0-be3b-42dde27851f2",["D",1762790590523],[252,331,340,349,358],{"_105":253,"_96":254,"_157":255,"_159":249,"_160":142,"_161":256,"_163":119,"_107":257,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":258,"_99":330},"c1351612-be4e-11f0-8ef3-42dde27851f2","types","c13516d0-be4e-11f0-8ef3-42dde27851f2",7,["D",1762790590664],[259,268,277,285,294,303,312,321],{"_105":260,"_96":261,"_157":262,"_159":255,"_160":142,"_161":263,"_163":119,"_107":264,"_101":32,"_166":194,"_168":265,"_169":22,"_170":-5,"_171":266,"_99":267},"c195b21a-be4e-11f0-b3c9-42dde27851f2","edit.ts","c195b30a-be4e-11f0-b3c9-42dde27851f2",20,["D",1762790591241],"export interface TweetEditControl {\n edit_tweet_ids: string[]\n editable_until_msecs: string\n is_edit_eligible: boolean\n edits_remaining: string\n}\n",[],[241,248,254,261],{"_105":269,"_96":270,"_157":271,"_159":255,"_160":142,"_161":272,"_163":119,"_107":273,"_101":32,"_166":194,"_168":274,"_169":22,"_170":-5,"_171":275,"_99":276},"c17e995e-be4e-11f0-81ca-42dde27851f2","entities.ts","c17e9a1c-be4e-11f0-81ca-42dde27851f2",17,["D",1762790591142],"export type Indices = [number, number]\n\nexport interface HashtagEntity {\n indices: Indices\n text: string\n}\n\nexport interface UserMentionEntity {\n id_str: string\n indices: Indices\n name: string\n screen_name: string\n}\n\nexport interface MediaEntity {\n display_url: string\n expanded_url: string\n indices: Indices\n url: string\n}\n\nexport interface UrlEntity {\n display_url: string\n expanded_url: string\n indices: Indices\n url: string\n}\n\nexport interface SymbolEntity {\n indices: Indices\n text: string\n}\n\nexport interface TweetEntities {\n hashtags: HashtagEntity[]\n urls: UrlEntity[]\n user_mentions: UserMentionEntity[]\n symbols: SymbolEntity[]\n media?: MediaEntity[]\n}\n",[],[241,248,254,270],{"_105":278,"_96":231,"_157":279,"_159":255,"_160":142,"_161":280,"_163":119,"_107":281,"_101":32,"_166":194,"_168":282,"_169":22,"_170":-5,"_171":283,"_99":284},"c199ccb0-be4e-11f0-91ae-42dde27851f2","c199cd5a-be4e-11f0-91ae-42dde27851f2",21,["D",1762790591324],"export * from './edit.ts'\nexport * from './entities.ts'\nexport * from './media.ts'\nexport * from './photo.ts'\nexport * from './tweet.ts'\nexport * from './user.ts'\nexport * from './video.ts'\n",[],[241,248,254,231],{"_105":286,"_96":287,"_157":288,"_159":255,"_160":142,"_161":289,"_163":119,"_107":290,"_101":32,"_166":194,"_168":291,"_169":22,"_170":-5,"_171":292,"_99":293},"c19dd454-be4e-11f0-b3c9-42dde27851f2","media.ts","c19dd508-be4e-11f0-b3c9-42dde27851f2",22,["D",1762790591331],"import type { Indices } from './entities.ts'\n\nexport type RGB = {\n red: number\n green: number\n blue: number\n}\n\nexport type Rect = {\n x: number\n y: number\n w: number\n h: number\n}\n\nexport type Size = {\n h: number\n w: number\n resize: string\n}\n\nexport interface VideoInfo {\n aspect_ratio: [number, number]\n variants: {\n bitrate?: number\n content_type: 'video/mp4' | 'application/x-mpegURL'\n url: string\n }[]\n}\n\ninterface MediaBase {\n display_url: string\n expanded_url: string\n ext_media_availability: {\n status: string\n }\n ext_media_color: {\n palette: {\n percentage: number\n rgb: RGB\n }[]\n }\n indices: Indices\n media_url_https: string\n original_info: {\n height: number\n width: number\n focus_rects: Rect[]\n }\n sizes: {\n large: Size\n medium: Size\n small: Size\n thumb: Size\n }\n url: string\n}\n\nexport interface MediaPhoto extends MediaBase {\n type: 'photo'\n ext_alt_text?: string\n}\n\nexport interface MediaAnimatedGif extends MediaBase {\n type: 'animated_gif'\n video_info: VideoInfo\n}\n\nexport interface MediaVideo extends MediaBase {\n type: 'video'\n video_info: VideoInfo\n}\n\nexport type MediaDetails = MediaPhoto | MediaAnimatedGif | MediaVideo\n",[],[241,248,254,287],{"_105":295,"_96":296,"_157":297,"_159":255,"_160":142,"_161":298,"_163":119,"_107":299,"_101":32,"_166":194,"_168":300,"_169":22,"_170":-5,"_171":301,"_99":302},"c18cea9a-be4e-11f0-be3b-42dde27851f2","photo.ts","c18ceb4e-be4e-11f0-be3b-42dde27851f2",18,["D",1762790591166],"import type { Rect, RGB } from './media.ts'\n\nexport interface TweetPhoto {\n backgroundColor: RGB\n cropCandidates: Rect[]\n expandedUrl: string\n url: string\n width: number\n height: number\n}\n",[],[241,248,254,296],{"_105":304,"_96":305,"_157":306,"_159":255,"_160":142,"_161":307,"_163":119,"_107":308,"_101":32,"_166":194,"_168":309,"_169":22,"_170":-5,"_171":310,"_99":311},"c190e0e6-be4e-11f0-b9c8-42dde27851f2","tweet.ts","c190e19a-be4e-11f0-b9c8-42dde27851f2",19,["D",1762790591250],"import type { TweetEditControl } from './edit.ts'\nimport type { Indices, TweetEntities } from './entities.ts'\nimport type { MediaDetails } from './media.ts'\nimport type { TweetPhoto } from './photo.ts'\nimport type { TweetUser } from './user.ts'\nimport type { TweetVideo } from './video.ts'\n\n/**\n * Base tweet information shared by a tweet, a parent tweet and a quoted tweet.\n */\nexport interface TweetBase {\n /**\n * Language code of the tweet. E.g \"en\", \"es\".\n */\n lang: string\n /**\n * Creation date of the tweet in the format ISO 8601.\n */\n created_at: string\n /**\n * Text range of the tweet text.\n */\n display_text_range: Indices\n /**\n * All the entities that are part of the tweet. Like hashtags, mentions, urls, etc.\n */\n entities: TweetEntities\n /**\n * The unique identifier of the tweet.\n */\n id_str: string\n /**\n * The tweet text, including the raw text from the entities.\n */\n text: string\n /**\n * Information about the user who posted the tweet.\n */\n user: TweetUser\n /**\n * Edit information about the tweet.\n */\n edit_control: TweetEditControl\n isEdited: boolean\n isStaleEdit: boolean\n}\n\n/**\n * A tweet as returned by the the Twitter syndication API.\n */\nexport interface Tweet extends TweetBase {\n __typename: 'Tweet'\n favorite_count: number\n mediaDetails?: MediaDetails[]\n photos?: TweetPhoto[]\n video?: TweetVideo\n conversation_count: number\n news_action_type: 'conversation'\n quoted_tweet?: QuotedTweet\n in_reply_to_screen_name?: string\n in_reply_to_status_id_str?: string\n in_reply_to_user_id_str?: string\n parent?: TweetParent\n possibly_sensitive?: boolean\n}\n\n/**\n * The parent tweet of a tweet reply.\n */\nexport interface TweetParent extends TweetBase {\n reply_count: number\n retweet_count: number\n favorite_count: number\n}\n\n/**\n * A tweet quoted by another tweet.\n */\nexport interface QuotedTweet extends TweetBase {\n reply_count: number\n retweet_count: number\n favorite_count: number\n mediaDetails?: MediaDetails[]\n self_thread: {\n id_str: string\n }\n}\n",[],[241,248,254,305],{"_105":313,"_96":314,"_157":315,"_159":255,"_160":142,"_161":316,"_163":119,"_107":317,"_101":32,"_166":194,"_168":318,"_169":22,"_170":-5,"_171":319,"_99":320},"c1a0cace-be4e-11f0-91ae-42dde27851f2","user.ts","c1a0cb82-be4e-11f0-91ae-42dde27851f2",23,["D",1762790591371],"export interface TweetUser {\n id_str: string\n name: string\n profile_image_url_https: string\n profile_image_shape: 'Circle' | 'Square' | 'Hexagon'\n screen_name: string\n verified: boolean\n verified_type?: 'Business' | 'Government'\n is_blue_verified: boolean\n}\n",[],[241,248,254,314],{"_105":322,"_96":323,"_157":324,"_159":255,"_160":142,"_161":325,"_163":119,"_107":326,"_101":32,"_166":194,"_168":327,"_169":22,"_170":-5,"_171":328,"_99":329},"c178aee0-be4e-11f0-8482-42dde27851f2","video.ts","c178afbc-be4e-11f0-8482-42dde27851f2",16,["D",1762790591103],"export interface TweetVideo {\n aspectRatio: [number, number]\n contentType: string\n durationMs: number\n mediaAvailability: {\n status: string\n }\n poster: string\n variants: {\n type: string\n src: string\n }[]\n videoId: {\n type: string\n id: string\n }\n viewCount: number\n}\n",[],[241,248,254,323],[241,248,254],{"_105":332,"_96":333,"_157":334,"_159":249,"_160":142,"_161":335,"_163":119,"_107":336,"_101":32,"_166":194,"_168":337,"_169":22,"_170":-5,"_171":338,"_99":339},"c1b3e564-be4e-11f0-a2ad-42dde27851f2","fetch-tweet.ts","c1b3e618-be4e-11f0-a2ad-42dde27851f2",25,["D",1762790591481],"import type { Tweet } from './types/index.ts'\n\nconst SYNDICATION_URL = 'https://cdn.syndication.twimg.com'\n\nexport class TwitterApiError extends Error {\n status: number\n data: any\n\n constructor({\n message,\n status,\n data,\n }: {\n message: string\n status: number\n data: any\n }) {\n super(message)\n this.name = 'TwitterApiError'\n this.status = status\n this.data = data\n }\n}\n\nconst TWEET_ID = /^[0-9]+$/\n\nfunction getToken(id: string) {\n return ((Number(id) / 1e15) * Math.PI)\n .toString(6 ** 2)\n .replace(/(0+|\\.)/g, '')\n}\n\n/**\n * Fetches a tweet from the Twitter syndication API.\n */\nexport async function fetchTweet(\n id: string,\n fetchOptions?: RequestInit\n): Promise<{ data?: Tweet; tombstone?: true; notFound?: true }> {\n if (id.length > 40 || !TWEET_ID.test(id)) {\n throw new Error(`Invalid tweet id: ${id}`)\n }\n\n const url = new URL(`${SYNDICATION_URL}/tweet-result`)\n\n url.searchParams.set('id', id)\n url.searchParams.set('lang', 'en')\n url.searchParams.set(\n 'features',\n [\n 'tfw_timeline_list:',\n 'tfw_follower_count_sunset:true',\n 'tfw_tweet_edit_backend:on',\n 'tfw_refsrc_session:on',\n 'tfw_fosnr_soft_interventions_enabled:on',\n 'tfw_show_birdwatch_pivots_enabled:on',\n 'tfw_show_business_verified_badge:on',\n 'tfw_duplicate_scribes_to_settings:on',\n 'tfw_use_profile_image_shape_enabled:on',\n 'tfw_show_blue_verified_badge:on',\n 'tfw_legacy_timeline_sunset:true',\n 'tfw_show_gov_verified_badge:on',\n 'tfw_show_business_affiliate_badge:on',\n 'tfw_tweet_edit_frontend:on',\n ].join(';')\n )\n url.searchParams.set('token', getToken(id))\n\n const res = await fetch(url.toString(), fetchOptions)\n const isJson = res.headers.get('content-type')?.includes('application/json')\n const data = isJson ? await res.json() : undefined\n\n if (res.ok) {\n if (data?.__typename === 'TweetTombstone') {\n return { tombstone: true }\n }\n if (data && Object.keys(data).length === 0) {\n return { notFound: true }\n }\n return { data }\n }\n if (res.status === 404) {\n return { notFound: true }\n }\n\n throw new TwitterApiError({\n message:\n typeof data.error === 'string'\n ? data.error\n : `Failed to fetch tweet at \"${url}\" with \"${res.status}\".`,\n status: res.status,\n data,\n })\n}\n",[],[241,248,333],{"_105":341,"_96":342,"_157":343,"_159":249,"_160":142,"_161":344,"_163":119,"_107":345,"_101":32,"_166":194,"_168":346,"_169":22,"_170":-5,"_171":347,"_99":348},"c1b9dfe6-be4e-11f0-91ae-42dde27851f2","get-oembed.ts","c1b9e0c2-be4e-11f0-91ae-42dde27851f2",27,["D",1762790591501],"export async function getOEmbed(url: string): Promise {\n const res = await fetch(`https://publish.twitter.com/oembed?url=${url}`)\n\n if (res.ok) return res.json()\n if (res.status === 404) return\n\n throw new Error(`Fetch for embedded tweet failed with code: ${res.status}`)\n}\n",[],[241,248,342],{"_105":350,"_96":351,"_157":352,"_159":249,"_160":142,"_161":353,"_163":119,"_107":354,"_101":32,"_166":194,"_168":355,"_169":22,"_170":-5,"_171":356,"_99":357},"c1af25f6-be4e-11f0-b9c8-42dde27851f2","get-tweet.ts","c1af26c8-be4e-11f0-b9c8-42dde27851f2",24,["D",1762790591461],"import { fetchTweet } from './fetch-tweet.ts'\nimport type { Tweet } from './types/index.ts'\n\n/**\n * Returns a tweet from the Twitter syndication API.\n */\nexport async function getTweet(\n id: string,\n fetchOptions?: RequestInit\n): Promise {\n const { data, tombstone, notFound } = await fetchTweet(id, fetchOptions)\n\n if (notFound) {\n console.error(\n `The tweet ${id} does not exist or has been deleted by the account owner. Update your code to remove this tweet when possible.`\n )\n } else if (tombstone) {\n console.error(\n `The tweet ${id} has been made private by the account owner. Update your code to remove this tweet when possible.`\n )\n }\n\n return data\n}\n",[],[241,248,351],{"_105":359,"_96":231,"_157":360,"_159":249,"_160":142,"_161":361,"_163":119,"_107":362,"_101":32,"_166":194,"_168":363,"_169":22,"_170":-5,"_171":364,"_99":365},"c1b686b6-be4e-11f0-be3b-42dde27851f2","c1b687a6-be4e-11f0-be3b-42dde27851f2",26,["D",1762790591513],"export * from './types/index.ts'\nexport * from './fetch-tweet.ts'\nexport * from './get-tweet.ts'\nexport * from './get-oembed.ts'\n",[],[241,248,231],[241,248],{"_105":368,"_96":369,"_157":370,"_159":242,"_160":142,"_161":371,"_163":22,"_107":372,"_101":32,"_166":194,"_168":373,"_169":22,"_170":-5,"_171":374,"_99":375},"c1732f74-be4e-11f0-bb31-42dde27851f2","components.tsx","c1733050-be4e-11f0-bb31-42dde27851f2",15,["D",1762790591054],"/** @jsxImportSource npm:react */\nimport type { ReactNode } from \"npm:react\";\nimport type { Tweet, EnrichedTweet, EnrichedQuotedTweet, TweetUser } from \"./api/types/index.ts\";\nimport { enrichTweet, formatNumber, formatDate, getMediaUrl } from \"./utils.ts\";\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type TwitterComponents = {\n TweetNotFound?: () => JSX.Element;\n AvatarImg?: (props: { src: string; alt: string; width: number; height: number }) => JSX.Element;\n MediaImg?: (props: { src: string; alt: string }) => JSX.Element;\n};\n\n// =============================================================================\n// Helper Components\n// =============================================================================\n\nconst TweetLink = ({ href, children }: { href: string; children: ReactNode }) => (\n \n {children}\n \n);\n\n// =============================================================================\n// Avatar Component\n// =============================================================================\n\nconst AvatarImg = ({ src, alt, width, height }: { src: string; alt: string; width: number; height: number }) => (\n {alt}

\n);\n\nconst MediaImg = ({ src, alt }: { src: string; alt: string }) => (\n {alt}

\n);\n\n// =============================================================================\n// Verified Badge Component\n// =============================================================================\n\nconst VerifiedBadge = ({ user, className }: { user: TweetUser; className?: string }) => {\n if (!user.verified && !user.is_blue_verified && !user.verified_type) {\n return null;\n }\n\n const iconColor = user.is_blue_verified || user.verified_type === \"Blue\"\n ? \"[rgb(29,155,240)]\"\n : \"[rgb(130,154,171)]\";\n\n return (\n \n \n \n \n \n \n \n );\n};\n\n// =============================================================================\n// Tweet Container Component\n// =============================================================================\n\nexport const TweetContainer = ({ children, className }: { children: ReactNode; className?: string }) => (\n \n

{children}

\n \n);\n\n// =============================================================================\n// Tweet Header Component\n// =============================================================================\n\nexport const TweetHeader = ({ tweet, components }: { tweet: EnrichedTweet; components?: TwitterComponents }) => {\n const Img = components?.AvatarImg ?? AvatarImg;\n const { user } = tweet;\n const isSquare = user.profile_image_shape === \"Square\";\n\n return (\n

\n \n

\n {user.name}\n

\n \n \n

\n \n @{user.screen_name}\n \n

\n ·\n \n Follow\n \n

\n \n \n \n

\n );\n};\n\n// =============================================================================\n// Tweet In Reply To Component\n// =============================================================================\n\nexport const TweetInReplyTo = ({ tweet }: { tweet: EnrichedTweet }) =>\n tweet.in_reply_to_url ? (\n \n \n Replying to @{tweet.in_reply_to_screen_name}\n \n ) : null;\n\n// =============================================================================\n// Tweet Body Component\n// =============================================================================\n\nexport const TweetBody = ({ tweet }: { tweet: EnrichedTweet }) => (\n

\n {tweet.entities.map((item, i) => {\n switch (item.type) {\n case \"hashtag\":\n case \"mention\":\n case \"url\":\n case \"symbol\":\n return (\n \n {item.text}\n \n );\n case \"media\":\n return null;\n default:\n return ;\n }\n })}\n

\n);\n\n// =============================================================================\n// Tweet Media Component\n// =============================================================================\n\nexport const TweetMedia = ({ tweet, components }: { tweet: EnrichedTweet; components?: TwitterComponents }) => {\n const Img = components?.MediaImg ?? MediaImg;\n const mediaDetails = tweet.mediaDetails ?? [];\n const mediaCount = mediaDetails.length;\n\n if (mediaCount === 0) return null;\n\n const gridClass =\n mediaCount === 1\n ? \"\"\n : mediaCount === 2\n ? \"grid grid-cols-2 gap-0.5\"\n : mediaCount === 3\n ? \"grid grid-cols-2 gap-0.5 [&>a:first-child]:row-span-2\"\n : \"grid grid-cols-2 grid-rows-2 gap-0.5\";\n\n return (\n

\n {mediaDetails.map((media, i) => (\n \n

\n {media.type === \"photo\" ? (\n ${media.ext_alt_text$ \n ) : media.type === \"video\" || media.type === \"animated_gif\" ? (\n

\n $\"Video$ \n

\n \n

\n ) : null}\n

\n \n ))}\n

\n );\n};\n\n// =============================================================================\n// Tweet Info Component\n// =============================================================================\n\nexport const TweetInfo = ({ tweet }: { tweet: EnrichedTweet }) => {\n const createdAt = new Date(tweet.created_at);\n const formattedDate = formatDate(createdAt);\n\n return (\n

\n \n {formattedDate}\n \n \n \n \n

\n );\n};\n\n// =============================================================================\n// Tweet Actions Component\n// =============================================================================\n\nexport const TweetActions = ({ tweet }: { tweet: EnrichedTweet }) => (\n

\n \n

\n Reply\n \n \n

\n \n

\n \n {tweet.favorite_count > 0 ? formatNumber(tweet.favorite_count) : \"Like\"}\n \n \n

\n);\n\n// =============================================================================\n// Tweet Replies Component\n// =============================================================================\n\nexport const TweetReplies = ({ tweet }: { tweet: EnrichedTweet }) =>\n tweet.conversation_count && tweet.conversation_count > 0 ? (\n \n Read {formatNumber(tweet.conversation_count)} {tweet.conversation_count === 1 ? \"reply\" : \"replies\"}\n \n ) : null;\n\n// =============================================================================\n// Tweet Not Found Component\n// =============================================================================\n\nexport const TweetNotFound = () => (\n \n

\n \n

\n This tweet is unavailable\n

\n \n);\n\n// =============================================================================\n// Quoted Tweet Component\n// =============================================================================\n\nexport const QuotedTweet = ({ tweet, components }: { tweet: EnrichedQuotedTweet; components?: TwitterComponents }) => {\n const Img = components?.MediaImg ?? MediaImg;\n\n return (\n

\n \n

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

\n {tweet.mediaDetails && tweet.mediaDetails.length > 0 && (\n

\n ${tweet.mediaDetails[0].ext_alt_text$ \n

\n )}\n \n

\n );\n};\n\n// =============================================================================\n// Tweet Skeleton Component\n// =============================================================================\n\nexport const TweetSkeleton = () => (\n \n

\n \n);\n\n// =============================================================================\n// Embedded Tweet Component (Main Composition)\n// =============================================================================\n\nexport const EmbeddedTweet = ({ tweet: t, components }: { tweet: Tweet; components?: Omit }) => {\n const tweet = enrichTweet(t);\n return (\n \n \n {tweet.in_reply_to_status_id_str && }\n \n {tweet.mediaDetails?.length ? : null}\n {tweet.quoted_tweet && }\n \n \n \n \n );\n};\n",[],[241,369],{"_105":377,"_96":378,"_157":379,"_159":242,"_160":142,"_161":380,"_163":119,"_107":381,"_101":32,"_166":194,"_168":382,"_169":22,"_170":-5,"_171":383,"_99":384},"c162a316-be4e-11f0-91ae-42dde27851f2","date-utils.ts","c162a3d4-be4e-11f0-91ae-42dde27851f2",12,["D",1762790590964],"type PartsObject = Record\n\nconst options: Intl.DateTimeFormatOptions = {\n hour: 'numeric',\n minute: '2-digit',\n hour12: true,\n weekday: 'short',\n month: 'short',\n day: 'numeric',\n year: 'numeric',\n}\n\nconst formatter = new Intl.DateTimeFormat('en-US', options)\n\nconst partsArrayToObject = (\n parts: ReturnType\n): PartsObject => {\n const result = {} as PartsObject\n\n for (const part of parts) {\n result[part.type] = part.value\n }\n\n return result\n}\n\nexport const formatDate = (date: Date) => {\n const parts = partsArrayToObject(formatter.formatToParts(date))\n const formattedTime = `${parts.hour}:${parts.minute} ${parts.dayPeriod}`\n const formattedDate = `${parts.month} ${parts.day}, ${parts.year}`\n return `${formattedTime} · ${formattedDate}`\n}\n",[],[241,378],{"_105":386,"_96":231,"_157":387,"_159":242,"_160":142,"_161":388,"_163":119,"_107":389,"_101":32,"_166":194,"_168":390,"_169":22,"_170":-5,"_171":391,"_99":392},"c1c9552a-be4e-11f0-81ca-42dde27851f2","c1c956a6-be4e-11f0-81ca-42dde27851f2",28,["D",1762790591632],"/**\n * react-tweet-valtown\n *\n * A Val Town-optimized version of react-tweet for server-side rendering\n * in Deno environments without bundlers.\n *\n * @example\n * ```tsx\n * import { Tweet } from \"./react-tweet-valtown/src/index.ts\";\n *\n * export default async function() {\n * return (\n * \n * \n * \n * \n * \n * \n * \n * \n * );\n * }\n * ```\n */\n\nexport * from \"./tweet.tsx\";\nexport * from \"./api/index.ts\";\nexport * from \"./utils.ts\";\nexport type * from \"./api/types.ts\";\n",[],[241,231],{"_105":394,"_96":395,"_157":396,"_159":242,"_160":142,"_161":397,"_163":22,"_107":398,"_101":32,"_166":194,"_168":399,"_169":22,"_170":-5,"_171":400,"_99":401},"c1655c3c-be4e-11f0-be3b-42dde27851f2","tweet.tsx","c1655d2c-be4e-11f0-be3b-42dde27851f2",13,["D",1762790590905],"/** @jsxImportSource npm:react */\nimport { getTweet } from \"./api/get-tweet.ts\";\nimport { EmbeddedTweet, TweetNotFound, TweetSkeleton } from \"./components.tsx\";\nimport type { TwitterComponents } from \"./components.tsx\";\n\nexport type TweetProps = {\n id: string;\n components?: TwitterComponents;\n fetchOptions?: RequestInit;\n fallback?: JSX.Element;\n onError?: (error: any) => any;\n};\n\n/**\n * Main Tweet component for Val Town (server-side only)\n *\n * Fetches and renders a tweet from Twitter's syndication API\n *\n * @example\n * ```tsx\n * \n * ```\n */\nexport const Tweet = async ({\n id,\n components,\n fetchOptions,\n fallback = ,\n onError,\n}: TweetProps) => {\n try {\n const tweet = await getTweet(id, fetchOptions);\n\n if (!tweet) {\n const NotFound = components?.TweetNotFound || TweetNotFound;\n return ;\n }\n\n return ;\n } catch (error) {\n if (onError) {\n onError(error);\n } else {\n console.error(\"Error fetching tweet:\", error);\n }\n\n const NotFound = components?.TweetNotFound || TweetNotFound;\n return ;\n }\n};\n\n/**\n * Export all components for custom usage\n */\nexport {\n EmbeddedTweet,\n TweetContainer,\n TweetHeader,\n TweetBody,\n TweetMedia,\n TweetActions,\n TweetInfo,\n TweetInReplyTo,\n TweetReplies,\n TweetNotFound,\n TweetSkeleton,\n QuotedTweet,\n} from \"./components.tsx\";\n\n/**\n * Export all API functions\n */\nexport { fetchTweet, getTweet, TwitterApiError } from \"./api/index.ts\";\n\n/**\n * Export all types\n */\nexport type { Tweet as TweetData, EnrichedTweet, TweetUser, TwitterComponents } from \"./components.tsx\";\nexport type { Tweet as TweetType, QuotedTweet as QuotedTweetType } from \"./api/types.ts\";\n\n/**\n * Export utilities\n */\nexport { enrichTweet, formatNumber, formatDate, getMediaUrl } from \"./utils.ts\";\n",[],[241,395],{"_105":403,"_96":404,"_157":405,"_159":242,"_160":142,"_161":406,"_163":119,"_107":407,"_101":32,"_166":194,"_168":408,"_169":22,"_170":-5,"_171":409,"_99":410},"c17018c0-be4e-11f0-91ae-42dde27851f2","utils.ts","c170197e-be4e-11f0-91ae-42dde27851f2",14,["D",1762790591051],"import type {\n TweetBase,\n Tweet,\n QuotedTweet,\n MediaDetails,\n HashtagEntity,\n SymbolEntity,\n Indices,\n UserMentionEntity,\n UrlEntity,\n MediaEntity,\n MediaAnimatedGif,\n MediaVideo,\n} from './api/index.ts'\n\nexport { formatDate } from './date-utils.ts'\n\nexport type TweetCoreProps = {\n id: string\n onError?(error: any): any\n}\n\nconst getTweetUrl = (tweet: TweetBase) =>\n `https://x.com/${tweet.user.screen_name}/status/${tweet.id_str}`\n\nconst getUserUrl = (usernameOrTweet: string | TweetBase) =>\n `https://x.com/${\n typeof usernameOrTweet === 'string'\n ? usernameOrTweet\n : usernameOrTweet.user.screen_name\n }`\n\nconst getLikeUrl = (tweet: TweetBase) =>\n `https://x.com/intent/like?tweet_id=${tweet.id_str}`\n\nconst getReplyUrl = (tweet: TweetBase) =>\n `https://x.com/intent/tweet?in_reply_to=${tweet.id_str}`\n\nconst getFollowUrl = (tweet: TweetBase) =>\n `https://x.com/intent/follow?screen_name=${tweet.user.screen_name}`\n\nconst getHashtagUrl = (hashtag: HashtagEntity) =>\n `https://x.com/hashtag/${hashtag.text}`\n\nconst getSymbolUrl = (symbol: SymbolEntity) =>\n `https://x.com/search?q=%24${symbol.text}`\n\nconst getInReplyToUrl = (tweet: Tweet) =>\n `https://x.com/${tweet.in_reply_to_screen_name}/status/${tweet.in_reply_to_status_id_str}`\n\nexport const getMediaUrl = (\n media: MediaDetails,\n size: 'small' | 'medium' | 'large'\n): string => {\n const url = new URL(media.media_url_https)\n const extension = url.pathname.split('.').pop()\n\n if (!extension) return media.media_url_https\n\n url.pathname = url.pathname.replace(`.${extension}`, '')\n url.searchParams.set('format', extension)\n url.searchParams.set('name', size)\n\n return url.toString()\n}\n\nexport const getMp4Videos = (media: MediaAnimatedGif | MediaVideo) => {\n const { variants } = media.video_info\n const sortedMp4Videos = variants\n .filter((vid) => vid.content_type === 'video/mp4')\n .sort((a, b) => (b.bitrate ?? 0) - (a.bitrate ?? 0))\n\n return sortedMp4Videos\n}\n\nexport const getMp4Video = (media: MediaAnimatedGif | MediaVideo) => {\n const mp4Videos = getMp4Videos(media)\n // Skip the highest quality video and use the next quality\n return mp4Videos.length > 1 ? mp4Videos[1] : mp4Videos[0]\n}\n\nexport const formatNumber = (n: number): string => {\n if (n > 999999) return `${(n / 1000000).toFixed(1)}M`\n if (n > 999) return `${(n / 1000).toFixed(1)}K`\n return n.toString()\n}\n\ntype TextEntity = {\n indices: Indices\n type: 'text'\n}\n\ntype TweetEntity =\n | HashtagEntity\n | UserMentionEntity\n | UrlEntity\n | MediaEntity\n | SymbolEntity\n\ntype EntityWithType =\n | TextEntity\n | (HashtagEntity & { type: 'hashtag' })\n | (UserMentionEntity & { type: 'mention' })\n | (UrlEntity & { type: 'url' })\n | (MediaEntity & { type: 'media' })\n | (SymbolEntity & { type: 'symbol' })\n\ntype Entity = {\n text: string\n} & (\n | TextEntity\n | (HashtagEntity & { type: 'hashtag'; href: string })\n | (UserMentionEntity & { type: 'mention'; href: string })\n | (UrlEntity & { type: 'url'; href: string })\n | (MediaEntity & { type: 'media'; href: string })\n | (SymbolEntity & { type: 'symbol'; href: string })\n)\n\nfunction getEntities(tweet: TweetBase): Entity[] {\n const textMap = Array.from(tweet.text)\n const result: EntityWithType[] = [\n { indices: tweet.display_text_range, type: 'text' },\n ]\n\n addEntities(result, 'hashtag', tweet.entities.hashtags)\n addEntities(result, 'mention', tweet.entities.user_mentions)\n addEntities(result, 'url', tweet.entities.urls)\n addEntities(result, 'symbol', tweet.entities.symbols)\n if (tweet.entities.media) {\n addEntities(result, 'media', tweet.entities.media)\n }\n fixRange(tweet, result)\n\n return result.map((entity) => {\n const text = textMap.slice(entity.indices[0], entity.indices[1]).join('')\n switch (entity.type) {\n case 'hashtag':\n return Object.assign(entity, { href: getHashtagUrl(entity), text })\n case 'mention':\n return Object.assign(entity, {\n href: getUserUrl(entity.screen_name),\n text,\n })\n case 'url':\n case 'media':\n return Object.assign(entity, {\n href: entity.expanded_url,\n text: entity.display_url,\n })\n case 'symbol':\n return Object.assign(entity, { href: getSymbolUrl(entity), text })\n default:\n return Object.assign(entity, { text })\n }\n })\n}\n\nfunction addEntities(\n result: EntityWithType[],\n type: EntityWithType['type'],\n entities: TweetEntity[]\n) {\n for (const entity of entities) {\n for (const [i, item] of result.entries()) {\n if (\n item.indices[0] > entity.indices[0] ||\n item.indices[1] < entity.indices[1]\n ) {\n continue\n }\n\n const items = [{ ...entity, type }] as EntityWithType[]\n\n if (item.indices[0] < entity.indices[0]) {\n items.unshift({\n indices: [item.indices[0], entity.indices[0]],\n type: 'text',\n })\n }\n if (item.indices[1] > entity.indices[1]) {\n items.push({\n indices: [entity.indices[1], item.indices[1]],\n type: 'text',\n })\n }\n\n result.splice(i, 1, ...items)\n break // Break out of the loop to avoid iterating over the new items\n }\n }\n}\n\n/**\n * Update display_text_range to work w/ Array.from\n * Array.from is unicode aware, unlike string.slice()\n */\nfunction fixRange(tweet: TweetBase, entities: EntityWithType[]) {\n if (\n tweet.entities.media &&\n tweet.entities.media[0].indices[0] < tweet.display_text_range[1]\n ) {\n tweet.display_text_range[1] = tweet.entities.media[0].indices[0]\n }\n const lastEntity = entities.at(-1)\n if (lastEntity && lastEntity.indices[1] > tweet.display_text_range[1]) {\n lastEntity.indices[1] = tweet.display_text_range[1]\n }\n}\n\nexport type EnrichedTweet = Omit & {\n url: string\n user: {\n url: string\n follow_url: string\n }\n like_url: string\n reply_url: string\n in_reply_to_url?: string\n entities: Entity[]\n quoted_tweet?: EnrichedQuotedTweet\n}\n\nexport type EnrichedQuotedTweet = Omit & {\n url: string\n entities: Entity[]\n}\n\n/**\n * Enriches a tweet with additional data used to more easily use the tweet in a UI.\n */\nexport const enrichTweet = (tweet: Tweet): EnrichedTweet => ({\n ...tweet,\n url: getTweetUrl(tweet),\n user: {\n ...tweet.user,\n url: getUserUrl(tweet),\n follow_url: getFollowUrl(tweet),\n },\n like_url: getLikeUrl(tweet),\n reply_url: getReplyUrl(tweet),\n in_reply_to_url: tweet.in_reply_to_screen_name\n ? getInReplyToUrl(tweet)\n : undefined,\n entities: getEntities(tweet),\n quoted_tweet: tweet.quoted_tweet\n ? {\n ...tweet.quoted_tweet,\n url: getTweetUrl(tweet.quoted_tweet),\n entities: getEntities(tweet.quoted_tweet),\n }\n : undefined,\n})\n",[],[241,404],[241],{"_105":413,"_96":414,"_157":415,"_159":-5,"_160":142,"_161":416,"_163":119,"_107":417,"_101":32,"_166":206,"_168":418,"_169":22,"_170":-5,"_171":419,"_99":420},"b4619f1e-be4e-11f0-b6bb-42dde27851f2",".vtignore","b461a036-be4e-11f0-b6bb-42dde27851f2",2,["D",1762790569141],".git\n.vscode\n.cursor\n.DS_Store\nnode_modules\nvendor",[],[414],{"_105":422,"_96":423,"_157":424,"_159":-5,"_160":142,"_161":425,"_163":119,"_107":426,"_101":32,"_166":206,"_168":427,"_169":22,"_170":-5,"_171":428,"_99":429},"b46c31c2-be4e-11f0-8c24-42dde27851f2","AGENTS.md","b46c3280-be4e-11f0-8c24-42dde27851f2",4,["D",1762790569139],"You are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider\n refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure\n about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious\n operations)\n- Follow modern ES6+ conventions and functional programming practices if\n possible\n\n## Types of triggers\n\n### 1. HTTP Trigger\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```ts\nexport default async function (req: Request) {\n return new Response(\"Hello World\");\n}\n```\n\nFiles that are HTTP triggers have http in their name like `foobar.http.tsx`\n\n### 2. Cron Triggers\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```ts\nexport default async function () {\n // Scheduled task code\n}\n```\n\nFiles that are Cron triggers have cron in their name like `foobar.cron.tsx`\n\n### 3. Email Triggers\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n // Process email\n}\n```\n\nFiles that are Email triggers have email in their name like `foobar.email.tsx`\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = \"todo_app_users_2\";\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(\n `SELECT * FROM ${TABLE_NAME} WHERE id = ?`,\n [1],\n);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add\n_2 or _3) to create a fresh table.\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n### Email\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({\n subject: \"Hi\",\n text: \"Hi\",\n html: \"

Hi

\",\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport {\n parseProject,\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\"\nurls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's _extremely importing_ to note that `parseProject` and other\nStandard Library utilities ONLY RUN ON THE SERVER. If you need access to this\ndata on the client, run it in the server and pass it to the client by splicing\nit into the HTML page or by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use\n `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})`\n instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode\n symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use:\n `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys)\n unless otherwise specified\n- **View Source:** Add a view source link by importing & using\n `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the\n client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add\n `` to HTML to capture\n client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local\n resolution; Avoid catches that merely log or return 500s. Let errors bubble up\n with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but\n generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure\n compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer\n simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with\n `?deps=react@18.2.0,react-dom@18.2.0` and start the file with\n `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same\n version\n- **Styling:** Default to using TailwindCSS via\n `` unless otherwise\n specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project\n files:\n ```ts\n import {\n readFile,\n serveFile,\n } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n\n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to\n see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:**\n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of\n React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with\n `export default app.fetch // This is the entry point for HTTP vals`",[],[423],{"_105":431,"_96":432,"_157":433,"_159":-5,"_160":142,"_161":434,"_163":119,"_107":435,"_101":32,"_166":206,"_168":436,"_169":22,"_170":-5,"_171":437,"_99":438},"c15294bc-be4e-11f0-91ae-42dde27851f2","README.md","c1529566-be4e-11f0-91ae-42dde27851f2",9,["D",1762790590823],"# react-tweet-valtown\n\nA Val Town-optimized version of [react-tweet](https://github.com/vercel/react-tweet) for server-side rendering in Deno environments without bundlers.\n\n## Features\n\n- ✅ **No Build Step Required** - Works directly in Val Town's Deno runtime\n- ✅ **Tailwind v4 Styling** - Uses Tailwind CDN for beautiful, responsive tweets\n- ✅ **Server-Side Only** - Optimized for Val Town's server-side JSX rendering\n- ✅ **Full TypeScript Support** - Complete type definitions included\n- ✅ **Twitter API Integration** - Fetches tweets from Twitter's syndication API\n- ✅ **Dark Mode Support** - Automatic dark mode via Tailwind\n- ✅ **Verified Badges** - Shows verification status\n- ✅ **Media Support** - Images, videos, and GIFs\n- ✅ **Quoted Tweets** - Displays quoted tweets inline\n- ✅ **Reply Threads** - Shows reply context\n\n## Quick Start\n\n### 1. Create a new HTTP Val in Val Town\n\n```tsx\n/** @jsxImportSource npm:react */\nimport { Tweet } from \"./react-tweet-valtown/src/index.ts\";\n\nexport default async function(req: Request) {\n const url = new URL(req.url);\n const tweetId = url.searchParams.get(\"id\") || \"1683899539984359424\";\n\n return new Response(\n \n \n \n \n Tweet {tweetId}\n\n {/* Required: Tailwind v4 CDN */}\n \n \n \n \n \n ,\n {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" }\n }\n );\n}\n```\n\n### 2. That's it! 🎉\n\nYour tweet will be fetched and rendered server-side with full styling.\n\n## Usage\n\n### Basic Tweet\n\n```tsx\n\n```\n\n### Multiple Tweets\n\n```tsx\n

\n \n \n

\n```\n\n### Custom Fallback\n\n```tsx\nLoading tweet...}\n/>\n```\n\n### Error Handling\n\n```tsx\n console.error(\"Failed to load tweet:\", error)}\n/>\n```\n\n### Custom Components\n\n```tsx\n

This tweet could not be found

,\n AvatarImg: (props) => ,\n MediaImg: (props) => \n }}\n/>\n```\n\n## API\n\n### ``\n\nMain component for rendering tweets.\n\n**Props:**\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `id` | `string` | Required | The tweet ID to fetch and render |\n| `components` | `TwitterComponents` | `undefined` | Custom component overrides |\n| `fetchOptions` | `RequestInit` | `undefined` | Custom fetch options for the Twitter API |\n| `fallback` | `JSX.Element` | `` | Fallback component while loading |\n| `onError` | `(error: any) => any` | `undefined` | Error handler callback |\n\n### `fetchTweet(id: string, fetchOptions?: RequestInit)`\n\nFetches a tweet from Twitter's syndication API.\n\n```tsx\nimport { fetchTweet } from \"./react-tweet-valtown/src/index.ts\";\n\nconst result = await fetchTweet(\"1683899539984359424\");\nif (result.data) {\n console.log(result.data);\n}\n```\n\n**Returns:**\n```typescript\n{\n data?: Tweet; // Tweet data if found\n tombstone?: true; // True if tweet is private\n notFound?: true; // True if tweet doesn't exist\n}\n```\n\n### `getTweet(id: string, fetchOptions?: RequestInit)`\n\nWrapper around `fetchTweet` that returns just the tweet data.\n\n```tsx\nimport { getTweet } from \"./react-tweet-valtown/src/index.ts\";\n\nconst tweet = await getTweet(\"1683899539984359424\");\nif (tweet) {\n console.log(tweet.text);\n}\n```\n\n**Returns:** `Promise`\n\n### `enrichTweet(tweet: Tweet)`\n\nEnriches a tweet with additional computed properties.\n\n```tsx\nimport { enrichTweet, getTweet } from \"./react-tweet-valtown/src/index.ts\";\n\nconst tweet = await getTweet(\"1683899539984359424\");\nif (tweet) {\n const enriched = enrichTweet(tweet);\n console.log(enriched.url); // https://x.com/user/status/123...\n console.log(enriched.user.url); // https://x.com/user\n console.log(enriched.like_url); // https://x.com/intent/like?tweet_id=123...\n}\n```\n\n### Utility Functions\n\n```tsx\nimport { formatNumber, formatDate, getMediaUrl } from \"./react-tweet-valtown/src/index.ts\";\n\nformatNumber(1234567); // \"1.2M\"\nformatNumber(1234); // \"1.2K\"\n\nconst date = new Date(\"2024-01-15T12:00:00Z\");\nformatDate(date); // \"12:00 PM · Jan 15, 2024\"\n\ngetMediaUrl(media, \"small\"); // Formatted media URL\ngetMediaUrl(media, \"medium\");\ngetMediaUrl(media, \"large\");\n```\n\n## Styling\n\n### Default Styling\n\nThe package uses Tailwind v4 for styling. Include the CDN in your HTML:\n\n```html\n\n```\n\n### Dark Mode\n\nDark mode is automatically supported via Tailwind's dark mode:\n\n```html\n\n \n\n```\n\nOr use system preference:\n\n```html\n\n\n \n \n \n \n \n \n\n```\n\n### Custom Theme\n\nCustomize colors using Tailwind's theme configuration:\n\n```html\n\n```\n\n### Custom CSS\n\nAdd your own styles:\n\n```html\n\n```\n\n## Components\n\nAll components are exported and can be used individually:\n\n```tsx\nimport {\n Tweet, // Main component\n EmbeddedTweet, // Tweet without data fetching\n TweetContainer, // Container wrapper\n TweetHeader, // Author info and avatar\n TweetBody, // Tweet text\n TweetMedia, // Images/videos\n TweetActions, // Like, reply buttons\n TweetInfo, // Date and metadata\n TweetInReplyTo, // Reply context\n TweetReplies, // Reply count\n TweetNotFound, // Error state\n TweetSkeleton, // Loading state\n QuotedTweet, // Quoted tweet component\n} from \"./react-tweet-valtown/src/index.ts\";\n```\n\n### Custom Composition\n\n```tsx\nimport { getTweet, enrichTweet, EmbeddedTweet } from \"./react-tweet-valtown/src/index.ts\";\n\nexport default async function() {\n const tweet = await getTweet(\"123\");\n if (!tweet) return

Not found

;\n\n return ;\n}\n```\n\n## TypeScript\n\nFull TypeScript support with comprehensive type definitions:\n\n```tsx\nimport type {\n Tweet,\n EnrichedTweet,\n TweetUser,\n TwitterComponents,\n TweetProps,\n} from \"./react-tweet-valtown/src/index.ts\";\n\nconst customComponent: TwitterComponents = {\n TweetNotFound: () =>

Custom not found

\n};\n```\n\n## Differences from Original react-tweet\n\n| Feature | react-tweet | react-tweet-valtown |\n|---------|-------------|---------------------|\n| **Build Step** | Required (SWC/Webpack) | Not required ✅ |\n| **Styling** | CSS Modules | Tailwind v4 CDN |\n| **Runtime** | Node.js/Browser | Deno (Val Town) |\n| **Client-Side** | Supported (SWR) | Not supported ⚠️ |\n| **Server-Side** | Supported (RSC) | Supported ✅ |\n| **Import Syntax** | Standard npm | `npm:` prefix for npm packages |\n| **Bundler** | Vite/Next/Webpack | None required |\n\n### Not Supported\n\n- ❌ **Client-side rendering** - Val Town's JSX is server-only\n- ❌ **SWR variant** - No `useTweet()` hook\n- ❌ **Interactive features** - No onClick handlers or client state\n- ❌ **Custom fonts loading** - Use CDN fonts instead\n\n## Examples\n\n### Basic Example\n\nSee [`example.tsx`](./example.tsx) for a complete working example.\n\n### With Dark Mode Toggle\n\n```tsx\nexport default async function(req: Request) {\n const url = new URL(req.url);\n const theme = url.searchParams.get(\"theme\") || \"light\";\n\n return new Response(\n \n \n \n \n \n \n Dark | Light\n \n ,\n { headers: { \"Content-Type\": \"text/html; charset=utf-8\" } }\n );\n}\n```\n\n### With Custom Styling\n\n```tsx\nexport default async function() {\n return new Response(\n \n \n \n \n \n \n

My Tweets

\n \n

\n \n ,\n { headers: { \"Content-Type\": \"text/html; charset=utf-8\" } }\n );\n}\n```\n\n### Multiple Tweets from Search\n\n```tsx\nexport default async function(req: Request) {\n const tweetIds = [\n \"1683899539984359424\",\n \"1234567890\",\n \"9876543210\",\n ];\n\n return new Response(\n \n \n \n \n \n

\n {tweetIds.map(id => (\n \n ))}\n

\n \n ,\n { headers: { \"Content-Type\": \"text/html; charset=utf-8\" } }\n );\n}\n```\n\n## Troubleshooting\n\n### Tweet not loading\n\nMake sure the tweet ID is correct and the tweet is public. Private or deleted tweets will show the \"not found\" component.\n\n### Styling not working\n\nEnsure you've included the Tailwind CDN script:\n\n```html\n\n```\n\n### Import errors\n\nMake sure you're using the correct import syntax for Val Town:\n\n```tsx\n/** @jsxImportSource npm:react */ // Required at top of file\nimport { Tweet } from \"./react-tweet-valtown/src/index.ts\"; // Local file\n```\n\n### Type errors\n\nEnsure your Val Town is using TypeScript mode. Add the JSX pragma at the top of your file.\n\n## Performance\n\n- **Server-side rendering**: Fast initial load, no client-side JavaScript needed for display\n- **Tailwind CDN**: ~50KB (cached across sites)\n- **Tweet data**: Fetched once per render from Twitter's CDN\n- **Caching**: Implement your own caching layer if needed\n\n### Recommended Caching\n\n```tsx\nconst tweetCache = new Map();\n\nexport default async function(req: Request) {\n const id = new URL(req.url).searchParams.get(\"id\") || \"123\";\n\n if (!tweetCache.has(id)) {\n const tweet = await getTweet(id);\n tweetCache.set(id, tweet);\n }\n\n const tweet = tweetCache.get(id);\n // ... render tweet\n}\n```\n\n## Contributing\n\nThis is an adaptation of the original [react-tweet](https://github.com/vercel/react-tweet) package. Please report Val Town-specific issues in this repository.\n\n## License\n\nMIT - Same as the original react-tweet package.\n\n## Credits\n\n- Original package: [react-tweet](https://github.com/vercel/react-tweet) by Vercel\n- Adapted for Val Town by converting CSS Modules to Tailwind v4\n- Twitter API integration maintained from original\n\n## Links\n\n- [Val Town](https://val.town)\n- [Original react-tweet](https://github.com/vercel/react-tweet)\n- [Tailwind CSS v4](https://tailwindcss.com)\n- [Deno](https://deno.land)\n",[],[432],{"_105":440,"_96":441,"_157":442,"_159":-5,"_160":142,"_161":205,"_163":119,"_107":443,"_101":32,"_166":206,"_168":444,"_169":22,"_170":-5,"_171":445,"_99":446},"b465747c-be4e-11f0-82bf-42dde27851f2","biome.json","b4657558-be4e-11f0-82bf-42dde27851f2",["D",1762790569135],"{\n\t\"$schema\": \"https://biomejs.dev/schemas/2.3.4/schema.json\",\n\t\"vcs\": {\n\t\t\"enabled\": false,\n\t\t\"clientKind\": \"git\",\n\t\t\"useIgnoreFile\": false\n\t},\n\t\"files\": {\n\t\t\"ignoreUnknown\": false\n\t},\n\t\"formatter\": {\n\t\t\"enabled\": true,\n\t\t\"indentStyle\": \"tab\"\n\t},\n\t\"linter\": {\n\t\t\"enabled\": true,\n\t\t\"rules\": {\n\t\t\t\"recommended\": true\n\t\t}\n\t},\n\t\"javascript\": {\n\t\t\"formatter\": {\n\t\t\t\"quoteStyle\": \"double\"\n\t\t}\n\t},\n\t\"assist\": {\n\t\t\"enabled\": true,\n\t\t\"actions\": {\n\t\t\t\"source\": {\n\t\t\t\t\"organizeImports\": \"on\"\n\t\t\t}\n\t\t}\n\t}\n}\n",[],[441],{"_105":448,"_96":449,"_157":450,"_159":-5,"_160":142,"_161":165,"_163":119,"_107":451,"_101":32,"_166":206,"_168":452,"_169":22,"_170":-5,"_171":453,"_99":454},"b45cf644-be4e-11f0-b3e5-42dde27851f2","deno.json","b45cf72a-be4e-11f0-b3e5-42dde27851f2",["D",1762790569113],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"compilerOptions\": {\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ],\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"]\n },\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-sloppy-imports\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true\n },\n \"imports\": {\n \"@biomejs/biome\": \"npm:@biomejs/biome@^2.3.4\"\n },\n \"lint\": {\n \"files\": {\n \"include\": [\"deno:/https/esm.town/**/*\"]\n },\n \"rules\": {\n \"exclude\": [\"no-explicit-any\", \"no-import-prefix\"]\n }\n },\n \"lock\": false,\n \"nodeModulesDir\": \"auto\"\n}",[],[449],{"_105":456,"_96":457,"_157":117,"_159":-5,"_160":142,"_161":458,"_163":119,"_107":459,"_101":425,"_166":234,"_168":460,"_169":22,"_170":-5,"_171":461,"_99":462},"f30a3aaa-be4e-11f0-8bbd-42dde27851f2","example.tsx",32,["D",1762790674262],"/** @jsxImportSource https://esm.sh/react@19.1.0 */\nimport { Tweet } from \"./src/index.ts\";\n\nexport default async function (req: Request): Promise {\n // Get tweet ID from URL query parameter or use default\n const url = new URL(req.url);\n const tweetId = url.searchParams.get(\"id\") || \"1683899539984359424\";\n\n // You can also get multiple tweet IDs\n const tweets = url.searchParams.getAll(\"tweets\");\n\n const html = (\n \n \n \n \n Tweet {tweetId} - react-tweet-valtown\n\n {/* Tailwind v4 CDN - Required for styling */}\n \n\n {/* Optional: Custom Tailwind theme */}\n \n\n {/* Optional: Additional page styles */}\n \n \n \n

react-tweet-valtown Example

\n\n {/* Single Tweet */}\n \n\n {/* Multiple Tweets */}\n {tweets.length > 0 && (\n <>\n

Multiple Tweets

\n {tweets.map((id) => )}\n \n )}\n\n {/* Instructions */}\n \n

Try different tweets:

\n Add your own: ?id=YOUR_TWEET_ID\n

\n \n \n \n );\n\n return new Response(html as any, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}",[],[457],{"_105":464,"_96":465,"_157":466,"_159":-5,"_160":142,"_161":467,"_163":119,"_107":468,"_101":32,"_166":206,"_168":469,"_169":22,"_170":-5,"_171":470,"_99":471},"c1589074-be4e-11f0-b819-42dde27851f2","package.json","c1589150-be4e-11f0-b819-42dde27851f2",10,["D",1762790590866],"{\n \"name\": \"react-tweet-valtown\",\n \"version\": \"1.0.0\",\n \"description\": \"A Val Town-optimized version of react-tweet for server-side rendering in Deno environments\",\n \"type\": \"module\",\n \"main\": \"./src/index.ts\",\n \"types\": \"./src/index.ts\",\n \"exports\": {\n \".\": \"./src/index.ts\",\n \"./api\": \"./src/api/index.ts\",\n \"./components\": \"./src/components.tsx\",\n \"./tweet\": \"./src/tweet.tsx\",\n \"./utils\": \"./src/utils.ts\"\n },\n \"files\": [\n \"src/**/*.ts\",\n \"src/**/*.tsx\",\n \"README.md\",\n \"example.tsx\",\n \"tailwind-theme.html\"\n ],\n \"keywords\": [\n \"react\",\n \"tweet\",\n \"twitter\",\n \"x\",\n \"embed\",\n \"valtown\",\n \"val-town\",\n \"deno\",\n \"tailwind\",\n \"server-side-rendering\",\n \"ssr\"\n ],\n \"author\": \"Adapted from react-tweet by Vercel\",\n \"license\": \"MIT\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/vercel/react-tweet\",\n \"directory\": \"packages/react-tweet-valtown\"\n },\n \"peerDependencies\": {\n \"react\": \"^18.0.0 || ^19.0.0\"\n },\n \"dependencies\": {},\n \"devDependencies\": {},\n \"engines\": {\n \"deno\": \">=2.0.0\"\n },\n \"readme\": \"README.md\"\n}\n",[],[465],{"_105":473,"_96":474,"_157":475,"_159":-5,"_160":142,"_161":476,"_163":22,"_107":477,"_101":32,"_166":206,"_168":478,"_169":22,"_170":-5,"_171":479,"_99":480},"c14d6aa0-be4e-11f0-8abc-42dde27851f2","tailwind-theme.html","c14d6bb8-be4e-11f0-8abc-42dde27851f2",8,["D",1762790590822],"\n\n\n",[],[474],"files",[154,173,180,187,199,210,219,229,239,246,252,259,268,277,285,294,303,312,321,331,340,349,358,367,376,385,393,402,412,421,430,439,447,455,463,472],"counts",{"_485":32,"_486":165,"_487":32,"_488":489},"pulls","branches","forks","envVars",{"_490":32,"_491":32},"count","emptyCount","contents",[],{"_105":230,"_96":231,"_157":232,"_159":158,"_160":142,"_161":102,"_163":22,"_107":495,"_101":193,"_166":234,"_168":235,"_169":22,"_170":-5,"_99":496},["D",1762791183911],[156,231],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":44,"_101":102,"_99":100,"_103":505,"_152":510,"_481":619,"_206":620,"_492":622,"_623":-5,"_624":-5,"_625":-5,"_626":-5,"_627":628,"_488":-5},{"_105":106,"_96":97,"_107":506,"_109":-5,"_110":22,"_111":112,"_113":73,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":119,"_121":-5,"_122":32,"_16":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":507,"_136":508,"_139":509,"_151":22},["D",1762790512169],{"_94":95,"_134":135},{"_94":95,"_138":135,"_14":115},{"_101":141,"_96":44,"_105":142,"_143":106,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":97,"_150":95},[511,535,595,598,601,604,607,610,613,616],{"_105":155,"_96":156,"_157":158,"_159":-5,"_160":142,"_161":162,"_163":22,"_107":164,"_101":165,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":512,"_99":534},[513,531],{"_105":174,"_96":175,"_157":176,"_159":158,"_160":142,"_161":177,"_163":22,"_107":178,"_101":165,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":514,"_99":530},[515,521,524,527],{"_105":181,"_96":182,"_157":183,"_159":176,"_160":142,"_161":184,"_163":22,"_107":185,"_101":165,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":516,"_99":520},[517],{"_105":188,"_96":189,"_157":190,"_159":183,"_160":142,"_161":191,"_163":22,"_107":192,"_101":193,"_166":194,"_168":195,"_169":22,"_170":-5,"_171":518,"_99":519},[],[156,175,182,189],[156,175,182],{"_105":200,"_96":201,"_157":202,"_159":176,"_160":142,"_161":203,"_163":22,"_107":204,"_101":205,"_166":206,"_168":207,"_169":22,"_170":-5,"_171":522,"_99":523},[],[156,175,201],{"_105":211,"_96":212,"_157":213,"_159":176,"_160":142,"_161":214,"_163":22,"_107":215,"_101":205,"_166":206,"_168":216,"_169":22,"_170":-5,"_171":525,"_99":526},[],[156,175,212],{"_105":220,"_96":221,"_157":222,"_159":176,"_160":142,"_161":223,"_163":22,"_107":224,"_101":205,"_166":206,"_168":225,"_169":22,"_170":-5,"_171":528,"_99":529},[],[156,175,221],[156,175],{"_105":230,"_96":231,"_157":232,"_159":158,"_160":142,"_161":102,"_163":22,"_107":233,"_101":193,"_166":234,"_168":235,"_169":22,"_170":-5,"_171":532,"_99":533},[],[156,231],[156],{"_105":240,"_96":241,"_157":242,"_159":-5,"_160":142,"_161":243,"_163":119,"_107":244,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":536,"_99":594},[537,579,582,585,588,591],{"_105":247,"_96":248,"_157":249,"_159":242,"_160":142,"_161":193,"_163":119,"_107":250,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":538,"_99":578},[539,566,569,572,575],{"_105":253,"_96":254,"_157":255,"_159":249,"_160":142,"_161":256,"_163":119,"_107":257,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":540,"_99":565},[541,544,547,550,553,556,559,562],{"_105":260,"_96":261,"_157":262,"_159":255,"_160":142,"_161":263,"_163":119,"_107":264,"_101":32,"_166":194,"_168":265,"_169":22,"_170":-5,"_171":542,"_99":543},[],[241,248,254,261],{"_105":269,"_96":270,"_157":271,"_159":255,"_160":142,"_161":272,"_163":119,"_107":273,"_101":32,"_166":194,"_168":274,"_169":22,"_170":-5,"_171":545,"_99":546},[],[241,248,254,270],{"_105":278,"_96":231,"_157":279,"_159":255,"_160":142,"_161":280,"_163":119,"_107":281,"_101":32,"_166":194,"_168":282,"_169":22,"_170":-5,"_171":548,"_99":549},[],[241,248,254,231],{"_105":286,"_96":287,"_157":288,"_159":255,"_160":142,"_161":289,"_163":119,"_107":290,"_101":32,"_166":194,"_168":291,"_169":22,"_170":-5,"_171":551,"_99":552},[],[241,248,254,287],{"_105":295,"_96":296,"_157":297,"_159":255,"_160":142,"_161":298,"_163":119,"_107":299,"_101":32,"_166":194,"_168":300,"_169":22,"_170":-5,"_171":554,"_99":555},[],[241,248,254,296],{"_105":304,"_96":305,"_157":306,"_159":255,"_160":142,"_161":307,"_163":119,"_107":308,"_101":32,"_166":194,"_168":309,"_169":22,"_170":-5,"_171":557,"_99":558},[],[241,248,254,305],{"_105":313,"_96":314,"_157":315,"_159":255,"_160":142,"_161":316,"_163":119,"_107":317,"_101":32,"_166":194,"_168":318,"_169":22,"_170":-5,"_171":560,"_99":561},[],[241,248,254,314],{"_105":322,"_96":323,"_157":324,"_159":255,"_160":142,"_161":325,"_163":119,"_107":326,"_101":32,"_166":194,"_168":327,"_169":22,"_170":-5,"_171":563,"_99":564},[],[241,248,254,323],[241,248,254],{"_105":332,"_96":333,"_157":334,"_159":249,"_160":142,"_161":335,"_163":119,"_107":336,"_101":32,"_166":194,"_168":337,"_169":22,"_170":-5,"_171":567,"_99":568},[],[241,248,333],{"_105":341,"_96":342,"_157":343,"_159":249,"_160":142,"_161":344,"_163":119,"_107":345,"_101":32,"_166":194,"_168":346,"_169":22,"_170":-5,"_171":570,"_99":571},[],[241,248,342],{"_105":350,"_96":351,"_157":352,"_159":249,"_160":142,"_161":353,"_163":119,"_107":354,"_101":32,"_166":194,"_168":355,"_169":22,"_170":-5,"_171":573,"_99":574},[],[241,248,351],{"_105":359,"_96":231,"_157":360,"_159":249,"_160":142,"_161":361,"_163":119,"_107":362,"_101":32,"_166":194,"_168":363,"_169":22,"_170":-5,"_171":576,"_99":577},[],[241,248,231],[241,248],{"_105":368,"_96":369,"_157":370,"_159":242,"_160":142,"_161":371,"_163":22,"_107":372,"_101":32,"_166":194,"_168":373,"_169":22,"_170":-5,"_171":580,"_99":581},[],[241,369],{"_105":377,"_96":378,"_157":379,"_159":242,"_160":142,"_161":380,"_163":119,"_107":381,"_101":32,"_166":194,"_168":382,"_169":22,"_170":-5,"_171":583,"_99":584},[],[241,378],{"_105":386,"_96":231,"_157":387,"_159":242,"_160":142,"_161":388,"_163":119,"_107":389,"_101":32,"_166":194,"_168":390,"_169":22,"_170":-5,"_171":586,"_99":587},[],[241,231],{"_105":394,"_96":395,"_157":396,"_159":242,"_160":142,"_161":397,"_163":22,"_107":398,"_101":32,"_166":194,"_168":399,"_169":22,"_170":-5,"_171":589,"_99":590},[],[241,395],{"_105":403,"_96":404,"_157":405,"_159":242,"_160":142,"_161":406,"_163":119,"_107":407,"_101":32,"_166":194,"_168":408,"_169":22,"_170":-5,"_171":592,"_99":593},[],[241,404],[241],{"_105":413,"_96":414,"_157":415,"_159":-5,"_160":142,"_161":416,"_163":119,"_107":417,"_101":32,"_166":206,"_168":418,"_169":22,"_170":-5,"_171":596,"_99":597},[],[414],{"_105":422,"_96":423,"_157":424,"_159":-5,"_160":142,"_161":425,"_163":119,"_107":426,"_101":32,"_166":206,"_168":427,"_169":22,"_170":-5,"_171":599,"_99":600},[],[423],{"_105":431,"_96":432,"_157":433,"_159":-5,"_160":142,"_161":434,"_163":119,"_107":435,"_101":32,"_166":206,"_168":436,"_169":22,"_170":-5,"_171":602,"_99":603},[],[432],{"_105":440,"_96":441,"_157":442,"_159":-5,"_160":142,"_161":205,"_163":119,"_107":443,"_101":32,"_166":206,"_168":444,"_169":22,"_170":-5,"_171":605,"_99":606},[],[441],{"_105":448,"_96":449,"_157":450,"_159":-5,"_160":142,"_161":165,"_163":119,"_107":451,"_101":32,"_166":206,"_168":452,"_169":22,"_170":-5,"_171":608,"_99":609},[],[449],{"_105":456,"_96":457,"_157":117,"_159":-5,"_160":142,"_161":458,"_163":119,"_107":459,"_101":425,"_166":234,"_168":460,"_169":22,"_170":-5,"_171":611,"_99":612},[],[457],{"_105":464,"_96":465,"_157":466,"_159":-5,"_160":142,"_161":467,"_163":119,"_107":468,"_101":32,"_166":206,"_168":469,"_169":22,"_170":-5,"_171":614,"_99":615},[],[465],{"_105":473,"_96":474,"_157":475,"_159":-5,"_160":142,"_161":476,"_163":22,"_107":477,"_101":32,"_166":206,"_168":478,"_169":22,"_170":-5,"_171":617,"_99":618},[],[474],[511,513,515,517,521,524,527,531,535,537,539,541,544,547,550,553,556,559,562,566,569,572,575,579,582,585,588,591,595,598,601,604,607,610,613,616],{"_105":230,"_96":231,"_157":232,"_159":158,"_160":142,"_161":102,"_163":22,"_107":495,"_101":193,"_166":234,"_168":235,"_169":22,"_170":-5,"_99":621},[156,231],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

nbbaier

react-tweet-vt