Merge pull request #20 from HiDeoo/hd-feat-layout-attribute

HiDeoo · Sep 14, 2024 · 7c832eb · 7c832eb
2 parents 886cbaf + e2cc625
commit 7c832eb
Show file tree

Hide file tree

Showing 8 changed files with 226 additions and 3 deletions.
diff --git a/.github/workflows/integration.yml b/.github/workflows/integration.yml
@@ -25,7 +25,7 @@ jobs:
         uses: pnpm/action-setup@v4
 
       - name: Install Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: 18

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -28,7 +28,7 @@ jobs:
         uses: pnpm/action-setup@v4
 
       - name: Install Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: 18

diff --git a/docs/public/d2/docs/examples/Attributes/layout-0.svg b/docs/public/d2/docs/examples/Attributes/layout-0.svg
diff --git a/docs/src/content/docs/attributes.md b/docs/src/content/docs/attributes.md
@@ -138,3 +138,16 @@ layers: {
 }
 ```
 ````
+
+### `layout`
+
+**Example**: [Layout attribute](/examples/attributes/layout/)
+
+Overrides the [global `layout` configuration](/configuration/#layout) and defines the layout engine to use to generate the diagrams.
+See the D2 documentation for more information about the available [layout engines](https://d2lang.com/tour/layouts#layout-engines).
+
+````md title="src/content/docs/example.md" "layout=elk"
+```d2 layout=elk
+x -> y
+```
+````
diff --git a/docs/src/content/docs/examples/Attributes/layout.md b/docs/src/content/docs/examples/Attributes/layout.md
@@ -0,0 +1,17 @@
+---
+title: Layout
+---
+
+Use the [`layout` attribute](/attributes/#layout) to use a different layout engine to generate the diagram.
+
+````md title="src/content/docs/example.md" "layout=elk"
+```d2 layout=elk
+Content -> Website -> Content
+```
+````
+
+The above code block will be rendered as the following diagram with the ELK layout engine:
+
+```d2 layout=elk
+Content -> Website -> Content
+```
diff --git a/packages/astro-d2/libs/attributes.ts b/packages/astro-d2/libs/attributes.ts
@@ -18,6 +18,10 @@ export const AttributesSchema = z
       .string()
       .optional()
       .transform((value) => (value === 'false' ? false : value)),
+    /**
+     * Overrides the global `layout` configuration for the diagram.
+     */
+    layout: z.union([z.literal('dagre'), z.literal('elk'), z.literal('tala')]).optional(),
     /**
      * Overrides the global `pad` configuration for the diagram.
      */

diff --git a/packages/astro-d2/libs/d2.ts b/packages/astro-d2/libs/d2.ts
@@ -63,7 +63,7 @@ export async function generateD2Diagram(
     await exec(
       'd2',
       [
-        `--layout=${config.layout}`,
+        `--layout=${attributes.layout ?? config.layout}`,
         `--theme=${attributes.theme ?? config.theme.default}`,
         `--sketch=${attributes.sketch ?? config.sketch}`,
         `--pad=${attributes.pad ?? config.pad}`,

diff --git a/packages/astro-d2/tests/remark.test.ts b/packages/astro-d2/tests/remark.test.ts
@@ -268,6 +268,27 @@ test('uses the specified base option', async () => {
   `)
 })
 
+test('uses the `layout` attribute if specified', async () => {
+  await transformMd(`\`\`\`d2 pad=50
+${defaultDiagram}
+\`\`\`
+`)
+
+  expectD2ToHaveBeenCalledWithArg('--pad=50')
+})
+
+test('uses the `layout` attribute to override the `layout` config if specified', async () => {
+  await transformMd(
+    `\`\`\`d2 layout=tala
+${defaultDiagram}
+\`\`\`
+`,
+    { layout: 'elk' },
+  )
+
+  expectD2ToHaveBeenCalledWithArg('--layout=tala')
+})
+
 async function transformMd(md: string, userConfig?: AstroD2UserConfig, base = '/') {
   const processor = userConfig
     ? remark().use(remarkAstroD2, {