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/)
|
- 📖 **Novel Reader** - Read chapters with customizable text size, font, and theme
|
||||||
- [Documentation](https://ui.nuxt.com/docs/getting-started/installation/nuxt)
|
- 📚 **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">
|
## Tech Stack
|
||||||
<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>
|
|
||||||
|
|
||||||
> 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
|
## Quick Start
|
||||||
|
|
||||||
```bash [Terminal]
|
### Install Dependencies
|
||||||
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:
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
pnpm install
|
npm install
|
||||||
```
|
```
|
||||||
|
|
||||||
## Development Server
|
### Development Server
|
||||||
|
|
||||||
Start the development server on `http://localhost:3000`:
|
Start the development server on `http://localhost:3000`:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
pnpm dev
|
npm run dev
|
||||||
```
|
```
|
||||||
|
|
||||||
## Production
|
### Build for Production
|
||||||
|
|
||||||
Build the application for production:
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
pnpm build
|
npm run build
|
||||||
```
|
```
|
||||||
|
|
||||||
Locally preview production build:
|
Preview the production build:
|
||||||
|
|
||||||
```bash
|
```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