gatsby-remark-autolink-headers did not work correctly in a production mode and did not handle headers properly

[cangSDARM]

Description

gatsby-remark-autolink-headers did not work correctly in a production mode and did not handle headers properly

Steps to reproduce

1. Does not work correctly in a production mode

Note: In the develop mode, it works normally
this link shows the problem.

Click those links will not link to the header, but directly display a blank page. (Note, This has nothing to do with the following question, other pages also have similar problems)

code, how I handle this jumping behavior

/// Simple jump to the header
import { navigate } from "gatsby";

navigate(`${location.pathname}#${anchor}`);

2. Did not handle headers properly

Its header content is not processed correctly. (It is expected that the symbol content of all headers should be included)

[LekoArts]

Hi, thanks for the issue!

To make the process of resolving problems quicker for both sides we need you to fill out the issue template and give us a minimal reproduction:

<!--
  Please fill out each section below, otherwise, your issue will be closed. This info allows Gatsby maintainers to diagnose (and fix!) your issue as quickly as possible.

  Useful Links:
  - Documentation: https://www.gatsbyjs.com/docs/
  - How to File an Issue: https://www.gatsbyjs.com/contributing/how-to-file-an-issue/

  Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
-->

## Description

Describe the issue that you're seeing.

### Steps to reproduce

Clear steps describing how to reproduce the issue. **Please** link to a reproduction, this makes your issue _much_ easier to diagnose (seriously).

How to Make a Minimal Reproduction: https://www.gatsbyjs.com/contributing/how-to-make-a-reproducible-test-case/

### Expected result

What should happen?

### Actual result

What happened.

### Environment

Run `gatsby info --clipboard` in your project directory and paste the output here. Also name any `flags` you use inside `gatsby-config.js`.

[cangSDARM]

Hi, thanks for the issue!

To make the process of resolving problems quicker for both sides we need you to fill out the issue template and give us a minimal reproduction:

<!--
  Please fill out each section below, otherwise, your issue will be closed. This info allows Gatsby maintainers to diagnose (and fix!) your issue as quickly as possible.

  Useful Links:
  - Documentation: https://www.gatsbyjs.com/docs/
  - How to File an Issue: https://www.gatsbyjs.com/contributing/how-to-file-an-issue/

  Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
-->

## Description

Describe the issue that you're seeing.

### Steps to reproduce

Clear steps describing how to reproduce the issue. **Please** link to a reproduction, this makes your issue _much_ easier to diagnose (seriously).

How to Make a Minimal Reproduction: https://www.gatsbyjs.com/contributing/how-to-make-a-reproducible-test-case/

### Expected result

What should happen?

### Actual result

What happened.

### Environment

Run `gatsby info --clipboard` in your project directory and paste the output here. Also name any `flags` you use inside `gatsby-config.js`.

Sorry I did not fill in the issue in a fixed format!
But my content is shorter and more semantic.
If necessary, the following is an issue strictly in accordance with the format

[cangSDARM]

Description

gatsby-remark-autolink-headers:

1. did not work correctly in a production mode
2. did not handle headers properly

Steps to reproduce

1. Does not work correctly in a production mode

this link shows the problem.

Click those links will not link to the header, but directly display a blank page. (Note, This has nothing to do with the following question, other pages also have similar problems)

code, how I handle this jumping behavior

/// Simple jump to the header
import { navigate } from "gatsby";

navigate(`${location.pathname}#${anchor}`);

2. Did not handle headers properly
   
   Its header content is not processed correctly.

Expected result

1. Click those links that should link to the header/anchor, rather than display a blank page. (Worked in develop mode)
2. It is expected that the symbol content of all headers should be included

Actual result

1. Showing a blank page. (Worked in develop mode, but not in production mode)
2. Not included the "?" symbol.

Environment

> gatsby info --clipboard
  System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
  Binaries:
    Node: 14.16.1 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.12 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.9.4
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.59)
  npmPackages:
    gatsby: ~3.8.0 => 3.8.0
    gatsby-plugin-image: ~1.8.0 => 1.8.0
    gatsby-plugin-manifest: ~3.8.0 => 3.8.0
    gatsby-plugin-material-ui: ~3.0.1 => 3.0.1
    gatsby-plugin-mdx: ~1.4.0 => 1.4.0
    gatsby-plugin-offline: ~3.7.0 => 3.7.1
    gatsby-plugin-react-helmet: ~4.6.0 => 4.6.0
    gatsby-plugin-sharp: ~3.8.0 => 3.8.0
    gatsby-remark-autolink-headers: ~4.5.0 => 4.5.0
    gatsby-remark-images: ~5.5.0 => 5.5.0
    gatsby-remark-katex: ~3.1.26 => 3.1.26
    gatsby-remark-prismjs: ~3.3.36 => 3.3.36
    gatsby-source-filesystem: ~3.8.0 => 3.8.0
    gatsby-transformer-sharp: ^3.8.0 => 3.8.0
  npmGlobalPackages:
    gatsby-cli: 3.3.0

resolve: `gatsby-remark-autolink-headers`,
            options: {
              maintainCase: true,
              isIconAfterHeader: true,
            },

no flags in gatsby-config.js

[LekoArts]

Regarding your two bullet points:

1. You use a pathPrefix of /blog and when you use the navigate function your resulting URL is: https://cangsdarm.github.io/blog/blog/archive/encryptingSaveGames/#Why?

   So you have a double /blog/blog. There's no need to use navigate as the normal <a> tag can already do what you want. Do have the same links as the id that are set on the headings you should access the tableOfContents field on the mdx node. You can find articles like these when searching for "Gatsby ToC": https://desktopofsamuel.com/how-to-create-a-scroll-tracking-table-of-content-in-gatsby/ or https://scottspence.com/2020/02/13/smooth-scroll-toc-gatsby/ or https://johno.com/mdx-table-of-contents-components-in-gatsby

2. This is working as expected. It removes the ? on purpose. And there is no harm in it missing. If you absolutely want to have it in there you can activate the enableCustomId option of gatsby-remark-autolink-headers and set it yourself.

[cangSDARM]

Thank you for your patient reply, it is very helpful!
For the second point, in my personal opinion, can it be mentioned in the document? For those who follow, this should be useful