feat: make xlogshorts more general (#1192)

src/components/ui/XLogPost.tsx

@@ -12,7 +12,6 @@ import { Loading } from "../common/Loading"
 import { Time } from "../common/Time"
 import PostCover from "../home/PostCover"
 import { Avatar } from "./Avatar"
-import { UniLink } from "./UniLink"
 
 interface Props {
   slug: string
@@ -20,7 +19,7 @@ interface Props {
   url: string
 }
 
-const XLogShorts: FC<Props> = ({ slug, handle, url }) => {
+const XLogPost: FC<Props> = ({ slug, handle, url }) => {
   const [isExpanded, setIsExpanded] = React.useState(false)
 
   const locale = useLocale() as Language
@@ -37,6 +36,7 @@ const XLogShorts: FC<Props> = ({ slug, handle, url }) => {
   const images = page.data?.metadata?.content?.attachments
     ?.filter((attachment) => attachment.name === "image")
     .map((img) => img.address || "")
+    .concat(page.data.metadata.content.images ?? [])
     .filter(Boolean)
 
   const isMobile = isMobileDevice()
@@ -56,13 +56,11 @@ const XLogShorts: FC<Props> = ({ slug, handle, url }) => {
 
   if (page.isLoading) return <Loading />
 
-  if (!isShort) return <UniLink href={url}>{url}</UniLink>
-
   return (
     <div
       onClick={handleRedirect}
       className={cn(
-        "flex flex-col md:flex-row w-full bg-zinc-50 rounded-xl p-4 gap-x-4 hover:cursor-pointer",
+        "flex flex-col md:flex-row w-full bg-zinc-50 rounded-xl p-4 gap-x-4 hover:cursor-pointer my-2",
         isExpanded ? "sm:h-[350px]" : "sm:h-[150px]",
         "transition-all duration-500 ease-in-out",
       )}
@@ -96,7 +94,9 @@ const XLogShorts: FC<Props> = ({ slug, handle, url }) => {
                 isExpanded || isMobile ? "line-clamp-6" : "line-clamp-1"
               }
             >
-              {page.data?.metadata?.content?.content}
+              {isShort
+                ? page.data?.metadata?.content?.content
+                : page.data?.metadata?.content?.summary}
             </p>
           </div>
         </div>
@@ -149,4 +149,4 @@ const XLogShorts: FC<Props> = ({ slug, handle, url }) => {
   )
 }
 
-export default XLogShorts
+export default XLogPost

src/markdown/embed-transformers/XLogPost.ts

@@ -28,7 +28,7 @@ function getParamsFromShortsURL(url: URL) {
   return { slug, handle }
 }
 
-export const XLogShortsTransformer: Transformer = {
+export const XLogPostTransformer: Transformer = {
   name: "XLogShorts",
   shouldTransform(url) {
     return !!getParamsFromShortsURL(url)
@@ -36,6 +36,6 @@ export const XLogShortsTransformer: Transformer = {
   getHTML(url) {
     const { slug, handle } = getParamsFromShortsURL(url)!
 
-    return `<xlog-shorts slug="${slug}" handle="${handle}" url="${url.toString()}"/>`
+    return `<xlog-post slug="${slug}" handle="${handle}" url="${url.toString()}"/>`
   },
 }

src/markdown/embed-transformers/index.ts

@@ -4,14 +4,14 @@ import { CodeSandboxTransformer } from "./CodeSandBox"
 import { GitHubRepoTransformer } from "./GitHub"
 import { NetEaseMusicTransformer } from "./NetEaseMusic"
 import { SpotifyTransformer } from "./Spotify"
-import { XLogShortsTransformer } from "./XLogShorts"
+import { XLogPostTransformer } from "./XLogPost"
 import { YouTubeTransformer } from "./YouTube"
 
 export const transformers: Transformer[] = [
   CodeSandboxTransformer,
   GitHubRepoTransformer,
   YouTubeTransformer,
-  XLogShortsTransformer,
+  XLogPostTransformer,
   NetEaseMusicTransformer,
   BilibiliTransformer,
   SpotifyTransformer,

src/markdown/index.ts

@@ -57,7 +57,7 @@ const Style = dynamic(() => import("~/components/common/Style"))
 const Mention = dynamic(() => import("~/components/ui/Mention"))
 const Mermaid = dynamic(() => import("~/components/ui/Mermaid"))
 const GithubRepo = dynamic(() => import("~/components/ui/GithubRepo"))
-const XLogShorts = dynamic(() => import("~/components/ui/XLogShorts"))
+const XLogPost = dynamic(() => import("~/components/ui/XLogPost"))
 const APlayer = dynamic(() => import("~/components/ui/APlayer"))
 
 const DPlayer = dynamic(() => import("~/components/ui/DPlayer"))
@@ -234,7 +234,7 @@ export const renderPageContent = (
           audio: APlayer,
           video: DPlayer,
           "github-repo": GithubRepo,
-          "xlog-shorts": XLogShorts,
+          "xlog-post": XLogPost,
           style: Style,
         } as any,
       })