commit b54e842be25efafb983936a4ce25e0e97c1df1aa
parent c0f847b6b912a0740d7bef4b71ab77f207948bc4
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date: Mon, 29 Jul 2024 14:36:39 +0200
feat: move custom css and js to external files
Diffstat:
5 files changed, 78 insertions(+), 74 deletions(-)
diff --git a/assets/css/custom.css b/assets/css/custom.css
@@ -0,0 +1,31 @@
+* {
+ scroll-behavior: smooth;
+}
+
+img, iframe {
+ height: auto;
+ width: 100%;
+ border: 0;
+}
+iframe {
+ aspect-ratio: 16/9;
+}
+
+a[href^="https"]:where([href*="www.youtube.com"])::after {
+ content: " \2197";
+}
+
+.thumbnails {
+ width: 100%;
+ aspect-ratio: 4/3;
+}
+
+#searchbar {
+ margin-top: 1em;
+ width: 100%;
+}
+
+details {
+ width: 100% !important;
+}
+
diff --git a/assets/js/thumbnails.js b/assets/js/thumbnails.js
@@ -0,0 +1,21 @@
+// Disable images
+function setThumbnails() {
+ if (sessionStorage.getItem("disable-thumbnails") == 1) {
+ document.querySelectorAll(".thumbnails").forEach(function(tn) {
+ tn.style = "display:none;";
+ });
+ } else {
+ document.querySelectorAll(".thumbnails").forEach(function(tn) {
+ tn.style = "display:unset;";
+ });
+ }
+}
+function toggleThumbnails() {
+ if (sessionStorage.getItem("disable-thumbnails") == 1) {
+ sessionStorage.setItem("disable-thumbnails", 0);
+ } else {
+ sessionStorage.setItem("disable-thumbnails", 1);
+ }
+ setThumbnails();
+}
+
diff --git a/assets/js/yt.js b/assets/js/yt.js
@@ -0,0 +1,17 @@
+// Embed Youtube Video
+function embed_yt(oid, vid) {
+ window.location = "#entry_" + oid;
+ var img = document.querySelector("#thumbnail_" + oid);
+ var player = document.createElement("iframe");
+ player.allowFullscreen = "true";
+ player.sandbox = "allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox";
+ player.width = "100%";
+ //player.height = "100%";
+ player.frameborder = "0";
+ player.scrolling = "no";
+ player.loading = "lazy";
+ player.src = "https://www.youtube-nocookie.com/embed/" +
+ vid;
+ img.replaceWith(player);
+}
+
diff --git a/reload.php b/reload.php
@@ -5,15 +5,11 @@
<!DOCTYPE html>
<html>
<head>
-<link rel="stylesheet" type="text/css" href="/assets/css/stylesheet.css"/>
-<meta http-equiv="Refresh" content="0; url='/'" />
+ <meta http-equiv="Refresh" content="0; url='/'" />
</head>
-<body class="list dark">
- <details>
- <summary>Logs</summary>
- <pre>
-<?php passthru("Rscript ./yt.R"); ?>
- </pre>
- </details>
+<body>
+ <pre>
+ <?php passthru("Rscript ./yt.R"); ?>
+ </pre>
</body>
</html>
diff --git a/template.html b/template.html
@@ -16,72 +16,11 @@
<link rel="icon" type="image/png" sizes="128x128" href="/assets/favicon_128.png">
<link rel="apple-touch-icon" href="/assets/favicon.png">
<link rel="stylesheet" type="text/css" href="/assets/css/simple.min.css"/>
+ <link rel="stylesheet" type="text/css" href="/assets/css/custom.css"/>
+ <script async src="assets/js/yt.js"></script>
+ <script src="assets/js/thumbnails.js"></script>
<link crossorigin="use-credentials" rel="manifest" href="/manifest.json">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <style>
- * { scroll-behavior: smooth; }
- img, iframe {
- height: auto;
- width: 100%;
- border: 0;
- }
- iframe {
- aspect-ratio: 16/9;
- }
- a[href^="https"]:where([href*="www.youtube.com"])::after {
- content: " \2197";
- }
- .thumbnails {
- width: 100%;
- aspect-ratio: 4/3;
- }
- #searchbar {
- width: 100%;
- }
- details {
- width: 100% !important;
- }
- </style>
- <script>
- // Embed Youtube Video
- function embed_yt(oid, vid) {
- window.location = "#entry_" + oid;
- var img = document.querySelector("#thumbnail_" + oid);
- var player = document.createElement("iframe");
- player.allowFullscreen = "true";
- player.sandbox = "allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox";
- player.width = "100%";
- //player.height = "100%";
- player.frameborder = "0";
- player.scrolling = "no";
- player.loading = "lazy";
- player.src = "https://www.youtube-nocookie.com/embed/" +
- vid;
- img.replaceWith(player);
- }
- // Disable images
- function setThumbnails() {
- if (sessionStorage.getItem("disable-thumbnails") == 1) {
- document.querySelectorAll(".thumbnails").forEach(function(tn) {
- tn.style = "display:none;";
- });
- } else {
- document.querySelectorAll(".thumbnails").forEach(function(tn) {
- tn.style = "display:unset;";
- });
- }
- }
- function toggleThumbnails() {
- if (sessionStorage.getItem("disable-thumbnails") == 1) {
- sessionStorage.setItem("disable-thumbnails", 0);
- } else {
- sessionStorage.setItem("disable-thumbnails", 1);
- }
- setThumbnails();
- }
-
- </script>
-
</head>
<body onload="setThumbnails();">
@@ -93,7 +32,7 @@
<a class="button" href="reload.php">Refresh</a>
</header>
- <form action="https://www.youtube.com/results" method="GET" style="width:100%;">
+ <form action="https://www.youtube.com/results" method="GET">
<input
id="searchbar"
type="text"
