https://github.com/aaronlamz/navpress
Easy navigation generator
https://github.com/aaronlamz/navpress
nav nav-generator navigation-generator vuejs
Last synced: 3 months ago
JSON representation
Easy navigation generator
- Host: GitHub
- URL: https://github.com/aaronlamz/navpress
- Owner: aaronlamz
- License: mit
- Created: 2024-07-24T13:09:39.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-13T09:29:21.000Z (10 months ago)
- Last Synced: 2025-08-09T11:48:38.199Z (3 months ago)
- Topics: nav, nav-generator, navigation-generator, vuejs
- Language: JavaScript
- Homepage: https://aaronlamz.github.io/navpress
- Size: 625 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - navpress - NavPress is a CLI tool for generating static navigation websites. It allows you to quickly build a navigation site through a configuration file. (Components & Libraries / UI Components)
- fucking-awesome-vue - navpress - NavPress is a CLI tool for generating static navigation websites. It allows you to quickly build a navigation site through a configuration file. (Components & Libraries / UI Components)
- awesome-vue - navpress - NavPress is a CLI tool for generating static navigation websites. It allows you to quickly build a navigation site through a configuration file. (Components & Libraries / UI Components)
README
# NavPress
[](https://www.npmjs.com/package/navpress)
[](https://github.com/aaronlamz/navpress/actions/workflows/deploy.yml)
**NavPress** is a CLI tool for generating static navigation websites. It allows you to quickly build a navigation site through a configuration file, supporting both development and production modes.
## Features
- Simple Configuration: Define your navigation and sidebar through a single configuration file.
- Supports both development and production builds.
- Built-in SSR support, automatically generating static HTML files.
- Integrates with Tailwind CSS and Vue.js.
## Preview
[View Demo](https://aaronlamz.github.io/navpress/)
## Installation
You can install `navpress` globally via npm:
```bash
npm install -g navpress@latest
```
Or install it locally in your project:
```bash
npm install navpress@latest --save-dev
```
## Quick Start
### Fork repository and deploy to gihub pages
1. Fork this repository by clicking the "Fork" button at the top right corner of this page.
2. Go to your forked repository's settings on GitHub.Scroll down to the "GitHub Pages" section.
3. Under "Source", select the `gh-pages` branch from the dropdown menu.
4. Click "Save".
After a few minutes, your site should be available at `https://.github.io/navpress/`.
## Customize Development
### 1. Create a Configuration File
Create a `navpress.config.js` file in the root directory of your project and define your navigation and sidebar:
```javascript
export default {
title: 'My Static Site Generator',
description: 'A simple static site generator with configurable navigation',
logo: '/navpress/images/logo.svg',
github: 'https://github.com/aaronlamz/navpress',
base: '/navpress/',
meta: {
title: 'My Custom Title',
description: 'This is a description for SEO.',
keywords: 'static site, generator, SEO',
author: 'Author Name',
},
sidebar: [
{
text: 'Home',
link: '/',
items: [
{
text: 'Group 1',
link: '#group1',
items: [
{ text: 'Child 1', link: 'https://example.com/child1' },
{ text: 'Child 2', link: 'https://example.com/child2' },
{ text: 'Child 2', link: 'https://example.com/child2' },
],
},
{
text: 'Group 2',
link: '#group2',
items: [
{ text: 'Child 3', link: 'https://example.com/child3' },
{ text: 'Child 4', link: 'https://example.com/child4' },
{ text: 'Child 2', link: 'https://example.com/child2' },
],
},
{
text: 'Group 3',
link: '#group3',
items: [
{ text: 'Child 3', link: 'https://example.com/child3' },
{ text: 'Child 4', link: 'https://example.com/child4' },
],
},
{
text: 'Group 4',
link: '#group4',
items: [
{ text: 'Child 3', link: 'https://example.com/child3' },
{ text: 'Child 4', link: 'https://example.com/child4' },
],
},
],
},
{
text: 'About',
link: '/about',
expanded: false,
items: [
{
text: 'Group A',
link: '#groupA',
items: [{ text: 'Child A1', link: 'https://example.com/childA1' }],
},
],
},
],
}
```
### 2. Start the Development Server
Start the development server with the following command:
```bash
navpress dev
```
The development server will automatically open in your browser and display the navigation page.
### 3. Build the Static Website
Build the static website with the following command:
```bash
navpress build
```
The built static files will be output to the `dist` directory. You can deploy the `dist` directory to any static web hosting service.
## Configuration Options
### navpress.config.js
- `title`: The website title.
- `description`: The website description.
- `sidebar`: The configuration for the sidebar, an array that can nest multiple groups.
## Contribution
We welcome contributions of any kind! If you find bugs or have new ideas, please submit an [Issue](https://github.com/aaronlamz/navpress/issues) or open a [Pull Request](https://github.com/aaronlamz/navpress/pulls).
## License
[MIT](https://github.com/aaronlamz/navpress/blob/main/LICENSE)