CoastalCommits/CoastalCommitsPastes
CoastalCommits/CoastalCommitsPastes
2
1
Fork 0
forked from CoastalCommitsArchival/github.com-MaxLeiter-drift
Code Pull requests Activity Actions

client: improve makrdown handling of nested elements

Browse source
This commit is contained in:
Max Leiter 2022-03-22 22:05:26 -07:00
parent ef16bfc565
commit c0c18e5b61
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
3 changed files with 48 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
client/lib/render-markdown.tsx
View file

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

1
client/styles/markdown.css
View file

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

47
server/src/lib/render-markdown.tsx
View file

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