Skip to content

Commit 4265ff3

Browse files
siddharthkppieh
siddharthkp
authored and
pieh
committed
feat(gatsby-remark-autolink-headers): add option to maintain case (#9313)
The remark-autolink-headers plugin creates lowercase ids by default. Adding an option to maintain the case for markdown headers Use case: You want the url to have the same case as the function name. example: https://reactjs.org/docs/react-component.html# **componentDidMount** - [x] Added optional configuration to the API - [x] Added a test - [x] Added documentation in README
1 parent ba82bc4 commit 4265ff3

File tree

4 files changed

+221
-2
lines changed

4 files changed

+221
-2
lines changed

Diff for: ‎packages/gatsby-remark-autolink-headers/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ Note: if you are using `gatsby-remark-prismjs`, make sure that it’s listed aft
5555
- `offsetY`: Signed integer. Vertical offset value in pixels (optional)
5656
- `icon`: SVG shape inside a template literal or boolean `false`. Set your own svg or disable icon (optional)
5757
- `className`: String. Set your own class for the anchor (optional)
58+
- `maintainCase`: Boolean. Maintains the case for markdown header (optional)
5859

5960
```javascript
6061
// In your gatsby-config.js
@@ -70,6 +71,7 @@ module.exports = {
7071
offsetY: `100`,
7172
icon: `<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>`,
7273
className: `custom-class`,
74+
maintainCase: true,
7375
},
7476
},
7577
],

Diff for: ‎packages/gatsby-remark-autolink-headers/src/__tests__/__snapshots__/index.js.snap

+195
Original file line numberDiff line numberDiff line change
@@ -242,3 +242,198 @@ Object {
242242
"type": "heading",
243243
}
244244
`;
245+
246+
exports[`gatsby-remark-autolink-headers maintain case of markdown header for id 1`] = `
247+
Object {
248+
"children": Array [
249+
Object {
250+
"data": Object {
251+
"hChildren": Array [
252+
Object {
253+
"type": "raw",
254+
"value": "<svg aria-hidden=\\"true\\" height=\\"16\\" version=\\"1.1\\" viewBox=\\"0 0 16 16\\" width=\\"16\\"><path fill-rule=\\"evenodd\\" d=\\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\\"></path></svg>",
255+
},
256+
],
257+
"hProperties": Object {
258+
"aria-hidden": true,
259+
"class": "anchor",
260+
},
261+
},
262+
"title": null,
263+
"type": "link",
264+
"url": "#Heading-One",
265+
},
266+
Object {
267+
"position": Position {
268+
"end": Object {
269+
"column": 14,
270+
"line": 2,
271+
"offset": 14,
272+
},
273+
"indent": Array [],
274+
"start": Object {
275+
"column": 3,
276+
"line": 2,
277+
"offset": 3,
278+
},
279+
},
280+
"type": "text",
281+
"value": "Heading One",
282+
},
283+
],
284+
"data": Object {
285+
"hProperties": Object {
286+
"id": "Heading-One",
287+
},
288+
"htmlAttributes": Object {
289+
"id": "Heading-One",
290+
},
291+
"id": "Heading-One",
292+
},
293+
"depth": 1,
294+
"position": Position {
295+
"end": Object {
296+
"column": 14,
297+
"line": 2,
298+
"offset": 14,
299+
},
300+
"indent": Array [],
301+
"start": Object {
302+
"column": 1,
303+
"line": 2,
304+
"offset": 1,
305+
},
306+
},
307+
"type": "heading",
308+
}
309+
`;
310+
311+
exports[`gatsby-remark-autolink-headers maintain case of markdown header for id 2`] = `
312+
Object {
313+
"children": Array [
314+
Object {
315+
"data": Object {
316+
"hChildren": Array [
317+
Object {
318+
"type": "raw",
319+
"value": "<svg aria-hidden=\\"true\\" height=\\"16\\" version=\\"1.1\\" viewBox=\\"0 0 16 16\\" width=\\"16\\"><path fill-rule=\\"evenodd\\" d=\\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\\"></path></svg>",
320+
},
321+
],
322+
"hProperties": Object {
323+
"aria-hidden": true,
324+
"class": "anchor",
325+
},
326+
},
327+
"title": null,
328+
"type": "link",
329+
"url": "#Heading-Two",
330+
},
331+
Object {
332+
"position": Position {
333+
"end": Object {
334+
"column": 15,
335+
"line": 4,
336+
"offset": 30,
337+
},
338+
"indent": Array [],
339+
"start": Object {
340+
"column": 4,
341+
"line": 4,
342+
"offset": 19,
343+
},
344+
},
345+
"type": "text",
346+
"value": "Heading Two",
347+
},
348+
],
349+
"data": Object {
350+
"hProperties": Object {
351+
"id": "Heading-Two",
352+
},
353+
"htmlAttributes": Object {
354+
"id": "Heading-Two",
355+
},
356+
"id": "Heading-Two",
357+
},
358+
"depth": 2,
359+
"position": Position {
360+
"end": Object {
361+
"column": 15,
362+
"line": 4,
363+
"offset": 30,
364+
},
365+
"indent": Array [],
366+
"start": Object {
367+
"column": 1,
368+
"line": 4,
369+
"offset": 16,
370+
},
371+
},
372+
"type": "heading",
373+
}
374+
`;
375+
376+
exports[`gatsby-remark-autolink-headers maintain case of markdown header for id 3`] = `
377+
Object {
378+
"children": Array [
379+
Object {
380+
"data": Object {
381+
"hChildren": Array [
382+
Object {
383+
"type": "raw",
384+
"value": "<svg aria-hidden=\\"true\\" height=\\"16\\" version=\\"1.1\\" viewBox=\\"0 0 16 16\\" width=\\"16\\"><path fill-rule=\\"evenodd\\" d=\\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\\"></path></svg>",
385+
},
386+
],
387+
"hProperties": Object {
388+
"aria-hidden": true,
389+
"class": "anchor",
390+
},
391+
},
392+
"title": null,
393+
"type": "link",
394+
"url": "#Heading-Three",
395+
},
396+
Object {
397+
"position": Position {
398+
"end": Object {
399+
"column": 18,
400+
"line": 6,
401+
"offset": 49,
402+
},
403+
"indent": Array [],
404+
"start": Object {
405+
"column": 5,
406+
"line": 6,
407+
"offset": 36,
408+
},
409+
},
410+
"type": "text",
411+
"value": "Heading Three",
412+
},
413+
],
414+
"data": Object {
415+
"hProperties": Object {
416+
"id": "Heading-Three",
417+
},
418+
"htmlAttributes": Object {
419+
"id": "Heading-Three",
420+
},
421+
"id": "Heading-Three",
422+
},
423+
"depth": 3,
424+
"position": Position {
425+
"end": Object {
426+
"column": 18,
427+
"line": 6,
428+
"offset": 49,
429+
},
430+
"indent": Array [],
431+
"start": Object {
432+
"column": 1,
433+
"line": 6,
434+
"offset": 32,
435+
},
436+
},
437+
"type": "heading",
438+
}
439+
`;

Diff for: ‎packages/gatsby-remark-autolink-headers/src/__tests__/index.js

+19
Original file line numberDiff line numberDiff line change
@@ -127,4 +127,23 @@ describe(`gatsby-remark-autolink-headers`, () => {
127127
expect(node.data.id).toBeDefined()
128128
})
129129
})
130+
131+
it(`maintain case of markdown header for id`, () => {
132+
const markdownAST = remark.parse(`
133+
# Heading One
134+
135+
## Heading Two
136+
137+
### Heading Three
138+
`)
139+
const maintainCase = true
140+
141+
const transformed = plugin({ markdownAST }, { maintainCase })
142+
143+
visit(transformed, `heading`, node => {
144+
expect(node.data.id).toBeDefined()
145+
146+
expect(node).toMatchSnapshot()
147+
})
148+
})
130149
})

Diff for: ‎packages/gatsby-remark-autolink-headers/src/index.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,14 @@ function patch(context, key, value) {
1212

1313
const svgIcon = `<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>`
1414

15-
module.exports = ({ markdownAST }, { icon = svgIcon, className = `anchor` }) => {
15+
module.exports = (
16+
{ markdownAST },
17+
{ icon = svgIcon, className = `anchor`, maintainCase = false }
18+
) => {
1619
slugs.reset()
1720

1821
visit(markdownAST, `heading`, node => {
19-
const id = slugs.slug(toString(node))
22+
const id = slugs.slug(toString(node), maintainCase)
2023
const data = patch(node, `data`, {})
2124

2225
patch(data, `id`, id)

0 commit comments

Comments
 (0)