cupcakearmy/blaze
1
0
Fork 0
mirror of https://github.com/cupcakearmy/blaze.git synced 2024-12-22 16:26:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add search bar in serp + Serve light pages when not blazed + Change some styling

Browse Source
This commit is contained in:
Danny Spina 2023-06-22 16:00:46 +02:00
parent 2f77ed66a2
commit a73a03833d
3 changed files with 100 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/index.html vendored
View File

@ -42,7 +42,7 @@
</head> </head>
<body> <body>
<section> <section>
<h1>Blaze</h1> <h1>BLA⚡E</h1>
<input <input
name="u" name="u"
id="u" id="u"

139
index.ts
View File

@ -9,7 +9,11 @@ import { parseHTML, parseJSON } from "linkedom";
import XHR2 from "xhr2"; import XHR2 from "xhr2";
const XMLHttpRequest = XHR2.XMLHttpRequest; const XMLHttpRequest = XHR2.XMLHttpRequest;
import { minify } from "html-minifier"; import { minify } from "html-minifier";
import { blazeUrl, injectBlazeToPageLinks } from "./utils.js"; import {
blazeFunctionality,
blazeUrl,
injectBlazeToPageLinks,
} from "./utils.js";
const app = express(); const app = express();
const port = 8888; const port = 8888;
@ -88,7 +92,19 @@ app.get("/", async (req, res) => {
</style> </style>
</head> </head>
<body> <body>
<header>
<label>
<a href="/"><strong>BLAZE</strong></a>
<input type="search" value="${query}" />
<button>Blaze it</button>
</label>
</header>
<hr/>
${results.join("")} ${results.join("")}
<script>
${blazeFunctionality}
blazeFunctionality('${blazeUrl}')
</script>
</body> </body>
</html> </html>
`; `;
@ -107,66 +123,93 @@ app.get("/blazed", async (req, res) => {
const pageToBlaze = req.query.url as string; const pageToBlaze = req.query.url as string;
try { try {
const response = await got(pageToBlaze, { const xhr = new XMLHttpRequest();
headers: { Accept: "text/html" }, xhr.open("GET", pageToBlaze, true);
}); xhr.setRequestHeader("Accept", "text/html");
const { document } = parseHTML(response.body);
// TODO: missing handling of 404. The idea is to send the blaze 404 page, otherwise will show error page on client xhr.onreadystatechange = async () => {
if (xhr.readyState !== 4) {
return;
}
if (!isProbablyReaderable(document)) { if (xhr.status === 404) {
// TODO: send minimalized version of the page instead the read mode res.sendFile(path.join(__dirname, "/dist/404.html"));
// implementation draft: return;
// document.querySelectorAll("link").forEach((l) => { }
// l.remove();
// });
// document.querySelectorAll("style").forEach((s) => { if (xhr.status !== 200) {
// s.remove; console.error("XHR request failed:", xhr.status, xhr.statusText);
// }); return;
}
// document.querySelectorAll("script").forEach((s) => { const response = xhr.responseText;
// s.remove(); const { document } = parseHTML(response);
// });
// // @ts-ignore if (!isProbablyReaderable(document)) {
// const jsonDocument = document.toJSON(); // TODO: still a lot of bugs, must be refined to handle some cases, like
// cookie banners, etc.
document.querySelectorAll("link").forEach((l) => {
l.remove();
});
// const cleanDocument = parseJSON(jsonDocument); document.querySelectorAll("style").forEach((s) => {
// return res.send(document.toString()); s.remove;
});
return res.sendFile(path.join(__dirname, "/dist/not_blazed.html")); document.querySelectorAll("script").forEach((s) => {
} s.remove();
});
//TODO: find if there are more performant ways to remove images or evaluate if is the case to remove images const blazeDisclaimer = document.createElement("div");
document.querySelectorAll("img").forEach((img) => img.remove()); blazeDisclaimer.style.width = "100dvw";
blazeDisclaimer.style.border = "1px solid red";
blazeDisclaimer.style.padding = "1rem";
blazeDisclaimer.innerHTML = `
<h2 style="text-align: center">BLAZE INFO</h2>
<p>
The page you are seeing <strong>could not be correctly blazed</strong> due to these webpage characteristics.
<strong>Blaze served anyway</strong> a lightweight version of the page.
Keep in mind that this kind of pages <strong>can be hard or even impossible to use, read or understand</strong>.
</p>
`;
const reader = new Readability(document); const referenceElement = document.body.firstChild;
const article = reader.parse(); document.body.insertBefore(blazeDisclaimer, referenceElement);
if (!article) { return res.send(document.toString());
return res.send("Something went wrong"); }
}
const blazedPage = `<html><head> //TODO: find if there are more performant ways to remove images or evaluate if is the case to remove images
<meta charset="UTF-8" /> document.querySelectorAll("img").forEach((img) => img.remove());
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>body {font-family: sans-serif}</style>
</head>
<body>
${article.content}
<script>
${injectBlazeToPageLinks}
const url = "${blazeUrl}"
const currentUrl = "${req.query.url}"
injectBlazeToPageLinks(url, currentUrl)
</script>
</body></html>
`;
const minifiedBlazedPage = minify(blazedPage, minifierOptions); const reader = new Readability(document);
const article = reader.parse();
res.send(minifiedBlazedPage); if (!article) {
return res.send("Something went wrong");
}
const blazedPage = `<html><head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>body {font-family: sans-serif}</style>
</head>
<body>
${article.content}
<script>
${injectBlazeToPageLinks}
const url = "${blazeUrl}"
const currentUrl = "${req.query.url}"
injectBlazeToPageLinks(url, currentUrl)
</script>
</body></html>
`;
const minifiedBlazedPage = minify(blazedPage, minifierOptions);
res.send(minifiedBlazedPage);
};
xhr.send();
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} }

8
utils.ts
View File

@ -23,3 +23,11 @@ export function injectBlazeToPageLinks(blazeUrl: string, currentUrl: string) {
}); });
}); });
} }
export function blazeFunctionality(blazeUrl: string) {
const t = document.querySelector("button"),
c = document.querySelector("input");
t!.addEventListener("click", () => {
location.href = blazeUrl + "?q=" + encodeURI(c.value);
});
}