More posts, from bsky too

packages/docs/mock/tweets.json → packages/docs/mock/posts.json

@@ -1,5 +1,23 @@
 {
   "data": [
+    {
+      "entities": {
+        "urls": []
+      },
+      "id": "3k3obqi65oy2p",
+      "author_id": "4",
+      "created_at": "2023-07-29T17:33:00.000Z",
+      "attachments": {},
+      "text": "`knip` is the best code maintenance tool I've used in my 20 years of development, just an absolute work of art",
+      "public_metrics": {
+        "retweet_count": 1,
+        "reply_count": 1,
+        "like_count": 2,
+        "quote_count": 1,
+        "bookmark_count": 0,
+        "impression_count": 111
+      }
+    },
     {
       "entities": {
         "urls": []
@@ -825,6 +843,12 @@
         "profile_image_url": "https://pbs.twimg.com/profile_images/1559181703352094720/NFL2PBbK_400x400.jpg",
         "name": "Tom Hicks"
       },
+      {
+        "id": "4",
+        "username": "daviduzumeri.bsky.social",
+        "profile_image_url": "https://cdn.bsky.app/img/avatar/plain/did:plc:6ykajndqngy2kxozo37mpsgc/bafkreif2xu6bini3tpv2hfauw53ng43zbefgqol36yt4baehcbdfxahihu@jpeg",
+        "name": "Old Man Uzi"
+      },
       {
         "id": "22918124",
         "username": "gregberge_",
@@ -834,7 +858,7 @@
       {
         "id": "19268321",
         "username": "housecor",
-        "profile_image_url": "https://pbs.twimg.com/profile_images/1525874017630035970/veQQouGw_normal.jpg",
+        "profile_image_url": "https://pbs.twimg.com/profile_images/1845812720899076099/oANCzCiQ_400x400.jpg",
         "name": "Cory House"
       },
       {

packages/docs/src/components/Tweet.astro → packages/docs/src/components/Post.astro

@@ -1,8 +1,8 @@
 ---
 import sprites from '../assets/sprites.svg';
-import { type TweetWithUser, formatTimestamp, replaceShortenedUrls } from '../util/tweet.js';
+import { type PostWithUser, formatTimestamp, replaceShortenedUrls } from '../util/post.js';
 
-const tweet: TweetWithUser = replaceShortenedUrls(Astro.props.data);
+const post: PostWithUser = replaceShortenedUrls(Astro.props.data);
 ---
 
 <style>
@@ -49,20 +49,20 @@ const tweet: TweetWithUser = replaceShortenedUrls(Astro.props.data);
 </style>
 
 {
-  tweet && (
+  post && (
     <>
       <header class="n">
-        <img class="profile" src={tweet.user.profile_image_url} />
+        <img class="profile" src={post.user.profile_image_url} />
         <div class="name">
-          <span class="real">{tweet.user.name}</span>
-          <span class="screen">@{tweet.user.username}</span>
+          <span class="real">{post.user.name}</span>
+          <span class="screen">@{post.user.username}</span>
         </div>
       </header>
-      <p class="text" set:html={tweet.text.trim().replace(/\n/g, '<br />')} />
+      <p class="text" set:html={post.text.trim().replace(/\n/g, '<br />')} />
       <p class="timestamp">
         <a
-          href={`https://twitter.com/${tweet.user.username}/status/${tweet.id}`}>
-          {formatTimestamp(tweet.created_at)}
+          href={`${post.id.length > 17 ? `https://twitter.com/${post.user.username}/status/${post.id}` : `https://bsky.app/profile/${post.user.username}/post/${post.id}`}`}>
+          {formatTimestamp(post.created_at)}
         </a>
       </p>
       <footer class="engagement">
@@ -71,31 +71,31 @@ const tweet: TweetWithUser = replaceShortenedUrls(Astro.props.data);
             <title>replies</title>
             <use href={`${sprites.src}#replies`} />
           </svg>
-          <span>{tweet.public_metrics.reply_count}</span>
+          <span>{post.public_metrics.reply_count}</span>
         </div>
         <div>
           <svg width="24" height="24">
-            <title>retweets</title>
-            <use href={`${sprites.src}#retweets`} />
+            <title>reposts</title>
+            <use href={`${sprites.src}#reposts`} />
           </svg>
           <span>
-            {tweet.public_metrics.retweet_count +
-              tweet.public_metrics.quote_count}
+            {post.public_metrics.retweet_count +
+              post.public_metrics.quote_count}
           </span>
         </div>
         <div>
           <svg width="24" height="24">
             <title>likes</title>
             <use href={`${sprites.src}#likes`} />
           </svg>
-          <span>{tweet.public_metrics.like_count}</span>
+          <span>{post.public_metrics.like_count}</span>
         </div>
         <div>
           <svg width="24" height="24">
             <title>bookmarks</title>
             <use href={`${sprites.src}#bookmarks`} />
           </svg>
-          <span>{tweet.public_metrics.bookmark_count}</span>
+          <span>{post.public_metrics.bookmark_count}</span>
         </div>
       </footer>
     </>

packages/docs/src/components/Tweets.astro → packages/docs/src/components/Posts.astro

@@ -1,8 +1,8 @@
 ---
 import { readFile } from 'node:fs/promises';
 import { Card, CardGrid } from '@astrojs/starlight/components';
-import { type TweetsResponse, formatTimestamp } from '../util/tweet.js';
-import Tweet from './Tweet.astro';
+import { type PostResponse, formatTimestamp } from '../util/post.js';
+import Post from './Post.astro';
 
 const BEARER_TOKEN = import.meta.env.BEARER_TOKEN;
 
@@ -35,13 +35,13 @@ tweet_url.searchParams.set('user.fields', ['name', 'username', 'profile_image_ur
 tweet_url.searchParams.set('tweet.fields', ['note_tweet', 'created_at', 'public_metrics', 'entities'].join(','));
 tweet_url.searchParams.set('media.fields', ['type', 'preview_image_url', 'url', 'alt_text', 'variants'].join(','));
 
-const tweets: TweetsResponse = isFetch
+const tweets: PostResponse = isFetch
   ? await fetch(tweet_url.href, {
       headers: {
         Authorization: `Bearer ${BEARER_TOKEN}`,
       },
     }).then(res => res.json())
-  : JSON.parse(await readFile('mock/tweets.json', 'utf-8'));
+  : JSON.parse(await readFile('mock/posts.json', 'utf-8'));
 
 if (!tweets.data) console.log(tweets);
 
@@ -66,7 +66,7 @@ const testimonials: Testimonial[] = JSON.parse(await readFile('mock/testimonials
     {
       (tweets?.data ?? []).map(tweet => (
         <Card title="">
-          <Tweet
+          <Post
             data={{
               ...tweet,
               user: tweets.includes.users.find(

packages/docs/src/content/docs/index.mdx

@@ -22,7 +22,7 @@ hero:
 
 import { Card, CardGrid } from '@astrojs/starlight/components';
 import { YouTube } from '@astro-community/astro-embed-youtube';
-import Tweets from '../../components/Tweets.astro';
+import Posts from '../../components/Posts.astro';
 import Sponsors from '../../components/Sponsors.astro';
 import Projects from '../../components/Projects.astro';
 import Contributors from '../../components/Contributors.astro';
@@ -135,7 +135,7 @@ Most recent article first:
 
 ## 🧡 Testimonials
 
-<Tweets />
+<Posts />
 
 ## Read More
 

packages/docs/src/pages/sponsors.astro

@@ -1,8 +1,8 @@
 ---
 import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+import Posts from '../components/Posts.astro';
 import Projects from '../components/Projects.astro';
 import SponsorsComponent from '../components/Sponsors.astro';
-import Tweets from '../components/Tweets.astro';
 ---
 
 <StarlightPage frontmatter={{ title: 'Become a sponsor!', template: 'splash' }}>
@@ -66,7 +66,7 @@ import Tweets from '../components/Tweets.astro';
 
   <h2>🧡 Testimonials</h2>
 
-  <Tweets />
+  <Posts />
 
 
 </StarlightPage>

packages/docs/src/util/tweet.ts → packages/docs/src/util/post.ts

@@ -1,10 +1,10 @@
-export const replaceShortenedUrls = (tweet: TweetWithUser) => {
-  let text = (tweet.note_tweet?.text ?? tweet.text).replace(/^(@[^ ]+ )*/, '');
-  if (!tweet.entities.urls) return { ...tweet, text };
-  tweet.entities.urls.sort((a, b) => b.start - a.start);
-  for (const urlEntity of tweet.entities.urls) {
+export const replaceShortenedUrls = (post: PostWithUser) => {
+  let text = (post.note_tweet?.text ?? post.text).replace(/^(@[^ ]+ )*/, '');
+  if (!post.entities.urls) return { ...post, text };
+  post.entities.urls.sort((a, b) => b.start - a.start);
+  for (const urlEntity of post.entities.urls) {
     if (urlEntity.media_key) {
-      const media = (tweet.media ?? []).find(media => media.media_key === urlEntity.media_key);
+      const media = (post.media ?? []).find(media => media.media_key === urlEntity.media_key);
       if (media && media.type === 'photo') {
         text = text.replace(urlEntity.url, `<img src="${media.url}" alt="${media.alt_text}" />`);
       }
@@ -14,11 +14,11 @@ export const replaceShortenedUrls = (tweet: TweetWithUser) => {
       text = text.replace(urlEntity.url, `<a href="${urlEntity.expanded_url}">${urlEntity.expanded_url}</a>`);
     }
   }
-  if (tweet.media && tweet.note_tweet?.text) {
-    text = text + tweet.media.map(media => `<img src="${media.url}" alt="${media.alt_text}" />`).join('');
+  if (post.media && post.note_tweet?.text) {
+    text = text + post.media.map(media => `<img src="${media.url}" alt="${media.alt_text}" />`).join('');
   }
-  tweet.text = text;
-  return tweet;
+  post.text = text;
+  return post;
 };
 
 const timeFormatter = new Intl.DateTimeFormat('en-US', {
@@ -41,7 +41,7 @@ export const formatTimestamp = (date: string) => {
   return `${timeFormatter.format(d)} · ${dateFormatter.format(d)}`;
 };
 
-interface Tweet {
+interface Post {
   public_metrics: {
     retweet_count: number;
     reply_count: number;
@@ -114,13 +114,13 @@ interface Media {
   media_key: string;
 }
 
-export interface TweetWithUser extends Tweet {
+export interface PostWithUser extends Post {
   media?: Media[];
   user: User;
 }
 
-export interface TweetsResponse {
-  data: Tweet[];
+export interface PostResponse {
+  data: Post[];
   includes: {
     users: User[];
     media: Media[];