@fullstackdatasolutions/articles 0.5.1 → 0.7.0

package/src/markdown.ts

@@ -1,5 +1,4 @@
 import type { Element, Root, ElementContent } from 'hast'
-import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypePrism from 'rehype-prism-plus'
 import rehypeSanitize from 'rehype-sanitize'
 import rehypeSlug from 'rehype-slug'
@@ -157,7 +156,7 @@ function processFootnotesSection(node: Element): void {
   if (node.properties) node.properties.className = undefined
 }
 
-const customRenderer: Plugin<[], Root> = () => {
+export const customRenderer: Plugin<[], Root> = () => {
   return (tree: Root) => {
     // First pass: Apply general styles
     visit(tree, 'element', (node: Element) => {
@@ -180,11 +179,15 @@ const customRenderer: Plugin<[], Root> = () => {
           case 'p':
             props.className = 'text-muted-foreground leading-relaxed mb-4'
             break
-          case 'a':
+          case 'a': {
             props.className = 'text-primary hover:underline transition-colors duration-200'
-            props.target = '_blank'
-            props.rel = 'noopener noreferrer'
+            const href = typeof props.href === 'string' ? props.href : ''
+            if (!href.startsWith('#')) {
+              props.target = '_blank'
+              props.rel = 'noopener noreferrer'
+            }
             break
+          }
           case 'ul':
             props.className = 'list-disc list-inside mb-4 space-y-2 ml-4'
             break
@@ -268,7 +271,6 @@ export async function markdownToHtml(markdown: string, articleSlug?: string) {
       .use(remarkRehype)
       .use(customRenderer)
       .use(rehypeSlug)
-      .use(rehypeAutolinkHeadings, { behavior: 'wrap' })
       // @ts-ignore
       .use(rehypePrism)
       .use(rehypeSanitize, {

package/src/renderMdx.tsx

@@ -0,0 +1,47 @@
+// MDX files must use JSX prop syntax:
+//   Correct:   <span style={{ color: '#3b82f6' }}>Text</span>
+//   Incorrect: <span style="color: #3b82f6">Text</span>
+//   Correct:   className="..."
+//   Incorrect: class="..."
+import React from 'react'
+import type { ComponentType, ImgHTMLAttributes } from 'react'
+import * as devRuntime from 'react/jsx-dev-runtime'
+import * as runtime from 'react/jsx-runtime'
+import { evaluate } from '@mdx-js/mdx'
+import rehypePrism from 'rehype-prism-plus'
+import rehypeSlug from 'rehype-slug'
+import remarkGfm from 'remark-gfm'
+import remarkGithubBlockquoteAlert from 'remark-github-blockquote-alert'
+import { customRenderer } from './markdown'
+
+type MdxContent = ComponentType<{
+  components?: Record<string, ComponentType<unknown>>
+}>
+
+function makeImgComponent(basePath: string) {
+  return function MdxImage({ src, alt, ...props }: ImgHTMLAttributes<HTMLImageElement>) {
+    const resolvedSrc =
+      src && !src.startsWith('http') && !src.startsWith('/') ? `${basePath}/${src}` : src
+    return React.createElement('img', { src: resolvedSrc, alt, ...props })
+  }
+}
+
+export async function renderMdxSource(source: string, basePath?: string) {
+  const isDevelopment = process.env.NODE_ENV === 'development'
+
+  const mdxModule = await evaluate(source, {
+    ...(isDevelopment ? devRuntime : runtime),
+    development: isDevelopment,
+    remarkPlugins: [remarkGfm, remarkGithubBlockquoteAlert],
+    rehypePlugins: [
+      customRenderer,
+      rehypeSlug,
+      // @ts-ignore
+      rehypePrism,
+    ],
+  })
+
+  const Content = mdxModule.default as MdxContent
+  const components = basePath ? { img: makeImgComponent(basePath) } : undefined
+  return <Content components={components as Record<string, ComponentType<unknown>>} />
+}

package/src/server-articles.ts

@@ -67,23 +67,32 @@ function findArticleFile(slug: string): { filePath: string; contentType: 'md' |
 export function getAvailableArticleSlugs(): string[] {
   try {
     if (!fs.existsSync(articlesDirectory)) return []
-    const items = fs.readdirSync(articlesDirectory, { withFileTypes: true })
-    return items
-      .filter((item) => item.isDirectory())
-      .filter((dir) => {
-        try {
-          return findArticleFile(dir.name) !== null
-        } catch {
-          return false
-        }
-      })
-      .map((dir) => dir.name)
+    return walkArticleDir(articlesDirectory, '')
   } catch (error) {
     console.error('Error reading articles directory:', error)
     return []
   }
 }
 
+function walkArticleDir(dir: string, baseSlug: string): string[] {
+  const slugs: string[] = []
+  try {
+    const items = fs.readdirSync(dir, { withFileTypes: true })
+    for (const item of items) {
+      if (!item.isDirectory()) continue
+      const slug = baseSlug ? `${baseSlug}/${item.name}` : item.name
+      if (findArticleFile(slug) !== null) {
+        slugs.push(slug)
+      } else {
+        slugs.push(...walkArticleDir(path.join(dir, item.name), slug))
+      }
+    }
+  } catch {
+    // ignore unreadable directories
+  }
+  return slugs
+}
+
 function parseDateField(rawDate: unknown): string | undefined {
   if (!rawDate) return undefined
   try {