From e866c18eec304724c4e1c7d9ab97ef69d73be00d Mon Sep 17 00:00:00 2001
From: Stephanie Lin <102728558+lin-stephanie@users.noreply.github.com>
Date: Mon, 22 Jul 2024 12:07:29 +0800
Subject: [PATCH] fix: resolve icons not displaying after configuring aliases
---
README.md | 6 ++--
src/index.ts | 8 +++--
src/themes/vitepress/config.ts | 10 +++----
src/themes/vitepress/index.css | 2 +-
src/utils.ts | 4 +--
test/fixtures/customTheme/output.html | 43 +++++++++++++++++----------
test/fixtures/showIndicator/input.md | 2 +-
test/index.test.ts | 2 +-
8 files changed, 47 insertions(+), 30 deletions(-)
diff --git a/README.md b/README.md
index 9abca4b..960cce4 100644
--- 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
+
+
> [!note] This is a _non-collapsible_ callout
> Some content is displayed directly!
diff --git a/src/index.ts b/src/index.ts
index eb09e36..89dcc43 100644
--- 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
index 213df62..4430da2 100644
--- a/src/themes/vitepress/config.ts
+++ b/src/themes/vitepress/config.ts
@@ -4,31 +4,31 @@ export const vitepressCallouts: DefaultCallouts = {
note: {
title: 'NOTE',
indicator:
- '',
+ '',
color: ['rgb(142, 150, 170)', 'rgb(101, 117, 133)'],
},
tip: {
title: 'TIP',
indicator:
- '',
+ '',
color: ['rgb(100, 108, 255)', 'rgb(100, 108, 255)'],
},
important: {
title: 'IMPORTANT',
indicator:
- '',
+ '',
color: ['rgb(159, 122, 234)', 'rgb(159, 122, 234)'],
},
warning: {
title: 'WARNING',
indicator:
- '',
+ '',
color: ['rgb(234, 179, 8)', 'rgb(234, 179, 8)'],
},
caution: {
title: 'CAUTION',
indicator:
- '',
+ '',
color: ['rgb(244, 63, 94)', 'rgb(244, 63, 94)'],
},
}
diff --git a/src/themes/vitepress/index.css b/src/themes/vitepress/index.css
index f1b3b91..d51abf8 100644
--- 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
index 27cfbba..f34aa28 100644
--- 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
index 70102c8..3be70a3 100644
--- a/test/fixtures/customTheme/output.html
+++ b/test/fixtures/customTheme/output.html
@@ -4,7 +4,18 @@
>
@@ -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"
>
@@ -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"
>
@@ -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"
>
diff --git a/test/fixtures/showIndicator/input.md b/test/fixtures/showIndicator/input.md
index 9e7b9cf..31479e3 100644
--- 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
index 167d240..1b0048f 100644
--- 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: {