Skip to content

Commit e1b179d

Browse files
onmaxonmax
committed
feat: enhance 404 error page with user-friendly design, navigation options, and search integration; add useRandomEmoji composable for dynamic emoji display
1 parent d21ca81 commit e1b179d

File tree

5 files changed

+457
-1
lines changed

5 files changed

+457
-1
lines changed

‎packages/nimiq-vitepress-theme/README.md‎

Lines changed: 111 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,117 @@
66
[![JSDocs][jsdocs-src]][jsdocs-href]
77
[![License][license-src]][license-href]
88

9-
Vitepress Theme for Nimiq documentation pages
9+
A modern, beautiful VitePress theme with Nimiq branding and design patterns.
10+
11+
## Features
12+
13+
- 🎨 Modern, clean design with Nimiq branding
14+
- 🌙 Dark mode support
15+
- 📱 Fully responsive layout
16+
- 🔍 Advanced search functionality
17+
- 🧭 Smart navigation with breadcrumbs
18+
- 📝 Rich typography and code highlighting
19+
- 🎯 Custom components (NqCard, NqGrid, NqHeadline, etc.)
20+
- **🚨 Beautiful custom 404 error page**
21+
22+
## Components
23+
24+
### Built-in Components
25+
26+
- `NqCard` - Flexible card component with optional icons and links
27+
- `NqGrid` - Responsive grid layout
28+
- `NqHeadline` - Structured headline component
29+
- `NqLargeCard` - Large featured card component
30+
- `NqModulesGrid` - Grid for displaying modules
31+
32+
### Error Page
33+
34+
The theme includes a custom 404 error page with:
35+
36+
- Friendly error message with random emojis
37+
- Quick navigation options (Go Back, Go Home)
38+
- Integrated search functionality
39+
- Quick links to common pages
40+
- Display of available modules
41+
- Responsive design for mobile and desktop
42+
43+
## Installation
44+
45+
```bash
46+
npm install nimiq-vitepress-theme
47+
```
48+
49+
## Usage
50+
51+
```ts
52+
// .vitepress/config.ts
53+
import { defineNimiqVitepressConfig } from 'nimiq-vitepress-theme'
54+
55+
export default defineNimiqVitepressConfig({
56+
title: 'Your Documentation',
57+
description: 'Your description',
58+
themeConfig: {
59+
modules: [
60+
{
61+
text: 'Getting Started',
62+
defaultPageLink: '/getting-started',
63+
description: 'Learn the basics'
64+
}
65+
]
66+
}
67+
})
68+
```
69+
70+
## Theme Configuration
71+
72+
The theme supports various configuration options:
73+
74+
```ts
75+
interface NimiqVitepressThemeConfig {
76+
modules: NimiqVitepressThemeNav[]
77+
links?: {
78+
icon: string
79+
link: string
80+
}[]
81+
showLastUpdated?: boolean
82+
showEditContent?: boolean
83+
search?: { provider: 'local' }
84+
}
85+
```
86+
87+
## Testing the 404 Page
88+
89+
To test the custom 404 error page:
90+
91+
1. Start your development server
92+
2. Navigate to any non-existent page (e.g., `/non-existent-page`)
93+
3. The custom error page will display with:
94+
- Random emoji
95+
- Friendly error message
96+
- Navigation options
97+
- Search functionality
98+
- Quick links and module exploration
99+
100+
## Development
101+
102+
```bash
103+
# Install dependencies
104+
pnpm install
105+
106+
# Build the theme
107+
pnpm build
108+
109+
# Development
110+
pnpm dev
111+
```
112+
113+
## Contributing
114+
115+
Contributions are welcome! Please feel free to submit a Pull Request.
116+
117+
## License
118+
119+
MIT License
10120

11121
<!-- Badges -->
12122

