client: improve makrdown handling of nested elements

client/lib/render-markdown.tsx

@@ -8,31 +8,32 @@ delete defaultProps.theme
 
 const renderer = new marked.Renderer()
 
-renderer.heading = (text, level, _, slugger) => {
-    const id = slugger.slug(text)
-    const Component = `h${level}`
-
-    return renderToStaticMarkup(
-        //@ts-ignore
-        <Component>
-            <a href={`#${id}`} id={id} style={{ color: "inherit" }} >
-                {text}
-            </a>
-        </Component>
-    )
-}
-
-renderer.link = (href, _, text) => {
-    const isHrefLocal = href?.startsWith('/') || href?.startsWith('#')
-    if (isHrefLocal) {
-        return renderToStaticMarkup(
-            <a href={href || ''}>
-                {text}
-            </a>
-        )
-    }
-    return `<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`
-}
+// renderer.heading = (text, level, _, slugger) => {
+//     const id = slugger.slug(text)
+//     const Component = `h${level}`
+
+//     return renderToStaticMarkup(
+//         //@ts-ignore
+//         <Component>
+//             <a href={`#${id}`} id={id} style={{ color: "inherit" }} >
+//                 {text}
+//             </a>
+//         </Component>
+//     )
+// }
+
+// TODO: support elements inside link
+// renderer.link = (href, _, text) => {
+//     const isHrefLocal = href?.startsWith('/') || href?.startsWith('#')
+//     if (isHrefLocal) {
+//         return renderToStaticMarkup(
+//             <a href={href || ''}>
+//                 {text}
+//             </a>
+//         )
+//     }
+//     return `<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`
+// }
 
 renderer.image = function (href, _, text) {
     return `<Image loading="lazy" src="${href}" alt="${text}" layout="fill" />`

client/styles/markdown.css

@@ -97,7 +97,6 @@ input[type="checkbox"]:focus {
 article *:not(pre) > code {
   font-weight: 500;
   font-family: var(--font-sans);
-  font-size: 1rem;
 }
 
 article li > p {

server/src/lib/render-markdown.tsx

@@ -8,31 +8,32 @@ delete defaultProps.theme
 
 const renderer = new marked.Renderer()
 
-renderer.heading = (text, level, _, slugger) => {
-    const id = slugger.slug(text)
-    const Component = `h${level}`
-
-    return renderToStaticMarkup(
-        //@ts-ignore
-        <Component>
-            <a href={`#${id}`} id={id} style={{ color: "inherit" }} >
-                {text}
-            </a>
-        </Component>
-    )
-}
-
-renderer.link = (href, _, text) => {
-    const isHrefLocal = href?.startsWith('/') || href?.startsWith('#')
-    if (isHrefLocal) {
-        return renderToStaticMarkup(
-            <a href={href || ''}>
-                {text}
-            </a>
-        )
-    }
-    return `<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`
-}
+// renderer.heading = (text, level, _, slugger) => {
+//     const id = slugger.slug(text)
+//     const Component = `h${level}`
+
+//     return renderToStaticMarkup(
+//         //@ts-ignore
+//         <Component>
+//             <a href={`#${id}`} id={id} style={{ color: "inherit" }} >
+//                 {text}
+//             </a>
+//         </Component>
+//     )
+// }
+
+// TODO: support elements inside link
+// renderer.link = (href, _, text) => {
+//     const isHrefLocal = href?.startsWith('/') || href?.startsWith('#')
+//     if (isHrefLocal) {
+//         return renderToStaticMarkup(
+//             <a href={href || ''}>
+//                 {text}
+//             </a>
+//         )
+//     }
+//     return `<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`
+// }
 
 renderer.image = function (href, _, text) {
     return `<Image loading="lazy" src="${href}" alt="${text}" layout="fill" />`