feat: add new sketch and pad global configuration options applica…

…ble to all diagrams

Co-authored-by: Michael Toohig <=>
Co-authored-by: HiDeoo <494699+HiDeoo@users.noreply.github.com>

docs/src/content/docs/attributes.md

@@ -78,10 +78,9 @@ See the D2 documentation for more information about the available [themes](https
 
 ### `sketch`
 
-**Default:** `'false'`  
 **Example**: [Sketch attribute](/examples/attributes/sketch/)
 
-Whether to render the diagram as if it was sketched by hand.
+Overrides the [global `sketch` configuration](/configuration/#sketch) and defines whether to render the diagram as if it was sketched by hand.
 
 ````md title="src/content/docs/example.md" "sketch"
 ```d2 sketch
@@ -91,10 +90,9 @@ x -> y
 
 ### `pad`
 
-**Default:** `'100'`  
 **Example**: [Padding attribute](/examples/attributes/padding/)
 
-The padding (in pixels) around the rendered diagram.
+Overrides the [global `pad` configuration](/configuration/#pad) and defines the padding (in pixels) around the rendered diagram.
 
 ````md title="src/content/docs/example.md" "pad=10"
 ```d2 pad=10

docs/src/content/docs/configuration.md

@@ -54,6 +54,20 @@ This will require you to [build](https://docs.astro.build/en/reference/cli-refer
 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).
 
+### `sketch`
+
+**Type:** `boolean`  
+**Default:** `false`
+
+Whether to render the diagrams as if they were sketched by hand.
+
+### `pad`
+
+**Type:** `number`  
+**Default:** `100`
+
+The padding (in pixels) around the rendered diagrams.
+
 ---
 
 ## Theme configuration

packages/astro-d2/config.ts

@@ -15,6 +15,18 @@ export const AstroD2ConfigSchema = z
      * @default 'd2'
      */
     output: z.string().default('d2'),
+    /**
+     * The padding (in pixels) around the rendered diagrams.
+     *
+     * @default 100
+     */
+    pad: z.number().default(100),
+    /**
+     * Whether to render the diagrams as if they were sketched by hand.
+     *
+     * @default false
+     */
+    sketch: z.boolean().default(false),
     /**
      * Whether the Astro D2 integration should skip the generation of diagrams.
      *

packages/astro-d2/libs/attributes.ts

@@ -19,17 +19,16 @@ export const AttributesSchema = z
       .optional()
       .transform((value) => (value === 'false' ? false : value)),
     /**
-     * The padding (in pixels) around the rendered diagram.
-     *
-     * @default 100
+     * Overrides the global `pad` configuration for the diagram.
      */
-    pad: z.coerce.number().default(100),
+    pad: z.coerce.number().optional(),
     /**
-     * Whether to render the diagram as if it was sketched by hand.
-     *
-     * @default 'false'
+     * Overrides the global `sketch` configuration for the diagram.
      */
-    sketch: z.union([z.literal('true'), z.literal('false')]).default('false'),
+    sketch: z
+      .union([z.literal('true'), z.literal('false')])
+      .optional()
+      .transform((value) => (value === 'false' ? false : value)),
     /**
      * Defines the target board to render when using composition.
      * Use `root` to target the root board.

packages/astro-d2/libs/d2.ts

@@ -47,8 +47,8 @@ export async function generateD2Diagram(
       [
         `--layout=${config.layout}`,
         `--theme=${attributes.theme ?? config.theme.default}`,
-        `--sketch=${attributes.sketch}`,
-        `--pad=${attributes.pad}`,
+        `--sketch=${attributes.sketch ?? config.sketch}`,
+        `--pad=${attributes.pad ?? config.pad}`,
         ...extraArgs,
         '-',
         outputPath,

packages/astro-d2/tests/attributes.test.ts

@@ -58,6 +58,12 @@ test('supports a shorthand syntax for `sketch`', () => {
   expect(attributes).toEqual({ ...defaultAttributes, sketch: 'true' })
 })
 
+test('transforms the `sketch` value to a boolean if set to `false`', () => {
+  const attributes = getAttributes('sketch=false')
+
+  expect(attributes).toEqual({ ...defaultAttributes, sketch: false })
+})
+
 test('supports coersed number for `pad` and `width`', () => {
   const attributes = getAttributes('pad=50 width=100')
 

packages/astro-d2/tests/remark.test.ts

@@ -133,6 +133,15 @@ ${defaultDiagram}
 })
 
 test('uses the `sketch` attribute if specified', async () => {
+  await transformMd(`\`\`\`d2 sketch=true
+${defaultDiagram}
+\`\`\`
+`)
+
+  expectD2ToHaveBeenCalledWithArg('--sketch=true')
+})
+
+test('uses the `sketch` shorthand attribute if specified', async () => {
   await transformMd(`\`\`\`d2 sketch
 ${defaultDiagram}
 \`\`\`
@@ -141,6 +150,34 @@ ${defaultDiagram}
   expectD2ToHaveBeenCalledWithArg('--sketch=true')
 })
 
+test('uses the `sketch` attribute to disable the `sketch` config if specified', async () => {
+  const config = { sketch: true }
+
+  await transformMd(
+    `\`\`\`d2 sketch=false
+${defaultDiagram}
+\`\`\`
+`,
+    config,
+  )
+
+  expectD2ToHaveBeenCalledWithArg('--sketch=false')
+})
+
+test('uses the `sketch` attribute to enable the `sketch` config if specified', async () => {
+  const config = { sketch: false }
+
+  await transformMd(
+    `\`\`\`d2 sketch
+${defaultDiagram}
+\`\`\`
+`,
+    config,
+  )
+
+  expectD2ToHaveBeenCalledWithArg('--sketch=true')
+})
+
 test('uses the `pad` attribute if specified', async () => {
   await transformMd(`\`\`\`d2 pad=50
 ${defaultDiagram}
@@ -150,6 +187,20 @@ ${defaultDiagram}
   expectD2ToHaveBeenCalledWithArg('--pad=50')
 })
 
+test('uses the `pad` attribute to override the `pad` config if specified', async () => {
+  const config = { pad: 200 }
+
+  await transformMd(
+    `\`\`\`d2 pad=25
+${defaultDiagram}
+\`\`\`
+`,
+    config,
+  )
+
+  expectD2ToHaveBeenCalledWithArg('--pad=25')
+})
+
 test('uses the `animateInterval` attribute if specified', async () => {
   await transformMd(`\`\`\`d2 animateInterval=1000
 ${defaultDiagram}
@@ -222,8 +273,8 @@ function expectD2ToHaveBeenNthCalledWith(
     [
       `--layout=${config.layout}`,
       `--theme=${config.theme.default}`,
-      `--sketch=false`,
-      `--pad=100`,
+      `--sketch=${config.sketch}`,
+      `--pad=${config.pad}`,
       `--dark-theme=${config.theme.dark}`,
       '-',
       fileURLToPath(new URL(`../public/${config.output}/tests/index-${diagramIndex}.svg`, import.meta.url)),