A fast, local-first "redirection engine" for !bang users with a few extra features ^-^
dunkirk.sh
1import { storage } from "./libs";
2import { CONSTANTS } from "./main";
3
4const createTemplate = (data: { searchCount: string }) => `
5 <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh;">
6 <header style="position: absolute; top: 1rem; width: 100%;">
7 <div style="display: flex; justify-content: space-between; padding: 0 1rem;">
8 <span>${data.searchCount} ${data.searchCount === "1" ? "search" : "searches"}</span>
9 </div>
10 </header>
11 <div class="content-container">
12 <h1 id="cutie">${CONSTANTS.CUTIES.NOTFOUND[Math.floor(Math.random() * CONSTANTS.CUTIES.NOTFOUND.length)]}</h1>
13 <p>404 Page not found</p>
14 </div>
15 <footer class="footer">
16 made with ♥ by <a href="https://github.com/taciturnaxolotl" target="_blank">Kieran Klukas</a> as <a href="https://github.com/taciturnaxolotl/unduck" target="_blank">open source</a> software
17 </footer>
18 </div>
19`;
20
21export default function notFoundPageRender() {
22 const searchCount =
23 storage.get(CONSTANTS.LOCAL_STORAGE_KEYS.SEARCH_COUNT) || "0";
24 const app = document.querySelector<HTMLDivElement>("#app");
25 if (!app) throw new Error("App element not found");
26
27 app.innerHTML = createTemplate({
28 searchCount,
29 });
30}