feat(#141): move 'fallback' icon to separate option

It didn't sit right with me that there would be a 'special' marker type
that has subtly different behavior than any other type of marker.

`fallbackIcon` turned into a separate option, and added class
`fallback-alert` to the div for full control of styles.

Author: tuurep

src/parser/github-alerts.ts

@@ -8,8 +8,14 @@ import MarkdownIt from 'markdown-it';
 import config from '../config.js';
 import octicons from '@primer/octicons';
 
-// config.json alertsOptions
-const icons: Record<string, string> = {};
+const resolveIcon = (icon: string): string => {
+    // Todo:
+    //     - inline svg
+    //     - svg from filepath
+    const iconName = icon as keyof typeof octicons;
+    return octicons[iconName]?.toSVG();
+};
+
 const titles = config.alertsOptions?.titles ?? {};
 const matchCaseSensitive = config.alertsOptions?.matchCaseSensitive ?? false;
 const classPrefix = config.alertsOptions?.classPrefix ?? 'markdown-alert';
@@ -26,16 +32,15 @@ const mergedIcons = {
     ...config.alertsOptions?.icons,
 };
 
-// Icon for markers that have no configured icon
-// Defaults to same as [!note]
-// Can also be customized separately
-mergedIcons['fallback'] ??= mergedIcons['note'];
+const resolvedIcons: Record<string, string> = {};
 
 for (const marker in mergedIcons) {
-    const octicon = mergedIcons[marker] as keyof typeof octicons;
-    icons[marker] = octicons[octicon].toSVG();
+    resolvedIcons[marker] = resolveIcon(mergedIcons[marker]);
 }
 
+const fallbackIconOpt = config.alertsOptions?.fallbackIcon ?? mergedIcons['note'];
+const fallbackIcon = resolveIcon(fallbackIconOpt);
+
 const MarkdownItGitHubAlerts = (md: MarkdownIt) => {
     const markerNameRE = '\\w+';
     const RE = new RegExp(
@@ -58,25 +63,28 @@ const MarkdownItGitHubAlerts = (md: MarkdownIt) => {
                 if (!firstContent) continue;
                 const match = firstContent.content.match(RE);
                 if (!match) continue;
-                const type = match[1].toLowerCase() as keyof typeof icons;
+                const type = match[1].toLowerCase() as keyof typeof resolvedIcons;
                 const title = match[2].trim() || (titles[type] ?? capitalize(type));
-                const icon = icons[type] ?? icons['fallback'];
+                const isFallback = !(type in resolvedIcons);
+                const icon = isFallback ? fallbackIcon : resolvedIcons[type];
                 firstContent.content = firstContent.content.slice(match[0].length).trimStart();
                 open.type = 'alert_open';
                 open.tag = 'div';
                 open.meta = {
                     title,
                     type,
                     icon,
+                    isFallback,
                 };
                 close.type = 'alert_close';
                 close.tag = 'div';
             }
         }
     });
     md.renderer.rules.alert_open = function (tokens, idx) {
-        const { title, type, icon } = tokens[idx].meta;
-        return `<div class="${classPrefix} ${classPrefix}-${type}"><p class="${classPrefix}-title">${icon}${title}</p>`;
+        const { title, type, icon, isFallback } = tokens[idx].meta;
+        const classes = [classPrefix, `${classPrefix}-${type}`, isFallback ? 'fallback' : ''];
+        return `<div class="${classes.join(' ')}"><p class="${classPrefix}-title">${icon}${title}</p>`;
     };
 };
 

static/markdown.css

@@ -142,20 +142,13 @@ blockquote {
     align-items: center;
     line-height: 1;
 }
-.markdown-alert .markdown-alert-title .octicon {
+.markdown-alert .markdown-alert-title svg {
     margin-right: 0.5rem;
     display: inline-block;
     overflow: visible !important;
     vertical-align: text-bottom;
     fill: currentColor;
 }
-/* default style for unconfigured custom markers (Obsidian Callout style) */
-.markdown-alert {
-    border-left: .25rem solid var(--alert-note);
-}
-.markdown-alert .markdown-alert-title {
-    color: var(--alert-note);
-}
 /* default styles for GitHub style markers */
 .markdown-alert-note {
     border-left: .25rem solid var(--alert-note);
@@ -187,6 +180,13 @@ blockquote {
 .markdown-alert-caution .markdown-alert-title {
     color: var(--alert-caution);
 }
+/* default style for unconfigured custom markers (Obsidian Callout style) */
+.fallback-alert {
+    border-left: .25rem solid var(--alert-note);
+}
+.fallback-alert .markdown-alert-title {
+    color: var(--alert-note);
+}
 
 /* --------------------------------------------------------------------------
  * COPY-CODE-BUTTON --------------------------------------------------------- */

tests/rendering/markdown-additional.md

@@ -89,7 +89,7 @@ This paragraph has a red background color.{style=background-color:red}
 > Markers fall back to `[!NOTE]` by default
 >
 > Optionally, the fallback icon can be set separately as
-> `config.alertsOptions.icons.fallback`
+> `config.alertsOptions.fallbackIcon`
 
 > [!fOoBaR]
 > The marker is case-insensitive and turns into Title Case