restructured and simplified favicon

bunfig.toml

@@ -1,3 +1,5 @@
+preload = ["./image-plugin.ts"]
+
 [install.scopes]
 "@jsr" = "https://npm.jsr.io"
 

image-plugin.ts

@@ -0,0 +1,30 @@
+import { plugin, type BunPlugin } from "bun";
+import { readFileSync } from 'fs';
+
+const imageLoaderPlugin: BunPlugin = {
+  name: "image-loader",
+  setup(builder) {
+    builder.onLoad({ filter: /\.(png|jpg|jpeg|webp)/ }, async ({ path }) => {
+      try {
+        const file = Bun.file(path);
+        const bytes = await file.bytes();
+        return {
+          exports: { default: bytes },
+          loader: "object",
+        }
+      } catch (err) {
+        console.error(err);
+        if (err instanceof Error) {
+          throw new Error(`Failed to load file: ${err.message}`);
+        } else if (typeof err === 'string') {
+          throw new Error(`Failed to load file: ${err}`);
+        }
+        throw new Error("Failed to load file");
+      }
+    });
+  }
+};
+
+plugin(imageLoaderPlugin);
+
+export default imageLoaderPlugin;

src/client/components/login.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-  import { userstate } from '../shared.svelte';
+  import { userstate } from '@client/shared.svelte';
   import InputEmail from './input-email.svelte';
   import InputPassword from './input-password.svelte';
 
