format.ts 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. import { Tweet } from './twitter.ts';
  2. class SafeString {
  3. constructor(readonly raw: string) {}
  4. get length(): number {
  5. return this.raw.length;
  6. }
  7. toString(): string {
  8. return this.raw;
  9. }
  10. toJSON(): string {
  11. return this.raw;
  12. }
  13. }
  14. type StringLike = string | SafeString;
  15. function escapeHTML(unsafe: string): StringLike {
  16. return new SafeString(
  17. unsafe
  18. .replace(/&/g, "&")
  19. .replace(/</g, "&lt;")
  20. .replace(/>/g, "&gt;")
  21. .replace(/"/g, "&quot;")
  22. .replace(/'/g, "&#039;")
  23. );
  24. }
  25. function joinChildren(children: StringLike[]): SafeString {
  26. return new SafeString(children
  27. .map(child => typeof child === 'string' ? escapeHTML(child) : child)
  28. .join('')
  29. );
  30. }
  31. function tag(tag: string, attributes: Record<string, string> = {}, children: StringLike | StringLike[] = []): SafeString {
  32. const attrs = Object.entries(attributes).map(([ key, value ]) => {
  33. return ` ${key}="${escapeHTML(value)}"`;
  34. }).join('');
  35. if (children.length === 0) {
  36. return new SafeString(`<${tag}${attrs} />`);
  37. } else {
  38. const childrenArray = Array.isArray(children) ? children : [children];
  39. const normalizedChildren = joinChildren(childrenArray);
  40. return new SafeString(`<${tag}${attrs}>${normalizedChildren}</${tag}>`);
  41. }
  42. }
  43. function buildTwitterUrl(url: string): string {
  44. return new URL(url, 'https://twitter.com').toString();
  45. }
  46. function buildProxyUrl(url: string): string {
  47. const search = new URLSearchParams({ target: url }).toString();
  48. return `/__proxy?${search}`;
  49. }
  50. function formatPlainText(text: string): SafeString {
  51. // apparently twitter already escapes the text for you
  52. return new SafeString(text.replace(/\n/g, "<br />"));
  53. }
  54. class TextFormatter {
  55. private splices: { text: StringLike, indices: [number, number] }[];
  56. private media: { type: 'video' | 'img', url: string, loop: boolean, link?: string }[];
  57. private characters: string[];
  58. constructor(readonly tweet: Tweet, readonly useProxy: boolean) {
  59. this.characters = [...tweet.full_text];
  60. this.splices = [];
  61. this.media = [];
  62. for (const { indices, text } of tweet.entities.hashtags) {
  63. const url = buildTwitterUrl(`/hashtag/${text}`);
  64. this.splices.push({
  65. indices,
  66. text: tag('a', { href: url }, `#${text}`),
  67. });
  68. }
  69. for (const link of tweet.entities.urls) {
  70. const url = new URL(link.expanded_url).toString();
  71. this.splices.push({
  72. indices: link.indices,
  73. text: tag('a', { href: url }, link.display_url),
  74. });
  75. }
  76. for (const { indices, name, screen_name } of tweet.entities.user_mentions) {
  77. const url = buildTwitterUrl(`/${screen_name}`);
  78. this.splices.push({
  79. indices: indices,
  80. text: tag('a', { href: url, title: name }, `@${screen_name}`),
  81. });
  82. }
  83. const media = tweet.extended_entities?.media ?? [];
  84. for (const item of media) {
  85. if (item.type === 'photo') {
  86. const url = new URL(item.media_url_https).toString();
  87. this.media.push({ type: 'img', url, loop: false });
  88. } else if (item.video_info !== undefined) {
  89. let max = -1;
  90. let maxUrl: string | undefined = undefined;
  91. for (const variant of item.video_info.variants) {
  92. if (variant.bitrate === undefined) {
  93. continue;
  94. }
  95. if (variant.bitrate > max) {
  96. max = variant.bitrate;
  97. maxUrl = variant.url;
  98. }
  99. }
  100. const loop = item.type === 'animated_gif';
  101. if (maxUrl !== undefined) {
  102. const url = new URL(maxUrl).toString();
  103. this.media.push({ type: 'video', url, loop });
  104. } else {
  105. const url = new URL(item.media_url_https).toString();
  106. this.media.push({ type: 'img', url, link: item.expanded_url, loop });
  107. }
  108. }
  109. }
  110. }
  111. getRange(start: number, end?: number): string {
  112. const max = this.tweet.display_text_range[1];
  113. return this.characters.slice(start, end ?? max).join('');
  114. }
  115. headerHTML(): SafeString {
  116. const date = new Date(this.tweet.created_at);
  117. const dateOptions = {
  118. weekday: 'short',
  119. year: 'numeric',
  120. month: '2-digit',
  121. day: '2-digit',
  122. hour: '2-digit',
  123. minute: '2-digit',
  124. timeZoneName: 'short',
  125. } as const;
  126. const imageUrl = new URL(this.tweet.user.profile_image_url_https).toString();
  127. const imageSrc = this.useProxy ? buildProxyUrl(imageUrl) : imageUrl;
  128. const profileUrl = buildTwitterUrl(`/${this.tweet.user.screen_name}`);
  129. const tweetUrl = buildTwitterUrl(`/${this.tweet.user.screen_name}/status/${this.tweet.id_str}`);
  130. const html = [
  131. tag('img', { loading: 'lazy', src: imageSrc, height: '24px', width: '24px' }),
  132. ' ',
  133. tag('strong', {}, this.tweet.user.name),
  134. ' ',
  135. tag('a', { href: profileUrl }, `@${this.tweet.user.screen_name}`),
  136. tag('br'),
  137. 'Posted ',
  138. tag('a', { href: tweetUrl }, date.toLocaleString(this.tweet.lang, dateOptions)),
  139. ];
  140. return joinChildren(html);
  141. }
  142. bodyHTML(): SafeString {
  143. const max = this.tweet.display_text_range[1];
  144. const splices = this.splices
  145. .filter(({ indices }) => indices[0] < max && indices[1] <= max)
  146. .sort((a, b) => a.indices[0] - b.indices[0]);
  147. let index = 0;
  148. const html: StringLike[] = [];
  149. for (const { text, indices } of splices) {
  150. const start = index;
  151. const end = indices[0];
  152. html.push(formatPlainText(this.getRange(start, end)));
  153. html.push(text);
  154. index = indices[1];
  155. }
  156. html.push(formatPlainText(this.getRange(index)));
  157. for (const { type, url, link, loop } of this.media) {
  158. html.push(tag('br'));
  159. html.push(tag('br'));
  160. const src = this.useProxy ? buildProxyUrl(url) : url;
  161. if (type === 'img') {
  162. html.push(tag('a', { href: link ?? url }, [
  163. tag('img', { loading: 'lazy', src }),
  164. ]));
  165. } else if (type === 'video') {
  166. html.push(tag('video', { controls: '', src, loop: `${loop}` }));
  167. }
  168. }
  169. return joinChildren(html);
  170. }
  171. toHTML(): SafeString {
  172. return joinChildren([ this.headerHTML(), tag('br'), this.bodyHTML() ]);
  173. }
  174. }
  175. const STYLES = `
  176. body > div {
  177. margin: 10px;
  178. padding: 10px;
  179. border: solid 1px gray;
  180. border-radius: 10px;
  181. }
  182. blockquote {
  183. padding: 10px;
  184. border: solid 1px lightgray;
  185. border-radius: 10px;
  186. }
  187. div {
  188. max-width: 600px;
  189. }
  190. img, video {
  191. max-width: 100%;
  192. }
  193. `;
  194. export function timelineAsHTML(tweets: Tweet[]): string {
  195. const body = tweets.map(tweet => {
  196. const displayTweet = tweet.retweeted_status ?? tweet;
  197. const children: StringLike[] = [];
  198. children.push(new TextFormatter(displayTweet, true).toHTML());
  199. const quoteTweet = displayTweet.quoted_status;
  200. if (quoteTweet !== undefined) {
  201. children.push(tag('blockquote', {}, new TextFormatter(quoteTweet, true).toHTML()));
  202. }
  203. return tag('div', {}, children);
  204. }).join('\n');
  205. return `
  206. <html>
  207. <head>
  208. <style>${STYLES}</style>
  209. </head>
  210. <body>${body}</body>
  211. </html>
  212. `;
  213. }
  214. export function timelineAsJSON(username: string, tweets: Tweet[]): string {
  215. const items = tweets.map(tweet => {
  216. const displayTweet = tweet.retweeted_status ?? tweet;
  217. const children: StringLike[] = [];
  218. children.push(new TextFormatter(displayTweet, false).bodyHTML());
  219. const quoteTweet = displayTweet.quoted_status;
  220. if (quoteTweet !== undefined) {
  221. children.push(tag('blockquote', {}, [
  222. new TextFormatter(quoteTweet, false).toHTML(),
  223. ]));
  224. }
  225. const html = joinChildren(children);
  226. return {
  227. id: tweet.id_str,
  228. title: tweet.full_text.split('\n')[0],
  229. url: buildTwitterUrl(`/${tweet.user.screen_name}/status/${tweet.id_str}`),
  230. content_html: html,
  231. date_published: new Date(tweet.created_at).toISOString(),
  232. authors: [{
  233. name: `${displayTweet.user.name} - @${displayTweet.user.screen_name}`,
  234. url: buildTwitterUrl(`/${displayTweet.user.screen_name}`),
  235. avatar: displayTweet.user.profile_image_url_https,
  236. }],
  237. };
  238. });
  239. return JSON.stringify({
  240. version: '1.1',
  241. title: `Twitter @${username}`,
  242. home_page_url: buildTwitterUrl(`/${username}`),
  243. items,
  244. });
  245. }