Vuepress 2 theme

Extends @vuepress/theme-default from vuepress 2 (2.0.0-rc.9 currently)

Install

npm install @its2easy/vuepress2-theme --save

import vuepress2Theme from '@its2easy/vuepress2-theme';
import {defineUserConfig} from 'vuepress';
export default defineUserConfig({
    theme: vuepress2Theme({
        DefaultThemeOptions, // https://ecosystem.vuejs.press/themes/default/config.html
        ThemeData<Vuepress2ThemeLocaleData>,
    }),
});

Prerequisites

Node v18 for project build, maybe node v20.

Development

npm run dev to serve the documentation site in the local server (theme and local docs)

npm run build to build production version (of the docs)

npm run preview run local server with the build project

Images

Relative to docs/.vuepress/public/:

![Image alt](/images/heli/image.jpg 'Image caption')

Relative to the current markdown file:

![An image](./image.png 'Image caption')

The first part ([Image alt]) becomes an image alt attribute, the last part ("Image caption") becomes an image title attribute and the content of <figcaption> below the image.

Markdown image with path alias is not allowed in the v2 of vuepress, but it's still working with img tag inserted manually:

<figure>
    <img src="@images/image.jpg" title="Title" />
    <figcaption>Title</figcaption>
</figure>

Styles

Theme works with @vuepress/plugin-palette (with default settings set in @vuepress/theme-default). @vuepress/plugin-palette uses .vuepress/styles/palette.scss and .vuepress/styles/index.scss (in theme consumer project). These styles have lower priority than theme styles and can be used to override @vuepress/theme-default styles.

The theme styles are in theme/styles/*

To override the theme styles, consumer project can use its own styles (with filename other than .vuepress/styles/index.scss), imported in clientConfigFile file:

// .vuepress/config.ts
export default defineUserConfig({
    clientConfigFile: path.resolve(__dirname, './clientEnhance.js'),
});

// .vuepress/clientEnhance.js
import './styles/main.scss';

Styles priority:

• .vuepress/styles/palette (app)
• @vuepress/theme-default styles (theme-default)
• .vuepress/styles/index.scss (app)
• theme/styles/index.scss (theme)
• project styles like .vuepress/styles/main.scss (app)

Additional notes

The theme is in the theme/ folder, docs/ contains demo content.

Project uses eslint, stylelint, and prettier (automatically on git commit hook). Some IDE/editors require to enable integration with linters to be able to check and fix open files.

Changelog

1.1.7

• move table caption position above the tables

2.0.0

• update design to the company design
• update to be compatible with [email protected] and @vuepress/[email protected]
• @images/ alias is not supported in markdown file
• generate <caption> for the images automatically from image title
• move most of the theme-default config options to this theme config from consumer app config
• move favicons and logos to this theme
• full typescript source code, add types
• add eslint, stylelint, prettier, lint-staged
• add tsc-watch and error sound to dev build