diff --git a/src/index.ts b/src/index.ts index 753d230..281b4eb 100644 --- a/src/index.ts +++ b/src/index.ts @@ -44,7 +44,6 @@ import type { UserOptions } from './types.js' */ const remarkDirectiveSugar: Plugin<[UserOptions?], Root> = (options) => { - // get config const config = getConfig(options) const { classPrefix, image, link, video, badge } = config @@ -126,13 +125,10 @@ const remarkDirectiveSugar: Plugin<[UserOptions?], Root> = (options) => { data.hName = 'a' const defaultAttributes = { target: '_blank' } data.hProperties = { ...defaultAttributes, ...attributes } - } else if (imageRegex.test(node.name)) { + } else { /* image-* */ const match = node.name.match(imageRegex) if (match && validTagsForImg.has(match[1])) { - /* const data = node.data || (node.data = {}) - const attributes = node.attributes || {} */ - data.hName = match[1] data.hProperties = attributes } else { @@ -329,7 +325,10 @@ const remarkDirectiveSugar: Plugin<[UserOptions?], Root> = (options) => { value: resolvedText, }, ] - } else if (resolvedStyle === 'github') { + } else if ( + resolvedStyle === 'github' || + resolvedStyle === 'npm' + ) { data.hName = 'span' data.hProperties = { style: 'white-space: nowrap', @@ -337,17 +336,31 @@ const remarkDirectiveSugar: Plugin<[UserOptions?], Root> = (options) => { data.hChildren = [ { type: 'element', - tagName: 'span', + tagName: 'svg', properties: { - class: 'i-carbon-logo-github', + xmlns: 'http://www.w3.org/2000/svg', + width: '1.2em', + height: '1.2em', + viewBox: '0 0 32 32', + ariaHidden: 'true', }, - children: [], + children: [ + { + type: 'element', + tagName: 'path', + properties: { + fill: 'currentColor', + d: iconSvgPath[resolvedStyle], + }, + children: [], + }, + ], }, { type: 'element', tagName: 'a', properties: { - class: `${classPrefix}-link-github`, + class: `${classPrefix}-link-${resolvedStyle}`, href: resolvedLink, }, children: [{ type: 'text', value: resolvedText }], diff --git a/src/utils.ts b/src/utils.ts index 296cea6..67207d1 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -32,7 +32,7 @@ export const githubUsernameRegex = /^@[a-zA-Z\d](?!.*--)[\w-]{0,37}[a-zA-Z\d]$/ export const githubRepoRegex = /^@?([a-zA-Z\d](?!.*--)[\w-]{0,37}[a-zA-Z\d])\/.*$/ -export const linkStyle = ['square', 'rounded', 'github'] as const +export const linkStyle = ['square', 'rounded', 'github', 'npm'] as const export const tabOrgRegex = /^org-(\w+)$/ @@ -50,6 +50,12 @@ export const githubTab = [ 'org-people', ] +export const iconSvgPath = { + github: + 'M16 2a14 14 0 0 0-4.43 27.28c.7.13 1-.3 1-.67v-2.38c-3.89.84-4.71-1.88-4.71-1.88a3.7 3.7 0 0 0-1.62-2.05c-1.27-.86.1-.85.1-.85a2.94 2.94 0 0 1 2.14 1.45a3 3 0 0 0 4.08 1.16a2.93 2.93 0 0 1 .88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4 5.4 0 0 1 1.44-3.76a5 5 0 0 1 .14-3.7s1.17-.38 3.85 1.43a13.3 13.3 0 0 1 7 0c2.67-1.81 3.84-1.43 3.84-1.43a5 5 0 0 1 .14 3.7a5.4 5.4 0 0 1 1.44 3.76c0 5.38-3.27 6.56-6.39 6.91a3.33 3.33 0 0 1 .95 2.59v3.84c0 .46.25.81 1 .67A14 14 0 0 0 16 2', + npm: 'M4 28V4h24v24zM8.5 8.5v15H16v-12h4.5v12h3v-15z', +} + /* badge */ export const badgesPreset: BadgesPreset = { a: { text: 'ARTICLE', color: '#e9d66b|#fbf8cc' }, @@ -65,7 +71,7 @@ export const badgeRegex = /^badge-(.*)/ export const validBadges = new Set(Object.keys(badgesPreset)) -/* default */ +/* Default Config */ export const configOptions: ConfigOptions = { classPrefix: 'directive-sugar', image: { diff --git a/test/fixtures/link/input.md b/test/fixtures/link/input.md index efdcdd8..3100e70 100644 --- a/test/fixtures/link/input.md +++ b/test/fixtures/link/input.md @@ -18,6 +18,10 @@ :link{#lin-stephanie/astro-antfustyle-theme style=github} -**Example 10**: `:link[send a little encouragement my way ❤️]{link=https://github.com/sponsors/lin-stephanie imageUrl=https://github.githubassets.com/assets/mona-e50f14d05e4b.png}` fully customizes a link. +**Example 10**: `:link[remark-directive-sugar]{link=https://www.npmjs.com/package/remark-directive-sugar style=npm}` creates a npm-styled link like: + +:link[remark-directive-sugar]{link=https://www.npmjs.com/package/remark-directive-sugar style=npm} + +**Example 11**: `:link[send a little encouragement my way ❤️]{link=https://github.com/sponsors/lin-stephanie imageUrl=https://github.githubassets.com/assets/mona-e50f14d05e4b.png}` fully customizes a link. Thanks for making it this far! Writing is no easy task --- maybe you'd like to :link[send a little encouragement my way ❤️]{link=https://github.com/sponsors/lin-stephanie imageUrl=https://github.githubassets.com/assets/mona-e50f14d05e4b.png}. diff --git a/test/fixtures/link/output.html b/test/fixtures/link/output.html index d5b39a0..deca0e9 100644 --- a/test/fixtures/link/output.html +++ b/test/fixtures/link/output.html @@ -1,9 +1,7 @@

Example 1: :link[Astro]{#withastro/astro} or :link[Astro]{id=withastro/astro} creates a link to - Example 2: :link[Stephanie Lin]{#@lin-stephanie} links to the GitHub profile of the project maintainer, - Example 3: :link[Vite]{id=@vitejs} links to the GitHub profile of the - Example 5: :link{#@vitejs tab=org-people} links directly to the people section of a GitHub organization, like - Example 6: :link[Google]{link=https://www.google.com/} creates an external link to the - Example 7: :link[Astro]{#withastro/astro style=rounded} creates a rounded button like - Example 8: :link[Vite]{id=@vitejs style=square} creates a square button like -

Example 9: - :link{#lin-stephanie/astro-antfustyle-theme style=github} creates - a GitHub-styled link like: + :link{#lin-stephanie/astro-antfustyle-theme style=github} creates a GitHub-styled link like:

lin-stephanie/astro-antfustyle-theme

Example 10: + :link[remark-directive-sugar]{link=https://www.npmjs.com/package/remark-directive-sugar style=npm} + creates a npm-styled link like: +

+

+ + remark-directive-sugar + + +

+

+ Example 11: :link[send a little encouragement my way ❤️]{link=https://github.com/sponsors/lin-stephanie @@ -143,9 +152,7 @@

Thanks for making it this far! Writing is no easy task --- maybe you'd like to -