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()
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" />`

1
client/styles/markdown.css
View file

@ -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 {

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

@ -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" />`