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

client/server: move markdown rendering from client/ entirely to server/

Browse source
This commit is contained in:
Max Leiter 2022-04-04 18:13:18 -07:00
parent d495d7b222
commit 3a879edc23
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
7 changed files with 71 additions and 284 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
client/components/preview/index.tsx
View file

@ -1,3 +1,4 @@
import Cookies from "js-cookie"
import { memo, useEffect, useState } from "react"
import styles from './preview.module.css'
@ -24,16 +25,18 @@ const MarkdownPreview = ({ height = 500, fileId, content, title }: Props) => {
setIsLoading(false)
}
} else if (content) {
const resp = await fetch(`/api/render-markdown`, {
const resp = await fetch("/server-api/files/html", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${Cookies.get("drift-token") || ""}`,
},
body: JSON.stringify({
title,
content,
}),
})
if (resp.ok) {
const res = await resp.text()
setPreview(res)

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

@ -1,152 +0,0 @@
import { marked } from 'marked'
import Highlight, { defaultProps, Language, } from 'prism-react-renderer'
import { renderToStaticMarkup } from 'react-dom/server'
// // image sizes. DDoS Safe?
// const imageSizeLink = /^!?\[((?:\[[^\[\]]*\]|\\[\[\]]?|`[^`]*`|[^\[\]\\])*?)\]\(\s*(<(?:\\[<>]?|[^\s<>\\])*>|(?:\\[()]?|\([^\s\x00-\x1f()\\]*\)|[^\s\x00-\x1f()\\])*?(?:\s+=(?:[\w%]+)?x(?:[\w%]+)?)?)(?:\s+("(?:\\"?|[^"\\])*"|'(?:\\'?|[^'\\])*'|\((?:\\\)?|[^)\\])*\)))?\s*\)/;
// //@ts-ignore
// Lexer.rules.inline.normal.link = imageSizeLink;
// //@ts-ignore
// Lexer.rules.inline.gfm.link = imageSizeLink;
// //@ts-ignore
// Lexer.rules.inline.breaks.link = imageSizeLink;
//@ts-ignore
delete defaultProps.theme
// import linkStyles from '../components/link/link.module.css'
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" }} dangerouslySetInnerHTML={{ __html: (text) }} >
</a>
</Component>
)
}
// renderer.link = (href, _, text) => {
// const isHrefLocal = href?.startsWith('/') || href?.startsWith('#')
// if (isHrefLocal) {
// return renderToStaticMarkup(
// <a href={href || ''}>
// {text}
// </a>
// )
// }
// // dirty hack
// // if text contains elements, render as html
// return <a href={href || ""} target="_blank" rel="noopener noreferrer" dangerouslySetInnerHTML={{ __html: convertHtmlEntities(text) }} ></a>
// }
renderer.image = function (href, _, text) {
return `<Image loading="lazy" src="${href}" alt="${text}" layout="fill" />`
}
renderer.checkbox = () => ''
renderer.listitem = (text, task, checked) => {
if (task) {
return `<li class="reset"><span class="check">&#8203;<input type="checkbox" disabled ${checked ? 'checked' : ''
} /></span><span>${text}</span></li>`
}
return `<li>${text}</li>`
}
renderer.code = (code: string, language: string) => {
return renderToStaticMarkup(
<pre>
{/* {title && <code>{title} </code>} */}
{/* {language && title && <code style={{}}> {language} </code>} */}
<Code
language={language}
// title={title}
code={code}
// highlight={highlight}
/>
</pre>
)
}
marked.setOptions({
gfm: true,
breaks: true,
headerIds: true,
renderer,
})
const markdown = (markdown: string) => marked(markdown)
export default markdown
const Code = ({ code, language, highlight, title, ...props }: {
code: string,
language: string,
highlight?: string,
title?: string,
}) => {
if (!language)
return (
<>
<code {...props} dangerouslySetInnerHTML={{ __html: code }} />
</>
)
const highlightedLines = highlight
//@ts-ignore
? highlight.split(',').reduce((lines, h) => {
if (h.includes('-')) {
// Expand ranges like 3-5 into [3,4,5]
const [start, end] = h.split('-').map(Number)
const x = Array(end - start + 1)
.fill(undefined)
.map((_, i) => i + start)
return [...lines, ...x]
}
return [...lines, Number(h)]
}, [])
: ''
// https://mdxjs.com/guides/syntax-harkedighlighting#all-together
return (
<>
<Highlight {...defaultProps} code={code.trim()} language={language as Language} >
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<code className={className} style={{ ...style }}>
{
tokens.map((line, i) => (
<div
key={i}
{...getLineProps({ line, key: i })}
style={
//@ts-ignore
highlightedLines.includes((i + 1).toString())
? {
background: 'var(--highlight)',
margin: '0 -1rem',
padding: '0 1rem',
}
: undefined
}
>
{
line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))
}
</div>
))}
</code>
)}
</Highlight>
</>
)
}

57
client/pages/api/markdown/[id].ts
View file

