diff --git a/packages/gatsby-remark-autolink-headers/README.md b/packages/gatsby-remark-autolink-headers/README.md
index 827e2d96b42ed..8814340cfe4dc 100644
--- a/packages/gatsby-remark-autolink-headers/README.md
+++ b/packages/gatsby-remark-autolink-headers/README.md
@@ -55,6 +55,7 @@ Note: if you are using `gatsby-remark-prismjs`, make sure that it’s listed aft
- `offsetY`: Signed integer. Vertical offset value in pixels (optional)
- `icon`: SVG shape inside a template literal or boolean `false`. Set your own svg or disable icon (optional)
- `className`: String. Set your own class for the anchor (optional)
+- `maintainCase`: Boolean. Maintains the case for markdown header (optional)
```javascript
// In your gatsby-config.js
@@ -70,6 +71,7 @@ module.exports = {
offsetY: `100`,
icon: ``,
className: `custom-class`,
+ maintainCase: true,
},
},
],
diff --git a/packages/gatsby-remark-autolink-headers/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-remark-autolink-headers/src/__tests__/__snapshots__/index.js.snap
index 458aaf1ad7ce8..34977224ea57d 100644
--- a/packages/gatsby-remark-autolink-headers/src/__tests__/__snapshots__/index.js.snap
+++ b/packages/gatsby-remark-autolink-headers/src/__tests__/__snapshots__/index.js.snap
@@ -242,3 +242,198 @@ Object {
"type": "heading",
}
`;
+
+exports[`gatsby-remark-autolink-headers maintain case of markdown header for id 1`] = `
+Object {
+ "children": Array [
+ Object {
+ "data": Object {
+ "hChildren": Array [
+ Object {
+ "type": "raw",
+ "value": "",
+ },
+ ],
+ "hProperties": Object {
+ "aria-hidden": true,
+ "class": "anchor",
+ },
+ },
+ "title": null,
+ "type": "link",
+ "url": "#Heading-One",
+ },
+ Object {
+ "position": Position {
+ "end": Object {
+ "column": 14,
+ "line": 2,
+ "offset": 14,
+ },
+ "indent": Array [],
+ "start": Object {
+ "column": 3,
+ "line": 2,
+ "offset": 3,
+ },
+ },
+ "type": "text",
+ "value": "Heading One",
+ },
+ ],
+ "data": Object {
+ "hProperties": Object {
+ "id": "Heading-One",
+ },
+ "htmlAttributes": Object {
+ "id": "Heading-One",
+ },
+ "id": "Heading-One",
+ },
+ "depth": 1,
+ "position": Position {
+ "end": Object {
+ "column": 14,
+ "line": 2,
+ "offset": 14,
+ },
+ "indent": Array [],
+ "start": Object {
+ "column": 1,
+ "line": 2,
+ "offset": 1,
+ },
+ },
+ "type": "heading",
+}
+`;
+
+exports[`gatsby-remark-autolink-headers maintain case of markdown header for id 2`] = `
+Object {
+ "children": Array [
+ Object {
+ "data": Object {
+ "hChildren": Array [
+ Object {
+ "type": "raw",
+ "value": "",
+ },
+ ],
+ "hProperties": Object {
+ "aria-hidden": true,
+ "class": "anchor",
+ },
+ },
+ "title": null,
+ "type": "link",
+ "url": "#Heading-Two",
+ },
+ Object {
+ "position": Position {
+ "end": Object {
+ "column": 15,
+ "line": 4,
+ "offset": 30,
+ },
+ "indent": Array [],
+ "start": Object {
+ "column": 4,
+ "line": 4,
+ "offset": 19,
+ },
+ },
+ "type": "text",
+ "value": "Heading Two",
+ },
+ ],
+ "data": Object {
+ "hProperties": Object {
+ "id": "Heading-Two",
+ },
+ "htmlAttributes": Object {
+ "id": "Heading-Two",
+ },
+ "id": "Heading-Two",
+ },
+ "depth": 2,
+ "position": Position {
+ "end": Object {
+ "column": 15,
+ "line": 4,
+ "offset": 30,
+ },
+ "indent": Array [],
+ "start": Object {
+ "column": 1,
+ "line": 4,
+ "offset": 16,
+ },
+ },
+ "type": "heading",
+}
+`;
+
+exports[`gatsby-remark-autolink-headers maintain case of markdown header for id 3`] = `
+Object {
+ "children": Array [
+ Object {
+ "data": Object {
+ "hChildren": Array [
+ Object {
+ "type": "raw",
+ "value": "",
+ },
+ ],
+ "hProperties": Object {
+ "aria-hidden": true,
+ "class": "anchor",
+ },
+ },
+ "title": null,
+ "type": "link",
+ "url": "#Heading-Three",
+ },
+ Object {
+ "position": Position {
+ "end": Object {
+ "column": 18,
+ "line": 6,
+ "offset": 49,
+ },
+ "indent": Array [],
+ "start": Object {
+ "column": 5,
+ "line": 6,
+ "offset": 36,
+ },
+ },
+ "type": "text",
+ "value": "Heading Three",
+ },
+ ],
+ "data": Object {
+ "hProperties": Object {
+ "id": "Heading-Three",
+ },
+ "htmlAttributes": Object {
+ "id": "Heading-Three",
+ },
+ "id": "Heading-Three",
+ },
+ "depth": 3,
+ "position": Position {
+ "end": Object {
+ "column": 18,
+ "line": 6,
+ "offset": 49,
+ },
+ "indent": Array [],
+ "start": Object {
+ "column": 1,
+ "line": 6,
+ "offset": 32,
+ },
+ },
+ "type": "heading",
+}
+`;
diff --git a/packages/gatsby-remark-autolink-headers/src/__tests__/index.js b/packages/gatsby-remark-autolink-headers/src/__tests__/index.js
index 12bc31da03a73..bc68ddf20a7de 100644
--- a/packages/gatsby-remark-autolink-headers/src/__tests__/index.js
+++ b/packages/gatsby-remark-autolink-headers/src/__tests__/index.js
@@ -127,4 +127,23 @@ describe(`gatsby-remark-autolink-headers`, () => {
expect(node.data.id).toBeDefined()
})
})
+
+ it(`maintain case of markdown header for id`, () => {
+ const markdownAST = remark.parse(`
+# Heading One
+
+## Heading Two
+
+### Heading Three
+ `)
+ const maintainCase = true
+
+ const transformed = plugin({ markdownAST }, { maintainCase })
+
+ visit(transformed, `heading`, node => {
+ expect(node.data.id).toBeDefined()
+
+ expect(node).toMatchSnapshot()
+ })
+ })
})
diff --git a/packages/gatsby-remark-autolink-headers/src/index.js b/packages/gatsby-remark-autolink-headers/src/index.js
index 2c8a332c1bfb2..e65e3b4d1fc1f 100644
--- a/packages/gatsby-remark-autolink-headers/src/index.js
+++ b/packages/gatsby-remark-autolink-headers/src/index.js
@@ -12,11 +12,14 @@ function patch(context, key, value) {
const svgIcon = ``
-module.exports = ({ markdownAST }, { icon = svgIcon, className = `anchor` }) => {
+module.exports = (
+ { markdownAST },
+ { icon = svgIcon, className = `anchor`, maintainCase = false }
+) => {
slugs.reset()
visit(markdownAST, `heading`, node => {
- const id = slugs.slug(toString(node))
+ const id = slugs.slug(toString(node), maintainCase)
const data = patch(node, `data`, {})
patch(data, `id`, id)