`href` is missing in the section heading

Current behavior

There is no href for headings, and there are warnings:

Warning: Failed prop type: The prop `href` is marked as required in `SectionHeadingRenderer`, but its value is `undefined`.

<!-- the current output html for the heading -->
<h1 id="components" class="rsg--heading-14 rsg--heading1-15">
  <a class="rsg--sectionName-11">Components</a>
</h1>

To reproduce

mkdir no-heading-href-repro
cd no-heading-href-repro
yarn init -y
yarn add vue vue-loader vue-styleguidist vue-template-compiler webpack
echo '
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
  sections: [
    {
      name: "Components",
      components: path.resolve(__dirname, "./src/components/*.vue"),
    },
  ],
  webpackConfig: {
    module: { rules: [{ test: /\.vue$/, loader: "vue-loader" }] },
    plugins: [new VueLoaderPlugin()],
  },
};
' > styleguide.config.js
mkdir -p src/components
echo '
<template>
  <div>Foo</div>
</template>

<script>
export default {
  name: "Foo",
};
</script>
' > src/components/Foo.vue
yarn vue-styleguidist server --open

Expected behavior

There should be a href for the heading “Components”.

Environments

• vue-styleguidist: 4.32.2

[elevatebart]

I will definitely look into it.

[ikatyang]

Sorry I did not provide the actual usecase, I thought the minimal repro (for the href issue) should be enough, but it seems the minimal repro is not suitable for the case you mentioned above. Here’s the more appropriate repro modified from the initial repro:

 // styleguide.config.js
 const path = require("path");
 const { VueLoaderPlugin } = require("vue-loader");
 module.exports = {
   pagePerSection: true,
   sections: [
     {
       name: "Components",
+      sectionDepth: 1,
+      sections: [
+        {
+          name: "My Heading",
           components: path.resolve(__dirname, "./src/components/*.vue"),
+        },
+      ],
     },
   ],
   webpackConfig: {
     module: { rules: [{ test: /\.vue$/, loader: "vue-loader" }] },
     plugins: [new VueLoaderPlugin()],
   },
 };

If I click the “My Heading” in the sidebar, it’ll navigate to the “My Heading” section with url updated (http://localhost:6060/#/Components/My%20Heading). I thought clicking the section heading should behave the same as clicking the corresponding link in the sidebar, which brings us to the clicked section with the url updated, but the “My Heading” section heading is now a <span> instead of an <a>, is this behavior expected?