Mister-Hope
commented
1 year ago I thin you are talking about missing headers, then we need a minimal reproduction with that file content
Closed GreenImp closed 1 year ago
Mister-Hope
commented
1 year ago I thin you are talking about missing headers, then we need a minimal reproduction with that file content
github-actions[bot]
commented
1 year ago Hello @GreenImp. Please provide a minimal reproduction using a GitHub repository or v2.vuepress.vuejs.org/new. Issues marked with need reproduction will be closed if they have no activity within 7 days.
GreenImp
commented
1 year ago I've managed to get a reproduction repo set up: https://github.com/GreenImp/vuepress-dice-roller-test
You can reproduce the issue by running docs:dev and going to the Modifiers section; http://localhost:8080/guide/notation/modifiers.html
I have found that the issue only occurs when I have the diceRollerPlugin enabled in the Vuepress config.js. If I comment it out, everything works okay.
The diceRollerPlugin is a plugin I have written, which extends the markdown plugin. It reads markdown like this:
::: roll :::
// or
::: roll 6d10<=4 :::And converts it into a VueJs component for rolling dice. the roll part is the keyword that the plugin picks up. The 6d10<=4 is optional.
It seems that it has issues rendering any headings that are directly after a ::: roll ... :::
If I remove the ::: roll ... ::: directly before the heading, it then renders the heading in the menu.
If you look at the menu, the last item that shows up under the "Modifiers" header is "Target success / Dice pool ({cp})".
If you go to /docs/guide/notation/modifiers.md, line 434, and remove the ::: roll 6d10<=4 ::: just above the ## Target Failures / Dice Pool (f{cp}) heading, then that heading shows correctly.
I can't see a reason that the plugin would stop the menu from rendering correctly, so hopefully you're able to help. I'm not certain if it's a problem with my plugin, or with Vuepress.
For reference, the Vuepress plugin is: https://github.com/dice-roller/vuepress-plugin And internally, it uses: https://github.com/dice-roller/vue
GreenImp
commented
1 year ago Another update;
In my Vuepress Plugin, I am using extendsMarkdown to render my component:
It seems to be a problem with the md.use() call. Specifically, with the name argument, 'roll':
md.use(markdownItContainer, 'roll', { render });If I change roll, to something else (e.g. 'rolls'), and change the calls in the markdown to match, then it works;
::: rolls 4d6 :::Is the name roll somehow breaking the things?
Mister-Hope
commented
1 year ago I have no interest without a minimal reproduction, but you should be extra carefull whether you write a correct plugin.
If your plugin does not generate everything correctly, but doing the following, the all headings are expected being omitted :
<div class="dice-container">
<dice-component />
...
<h2 xxx>xxx</h2>
...
<!-- auto generated close tag by markdown-it -->
</div>If you do think something is not working, provide a simple minimal reproduction with default-theme, your plugin, and only the pages which is not working well. New issue or updating this thread are both ok.
GreenImp
commented
1 year ago I've updated the repo and so it only has a single readme.md file now.
I also think that I've figured out what part of the issue is;
The markdown-it-container plugin expects the closing code fence to be on a different line to the start one. It doesn't understand inline code fences.
So, when doing this:
::: roll :::It thinks it hasn't been closed, and then auto-closes the tag at the end of the document.
Whereas, if I move the closing fence to the next line down, then it works:
::: roll
:::There is a ticket raised for the markdown-it-container, but the devs have dismissed it as not a bug. However, I think the spec suggests otherwise: https://spec.commonmark.org/0.18/#example-95
However, all of that being said, I'm not sure why it should be an issue in this situation, because my plugin doesn't have a closing tag, so the markup should still be valid. So I'm not sure if this is an issue with Markdown it, or Vuepress, or if I'm misunderstanding how it should work.
My render() method passed to the markdown-it-container basically does this:
const render = (tokens, idx) => {
const { nesting } = tokens[idx];
if (nesting === 1) {
// opening tag - self closing
return `<DiceRoller />`;
}
// closing tag
return '';
};So there is no opening tag that needs closing, and when it auto-closes at the end of the document, it should just output an empty string anyway.
You can also see that the DiceRoller component that it loads has all of the correct closing tags and valid markup: https://github.com/dice-roller/vue/blob/dbca48140dbcf1b7335488b1853e0c1f5d34b600/src/components/DiceRoller.vue
Mister-Hope
commented
1 year ago You don't understand example 95 at all, that has nothing related to fence.
The container is acting expected.
Auto closing the token at last means all content later is inside your dice token, so they are regarded as ui headings instead of documentation heading (nesting depths must be 0)
I think I explained everything. New discussion if you jave further problems.
Description
I've noticed a strange issue when upgrading from v2.0.0-beta.51 to v2.0.0-beta.62, where some of the menu items in the sidebar are missing.
This is what it should look like (In v2.0.0-beta.51): :heavy_check_mark:
And this is how it looks in v2.0.0-beta.62: :negative_squared_cross_mark:
I can't see anything wrong with the config or any other settings, and it doesn't appear to be a sidebar depth issue, it just seems to randomly be missing items at all levels.
Here is the config file: https://github.com/dice-roller/documentation/blob/main/docs/.vuepress/config.js
If I revert the version back to v2.0.0-beta.51, it shows all of the items as expected again. I've tested at several different versions, and the issue seems to have been introduced at v2.0.0-beta.52.
You can re-produce it by using the following repo, and just changing the version of vuepress and the plugins to v2.0.0-beta.62.
Do you have any idea what might be wrong?
Reproduction
https://github.com/GreenImp/vuepress-dice-roller-test
Used Package Manager
npm
System Info