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

client/components/preview/index.tsx

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

client/lib/render-markdown.tsx

@@ -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>
-        </>
-    )
-}

client/pages/api/markdown/[id].ts

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

client/pages/api/render-markdown.ts

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

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

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

server/src/routes/files.ts

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

server/src/routes/posts.ts

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