Merge branch 'preview'

pdelfan · Nov 1, 2024 · 72261fb · 72261fb
2 parents 2da9e2b + c75c22b
commit 72261fb
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 9 deletions.
diff --git a/public/starterPack.svg b/public/starterPack.svg
diff --git a/src/components/dataDisplay/postEmbed/FeedEmbed.tsx b/src/components/dataDisplay/postEmbed/FeedEmbed.tsx
@@ -37,10 +37,10 @@ export default function FeedEmbed(props: Props) {
                 className={`rounded-lg ${!feed.avatar && "bg-skin-muted border-skin-base border"}`}
               />
               <div className="flex flex-col">
-                <h2 className="text-skin-base break-words font-semibold">
+                <h2 className="text-skin-base break-words font-medium">
                   {feed.displayName}
                 </h2>
-                <h3 className="text-skin-secondary break-all text-sm">
+                <h3 className="text-skin-tertiary font-medium break-all text-sm">
                   By @{feed.creator.handle}
                 </h3>
               </div>

diff --git a/src/components/dataDisplay/postEmbed/ListEmbed.tsx b/src/components/dataDisplay/postEmbed/ListEmbed.tsx
@@ -37,14 +37,14 @@ export default function ListEmbed(props: Props) {
           <div className="flex items-start gap-2">
             <div className="bg-primary rounded-lg p-2.5">{selectedIcon}</div>
             <div className="flex flex-col">
-              <span className="text-skin-base hover:text-skin-secondary line-clamp-1 overflow-ellipsis break-all font-semibold">
+              <span className="text-skin-base hover:text-skin-secondary line-clamp-1 overflow-ellipsis break-all font-medium">
                 {list.name}
               </span>
-              <span className="text-skin-tertiary break-all font-medium">
+              <span className="text-skin-tertiary break-all font-medium text-sm">
                 {type} by {list.creator.displayName || list.creator.handle}
               </span>
               {list.description && (
-                <p className="text-skin-base break-all">{list.description}</p>
+                <p className="text-skin-base break-all mt-1">{list.description}</p>
               )}
             </div>
           </div>

diff --git a/src/components/dataDisplay/postEmbed/PostEmbed.tsx b/src/components/dataDisplay/postEmbed/PostEmbed.tsx
@@ -13,6 +13,7 @@ import RecordEmbed from "./RecordEmbed";
 import ListEmbed from "./ListEmbed";
 import FeedEmbed from "./FeedEmbed";
 import VideoEmbed from "./VideoEmbed";
+import StarterPackEmbed from "./StarterPackEmbed";
 
 interface Props {
   content: AppBskyFeedDefs.FeedViewPost["post"]["embed"];
@@ -25,6 +26,8 @@ export default function PostEmbed(props: Props) {
   const getEmbed = (content: AppBskyFeedDefs.FeedViewPost["post"]["embed"]) => {
     if (AppBskyEmbedImages.isView(content)) {
       return <ImageEmbed content={content} depth={depth} />;
+    } else if (AppBskyGraphDefs.isStarterPackViewBasic(content?.record)) {
+      return <StarterPackEmbed embed={content.record} depth={depth} />;
     } else if (AppBskyEmbedExternal.isView(content)) {
       return <ExternalEmbed embed={content} depth={depth} />;
     } else if (
@@ -59,10 +62,10 @@ export default function PostEmbed(props: Props) {
     } else if (AppBskyEmbedVideo.isView(content)) {
       return (
         <VideoEmbed
-          aspectRatio={`${content.aspectRatio?.width}/${content.aspectRatio?.height}`}          
+          aspectRatio={`${content.aspectRatio?.width}/${content.aspectRatio?.height}`}
           playlist={content.playlist}
           thumbnail={content.thumbnail}
-          alt={content.alt}          
+          alt={content.alt}
         />
       );
     }

diff --git a/src/components/dataDisplay/postEmbed/RecordEmbed.tsx b/src/components/dataDisplay/postEmbed/RecordEmbed.tsx
@@ -34,7 +34,7 @@ export default function RecordEmbed(props: Props) {
             );
             e.stopPropagation();
           }}
-          className="border-skin-base hover:bg-skin-secondary mt-2 rounded-xl border p-3 hover:cursor-pointer"
+          className="border-skin-base bg-skin-base hover:bg-skin-secondary mt-2 rounded-xl border p-3 hover:cursor-pointer"
         >
           <div className="flex flex-col">
             <div className="flex">

diff --git a/src/components/dataDisplay/postEmbed/StarterPackEmbed.tsx b/src/components/dataDisplay/postEmbed/StarterPackEmbed.tsx
@@ -0,0 +1,69 @@
+import { getStarterPackHref, getStarterPackImage } from "@/lib/utils/link";
+import { AppBskyGraphDefs, AppBskyGraphStarterpack } from "@atproto/api";
+import Image from "next/image";
+import Link from "next/link";
+
+interface Props {
+  embed: AppBskyGraphDefs.StarterPackViewBasic;
+  depth: number;
+}
+
+export default function StarterPackEmbed(props: Props) {
+  const { embed, depth } = props;
+  const starterPackHref = getStarterPackHref(embed);
+  const imageUri = getStarterPackImage(embed);
+
+  if (!AppBskyGraphStarterpack.isRecord(embed.record)) {
+    return null;
+  }
+
+  return (
+    <>
+      {depth < 2 && (
+        <article className="border border-skin-base mt-2 rounded-lg group">
+          <div className="bg-skin-base hover:bg-skin-secondary rounded-t-lg">
+            <Link
+              href={starterPackHref}
+              target="_blank"
+              onClick={(e) => e.stopPropagation()}
+            >
+              {imageUri && (
+                <Image
+                  src={imageUri}
+                  alt="Starter pack image"
+                  width={900}
+                  height={500}
+                  priority
+                  className="border-b-skin-base rounded-t-lg border-b aspect-auto max-h-96 object-cover group-hover:brightness-95"
+                />
+              )}
+              <div className="flex flex-col gap-2 p-3">
+                <div className="flex flex-wrap gap-2">
+                  <Image
+                    src={"/starterPack.svg"}
+                    alt="Starter pack icon"
+                    width={40}
+                    height={40}
+                  />
+                  <div className="flex flex-col">
+                    <span className="text-skin-base font-medium [overflow-wrap:anywhere]">
+                      {embed.record.name}
+                    </span>
+                    <span className="text-skin-tertiary font-medium break-all text-sm">
+                      Starter pack by {embed.creator.handle}
+                    </span>
+                  </div>
+                </div>
+                {embed.record.description && (
+                  <span className="text-skin-secondary text-sm line-clamp-2">
+                    {embed.record.description}
+                  </span>
+                )}
+              </div>
+            </Link>
+          </div>
+        </article>
+      )}
+    </>
+  );
+}
diff --git a/src/lib/utils/link.tsx b/src/lib/utils/link.tsx
@@ -1,4 +1,10 @@
-import { AppBskyRichtextFacet, RichText, UnicodeString } from "@atproto/api";
+import {
+  AppBskyGraphDefs,
+  AppBskyRichtextFacet,
+  AtUri,
+  RichText,
+  UnicodeString,
+} from "@atproto/api";
 import { JSONContent } from "@tiptap/react";
 import { jsonToText } from "./text";
 
@@ -101,3 +107,19 @@ export function isValidUrl(url: string): boolean {
     return false;
   }
 }
+
+export function getStarterPackImage(
+  starterPack: AppBskyGraphDefs.StarterPackView
+) {
+  const rkey = new AtUri(starterPack.uri).rkey;
+  return `https://ogcard.cdn.bsky.app/start/${starterPack.creator.did}/${rkey}`;
+}
+
+export function getStarterPackHref(
+  starterPack: AppBskyGraphDefs.StarterPackViewBasic
+) {
+  const rkey = new AtUri(starterPack.uri).rkey;
+  const handleOrDid = starterPack.creator.handle || starterPack.creator.did;
+  // TODO: Add starter pack screen to Ouranos
+  return `https://bsky.app/starter-pack/${handleOrDid}/${rkey}`;   
+}