feat(app): Add react-icons, minimal index and links content

app.config.ts

@@ -1,4 +1,13 @@
+import { defineConfig } from "@tanstack/start/config";
+import viteTsConfigPaths from "vite-tsconfig-paths";
 
-import { defineConfig } from '@tanstack/start/config'
-
-export default defineConfig({})
+export default defineConfig({
+  vite: {
+    plugins: [
+      // this is the plugin that enables path aliases
+      viteTsConfigPaths({
+        projects: ["./tsconfig.json"],
+      }),
+    ],
+  },
+});

app/components/MiscLinks.tsx

@@ -0,0 +1,36 @@
+import { SiGithub, SiDiscord, SiPaypal, SiKofi } from "react-icons/si";
+
+const LINKS = [
+  {
+    name: "GitHub",
+    url: "https://github.com/busybox11/NowPlaying-for-Spotify",
+    icon: SiGithub,
+  },
+  {
+    name: "Discord",
+    url: "https://discord.gg/DMmk8Sc",
+    icon: SiDiscord,
+  },
+  {
+    name: "PayPal",
+    url: "https://paypal.me/busybox11",
+    icon: SiPaypal,
+  },
+  {
+    name: "Ko-Fi",
+    url: "https://ko-fi.com/busybox11",
+    icon: SiKofi,
+  },
+];
+
+export function MiscLinks() {
+  return (
+    <div className="flex flex-row gap-4 flex-wrap">
+      {LINKS.map((link) => (
+        <a key={link.name} href={link.url} target="_blank" title={link.name}>
+          <link.icon className="text-white/50 hover:text-white transition h-6 w-6" />
+        </a>
+      ))}
+    </div>
+  );
+}

app/routes/index.tsx

@@ -1,43 +1,28 @@
-import * as fs from 'node:fs'
-import { createFileRoute, useRouter } from '@tanstack/react-router'
-import { createServerFn } from '@tanstack/start'
+import * as fs from "node:fs";
+import { createFileRoute, useRouter } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/start";
+import { MiscLinks } from "@/components/MiscLinks";
 
-const filePath = 'count.txt'
-
-async function readCount() {
-  return parseInt(
-    await fs.promises.readFile(filePath, 'utf-8').catch(() => '0'),
-  )
-}
-
-const getCount = createServerFn('GET', () => {
-  return readCount()
-})
-
-const updateCount = createServerFn('POST', async (addBy: number) => {
-  const count = await readCount()
-  await fs.promises.writeFile(filePath, `${count + addBy}`)
-})
-
-export const Route = createFileRoute('/')({
+export const Route = createFileRoute("/")({
   component: Home,
-  loader: async () => await getCount(),
-})
+});
 
 function Home() {
-  const router = useRouter()
-  const state = Route.useLoaderData()
-
   return (
-    <button
-      type="button"
-      onClick={() => {
-        updateCount(1).then(() => {
-          router.invalidate()
-        })
-      }}
-    >
-      Add 1 to {state}?
-    </button>
-  )
-}
+    <main className="flex flex-col items-center justify-center h-screen">
+      <section className="flex flex-row gap-6 items-center">
+        <img
+          src="/images/favicon.png"
+          alt="NowPlaying for Spotify"
+          className="size-24"
+        />
+
+        <div className="flex flex-col gap-4">
+          <h1 className="text-4xl font-bold">NowPlaying</h1>
+
+          <MiscLinks />
+        </div>
+      </section>
+    </main>
+  );
+}

package.json

@@ -20,6 +20,7 @@
     "@tanstack/start": "^1.81.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "vinxi": "^0.4.3"
   },
   "devDependencies": {
@@ -29,6 +30,7 @@
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.14",
-    "typescript": "^5.6.3"
+    "typescript": "^5.6.3",
+    "vite-tsconfig-paths": "^5.1.2"
   }
 }

tsconfig.json

@@ -6,6 +6,10 @@
     "target": "ES2022",
     "skipLibCheck": true,
     "strictNullChecks": true,
-    "strict": true
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./app/*"]
+    }
   }
 }