This project is a customizable Cloudflare Worker that generates a simple placeholder page for your domains. It displays information about the visitor's location, HTTP protocol, and other details using the Cloudflare request.cf
object.
- Dynamically generated placeholder page for multiple domains
- Displays visitor's location on an interactive map using Leaflet.js
- Shows information such as HTTP protocol, ASN, and Cloudflare colo
- Responsive design with a modern, gradient background
- Frosted glass effect for the main content container
- Node.js (version 18 or later)
- Wrangler CLI (version 3 or later)
- A Cloudflare account with Workers enabled
-
Clone this repository:
git clone https://github.com/fry69/cloudflare-worker-placeholder.git cd cloudflare-worker-placeholder
-
Install dependencies:
npm install
-
Configure your Cloudflare account in Wrangler:
wrangler login
-
Optionally update the
wrangler.toml
file with your custom domains:routes = [ { pattern = "example.com", custom_domain = true }, { pattern = "www.example.com", custom_domain = true } ]
-
Develop and test locally:
npm run dev
-
Deploy to Cloudflare Workers:
npm run deploy
-
Add a route in your Cloudflare dashboard to direct traffic to this worker or add custom domains in
wrangler.toml
as described above.
You can customize the appearance and content of the placeholder page by modifying the HTML and CSS in the src/index.ts
file. The main areas you might want to customize are:
- The gradient colors in the
body
CSS - The content of the
<div class="container">
element - The map settings in the JavaScript section
This project includes unit tests using Vitest. To run the tests:
npm test
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
- Cloudflare Workers for the serverless platform
- Leaflet.js for the interactive maps
If you encounter any problems or have any questions, please open an issue in this repository.