fix: strip html from meta title, if present; fix #688

[roberthamel]

closes #688

Summary

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Docs
• Build-related changes
• Other, please describe:

If changing the UI of default theme, please provide the before/after screenshot:

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)

You have tested in the following browsers: (Providing a detailed version will be better.)

• Chrome
• Firefox
• Safari
• Edge
• IE

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature
• Related documents have been updated
• Related tests have been updated

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

Other information:
When the Badge component is used in an h1 tag that will be used as the site's meta title, the html will no longer display.

[ulivz]

Cool~

This is my usage:

1. Usage

# Introduction <Badge text="beta" type="warn"/>

2. UI

3. Meta snapshot

Since I cannot reproduce it. could you provide more details as above. thanks.

[roberthamel]

The scenario I am using is this:

# <Badge text="beta" type="warn"/> Introduction

I am unclear as to why it was designed to only strip from the end. My understanding is that the title of the document should not have any markup in it. If the title were to specifically need it, it could be described in different ways without the markup.

[roberthamel]

Looking through other Vue documentation sites, I am seeing some places where markup is used in a heading.

For example, this page contains a couple of headers containing markup.

In this case, having a badge before the header text would not be ideal for the theme. Since I can eject the theme and override it, that's what I chose to do. The document title is internal to the vuepress-cli.

This pr would not affect the document head for that specific page since all markdown headings are not contained in h1 tags.

I will continue to research other scenarios where this pr would not be ideal.

[ulivz]

@roberthamel Let me reply to your questions one by one:

1. Q: I am unclear as to why it was designed to only strip from the end.

   A: Since the initial user case is feature name + status, so it's intended to only strip from the end. But we can also support strip from the left., the reason is in 2.

2. Q: Why does markup in other Vue docs work?

   A: There are two scenarios:

// #1 Doesn't have "`" wrapped, output will be: `b`
<a> b

// #2 Have "`" wrapped, output will be: `<cpde>a<code> b`
`<a>` b

For 1, the markup will be considered as the real HTML, we don't know its output at compile time, so it should be stripped from the header, while in 2, the markup was wrapped in a inline code identifiers, so it will be considered as the header's content.

And this PR wasn't a real fix, it only corrects the title at runtime, but what we should do is to make it right at compile time. so I will work for it (support strip HTML from the left) by myself. If you have interest, you can check out our test case of parsing headers and also our changelog to get more about the background.

[roberthamel]

I have closed the issue related to this. I like your explanation and direction with this. I would like to help make this happen. I definitely need more practice understanding the depth of it. I can close this pull request, if you want.