fix: resolve icons not displaying after configuring aliases

lin-stephanie · Jul 22, 2024 · e866c18 · e866c18
1 parent 615c27c
commit e866c18
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
 # rehype-callouts
 
-[![Coverage][coverage-badge]][coverage]
+[![codecov][coverage-badge]][coverage]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![JSDocs][jsdocs-src]][jsdocs-href]
+[![jsDocs.io][jsdocs-src]][jsdocs-href]
 
 A [rehype](https://github.com/rehypejs/rehype) plugin for processing and rendering blockquote-based callouts.
 
@@ -55,6 +55,8 @@ In browsers with [`esm.sh`](https://esm.sh/):
 Say `example.md` contains:
 
 ```md
+<!-- Callout type names are case-insensitive: 'Note', 'NOTE', and 'note' are equivalent. -->
+
 > [!note] This is a _non-collapsible_ callout
 > Some content is displayed directly!
 

diff --git a/src/index.ts b/src/index.ts
@@ -157,12 +157,16 @@ const rehypeCallouts: Plugin<[UserOptions?], Root> = (options) => {
  },
  title
  ? [
- showIndicator ? getIndicator(config, revisedType) : null,
+ showIndicator
+ ? getIndicator(expandedCallouts, revisedType)
+ : null,
  node.children[0],
  collapsable ? getFoldIcon() : null,
  ]
  : [
- showIndicator ? getIndicator(config, revisedType) : null,
+ showIndicator
+ ? getIndicator(expandedCallouts, revisedType)
+ : null,
  h(
  'div',
  { className: ['callout-title-inner'] },

diff --git a/src/themes/vitepress/config.ts b/src/themes/vitepress/config.ts
@@ -4,31 +4,31 @@ export const vitepressCallouts: DefaultCallouts = {
  note: {
  title: 'NOTE',
  indicator:
- '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></g></svg>',
+ '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></g></svg>',
  color: ['rgb(142, 150, 170)', 'rgb(101, 117, 133)'],
  },
  tip: {
  title: 'TIP',
  indicator:
- '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 14c.2-1 .7-1.7 1.5-2.5c1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5c.7.7 1.3 1.5 1.5 2.5m0 4h6m-5 4h4"/></svg>',
+ '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5c1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5c.7.7 1.3 1.5 1.5 2.5m0 4h6m-5 4h4"/></svg>',
  color: ['rgb(100, 108, 255)', 'rgb(100, 108, 255)'],
  },
  important: {
  title: 'IMPORTANT',
  indicator:
- '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2zm-9-8v2m0 4h.01"/></svg>',
+ '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2zm-9-8v2m0 4h.01"/></svg>',
  color: ['rgb(159, 122, 234)', 'rgb(159, 122, 234)'],
  },
  warning: {
  title: 'WARNING',
  indicator:
- '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01"/></svg>',
+ '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01"/></svg>',
  color: ['rgb(234, 179, 8)', 'rgb(234, 179, 8)'],
  },
  caution: {
  title: 'CAUTION',
  indicator:
- '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 16h.01M12 8v4m3.312-10a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"/></svg>',
+ '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16h.01M12 8v4m3.312-10a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"/></svg>',
  color: ['rgb(244, 63, 94)', 'rgb(244, 63, 94)'],
  },
 }
diff --git a/src/themes/vitepress/index.css b/src/themes/vitepress/index.css
@@ -68,5 +68,5 @@
 .callout-fold svg {
  width: 16px;
  height: 16px;
- stroke-width: 3;
+ stroke-width: 2.2;
 }
diff --git a/src/utils.ts b/src/utils.ts
@@ -190,10 +190,10 @@ export function generateStyle(
  * SVG element or undefined if not found.
  */
 export function getIndicator(
- config: ConfigOptions,
+ callouts: Callouts,
  type: string
 ): Element | undefined {
- const indicator = config.callouts[type]?.indicator
+ const indicator = callouts[type]?.indicator
  if (!indicator) return
 
  const indicatorElement = fromHtml(indicator, {

diff --git a/test/fixtures/customTheme/output.html b/test/fixtures/customTheme/output.html
@@ -4,7 +4,18 @@
 >
  <div class="callout-title">
  <div class="callout-icon">
- <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></g></svg>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="1em"
+ height="1em"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ >
+ <g><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></g></svg>
  </div>
  <div class="callout-title-inner">NOTE</div>
  </div>
@@ -24,13 +35,13 @@
  width="1em"
  height="1em"
  viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
  >
  <path
- fill="none"
- stroke="currentColor"
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="2"
  d="M15 14c.2-1 .7-1.7 1.5-2.5c1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5c.7.7 1.3 1.5 1.5 2.5m0 4h6m-5 4h4"
  />
  </svg>
@@ -53,13 +64,13 @@
  width="1em"
  height="1em"
  viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
  >
  <path
- fill="none"
- stroke="currentColor"
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="2"
  d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2zm-9-8v2m0 4h.01"
  />
  </svg>
@@ -82,13 +93,13 @@
  width="1em"
  height="1em"
  viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
  >
  <path
- fill="none"
- stroke="currentColor"
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="2"
  d="m21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01"
  />
  </svg>

diff --git a/test/fixtures/showIndicator/input.md b/test/fixtures/showIndicator/input.md
@@ -1,4 +1,4 @@
-> [!note]
+> [!n]
 > This is the content!
 
 > [!TIP] 

diff --git a/test/index.test.ts b/test/index.test.ts
@@ -62,7 +62,7 @@ run('fromHtml', { showIndicator: false }, true)
 run('collapsibleCallouts', { showIndicator: false })
 run('markdownInTitle', { showIndicator: false })
 run('nestedCallouts', { showIndicator: false })
-run('showIndicator')
+run('showIndicator', { aliases: { note: ['n'] } })
 run('customTheme', {
  theme: 'vitepress',
  callouts: {