feat: use text for descriptions

src/components/common/CharacterCard.tsx

@@ -1,6 +1,5 @@
 import { useTranslation } from "next-i18next"
 import { useEffect, useState } from "react"
-import xss from "xss"
 
 import { FollowingButton } from "~/components/common/FollowingButton"
 import { FollowingCount } from "~/components/common/FollowingCount"
@@ -82,10 +81,9 @@ export const CharacterCard: React.FC<{
             <span className="text-gray-600">@{site?.username}</span>
           </span>
           {site?.description && (
-            <span
-              className="block text-gray-600"
-              dangerouslySetInnerHTML={{ __html: xss(site?.description || "") }}
-            ></span>
+            <span className="text-gray-600 line-clamp-4">
+              {site?.description}
+            </span>
           )}
           {!simple && (
             <span className="block">

src/components/common/PatronModal.tsx

@@ -2,7 +2,6 @@ import confetti from "canvas-confetti"
 import { useTranslation } from "next-i18next"
 import { useEffect, useRef, useState } from "react"
 import { toast } from "react-hot-toast"
-import xss from "xss"
 
 import { useAccountState, useConnectModal } from "@crossbell/connect-kit"
 
@@ -145,10 +144,9 @@ export const PatronModal: React.FC<{
             <span className="ml-1 text-gray-600">@{site?.username}</span>
           </span>
           {site?.description && (
-            <span
-              className="block text-gray-600 text-sm"
-              dangerouslySetInnerHTML={{ __html: xss(site?.description || "") }}
-            ></span>
+            <span className="text-gray-600 text-sm line-clamp-4">
+              {site?.description}
+            </span>
           )}
         </div>
         <div>

src/components/site/SiteHeader.tsx

@@ -3,7 +3,6 @@ import { FastAverageColor } from "fast-average-color"
 import { useTranslation } from "next-i18next"
 import { useRouter } from "next/router"
 import { MutableRefObject, RefObject, useEffect, useRef, useState } from "react"
-import xss from "xss"
 
 import { XCharLogo, XFeedLogo } from "@crossbell/ui"
 import { RssIcon } from "@heroicons/react/24/solid"
@@ -319,13 +318,10 @@ export const SiteHeader: React.FC<{
                   </div>
                 </div>
               </div>
-              {site?.bio && (
-                <div
-                  className="xlog-site-description text-gray-500 leading-snug my-2 sm:my-3 text-sm sm:text-base"
-                  dangerouslySetInnerHTML={{
-                    __html: xss(site?.description || ""),
-                  }}
-                ></div>
+              {site?.description && (
+                <div className="xlog-site-description text-gray-500 leading-snug my-2 sm:my-3 text-sm sm:text-base line-clamp-4">
+                  {site?.description}
+                </div>
               )}
               <div className="flex space-x-0 sm:space-x-5 space-y-2 sm:space-y-0 flex-col sm:flex-row text-sm sm:text-base">
                 <span className="xlog-site-follow-count block sm:inline-block whitespace-nowrap">

src/pages/dashboard/[subdomain]/settings/general.tsx

@@ -5,7 +5,6 @@ import { useEffect, useState } from "react"
 import type { ReactElement } from "react"
 import { Controller, useForm } from "react-hook-form"
 import toast from "react-hot-toast"
-import xss from "xss"
 
 import { DashboardLayout } from "~/components/dashboard/DashboardLayout"
 import { getServerSideProps as getLayoutServerSideProps } from "~/components/dashboard/DashboardLayout.server"
@@ -64,7 +63,7 @@ export default function SiteSettingsGeneralPage() {
       banner: values.banner,
       site: subdomain,
       name: values.name,
-      description: xss(values.description),
+      description: values.description,
       ga: values.ga,
     })
   })