‎packages/nimiq-vitepress-theme/examples/404-demo.md‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
# 404 Error Page Demo
2+
3+
This is a demonstration of the improved 404 error page for the Nimiq VitePress theme.
4+
5+
## Features
6+
7+
The custom 404 error page includes:
8+
9+
### 🎯 User-Friendly Design
10+
11+
- **Random Emoji**: A fun, random emoji is displayed to make the error less intimidating
12+
- **Friendly Message**: Clear, helpful text that explains what happened
13+
- **Beautiful Gradient**: Eye-catching 404 number with a blue gradient
14+
15+
### 🧭 Navigation Options
16+
17+
- **Go Back Button**: Takes users back to the previous page
18+
- **Go Home Button**: Returns users to the homepage
19+
- **Quick Links**: Direct access to common pages (Home, Docs, Examples, API)
20+
21+
### 🔍 Search Integration
22+
23+
- **Search Box**: Clickable search interface that triggers the command menu
24+
- **Keyboard Shortcut**: Visual indicator for the ⌘K shortcut
25+
- **Seamless Integration**: Works with the existing VitePress search system
26+
27+
### 📱 Responsive Design
28+
29+
- **Mobile-First**: Optimized for mobile devices
30+
- **Tablet Support**: Responsive grid layouts
31+
- **Desktop Enhancement**: Full-width layouts with proper spacing
32+
33+
### 🎨 Theme Integration
34+
35+
- **Consistent Branding**: Matches the Nimiq design system
36+
- **Dark Mode Support**: Automatic dark/light mode switching
37+
- **Module Integration**: Displays available modules when configured
38+
39+
## Testing the 404 Page
40+
41+
To see the 404 error page in action:
42+
43+
1. **Broken Link**: [Click here to see a 404 error](/this-page-does-not-exist)
44+
2. **Manual Navigation**: Type any non-existent URL in your browser
45+
3. **Search Test**: Use the search box on the error page
46+
47+
## Technical Features
48+
49+
### Composables Used
50+
51+
- `useRandomEmoji`: Provides random emoji selection
52+
- `useData`: Accesses VitePress theme configuration
53+
- `withBase`: Handles base URL for navigation
54+
55+
### Components Integrated
56+
57+
- `Logo`: Consistent branding
58+
- `CommandMenu`: Search functionality
59+
- `MobileNav`: Mobile navigation support
60+
61+
### UnoCSS Classes
62+
63+
The error page uses the theme's UnoCSS configuration for:
64+
65+
- Responsive layouts (`grid`, `flex`)
66+
- Color schemes (`neutral`, `blue`)
67+
- Typography (`text-xl`, `font-bold`)
68+
- Spacing (`px-8`, `py-4`, `mb-12`)
69+
70+
## Customization
71+
72+
The error page can be customized through the theme configuration:
73+
74+
```ts
75+
// .vitepress/config.ts
76+
export default defineNimiqVitepressConfig({
77+
themeConfig: {
78+
modules: [
79+
{
80+
text: 'Custom Module',
81+
defaultPageLink: '/custom',
82+
description: 'Your custom module',
83+
icon: 'i-nimiq:custom-icon'
84+
}
85+
]
86+
}
87+
})
88+
```
89+
90+
This will automatically populate the "Explore Modules" section on the 404 page.

‎packages/nimiq-vitepress-theme/src/composables/useRandomEmoji.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { computed } from 'vue'
2+
3+
export function useRandomEmoji() {
4+
const emojis = [
5+
'🤔',
6+
'😅',
7+
'🙃',
8+
'😔',
9+
'🤷‍♂️',
10+
'🤷‍♀️',
11+
'🧭',
12+
'🗺️',
13+
'🔍',
14+
'📍',
15+
'🚀',
16+
'🛸',
17+
'🌌',
18+
'⭐',
19+
'🌟',
20+
'💫',
21+
'🌠',
22+
'🔮',
23+
'💼',
24+
'📦',
25+
'🏠',
26+
'🏡',
27+
'🏢',
28+
'🏰',
29+
'🎯',
30+
'🎪',
31+
'🎨',
32+
'🎭',
33+
'🎪',
34+
'🎡',
35+
]
36+
37+
const randomEmoji = computed(() => {
38+
const randomIndex = Math.floor(Math.random() * emojis.length)
39+
return emojis[randomIndex]
40+
})
41+
42+
return {
43+
randomEmoji,
44+
emojis,
45+
}
46+
}

0 commit comments

Comments
 (0)