Skip to content

Commit e04ed18

Browse files
committed
docs(dmg): document content positioning and improve DMG customization section
Closes #26
1 parent 3fdfe71 commit e04ed18

1 file changed

Lines changed: 86 additions & 21 deletions

File tree

docs/targets/macos.md

Lines changed: 86 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -53,43 +53,78 @@ nativeDistributions {
5353

5454
## DMG Customization
5555

56-
Customize the DMG window appearance:
56+
### Window Appearance
57+
58+
Control the DMG window title, icon sizes, position, and dimensions:
5759

5860
```kotlin
5961
macOS {
6062
dmg {
61-
// Window title
6263
title = "${productName} ${version}"
6364

64-
// Icon size in the DMG window
6565
iconSize = 128
6666
iconTextSize = 12
6767

68-
// Window position and size
6968
window {
7069
x = 400
7170
y = 100
7271
width = 540
7372
height = 380
7473
}
74+
}
75+
}
76+
```
7577

76-
// Background image or color
77-
background.set(project.file("packaging/dmg-background.png"))
78-
// backgroundColor = "#FFFFFF"
78+
### Background
7979

80-
// DMG format
81-
format = DmgFormat.UDZO // UDRW, UDRO, UDCO, UDZO, UDBZ, ULFO
80+
Set a background image or a solid color for the DMG window:
8281

83-
// Badge icon (overlays on the DMG volume icon)
84-
badgeIcon.set(project.file("icons/badge.icns"))
82+
```kotlin
83+
dmg {
84+
background.set(project.file("packaging/dmg-background.png"))
85+
// or use a solid color instead:
86+
// backgroundColor = "#FFFFFF"
87+
}
88+
```
8589

86-
// Custom content positioning
87-
content(x = 130, y = 220, type = DmgContentType.File, name = "MyApp.app")
88-
content(x = 410, y = 220, type = DmgContentType.Link, path = "/Applications")
89-
}
90+
### Format and Badge Icon
91+
92+
Choose a DMG format and optionally overlay a badge icon on the volume icon:
93+
94+
```kotlin
95+
dmg {
96+
format = DmgFormat.UDZO // UDRW, UDRO, UDCO, UDZO, UDBZ, ULFO
97+
badgeIcon.set(project.file("icons/badge.icns"))
9098
}
9199
```
92100

101+
### Content Positioning
102+
103+
Use `content()` to place icons at specific coordinates inside the DMG window. The typical pattern is one entry for the app and one entry for an Applications symlink so the user can drag-and-drop to install:
104+
105+
```kotlin
106+
dmg {
107+
content(x = 130, y = 220, type = DmgContentType.File, name = "MyApp.app")
108+
content(x = 410, y = 220, type = DmgContentType.Link, path = "/Applications")
109+
}
110+
```
111+
112+
Each `content()` call adds an entry with an `(x, y)` position and a `DmgContentType`:
113+
114+
| Type | Description |
115+
|------|-------------|
116+
| `DmgContentType.File` | An existing file in the DMG (e.g. the `.app` bundle). Set `name` to match the file. |
117+
| `DmgContentType.Link` | A symlink. Set `path` to the link target (usually `/Applications`). |
118+
| `DmgContentType.Dir` | A directory inside the DMG. |
119+
120+
!!! tip "Mapping from `create-dmg`"
121+
If you are migrating from a `create-dmg` shell script, the `content()` DSL maps directly to the `--icon` and `--app-drop-link` flags:
122+
123+
| `create-dmg` flag | Nucleus equivalent |
124+
|---|---|
125+
| `--icon "MyApp.app" 130 220` | `content(x = 130, y = 220, type = DmgContentType.File, name = "MyApp.app")` |
126+
| `--app-drop-link 410 220` | `content(x = 410, y = 220, type = DmgContentType.Link, path = "/Applications")` |
127+
93128
## Layered Icons (macOS 26+)
94129

95130
macOS 26 introduced [layered icons](https://developer.apple.com/design/human-interface-guidelines/app-icons#macOS) that support dynamic tilt and depth effects on the Dock and Spotlight.
@@ -266,9 +301,39 @@ macOS {
266301

267302
#### `dmg { window { } }`
268303

269-
| Property | Type | Default |
270-
|----------|------|---------|
271-
| `x` | `Int?` | `null` |
272-
| `y` | `Int?` | `null` |
273-
| `width` | `Int?` | `null` |
274-
| `height` | `Int?` | `null` |
304+
| Property | Type | Default | Description |
305+
|----------|------|---------|-------------|
306+
| `x` | `Int?` | `null` | Window x position on screen |
307+
| `y` | `Int?` | `null` | Window y position on screen |
308+
| `width` | `Int?` | `null` | Window width |
309+
| `height` | `Int?` | `null` | Window height |
310+
311+
#### `dmg { content() }`
312+
313+
Adds an icon entry to the DMG window layout. Call multiple times to position several items.
314+
315+
```kotlin
316+
fun content(
317+
x: Int,
318+
y: Int,
319+
type: DmgContentType? = null,
320+
name: String? = null,
321+
path: String? = null,
322+
)
323+
```
324+
325+
| Parameter | Type | Required | Description |
326+
|-----------|------|----------|-------------|
327+
| `x` | `Int` | Yes | Horizontal position inside the DMG window |
328+
| `y` | `Int` | Yes | Vertical position inside the DMG window |
329+
| `type` | `DmgContentType?` | No | Kind of content entry (`File`, `Link`, or `Dir`) |
330+
| `name` | `String?` | No | File name to match (used with `File` / `Dir`) |
331+
| `path` | `String?` | No | Target path (used with `Link`, e.g. `/Applications`) |
332+
333+
#### `DmgContentType` Enum
334+
335+
| Value | Serialized ID | Description |
336+
|-------|---------------|-------------|
337+
| `Link` | `link` | A symlink to a target path |
338+
| `File` | `file` | An existing file in the DMG |
339+
| `Dir` | `dir` | A directory in the DMG |

0 commit comments

Comments
 (0)