Implement proper IV

src/helpers/author.ts

@@ -24,3 +24,28 @@ export const getAuthorText = (tweet: APITweet): string | null => {
 
   return null;
 };
+
+/* The embed "author" text we populate with replies, retweets, and likes unless it's a video */
+export const getSocialTextIV = (tweet: APITweet): string | null => {
+  /* Build out reply, retweet, like counts */
+  if (tweet.likes > 0 || tweet.retweets > 0 || tweet.replies > 0) {
+    let authorText = '';
+    if (tweet.replies > 0) {
+      authorText += `💬 ${formatNumber(tweet.replies)} `;
+    }
+    if (tweet.retweets > 0) {
+      authorText += `🔁 ${formatNumber(tweet.retweets)} `;
+    }
+    if (tweet.likes > 0) {
+      authorText += `❤️ ${formatNumber(tweet.likes)} `;
+    }
+    if (tweet.views && tweet.views > 0) {
+      authorText += `👁️ ${formatNumber(tweet.views)} `;
+    }
+    authorText = authorText.trim();
+
+    return authorText;
+  }
+
+  return null;
+};

src/render/instantview.ts

@@ -1,3 +1,55 @@
+import { Constants } from "../constants";
+import { getSocialTextIV } from "../helpers/author";
+import { sanitizeText } from "../helpers/utils";
+
+const populateUserLinks = (tweet: APITweet, text: string): string => {
+  /* TODO: Maybe we can add username splices to our API so only genuinely valid users are linked? */
+  text.match(/@(\w{1,15})/g)?.forEach((match) => {
+    const username = match.replace('@', '');
+    text = text.replace(
+      match,
+      `<a href="${Constants.TWITTER_ROOT}/${username}" target="_blank" rel="noopener noreferrer">${match}</a>`
+    );
+  });
+  return text;
+}
+
+const generateTweetMedia = (tweet: APITweet): string => {
+  let media = '';
+  if (tweet.media?.all?.length) {
+    tweet.media.all.forEach((mediaItem) => {
+      switch(mediaItem.type) {
+        case 'photo':
+          media += `<img src="${mediaItem.url}" alt="${tweet.author.name}'s photo" />`;
+          break;
+        case 'video':
+          media += `<video src="${mediaItem.url}" alt="${tweet.author.name}'s video" />`;
+          break;
+        case 'gif':
+          media += `<video src="${mediaItem.url}" alt="${tweet.author.name}'s gif" />`;
+          break;
+      }
+    });
+  }
+  return media;
+}
+
+// const formatDateTime = (date: Date): string => {
+//   const yyyy = date.getFullYear();
+//   const mm = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
+//   const dd = String(date.getDate()).padStart(2, '0');
+//   const hh = String(date.getHours()).padStart(2, '0');
+//   const min = String(date.getMinutes()).padStart(2, '0');
+//   return `${hh}:${min} - ${yyyy}/${mm}/${dd}`;
+// }
+
+const htmlifyLinks = (input: string): string => {
+  const urlPattern = /\bhttps?:\/\/\S+/g;
+  return input.replace(urlPattern, (url) => {
+      return `<a href="${url}">${url}</a>`;
+  });
+}
+
 export const renderInstantView = (properties: RenderProperties): ResponseInstructions => {
   console.log('Generating Instant View (placeholder)...');
   const { tweet } = properties;
@@ -11,8 +63,35 @@ export const renderInstantView = (properties: RenderProperties): ResponseInstruc
     `<meta property="article:published_time" content="${postDate}"/>`
   ];
 
-  instructions.text = `<section class="section-backgroundImage"><figure class="graf--layoutFillWidth"></figure></section><article><h1>${tweet.author.name} (@${tweet.author.screen_name})</h1><p>Instant View (✨ Beta)</p>
-  <blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr"> <a href="${tweet.url}">_</a></blockquote>
+  let text = sanitizeText(tweet.text).replace(/\n/g, '<br>');
+  text = populateUserLinks(tweet, text);
+  text = htmlifyLinks(text);
+
+  instructions.text = `
+  <section class="section-backgroundImage">
+    <figure class="graf--layoutFillWidth"></figure>
+  </section>
+  <section class="section--first" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 64px;">
+    If you can see this, your browser is doing something weird with your user agent. <a href="${tweet.url}">View original post</a>
+  </section>
+  <article>
+  <h1>${tweet.author.name} (@${tweet.author.screen_name})</h1>
+  <p>Instant View (✨ Beta)</p>
+
+  <!--blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr"> <a href="${tweet.url}">_</a></blockquote-->
+
+  <!-- Embed profile picture, display name, and screen name in table -->
+  <table>
+    <img src="${tweet.author.avatar_url}" alt="${tweet.author.name}'s profile picture" />
+    <h2>${tweet.author.name}</h2>
+    <p>@${tweet.author.screen_name}</p>
+    <p>${getSocialTextIV(tweet)}</p>
+  </table>
+
+  <!-- Embed Tweet text -->
+  <p>${text}</p>
+  ${generateTweetMedia(tweet)} 
+  <a href="${tweet.url}">View original</a>
 </article>
 `;