From b51d9afc76e5cf9c8e2ec9f366dda9eade404eab Mon Sep 17 00:00:00 2001
From: Caspian <zhaodonghao586@outlook.com>
Date: Wed, 20 Dec 2023 13:12:49 +0000
Subject: [PATCH 1/2] feat: Add shorts embedding.

---
 src/components/home/PostCover.tsx             |   7 +-
 src/components/ui/XLogShorts.tsx              | 127 ++++++++++++++++++
 src/markdown/embed-transformers/XLogShorts.ts |  54 ++++++++
 src/markdown/embed-transformers/index.ts      |   2 +
 src/markdown/index.ts                         |   2 +
 5 files changed, 191 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ui/XLogShorts.tsx
 create mode 100644 src/markdown/embed-transformers/XLogShorts.ts

diff --git a/src/components/home/PostCover.tsx b/src/components/home/PostCover.tsx
index ccd512fb..e4bbf62e 100644
--- a/src/components/home/PostCover.tsx
+++ b/src/components/home/PostCover.tsx
@@ -15,11 +15,13 @@ export default function PostCover({
   title,
   uniqueKey,
   className,
+  imgClassName,
 }: {
   images?: string[]
   title?: string
   uniqueKey?: string
   className?: string
+  imgClassName?: string
 }) {
   return (
     <>
@@ -47,7 +49,10 @@ export default function PostCover({
                 <SwiperSlide key={image}>
                   <div className="text-[0px] w-full h-full">
                     <Image
-                      className="object-cover w-full sm:group-hover:scale-105 sm:transition-transform sm:duration-400 sm:ease-in-out bg-white"
+                      className={cn(
+                        "object-cover w-full sm:group-hover:scale-105 sm:transition-transform sm:duration-400 sm:ease-in-out bg-white",
+                        imgClassName,
+                      )}
                       alt="cover"
                       src={image}
                       width={624}
diff --git a/src/components/ui/XLogShorts.tsx b/src/components/ui/XLogShorts.tsx
new file mode 100644
index 00000000..1ebb9fbf
--- /dev/null
+++ b/src/components/ui/XLogShorts.tsx
@@ -0,0 +1,127 @@
+"use client"
+
+import { useLocale } from "next-intl"
+import React, { FC, useCallback } from "react"
+
+import { Language } from "~/lib/types"
+import { cn, isMobileDevice } from "~/lib/utils"
+import { useGetPage } from "~/queries/page"
+import { useGetSite } from "~/queries/site"
+
+import { Time } from "../common/Time"
+import PostCover from "../home/PostCover"
+import { Avatar } from "./Avatar"
+
+const XLogShorts: FC<{ slug: string; handle: string }> = ({ slug, handle }) => {
+  const locale = useLocale() as Language
+  // https://xlog.app/site/lca/JOoXQKAtZYYFrnzntDlJ6?content_type=shorts
+  const site = useGetSite(handle)
+  const page = useGetPage({
+    characterId: site.data?.characterId,
+    slug,
+    handle,
+    disableAutofill: true,
+    translateTo: locale,
+  })
+
+  const images = page.data?.metadata?.content?.attachments
+    ?.filter((attachment) => attachment.name === "image")
+    .map((img) => img.address || "")
+    .filter(Boolean)
+
+  const isMobile = isMobileDevice()
+  const [isExpanded, setIsExpanded] = React.useState(false)
+
+  const toggleExpand = useCallback(() => {
+    setIsExpanded((prev) => !prev)
+  }, [])
+
+  if (page.isLoading) return <div>Loading...</div>
+
+  return (
+    <div
+      onClick={toggleExpand}
+      className={cn(
+        "flex flex-col md:flex-row w-full bg-zinc-50 rounded-xl p-4 gap-x-4 hover:cursor-pointer",
+        isExpanded ? "sm:h-[350px]" : "sm:h-[150px]",
+        "transition-height duration-500 ease-in-out",
+      )}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className={cn(
+          "w-full h-full mb-2 sm:mb-0 align-middle flex items-center justify-center",
+          isExpanded ? "sm:w-[350px]" : "sm:w-[150px]",
+          "transition-width duration-500 ease-in-out",
+        )}
+      >
+        <PostCover
+          uniqueKey={`short-${page.data?.characterId}-${page.data?.noteId}`}
+          images={images}
+          title={page.data?.metadata?.content?.title}
+          className="rounded-lg w-full aspect-auto border-b-0 h-full"
+          imgClassName="rounded-lg object-contain"
+        />
+      </div>
+      <div className="flex-1 flex flex-col justify-between">
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {page.data?.metadata?.content?.title && (
+            <div className="font-bold mb-2 text-lg truncate">
+              {page.data?.metadata?.content?.title}
+            </div>
+          )}
+          <div className="prose overflow-y-auto">
+            <p className={`line-clamp-${isExpanded || isMobile ? 6 : 1}`}>
+              {page.data?.metadata?.content?.content}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex flex-row w-full justify-between items-end sm:mt-0 mt-4">
+          <span className="text-sm">
+            <Time isoString={page.data?.metadata?.content?.date_published} />
+          </span>
+
+          <span className="p-2 flex w-auto justify-end items-center transition-colors py-1 rounded-lg">
+            <Avatar
+              cid={site.data?.characterId}
+              className="align-middle"
+              images={site.data?.metadata?.content?.avatars || []}
+              name={site.data?.metadata?.content?.name}
+              size={32}
+            />
+
+            <div
+              className={`flex-1 flex-col min-w-0 ml-2 max-w-[100px] flex sm:mr-6`}
+            >
+              <span
+                className={`text-left leading-none font-medium truncate text-gray-600 text-base`}
+                style={{ marginBottom: "0.15rem" }}
+              >
+                {site.data?.metadata?.content?.name}
+              </span>
+              {site.data?.handle && (
+                <span
+                  className={`text-left leading-none text-sm truncate text-gray-400`}
+                >
+                  {"@" + site.data?.handle}
+                </span>
+              )}
+            </div>
+
+            <i
+              className={cn(
+                "i-mingcute-arrows-down-line text-xl ml-[2px] text-accent",
+                isExpanded ? "rotate-180" : "rotate-0",
+                "transition-transform duration-500 ease-in-out",
+                "hidden sm:inline-block",
+              )}
+            />
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default XLogShorts
diff --git a/src/markdown/embed-transformers/XLogShorts.ts b/src/markdown/embed-transformers/XLogShorts.ts
new file mode 100644
index 00000000..df4b08c9
--- /dev/null
+++ b/src/markdown/embed-transformers/XLogShorts.ts
@@ -0,0 +1,54 @@
+import { match } from "path-to-regexp"
+
+import type { Transformer } from "../rehype-embed"
+import { isHostIncludes } from "./utils"
+
+export const XLogShortsTransformer: Transformer = {
+  name: "XLogShorts",
+  shouldTransform(url) {
+    // There are two patterns for xlog shorts url
+
+    const { host, pathname, searchParams } = url
+    const hasShortsParam = searchParams.get("ct") === "shorts"
+
+    /**
+     * content type param is required
+     * @example ?ct=shorts
+     * */
+    if (!hasShortsParam) return false
+
+    // https://xlog.app/site/caspian-3030/AtOAglnMV_N6xslDbfhz4?ct=shorts
+    if (isHostIncludes("xlog.app", host) && pathname.startsWith("/site/")) {
+      return true
+    }
+
+    // https://caspian-3030.xlog.app/AtOAglnMV_N6xslDbfhz4?ct=shorts
+    return /^[a-z0-9-]+\.xlog\.app/.test(host)
+  },
+  getHTML(url) {
+    let slug = ""
+    let handle = ""
+
+    // import { match } from "path-to-regexp"
+    // https://caspian-3030.xlog.app/AtOAglnMV_N6xslDbfhz4?ct=shorts
+    let matched = match<{ slug: string }>("/:slug")(url.pathname)
+
+    if (matched) {
+      slug = matched.params.slug
+      handle = url.host.split(".")[0]
+    } else {
+      // https://xlog.app/site/caspian-3030/AtOAglnMV_N6xslDbfhz4?ct=shorts
+      matched = match<{ slug: string; handle: string }>("/site/:handle/:slug")(
+        url.pathname,
+      )
+
+      if (!matched) return
+
+      slug = matched?.params.slug || ""
+      // @ts-ignore
+      handle = matched?.params.handle || ""
+    }
+
+    return `<xlog-shorts slug="${slug}" handle="${handle}"/>`
+  },
+}
diff --git a/src/markdown/embed-transformers/index.ts b/src/markdown/embed-transformers/index.ts
index cc7bf5db..af1ab5ff 100644
--- a/src/markdown/embed-transformers/index.ts
+++ b/src/markdown/embed-transformers/index.ts
@@ -4,12 +4,14 @@ import { CodeSandboxTransformer } from "./CodeSandBox"
 import { GitHubRepoTransformer } from "./GitHub"
 import { NetEaseMusicTransformer } from "./NetEaseMusic"
 import { SpotifyTransformer } from "./Spotify"
+import { XLogShortsTransformer } from "./XLogShorts"
 import { YouTubeTransformer } from "./YouTube"
 
 export const transformers: Transformer[] = [
   CodeSandboxTransformer,
   GitHubRepoTransformer,
   YouTubeTransformer,
+  XLogShortsTransformer,
   NetEaseMusicTransformer,
   BilibiliTransformer,
   SpotifyTransformer,
diff --git a/src/markdown/index.ts b/src/markdown/index.ts
index 9d652412..599dfd83 100644
--- a/src/markdown/index.ts
+++ b/src/markdown/index.ts
@@ -57,6 +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 APlayer = dynamic(() => import("~/components/ui/APlayer"))
 
 const DPlayer = dynamic(() => import("~/components/ui/DPlayer"))
@@ -233,6 +234,7 @@ export const renderPageContent = (
           audio: APlayer,
           video: DPlayer,
           "github-repo": GithubRepo,
+          "xlog-shorts": XLogShorts,
           style: Style,
         } as any,
       })

From 8da18cc360187345827ada16caa233ad234a49e1 Mon Sep 17 00:00:00 2001
From: Caspian <zhaodonghao586@outlook.com>
Date: Wed, 20 Dec 2023 15:36:00 +0000
Subject: [PATCH 2/2] Enable easy linking of short-form content and ensure
 navigation to this content is possible when clicking on the short-form
 content card.

---
 src/components/ui/XLogShorts.tsx              | 44 +++++++++---
 src/markdown/embed-transformers/XLogShorts.ts | 71 ++++++++-----------
 2 files changed, 63 insertions(+), 52 deletions(-)

diff --git a/src/components/ui/XLogShorts.tsx b/src/components/ui/XLogShorts.tsx
index 1ebb9fbf..6b1957d5 100644
--- a/src/components/ui/XLogShorts.tsx
+++ b/src/components/ui/XLogShorts.tsx
@@ -11,8 +11,17 @@ import { useGetSite } from "~/queries/site"
 import { Time } from "../common/Time"
 import PostCover from "../home/PostCover"
 import { Avatar } from "./Avatar"
+import { UniLink } from "./UniLink"
+
+interface Props {
+  slug: string
+  handle: string
+  url: string
+}
+
+const XLogShorts: FC<Props> = ({ slug, handle, url }) => {
+  const [isExpanded, setIsExpanded] = React.useState(false)
 
-const XLogShorts: FC<{ slug: string; handle: string }> = ({ slug, handle }) => {
   const locale = useLocale() as Language
   // https://xlog.app/site/lca/JOoXQKAtZYYFrnzntDlJ6?content_type=shorts
   const site = useGetSite(handle)
@@ -30,21 +39,31 @@ const XLogShorts: FC<{ slug: string; handle: string }> = ({ slug, handle }) => {
     .filter(Boolean)
 
   const isMobile = isMobileDevice()
-  const [isExpanded, setIsExpanded] = React.useState(false)
+  const isShort = !!page.data?.metadata?.content?.tags?.includes("short")
 
-  const toggleExpand = useCallback(() => {
-    setIsExpanded((prev) => !prev)
-  }, [])
+  const toggleExpand = useCallback(
+    (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+      e.stopPropagation()
+      setIsExpanded((prev) => !prev)
+    },
+    [],
+  )
+
+  const handleRedirect = useCallback(() => {
+    window.open(url, "_blank")
+  }, [url])
 
   if (page.isLoading) return <div>Loading...</div>
 
+  if (!isShort) return <UniLink href={url}>{url}</UniLink>
+
   return (
     <div
-      onClick={toggleExpand}
+      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",
         isExpanded ? "sm:h-[350px]" : "sm:h-[150px]",
-        "transition-height duration-500 ease-in-out",
+        "transition-all duration-500 ease-in-out",
       )}
     >
       <div
@@ -52,7 +71,7 @@ const XLogShorts: FC<{ slug: string; handle: string }> = ({ slug, handle }) => {
         className={cn(
           "w-full h-full mb-2 sm:mb-0 align-middle flex items-center justify-center",
           isExpanded ? "sm:w-[350px]" : "sm:w-[150px]",
-          "transition-width duration-500 ease-in-out",
+          "transition-all duration-500 ease-in-out",
         )}
       >
         <PostCover
@@ -71,7 +90,11 @@ const XLogShorts: FC<{ slug: string; handle: string }> = ({ slug, handle }) => {
             </div>
           )}
           <div className="prose overflow-y-auto">
-            <p className={`line-clamp-${isExpanded || isMobile ? 6 : 1}`}>
+            <p
+              className={
+                isExpanded || isMobile ? "line-clamp-6" : "line-clamp-1"
+              }
+            >
               {page.data?.metadata?.content?.content}
             </p>
           </div>
@@ -111,11 +134,12 @@ const XLogShorts: FC<{ slug: string; handle: string }> = ({ slug, handle }) => {
 
             <i
               className={cn(
-                "i-mingcute-arrows-down-line text-xl ml-[2px] text-accent",
+                "i-mingcute-arrows-down-line text-xl ml-[2px] text-accent hover:cursor-pointer",
                 isExpanded ? "rotate-180" : "rotate-0",
                 "transition-transform duration-500 ease-in-out",
                 "hidden sm:inline-block",
               )}
+              onClick={toggleExpand}
             />
           </span>
         </div>
diff --git a/src/markdown/embed-transformers/XLogShorts.ts b/src/markdown/embed-transformers/XLogShorts.ts
index df4b08c9..02d9d674 100644
--- a/src/markdown/embed-transformers/XLogShorts.ts
+++ b/src/markdown/embed-transformers/XLogShorts.ts
@@ -1,54 +1,41 @@
 import { match } from "path-to-regexp"
 
 import type { Transformer } from "../rehype-embed"
-import { isHostIncludes } from "./utils"
+
+function getParamsFromShortsURL(url: URL) {
+  let slug = ""
+  let handle = ""
+
+  // https://caspian-3030.xlog.app/AtOAglnMV_N6xslDbfhz4?ct=shorts
+  let matched = match<{ slug: string }>("/:slug")(url.pathname)
+
+  if (matched) {
+    slug = matched.params.slug
+    handle = url.host.split(".")[0]
+  } else {
+    // https://xlog.app/site/caspian-3030/AtOAglnMV_N6xslDbfhz4?ct=shorts
+    matched = match<{ slug: string; handle: string }>("/site/:handle/:slug")(
+      url.pathname,
+    )
+
+    if (!matched) return undefined
+
+    slug = matched?.params.slug || ""
+    // @ts-ignore
+    handle = matched?.params.handle || ""
+  }
+
+  return { slug, handle }
+}
 
 export const XLogShortsTransformer: Transformer = {
   name: "XLogShorts",
   shouldTransform(url) {
-    // There are two patterns for xlog shorts url
-
-    const { host, pathname, searchParams } = url
-    const hasShortsParam = searchParams.get("ct") === "shorts"
-
-    /**
-     * content type param is required
-     * @example ?ct=shorts
-     * */
-    if (!hasShortsParam) return false
-
-    // https://xlog.app/site/caspian-3030/AtOAglnMV_N6xslDbfhz4?ct=shorts
-    if (isHostIncludes("xlog.app", host) && pathname.startsWith("/site/")) {
-      return true
-    }
-
-    // https://caspian-3030.xlog.app/AtOAglnMV_N6xslDbfhz4?ct=shorts
-    return /^[a-z0-9-]+\.xlog\.app/.test(host)
+    return !!getParamsFromShortsURL(url)
   },
   getHTML(url) {
-    let slug = ""
-    let handle = ""
+    const { slug, handle } = getParamsFromShortsURL(url)!
 
-    // import { match } from "path-to-regexp"
-    // https://caspian-3030.xlog.app/AtOAglnMV_N6xslDbfhz4?ct=shorts
-    let matched = match<{ slug: string }>("/:slug")(url.pathname)
-
-    if (matched) {
-      slug = matched.params.slug
-      handle = url.host.split(".")[0]
-    } else {
-      // https://xlog.app/site/caspian-3030/AtOAglnMV_N6xslDbfhz4?ct=shorts
-      matched = match<{ slug: string; handle: string }>("/site/:handle/:slug")(
-        url.pathname,
-      )
-
-      if (!matched) return
-
-      slug = matched?.params.slug || ""
-      // @ts-ignore
-      handle = matched?.params.handle || ""
-    }
-
-    return `<xlog-shorts slug="${slug}" handle="${handle}"/>`
+    return `<xlog-shorts slug="${slug}" handle="${handle}" url="${url.toString()}"/>`
   },
 }