@ -1,57 +0,0 @@
import type { NextApiHandler } from "next"
import markdown from "@lib/render-markdown"
const renderMarkdown: NextApiHandler = async (req, res) => {
const { id } = req.query
const file = await fetch(`${process.env.API_URL}/files/raw/${id}`, {
headers: {
Accept: "text/plain",
"x-secret-key": process.env.SECRET_KEY || "",
Authorization: `Bearer ${req.cookies["drift-token"]}`
}
})
if (file.status !== 200) {
return res.status(404).json({ error: "File not found" })
}
const json = await file.json()
const { content, title } = json
const renderAsMarkdown = [
"markdown",
"md",
"mdown",
"mkdn",
"mkd",
"mdwn",
"mdtxt",
"mdtext",
"text",
""
]
const fileType = () => {
const pathParts = title.split(".")
const language = pathParts.length > 1 ? pathParts[pathParts.length - 1] : ""
return language
}
const type = fileType()
let contentToRender: string = "\n" + content
if (!renderAsMarkdown.includes(type)) {
contentToRender = `~~~${type}
${content}
~~~`
}
if (typeof contentToRender !== "string") {
res.status(400).send("content must be a string")
return
}
res.setHeader("Content-Type", "text/plain")
res.setHeader("Cache-Control", "public, max-age=4800")
res.status(200).write(markdown(contentToRender))
res.end()
}
export default renderMarkdown

42
client/pages/api/render-markdown.ts
View file

@ -1,42 +0,0 @@
import type { NextApiHandler } from "next"
import markdown from "@lib/render-markdown"
const renderMarkdown: NextApiHandler = async (req, res) => {
const { content, title } = req.body
const renderAsMarkdown = [
"markdown",
"md",
"mdown",
"mkdn",
"mkd",
"mdwn",
"mdtxt",
"mdtext",
"text",
""
]
const fileType = () => {
const pathParts = title.split(".")
const language = pathParts.length > 1 ? pathParts[pathParts.length - 1] : ""
return language
}
const type = fileType()
let contentToRender: string = content || ""
if (!renderAsMarkdown.includes(type)) {
contentToRender = `~~~${type}
${content}
~~~`
} else {
contentToRender = "\n" + content
}
if (typeof contentToRender !== "string") {
res.status(400).send("content must be a string")
return
}
res.status(200).write(markdown(contentToRender))
res.end()
}
export default renderMarkdown

41
server/src/lib/get-html-from-drift-file.ts Normal file
View file

@ -0,0 +1,41 @@
import markdown from "./render-markdown"
import { File } from "@lib/models/File"
/**
* returns rendered HTML from a Drift file
*/
function getHtmlFromFile({ content, title }: Pick<File, "content" | "title">) {
const renderAsMarkdown = [
"markdown",
"md",
"mdown",
"mkdn",
"mkd",
"mdwn",
"mdtxt",
"mdtext",
"text",
""
]
const fileType = () => {
const pathParts = title.split(".")
const language = pathParts.length > 1 ? pathParts[pathParts.length - 1] : ""
return language
}
const type = fileType()
let contentToRender: string = content || ""
if (!renderAsMarkdown.includes(type)) {
contentToRender = `~~~${type}
${content}
~~~`
} else {
contentToRender = "\n" + content
}
console.log(contentToRender.slice(0, 50))
const html = markdown(contentToRender)
return html
}
export default getHtmlFromFile

25
server/src/routes/files.ts
View file

@ -2,9 +2,34 @@ import { celebrate, Joi } from "celebrate"
import { Router } from "express"
import { File } from "@lib/models/File"
import secretKey from "@lib/middleware/secret-key"
import jwt from "@lib/middleware/jwt"
import getHtmlFromFile from "@lib/get-html-from-drift-file"
export const files = Router()
files.post(
"/html",
jwt,
// celebrate({
// body: Joi.object().keys({
// content: Joi.string().required().allow(""),
// title: Joi.string().required().allow(""),
// })
// }),
async (req, res, next) => {
const { content, title } = req.body
const renderedHtml = getHtmlFromFile({
content,
title
})
res.setHeader("Content-Type", "text/plain")
// res.setHeader("Cache-Control", "public, max-age=4800")
res.status(200).write(renderedHtml)
res.end()
}
)
files.get(
"/raw/:id",
celebrate({

33
server/src/routes/posts.ts
View file

@ -6,9 +6,9 @@ import jwt, { UserJwtRequest } from "@lib/middleware/jwt"
import * as crypto from "crypto"
import { User } from "@lib/models/User"
import secretKey from "@lib/middleware/secret-key"
import markdown from "@lib/render-markdown"
import { Op } from "sequelize"
import { PostAuthor } from "@lib/models/PostAuthor"
import getHtmlFromFile from "@lib/get-html-from-drift-file"
export const posts = Router()
@ -358,34 +358,3 @@ posts.delete("/:id", jwt, async (req: UserJwtRequest, res, next) => {
}
})
function getHtmlFromFile(file: any) {
const renderAsMarkdown = [
"markdown",
"md",
"mdown",
"mkdn",
"mkd",
"mdwn",
"mdtxt",
"mdtext",
"text",
""
]
const fileType = () => {
const pathParts = file.title.split(".")
const language = pathParts.length > 1 ? pathParts[pathParts.length - 1] : ""
return language
}
const type = fileType()
let contentToRender: string = file.content || ""
if (!renderAsMarkdown.includes(type)) {
contentToRender = `~~~${type}
${file.content}
~~~`
} else {
contentToRender = "\n" + file.content
}
const html = markdown(contentToRender)
return html
}