mirror of
https://github.com/cupcakearmy/blaze.git
synced 2024-12-22 16:26:26 +00:00
remove status quo
This commit is contained in:
parent
8a5746f27e
commit
f77ddf3c35
3
.gitignore
vendored
3
.gitignore
vendored
@ -1,3 +0,0 @@
|
|||||||
node_modules
|
|
||||||
*.js
|
|
||||||
.env
|
|
13
.vscode/launch.json
vendored
13
.vscode/launch.json
vendored
@ -1,13 +0,0 @@
|
|||||||
{
|
|
||||||
"version": "0.2.0",
|
|
||||||
"configurations": [
|
|
||||||
{
|
|
||||||
"name": "Chromium",
|
|
||||||
"type": "chrome",
|
|
||||||
"request": "launch",
|
|
||||||
"url": "http://localhost:8888",
|
|
||||||
"webRoot": "${workspaceRoot}",
|
|
||||||
"runtimeExecutable": "/Applications/Chromium.app/Contents/MacOS/chromium"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
27
dist/404.html
vendored
27
dist/404.html
vendored
@ -1,27 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.svg" />
|
|
||||||
<title>Blaze - 404</title>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: sans-serif;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100dvh;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>404</h1>
|
|
||||||
<br />
|
|
||||||
<a href="#" role="button" onclick="history.back()">Go back</a>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
79
dist/index.html
vendored
79
dist/index.html
vendored
@ -1,79 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
||||||
<meta
|
|
||||||
name="description"
|
|
||||||
content="Blaze: The search engine for seamless browsing in challenging connections. Discover fast results and access online content efficiently."
|
|
||||||
/>
|
|
||||||
<meta http-equiv="Cache-control" content="public" />
|
|
||||||
<title>Blaze</title>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: sans-serif;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100dvh;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
footer,
|
|
||||||
section {
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
button,
|
|
||||||
input {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
width: 100%;
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<section>
|
|
||||||
<h1>BLA⚡E</h1>
|
|
||||||
<input
|
|
||||||
name="u"
|
|
||||||
id="u"
|
|
||||||
type="text"
|
|
||||||
placeholder="Search something..."
|
|
||||||
/><br /><br /><button>BLAZE IT!</button>
|
|
||||||
</section>
|
|
||||||
<footer>
|
|
||||||
<a href="/info">What is this?</a>
|
|
||||||
<a href="https://www.buymeacoffee.com/dannyspina">Buy me a 🍺</a>
|
|
||||||
</footer>
|
|
||||||
<script>
|
|
||||||
const DEV = 0,
|
|
||||||
e = DEV ? "http://localhost:8888" : "https://blaze.cyclic.app",
|
|
||||||
t = document.querySelector("button"),
|
|
||||||
c = document.querySelector("input");
|
|
||||||
t.addEventListener("click", () => {
|
|
||||||
location.href = e + "?q=" + encodeURIComponent(c.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
if ("serviceWorker" in navigator) {
|
|
||||||
navigator.serviceWorker
|
|
||||||
.register("/service-worker.js")
|
|
||||||
.catch((error) => {
|
|
||||||
console.log(
|
|
||||||
"Something went wrong with installation of the service worker:",
|
|
||||||
error
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
89
dist/info.html
vendored
89
dist/info.html
vendored
@ -1,89 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
||||||
<meta
|
|
||||||
name="description"
|
|
||||||
content="Discover Blaze, the search engine for seamless browsing in any connection condition. Minimize bandwidth with minimalist page rendering. Enhance your browsing experience."
|
|
||||||
/>
|
|
||||||
<title>Blaze - info</title>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: sans-serif;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h2>What is this site?</h2>
|
|
||||||
<p>
|
|
||||||
Blaze is an ultrafast search engine. The purpose of Blaze is to minimize
|
|
||||||
the transferred data between clients and servers, allowing users to
|
|
||||||
navigate the web in a minimalist manner.
|
|
||||||
</p>
|
|
||||||
<h2>Why?</h2>
|
|
||||||
<p>
|
|
||||||
One day, I exceeded my monthly data limit for high-speed browsing. As a
|
|
||||||
consequence, my internet speed was significantly reduced. Consequently,
|
|
||||||
web pages took an extremely long time to load, and I encountered timeout
|
|
||||||
errors 90% of the time. It was at that moment that I contemplated a
|
|
||||||
solution to this issue and conceived the idea of Blaze. Now, I can surf
|
|
||||||
the web super fast and access the information I need even without a
|
|
||||||
high-speed connection.
|
|
||||||
</p>
|
|
||||||
<h2>How?</h2>
|
|
||||||
<p>
|
|
||||||
It's actually very straightforward. When you click on "BLAZE IT!", the URL
|
|
||||||
changes to https://blaze.cyclic.app?q= followed by the query you searched
|
|
||||||
for. This address is where the backend is hosted. When the site is
|
|
||||||
accessed with the "q" parameter, a simple Node.js application retrieves
|
|
||||||
the search results and generates an extremely lightweight version of SERP
|
|
||||||
(Search Engine Results Page). From there, if you click on a link, it will
|
|
||||||
be parsed and a page will be generated with only the content (I used the
|
|
||||||
same library that Firefox uses to generate the reader mode). This makes it
|
|
||||||
possible to navigate using only a few kilobytes of data instead of
|
|
||||||
megabytes. <br /><br />If you are offline yopu can see the pages you
|
|
||||||
already visited, and also if you are online, those pages will be cached
|
|
||||||
and blazing fast. <br /><br />If you want a more detailed explanantion on
|
|
||||||
how Blaze works under the hood, I suggest you to
|
|
||||||
<a href="https://github.com/daaanny90/blaze-this-page"
|
|
||||||
>check the gitub repo</a
|
|
||||||
>
|
|
||||||
(if you have a fast connection).
|
|
||||||
</p>
|
|
||||||
<h2>Does it work?</h2>
|
|
||||||
<p>
|
|
||||||
Yes, even with a poor internet connection, you can search for things and
|
|
||||||
load pages extremely quickly. When you click on "BLAZE IT!" and select a
|
|
||||||
search result, you receive a webpage that is only a few kilobytes in size
|
|
||||||
instead of several megabytes. This makes it possible to load the page even
|
|
||||||
under challenging connection conditions, effectively preventing timeout
|
|
||||||
errors from occurring. Moreover with the offline and caching support, the
|
|
||||||
pages you already visited throug Blaze will be... blazing fast.
|
|
||||||
</p>
|
|
||||||
<h2>Other implications</h2>
|
|
||||||
<p>
|
|
||||||
This project was born to address an issue with slow internet connections
|
|
||||||
while allowing continuous web surfing. During development, I discovered
|
|
||||||
several other positive implications. Browsing a lightweight and
|
|
||||||
minimalistic web puts less stress on the phone's battery and processor. It
|
|
||||||
is mostly free from ads, and it likely has other, albeit possibly minor,
|
|
||||||
impacts on the environment (e.g., reduced battery drain, decreased need
|
|
||||||
for frequent phone charging, and lower CO2 emissions). Moreover, Blaze can
|
|
||||||
serve as an "emergency search engine" for browsing the web in challenging
|
|
||||||
connection situations, and it can even be a lifesaver at times.
|
|
||||||
</p>
|
|
||||||
<h2>Open Source</h2>
|
|
||||||
<p>
|
|
||||||
<a href="https://github.com/daaanny90/blaze-this-page"
|
|
||||||
>The code is open source</a
|
|
||||||
>, and you can host your hown version of Blaze, or contribute to it.
|
|
||||||
</p>
|
|
||||||
<h2>Who I am?</h2>
|
|
||||||
<p>
|
|
||||||
I am Danny, you can learn more about me
|
|
||||||
<a href="https://dannyspina.com">on my website</a>
|
|
||||||
</p>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
42
dist/info_not_blazed.html
vendored
42
dist/info_not_blazed.html
vendored
@ -1,42 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.svg" />
|
|
||||||
<title>Blaze - ooops</title>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: sans-serif;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>Why are some pages unable to be blazed?</h1>
|
|
||||||
<p>
|
|
||||||
The purpose of Blaze is to allow users to navigate the web and access the
|
|
||||||
content they need even in challenging connection situations or when
|
|
||||||
seeking a minimalistic resource and data usage. However, generating a
|
|
||||||
"pure HTML only content page" from every page is not always possible.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Blaze utilizes the same library that Firefox uses to generate the "read
|
|
||||||
mode" of a page, providing a distraction-free and minimalist version for
|
|
||||||
better content absorption. However, this library is primarily designed for
|
|
||||||
reading purposes. Therefore, when navigating to websites like Amazon that
|
|
||||||
do not contain readable content, Blaze cannot generate a minimalistic
|
|
||||||
version of the website.
|
|
||||||
</p>
|
|
||||||
<h2>But the page was an article/blog post!</h2>
|
|
||||||
<p>
|
|
||||||
In such cases, it is possible that Blaze has detected a false positive. It
|
|
||||||
would be greatly appreciated
|
|
||||||
<a href="mailto:support.blaze@dannyspina.com"
|
|
||||||
>if you could provide the URL of the page</a
|
|
||||||
>
|
|
||||||
where you encountered this message while expecting it to work. This
|
|
||||||
information will help me reduce false positives for other users as well.
|
|
||||||
</p>
|
|
||||||
<a href="/">Back to blaze</a>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
28
dist/not_blazed.html
vendored
28
dist/not_blazed.html
vendored
@ -1,28 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.svg" />
|
|
||||||
<title>Blaze</title>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: sans-serif;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100dvh;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h2>This page can not be blazed... Sorry!</h2>
|
|
||||||
<a href="/ooops">Why does not work?</a>
|
|
||||||
<br />
|
|
||||||
<a href="#" role="button" onclick="history.back()">Go back</a>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
3
dist/styles/serp.css
vendored
3
dist/styles/serp.css
vendored
@ -1,3 +0,0 @@
|
|||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
@ -1,3 +0,0 @@
|
|||||||
<svg height="100" width="100">
|
|
||||||
<circle cx="50" cy="50" r="40" />
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 73 B |
324
index.ts
324
index.ts
@ -1,324 +0,0 @@
|
|||||||
import express from "express";
|
|
||||||
import { Readability, isProbablyReaderable } from "@mozilla/readability";
|
|
||||||
import got from "got";
|
|
||||||
import path from "path";
|
|
||||||
import { fileURLToPath } from "url";
|
|
||||||
import "dotenv/config";
|
|
||||||
import { parseHTML, parseJSON } from "linkedom";
|
|
||||||
// @ts-ignore
|
|
||||||
import XHR2 from "xhr2";
|
|
||||||
const XMLHttpRequest = XHR2.XMLHttpRequest;
|
|
||||||
import { minify } from "html-minifier";
|
|
||||||
import {
|
|
||||||
blazeFunctionality,
|
|
||||||
blazeUrl,
|
|
||||||
highlightBlazedLinks,
|
|
||||||
injectBlazeToPageLinks,
|
|
||||||
} from "./utils.js";
|
|
||||||
import etag from "etag";
|
|
||||||
import compression from "compression";
|
|
||||||
import fs from "fs";
|
|
||||||
|
|
||||||
const app = express();
|
|
||||||
const port = 8888;
|
|
||||||
|
|
||||||
const minifierOptions = {
|
|
||||||
collapseWhitespace: true,
|
|
||||||
removeComments: true,
|
|
||||||
removeOptionalTags: true,
|
|
||||||
removeRedundantAttributes: true,
|
|
||||||
removeScriptTypeAttributes: true,
|
|
||||||
removeTagWhitespace: true,
|
|
||||||
useShortDoctype: true,
|
|
||||||
minifyCSS: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
const __filename = fileURLToPath(import.meta.url);
|
|
||||||
|
|
||||||
const __dirname = path.dirname(__filename);
|
|
||||||
|
|
||||||
// Middlewares
|
|
||||||
app.use(compression());
|
|
||||||
app.use((req, res, next) => {
|
|
||||||
res.set("Cache-Control", "public, max-age=60000");
|
|
||||||
res.set("Service-Worker-Allowed", "/");
|
|
||||||
next();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Routes
|
|
||||||
app.get("/", async (req, res) => {
|
|
||||||
const searchEngine = "https://api.search.brave.com/res/v1/web/search";
|
|
||||||
const query = req.query.q as string;
|
|
||||||
|
|
||||||
if (!query) {
|
|
||||||
return res.sendFile(path.join(__dirname, "/index.html"));
|
|
||||||
}
|
|
||||||
|
|
||||||
const key = process.env.CYCLIC_BRAVE_KEY;
|
|
||||||
|
|
||||||
if (!key) {
|
|
||||||
throw new Error("No brave key found");
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const xhr = new XMLHttpRequest();
|
|
||||||
const formattedQuery = encodeURIComponent(query);
|
|
||||||
xhr.open(
|
|
||||||
"GET",
|
|
||||||
`${searchEngine}?q=${formattedQuery}&safesearch=moderate`,
|
|
||||||
true
|
|
||||||
);
|
|
||||||
xhr.setRequestHeader("Accept", "*/*");
|
|
||||||
xhr.setRequestHeader("X-Subscription-Token", key);
|
|
||||||
|
|
||||||
xhr.onreadystatechange = () => {
|
|
||||||
if (xhr.readyState !== 4) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (xhr.status !== 200) {
|
|
||||||
console.error("XHR request failed:", xhr.status, xhr.statusText);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const data = JSON.parse(xhr.responseText);
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
const results = data.web.results.map(
|
|
||||||
(result: any) => `
|
|
||||||
<article>
|
|
||||||
<h2><a href="${blazeUrl}/blazed?url=${result.url}">
|
|
||||||
${result.title}
|
|
||||||
</a></h2>
|
|
||||||
<span>${result.meta_url.hostname}</span>
|
|
||||||
<p>${result.description}</p>
|
|
||||||
</article>
|
|
||||||
<hr />
|
|
||||||
`
|
|
||||||
);
|
|
||||||
|
|
||||||
const html = `
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.svg" />
|
|
||||||
<link rel="stylesheet" href="/styles/serp.css" media="print" onload="this.media='all'">
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
||||||
<title>Blaze - ${query}</title>
|
|
||||||
<style>
|
|
||||||
body {font-family:sans-serif}
|
|
||||||
h2 {margin-bottom:0}
|
|
||||||
span {font-size:.9rem}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<label>
|
|
||||||
<a href="/"><strong>BLAZE</strong></a>
|
|
||||||
<input type="search" value="${query}" />
|
|
||||||
<button>Blaze it</button>
|
|
||||||
</label>
|
|
||||||
</header>
|
|
||||||
<hr/>
|
|
||||||
${results.join("")}
|
|
||||||
<script>
|
|
||||||
${blazeFunctionality}
|
|
||||||
${highlightBlazedLinks}
|
|
||||||
|
|
||||||
blazeFunctionality('${blazeUrl}')
|
|
||||||
const links = document.querySelectorAll('a')
|
|
||||||
highlightBlazedLinks(links)
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const minifiedSerp = minify(html, minifierOptions);
|
|
||||||
res.set("X-Blaze-Etag", etag(minifiedSerp));
|
|
||||||
res.send(minifiedSerp);
|
|
||||||
} catch (e) {
|
|
||||||
console.log("Error during html minifier:", e);
|
|
||||||
res.sendFile(path.join(__dirname, "/not_blazed.html"));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
xhr.send();
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
app.get("/blazed", async (req, res) => {
|
|
||||||
const pageToBlaze = req.query.url as string;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const xhr = new XMLHttpRequest();
|
|
||||||
xhr.open("GET", pageToBlaze, true);
|
|
||||||
xhr.setRequestHeader("Accept", "text/html");
|
|
||||||
|
|
||||||
xhr.onreadystatechange = async () => {
|
|
||||||
if (xhr.readyState !== 4) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (xhr.status === 404) {
|
|
||||||
res.sendFile(path.join(__dirname, "/404.html"));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (xhr.status !== 200) {
|
|
||||||
console.error("XHR request failed:", xhr.status, xhr.statusText);
|
|
||||||
res.send(
|
|
||||||
minify(
|
|
||||||
`
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
||||||
<title>Blaze - error</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div style="text-align: center; display: flex; align-items: center; flex-direction: column; justify-content: center; font-family: sans-serif; width: 100%; height: 100%">
|
|
||||||
<h1>Blaze could not load the page :(</h1>
|
|
||||||
<p>Reason: <code>${xhr.status} ${xhr.statusText}</code></p>
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<p>
|
|
||||||
If you want (it would be great!) you can report this problem, writing the requested URL and the reason,
|
|
||||||
at <a href="mailto:support.blaze@dannyspina.com">support.blaze@dannyspina.com</a>
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a href="#" role="button" onclick="history.back()">Go back</a>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
`,
|
|
||||||
minifierOptions
|
|
||||||
)
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const response = xhr.responseText;
|
|
||||||
const { document } = parseHTML(response);
|
|
||||||
|
|
||||||
if (!isProbablyReaderable(document)) {
|
|
||||||
// TODO: still a lot of bugs, must be refined to handle some cases, like
|
|
||||||
// cookie banners, etc.
|
|
||||||
document.querySelectorAll("link").forEach((l) => {
|
|
||||||
l.remove();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelectorAll("style").forEach((s) => {
|
|
||||||
s.remove();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelectorAll("script").forEach((s) => {
|
|
||||||
s.remove();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelectorAll("img").forEach((i) => {
|
|
||||||
i.remove();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelectorAll("iframe").forEach((f) => {
|
|
||||||
f.remove();
|
|
||||||
});
|
|
||||||
|
|
||||||
const blazeDisclaimer = document.createElement("div");
|
|
||||||
blazeDisclaimer.style.width = "100dvw";
|
|
||||||
blazeDisclaimer.style.border = "1px solid red";
|
|
||||||
blazeDisclaimer.style.padding = "1rem";
|
|
||||||
blazeDisclaimer.style.textAlign = "center";
|
|
||||||
blazeDisclaimer.innerHTML = `
|
|
||||||
<h2>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 referenceElement = document.body.firstChild;
|
|
||||||
document.body.insertBefore(blazeDisclaimer, referenceElement);
|
|
||||||
|
|
||||||
const blazedPage = minify(document.toString(), minifierOptions);
|
|
||||||
|
|
||||||
return res.send(blazedPage);
|
|
||||||
}
|
|
||||||
|
|
||||||
//TODO: find if there are more performant ways to remove images or evaluate if is the case to remove images
|
|
||||||
document.querySelectorAll("img").forEach((img) => img.remove());
|
|
||||||
|
|
||||||
const reader = new Readability(document);
|
|
||||||
const article = reader.parse();
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
${highlightBlazedLinks}
|
|
||||||
const links = document.querySelectorAll('a')
|
|
||||||
highlightBlazedLinks(links)
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
`;
|
|
||||||
|
|
||||||
const minifiedBlazedPage = minify(blazedPage, minifierOptions);
|
|
||||||
|
|
||||||
res.send(minifiedBlazedPage);
|
|
||||||
};
|
|
||||||
xhr.send();
|
|
||||||
} catch (err) {
|
|
||||||
console.log(err);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
app.get("/info", (_, res) => {
|
|
||||||
let Etag;
|
|
||||||
fs.readFile(path.join(__dirname + "/info.html"), "utf8", (err, data) => {
|
|
||||||
if (err) {
|
|
||||||
console.error(err);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
Etag = etag(data);
|
|
||||||
res.set("X-Blaze-Etag", Etag);
|
|
||||||
res.sendFile(path.join(__dirname + "/info.html"));
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
app.get("/ooops", (_, res) => {
|
|
||||||
res.sendFile(path.join(__dirname + "/info_not_blazed.html"));
|
|
||||||
});
|
|
||||||
|
|
||||||
app.get("/favicon.svg", (_, res) => {
|
|
||||||
res.sendFile(path.join(__dirname + "/favicon.svg"));
|
|
||||||
});
|
|
||||||
|
|
||||||
app.get("/service-worker.js", (_, res) => {
|
|
||||||
res.sendFile(path.join(__dirname + "/service-worker.js"));
|
|
||||||
});
|
|
||||||
|
|
||||||
app.get("/styles/serp.css", (_, res) => {
|
|
||||||
res.sendFile(path.join(__dirname + "/styles/serp.css"));
|
|
||||||
});
|
|
||||||
|
|
||||||
app.listen(port, () => {
|
|
||||||
console.log(`Got request`);
|
|
||||||
});
|
|
3776
package-lock.json
generated
3776
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
41
package.json
41
package.json
@ -1,41 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "blaze-this-page",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "The service to navigate the web also with bad connectivity",
|
|
||||||
"main": "index.ts",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1",
|
|
||||||
"start": "node ./dist/index.js",
|
|
||||||
"build": "npm run html-minify && npx tsc",
|
|
||||||
"dev": "concurrently \"npx tsc --watch\" \"nodemon -q ./dist/index.js\"",
|
|
||||||
"html-minify": "html-minifier --input-dir dist --output-dir dist --file-ext html --remove-comments --collapse-whitespace --minify-js true --minify-css true"
|
|
||||||
},
|
|
||||||
"author": "Danny Spina",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"@mozilla/readability": "^0.4.4",
|
|
||||||
"compression": "^1.7.4",
|
|
||||||
"dotenv": "^16.3.1",
|
|
||||||
"etag": "^1.8.1",
|
|
||||||
"express": "^4.18.2",
|
|
||||||
"fetch": "^1.1.0",
|
|
||||||
"got": "^13.0.0",
|
|
||||||
"html-minifier": "^4.0.0",
|
|
||||||
"linkedom": "^0.14.26",
|
|
||||||
"node-html-parser": "^6.1.5",
|
|
||||||
"xhr": "^2.6.0",
|
|
||||||
"xhr2": "^0.2.1"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@types/compression": "^1.7.2",
|
|
||||||
"@types/etag": "^1.8.1",
|
|
||||||
"@types/express": "^4.17.17",
|
|
||||||
"@types/html-minifier": "^4.0.2",
|
|
||||||
"@types/jsdom": "^21.1.1",
|
|
||||||
"@types/node": "^20.3.1",
|
|
||||||
"concurrently": "^8.2.0",
|
|
||||||
"nodemon": "^2.0.22",
|
|
||||||
"typescript": "^5.1.3"
|
|
||||||
},
|
|
||||||
"type": "module"
|
|
||||||
}
|
|
@ -1,62 +0,0 @@
|
|||||||
/// <reference no-default-lib="true"/>
|
|
||||||
/// <reference lib="esnext" />
|
|
||||||
/// <reference lib="WebWorker" />
|
|
||||||
|
|
||||||
interface Window extends ServiceWorkerGlobalScope {}
|
|
||||||
const sw: ServiceWorkerGlobalScope = self as any;
|
|
||||||
|
|
||||||
sw.addEventListener("install", (event: ExtendableEvent) => {
|
|
||||||
event.waitUntil(
|
|
||||||
caches.open("blaze").then((cache) => {
|
|
||||||
return cache.addAll(["/"]);
|
|
||||||
})
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
// TODO: I had to use any, the solutions above (references) were ineffective
|
|
||||||
// (but un the install works).
|
|
||||||
// must be fixed.
|
|
||||||
self.addEventListener("fetch", (event: any) => {
|
|
||||||
event.respondWith(
|
|
||||||
fetch(event.request)
|
|
||||||
.then((networkResponse) => {
|
|
||||||
if (networkResponse.status === 200) {
|
|
||||||
const currentEtag = networkResponse.headers.get("X-Blaze-Etag");
|
|
||||||
return caches.open("blaze").then((cache) => {
|
|
||||||
return cache.match(event.request).then((cachedResponse) => {
|
|
||||||
const cachedEtag = cachedResponse
|
|
||||||
? cachedResponse.headers.get("X-Blaze-Etag")
|
|
||||||
: null;
|
|
||||||
if (cachedResponse && currentEtag === cachedEtag) {
|
|
||||||
return cachedResponse;
|
|
||||||
} else {
|
|
||||||
return cache
|
|
||||||
.put(event.request, networkResponse.clone())
|
|
||||||
.then(() => {
|
|
||||||
return networkResponse;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
return networkResponse;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
return caches.open("blaze").then((cache) => {
|
|
||||||
return cache
|
|
||||||
.match(event.request)
|
|
||||||
.then((cachedResponse) => {
|
|
||||||
if (cachedResponse) {
|
|
||||||
return cachedResponse;
|
|
||||||
} else {
|
|
||||||
return new Response("You are offline");
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
return new Response("An error occurred");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})
|
|
||||||
);
|
|
||||||
});
|
|
114
tsconfig.json
114
tsconfig.json
@ -1,114 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
/* Visit https://aka.ms/tsconfig to read more about this file */
|
|
||||||
/* Projects */
|
|
||||||
// "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
|
|
||||||
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
|
|
||||||
// "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
|
|
||||||
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
|
|
||||||
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
|
|
||||||
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
|
|
||||||
/* Language and Environment */
|
|
||||||
"target": "es2021", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
|
|
||||||
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
|
|
||||||
// "jsx": "preserve", /* Specify what JSX code is generated. */
|
|
||||||
// "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
|
|
||||||
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
|
|
||||||
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
|
|
||||||
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
|
|
||||||
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
|
|
||||||
// "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
|
|
||||||
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
|
|
||||||
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
|
|
||||||
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
|
|
||||||
/* Modules */
|
|
||||||
// "module": "commonjs", /* Specify what module code is generated. */
|
|
||||||
"rootDir": "./", /* Specify the root folder within your source files. */
|
|
||||||
"moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
|
|
||||||
"baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
|
|
||||||
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
|
|
||||||
"paths": {
|
|
||||||
"got": [
|
|
||||||
"./node_modules/got/dist/source"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
|
|
||||||
// "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
|
|
||||||
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
|
|
||||||
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
|
|
||||||
// "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
|
|
||||||
// "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
|
|
||||||
// "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */
|
|
||||||
// "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */
|
|
||||||
// "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
|
|
||||||
// "resolveJsonModule": true, /* Enable importing .json files. */
|
|
||||||
// "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */
|
|
||||||
// "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
|
|
||||||
/* JavaScript Support */
|
|
||||||
"allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
|
|
||||||
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
|
|
||||||
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
|
|
||||||
/* Emit */
|
|
||||||
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
|
|
||||||
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
|
|
||||||
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
|
|
||||||
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
|
|
||||||
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
|
|
||||||
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
|
|
||||||
"outDir": "./dist", /* Specify an output folder for all emitted files. */
|
|
||||||
// "removeComments": true, /* Disable emitting comments. */
|
|
||||||
// "noEmit": true, /* Disable emitting files from a compilation. */
|
|
||||||
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
|
|
||||||
// "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */
|
|
||||||
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
|
|
||||||
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
|
|
||||||
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
|
|
||||||
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
|
|
||||||
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
|
|
||||||
// "newLine": "crlf", /* Set the newline character for emitting files. */
|
|
||||||
// "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
|
|
||||||
// "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
|
|
||||||
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
|
|
||||||
// "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
|
|
||||||
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
|
|
||||||
// "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
|
|
||||||
/* Interop Constraints */
|
|
||||||
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
|
|
||||||
// "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
|
|
||||||
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
|
|
||||||
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
|
|
||||||
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
|
|
||||||
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
|
|
||||||
/* Type Checking */
|
|
||||||
"strict": true, /* Enable all strict type-checking options. */
|
|
||||||
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
|
|
||||||
// "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
|
|
||||||
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
|
|
||||||
// "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
|
|
||||||
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
|
|
||||||
// "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
|
|
||||||
// "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
|
|
||||||
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
|
|
||||||
// "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
|
|
||||||
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
|
|
||||||
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
|
|
||||||
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
|
|
||||||
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
|
|
||||||
// "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
|
|
||||||
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
|
|
||||||
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
|
|
||||||
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
|
|
||||||
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
|
|
||||||
/* Completeness */
|
|
||||||
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
|
|
||||||
"skipLibCheck": true /* Skip type checking all .d.ts files. */
|
|
||||||
},
|
|
||||||
"include": [
|
|
||||||
"index.ts",
|
|
||||||
"utils.ts",
|
|
||||||
"service-worker.ts"
|
|
||||||
],
|
|
||||||
"exclude": [
|
|
||||||
"node_modules"
|
|
||||||
]
|
|
||||||
}
|
|
54
utils.ts
54
utils.ts
@ -1,54 +0,0 @@
|
|||||||
export const blazeUrl = process.env.DEV_MODE
|
|
||||||
? "http://localhost:8888"
|
|
||||||
: "https://blaze.cyclic.app";
|
|
||||||
|
|
||||||
export function injectBlazeToPageLinks(blazeUrl: string, currentUrl: string) {
|
|
||||||
const url = new URL(currentUrl);
|
|
||||||
const re = new RegExp("^(http|https)://", "i");
|
|
||||||
window.addEventListener("DOMContentLoaded", () => {
|
|
||||||
const links = document.querySelectorAll("a");
|
|
||||||
links.forEach((link) => {
|
|
||||||
let originalHref = link.getAttribute("href");
|
|
||||||
|
|
||||||
if (!originalHref) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const isAbsoluteLink = re.test(originalHref);
|
|
||||||
if (!isAbsoluteLink) {
|
|
||||||
originalHref = `${url.protocol}//${url.hostname}${originalHref}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
link.setAttribute("href", `${blazeUrl}/blazed?url=${originalHref}`);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function blazeFunctionality(blazeUrl: string) {
|
|
||||||
const t = document.querySelector("button"),
|
|
||||||
c = document.querySelector("input");
|
|
||||||
t!.addEventListener("click", () => {
|
|
||||||
location.href = blazeUrl + "?q=" + encodeURIComponent(c!.value);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function highlightBlazedLinks(links: HTMLLinkElement[]) {
|
|
||||||
links.forEach((link) => {
|
|
||||||
if (
|
|
||||||
!link.href ||
|
|
||||||
link.href === "http://localhost:8888/" ||
|
|
||||||
link.href === "https://blaze.cyclic.app"
|
|
||||||
) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const url = new URL(link.href);
|
|
||||||
caches.open("blaze").then((cache) => {
|
|
||||||
cache.match(url.href).then((response) => {
|
|
||||||
if (response) {
|
|
||||||
link.innerHTML = `${link.textContent} ⚡`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user