npmpackage.info

Gathering detailed insights and metrics for vite-pages-theme-basic

Other packages similar to vite-pages-theme-basic

@jtsang/vite-pages-theme-basic

3.1.2

**This theme is deprecated. Please use vite-pages-theme-doc instead.**

vite-pages-theme-basic

A vite framework for building react app. Especially suitable for document site and demos/playgrounds of react components.

3.1.4

467

MIT

TypeScript

3.37 MB

12,865

Installations

npm install vite-pages-theme-basic

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

16.15.0

NPM Version

8.5.5 Score

Supply Chain

98.8

Quality

75.7

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

7

Total

93

Closed

17

Merged

69

Issues

Open

18

Total

87

Closed

69

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View All 35 Contributors

Languages

TypeScript

MDX

CSS

Less

JavaScript

HTML

SCSS

Shell

TypeScript (71.38%)

MDX (16.02%)

CSS (6.27%)

Less (2.94%)

JavaScript (2.58%)

HTML (0.78%)

SCSS (0.02%)

Shell (0.02%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

vitejs

Download Statistics

Total Downloads

12,865

Last Day

Last Week

Last Month

120

Last Year

1,441

GitHub Statistics

MIT License

467 Stars

663 Commits

70 Forks

5 Watchers

29 Branches

35 Contributors

Updated on Feb 12, 2025

Maintainers

Package Meta Information

Latest Version

3.1.4

Package Id

vite-pages-theme-basic@3.1.4

Unpacked Size

3.37 MB

Size

791.11 kB

File Count

NPM Version

8.5.5

Node Version

16.15.0

Total Downloads

Cumulative downloads

Total Downloads

12,865

Last Day

Compared to previous day

Last Week

145.5%

Compared to previous week

Last Month

3.4%

120

Compared to previous month

Last Year

1,441

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Basic theme

This theme is deprecated. Please use vite-pages-theme-doc instead.

vite-pages-theme-basic provides a nice theme. It should satisfy most users' needs. This document site is powered by this theme.

How to use

You should config the theme in _theme.tsx:

1// _theme.tsx
2import React from 'react'
3import { createTheme } from 'vite-pages-theme-basic'
4
5export default createTheme({
6  topNavs: [
7    { text: 'index', path: '/' },
8    { text: 'Vite', href: 'https://github.com/vitejs/vite' },
9  ],
10  logo: 'Vite Pages',
11  // Other configs...
12})

Here is a complete example.

Auto menu generation

Basic theme can generation a side navigation menu automatically, based on the pages information.

You can control the label and sorting of the nav menu, by notating these page static data:

title
sort (default value is 1)

For markdown pages, notate the static data like this:

1---
2title: Basic Theme
3order: 0.5
4---
5
6markdown content...

For jsx/tsx pages, notate the static data like this:

1/**
2 * @title page1 title
3 * @sort 1
4 */
5
6// js code....

Page search

Basic theme also generate a search box automatically. It help readers to filter pages by their titles. As an example, you can find the search box at the topbar of this document site.

You can turn off the auto-generated search box in the theme configs. You can also customize the topbar operations area.

Theme configs

The createTheme exported by vite-pages-theme-basic accepts these options:

1interface Option {
2  /**
3   * Take fully control of side nav menu.
4   */
5  sideMenuData?: SideMenuData[]
6  /**
7   * Navigation menu at top bar.
8   */
9  topNavs?: TopNavData[]
10  /**
11   * Logo area at top bar.
12   */
13  logo?: React.ReactNode
14  /**
15   * Operation area at top bar.
16   */
17  topbarOperations?: React.ReactNode
18  /**
19   * Footer area.
20   */
21  footer?: React.ReactNode
22  /**
23   * Enable search.
24   * @default true
25   */
26  search?: boolean
27}
28
29export type SideMenuData = { text: string; path: string }
30
31export type TopNavData =
32  | {
33      text: string
34      /**
35       * The url.
36       * @example 'https://www.google.com/'
37       */
38      href: string
39    }
40  | {
41      text: string
42      /**
43       * The path in the current webapp.
44       * @example '/posts/hello-world'
45       */
46      path: string
47    }

Fully theme customization

If the basic theme doesn't satisfy your need, you can create your own theme.

Contributions to the basic theme are always welcomed.

No vulnerabilities found.

No security vulnerabilities found.

Other packages similar to vite-pages-theme-basic

vite-pages-theme-basic

Installations

Developer Guide

Yes

CommonJS

16.15.0

8.5.5

Score

Pull Requests

7

93

17

69

Issues

18

87

69

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

12,865

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Basic theme

How to use

Auto menu generation

Page search

Theme configs

Fully theme customization