feat: support markdown for bio

src/components/site/SiteHeader.tsx

@@ -180,9 +180,10 @@ export const SiteHeader: React.FC<{
                 {site?.name}
               </div>
               {site?.bio && (
-                <div className="xlog-site-description text-gray-500 text-sm">
-                  {site?.bio}
-                </div>
+                <div
+                  className="xlog-site-description text-gray-500 text-xs mt-1"
+                  dangerouslySetInnerHTML={{ __html: site?.description || "" }}
+                ></div>
               )}
               <div className="mt-3 text-sm">
                 {siteSubscriptions.data ? (

src/components/site/SiteLayout.tsx

@@ -42,7 +42,9 @@ export const SiteLayout: React.FC<SiteLayoutProps> = ({
       <SEOHead
         title={title || page?.title || site?.name}
         siteName={site?.name || ""}
-        description={ogDescription ?? site?.bio}
+        description={
+          ogDescription ?? site?.description?.replace(/<[^>]*>/g, "")
+        }
         image={getUserContentsUrl(site?.avatars?.[0])}
       />
       <SiteHeader site={site} />

src/css/tailwind.css

@@ -236,3 +236,7 @@ textarea.input {
 .cm-editor {
   @apply h-full;
 }
+
+.xlog-site-description a {
+  @apply underline;
+}

src/lib/types.ts

@@ -86,6 +86,7 @@ export type Profile = UniProfile & {
   css?: string
   ga?: string
   custom_domain?: string
+  description?: string
 }
 
 export type Profiles = {

src/models/site.model.ts

@@ -3,6 +3,7 @@ import { nanoid } from "nanoid"
 import { checkReservedWords } from "~/lib/reserved-words"
 import unidata from "~/lib/unidata"
 import { indexer, getContract } from "~/lib/crossbell"
+import { renderPageContent } from "~/markdown"
 
 export const checkSubdomain = async ({
   subdomain,
@@ -31,7 +32,7 @@ export const checkSubdomain = async ({
   // }
 }
 
-const expandSite = (site: Profile) => {
+const expandSite = async (site: Profile) => {
   site.navigation = JSON.parse(
     site.metadata?.raw?.attributes?.find(
       (a: any) => a.trait_type === "xlog_navigation",
@@ -56,6 +57,7 @@ const expandSite = (site: Profile) => {
       (a: any) => a.trait_type === "xlog_custom_domain",
     )?.value || ""
   site.name = site.name || site.username
+  site.description = (await renderPageContent(site.bio || "")).contentHTML
 
   return site
 }
@@ -73,10 +75,12 @@ export const getUserSites = async (address?: string) => {
     },
   })
 
-  const sites: Profile[] = profiles.list?.map((profile) => {
-    expandSite(profile)
-    return profile
-  })
+  const sites: Profile[] = await Promise.all(
+    profiles.list?.map((profile) => {
+      expandSite(profile)
+      return profile
+    }),
+  )
 
   if (!sites || !sites.length) return null
 
@@ -91,7 +95,7 @@ export const getSite = async (input: string) => {
   })
 
   const site: Profile = profiles.list[0]
-  expandSite(site)
+  await expandSite(site)
 
   return site
 }

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

@@ -77,10 +77,12 @@ export default function SiteSettingsGeneralPage() {
             <label htmlFor="description" className="form-label">
               Description
             </label>
-            <textarea
+            <Input
+              multiline
               id="description"
               className="input is-block"
               rows={2}
+              help="Support Markdown"
               {...form.register("description")}
             />
           </div>