v1.0.0

Refactored project structure, added `package.json`, build scripts, and updated `.gitignore`. Improved asset organization and renamed files for better clarity. Updated `README.md` with installation and usage instructions.

Signed-off-by: Kolja Nolte <kolja.nolte@gmail.com>

Author: thaikolja

.gitignore

@@ -1,2 +1,5 @@
 .DS_Store
 .idea/
+*.zip
+node_modules/
+dist/

README.md

@@ -2,11 +2,15 @@
 
 ![GitHub Release](https://img.shields.io/github/v/release/thaikolja/modern-html-error-docs?include_prereleases&display_name=release&style=flat&color=light-blue&link=https%3A%2F%2Fgithub.com%2Fthaikolja%2Fmodern-html-error-docs) ![GitHub forks](https://img.shields.io/github/forks/thaikolja/modern-html-error-docs?style=flat) ![GitHub Repo stars](https://img.shields.io/github/stars/thaikolja/modern-html-error-docs?style=flat&color=dark-green) ![License](https://img.shields.io/badge/License-MIT-yellow.svg)
 
-A collection of modern, responsive, and brandable [HTML error pages](https://www.presslabs.com/how-to/error-pages/) (e.g., `404`, `500`) designed to turn frustrating moments into memorable, on-brand experiences—with an optional dose (customizable) of sarcasm, irony, and humor. Built for server administrators who are bored with the default Apache/Nginx error docs. This repository is hosted on [GitLab](https://gitlab.com/thaikolja/modern-html-error-docs) and mirrored to [GitHub](https://github.com/thaikolja/modern-html-error-docs).
+A collection of modern, responsive, and brandable [HTML error pages](https://www.presslabs.com/how-to/error-pages/) (e.g., `404`, `500`) designed to turn frustrating moments into memorable, on-brand experiences—with an optional dose (customizable) of sarcasm, irony, and humor. Built for server administrators who are bored with the default Apache/Nginx error docs.
+
+This repository is hosted on [GitLab](https://gitlab.com/thaikolja/modern-html-error-docs) and mirrored to [GitHub](https://github.com/thaikolja/modern-html-error-docs).
+
+---
 
 **Example for the error code 503:**
 
-![screenshot](https://p.ipic.vip/k018xl.jpg)
+![screenshot](https://p.ipic.vip/zfu3jm.jpg)
 
 ## Features
 
@@ -17,129 +21,101 @@ A collection of modern, responsive, and brandable [HTML error pages](https://www
 -   🧹 **Organized Structure:** Clear separation of CSS, JavaScript, and image assets.
 -   ⚒️ **Customizable:** Easily modify docs, styling, and robot images to match your brand.
 
-## Getting Started
-
-Although the error docs have been built for Linux servers, please note that the following paths and folders may not be accurate for your specific distribution.
+## Requirements
 
-### Requirements
-
--   A server running Linux
--   An installed web server, e.g., Apache or Nginx
--   Access to your server's standard error docs files
+-   Server running Linux
+-   Installed web server, e.g., Apache or Nginx
+-   Access to your server's (standard) error docs files, e.g., root access
 
 ## Installation
 
-> [!NOTE]
+> [!WARNING]
 >
-> For this installation, a Debian 12 server running Plesk, Apache, and Nginx is used. Some file paths may differ from those in your distribution.
+> Although the error docs have been built for Linux servers, please note that the following paths and folders **may not be accurate for your specific distribution.**
 
 ### Install from Build
 
-An **already built version** with minified assets and only the necessary files that need to be moved to the server.
+Download the pre-built version with minified assets and only the necessary files that need to be transferred to the server.
 
 1. Use SSH to log in to your server as a user with enough permission (see: "Requirements")
 
-2. Change into the directory where the error message files are being stored. In this case, it's the following directory for **new domains**. Already existing domains are located in `/var/www/vhosts/DOMAIN.COM/error-docs`.
+2. Find the directory that stores the server's default error docs (example: `/var/www/error-docs`) and `cd` into this directory
 
-   ```bash
-   cd /var/www/vhosts/.skel/0
-   ```
+3. Head to the "Release" section on [GitLab](https://gitlab.com/thaikolja/modern-html-error-docs/-/releases) or [GitHub](https://github.com/thaikolja/modern-html-error-docs/releases) and copy the URL of **the latest version's .zip file** named `error-docs-built.zip`
 
-3. Create a backup of the default error docs folder:
+4. Create a backup of the already existing files:
 
    ```bash
-   zip -r error-docs-backup.zip error_docs
+   cp -r error-docs error-docs_backup
    ```
 
-4. Head to the "Release" section on GitLab or GitHub and copy the URL of the latest version's .zip file:
+5. Unzip the downloaded archive and set permissions:
 
    ```bash
-   # Using wget
-   wget https://github.com/thaikolja/modern-html-error-docs/archive/refs/heads/main.zip
-   
-   # Using curl
-   curl -0 https://github.com/thaikolja/modern-html-error-docs/archive/refs/heads/main.zip
+   sudo unzip error-docs-built.zip -d /var/www/error-docs
+   sudo chown -R www-data:www-data /var/www/error-docs
+   sudo chmod -R 0755 /var/www/error-docs
    ```
 
-5. Unzip the downloaded file `main.zip`:
+6. If the error docs hadn't been set, activate them on your web server:
 
-   ```bash
-   unzip dist.zip
-   ```
+   1. #### Apache
 
-6. Backup your existing default `error-docs` and rename your extracted `dist`:
+      ```bash
+      ErrorDocument 404 /var/www/error-docs/not_found.html
+      ErrorDocument 500 /var/www/error-docs/internal_server_error.html
+      # etc.
+      ```
 
-   ```bash
-   mv error-docs ./error-docs_backup && mv dist error-docs
-   ```
+   2. #### Nginx
 
-7. `cd` into `error-docs` and use `ls -l` (or `tree`, if available). You should see the following file structure:
+      ```nginx
+      error_page 404 /errors/my-brand/not_found.html;
+      location = /errors/my-brand/not_found.html {
+          internal;
+          alias /var/www/errors/my-brand/not_found.html;
+      }
+      # etc.
+      ```
 
-   ```bash
-   ├── assets
-   │   ├── css
-   │   │   └── main.min.css
-   │   ├── data
-   │   │   └── docs.json
-   │   ├── img
-   │   │   ├── robot-blue.avif
-   │   │   ├── robot-blue.png
-   │   │   ├── robot-blue.webp
-   │   │   ├── robot-red.avif
-   │   │   ├── robot-red.png
-   │   │   ├── robot-red.webp
-   │   │   ├── robot-yellow.avif
-   │   │   ├── robot-yellow.png
-   │   │   └── robot-yellow.webp
-   │   └── js
-   │       └── scripts.min.js
-   ├── bad_gateway.html
-   ├── bad_request.html
-   ├── forbidden.html
-   ├── internal_server_error.html
-   ├── maintenance.html
-   ├── method_not_allowed.html
-   ├── not_acceptable.html
-   ├── not_found.html
-   ├── not_implemented.html
-   ├── precondition_failed.html
-   ├── proxy_authentication_required.html
-   ├── request-uri_too_long.html
-   ├── unauthorized.html
-   └── unsupported_media_type.html
-   ```
+   3. #### Plesk
+
+      1. Upload the built files into `httpdocs` or a subfolder
+      2. Enable "Custom error documents" in Domains → Hosting Settings, or use the Plesk CLI/API so your changes survive vhost regeneration
 
-8. To change the docs for each template, open `assets/data/docs.json` and adjust them there.
+### Install via Git
 
-9. Restart your Apache or Nginx server or create a new website in your Plesk interface:
+1. Clone this repository:
 
    ```bash
-   # Apache
-   sudo systemctl restart apache2
-   
-   # Nginx
-   sudo systemctl restart nginx
+   git clone https://gitlab.com/thaikolja/modern-html-error-docs.git
    ```
 
-10. 🥳 Your Modern HTML Error Docs are successfully installed!
+2. `cd` into the directory:
 
-### Via Git
+   ```bash
+   cd modern-html-error-docs
+   ```
 
-1. Clone the main repository with unminified codes:
+3. Install necessary packages to build the distribution package:
 
    ```bash
+   npm i
+   # or `yarn`, `bun i`, or whatever package manager you prefer
    ```
 
-2. Apply your changes.
+4. Build the package:
 
-3. Clea
+   ```bash
+   npm run package # or with other package managers
+   ```
+
+5. Use the content `dist/` folder to replace your error docs.
 
 ## Customization
 
 ### Messages and Texts
 
-These error docs 
-
 All error docs are stored in `assets/data/docs.json`. You can edit this file to change the titles, descriptions, and robot speech for each error code.
 
 ```json
@@ -157,32 +133,20 @@ All error docs are stored in `assets/data/docs.json`. You can edit this file to
 
 ### Styling
 
-Modify the `assets/css/main.css` file to change the visual appearance of the error pages. The CSS uses nesting for better readability and maintainability.
+Modify the **source** `assets/css/main.css` file to change the visual appearance of the error pages. The CSS uses nesting for better readability and maintainability.
 
 ### Images
 
 Replace or add new robot images in the `assets/img/` directory. Ensure you update the `srcset` and `src` attributes in the respective HTML files if you change the image filenames.
 
 ### JavaScript
 
-The `assets/js/scripts.js` file handles the dynamic loading of docs from `docs.json` and can be extended for additional client-side functionality.
-
-## What's Next
-
-* Creating a way of easier deployment
-* Accurate Linux distribution determination
-* Expanding `README.md` for the most used Linux distributions
+The `assets/js/scripts.js` file handles the dynamic loading of docs from `docs.json` and can be extended for additional client-side functionality (use the **source file** from the repository).
 
 ## Contributing
 
 Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
 
-1.  Fork the Project
-2.  Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
-3.  Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
-4.  Push to the Branch (`git push origin feature/AmazingFeature`)
-5.  Open a Pull Request
-
 ## Author
 
 * Kolja Nolte (kolja.nolte@gmail.com)

package.json

@@ -0,0 +1,24 @@
+{
+  "name":            "modern-html-error-docs",
+  "description":     "A modern, responsive HTML error documentation template.",
+  "author":          "Kolja Nolte",
+  "license":         "MIT",
+  "version":         "1.0.0",
+  "private":         true,
+  "scripts":         {
+    "clean":        "rm -rf dist error-docs-built.zip",
+    "prepare-dist": "mkdir -p dist/assets/css dist/assets/js dist/assets/img dist/assets/data",
+    "build:css":    "npx postcss src/assets/css/main.css --use cssnano -o dist/assets/css/main.css",
+    "build:js":     "npx esbuild src/assets/js/scripts.js --bundle --minify --outfile=dist/assets/js/scripts.js --format=esm",
+    "copy:assets":  "cp -r src/assets/img dist/assets/ || true && cp -r src/assets/data dist/assets/ || true",
+    "copy:html":    "cp src/*.html dist/ || true",
+    "build":        "npm run clean && npm run prepare-dist && npm run build:css && npm run build:js && npm run copy:assets && npm run copy:html",
+    "package":      "npm run build && (cd dist && zip -r ../error-docs-built.zip . -x \"**/*.map\")"
+  },
+  "devDependencies": {
+    "esbuild":     "^0.25.9",
+    "postcss":     "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "cssnano":     "^7.1.1"
+  }
+}