cupcakearmy/blaze
1
0
Fork 0
mirror of https://github.com/cupcakearmy/blaze.git synced 2025-12-09 04:35:00 +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
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>