Update README file
This commit is contained in:
Ahmed DCHAR
parent
2360d3d74b
commit
f932664055
175
README.md
175
README.md
@ -1,64 +1,167 @@
|
||||
# Nuxt Dashboard Template
|
||||
# Last Web Novel
|
||||
|
||||
[](https://ui.nuxt.com)
|
||||
A modern web novel reader application built with Nuxt 4, Vue 3, and TypeScript. Browse, read, and track your reading progress across multiple novels with a beautiful UI.
|
||||
|
||||
Get started with the Nuxt dashboard template with multiple pages, collapsible sidebar, keyboard shortcuts, light & dark mode, command palette and more, powered by [Nuxt UI](https://ui.nuxt.com).
|
||||
|
||||
|
||||
- [Live demo](https://dashboard-template.nuxt.dev/)
|
||||
- [Documentation](https://ui.nuxt.com/docs/getting-started/installation/nuxt)
|
||||
- 📖 **Novel Reader** - Read chapters with customizable text size, font, and theme
|
||||
- 📚 **Catalog** - Browse and search novels with advanced filtering
|
||||
- 📝 **Content Management** - Novel content from markdown files via Nuxt Content
|
||||
- 💾 **Reading History** - Track your progress and reading history locally
|
||||
- 📌 **Library** - Save novels to your personal library
|
||||
- 🎨 **Light/Dark Mode** - Theme support with Nuxt UI
|
||||
- 📱 **Responsive Design** - Mobile-friendly interface
|
||||
- ⚡ **Server API** - Nuxt Nitro API layer for data endpoints
|
||||
|
||||
<a href="https://dashboard-template.nuxt.dev/" target="_blank">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://ui.nuxt.com/assets/templates/nuxt/dashboard-dark.png">
|
||||
<source media="(prefers-color-scheme: light)" srcset="https://ui.nuxt.com/assets/templates/nuxt/dashboard-light.png">
|
||||
<img alt="Nuxt Dashboard Template" src="https://ui.nuxt.com/assets/templates/nuxt/dashboard-light.png">
|
||||
</picture>
|
||||
</a>
|
||||
## Tech Stack
|
||||
|
||||
> The dashboard template for Vue is on https://github.com/nuxt-ui-templates/dashboard-vue.
|
||||
- **Framework**: Nuxt 4 + Vue 3
|
||||
- **Language**: TypeScript
|
||||
- **UI Components**: Nuxt UI
|
||||
- **Content**: Nuxt Content (Markdown)
|
||||
- **Styling**: Tailwind CSS
|
||||
- **Database**: Drizzle ORM (optional)
|
||||
- **Package Manager**: npm
|
||||
|
||||
## Quick Start
|
||||
|
||||
```bash [Terminal]
|
||||
npm create nuxt@latest -- -t ui/dashboard
|
||||
```
|
||||
|
||||
## Deploy your own
|
||||
|
||||
[](https://vercel.com/new/clone?repository-name=dashboard&repository-url=https%3A%2F%2Fgithub.com%2Fnuxt-ui-templates%2Fdashboard&demo-image=https%3A%2F%2Fui.nuxt.com%2Fassets%2Ftemplates%2Fnuxt%2Fdashboard-dark.png&demo-url=https%3A%2F%2Fdashboard-template.nuxt.dev%2F&demo-title=Nuxt%20Dashboard%20Template&demo-description=A%20dashboard%20template%20with%20multi-column%20layout%20for%20building%20sophisticated%20admin%20interfaces.)
|
||||
|
||||
## Setup
|
||||
|
||||
Make sure to install the dependencies:
|
||||
### Install Dependencies
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
npm install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
### Development Server
|
||||
|
||||
Start the development server on `http://localhost:3000`:
|
||||
|
||||
```bash
|
||||
pnpm dev
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
Build the application for production:
|
||||
### Build for Production
|
||||
|
||||
```bash
|
||||
pnpm build
|
||||
npm run build
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
Preview the production build:
|
||||
|
||||
```bash
|
||||
pnpm preview
|
||||
npm run preview
|
||||
```
|
||||
|
||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||
## Available Scripts
|
||||
|
||||
## Renovate integration
|
||||
```bash
|
||||
# Development
|
||||
npm run dev # Start dev server
|
||||
|
||||
Install [Renovate GitHub app](https://github.com/apps/renovate/installations/select_target) on your repository and you are good to go.
|
||||
# Build & Preview
|
||||
npm run build # Build for production
|
||||
npm run preview # Preview production build
|
||||
|
||||
# Code Quality
|
||||
npm run lint # Run ESLint
|
||||
npm run typecheck # Run TypeScript type checking
|
||||
|
||||
# Database (if using)
|
||||
npm run db:push # Push schema to database
|
||||
npm run db:studio # Open Drizzle Studio
|
||||
npm run db:generate # Generate migrations
|
||||
```
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
app/
|
||||
├── pages/
|
||||
│ ├── index.vue # Homepage
|
||||
│ ├── novels/[id].vue # Novel detail & chapter list
|
||||
│ ├── novel/[novelId]/[chapterId].vue # Chapter reader
|
||||
│ ├── titles/search.vue # Advanced search
|
||||
│ └── myreading/ # User reading views
|
||||
├── components/ # Vue components
|
||||
├── layouts/default.vue # Main layout
|
||||
├── composables/ # Reusable logic
|
||||
└── types/ # TypeScript types
|
||||
|
||||
content/
|
||||
└── novels/ # Novel content (markdown)
|
||||
├── index.md # Novel metadata
|
||||
└── ch-*.md # Chapter files
|
||||
|
||||
server/
|
||||
├── api/ # Nitro API routes
|
||||
└── db/ # Database schema (Drizzle)
|
||||
|
||||
public/images/ # Novel cover images
|
||||
```
|
||||
|
||||
## Data Model
|
||||
|
||||
### Content Structure
|
||||
|
||||
Novels are stored as markdown files in `content/novels/`:
|
||||
- **Novel metadata**: `content/novels/<slug>/index.md`
|
||||
- **Chapters**: `content/novels/<slug>/ch-<number>.md`
|
||||
- **Homepage curation**: `content/novels/homepage.md` (featured/trending lists)
|
||||
|
||||
### Reader Navigation
|
||||
|
||||
Chapter URLs use deterministic UUIDv5 IDs for consistency:
|
||||
- Route: `/novel/[novelId]/[chapterId]`
|
||||
- Generated from: namespace constant + `${novelId}/${internalId}`
|
||||
- Ensures resume/history functionality works across sessions
|
||||
|
||||
### User State
|
||||
|
||||
Browser-based persistence via `localStorage`:
|
||||
- `user_library` - Saved novels
|
||||
- `reading_history` - Chapter progress
|
||||
- `readerPreferences` - Text size, font, theme
|
||||
|
||||
See `app/composables/useReaderStorage.ts` for shared state logic.
|
||||
|
||||
## Docker Deployment
|
||||
|
||||
### Build Docker Image
|
||||
|
||||
```bash
|
||||
docker build -t lastwebnovel:latest .
|
||||
```
|
||||
|
||||
### Run with Docker
|
||||
|
||||
```bash
|
||||
docker run -d -p 3000:3000 \
|
||||
-v ../botasaurus/content/novels:/app/content/novels \
|
||||
-v ../botasaurus/public/images:/app/public/images \
|
||||
lastwebnovel:latest
|
||||
```
|
||||
|
||||
### Docker Compose
|
||||
|
||||
```bash
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
See `docker-compose.yml` for volume configuration.
|
||||
|
||||
## Configuration
|
||||
|
||||
### Nuxt Config
|
||||
|
||||
Edit `nuxt.config.ts` to customize:
|
||||
- Modules (UI, Content, etc.)
|
||||
- CSS & fonts
|
||||
- Route rules
|
||||
- Dev tools
|
||||
|
||||
## Browser Support
|
||||
|
||||
Modern browsers with ES2020+ support.
|
||||
|
||||
## License
|
||||
|
||||
See LICENSE file
|
||||
|
||||
Loading…
Reference in New Issue
Block a user