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

Fix frontend + info page

Browse Source
This commit is contained in:
Danny Spina 2023-06-19 14:55:28 +02:00
parent d0c84b18db
commit 65639a233b
3 changed files with 6 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
dist/index.html vendored
View File

@ -1,65 +1 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Blaze The Page</title>
</head>
<body>
<h1>Welcome to Blaze the Page</h1>
<label for="u">URL to blaze</label
><input name="u" id="u" type="text" placeholder="Write an URL..." /><button>
BLAZE IT!
</button>
<hr />
<h2>What?</h2>
<p>
What is "Blaze the page"? It is a small service that provides a minimal
version of a web page. Simply paste a URL and click the button to obtain
an extremely lightweight version of the page, concentrating solely on the
content.
</p>
<h2>Why?</h2>
<p>
One day, I exceeded my monthly data limit for high-speed browsing.
Consequently, my internet speed was reduced significantly. As a result,
web pages took an extremely long time to load, and I encountered timeout
errors 90% of the time. It was at that moment I contemplated a solution to
this issue and conceived the idea of Blaze this page.
</p>
<h3>How?</h3>
<p>
It's actually very straightforward. When you click on "BLAZE IT!", the URL
changes to https://ill-red-skunk-wig.cyclic.app?at= followed by the URL
you pasted. This address is where the backend is hosted. When the site is
accessed with the "at" parameter, a simple Node.js application retrieves
the content and generates an extremely lightweight version of the page,
retaining only the essential elements: the content. This minimal page is
the result of the request and will be displayed in your browser.
</p>
<h3>Does it work?</h3>
<p>
Yes. The purpose of keeping this page as minimal as possible is to make it
significantly lighter than a typical webpage. As a result, even with a
poor internet connection, you can load this page relatively quickly. When
you click on "BLAZE IT!", you receive a webpage that is only a few
kilobytes in size instead of several megabytes. This makes it feasible to
load the page even under challenging connection conditions, preventing
timeout errors from occurring.
</p>
<script>
const DEV_MODE = false
let url = "https://ill-red-skunk-wig.cyclic.app"
if (DEV_MODE) {
url = "http://localhost:8888"
}
const b = document.querySelector("button"),
i = document.querySelector("input");
b.addEventListener("click", () => {
location.href = `${url}?q=${encodeURI(i.value)}`;
});
</script>
</body>
</html>
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width,initial-scale=1"/> <title>Blaze The Page</title> <style>body{text-align: center; display: flex; align-items: center; justify-content: center; height: 100dvh; margin: 0; padding: 0; flex-direction: column;}section, footer{margin-top: auto;}</style> </head> <body> <section> <h1>Blaze</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> </footer> <script>const DEV=0,e=DEV?"http://localhost:8888":"https://ill-red-skunk-wig.cyclic.app",t=document.querySelector("button"),c=document.querySelector("input");t.addEventListener("click",(()=>{location.href=`${e}?q=${encodeURI(c.value)}`})); </script> </body></html>

1
dist/info.html vendored Normal file
View File

@ -0,0 +1 @@
<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><h3>How?</h3><p>It's actually very straightforward. When you click on "BLAZE IT!", the URL changes to https://ill-red-skunk-wig.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.</p><h3>Does it work?</h3><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.</p><h3>Other implications</h3><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><h3>Open Source</h3><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><h3>Who I am?</h3><p>I am Danny, you can learn more about me<a href="https://dannyspina.com">on my website</a></p>

4
index.ts
View File

@ -97,6 +97,10 @@ got(pageToBlaze)
});
})
app.get("/info", (_, res) => {
res.sendFile(path.join(__dirname + "/dist/info.html"));
})
app.listen(port, () => {
console.log(`Got request`);
});