take advantage of sveltekit being a thing that exists and is real

src/routes/+page.server.js

@@ -0,0 +1,13 @@
+import { promisify } from 'util';
+import { exec } from 'child_process';
+
+const execPromise = promisify(exec);
+
+/** @type {import('./$types').PageServerLoad} */
+export async function load({ params }) {
+  return {
+    hash: (await execPromise('git rev-parse HEAD')).stdout,
+    branch: (await execPromise('git rev-parse --abbrev-ref HEAD')).stdout,
+    remote: (await execPromise('git config --get remote.origin.url')).stdout
+  };
+}

src/routes/+page.svelte

@@ -13,6 +13,9 @@
       placement: 'bottom'
     });
   });
+
+  /** @type {import('./$types').PageData} */
+  export let data;
 </script>
 
 <svelte:head>
@@ -96,7 +99,7 @@
   <hr style="width: 120%; left: -10%; position: relative">
 
   <div class="center">
-    <a href="https://stats.uptimerobot.com/ZyM4vi7Ao7" style="text-decoration: none">Status</a> • <a href="https://git.oat.zone/dark-firepit/dark-firepit.cloud" style="text-decoration: none">Source</a>
+    <a href="https://stats.uptimerobot.com/ZyM4vi7Ao7" style="text-decoration: none">Status</a> • <a href="{data.remote.replace('.git', '')}/src/commit/{data.hash}" style="text-decoration: none">Source ({data.hash.slice(0, 7)})</a>
   </div>
 
   <footer class="center">

src/routes/meta/+page.server.js

@@ -0,0 +1,15 @@
+import { promisify } from 'util';
+import { exec } from 'child_process';
+
+const execPromise = promisify(exec);
+
+/** @type {import('./$types').PageServerLoad} */
+export async function load({ params }) {
+  return {
+    info: (await execPromise('neofetch --stdout')).stdout,
+    when: Date.now(),
+    hash: (await execPromise('git rev-parse HEAD')).stdout,
+    branch: (await execPromise('git rev-parse --abbrev-ref HEAD')).stdout,
+    remote: (await execPromise('git config --get remote.origin.url')).stdout
+  };
+}

src/routes/meta/+page.svelte

@@ -0,0 +1,25 @@
+<script>
+  import Header from '../../lib/Header.svelte';
+
+  /** @type {import('./$types').PageData} */
+  export let data;
+</script>
+
+<style>
+  main {
+    margin-top: 2em;
+  }
+</style>
+
+<main>
+  <Header/>
+
+  <div class="center">this site was compiled on:</div>
+  <br>
+  <div>
+    <pre>{data.info}</pre>
+  </div>
+  <br>
+  <div class="center">at <b>{new Date(data.when)}</b></div>
+  <div class="center">revision: <a href="{data.remote.replace('.git', '')}/src/commit/{data.hash}">{data.hash.slice(0, 7)} on {data.branch}</a></div>
+</main>

src/routes/videos-of-all-time/+page.js

@@ -1 +0,0 @@
-//export const csr = false;

src/routes/videos-of-all-time/+page.server.js

@@ -0,0 +1,29 @@
+import * as fs from 'fs/promises';
+import { promisify } from 'util';
+import { exec } from 'child_process';
+
+const execPromise = promisify(exec);
+
+const VIDEOS_PATH = 'static/videos/';
+
+/** @type {import('./$types').PageServerLoad} */
+export async function load({ params }) {
+  const files = await fs.readdir(VIDEOS_PATH);
+
+  const fileMetadata = await Promise.all(files.map(async (v) => {
+    const path = VIDEOS_PATH + v;
+    const stat = await fs.stat(path);
+    const vidInfo = JSON.parse((await execPromise(`ffprobe -v error -select_streams v -show_entries stream=width,height -of json '${path}'`)).stdout);
+    const mime = (await execPromise(`file '${path}' --mime-type -b`)).stdout.trim();
+    return {
+      modified: stat.mtimeMs,
+      ...vidInfo.streams[0],
+      name: v,
+      mime: mime
+    };
+  }));
+
+  const sorted = fileMetadata.sort((a, b) => a.modified - b.modified).map(a => ({width: a.width, height: a.height, name: a.name, mime: a.mime}));
+
+  return sorted;
+}

src/routes/videos-of-all-time/+page.svelte

@@ -1,60 +1,8 @@
 <script>
   import Header from "../../lib/Header.svelte";
 
-  const videos = [
-    'void.mp4',
-    'asmr.mp4',
-    'geometry_dash_layout.webm',
-    'wd_gaster_rapping.webm',
-    'trinkets.mp4',
-    'car_door.webm',
-    'eminem_potion.mp4',
-    'LASIK_eye_surgery.mp4',
-    'yellow_egg.mp4',
-    'mab.mp4',
-    'yipp.mp4',
-    'just_a_week_away.webm',
-    'oh_my_lordy_lord.webm',
-    'toad.mp4',
-    'crispsy.mp4',
-    'griddy.mp4',
-    'soevil.mp4',
-    'caralarmlayout.mp4',
-    'the_pizza.mp4',
-    'wiggles.mp4',
-    'wake-up.mp4',
-    'duetto.mp4',
-    'doyou.mp4',
-    'canwe.mp4',
-    'dontlikethisvideo.mp4',
-    'burgerr.mp4',
-    'asterisk.mp4',
-    'bottle_child.mp4',
-    'diamondtester.mp4',
-    'twerk.mp4',
-    'ueeeiin.mp4',
-    'sunny.mp4',
-    'itso.mp4',
-    'my_wii.mp4',
-    'chips.mp4',
-    'breakingnews.mp4',
-    'soup.mp4',
-    'AA.mp4',
-    'yay.mp4',
-    'ghostly_spirit.mp4',
-    'is_your_family_missing.webm',
-    'chicken_sandwich.mp4',
-    'cat.mov',
-    'hungry.mp4',
-    'robert.mp4',
-    'the_horse.mp4'
-  ];
-
-  const types = {
-    'mp4': 'video/mp4',
-    'webm': 'video/webm',
-    'mov': 'video/quicktime'
-  }
+  /** @type {import('./$types').PageData} */
+  export let data;
 </script>
 
 <style>
@@ -66,6 +14,10 @@
     overflow: hidden;
     max-width: 100%;
   }
+  video {
+    width: 350px;
+    height: auto;
+  }
   .videos {
     display: flex;
     justify-content: center;
@@ -97,21 +49,22 @@
   </div>
   
   <div class="videos">
-    {#each videos as vid}
+    {#each Object.values(data) as vid}
       <div class="video">
         <!-- svelte-ignore a11y-media-has-caption -->
         <video
-          width="350"
+          width={vid.width}
+          height={vid.height}
           controls="true"
           controlslist="disablepictureinpicture nofullscreen noremoteplayback"
           disablepictureinpicture="true"
           disableremoteplayback="true"
           playsinline="true"
           preload="metadata">
-          <source src={'/videos/' + vid} type={types[vid.split('.').pop()]}>
+          <source src={'/videos/' + vid.name} type={vid.mime}>
         </video>
         <div class="video-label">
-          {vid}
+          {vid.name}
         </div>
       </div>
     {/each}