adshrc/README.txt

## README.txt
Easy to use Maintenance page as a Cloudflare Worker. Once set up, you can enable it for unlimited pages in your CF account. Get rid of greedy subscriptions that charge you per domain.

How to:
1. Go to Cloudflare Workers and create a new Worker (url is https://dash.cloudflare.com/<your-id>/workers/new)
2. paste the Code from above
3. Set an AUTH_KEY and AUTH_VALUE and the maintenancePageHtml (optionally)
4. deploy the worker
5. goto Cloudflare and choose a domain, click on the Workers section (url is https://dash.cloudflare.com/<your-id>/<domain>/workers)
6. click on "Add Route" and set the Route you want to enable the maintenance page for (typically <domain>/*)
7. choose your previously created worker from the dropdown
8. Visit the website and check if your maintenance page is working 🎉

If you want to access the page behind the worker, use the following (private) link:
http://<domain>?<AUTH_KEY>=<AUTH_VALUE>

so for example:

https://mydomain.com?token=choose-a-secret

Once you used the private (token) link, you can access all pages. The token will be stored in a Cookie.


Have fun!

## worker.js
const AUTH_KEY = "token"
const AUTH_VALUE = "choose-a-secret"
const VALID_AUTH = AUTH_KEY + "=" + AUTH_VALUE;

addEventListener("fetch", event => {
  event.respondWith(handle(event.request))
})

async function handle(request) {
  const cookies = request.headers.get("Cookie") || "";

  // Check for cookie or token in url
  if (cookies.includes(VALID_AUTH) || request.url.includes(VALID_AUTH)) {
    // User has a valid token, so show the original page
    const originalResponse = await fetch(request);
    const response = new Response(originalResponse.body, originalResponse);

    // Store token in cookie if not included already
    if (!cookies.includes(VALID_AUTH)) {
      const tokenCookie = `${VALID_AUTH}; Path=/;`;
      response.headers.set('Set-Cookie', tokenCookie);
    }

    return response;
  } else {
    // User should see the maintenance site
    const modifiedHeaders = new Headers();
    modifiedHeaders.set('Content-Type', 'text/html');
    modifiedHeaders.append('Pragma', 'no-cache');

    return new Response(maintenancePageHtml, {
      headers: modifiedHeaders,
      status: 503,
      statusText: "Service Unavailable"
    });
  }
}

const maintenancePageHtml = `
  <!DOCTYPE html>
    <html lang="en" style="">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Under Maintenance</title>

        <meta name="MSSmartTagsPreventParsing" content="true">
        <meta http-equiv="imagetoolbar" content="false">
        <meta name="robots" content="nocache">
        <meta name="robots" content="noindex,nofollow">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body style="height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center">
      <h1>Under Maintenance</h1>
    </body>
  </html>
`;
	Easy to use Maintenance page as a Cloudflare Worker. Once set up, you can enable it for unlimited pages in your CF account. Get rid of greedy subscriptions that charge you per domain.

	How to:
	1. Go to Cloudflare Workers and create a new Worker (url is https://dash.cloudflare.com/<your-id>/workers/new)
	2. paste the Code from above
	3. Set an AUTH_KEY and AUTH_VALUE and the maintenancePageHtml (optionally)
	4. deploy the worker
	5. goto Cloudflare and choose a domain, click on the Workers section (url is https://dash.cloudflare.com/<your-id>/<domain>/workers)
	6. click on "Add Route" and set the Route you want to enable the maintenance page for (typically <domain>/*)
	7. choose your previously created worker from the dropdown
	8. Visit the website and check if your maintenance page is working 🎉

	If you want to access the page behind the worker, use the following (private) link:
	http://<domain>?<AUTH_KEY>=<AUTH_VALUE>

	so for example:

	https://mydomain.com?token=choose-a-secret

	Once you used the private (token) link, you can access all pages. The token will be stored in a Cookie.


	Have fun!
	const AUTH_KEY = "token"
	const AUTH_VALUE = "choose-a-secret"
	const VALID_AUTH = AUTH_KEY + "=" + AUTH_VALUE;

	addEventListener("fetch", event => {
	event.respondWith(handle(event.request))
	})

	async function handle(request) {
	const cookies = request.headers.get("Cookie") \|\| "";

	// Check for cookie or token in url
	if (cookies.includes(VALID_AUTH) \|\| request.url.includes(VALID_AUTH)) {
	// User has a valid token, so show the original page
	const originalResponse = await fetch(request);
	const response = new Response(originalResponse.body, originalResponse);

	// Store token in cookie if not included already
	if (!cookies.includes(VALID_AUTH)) {
	const tokenCookie = `${VALID_AUTH}; Path=/;`;
	response.headers.set('Set-Cookie', tokenCookie);
	}

	return response;
	} else {
	// User should see the maintenance site
	const modifiedHeaders = new Headers();
	modifiedHeaders.set('Content-Type', 'text/html');
	modifiedHeaders.append('Pragma', 'no-cache');

	return new Response(maintenancePageHtml, {
	headers: modifiedHeaders,
	status: 503,
	statusText: "Service Unavailable"
	});
	}
	}

	const maintenancePageHtml = `
	<!DOCTYPE html>
	<html lang="en" style="">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Under Maintenance</title>

	<meta name="MSSmartTagsPreventParsing" content="true">
	<meta http-equiv="imagetoolbar" content="false">
	<meta name="robots" content="nocache">
	<meta name="robots" content="noindex,nofollow">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>

	<body style="height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center">
	<h1>Under Maintenance</h1>
	</body>
	</html>
	`;