The Trans Directory
feat(links): added ofm option to style unresolved or broken links differently (#1992)
* feat: add option to disable broken wikilinks
* fix(style): update hover color for broken links and introduce new class
* feat: add "disableBrokenWikilinks" option to ObsidianFlavoredMarkdown
authored by
Keisuke ANDO
and committed by
GitHub
51b43a21
c9349457
+26
-2
+1
docs/plugins/ObsidianFlavoredMarkdown.md
+1
docs/plugins/ObsidianFlavoredMarkdown.md
···
23
23
- `enableYouTubeEmbed`: If `true` (default), enables the embedding of YouTube videos and playlists using external image Markdown syntax.
24
24
- `enableVideoEmbed`: If `true` (default), enables the embedding of video files.
25
25
- `enableCheckbox`: If `true`, adds support for interactive checkboxes in content. Defaults to `false`.
26
+
- `disableBrokenWikilinks`: If `true`, replaces links to non-existent notes with a dimmed, disabled link. Defaults to `false`.
26
27
27
28
> [!warning]
28
29
> Don't remove this plugin if you're using [[Obsidian compatibility|Obsidian]] to author the content!
+15
-1
quartz/plugins/transformers/ofm.ts
+15
-1
quartz/plugins/transformers/ofm.ts
···
41
41
enableYouTubeEmbed: boolean
42
42
enableVideoEmbed: boolean
43
43
enableCheckbox: boolean
44
+
disableBrokenWikilinks: boolean
44
45
}
45
46
46
47
const defaultOptions: Options = {
···
56
57
enableYouTubeEmbed: true,
57
58
enableVideoEmbed: true,
58
59
enableCheckbox: false,
60
+
disableBrokenWikilinks: false,
59
61
}
60
62
61
63
const calloutMapping = {
···
206
208
207
209
return src
208
210
},
209
-
markdownPlugins(_ctx) {
211
+
markdownPlugins(ctx) {
210
212
const plugins: PluggableList = []
211
213
212
214
// regex replacements
···
273
275
}
274
276
275
277
// otherwise, fall through to regular link
278
+
}
279
+
280
+
// treat as broken link if slug not in ctx.allSlugs
281
+
if (opts.disableBrokenWikilinks) {
282
+
const slug = slugifyFilePath(fp as FilePath)
283
+
const exists = ctx.allSlugs && ctx.allSlugs.includes(slug)
284
+
if (!exists) {
285
+
return {
286
+
type: "html",
287
+
value: `<a class=\"internal broken\">${alias ?? fp}</a>`,
288
+
}
289
+
}
276
290
}
277
291
278
292
// internal link
+10
-1
quartz/styles/base.scss
+10
-1
quartz/styles/base.scss
···
91
91
color: var(--secondary);
92
92
93
93
&:hover {
94
-
color: var(--tertiary) !important;
94
+
color: var(--tertiary);
95
95
}
96
96
97
97
&.internal {
···
100
100
padding: 0 0.1rem;
101
101
border-radius: 5px;
102
102
line-height: 1.4rem;
103
+
104
+
&.broken {
105
+
color: var(--secondary);
106
+
opacity: 0.5;
107
+
transition: opacity 0.2s ease;
108
+
&:hover {
109
+
opacity: 0.8;
110
+
}
111
+
}
103
112
104
113
&:has(> img) {
105
114
background-color: transparent;