fix: missing figcaption close #46

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 }> = ({
       </header>
       <main
         dangerouslySetInnerHTML={{
-          __html: content,
+          __html: post,
         }}
       ></main>
-      <style jsx global>{`
-        [title='left-50'] {
+      <style jsx>{`
+        .prose :glboal([title='left-50']) {
           float: left;
           width: 50%;
           margin-right: 2em;
@@ -59,13 +58,17 @@ export const PostContainer: FC<{ baseURL: string; pageMode: PageMode }> = ({
           clear: initial;
         }
 
-        [title='right-50'] {
+        .prose :glboal([title='right-50']) {
           float: right;
           width: 50%;
           margin-left: 2em;
           margin-bottom: 1em;
           clear: initial;
         }
+
+        .prose :glboal(figcaption) {
+          text-align: center;
+        }
       `}</style>
     </article>
   )

libs/server/connect.ts

@@ -35,6 +35,7 @@ export interface ServerProps {
   tree?: TreeModel
   ua?: UserAgentType
   disablePassword: boolean
+  post: string
 }
 
 export type ApiRequest = NextApiRequest & {

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)
+}

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
 }

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",

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 (
     <LayoutPublic tree={tree} note={note}>
-      <PostContainer pageMode={pageMode} baseURL={baseURL} />
+      <PostContainer post={post} pageMode={pageMode} baseURL={baseURL} />
     </LayoutPublic>
   )
 }
@@ -53,6 +55,7 @@ export const getServerSideProps = async (
     .use(applySettings)
     .use(applyCsrf)
     .use(applyUA)
+    .use(applyPostWithAuth)
     .run(ctx.req, ctx.res)
 
   return {

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 (
     <LayoutPublic tree={tree} note={note}>
-      <PostContainer pageMode={pageMode} baseURL={baseURL} />
+      <PostContainer post={post} pageMode={pageMode} baseURL={baseURL} />
     </LayoutPublic>
   )
 }
@@ -33,6 +35,7 @@ export const getServerSideProps = async (
     .use(applyTree)
     .use(applySettings)
     .use(applyUA)
+    .use(applyPost)
     .run(ctx.req, ctx.res)
 
   return {

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"