Skip to content

Instantly share code, notes, and snippets.

@deckarts
Last active January 30, 2022 19:08
Show Gist options
  • Save deckarts/fcc34380111f069c92baccf3b883bfd5 to your computer and use it in GitHub Desktop.
Save deckarts/fcc34380111f069c92baccf3b883bfd5 to your computer and use it in GitHub Desktop.
addEventListener("fetch", (event) => {
event.respondWith(
handleRequest(event.request).catch(
(err) => new Response(err.stack, { status: 500 })
)
);
});
const addPreloadAfter = (href) => ({
element: (el) => {
el.after(`
<!--testbed-->
<link rel="preload" href="${href}" />
<!--/testbed-->`, { html: true });
}
});
const addImportanceHigh = () => ({
element: (el) => {
el.setAttribute("importance", "high");
}
});
async function handleRequest(request) {
const url = new URL(request.url);
const host = request.headers.get('x-host');
const bypassTransform = request.headers.get('x-bypass-transform') || false;
const acceptHeader = request.headers.get('accept');
const { searchParams } = new URL(request.url);
let lcpHref = searchParams.get("lcp");
if (!lcpHref) {
return new Response(
`
<h1>SEO for Developers Testbed</h1>
<form action="https://testbed.deckart.workers.dev/" method="get">
<label for="lcp">Path to LCP:</label>
<input style="min-width: 350px;" type="text" name="lcp" id="lcp" value="path">
<button>Test</button><br>
<input type="checkbox" id="importance" name="importance" value="high" disabled>
<label for="importance">Add Importance High? </label>
</form>
`, {
headers: {
"content-type": "text/html;charset=UTF-8",
}});
}
const counter = parseInt(await KV.get('counter') || 0);
if (!host || counter > 1000) {
return new Response('hit limit exceeded or x-host missing', {status: 403});
} else {
await KV.put("counter", counter + 1);
}
url.hostname = host
if ((acceptHeader
&& acceptHeader.indexOf('text/html') >= 0)
&& (!bypassTransform
|| (bypassTransform
&& bypassTransform.indexOf('true') === -1))) {
const response = await fetch(url.toString(), request);
const newResponse = new Response(response.body, response);
return new HTMLRewriter()
.on('link', {
element: el => {
const link_href = el.getAttribute('href');
const link_rel = el.getAttribute('rel');
const link_as = el.getAttribute('as');
if (link_href && link_href.startsWith('/')) {
el.setAttribute('href', 'https://' + host + link_href);
}
}
})
.on('script', {
element: el => {
const script_src = el.getAttribute('src');
if (script_src && script_src.startsWith('/')) {
el.setAttribute('src', 'https://' + host + script_src);
}
}
})
.on('img', {
element: el => {
const img_src = el.getAttribute('src');
if (img_src && img_src.startsWith('/')) {
el.setAttribute('src', 'https://' + host + img_src);
}
}
})
.on('title', addPreloadAfter('https://testbed.deckart.workers.dev' + lcpHref))
// .on('article:first-of-type.stream-article > div.article-image > a > img.image', addImportanceHigh())
.transform(newResponse);
}
return fetch(url, request);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment