# `vuepress-theme-wb2`

[![npm version](https://img.shields.io/npm/v/vuepress-theme-wb2)](https://www.npmjs.com/package/vuepress-theme-wb2)
[![GitHub license](https://img.shields.io/github/license/wissemb11/vuepress-theme-wb2)](https://github.com/wissemb11/vuepress-theme-wb2)

`vuepress-theme-wb2` is a custom VuePress 2 theme designed to seamlessly integrate the **WBC component library** into your documentation site. It provides dynamic layouts, multi-language support, and RTL/LTR switching, all configurable via your VuePress `config.js` file.

# `vuepress-theme-wb2` Documentation

### A custom VuePress 2 theme featuring WBC components for a seamless documentation experience.

This project is a powerful and highly configurable VuePress 2 theme designed to integrate a custom component library (WBC) into your documentation. It provides a modern, consistent, and brand-aligned look and feel, with dynamic layouts and robust support for internationalization. This theme is the core technical component of the `wb-press2` scaffolding tool, providing a powerful foundation for building beautiful documentation sites.

---

## ✨ Core Features

* **WBC Component Integration:** This theme replaces standard VuePress UI elements such as the `Navbar` and `Sidebar` with components from your custom **WBC component library**. This ensures a unified visual identity across your project.
* **Dynamic Layouts:** All layout elements are highly configurable via your `config.js` file or on a per-page basis using Markdown frontmatter. This gives you complete control over the structure without needing to modify the theme's core code.
* **Multi-Language & RTL Support:** The theme provides built-in, ready-to-use functionality for multi-language sites using VuePress's `locales` option, including support for Right-to-Left (RTL) languages.
* **Extensible & Robust:** Built on the popular `vuepress-theme-reco`, this theme inherits a wide range of features and a stable foundation, making it both powerful and reliable.

## 📦 Installation

To use this theme in your VuePress 2 project, you must install it along with `vuepress-theme-reco`, which serves as its base. You can find the package on npm at [https://www.npmjs.com/package/vuepress-theme-wb2](https://www.npmjs.com/package/vuepress-theme-wb2).

```bash
# Using npm
npm install vuepress-theme-wb2 vuepress-theme-reco

# Using yarn
yarn add vuepress-theme-wb2 vuepress-theme-reco
```

## ⚙️ Configuration

`vuepress-theme-wb2` is configured through your project's `.vuepress/config.js` file. The theme extends `vuepress-theme-reco`, so you have access to all of its configuration options in addition to the custom ones provided by `wb2`.

### Basic `config.js`

To activate the theme, simply set it as an alias in your `config.js`.

```javascript
import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  theme: 'wb2',
  // ... other configs
})
```

### Theme-Specific Options

The custom behavior of the theme is controlled via the `themeConfig` object. This is where you configure the WBC components and other unique layout options.

## 🚀 Get Started

The easiest way to start a new project with this theme is to use the `wb-press2` scaffolding tool. It sets up a new VuePress project with `vuepress-theme-wb2` pre-configured for you.

```bash
npx create-wb-press2 my-docs-site
```

## 👨‍💻 About the Developer

This theme was developed and is maintained by **Wissem Boughamoura**.
* **Website:** [https://www.wi-bg.com](https://www.wi-bg.com)
* **Email:** wissemb11@gmail.com

## 🔗 Resources & Links

* **GitHub Repository:** [https://github.com/wissemb11/vuepress-theme-wb2](https://github.com/wissemb11/vuepress-theme-wb2)
* **npm Package:** [https://www.npmjs.com/package/vuepress-theme-wb2](https://www.npmjs.com/package/vuepress-theme-wb2)
* **Official Documentation:** You are currently viewing this documentation site, which is a live example of the theme in action!