From c0c18e5b61d897422ec6c4fea1362b249892746a Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Tue, 22 Mar 2022 22:05:26 -0700
Subject: [PATCH] client: improve makrdown handling of nested elements

---
 client/lib/render-markdown.tsx     | 47 +++++++++++++++---------------
 client/styles/markdown.css         |  1 -
 server/src/lib/render-markdown.tsx | 47 +++++++++++++++---------------
 3 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/client/lib/render-markdown.tsx b/client/lib/render-markdown.tsx
index 820df8d5..e3c30843 100644
--- a/client/lib/render-markdown.tsx
+++ b/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}`
+// 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>
-    )
-}
+//     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>`
-}
+// 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" />`
diff --git a/client/styles/markdown.css b/client/styles/markdown.css
index ec6c58a6..0060c342 100644
--- a/client/styles/markdown.css
+++ b/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 {
diff --git a/server/src/lib/render-markdown.tsx b/server/src/lib/render-markdown.tsx
index 820df8d5..e3c30843 100644
--- a/server/src/lib/render-markdown.tsx
+++ b/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}`
+// 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>
-    )
-}
+//     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>`
-}
+// 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" />`