rewrite init

src/components/header.svelte

@@ -0,0 +1,36 @@
+<header class="content sticky top-0 z-20 grid bg-gray-950 py-2 font-mono drop-shadow sm:px-2">
+  <a
+    href="#main-content"
+    class="absolute top-0 left-0 z-50 rounded-b-sm bg-indigo-500 px-1 pt-0.5 text-xs text-gray-100 not-focus:sr-only"
+  >
+    Skip to main content
+  </a>
+  <div class="col-[content] grid grid-cols-3">
+    <div class="flex items-center gap-8">
+      <!--  -->
+    </div>
+
+    <div class="flex items-center justify-center">
+      <a href="/" class="text-center"> Progress tracker </a>
+    </div>
+
+    <div class="flex items-center justify-end gap-2 py-2 md:gap-4">
+      <a
+        class="uppercase"
+        href="https://git.skaarup.dev/nikiskaarup/progress-tracker-v3"
+        target="_blank"
+        referrerpolicy="no-referrer"
+      >
+        <span class="sr-only">git.skaarup.dev/nikiskaarup/progress-tracker-v3</span>
+        <svg class="aspect-square h-8" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+            fill="#fff"
+          />
+        </svg>
+      </a>
+    </div>
+  </div>
+</header>

src/components/main.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  const { children }: { children?: Snippet } = $props();
+</script>
+
+<main id="main-content">
+  {@render children?.()}
+</main>

src/index.css

@@ -0,0 +1,28 @@
+@import 'tailwindcss' source('.');
+
+@theme {
+  --breakout-size: calc((var(--breakpoint-xl) - var(--breakpoint-lg)) / 2);
+  --ultrawide-val: minmax(calc(var(--spacing) * 4), 1fr);
+  --breakout-val: minmax(0, var(--breakout-size));
+  --content-val: min(100% - calc(var(--spacing) * 8), var(--breakpoint-lg));
+}
+
+@layer base {
+  * {
+    min-width: 0;
+  }
+
+  .content {
+    grid-template-columns:
+      [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];
+  }
+
+  .content > * {
+    grid-column: content;
+  }
+}

src/index.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import './index.css';
+  import Header from './components/header.svelte';
+  import Main from './components/main.svelte';
+</script>
+
+<Header></Header>
+<Main></Main>

src/index.ts

@@ -0,0 +1,6 @@
+import { mount } from 'svelte';
+import index from './index.svelte';
+import './index.css';
+
+const root = document.querySelector<HTMLDivElement>('#root')!;
+const app = mount(index, { target: root });

src/server.ts

@@ -0,0 +1,30 @@
+import { env } from 'bun';
+import homepage from './index.html';
+import robotsTxt from './static/robots.txt';
+import sitemapTxt from './static/sitemap.txt';
+// @ts-ignore ts2307
+import icon from './static/favicon.png' with { type: 'file' };
+
+const favicon = await Bun.file(icon).bytes();
+
+const development = env.NODE_ENV !== 'production';
+
+Bun.serve({
+  routes: {
+    '/': homepage,
+    '/robots.txt': new Response(robotsTxt, {
+      headers: { 'Content-Type': 'text/plain' }
+    }),
+    '/sitemap.txt': new Response(sitemapTxt, {
+      headers: { 'Content-Type': 'text/plain' }
+    }),
+    '/favicon.ico': new Response(favicon, {
+      headers: { 'Content-Type': 'image/png' }
+    }),
+    '/health': new Response('OK')
+  },
+  development
+  // async fetch(req, server) {
+  //   return new Response("Not found", { status: 404 });
+  // },
+});

src/static/manifest.json

@@ -0,0 +1,10 @@
+{
+  "name": "Progress tracker by skaarup.dev",
+  "short_name": "progress-tracker",
+  "display": "browser",
+  "background_color": "#141141",
+  "theme_color": "#371D85",
+  "description": "Progress tracker by skaarup.dev",
+  "icons": [],
+  "related_applications": []
+}

src/static/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://pt.skaarup.dev/sitemap.txt

src/static/sitemap.txt

@@ -0,0 +1 @@
+https://pt.skaarup.dev/