diff --git a/app/components/Readme.vue b/app/components/Readme.vue index e613e76e3..446c46079 100644 --- a/app/components/Readme.vue +++ b/app/components/Readme.vue @@ -150,6 +150,16 @@ function handleClick(event: MouseEvent) { @apply inline i-carbon:launch rtl-flip ms-1 opacity-50; } +.readme :deep(a[href^='#']::after) { + /* I don't know what kind of sorcery this is, but it ensures this icon can't wrap to a new line on its own. */ + content: '__'; + @apply inline i-carbon:link rtl-flip ms-1 opacity-0; +} + +.readme :deep(a[href^='#']:hover::after) { + @apply opacity-100; +} + .readme :deep(code) { @apply font-mono; font-size: 0.875em; diff --git a/server/utils/readme.ts b/server/utils/readme.ts index 9920eb2af..d4cabda86 100644 --- a/server/utils/readme.ts +++ b/server/utils/readme.ts @@ -221,16 +221,6 @@ const isNpmJsUrlThatCanBeRedirected = (url: URL) => { return true } -const replaceHtmlLink = (html: string) => { - return html.replace(/href="([^"]+)"/g, (match, href) => { - if (isNpmJsUrlThatCanBeRedirected(new URL(href, 'https://www.npmjs.com'))) { - const newHref = href.replace(/^https?:\/\/(www\.)?npmjs\.com/, '') - return `href="${newHref}"` - } - return match - }) -} - /** * Resolve a relative URL to an absolute URL. * If repository info is available, resolve to provider's raw file URLs. @@ -387,7 +377,8 @@ export async function renderReadmeHtml( toc.push({ text: plainText, id, depth }) } - return `${text}\n` + /** The link href uses the unique slug WITHOUT the 'user-content-' prefix, because that will later be added for all links. */ + return `${plainText}\n` } // Syntax highlighting for code blocks (uses shared highlighter) @@ -437,14 +428,7 @@ ${html} return `
${body}
\n` } - marked.setOptions({ - renderer, - walkTokens: token => { - if (token.type === 'html') { - token.text = replaceHtmlLink(token.text) - } - }, - }) + marked.setOptions({ renderer }) const rawHtml = marked.parse(content) as string diff --git a/test/unit/server/utils/readme.spec.ts b/test/unit/server/utils/readme.spec.ts index 08db45be2..9bd758a85 100644 --- a/test/unit/server/utils/readme.spec.ts +++ b/test/unit/server/utils/readme.spec.ts @@ -375,7 +375,8 @@ describe('HTML output', () => { const markdown = `# Title\n\nSome **bold** text and a [link](https://example.com).` const result = await renderReadmeHtml(markdown, 'test-pkg') - expect(result.html).toBe(`

Title

+ expect(result.html) + .toBe(`

Title

Some bold text and a link.

`) })