From f0321ad9bbd18cb4a96573a395183b5e79de0bf2 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Fri, 8 Dec 2023 16:50:25 -1000
Subject: [PATCH] feat: Add better homepage to Lysand when started at /

---
 index.ts             | 41 ++++++++++++++++++-----------------------
 pages/Home.vue       | 44 ++++++++++++++++++++++++++++++++++++++++++++
 pages/routes.ts      |  3 +--
 pages/vite.config.ts |  5 +++++
 4 files changed, 68 insertions(+), 25 deletions(-)
 create mode 100644 pages/Home.vue

diff --git a/index.ts b/index.ts
index 1b0a7c5c..8a8b924e 100644
--- a/index.ts
+++ b/index.ts
@@ -124,37 +124,32 @@ Bun.serve({
 
 			return await (await file).default(req.clone(), matchedRoute, auth);
 		} else {
-			// Check if path matches Vite routes
-			if (
-				routes.find(route => route.path === new URL(req.url).pathname)
-			) {
-				// Proxy response from Vite at localhost:5173 if in development mode
-				if (isProd) {
-					// Serve from pages/dist
+			// Proxy response from Vite at localhost:5173 if in development mode
+			if (isProd) {
+				if (new URL(req.url).pathname.startsWith("/assets")) {
+					// Serve from pages/dist/assets
 					return new Response(
 						// @ts-expect-error Custom Bun extension
-						Bun.file(`./pages/dist/index.html`)
+						Bun.file(`./pages/dist${new URL(req.url).pathname}`)
 					);
-				} else {
-					const proxy = await fetch(
-						req.url.replace(
-							config.http.base_url,
-							"http://localhost:5173"
-						)
-					);
-
-					if (proxy.status !== 404) {
-						return proxy;
-					}
 				}
-			}
 
-			if (new URL(req.url).pathname.startsWith("/assets")) {
-				// Serve from pages/dist/assets
+				// Serve from pages/dist
 				return new Response(
 					// @ts-expect-error Custom Bun extension
-					Bun.file(`./pages/dist${new URL(req.url).pathname}`)
+					Bun.file(`./pages/dist/index.html`)
 				);
+			} else {
+				const proxy = await fetch(
+					req.url.replace(
+						config.http.base_url,
+						"http://localhost:5173"
+					)
+				);
+
+				if (proxy.status !== 404) {
+					return proxy;
+				}
 			}
 
 			return new Response(undefined, {
diff --git a/pages/Home.vue b/pages/Home.vue
new file mode 100644
index 00000000..0c65d837
--- /dev/null
+++ b/pages/Home.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="bg-white">
+        <div class="relative isolate px-6 pt-14 lg:px-8">
+            <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+                aria-hidden="true">
+                <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
+                    style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)" />
+            </div>
+            <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
+                <div class="hidden sm:mb-8 sm:flex sm:justify-center">
+                    <div
+                        class="relative rounded px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
+                        You are using <a href="#" class="font-semibold text-indigo-600">Lysand {{ version }}</a>
+                    </div>
+                </div>
+                <div class="text-center">
+                    <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">Welcome to Lysand</h1>
+                    <p class="mt-6 text-lg leading-8 text-gray-600">You can login to this server by pointing any Mastodon
+                        client at <strong class="font-bold">{{ location.host }}</strong></p>
+                    <div class="mt-10 flex items-center justify-center gap-6 md:flex-row flex-col">
+                        <a href="https://github.com/lysand-org/lysand" target="_blank"
+                            class="rounded-md w-full bg-indigo-600 ring-indigo-600 ring-2 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Read
+                            the docs</a>
+                        <a href="https://lysand.org" target="_blank"
+                            class="rounded-md w-full ring-indigo-600 ring-2 bg-white px-3.5 py-2.5 text-sm font-semibold text-indigo-500 shadow-sm hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">About
+                            the Lysand Protocol</a>
+                    </div>
+                </div>
+            </div>
+            <div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
+                aria-hidden="true">
+                <div class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
+                    style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)" />
+            </div>
+        </div>
+    </div>
+</template>
+  
+<script setup>
+import { ref } from 'vue';
+
+const location = window.location;
+const version = __VERSION__;
+</script>
\ No newline at end of file
diff --git a/pages/routes.ts b/pages/routes.ts
index 003ee65f..5d08d144 100644
--- a/pages/routes.ts
+++ b/pages/routes.ts
@@ -1,6 +1,5 @@
 import Login from "./login.vue";
-
-const Home = { template: "<div>Home</div>" };
+import Home from "./Home.vue";
 
 export default [
 	{ path: "/", component: Home },
diff --git a/pages/vite.config.ts b/pages/vite.config.ts
index 95074a01..dd23d757 100644
--- a/pages/vite.config.ts
+++ b/pages/vite.config.ts
@@ -1,6 +1,7 @@
 import { defineConfig } from "vite";
 import UnoCSS from "unocss/vite";
 import vue from "@vitejs/plugin-vue";
+import pkg from "../package.json";
 
 export default defineConfig({
 	base: "/",
@@ -18,6 +19,10 @@ export default defineConfig({
 			clientPort: 5173,
 		},
 	},
+	define: {
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+		__VERSION__: JSON.stringify(pkg.version),
+	},
 	ssr: {
 		noExternal: ["@prisma/client"],
 	},