not-found-pages
v0.0.7
Published
A collection of tree-shakable not found pages web components
Readme
not-found-pages
A lightweight npm package for easily integrating customizable "not-found" web components into JavaScript applications.
🚀 Features
- 🔹 Simple integration with any JavaScript framework or plain HTML
- 🎨 Customizable styles and messages
- ⚡ Lightweight and dependency-free
- 📦 Works with modern browsers
📦 Installation
npm install not-found-pagesor with Yarn:
yarn add not-found-pages🌟 Usage
Basic Example
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module">
import "not-found-pages";
</script>
</head>
<body>
<neon-404></neon-404>
</body>
</html>Customizing the Component
<neon-404 title="Oops!" text="Page not found."></neon-404>📖 API
| Attribute | Description | Default | Available styles |
| ----------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
| color | Main color of the page | "#000000" | neon, simple-gradient, simple-image |
| secondary-color | Secondary color of the page | "#2d2d2d" | neon, simple-gradient, simple-image |
| tertiary-color | Tertiary color of the page | "#555555" | neon, simple-gradient, simple-image |
| button-label | CTA label | "Go Home" | neon, simple-gradient, simple-image |
| href | URL to redirect using the CTA | "/" | neon, simple-gradient, simple-image |
| title | Main title in the page | "Oops!" | neon, simple-gradient, simple-image |
| text | Description of the error in the page | "The page you are looking for might have been removed, had its name changed or is temporarily unavailable." | neon, simple-gradient, simple-image |
| is-dark-mode | Set if the not-found-page should be rendered in a dark mode | false | simple-gradient |
| image | src of the background image | '' | simple-image |
🎨 Available 404 Page Styles
The package provides the following built-in 404 page styles:
- Neon
- Simple Gradient
- Simple Image
🚀 Using with Frameworks
Next.js
Create a custom 404 page in pages/404.js:
import "not-found-pages";
export default function NotFoundPage() {
return <not-found message="Oops! Page not found."></not-found>;
}Astro
Create a src/pages/404.astro file:
---
import "not-found-pages";
---
<not-found message="This page is lost in space."></not-found>Svelte
Create a src/routes/404.svelte file:
<script>
import "not-found-pages";
</script>
<not-found message="Page not found!"></not-found>Angular
Create a not-found.component.ts file:
import { Component } from "@angular/core";
@Component({
selector: "app-not-found",
template: '<not-found message="Oops! Page not found."></not-found>',
styleUrls: ["./not-found.component.css"],
})
export class NotFoundComponent {}Then add the component to your routing module:
const routes: Routes = [{ path: "**", component: NotFoundComponent }];🛠️ Development
Clone the repository:
git clone https://github.com/FranciscoDiazPaccot73/404-pages.git
cd 404-pages
npm installRun a local development server:
cp test.example.html test.html
npm run build
serve .open http://localhost:3000/test.html
📄 Changelog
See the CHANGELOG for details on new features, improvements, and bug fixes.