diff --git a/components/container/post-container.tsx b/components/container/post-container.tsx index ec56ca3..266b7ff 100644 --- a/components/container/post-container.tsx +++ b/components/container/post-container.tsx @@ -2,20 +2,19 @@ import NoteState from 'libs/web/state/note' import { removeMarkdown } from 'libs/web/utils/markdown' import { FC, useMemo } from 'react' import { NextSeo } from 'next-seo' -import { renderMarkdown } from 'libs/web/render-markdown' // TODO: Maybe can custom import 'highlight.js/styles/zenburn.css' import { PageMode } from 'libs/shared/page' import Error from 'next/error' import useI18n from 'libs/web/hooks/use-i18n' -export const PostContainer: FC<{ baseURL: string; pageMode: PageMode }> = ({ - baseURL, - pageMode, -}) => { +export const PostContainer: FC<{ + baseURL: string + pageMode: PageMode + post?: string +}> = ({ baseURL, pageMode, post = '' }) => { const { t } = useI18n() const { note } = NoteState.useContainer() - const content = useMemo(() => renderMarkdown(note?.content ?? ''), [note]) const description = useMemo( () => removeMarkdown(note?.content).slice(0, 100), [note] @@ -47,11 +46,11 @@ export const PostContainer: FC<{ baseURL: string; pageMode: PageMode }> = ({
- ) diff --git a/libs/server/connect.ts b/libs/server/connect.ts index 7e06ad6..8618021 100644 --- a/libs/server/connect.ts +++ b/libs/server/connect.ts @@ -35,6 +35,7 @@ export interface ServerProps { tree?: TreeModel ua?: UserAgentType disablePassword: boolean + post: string } export type ApiRequest = NextApiRequest & { diff --git a/libs/server/middlewares/post.ts b/libs/server/middlewares/post.ts new file mode 100644 index 0000000..e65f5d7 --- /dev/null +++ b/libs/server/middlewares/post.ts @@ -0,0 +1,19 @@ +import { SSRMiddeware } from '../connect' +import { renderMarkdown } from '../render-markdown' + +export const applyPost: SSRMiddeware = async (req, _res, next) => { + req.props = { + ...req.props, + post: renderMarkdown(req.props.note?.content ?? ''), + } + + next() +} + +export const applyPostWithAuth: SSRMiddeware = async (req, res, next) => { + if (req.props.isLoggedIn) { + return next() + } + + return applyPost(req, res, next) +} diff --git a/libs/web/render-markdown.tsx b/libs/server/render-markdown.tsx similarity index 82% rename from libs/web/render-markdown.tsx rename to libs/server/render-markdown.tsx index efa6532..f6a362c 100644 --- a/libs/web/render-markdown.tsx +++ b/libs/server/render-markdown.tsx @@ -8,8 +8,10 @@ import noticesPlugin from 'rich-markdown-editor/dist/lib/markdown/notices' import underlinesPlugin from 'rich-markdown-editor/dist/lib/markdown/underlines' import hljs from 'highlight.js' -export function renderMarkdown(markdown: string) { - return markdownit('default', { +export function renderMarkdown(src: string) { + src = src.replace(/\\\n/g, '\n') + + const html = markdownit('default', { breaks: false, html: false, linkify: true, @@ -33,6 +35,12 @@ export function renderMarkdown(markdown: string) { .use(underlinesPlugin) .use(tablesPlugin) .use(noticesPlugin) - .render(markdown) + .use(require('markdown-it-implicit-figures'), { + figcaption: true, + dataType: true, + }) + .render(src) .trim() + + return html } diff --git a/package.json b/package.json index 2ae7f62..b02bd83 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "lodash": "^4.17.21", "lzutf8": "^0.6.0", "markdown-it": "^12.0.6", + "markdown-it-implicit-figures": "^0.10.0", "md5": "^2.3.0", "minio": "^7.0.18", "nanoid": "^3.1.22", diff --git a/pages/[id].tsx b/pages/[id].tsx index a932cbe..c6b0391 100644 --- a/pages/[id].tsx +++ b/pages/[id].tsx @@ -10,6 +10,7 @@ import { PostContainer } from 'components/container/post-container' import { applyCsrf } from 'libs/server/middlewares/csrf' import { ssr, SSRContext, ServerProps } from 'libs/server/connect' import { applyUA } from 'libs/server/middlewares/ua' +import { applyPostWithAuth } from 'libs/server/middlewares/post' export default function EditNotePage({ tree, @@ -17,6 +18,7 @@ export default function EditNotePage({ pageMode, baseURL, isLoggedIn, + post, }: ServerProps) { if (isLoggedIn) { return ( @@ -28,7 +30,7 @@ export default function EditNotePage({ return ( - + ) } @@ -53,6 +55,7 @@ export const getServerSideProps = async ( .use(applySettings) .use(applyCsrf) .use(applyUA) + .use(applyPostWithAuth) .run(ctx.req, ctx.res) return { diff --git a/pages/share/[id].tsx b/pages/share/[id].tsx index 6f40b32..9068141 100644 --- a/pages/share/[id].tsx +++ b/pages/share/[id].tsx @@ -6,16 +6,18 @@ import LayoutPublic from 'components/layout/layout-public' import { PostContainer } from 'components/container/post-container' import { ServerProps, ssr, SSRContext } from 'libs/server/connect' import { useSession } from 'libs/server/middlewares/session' +import { applyPost } from 'libs/server/middlewares/post' export default function SharePage({ tree, note, pageMode, baseURL, + post, }: ServerProps) { return ( - + ) } @@ -33,6 +35,7 @@ export const getServerSideProps = async ( .use(applyTree) .use(applySettings) .use(applyUA) + .use(applyPost) .run(ctx.req, ctx.res) return { diff --git a/yarn.lock b/yarn.lock index 6e6a14f..a871c52 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4765,6 +4765,11 @@ markdown-it-container@^3.0.0: resolved "https://registry.yarnpkg.com/markdown-it-container/-/markdown-it-container-3.0.0.tgz#1d19b06040a020f9a827577bb7dbf67aa5de9a5b" integrity sha512-y6oKTq4BB9OQuY/KLfk/O3ysFhB3IMYoIWhGJEidXt1NQFocFK2sA2t0NYZAMyMShAGL6x5OPIbrmXPIqaN9rw== +markdown-it-implicit-figures@^0.10.0: + version "0.10.0" + resolved "https://registry.yarnpkg.com/markdown-it-implicit-figures/-/markdown-it-implicit-figures-0.10.0.tgz#0e75e80b846da1e3117a3fc6d6b013d0cc3f2a8c" + integrity sha512-1TWr6+apyoJvRa4Z7eIolZdeajZCRBcc1ckVXon7XwdL8MfydIWsHnZOS5zRrpUNX5b0/O9giWcmuItSkleK5A== + markdown-it@^10.0.0: version "10.0.0" resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-10.0.0.tgz#abfc64f141b1722d663402044e43927f1f50a8dc"