src/pages/git.astro 2.4 K raw
1
---
2
export const prerender = false;
3
4
import PageLayout from "@/layouts/Base.astro";
5
import {
6
	createDarkmatterHighlighter,
7
	THEME_NAME,
8
} from "../../scripts/shiki-setup.mjs";
9
10
const meta = {
11
	title: "/git",
12
	description: "Access the open source repos I'm working on",
13
};
14
15
const highlighter = createDarkmatterHighlighter();
16
17
const codeHtml = highlighter.codeToHtml("ssh git.stevedylan.dev", {
18
	lang: "bash",
19
	theme: THEME_NAME,
20
});
21
22
// Fetch repos from my self hosted git site
23
let repos: any[] = [];
24
let error: string | null = null;
25
try {
26
	const res = await fetch("https://git.stevedylan.dev/api/repos");
27
	if (res.ok) {
28
		const data = await res.json();
29
		repos = (data.repos ?? []).sort(
30
			(a: any, b: any) =>
31
				new Date(b.last_commit).getTime() - new Date(a.last_commit).getTime(),
32
		);
33
	} else {
34
		error = `API returned ${res.status}`;
35
	}
36
} catch (e) {
37
	error = e instanceof Error ? e.message : "Failed to reach git API";
38
}
39
40
const dateFormatter = new Intl.DateTimeFormat("en-US", {
41
	year: "numeric",
42
	month: "short",
43
	day: "numeric",
44
});
45
---
46
47
<PageLayout meta={meta}>
48
	<div class="flex min-h-screen flex-col items-start justify-start gap-6">
49
		<h1 class="title">/git</h1>
50
		<p>
51
			You can browse my open source repos on <a
52
				href="https://git.stevedylan.dev"
53
				target="_blank"
54
				rel="noreferrer"
55
				class="style-link">git.stevedylan.dev</a
56
			>. View them on the web, or visit over SSH:
57
		</p>
58
		<div class="w-full" set:html={codeHtml} />
59
		<p>
60
			You can also checkout my <a
61
				href="https://github.com/stevedylandev"
62
				target="_blank"
63
				rel="noreferrer"
64
				class="style-link">GitHub</a
65
			> for other work and contributions.
66
		</p>
67
		{error ? (
68
			<p class="text-red-400 text-sm">Could not load repos: {error}</p>
69
		) : repos.length === 0 ? (
70
			<p class="text-zinc-400 text-sm">no repos yet</p>
71
		) : (
72
			<div class="flex w-full flex-col">
73
				{repos.map((repo: any) => (
74
					<a
75
						href={repo.url}
76
						target="_blank"
77
						rel="noopener noreferrer"
78
						class="flex items-center justify-between gap-4 border-b border-[#333] py-3 no-underline transition-opacity hover:opacity-70"
79
					>
80
						<div class="flex min-w-0 flex-col gap-0.5">
81
							<span class="truncate text-base">{repo.name}</span>
82
							<span class="truncate text-xs opacity-50">{repo.clone_ssh}</span>
83
						</div>
84
						<span class="flex-shrink-0 text-xs opacity-50">
85
							{dateFormatter.format(new Date(repo.last_commit))}
86
						</span>
87
					</a>
88
				))}
89
			</div>
90
		)}
91
	</div>
92
</PageLayout>