render excerpts of MDX differently

package.json

@@ -36,6 +36,7 @@
     "astro-pintora": "^0.0.2",
     "buffer": "^6.0.3",
     "mdast-util-mdx-jsx": "^3.0.0",
+    "rehype-truncate": "^1.2.2",
     "remark": "^15.0.1",
     "remark-directive": "^3.0.0",
     "remark-html": "^16.0.1",

src/pages/[lang]/blog/index.astro

@@ -5,6 +5,7 @@ import Layout from '../../../layouts/Layout.astro'
 import { getCollection } from 'astro:content'
 import { slugify } from '../../../utils'
 import { languages } from '../../../i18n'
+import { convertMDXToHTML } from '../../../utils/mdxToHtml'
 
 export function getStaticPaths (): Array<{ params: { lang: string } }> {
   return Object.keys(languages).map(lang => ({ params: { lang } }))
@@ -18,7 +19,7 @@ const localizePath = useTranslatedPath(lang)
 const blogPosts = (await getCollection('blog', ({ id }) => id.split('/')[0] === lang))
   .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
 
-const renderedBlogPosts = await Promise.all(blogPosts.map(async post => ({ ...post, Component: (await post.render()).Content })))
+const renderedBlogPosts = await Promise.all(blogPosts.map(async post => ({ ...post, html: await convertMDXToHTML(post.body, 100) })))
 const formatDate = useFormatDate(lang)
 ---
 
@@ -45,7 +46,7 @@ const formatDate = useFormatDate(lang)
                         </div>
                         <div class="width-full aspect-video overflow-hidden relative p-6">
                             <h2 class="text-xl font-medium mb-4">{post.data.title}</h2>
-                            <div class="italic text-justify mb-4 line-clamp-3 px-1 text-ellipsis overflow-hidden"><post.Component/></div>
+                            <div class="italic text-justify mb-4 line-clamp-3 px-1 text-ellipsis overflow-hidden"><Fragment set:html={post.html}/></div>
                             <div class="absolute bottom-6 right-6 text-sm text-gray-600">
                                 <div class="first-letter:uppercase" title={formatDateAbsolute(post.data.date)}>{formatDate(post.data.date)}</div>
                             </div>

src/pages/[lang]/rss.xml.ts

@@ -6,34 +6,7 @@ import { getCollection } from 'astro:content'
 import { slugify } from '~/utils'
 import { getAbsoluteLocaleUrl } from 'astro:i18n'
 import sanitizeHtml from 'sanitize-html'
-import { unified } from 'unified'
-import remarkParse from 'remark-parse'
-import remarkMDX from 'remark-mdx'
-import remarkHtml from 'remark-html'
-import type { Root, Node } from 'mdast'
-
-const removeImportsAndExports = () => {
-  return (tree: Root) => {
-    tree.children = tree.children.filter((node: Node) => {
-      return node.type !== 'mdxjsEsm' && // import tags
-        node.type !== 'mdxJsxFlowElement' // custom components (Image, Pintora)
-    })
-  }
-}
-const convertMDXToHTML = async (mdxContent: string): Promise<string> => {
-  try {
-    const file = await unified()
-      .use(remarkParse) // Parse the Markdown syntax
-      .use(remarkMDX) // Parse the MDX syntax
-      .use(removeImportsAndExports)
-      .use(remarkHtml) // Convert to HTML
-      .process(mdxContent) // Process the MDX content
-    return String(file)
-  } catch (error) {
-    console.error('Error converting MDX to HTML:', error)
-    throw error
-  }
-}
+import { convertMDXToHTML } from '~/utils/mdxToHtml.ts'
 
 export const GET: APIRoute = async (context) => {
   const lang = context.params.lang

src/utils/mdxToHtml.ts

@@ -0,0 +1,62 @@
+import type { Node, Root, Text, Parent, RootContent } from 'mdast'
+import { unified } from 'unified'
+import remarkParse from 'remark-parse'
+import remarkMDX from 'remark-mdx'
+import remarkHtml from 'remark-html'
+
+function assertsType<T> (val: unknown): asserts val is T {}
+
+const truncateMDXContent = (limit: number): ((x: Root) => void) => {
+  if (limit === -1) return () => {}
+  let charactersCount = 0
+  let reachedLimit = false
+
+  const truncateTree = (node: Node | Root): Node | null => {
+    if (reachedLimit) {
+      return null
+    }
+
+    if (node.type === 'text') {
+      assertsType<Text>(node)
+      const remainingCharacters = limit - charactersCount
+      if (node.value.length > remainingCharacters) {
+        node.value = node.value.substring(0, remainingCharacters) + '...'
+        reachedLimit = true
+      }
+      charactersCount += node.value.length
+    } else if ('children' in node) {
+      assertsType<Parent>(node)
+      node.children = node.children.map(truncateTree).filter(x => x != null) as RootContent[]
+    }
+
+    return node
+  }
+
+  return (tree: Root) => {
+    truncateTree(tree)
+  }
+}
+
+const removeImportsAndExports = () => {
+  return (tree: Root) => {
+    tree.children = tree.children.filter((node: Node) => {
+      return node.type !== 'mdxjsEsm' && // import tags
+        node.type !== 'mdxJsxFlowElement' // custom components (Image, Pintora)
+    })
+  }
+}
+export const convertMDXToHTML = async (mdxContent: string, maxChars?: number): Promise<string> => {
+  try {
+    const file = await unified()
+      .use(remarkParse) // Parse the Markdown syntax
+      .use(remarkMDX) // Parse the MDX syntax
+      .use(removeImportsAndExports)
+      .use(truncateMDXContent, maxChars ?? -1)
+      .use(remarkHtml) // Convert to HTML
+      .process(mdxContent) // Process the MDX content
+    return String(file)
+  } catch (error) {
+    console.error('Error converting MDX to HTML:', error)
+    throw error
+  }
+}