Skip to content

Commit 11d23c4

Browse files
saberzero1saberzero1
authored
Rewrite plugin integration (#101)
- Added support for [Excalidraw](https://github.com/zsviczian/obsidian-excalidraw-plugin) drawings. - Excalidraw files (`.excalidraw.md`) are automatically converted to embedded SVG images. - Embedded drawings (`![[Example.excalidraw]]`) are supported. - Both light and dark theme variants are generated for proper theme support. - Uses the [ExcalidrawAutomate API](https://excalidraw-obsidian.online) for reliable SVG export. - Improved [Fantasy Statblocks](https://github.com/javalent/fantasy-statblocks) integration. - Updated styles to match the plugin's Svelte component styling. - Added complete CSS variable support for theming. - Improved [Datacore](https://github.com/blacksmithgu/datacore) integration. - Updated styles with complete CSS from the plugin source (cards, tables, callouts, paging, embeds, errors, and layout). - Refactored plugin integration architecture for improved maintainability. - All integrations now use a unified `PluginIntegration` interface. - Integration styles are automatically managed via SCSS files in `quartz/styles/syncer/`. - Added new setting: **Manage integration styles** (enabled by default). - When enabled, Quartz Syncer automatically writes integration styles to your Quartz repository. - Styles are written to `quartz/styles/syncer/` with automatic `custom.scss` import management. - Syncer import is added after `@use "./base.scss"` to ensure proper style ordering. - Disabling this setting will clean up syncer styles on next publish. - Updated documentation.
1 parent 2d7a65a commit 11d23c4

34 files changed

+2843
-1796
lines changed

‎docs/Changelog.md‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Roadmap and Changelog
33
description: Changelog and feature roadmap for Quartz Syncer.
44
created: 2025-05-16T12:59:31Z+0200
5-
modified: 2026-01-09T09:51:37Z+0100
5+
modified: 2026-01-10T00:09:20Z+0100
66
publish: true
77
---
88

@@ -12,7 +12,6 @@ publish: true
1212

1313
## Planned
1414

15-
- Excalidraw support.
1615
- Canvas support.
1716
- TTRPG-related plugin support.
1817

@@ -22,7 +21,29 @@ publish: true
2221
- Manage Quartz layout.
2322
- Manage Quartz components.
2423

25-
## Released
24+
## Releases
25+
26+
### Version 1.9.2
27+
28+
- Added support for [Excalidraw](https://github.com/zsviczian/obsidian-excalidraw-plugin) drawings.
29+
- Excalidraw files (`.excalidraw.md`) are automatically converted to embedded SVG images.
30+
- Embedded drawings (`![[Example.excalidraw]]`) are supported.
31+
- Both light and dark theme variants are generated for proper theme support.
32+
- Uses the [ExcalidrawAutomate API](https://excalidraw-obsidian.online) for reliable SVG export.
33+
- Improved [Fantasy Statblocks](https://github.com/javalent/fantasy-statblocks) integration.
34+
- Updated styles to match the plugin's Svelte component styling.
35+
- Added complete CSS variable support for theming.
36+
- Improved [Datacore](https://github.com/blacksmithgu/datacore) integration.
37+
- Updated styles with complete CSS from the plugin source (cards, tables, callouts, paging, embeds, errors, and layout).
38+
- Refactored plugin integration architecture for improved maintainability.
39+
- All integrations now use a unified `PluginIntegration` interface.
40+
- Integration styles are automatically managed via SCSS files in `quartz/styles/syncer/`.
41+
- Added new setting: **Manage integration styles** (enabled by default).
42+
- When enabled, Quartz Syncer automatically writes integration styles to your Quartz repository.
43+
- Styles are written to `quartz/styles/syncer/` with automatic `custom.scss` import management.
44+
- Syncer import is added after `@use "./base.scss"` to ensure proper style ordering.
45+
- Disabling this setting will clean up syncer styles on next publish.
46+
- Updated documentation.
2647

2748
### Version 1.9.1
2849

‎docs/Settings/Integrations/Drawing.excalidraw.md‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
created: 2025-10-21T13:06:16Z+0200
3-
modified: 2026-01-08T16:44:44Z+0100
3+
modified: 2026-01-10T00:01:45Z+0100
44
tags: [excalidraw]
55
excalidraw-plugin: parsed
66
---
@@ -28,8 +28,8 @@ Hi ^Mlj8nSMy
2828
{
2929
"id": "9ul0YKiTcVUf8q9REaJMT",
3030
"type": "rectangle",
31-
"x": -114.203125,
32-
"y": -382.2890625,
31+
"x": -114.3203125,
32+
"y": -381.72265625,
3333
"width": 290.1640625,
3434
"height": 106.1171875,
3535
"angle": 0,
@@ -47,8 +47,8 @@ Hi ^Mlj8nSMy
4747
"type": 3
4848
},
4949
"seed": 1485142924,
50-
"version": 97,
51-
"versionNonce": 1316967220,
50+
"version": 103,
51+
"versionNonce": 112395491,
5252
"isDeleted": false,
5353
"boundElements": [
5454
{
@@ -60,15 +60,15 @@ Hi ^Mlj8nSMy
6060
"type": "arrow"
6161
}
6262
],
63-
"updated": 1761044864195,
63+
"updated": 1767997867548,
6464
"link": null,
6565
"locked": false
6666
},
6767
{
6868
"id": "bCQ6oAfE",
6969
"type": "text",
70-
"x": -29.311058044433594,
71-
"y": -341.73046875,
70+
"x": -29.428245544433594,
71+
"y": -341.1640625,
7272
"width": 120.37992858886719,
7373
"height": 25,
7474
"angle": 0,
@@ -84,11 +84,11 @@ Hi ^Mlj8nSMy
8484
"index": "a1",
8585
"roundness": null,
8686
"seed": 1866216716,
87-
"version": 29,
88-
"versionNonce": 1846978996,
87+
"version": 43,
88+
"versionNonce": 1805696675,
8989
"isDeleted": false,
90-
"boundElements": null,
91-
"updated": 1761044862307,
90+
"boundElements": [],
91+
"updated": 1767997870730,
9292
"link": null,
9393
"locked": false,
9494
"text": "Hello Quartz",
@@ -164,7 +164,7 @@ Hi ^Mlj8nSMy
164164
"version": 188,
165165
"versionNonce": 1789523980,
166166
"isDeleted": false,
167-
"boundElements": null,
167+
"boundElements": [],
168168
"updated": 1761044833019,
169169
"link": null,
170170
"locked": false,
@@ -182,10 +182,10 @@ Hi ^Mlj8nSMy
182182
{
183183
"id": "tLAmbnYo_6wHYmhbUDwYZ",
184184
"type": "arrow",
185-
"x": 22.98828125,
186-
"y": -276.3125,
187-
"width": 2.88671875,
188-
"height": 124.296875,
185+
"x": 22.93463558786412,
186+
"y": -274.60546875,
187+
"width": 2.960636821724904,
188+
"height": 122.59298887636731,
189189
"angle": 0,
190190
"strokeColor": "#1e1e1e",
191191
"backgroundColor": "transparent",
@@ -201,11 +201,11 @@ Hi ^Mlj8nSMy
201201
"type": 2
202202
},
203203
"seed": 927230004,
204-
"version": 266,
205-
"versionNonce": 1348519732,
204+
"version": 278,
205+
"versionNonce": 567969645,
206206
"isDeleted": false,
207-
"boundElements": null,
208-
"updated": 1761044850223,
207+
"boundElements": [],
208+
"updated": 1767997870782,
209209
"link": null,
210210
"locked": false,
211211
"points": [
@@ -214,8 +214,8 @@ Hi ^Mlj8nSMy
214214
0
215215
],
216216
[
217-
2.88671875,
218-
124.296875
217+
2.960636821724904,
218+
122.59298887636731
219219
]
220220
],
221221
"lastCommittedPoint": null,
@@ -251,10 +251,10 @@ Hi ^Mlj8nSMy
251251
"currentItemEndArrowhead": "arrow",
252252
"currentItemArrowType": "round",
253253
"currentItemFrameRole": null,
254-
"scrollX": 361.75,
255-
"scrollY": 525.69140625,
254+
"scrollX": 147.49609375,
255+
"scrollY": 463.228515625,
256256
"zoom": {
257-
"value": 1
257+
"value": 2
258258
},
259259
"currentItemRoundness": "round",
260260
"gridSize": 20,

‎docs/Settings/Integrations/Drawing.excalidraw.svg‎

Lines changed: 2 additions & 2 deletions
Loading

‎docs/Settings/Integrations/Excalidraw.md‎

Lines changed: 49 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,58 @@
11
---
22
title: Excalidraw
3-
description: Whether to enable support for the Excalidraw plugin. Feature is currently disabled.
3+
description: Enable support for the Excalidraw plugin to convert drawings to embedded SVG images.
44
created: 2025-05-15T20:32:34Z+0200
5-
modified: 2025-10-21T14:44:55Z+0200
5+
modified: 2026-01-09T23:42:47Z+0100
66
publish: true
77
tags: [excalidraw, integration, settings/integrations]
8-
default_value: "false"
8+
default_value: "true"
99
---
1010

11-
> [!WARNING] Upcoming feature
12-
> Excalidraw support is not fully tested yet.
11+
When enabled, Quartz Syncer will automatically convert [Excalidraw](https://github.com/zsviczian/obsidian-excalidraw-plugin) drawings (`.excalidraw.md` files) into embedded SVG images that display correctly in Quartz.
12+
13+
## How it works
14+
15+
1. **Detection**: Quartz Syncer identifies files with the `.excalidraw.md` extension or embedded Excalidraw links (`![[Example.excalidraw]]`).
16+
2. **Conversion**: The drawing is converted to SVG format using the [ExcalidrawAutomate API](https://excalidraw-obsidian.online).
17+
3. **Theme support**: Both light and dark theme variants are generated, allowing the drawing to automatically adapt to your Quartz site's theme.
18+
4. **Embedding**: The SVGs are embedded as base64-encoded background images, ensuring compatibility with Quartz's markdown processing.
19+
20+
## Requirements
21+
22+
- The [Excalidraw](https://github.com/zsviczian/obsidian-excalidraw-plugin) plugin must be installed and enabled in Obsidian.
23+
- Drawings must have the `.excalidraw.md` file extension.
24+
- The drawing file must have `excalidraw-plugin: parsed` in its frontmatter (this is added automatically by the Excalidraw plugin).
25+
26+
## Supported syntax
27+
28+
### Excalidraw files
29+
30+
Files with the `.excalidraw.md` extension are automatically converted when published. The entire file content is replaced with the SVG representation.
31+
32+
### Embedded drawings
33+
34+
You can embed Excalidraw drawings in other notes using the standard Obsidian embed syntax:
35+
36+
```markdown
37+
![[Example.excalidraw]]
38+
```
39+
40+
### Linked drawings
41+
42+
Regular links to Excalidraw files are converted to standard links:
43+
44+
```markdown
45+
[[Example.excalidraw]]
46+
[[Example.excalidraw|Custom text]]
47+
```
48+
49+
## Example
1350

1451
![[Drawing.excalidraw]]
52+
53+
## Notes
54+
55+
- Excalidraw files are transformed at a file level, meaning the entire file content is replaced with the SVG representation.
56+
- Interactive features of Excalidraw (like editing) are not available in the published version - it becomes a static image.
57+
- The generated SVG respects the drawing's original dimensions and styling.
58+
- Theme switching relies on Quartz's `saved-theme` attribute on the `<html>` element.

‎docs/Settings/Integrations/Fantasy Statblocks.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Fantasy Statblocks
33
description: Whether to enable support for the Fantasy Statblocks plugin. Requires Fantasy Statblocks to be installed and enabled.
44
created: 2025-06-18T14:06:35Z+0200
5-
modified: 2025-06-19T11:27:01Z+0200
5+
modified: 2026-01-09T23:18:39Z+0100
66
publish: true
77
tags: [integration, settings/integrations, ttrpg]
88
default_value: "false"

‎docs/Settings/Integrations/Manage integration styles.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
title: Manage integration styles
3+
description: Whether to automatically manage integration SCSS files and custom.scss imports in your Quartz project.
4+
created: 2026-01-09T13:00:00Z+0100
5+
modified: 2026-01-09T13:00:00Z+0100
6+
publish: true
7+
tags: [integration, settings/integrations]
8+
default_value: "true"
9+
---
10+
11+
When enabled, Quartz Syncer automatically manages the SCSS styles required by enabled integrations.
12+
13+
## What this setting does
14+
15+
1. **Writes SCSS files** for each enabled integration to `quartz/styles/syncer/`
16+
2. **Generates an index file** at `quartz/styles/syncer/_index.scss` that imports all integration styles
17+
3. **Updates `custom.scss`** to include `@use "./syncer";` if not already present
18+
19+
## Directory structure
20+
21+
When integrations with styles are enabled (Datacore, Fantasy Statblocks, Auto Card Link, Excalidraw), the following structure is created:
22+
23+
```
24+
quartz/
25+
└── styles/
26+
├── custom.scss ← Updated to include @use "./syncer";
27+
└── syncer/
28+
├── _index.scss ← Auto-generated, imports enabled integrations
29+
├── _datacore.scss
30+
├── _fantasy-statblocks.scss
31+
├── _auto-card-link.scss
32+
└── _excalidraw.scss
33+
```
34+
35+
## When to disable
36+
37+
You may want to disable this setting if:
38+
39+
- You prefer to manage Quartz styles manually
40+
- You have custom modifications to integration styles
41+
- You want to use a different styling approach
42+
43+
When disabled, integration content will still be compiled, but without the accompanying styles. You would need to add the necessary CSS/SCSS manually to your Quartz project.

‎docs/Settings/Integrations/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Integrations
33
description: Quartz Syncer settings related to integrations with other Obsidian plugins.
44
created: 2025-05-15T15:52:53Z+0200
5-
modified: 2025-10-21T11:46:43Z+0200
5+
modified: 2026-01-10T12:58:00Z+0100
66
publish: true
77
tags: [settings/integrations]
88
---

‎docs/Troubleshooting/Excalidraw.md‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,37 @@
22
title: Excalidraw
33
description: Troubleshooting issues related to using the Excalidraw Obsidian plugin.
44
created: 2025-05-05T00:00:00Z+0200
5-
modified: 2025-05-20T20:31:59Z+0200
5+
modified: 2026-01-09T14:00:00Z+0100
66
publish: true
77
tags: [excalidraw]
88
---
99

10-
> [!WARNING] Excalidraw is currently disabled in Quartz Syncer
11-
> A fix is being worked on.
12-
1310
> [!INFO] Excalidraw usage
14-
> For question regarding Excalidraw usage, please refer to the [Excaldraw documentation](https://excalidraw-obsidian.online)
11+
> For questions regarding Excalidraw usage, please refer to the [Excalidraw documentation](https://excalidraw-obsidian.online).
12+
13+
## Drawing appears empty or broken
14+
15+
If your Excalidraw drawing appears empty or broken after publishing:
16+
17+
1. **Ensure the Excalidraw plugin is enabled** - The plugin must be active for Quartz Syncer to access the export API.
18+
2. **Check the file extension** - Drawing files should have the `.excalidraw.md` extension.
19+
3. **Verify the frontmatter** - Excalidraw files should have `excalidraw-plugin: parsed` in their frontmatter.
20+
21+
## Theme switching not working
22+
23+
If the drawing doesn't switch between light and dark themes:
24+
25+
- Quartz Syncer generates both light and dark variants of each drawing.
26+
- The correct variant is shown based on Quartz's `saved-theme` attribute on the `<html>` element.
27+
- If your Quartz theme uses a different attribute for theme detection, the automatic switching may not work.
28+
29+
## Drawing looks different from Obsidian
30+
31+
Some differences may occur because:
32+
33+
- Fonts are not embedded in the exported SVG to reduce file size.
34+
- The drawing is rendered as a static image, so interactive features are not available.
35+
- Some Excalidraw-specific styling may not be preserved.
1536

1637
## I have a different issue not listed here
1738

‎main.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,8 @@ const DEFAULT_SETTINGS: QuartzSyncerSettings = {
107107
*/
108108
useFantasyStatblocks: false,
109109

110+
manageSyncerStyles: true,
111+
110112
/** Themes settings */
111113
/**
112114
* Enable themes integration.

‎manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"id": "quartz-syncer",
33
"name": "Quartz Syncer",
4-
"version": "1.9.1",
4+
"version": "1.9.2",
55
"minAppVersion": "1.11.4",
66
"description": "Manage and publish your notes to Quartz, the fast, batteries-included static-site generator.",
77
"author": "Emile Bangma",

0 commit comments

Comments
 (0)