-  async function handleSubmit(event: SubmitEvent & { currentTarget: EventTarget & HTMLFormElement }) {
+  async function handleSubmit(
+    event: SubmitEvent & { currentTarget: EventTarget & HTMLFormElement }
+  ) {
     event.preventDefault();
     const form = event.currentTarget;
     const formData = new FormData(form);

src/client/components/progress-table.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+  import { fetchEntries, formatter } from '@client/util';
   import { cubicInOut } from 'svelte/easing';
   import { fade } from 'svelte/transition';
-  import { fetchEntries, formatter } from '../util';
 
   let entriesPromise = $state(fetchEntries(true));
 

src/client/util.ts

@@ -1,5 +1,5 @@
 import { userstate } from './shared.svelte';
-import type { SelectEntry } from '../server/pt-api';
+import type { SelectEntry } from '@server/pt-api';
 
 export async function fetchEntries(retry: boolean = false): Promise<SelectEntry[]> {
   try {

src/images.d.ts

@@ -0,0 +1,25 @@
+
+declare module '*.png' {
+  const value: Uint8Array<ArrayBufferLike>;
+  // const file: Bun.BunFile;
+  // export { file };
+  export default value;
+}
+declare module '*.jpeg' {
+  const value: Uint8Array<ArrayBufferLike>;
+  // const file: Bun.BunFile;
+  // export { file };
+  export default value;
+}
+declare module '*.jpg' {
+  const value: Uint8Array<ArrayBufferLike>;
+  // const file: Bun.BunFile;
+  // export { file };
+  export default value;
+}
+declare module '*.webp' {
+  const value: Uint8Array<ArrayBufferLike>;
+  // const file: Bun.BunFile;
+  // export { file };
+  export default value;
+}

src/index.ts

@@ -1,18 +1,14 @@
-import { env } from 'bun';
+import { env, randomUUIDv7 } from 'bun';
-import homepage from './client/index.html';
+import homepage from '@routes/index.html';
-import robotsTxt from './client/static/robots.txt';
+import robotsTxt from '@static/robots.txt';
-import sitemapTxt from './client/static/sitemap.txt';
+import sitemapTxt from '@static/sitemap.txt';
-// @ts-ignore ts2307
+import favicon from '@static/favicon.png';
-import icon from './client/static/favicon.png' with { type: 'file' };
+import ptApi from '@server/pt-api';
-const favicon = await Bun.file(icon).bytes();
+import auth from '@server/auth';
-const development = env.NODE_ENV !== 'production';
-import { randomUUIDv7 } from 'bun';
-import ptApi from './server/pt-api';
-import auth from './server/auth';
 
-declare global {
+const development = env.NODE_ENV !== 'production';
-  var loginTokens: Set<string>;
+
-}
+const faviconInit = { headers: new Headers({ 'Content-Type': 'image/png' }) };
 
 let entriesCache = '';
 let entriesCacheTime = 0;
@@ -36,9 +32,7 @@ Bun.serve({
     '/sitemap.txt': new Response(sitemapTxt, {
       headers: { 'Content-Type': 'text/plain' },
     }),
-    '/favicon.ico': new Response(favicon, {
+    '/favicon.ico': new Response(favicon, faviconInit),
-      headers: { 'Content-Type': 'image/png' },
-    }),
     '/health': new Response('OK'),
     '/api/entries': {
       async GET(req) {

src/routes/index.css

@@ -1,5 +1,4 @@
-@import 'tailwindcss' source('.');
+@import 'tailwindcss' source('../');
-@source './components/main.svelte';
 
 @theme {
   --breakout-size: calc((var(--breakpoint-xl) - var(--breakpoint-lg)) / 2);
@@ -20,15 +19,10 @@
 
   .content {
     grid-template-columns:
-      [ultrawide-start] var(--ultrawide-val)
+      [ultrawide-start] var(--ultrawide-val) [breakout-start] var(--breakout-val) [content-start] var(--content-val) [content-end] var(--breakout-val) [breakout-end] var(--ultrawide-val) [ultrawide-end];
-      [breakout-start] var(--breakout-val)
-      [content-start] var(--content-val)
-      [content-end] var(--breakout-val)
-      [breakout-end] var(--ultrawide-val)
-      [ultrawide-end];
   }
 
-  .content > * {
+  .content>* {
     grid-column: content;
   }
 }

src/routes/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en" class="min-h-dvh">
+  <head>
+    <title>Progress tracker</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="@static/favicon.png" />
+    <link rel="preload" type="application/json" as="fetch" href="/api/entries" />
+    <link rel="preload" type="application/json" as="fetch" href="/auth/verify" />
+    <link rel="stylesheet" href="./index.css" />
+    <script type="module" src="./index.ts"></script>
+  </head>
+
+  <body
+    class="min-h-dvh bg-gray-950 bg-cover bg-fixed bg-center bg-no-repeat font-mono text-pretty text-gray-100 selection:bg-pink-600 selection:text-gray-200"
+  >
+    <div class="contents"></div>
+  </body>
+</html>

src/routes/index.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import Header from './components/header.svelte';
+  import Header from '@client/components/header.svelte';
-  import Login from './components/login.svelte';
+  import Login from '@client/components/login.svelte';
-  import Main from './components/main.svelte';
+  import Main from '@client/components/main.svelte';
-  import ProgressTable from './components/progress-table.svelte';
+  import ProgressTable from '@client/components/progress-table.svelte';
+  import { userstate } from '@client/shared.svelte';
   import './index.css';
-  import { userstate } from './shared.svelte';
   let promise = userstate.checkIsLoggedIn();
 </script>
 

src/routes/index.ts

@@ -1,6 +1,5 @@
 import { mount, unmount } from 'svelte';
 import index from './index.svelte';
-import './index.css';
 
 declare global {
   var didMount: boolean | undefined;

src/server/db/index.ts

@@ -1,7 +1,7 @@
 import { Database } from 'bun:sqlite';
 import { env } from 'bun';
 import { drizzle } from 'drizzle-orm/bun-sqlite';
-import { createWrappedTimer } from '../wrapped-timer';
+import { createWrappedTimer } from '@server/wrapped-timer';
 import { users } from './schema';
 
 function initDb() {

tsconfig.json

@@ -23,7 +23,21 @@
     // Some stricter flags (disabled by default)
     "noUnusedLocals": false,
     "noUnusedParameters": false,
-    "noPropertyAccessFromIndexSignature": false
+    "noPropertyAccessFromIndexSignature": false,
+    "paths": {
+      "@client/*": [
+        "./src/client/*"
+      ],
+      "@server/*": [
+        "./src/server/*"
+      ],
+      "@routes/*": [
+        "./src/routes/*"
+      ],
+      "@static/*": [
+        "./src/static/*"
+      ],
+    }
   },
   "exclude": [
     "node_modules"