[Feature request] New Default Theme for VuePress 2

pengzhanbo commented 1 month ago

Clear and concise description of the problem

We are in the process of creating a new default theme for the VuePress 2, which will replace the old default theme, with the old theme being renamed to @vuepress/theme-legacy.

We will list the updated content in this issue, discussing the differences between old and new themes, compatibility solutions, and other updates related to vuepress upstream and downstream.

Features

The new theme will follow the same style as the default theme of VitePress.

Differences

Configuration

SiteTtitle and logo: delete home / logo / logoDark / logoAlt, use siteTitle / logo / logoLink instead.
Nav:
- Change the type to NavItem[], children was deprecated, use items instead
- delete repo, use socialLinks instead
- delete colorMode / colorModeSwitch, use appearance instead
- support local nav
Sidebar:
- rename options value auto to structure
- children was deprecated, use items instead
DocFooter: latestUpdated support lastUpdatedFormatOptions
Code Block: Use shiki as the default highlighting. support line highlighting, colors diff errors and warning focus
containers: support tip / info / warning / danger / important, and github alerts.

Frontmatter

Replace layout with pageLayout in VitePress, as layout is already used for other purposes in VuePress.
Now you can use the outline to control the display levels of the TOC within the page. etc. [2, 3]

[!NOTE] More content will continue to be added during the development period.

Alternative

No response

Additional context

No response

Mister-Hope commented 1 month ago

the new theme should support https://theme-hope.vuejs.press/guide/layout/sidebar.html#generate-sidebar-from-file-structure

pengzhanbo commented 1 month ago

the new theme should support theme-hope.vuejs.press/guide/layout/sidebar.html#generate-sidebar-from-file-structure

Implemented in the new theme.

Mister-Hope commented 1 month ago

Q1

Why is some contents being removed in templateBuild, when darkmode is meant to be enabled, won't the screen flash?

pengzhanbo commented 1 month ago

Q1

Why is some contents being removed in templateBuild, when darkmode is meant to be enabled, won't the screen flash?

It does not flicker, when the appearance is set to force-dark, an inline script ;document.documentElement.classList.add('dark') will be inserted into the HTML;

for other values, it will be inserted differently：

;(() => {
  const preference = localStorage.getItem('vuepress-color-scheme') || fallbackPreference
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
  if (!preference || preference === 'auto' ? prefersDark : preference === 'dark')
    document.documentElement.classList.add('dark')
})()

see node/config/resolvePageHead.ts

Mister-Hope commented 1 month ago

If the default theme is based on CSS, then we can try if we can use lightning CSS.

pengzhanbo commented 1 month ago

If the default theme is based on CSS, then we can try if we can use lightning CSS.

While I would like to use lightning CSS, it may cause issues if the theme's users are using other plugins that contain scss.

github-actions[bot] commented 3 weeks ago

This issue is marked as stale because it has not had recent activity. Issues marked with stale will be closed if they have no activity within 7 days.

vuepress / ecosystem