Skip to content

Commit

Permalink
Link hrefs and code styling (#95)
Browse files Browse the repository at this point in the history 
* Format <code> tags more consistently

* Fix audit failures

* Add base path to root links in <link> tags
  • Loading branch information
@paulbrimicombe
paulbrimicombe authored Oct 23, 2024
1 parent a9e59a9 commit 528b635
Show file tree
Hide file tree
Showing 5 changed files with 121 additions and 72 deletions.
56 changes: 28 additions & 28 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 7 additions & 0 deletions src/markdown-to-html-parser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,18 @@ const createParser = (options) => {
replace: `<a href="${basePath}/$1">`
}

const addBasePathToLinkHrefs = {
type: 'output',
regex: /<link(.+)href="\/([^:\n]*)"(.*)\/>/g, // exclude colon, so external links aren't converted
replace: `<link$1href="${basePath}/$2"$3/>`
}

const parser = new showdown.Converter({
extensions: [
convertMdLinksToHtmlLinks,
convertMdHashLinksToHtmlLinks,
addBasePathToRootLinks,
addBasePathToLinkHrefs,
headingExtension,
...bindings
]
Expand Down
10 changes: 5 additions & 5 deletions src/page-renderers/MortyPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,12 +137,12 @@ const contentStyles = `
border-radius: 0;
}
.content p code {
.content :not(pre) code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
.content table {
Expand Down
60 changes: 30 additions & 30 deletions test/unit/__snapshots__/transform-content.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,12 +186,12 @@ sup {
border-radius: 0;
}
.content p code {
.content :not(pre) code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
.content table {
Expand Down Expand Up @@ -487,12 +487,12 @@ sup {
border-radius: 0;
}
.content p code {
.content :not(pre) code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
.content table {
Expand Down Expand Up @@ -788,12 +788,12 @@ sup {
border-radius: 0;
}
.content p code {
.content :not(pre) code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
.content table {
Expand Down Expand Up @@ -1089,12 +1089,12 @@ sup {
border-radius: 0;
}
.content p code {
.content :not(pre) code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
.content table {
Expand Down Expand Up @@ -1381,12 +1381,12 @@ sup {
border-radius: 0;
}
.content p code {
.content :not(pre) code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
.content table {
Expand Down Expand Up @@ -1670,12 +1670,12 @@ sup {
border-radius: 0;
}
.content p code {
.content :not(pre) code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
.content table {
Expand Down
60 changes: 51 additions & 9 deletions test/unit/markdown-to-html-parser.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,40 +42,82 @@ describe('Markdown Parser', () => {
})

it('creates an html link from an md link', () => {
const markdown = '[here](./docs/user/publishing-your-repo.md)\n[here](./docs/user/publishing-another-repo.md)'
const markdown =
'[here](./docs/user/publishing-your-repo.md)\n[here](./docs/user/publishing-another-repo.md)'

const actual = parseToHtml(markdown)

const expected = '<p><a href="./docs/user/publishing-your-repo.html">here</a><br />\n<a href="./docs/user/publishing-another-repo.html">here</a></p>'
const expected =
'<p><a href="./docs/user/publishing-your-repo.html">here</a><br />\n<a href="./docs/user/publishing-another-repo.html">here</a></p>'

expect(actual).toEqual(expected)
})

it('doesn\'t break absolute links', () => {
const markdown = '[here](https://bbc.co.uk/docs/user/publishing-your-repo.md)\n[here](https://bbc.co.uk/docs/user/publishing-another-repo.md)'
it("doesn't break absolute links", () => {
const markdown =
'[here](https://bbc.co.uk/docs/user/publishing-your-repo.md)\n[here](https://bbc.co.uk/docs/user/publishing-another-repo.md)'

const actual = parseToHtml(markdown)

const expected = '<p><a href="https://bbc.co.uk/docs/user/publishing-your-repo.md">here</a><br />\n<a href="https://bbc.co.uk/docs/user/publishing-another-repo.md">here</a></p>'
const expected =
'<p><a href="https://bbc.co.uk/docs/user/publishing-your-repo.md">here</a><br />\n<a href="https://bbc.co.uk/docs/user/publishing-another-repo.md">here</a></p>'

expect(actual).toEqual(expected)
})

it("doesn't break absolute links in link tags", () => {
const markdown = '<link href="https://bbc.co.uk/docs/user/main.css" />'

const actual = parseToHtml(markdown)

const expected =
'<p><link href="https://bbc.co.uk/docs/user/main.css" /></p>'

expect(actual).toEqual(expected)
})

it('adds the base path to root links in link tags', () => {
const markdown = '<link href="/assets/main.css" />'

const actual = parseToHtml(markdown, { basePath: '/morty-docs/some-repo' })

const expected =
'<p><link href="/morty-docs/some-repo/assets/main.css" /></p>'

expect(actual).toEqual(expected)
})

it('retains additional link attributes when a link tag contains a root link', () => {
const markdown = '<link rel="stylesheet" href="/assets/main.css" media="print" />'

const actual = parseToHtml(markdown, { basePath: '/morty-docs/some-repo' })

const expected =
'<p><link rel="stylesheet" href="/morty-docs/some-repo/assets/main.css" media="print" /></p>'

expect(actual).toEqual(expected)
})

it('should replace multiple relative links per line', () => {
const markdown = '[here](./publishing-your-repo.md)[here](./publishing-your-repo.md)[here](./publishing-your-repo.md)'
const markdown =
'[here](./publishing-your-repo.md)[here](./publishing-your-repo.md)[here](./publishing-your-repo.md)'

const actual = parseToHtml(markdown)

const expected = '<p><a href="./publishing-your-repo.html">here</a><a href="./publishing-your-repo.html">here</a><a href="./publishing-your-repo.html">here</a></p>'
const expected =
'<p><a href="./publishing-your-repo.html">here</a><a href="./publishing-your-repo.html">here</a><a href="./publishing-your-repo.html">here</a></p>'

expect(actual).toEqual(expected)
})

it('should replace multiple hash links per line', () => {
const markdown = '[here](./link1.md#Section1)[here](./link2.md#Section2)[here](./link3.md#Section3)'
const markdown =
'[here](./link1.md#Section1)[here](./link2.md#Section2)[here](./link3.md#Section3)'

const actual = parseToHtml(markdown)

const expected = '<p><a href="./link1.html#Section1">here</a><a href="./link2.html#Section2">here</a><a href="./link3.html#Section3">here</a></p>'
const expected =
'<p><a href="./link1.html#Section1">here</a><a href="./link2.html#Section2">here</a><a href="./link3.html#Section3">here</a></p>'

expect(actual).toEqual(expected)
})
Expand Down

0 comments on commit 528b635

Please sign in to comment.