Initial commit, most things work

2025-04-26 20:56:56 +01:00
commit 35c8964fe5
25 changed files with 1232 additions and 0 deletions
--- a/src/app/api/trpc/[trpc]/route.ts
+++ b/src/app/api/trpc/[trpc]/route.ts
@@ -0,0 +1,34 @@
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
+import type { NextRequest } from "next/server";
+
+import { env } from "@/env";
+import { appRouter } from "@/server/api/root";
+import { createTRPCContext } from "@/server/api/trpc";
+
+/**
+ * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
+ * handling a HTTP request (e.g. when you make requests from Client Components).
+ */
+const createContext = async (req: NextRequest) => {
+	return createTRPCContext({
+		headers: req.headers,
+	});
+};
+
+const handler = (req: NextRequest) =>
+	fetchRequestHandler({
+		endpoint: "/api/trpc",
+		req,
+		router: appRouter,
+		createContext: () => createContext(req),
+		onError:
+			env.NODE_ENV === "development"
+				? ({ path, error }) => {
+						console.error(
+							`❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
+						);
+					}
+				: undefined,
+	});
+
+export { handler as GET, handler as POST };
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -0,0 +1,29 @@
+import "@/styles/globals.css";
+
+import type { Metadata } from "next";
+import { Geist } from "next/font/google";
+
+import { TRPCReactProvider } from "@/trpc/react";
+
+export const metadata: Metadata = {
+	title: "Create T3 App",
+	description: "Generated by create-t3-app",
+	icons: [{ rel: "icon", url: "/favicon.ico" }],
+};
+
+const geist = Geist({
+	subsets: ["latin"],
+	variable: "--font-geist-sans",
+});
+
+export default function RootLayout({
+	children,
+}: Readonly<{ children: React.ReactNode }>) {
+	return (
+		<html lang="en" className={`${geist.variable}`}>
+			<body>
+				<TRPCReactProvider>{children}</TRPCReactProvider>
+			</body>
+		</html>
+	);
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -0,0 +1,70 @@
+import { HydrateClient, api } from "@/trpc/server";
+
+export default async function Home() {
+	const list = await api.docker.list();
+
+	void api.docker.list.prefetch();
+
+	return (
+		<HydrateClient>
+			<main className="flex min-h-screen flex-col items-center justify-center">
+				<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
+					{list ? (
+						<div className="overflow-x-auto rounded-md border border-base-content/15 bg-base-100">
+							<table className="table-s table">
+								<thead>
+									<tr>
+										<th>Name</th>
+										<th>Image</th>
+										<th>Version</th>
+										<th>Short Hash</th>
+										<th>Version</th>
+										<th>Short Hash</th>
+									</tr>
+								</thead>
+								<tbody>
+									{list
+										.sort((ca, cb) => {
+											if (ca.Names[0] < cb.Names[0]) {
+												return -1;
+											}
+											if (ca.Names[0] > cb.Names[0]) {
+												return 1;
+											}
+											return 0;
+										})
+										.map((containerInfo) => {
+											const outdated =
+												containerInfo.current.version !==
+													containerInfo.latest.version ||
+												containerInfo.current.hash !==
+													containerInfo.latest.hash;
+											return (
+												<tr
+													key={containerInfo.Image.split(":")[0]}
+													className={`${outdated ? "bg-base-200" : null}`}
+												>
+													<td
+														className={`border-l-8 ${outdated ? "border-l-error/80" : "border-l-info/80"}`}
+													>
+														{containerInfo.Names[0]?.substring(1)}
+													</td>
+													<td>{containerInfo.Image.split(":")[0]}</td>
+													<td>{containerInfo.current.version}</td>
+													<td>{containerInfo.current.hash}</td>
+													<td>{containerInfo.latest.version}</td>
+													<td>{containerInfo.latest.hash}</td>
+												</tr>
+											);
+										})}
+								</tbody>
+							</table>
+						</div>
+					) : (
+						"Loading tRPC query..."
+					)}
+				</div>
+			</main>
+		</HydrateClient>
+	);
+}
--- a/src/env.js
+++ b/src/env.js
@@ -0,0 +1,40 @@
+import { createEnv } from "@t3-oss/env-nextjs";
+import { z } from "zod";
+
+export const env = createEnv({
+	/**
+	 * Specify your server-side environment variables schema here. This way you can ensure the app
+	 * isn't built with invalid env vars.
+	 */
+	server: {
+		NODE_ENV: z.enum(["development", "test", "production"]),
+	},
+
+	/**
+	 * Specify your client-side environment variables schema here. This way you can ensure the app
+	 * isn't built with invalid env vars. To expose them to the client, prefix them with
+	 * `NEXT_PUBLIC_`.
+	 */
+	client: {
+		// NEXT_PUBLIC_CLIENTVAR: z.string(),
+	},
+
+	/**
+	 * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
+	 * middlewares) or client-side so we need to destruct manually.
+	 */
+	runtimeEnv: {
+		NODE_ENV: process.env.NODE_ENV,
+		// NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
+	},
+	/**
+	 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
+	 * useful for Docker builds.
+	 */
+	skipValidation: !!process.env.SKIP_ENV_VALIDATION,
+	/**
+	 * Makes it so that empty strings are treated as undefined. `SOME_VAR: z.string()` and
+	 * `SOME_VAR=''` will throw an error.
+	 */
+	emptyStringAsUndefined: true,
+});
--- a/src/server/api/root.ts
+++ b/src/server/api/root.ts
@@ -0,0 +1,23 @@
+import { dockerRouter } from "@/server/api/routers/docker";
+import { createCallerFactory, createTRPCRouter } from "@/server/api/trpc";
+
+/**
+ * This is the primary router for your server.
+ *
+ * All routers added in /api/routers should be manually added here.
+ */
+export const appRouter = createTRPCRouter({
+	docker: dockerRouter,
+});
+
+// export type definition of API
+export type AppRouter = typeof appRouter;
+
+/**
+ * Create a server-side caller for the tRPC API.
+ * @example
+ * const trpc = createCaller(createContext);
+ * const res = await trpc.post.all();
+ *       ^? Post[]
+ */
+export const createCaller = createCallerFactory(appRouter);
--- a/src/server/api/routers/docker.ts
+++ b/src/server/api/routers/docker.ts
@@ -0,0 +1,84 @@
+import Docker from "dockerode";
+import semver from "semver";
+import { $ } from "zx";
+
+import { createTRPCRouter, publicProcedure } from "@/server/api/trpc";
+
+export const dockerRouter = createTRPCRouter({
+	list: publicProcedure.query(async () => {
+		const docker = new Docker({ socketPath: "/var/run/docker.sock" });
+		const containers = await docker.listContainers();
+
+		// curl -fsSL -v "https://quay.io/token?service=quay.io&scope=repository:linuxserver/code-server:pull"
+		// curl -fsSL -v -H "Accept: application/vnd.docker.distribution.manifest.list.v2+json" -H "Authorization: Bearer djE6bGludXhzZXJ2ZXIvY29kZS1zZXJ2ZXI6MTc0NTQ1NTk1MTY3NjM5ODA4Mg==" quay.io/v2/linuxserver.io/code-server/tags/list
+
+		// curl -fsSL -v -H "Accept: application/vnd.docker.distribution.manifest.list.v2+json" quay.io/v2/linuxserver.io/code-server/tags/list
+		// link: </v2/linuxserver.io/code-server/tags/list?n=100&last=4.18.0-ls180>; rel="next"
+		// link: </v2/linuxserver.io/code-server/tags/list?n=100&last=4.90.1-ls217>; rel="next"
+
+		// curl -fsSL -v -H "Accept: application/json" "hub.docker.com/v2/repositories/linuxserver/code-server/tags?n=25&ordering=last_updated"
+
+		return Promise.all(
+			containers.map(async (container) => {
+				const version = (
+					await docker.getImage(container.Image).inspect()
+				).RepoTags[0]?.split(":")[1];
+				const latest = {
+					version: version,
+					hash: "N/A",
+				};
+				if (version && isSemver(version)) {
+					latest.version = await getLatestSemverTag(container.Image);
+					latest.hash = await getLatestHash(
+						`${container.Image.split(":")[0]}:${latest.version}`,
+					);
+				} else {
+					latest.hash = await getLatestHash(container.Image);
+				}
+
+				return {
+					...container,
+					current: {
+						version,
+						hash: (
+							await docker.getImage(container.Image).inspect()
+						).RepoDigests[0]
+							?.split(":")[1]
+							?.substring(0, 12),
+					},
+					latest,
+				};
+			}),
+		);
+	}),
+});
+
+function isSemver(tag: string): boolean {
+	const removeV = tag.replace(/^v/i, "");
+	return !!semver.valid(removeV);
+}
+
+async function getLatestSemverTag(image: string): Promise<string> {
+	try {
+		const allTags =
+			await $`bin/regctl tag ls --exclude 'version.*' --exclude 'unstable.*' --exclude '.*rc.*' --exclude 'lib.*' --exclude 'release.*' --exclude 'arm.*
+'  --exclude 'amd.*' ${image}`.text();
+		const semverTags = allTags
+			.split("\n")
+			.slice(-20)
+			.filter((tag) => isSemver(tag));
+		return semver.rsort(semverTags)[0] ?? "Error";
+	} catch (ex) {
+		return "Error";
+	}
+}
+
+async function getLatestHash(image: string): Promise<string> {
+	try {
+		const latestImage = await $`bin/regctl image digest ${image}`.text();
+		const latestHash = latestImage.split(":")?.[1];
+		return latestHash?.substring(0, 12) ?? "Error";
+	} catch (ex) {
+		return "Error";
+	}
+}
--- a/src/server/api/trpc.ts
+++ b/src/server/api/trpc.ts
@@ -0,0 +1,97 @@
+/**
+ * YOU PROBABLY DON'T NEED TO EDIT THIS FILE, UNLESS:
+ * 1. You want to modify request context (see Part 1).
+ * 2. You want to create a new middleware or type of procedure (see Part 3).
+ *
+ * TL;DR - This is where all the tRPC server stuff is created and plugged in. The pieces you will
+ * need to use are documented accordingly near the end.
+ */
+import { initTRPC } from "@trpc/server";
+import superjson from "superjson";
+import { ZodError } from "zod";
+
+/**
+ * 1. CONTEXT
+ *
+ * This section defines the "contexts" that are available in the backend API.
+ *
+ * These allow you to access things when processing a request, like the database, the session, etc.
+ *
+ * This helper generates the "internals" for a tRPC context. The API handler and RSC clients each
+ * wrap this and provides the required context.
+ *
+ * @see https://trpc.io/docs/server/context
+ */
+export const createTRPCContext = async (opts: { headers: Headers }) => {
+	return {
+		...opts,
+	};
+};
+
+/**
+ * 2. INITIALIZATION
+ *
+ * This is where the tRPC API is initialized, connecting the context and transformer. We also parse
+ * ZodErrors so that you get typesafety on the frontend if your procedure fails due to validation
+ * errors on the backend.
+ */
+const t = initTRPC.context<typeof createTRPCContext>().create({
+	transformer: superjson,
+	errorFormatter({ shape, error }) {
+		return {
+			...shape,
+			data: {
+				...shape.data,
+				zodError:
+					error.cause instanceof ZodError ? error.cause.flatten() : null,
+			},
+		};
+	},
+});
+
+/**
+ * Create a server-side caller.
+ *
+ * @see https://trpc.io/docs/server/server-side-calls
+ */
+export const createCallerFactory = t.createCallerFactory;
+
+/**
+ * 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
+ *
+ * These are the pieces you use to build your tRPC API. You should import these a lot in the
+ * "/src/server/api/routers" directory.
+ */
+
+/**
+ * This is how you create new routers and sub-routers in your tRPC API.
+ *
+ * @see https://trpc.io/docs/router
+ */
+export const createTRPCRouter = t.router;
+
+/**
+ * Middleware for timing procedure execution and adding an artificial delay in development.
+ *
+ * You can remove this if you don't like it, but it can help catch unwanted waterfalls by simulating
+ * network latency that would occur in production but not in local development.
+ */
+const timingMiddleware = t.middleware(async ({ next, path }) => {
+	const start = Date.now();
+
+	const result = await next();
+
+	const end = Date.now();
+	console.log(`[TRPC] ${path} took ${end - start}ms to execute`);
+
+	return result;
+});
+
+/**
+ * Public (unauthenticated) procedure
+ *
+ * This is the base piece you use to build new queries and mutations on your tRPC API. It does not
+ * guarantee that a user querying is authorized, but you can still access user session data if they
+ * are logged in.
+ */
+export const publicProcedure = t.procedure.use(timingMiddleware);
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -0,0 +1,10 @@
+@import "tailwindcss";
+@plugin "daisyui" {
+	/* biome-ignore lint/correctness/noUnknownProperty: daisyui isn\'t set up right */
+	themes: dracula --default;
+}
+
+@theme {
+	--font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif,
+		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
--- a/src/trpc/query-client.ts
+++ b/src/trpc/query-client.ts
@@ -0,0 +1,25 @@
+import {
+	QueryClient,
+	defaultShouldDehydrateQuery,
+} from "@tanstack/react-query";
+import SuperJSON from "superjson";
+
+export const createQueryClient = () =>
+	new QueryClient({
+		defaultOptions: {
+			queries: {
+				// With SSR, we usually want to set some default staleTime
+				// above 0 to avoid refetching immediately on the client
+				staleTime: 30 * 1000,
+			},
+			dehydrate: {
+				serializeData: SuperJSON.serialize,
+				shouldDehydrateQuery: (query) =>
+					defaultShouldDehydrateQuery(query) ||
+					query.state.status === "pending",
+			},
+			hydrate: {
+				deserializeData: SuperJSON.deserialize,
+			},
+		},
+	});
--- a/src/trpc/react.tsx
+++ b/src/trpc/react.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { type QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { httpBatchStreamLink, loggerLink } from "@trpc/client";
+import { createTRPCReact } from "@trpc/react-query";
+import type { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
+import { useState } from "react";
+import SuperJSON from "superjson";
+
+import type { AppRouter } from "@/server/api/root";
+import { createQueryClient } from "./query-client";
+
+let clientQueryClientSingleton: QueryClient | undefined = undefined;
+const getQueryClient = () => {
+	if (typeof window === "undefined") {
+		// Server: always make a new query client
+		return createQueryClient();
+	}
+	// Browser: use singleton pattern to keep the same query client
+	clientQueryClientSingleton ??= createQueryClient();
+
+	return clientQueryClientSingleton;
+};
+
+export const api = createTRPCReact<AppRouter>();
+
+/**
+ * Inference helper for inputs.
+ *
+ * @example type HelloInput = RouterInputs['example']['hello']
+ */
+export type RouterInputs = inferRouterInputs<AppRouter>;
+
+/**
+ * Inference helper for outputs.
+ *
+ * @example type HelloOutput = RouterOutputs['example']['hello']
+ */
+export type RouterOutputs = inferRouterOutputs<AppRouter>;
+
+export function TRPCReactProvider(props: { children: React.ReactNode }) {
+	const queryClient = getQueryClient();
+
+	const [trpcClient] = useState(() =>
+		api.createClient({
+			links: [
+				loggerLink({
+					enabled: (op) =>
+						process.env.NODE_ENV === "development" ||
+						(op.direction === "down" && op.result instanceof Error),
+				}),
+				httpBatchStreamLink({
+					transformer: SuperJSON,
+					url: `${getBaseUrl()}/api/trpc`,
+					headers: () => {
+						const headers = new Headers();
+						headers.set("x-trpc-source", "nextjs-react");
+						return headers;
+					},
+				}),
+			],
+		}),
+	);
+
+	return (
+		<QueryClientProvider client={queryClient}>
+			<api.Provider client={trpcClient} queryClient={queryClient}>
+				{props.children}
+			</api.Provider>
+		</QueryClientProvider>
+	);
+}
+
+function getBaseUrl() {
+	if (typeof window !== "undefined") return window.location.origin;
+	if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
+	return `http://localhost:${process.env.PORT ?? 3000}`;
+}
--- a/src/trpc/server.ts
+++ b/src/trpc/server.ts
@@ -0,0 +1,30 @@
+import "server-only";
+
+import { createHydrationHelpers } from "@trpc/react-query/rsc";
+import { headers } from "next/headers";
+import { cache } from "react";
+
+import { type AppRouter, createCaller } from "@/server/api/root";
+import { createTRPCContext } from "@/server/api/trpc";
+import { createQueryClient } from "./query-client";
+
+/**
+ * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
+ * handling a tRPC call from a React Server Component.
+ */
+const createContext = cache(async () => {
+	const heads = new Headers(await headers());
+	heads.set("x-trpc-source", "rsc");
+
+	return createTRPCContext({
+		headers: heads,
+	});
+});
+
+const getQueryClient = cache(createQueryClient);
+const caller = createCaller(createContext);
+
+export const { trpc: api, HydrateClient } = createHydrationHelpers<AppRouter>(
+	caller,
+	getQueryClient,
+);