feat: Enable links in bio

components/profile/ProfileDetail.vue

@@ -196,6 +196,7 @@
           class="max-w-lg whitespace-break-spaces text-sm">
           <Markdown
             :source="userProfile.description"
+            html
             data-testid="profile-description" />
         </div>
         <!-- Followers -->
@@ -381,7 +382,6 @@ import {
 } from '@/services/profile'
 import { removeHttpFromUrl } from '@/utils/url'
 import { ButtonConfig, ProfileTab } from './types'
-
 import profileTabsCount from '@/queries/subsquid/general/profileTabsCount.query'
 import { openProfileCreateModal } from '@/components/profile/create/openProfileModal'
 

components/profile/create/Modal.vue

@@ -42,6 +42,7 @@ import { rateLimitedPinFileToIPFS } from '@/services/nftStorage'
 import { appClient, createChannel } from '@/services/farcaster'
 import { StatusAPIResponse } from '@farcaster/auth-client'
 import { useDocumentVisibility } from '@vueuse/core'
+import { getBioWithLinks } from '../utils'
 
 const props = defineProps<{
   modelValue: boolean
@@ -107,7 +108,7 @@ const processProfile = async (profileData: ProfileFormData) => {
   const profileBody: CreateProfileRequest | UpdateProfileRequest = {
     address: profileData.address,
     name: profileData.name,
-    description: profileData.description,
+    description: getBioWithLinks(profileData.description),
     image: imageUrl,
     banner: bannerUrl,
     socials: constructSocials(profileData),

components/profile/create/stages/Form.vue

@@ -190,32 +190,29 @@ const socialLinks = [
 watchEffect(async () => {
   const profile = userProfile.value
   const farcasterProfile = props.farcasterUserData
+  const useFarcasterData = props.useFarcaster && farcasterProfile
+  const getProfileSocial = (platform: string) =>
+    profile?.socials.find((s) => s.platform === platform)
 
   // Use Farcaster data if useFarcaster is true and data is available, otherwise fallback to profile data
-  form.name =
-    props.useFarcaster && farcasterProfile
-      ? farcasterProfile.displayName ?? ''
-      : profile?.name ?? ''
-  form.description =
-    props.useFarcaster && farcasterProfile
-      ? farcasterProfile.bio ?? ''
-      : profile?.description ?? ''
-  form.imagePreview =
-    props.useFarcaster && farcasterProfile
-      ? farcasterProfile.pfpUrl
-      : profile?.image
+  form.name = useFarcasterData
+    ? farcasterProfile.displayName ?? ''
+    : profile?.name ?? ''
+  form.description = useFarcasterData
+    ? farcasterProfile.bio ?? ''
+    : profile?.description ?? ''
+  form.imagePreview = useFarcasterData
+    ? farcasterProfile.pfpUrl
+    : profile?.image
   form.bannerPreview = profile?.banner ?? undefined // Banner preview assumed to always come from the profile
 
   // Conditional for Farcaster handle based on the useFarcaster prop
-  form.farcasterHandle =
-    props.useFarcaster && farcasterProfile
-      ? farcasterProfile.username
-      : profile?.socials.find((s) => s.platform === 'Farcaster')?.handle
+  form.farcasterHandle = useFarcasterData
+    ? farcasterProfile.username
+    : getProfileSocial('Farcaster')?.handle
 
   // Social handles are fetched from profile regardless of the Farcaster usage
-  form.twitterHandle = profile?.socials.find(
-    (s) => s.platform === 'Twitter',
-  )?.handle
-  form.website = profile?.socials.find((s) => s.platform === 'Website')?.handle
+  form.twitterHandle = getProfileSocial('Twitter')?.handle
+  form.website = getProfileSocial('Website')?.handle
 })
 </script>

components/profile/utils.ts

@@ -0,0 +1,31 @@
+type LinkableBlock = {
+  regex: RegExp
+  template: (match: string) => string
+}
+
+const createLink = (content: string, url: string) =>
+  `<a href="${url}" target="_blank" rel="nofollow noopener noreferrer">${content}</a>`
+
+const LINKABLE_BLOCKS: LinkableBlock[] = [
+  {
+    regex:
+      /(?<!\[[^\]]*)(?<!\([^\)]*)(?<!<a[^>]*>)\/\w+(?![^<>]*<\/a>)(?![^<>]*>)(?![^\[]*\])(?![^\(]*\))/,
+    template: (match: string) => `https://warpcast.com/~/channel${match}`,
+  },
+  {
+    regex:
+      /(?<!\[[^\]]*)(?<!\([^\)]*)(?<!<a[^>]*>)@(\w{1,15})\b(?!<\/a>)(?![^\[]*\])(?![^\(]*\))/,
+    template: (match: string) =>
+      `https://warpcast.com/${match.slice(1, match.length)}`,
+  },
+]
+
+export const getBioWithLinks = (description: string) => {
+  return LINKABLE_BLOCKS.reduce(
+    (reducer, { regex, template }) =>
+      reducer.replace(new RegExp(regex, 'g'), (match: string) =>
+        createLink(match, template(match)),
+      ),
+    description,
+  )
+}

components/shared/Markdown.vue

@@ -6,8 +6,17 @@
 import MarkdownIt from 'markdown-it'
 import Prism from 'prismjs'
 
+const props = withDefaults(
+  defineProps<{
+    source: string
+    html?: boolean
+  }>(),
+  { html: false },
+)
+
 const markdown = new MarkdownIt({
   breaks: true,
+  html: props.html,
   highlight: (code: string, lang: string) => {
     if (lang && Prism.languages[lang]) {
       return `<pre class="language-${lang}"><code>${Prism.highlight(
@@ -23,9 +32,5 @@ const markdown = new MarkdownIt({
   },
 })
 
-defineProps<{
-  source: string
-}>()
-
 // useRedirectModal(markdown)
 </script>