@liamchrstn/notfound
v1.0.3
Published
A stylish 404 page with ASCII art and 3D animation.
Downloads
7
Readme
@liamchrstn/notfound
A stylish 404 page with ASCII art and 3D animation.
Features
- ASCII art 404 text
- Animated 3D model rendered in ASCII
- Responsive design that adapts to window size
- Customizable colors and text
- No routing dependencies - works with any framework
Installation
npm install @liamchrstn/notfoundUsage
Complete Example
Here's a minimal example site using the package:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<a href="/not-found">Test 404 page</a>
</body>
</html>
<!-- 404.html -->
<!DOCTYPE html>
<html>
<head>
<title>Page Not Found</title>
</head>
<body>
<div id="error-page"></div>
<!-- Dependencies -->
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
<!-- Our package -->
<script src="https://unpkg.com/@liamchrstn/notfound"></script>
<script>
// Mount the 404 page
const cleanup = NotFoundPage.mount({
container: document.getElementById('error-page'),
onNavigateHome: () => window.location.href = '/'
});
// Cleanup when leaving the page
window.addEventListener('unload', cleanup);
</script>
</body>
</html>Running the Example
The package includes a complete example in the examples/basic directory:
examples/basic/
├── index.html # Homepage
├── 404.html # 404 page using the package
└── server.js # Simple test serverTo run the example:
# Clone the repository
git clone https://github.com/liamchrstn/notfound.git
cd notfound
# Install dependencies
npm install
# Run the example server
node examples/basic/server.jsThen open http://localhost:3000 in your browser. Click the test link to see the 404 page in action.
The example demonstrates:
- Basic setup without build tools
- Loading dependencies from CDN
- Custom settings configuration
- Handling navigation
- Proper cleanup on page unload
NPM Usage
For projects using npm/webpack/etc, first install the package:
npm install @liamchrstn/notfound react react-dom threeThen use it in your code:
Simple Usage
The easiest way to use the 404 page is with the mount function:
import { mount } from '@liamchrstn/notfound';
// Mount to a container element
const cleanup = mount({
container: document.getElementById('error-page'),
// Optional settings
settings: {
headerTextColor: '#ffffff',
footerTextColor: '#ffffff',
ascii3dColor: '#ffffff',
backgroundColor: '#000000',
footerText: 'Your Name 2024',
footerLink: 'https://yoursite.com'
},
// Optional callback when user clicks to navigate home
onNavigateHome: () => {
window.location.href = '/';
}
});
// When you want to unmount the component
cleanup();React Component Usage
If you're using React, you can use the component directly:
import NotFound from '@liamchrstn/notfound';
function ErrorPage() {
return (
<NotFound
settings={{
headerTextColor: '#ffffff',
footerTextColor: '#ffffff',
ascii3dColor: '#ffffff',
backgroundColor: '#000000',
footerText: 'Your Name 2024',
footerLink: 'https://yoursite.com'
}}
onNavigateHome={() => {
// Handle navigation
window.location.href = '/';
}}
/>
);
}Settings
You can customize the appearance through the settings prop:
| Setting | Type | Default | Description | |---------|------|---------|-------------| | headerTextColor | string | 'white' | Color of the ASCII art header | | footerTextColor | string | 'white' | Color of the footer text | | ascii3dColor | string | 'white' | Color of the 3D ASCII animation | | backgroundColor | string | 'black' | Background color | | footerText | string | 'Liam Christian 2024' | Text shown in footer | | footerLink | string | 'https://liamchristian.com' | Link for footer text |
Browser Support
Requires a modern browser with WebGL support.
License
MIT