feat: replace tweets by toots

Author: mdvanes

components/EmbeddedSocialMedia/EmbeddedSocialMedia.tsx

@@ -4,7 +4,6 @@ import { ITweets } from "../../lib/twitter/getTweets";
 import { IPlaylistItem } from "../../lib/youtube-playlist/youtube-playlist.types";
 import Playlist from "../Playlist/Playlist";
 import TootCard from "../TootCard/TootCard";
-import TweetCard from "../TweetCard/TweetCard";
 import styles from "./EmbeddedSocialMedia.module.scss";
 
 interface EmbeddedSocialMediaProps {
@@ -15,13 +14,12 @@ interface EmbeddedSocialMediaProps {
 
 const EmbeddedSocialMedia: FC<EmbeddedSocialMediaProps> = ({
   toots,
-  tweets,
   playlist,
 }) => {
   return (
     <div className={styles["embedded-social-media"]}>
       <TootCard toots={toots} />
-      <TweetCard tweets={tweets} />
+      {/* <TweetCard tweets={tweets} /> */}
       <Playlist playlist={playlist} viewport="sm" />
     </div>
   );

components/TootCard/TootCard.module.scss

@@ -6,7 +6,7 @@
   border-radius: $card-border-radius;
   padding: 1rem;
 
-  a {
+  > a {
     display: block;
     text-align: right;
     font-weight: bold;
@@ -19,8 +19,19 @@
     gap: 10px;
   }
 
+  div > a {
+    display: block;
+    margin-bottom: 0.5rem;
+  }
+
   @media (min-width: $main-width) {
     display: block;
     width: $aside-width;
   }
 }
+
+.toot-card--badges {
+  display: flex;
+  gap: 0.7rem;
+  cursor: default;
+}

components/TootCard/TootCard.tsx

@@ -17,20 +17,35 @@ const TootCard: FC<ITootCardProps> = ({ toots }) => {
   return (
     <section className={styles["toot-card"]}>
       <a href={author.url}>@{author.username}@mastodon.social</a>
-      {data.map(({ id, text, created_at }) => (
-        <div key={id}>
-          <p>
-            <Image
-              src={mastodonSvg}
-              alt="Codestar Mastodon"
-              width={24}
-              height={24}
-            />
-            <span>{formatDate(created_at)}</span>
-          </p>
-          <p>{text}</p>
-        </div>
-      ))}
+      {data.map(
+        ({
+          id,
+          text,
+          created_at,
+          url,
+          reblogs_count,
+          replies_count,
+          favourites_count,
+        }) => (
+          <div key={id}>
+            <p>
+              <Image
+                src={mastodonSvg}
+                alt="Codestar Mastodon"
+                width={24}
+                height={24}
+              />
+              <span>{formatDate(created_at)}</span>
+            </p>
+            <a href={url}>{text}</a>
+            <div className={styles["toot-card--badges"]}>
+              <span title="replies">↩️ {replies_count}</span>{" "}
+              <span title="reblogs">🔁 {reblogs_count}</span>{" "}
+              <span title="favourites">⭐ {favourites_count}</span>
+            </div>
+          </div>
+        )
+      )}
     </section>
   );
 };

lib/mastodon/getToots.ts

@@ -1,3 +1,5 @@
+import { convert } from "html-to-text";
+
 interface IMastodonAccountResponse {
   id: string;
   username: string;
@@ -29,8 +31,18 @@ interface ITootResponse {
 
 type AccountsStatusesResponse = ITootResponse[];
 
+interface IToot {
+  id: string;
+  text: string;
+  created_at: string;
+  url: string;
+  reblogs_count: number;
+  replies_count: number;
+  favourites_count: number;
+}
+
 export interface IToots {
-  data: { id: string; text: string; created_at: string }[];
+  data: IToot[];
   author: { username: string; url: string };
 }
 
@@ -61,6 +73,27 @@ const getTootsById = async (
   }
 };
 
+const mapTootResponseToToot = ({
+  id,
+  created_at,
+  content,
+  url,
+  reblogs_count,
+  replies_count,
+  favourites_count,
+}: ITootResponse): IToot => ({
+  id,
+  created_at,
+  url,
+  text: convert(content, {
+    wordwrap: 130,
+    ignoreHref: true,
+  }),
+  replies_count,
+  reblogs_count,
+  favourites_count,
+});
+
 export const getToots = async (): Promise<IToots | null> => {
   const { MASTODON_ACCESS_TOKEN, MASTODON_ID } = process.env;
   const count = 2;
@@ -77,11 +110,7 @@ export const getToots = async (): Promise<IToots | null> => {
       throw Error(`no toots found for ${MASTODON_ID}`);
     }
     return {
-      data: toots.slice(0, count).map(({ id, created_at, content }) => ({
-        id,
-        created_at,
-        text: content,
-      })),
+      data: toots.slice(0, count).map(mapTootResponseToToot),
       author: {
         username: toots[0].account.username,
         url: toots[0].account.url,