The weeb for the next gen discord boat - Wamellow wamellow.com
bot discord
3
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix some discord markdown

Luna 214287b6 264e60f4

+16 -14
+16 -14
components/discord/markdown.tsx
··· 1 1 import React, { FunctionComponent } from "react"; 2 - import { ReactMarkdown } from "react-markdown/lib/react-markdown"; 2 + import ReactMarkdown from "react-markdown"; 3 3 import rehypeRaw from "rehype-raw"; 4 4 5 5 interface Props { ··· 13 13 .replaceAll(">", "&gt;"); 14 14 15 15 const plClassName = `${mode === "DARK" ? "bg-wamellow text-neutral-200" : "bg-wamellow-100 text-neutral-800"} border border-violet-400 p-[3px] rounded-lg opacity-80 font-light`; 16 - const emClassName = "rounded-md"; 17 16 18 17 function parseDiscordMarkdown(content: string) { 19 18 return content 20 19 .replace(/__(.*?)__/g, "<u>$1</u>") 21 20 .replace(/\{(.*?)\.(.*?)\}/g, `<span className='${plClassName}'>$1 $2</span>`) 22 - .replace(/<a?:\w{2,32}:(.*?)>/g, `<img className='${emClassName}' src="$https://cdn.discordapp.com/emojis/$1.webp?size=40&quality=lossless" />`) 23 - .replace(/<(@|@!)\d{15,21}>/g, "<span className='bg-blurple/25 hover:bg-blurple/50 p-1 rounded-md text-neutral-100 font-light text-sx duration-200 cursor-pointer'>@User</span>") 24 - .replace(/<(#)\d{15,21}>/g, "<span className='bg-blurple/25 hover:bg-blurple/50 p-1 rounded-md text-neutral-100 font-light text-sx duration-200 cursor-pointer'>@Channel</span>"); 21 + .replace(/<a?:\w{2,32}:(.*?)>/g, "<img alt='emoji' className='rounded-md inline' style='height: 1.375em; position: relative' src='https://cdn.discordapp.com/emojis/$1.webp?size=40&quality=lossless' />") 22 + .replace(/<(@!?)\d{15,21}>/g, "<span className='bg-blurple/25 hover:bg-blurple/50 p-1 rounded-md dark:text-neutral-100 text-neutral-900 font-light text-sx duration-200 cursor-pointer'>@user</span>") 23 + .replace(/<(#!?)\d{15,21}>/g, "<span className='bg-blurple/25 hover:bg-blurple/50 p-1 rounded-md dark:text-neutral-100 text-neutral-900 font-light text-sx duration-200 cursor-pointer'>@channel</span>"); 25 24 } 26 25 27 26 if (!discord) return ( 28 27 <ReactMarkdown 29 - /* @ts-expect-error they broke types */ 30 28 rehypePlugins={[rehypeRaw]} 31 29 allowedElements={["span", "p"]} 32 30 > ··· 42 40 return ( 43 41 <ReactMarkdown 44 42 className="break-words" 45 - /* @ts-expect-error they broke types */ 46 43 rehypePlugins={[rehypeRaw]} 47 44 components={{ 48 45 h1: ({ ...props }) => <div className="text-3xl font-semibold" {...props} />, ··· 57 54 <span className="mr-1">•</span> 58 55 <span {...props} /> 59 56 </div>, 60 - code({ inline, children, ...props }) { 61 - if (!inline) return <div className={`${mode === "DARK" ? "bg-neutral-900" : "bg-neutral-200"} px-4 py-3 text-sm rounded-md min-w-full max-w-full my-2 break-all`}> 62 - {children} 63 - </div>; 57 + // @ts-expect-error inline does exist 58 + code: ({ inline, children, ...props }) => { 59 + if (!inline) return ( 60 + <div className={`${mode === "DARK" ? "bg-neutral-900" : "bg-neutral-200"} px-4 py-3 text-sm rounded-md min-w-full max-w-full my-2 break-all`}> 61 + {children} 62 + </div> 63 + ); 64 64 65 - return <code {...props} className={`${mode === "DARK" ? "bg-neutral-900 text-neutral-100" : "bg-neutral-200 text-neutral-900"} p-1 text-sm rounded`}> 66 - {children} 67 - </code>; 65 + return ( 66 + <code {...props} className={`${mode === "DARK" ? "bg-neutral-900 text-neutral-100" : "bg-neutral-200 text-neutral-900"} p-1 text-sm rounded`}> 67 + {children} 68 + </code> 69 + ); 68 70 } 69 71 70 72 }}