Browse Source

improvements to ui & simpel scraper.

Jason Schwarzenberger 5 months ago
parent
commit
aba34c0dba
6 changed files with 65 additions and 13 deletions
  1. 1 1
      index.js
  2. 7 4
      public/index.html
  3. 2 0
      public/script.js
  4. 30 6
      public/style.css
  5. 4 2
      scraper/simple/get-details.js
  6. 21 0
      scripts/events-hack.js

+ 1 - 1
index.js

@@ -14,7 +14,7 @@ app.use(express.static('public'));
 
 app.get("/recent.json", async (_, res) => res.send(telegraph.keys().map((key) => telegraph.get(key))));
 
-app.use('/', headless.router());
+app.post('/', (req, res) => res.redirect(307, req.body.headless ? '/headless' : '/simple'));
 app.use('/headless', headless.router());
 app.use('/simple', simple.router());
 

+ 7 - 4
public/index.html

@@ -14,10 +14,13 @@
 		<h2>Keep <em>only</em> what matters.</h2>
 		<img class="loading" src="/loading.svg" alt="loading..." width="200" height="200" />
 		<h3 class="error">ERROR</h3>
-		<form action="/" method="POST" accept-charset="UTF-8" autocomplete="off"><input name="url"
-				placeholder="Enter article link" pattern="^https?:\/\/(www\.)?.*" required /><button value="true"
-				name="redirect" type="submit">view</button>
-		</form>
+		<form action="/" method="POST" accept-charset="UTF-8" autocomplete="off">
+			<div
+				><input type="url" name="url" placeholder="Enter article link" pattern="^https?:\/\/(www\.)?.*" required
+				/><button value="true" name="redirect" type="submit">view</button
+			></div>
+			<input type="checkbox" name="headless" id="headless" value="true" /><label for="headless">Use headless browser (slow)</label>
+	</form>
 	</header>
 	<section class="submitted-links"></section>
 	<footer></footer>

+ 2 - 0
public/script.js

@@ -10,6 +10,7 @@
       },
       body: JSON.stringify({
         url: e.target.url.value,
+        headless: e.target.headless.checked ? true : undefined
       }),
     })
       .then((response) => {
@@ -45,5 +46,6 @@
     return;
   }
   document.querySelector('input[name="url"]').value = query.url;
+  document.querySelector('input[name="headless"]').value = !!query.headless;
   document.querySelector("button").click();
 })();

+ 30 - 6
public/style.css

@@ -28,19 +28,27 @@ h2 {
 }
 
 form {
-  text-align: center;
   width: 95%;
-  border: solid 1px #aaa;
   margin: 3.5rem auto 0.5rem;
+}
+
+form div {
+  width: 100%;
+  text-align: center;
+  border: solid 1px #aaa;
   border-radius: 5px;
   overflow: hidden;
 }
 
-form:focus-within {
+form div:focus-within {
   box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25);
 }
 
-input {
+form div:has(input:focus) {
+  box-shadow: inset 0 0 0.2rem rgba(0, 0, 0, 0.2);
+}
+
+input[type="url"] {
   width: 85%;
   box-sizing: border-box;
   padding: 0.5rem;
@@ -53,8 +61,24 @@ input {
   vertical-align: middle;
 }
 
-form:has(input:focus) {
-  box-shadow: inset 0 0 0.2rem rgba(0, 0, 0, 0.2);
+input[type="checkbox"] {
+  vertical-align: middle;
+  opacity: 0.5;
+}
+
+input[type="checkbox"] + label {
+  font-size: 1rem;
+  vertical-align: middle;
+  opacity: 0.5;
+}
+
+input[type="checkbox"]:checked,
+input[type="checkbox"]:checked + label,
+input[type="checkbox"]:hover,
+input[type="checkbox"]:hover + label,
+input[type="checkbox"]:hover + label:hover,
+input[type="checkbox"] + label:hover {
+  opacity: 1;
 }
 
 button {

+ 4 - 2
scraper/simple/get-details.js

@@ -44,13 +44,15 @@ module.exports.getDetails = async (url) => {
 		window.setInterval = cb => cb();
 		const context = createContext(window);
 
+		new Script(`window.dispatchEvent(new window.Event('DOMContentLoaded'));`).runInContext(context);
+		await runScript('scripts/events-hack.js', context);
 		await runScript('vendor/bypass-paywalls-chrome/src/js/contentScript.js', context);
 		await runScript('scripts/lazyload.js', context);
 		await runScript('scripts/cosmetic-filter.js', context);
 		await runScript('scripts/fix-relative-links.js', context);
+		new Script(`window.dispatchEvent(new window.Event('DOMContentLoaded'));`).runInContext(context);
+		new Script(`window.__declutterTrigger('DOMContentLoaded');`).runInContext(context);
 
-		const script = new Script(`window.dispatchEvent(new window.Event('DOMContentLoaded'));`);
-		script.runInContext(context);
 		const html = context.document.querySelector('html').innerHTML;
 
 		const readable = await extractReadable(html, url);

+ 21 - 0
scripts/events-hack.js

@@ -0,0 +1,21 @@
+window.__declutterEventQueue = {};
+window.__declutterDOMContentLoaded = false;
+window.__addEventListener = window.document.addEventListener;
+window.document.addEventListener = function (event, handler) {
+	if (event.toLowerCase() === 'domcontentloaded') {
+		event = 'DOMContentLoaded';
+	}
+	if (!window.__declutterDOMContentLoaded && event == 'DOMContentLoaded') {
+		window.__declutterEventQueue[event] = window.__declutterEventQueue[event] || [];
+		window.__declutterEventQueue[event].push(handler);
+	}
+	try { handler(); } catch (e) { }
+};
+window.__declutterTrigger = function (event) {
+	if (event === 'DOMContentLoaded') {
+		window.__declutterDOMContentLoaded = true;
+	}
+	if (window.__declutterEventQueue[event] && window.__declutterEventQueue[event].map) {
+		window.__declutterEventQueue[event].map(c => { try { c() } catch (e) { } });
+	}
+};