Description of the problem:

When using position: relative in the header, the link in the previous line is blocked and cannot be clicked.

Demo

use position: relative

<a href="www.baidu.com">baidu</a>
<h2 className='h2' >header use relative</h2>

.h2 {
    color: #213547;
    box-sizing: border-box;
    position: relative; /* <- this line */
    margin: 3rem 0 1.25rem;
}

.h2:hover {
  background-color: red;
}

h2::before {
  display: block;
  content: ' ';
  height: 70px;
  margin-top: -70px;
}

not use position: relative

<a href="www.baidu.com">baidu</a>
<h2 className='h2' >header not use relative</h2>

.h2 {
    color: #213547;
    box-sizing: border-box;
    /* position: relative;   <- this line */
    margin: 3rem 0 1.25rem;
}

.h2:hover {
  background-color: red;
}

h2::before {
  display: block;
  content: ' ';
  height: 70px;
  margin-top: -70px;
}

Snapshot

Config

export default {
  theme: "vt",
  themeConfig: {
    nav: [
      { text: "Guide", link: "/guide/" },
      { text: "API", link: "/api/" },
      { text: "Left1", link: "/guide/api-page", position: "left" },
      { text: "Left2", link: "/guide/configuration", position: "left" },
    ],
  },
};

Desktop

Mobile

What problem does this feature solve?

Position the sidebar links on the left.

What does the proposed API look like?

// .vuepress/config.ts
export default {
    nav: [
      { text: "Left1", link: "/guide/api-page", position: "left" },
      { text: "Left2", link: "/guide/configuration", position: "left" },
    ],
 }

How should this be implemented in your opinion?

N/A

Are you willing to work on this yourself?

Yes

Currently in api page, vt will extract all h2 and h3 headers by default.But sometimes we don't want the h3 header and there is no custom config.The pr is to solve the problem.

feature

desc

add status bar component and only exist in home page

config

.vuepress/config.ts

defineConfig((ctx) => {
        themeConfig: {
            statusText: "placeholder"
    }
})

preview

normal

dark mode

Before & After

1792px (Mac 15')

| # | Snapshot | |---|---| | Before | | | After | |

1548px

| # | Snapshot | |---|---| | Before | | | After | |

1374px

| # | Snapshot | |---|---| | Before | | | After | |

1198px

| # | Snapshot | |---|---| | Before | | | After | |

959px

| # | Snapshot | |---|---| | Before | | | After | |

Summary

To verify the compatibility of this theme, this pull request migrate VuePress's official documentation to VT with minimal cost.

Preview link: https://vuepress-docs-git-feat-migrate-vuepress-docs-472590061.vercel.app/

Summary

1. Add gradient and height transition for status bar;
2. Increase statusbar's height.

Demo

https://user-images.githubusercontent.com/23133919/200727603-950834c3-9422-4730-9c4d-9fd76776fd45.mov

Step to reproduce

1. Write headers:

## api.fooBar

2. Restart dev server and search fooBar and you cannot get any search suggestions, but only api.fooBar can give you the result.

debug Error: Cannot find module 'inquirer'
Require stack:
- /.../[email protected]/node_modules/vuepress-theme-vt/plugins/translate/index.js
- /.../@[email protected]/node_modules/@vuepress/shared-utils/lib/moduleResolver.js
- /.../@[email protected]/node_modules/@vuepress/shared-utils/lib/index.js
- /.../@[email protected]/node_modules/@vuepress/markdown/lib/highlight.js
- /.../@[email protected]/node_modules/@vuepress/markdown/index.js
- /.../@[email protected]/node_modules/@vuepress/core/lib/node/createMarkdown.js
- /.../@[email protected]/node_modules/@vuepress/core/lib/node/App.js
- /.../@[email protected]/node_modules/@vuepress/core/lib/index.js
- /.../[email protected]/node_modules/vuepress/lib/registerCoreCommands.js
- /.../[email protected]/node_modules/vuepress/cli.js


warning An error was encountered in plugin "/.../[email protected]/node_modules/vuepress-theme-vt/plugins/translate/index.js"

When the themeConfig property in config.js is defined as

module.exports = {
    theme: "vt",
    themeConfig: {
        enableDarkMode: true,
        repo: "https://google.com",
    },
};

the dark mode toggling switch is shown, even though the repo url is not a real repository. But when it is defined as

module.exports = {
    theme: "vt",
    themeConfig: {
        enableDarkMode: true,
    },
};

The dark mode toggling switch will be simply dissappeared.

Does the repo url definition have anything to do with the dark mode switch? I thought they were two unrelated features...

```diff
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="root"></div>
- <script src="/index-CH27MJVK.js" type="module"></script>
+ <script src="http://www.speedy.dev/index-CH27MJVK.js" type="module"></script>
</body>
</html>
```

when i use diff it generate the following result

but it renders nicely in github | vscode

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="root"></div>
- <script src="/index-CH27MJVK.js" type="module"></script>
+ <script src="http://www.speedy.dev/index-CH27MJVK.js" type="module"></script>
</body>
</html>

Question. I'm attempting to follow the docs and I'm a bit lost on typographic replacements. Can you give a little more detail on how to enable typographer? Would enabling this fix the numbered lists so that they are actually numbered. See example here of them not actually being numbered.

Last question, where do I enable the markdown-it plugins? I thought it would be in the .vuepress/config.ts file, like this:

import { ThemeConfig } from "vuepress-theme-vt";
import { defineConfig4CustomTheme } from "vuepress/config";

export = defineConfig4CustomTheme<ThemeConfig>((ctx) => ({
  theme: "vt",
  title: "Title",
  plugins: [
    [
      'HERE?'
    ]
  themeConfig: {
    enableDarkMode: true,

Thanks in advance!