astro-d2 0.5.1 → 0.6.0

package/config.ts

@@ -23,6 +23,12 @@ export const AstroD2ConfigSchema = z
         bold: z.string().optional(),
       })
       .optional(),
+    /**
+     * Defines if the SVG diagrams should be inlined in the HTML output.
+     *
+     * By default, the diagrams are rendered using the `<img>` tag.
+     */
+    inline: z.boolean().default(false),
     /**
      * Defines the layout engine to use to generate the diagrams.
      *

package/libs/d2.ts

@@ -39,7 +39,7 @@ export async function generateD2Diagram(
   }
 
   if (attributes.target !== undefined) {
-    extraArgs.push(`--target='${attributes.target}'`)
+    extraArgs.push(`--target=${attributes.target}`)
   }
 
   if (config.fonts?.regular) {
@@ -78,10 +78,10 @@ export async function generateD2Diagram(
     throw new Error('Failed to generate D2 diagram.', { cause: error })
   }
 
-  return await getD2DiagramSize(outputPath)
+  return await getD2Diagram(outputPath)
 }
 
-export async function getD2DiagramSize(diagramPath: string): Promise<D2Size> {
+export async function getD2Diagram(diagramPath: string): Promise<D2Diagram | undefined> {
   try {
     const content = await fs.readFile(diagramPath, 'utf8')
     const match = content.match(viewBoxRegex)
@@ -94,7 +94,7 @@ export async function getD2DiagramSize(diagramPath: string): Promise<D2Size> {
     const computedHeight = Number.parseInt(height, 10)
     const computedWidth = Number.parseInt(width, 10)
 
-    return { height: computedHeight, width: computedWidth }
+    return { content, size: { height: computedHeight, width: computedWidth } }
   } catch (error) {
     throw new Error(`Failed to get D2 diagram size at '${diagramPath}'.`, { cause: error })
   }
@@ -114,6 +114,11 @@ async function getD2Version() {
   }
 }
 
+export interface D2Diagram {
+  content: string
+  size: D2Size
+}
+
 export type D2Size =
   | {
       height: number

package/libs/exec.ts

@@ -8,7 +8,7 @@ export function exec(command: string, args: string[], stdin?: string, cwd?: stri
     })
 
     const output: string[] = []
-    const errorMessage = `Unable to run command: '${command} ${args.join(' ')}'.`
+    let errorMessage = `Unable to run command: '${command} ${args.join(' ')}'.`
 
     child.stdout.on('data', (data: Buffer) => {
       const lines = data
@@ -19,6 +19,10 @@ export function exec(command: string, args: string[], stdin?: string, cwd?: stri
       output.push(...lines)
     })
 
+    child.stderr.on('data', (data: Buffer) => {
+      errorMessage += `\n${data.toString()}`
+    })
+
     child.on('error', (error) => {
       reject(new Error(errorMessage, { cause: error }))
     })

package/libs/integration.ts

@@ -1,8 +1,8 @@
 import { AstroError } from 'astro/errors'
 
-export function throwErrorWithHint(message: string): never {
+export function throwErrorWithHint(message: string, cause?: Error): never {
   throw new AstroError(
-    message,
+    message + (cause ? `\n\n${cause.message}` : ''),
     `See the error report above for more informations.\n\nIf you believe this is a bug, please file an issue at https://github.com/HiDeoo/astro-d2/issues/new/choose`,
   )
 }

package/libs/remark.ts

@@ -1,14 +1,17 @@
 import path from 'node:path'
 import url from 'node:url'
 
+import type { Element } from 'hast'
+import { fromHtml } from 'hast-util-from-html'
+import { toHtml } from 'hast-util-to-html'
 import type { Code, Html, Parent, Root } from 'mdast'
-import { SKIP, visit } from 'unist-util-visit'
+import { CONTINUE, EXIT, SKIP, visit } from 'unist-util-visit'
 import type { VFile } from 'vfile'
 
 import type { AstroD2Config } from '../config'
 
 import { type DiagramAttributes, getAttributes } from './attributes'
-import { generateD2Diagram, type D2Size, getD2DiagramSize } from './d2'
+import { generateD2Diagram, type D2Size, getD2Diagram, type D2Diagram } from './d2'
 import { throwErrorWithHint } from './integration'
 
 export function remarkAstroD2(config: RemarkAstroD2Config) {
@@ -31,35 +34,42 @@ export function remarkAstroD2(config: RemarkAstroD2Config) {
       d2Nodes.map(async ([node, { index, parent }], d2Index) => {
         const outputPath = getOutputPaths(config, file, d2Index)
         const attributes = getAttributes(node.meta)
-        let size: D2Size = undefined
+        let diagram: D2Diagram | undefined = undefined
 
         if (config.skipGeneration) {
-          size = await getD2DiagramSize(outputPath.fsPath)
+          diagram = await getD2Diagram(outputPath.fsPath)
         } else {
           try {
-            size = await generateD2Diagram(
+            diagram = await generateD2Diagram(
               config,
               attributes,
               node.value,
               outputPath.fsPath,
               file.history[0] ? path.dirname(file.history[0]) : file.cwd,
             )
-          } catch {
+          } catch (error) {
             throwErrorWithHint(
               `Failed to generate the D2 diagram at ${node.position?.start.line ?? 0}:${node.position?.start.column ?? 0}.`,
+              error instanceof Error ? (error.cause instanceof Error ? error.cause : error) : undefined,
             )
           }
         }
 
         if (parent && index !== undefined) {
-          parent.children.splice(index, 1, makHtmlImgNode(attributes, outputPath.imgPath, size))
+          parent.children.splice(
+            index,
+            1,
+            config.inline
+              ? makeHtmlSvgNode(attributes, diagram)
+              : makeHtmlImgNode(attributes, outputPath.imgPath, diagram?.size),
+          )
         }
       }),
     )
   }
 }
 
-function makHtmlImgNode(attributes: DiagramAttributes, imgPath: string, size: D2Size): Html {
+function makeHtmlImgNode(attributes: DiagramAttributes, imgPath: string, size: D2Size): Html {
   const htmlAttributes: Record<string, string> = {
     alt: attributes.title,
     decoding: 'async',
@@ -77,6 +87,34 @@ function makHtmlImgNode(attributes: DiagramAttributes, imgPath: string, size: D2
   }
 }
 
+function makeHtmlSvgNode(attributes: DiagramAttributes, diagram?: D2Diagram): Html {
+  if (!diagram) {
+    throwErrorWithHint('Failed to retrieve the D2 diagram content for inline rendering.')
+  }
+
+  const tree = fromHtml(diagram.content, { fragment: true })
+
+  visit(tree, 'element', (node) => {
+    if (node.tagName !== 'svg' || !('d2version' in node.properties)) return CONTINUE
+
+    computeSvgSize(node, attributes, diagram.size)
+
+    node.children.unshift({
+      type: 'element',
+      tagName: 'title',
+      properties: {},
+      children: [{ type: 'text', value: attributes.title }],
+    })
+
+    return EXIT
+  })
+
+  return {
+    type: 'html',
+    value: toHtml(tree),
+  }
+}
+
 function getOutputPaths(config: RemarkAstroD2Config, file: VFile, nodeIndex: number) {
   const relativePath = path.relative(file.cwd, file.path).replace(/^src[/\\](content|pages)[/\\]/, '')
   const parsedRelativePath = path.parse(relativePath)
@@ -103,6 +141,15 @@ function computeImgSize(htmlAttributes: Record<string, string>, attributes: Diag
   }
 }
 
+function computeSvgSize(node: Element, attributes: DiagramAttributes, size: D2Size) {
+  if (!attributes.width || !size) return
+
+  const aspectRatio = size.height / size.width
+
+  node.properties['width'] = String(attributes.width)
+  node.properties['height'] = String(Math.round(attributes.width * aspectRatio))
+}
+
 interface VisitorContext {
   index: number | undefined
   parent: Parent | undefined

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-d2",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "license": "MIT",
   "description": "Astro integration and remark plugin to transform D2 Markdown code blocks into diagrams.",
   "author": "HiDeoo <github@hideoo.dev> (https://hideoo.dev)",
@@ -10,9 +10,12 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
+    "hast-util-from-html": "2.0.3",
+    "hast-util-to-html": "9.0.3",
     "unist-util-visit": "5.0.0"
   },
   "devDependencies": {
+    "@types/hast": "3.0.4",
     "@types/mdast": "4.0.3",
     "remark": "15.0.1",
     "vfile": "6.0.1",