path: root/website.templ

package main

templ HeadComponent(title string, description string) {
	<head>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<meta name="color-scheme" content="dark"/>
		<link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
		<meta name="darkreader-lock"/>
		<meta name="robots" content="index, follow, noarchive"/>
		<meta name="keywords" content="Kyren223, Krypton, Compiler, Minecraft, Developer, Language, Langdev, Gamedev, Game, Software, Software Engineer, Game developer"/>
		<meta name="author" content="Kyren223"/>
		<meta name="description" content={ description }/>
		<title>{ title }</title>
		<meta property="og:title" content={ title }/>
		<meta property="og:description" content={ description }/>
		<meta property="og:type" content="website"/>
		<meta property="og:url" content="https://kyren.codes/"/>
		<meta property="og:image" content="https://kyren.codes/image.png"/>
		<meta property="og:image:alt" content="a cyan sphere with a dark background"/>
		<meta property="og:site_name" content="Kyren's Website"/>
		<script src="/public/copy.js" defer></script>
		<script src="/public/theme.js" defer></script>
		<script src="/public/scrollbar.js" defer></script>
		<script src="/public/my_uptime.js" defer></script>
		<link rel="stylesheet" href="/public/style.css"/>
		{ children... }
	</head>
}

templ BlogItem(header string, blog Blog, extra string) {
	@TerminalBorder(header, blog.Date.Format("January 2, 2006"), extra) {
		<span class="cursor-pointer group block">
			<a href={ templ.SafeURL("/blogs/" + blog.Slug) } class="no-underline hover:no-underline">
				<h1 class="text-[130%] font-bold text-(--accent) group-hover:underline">
					{ blog.Title }
				</h1>
				<p class="text-(--secondary)">{ blog.Desc }</p>
			</a>
		</span>
	}
}

templ Link(href string, newTab bool) {
	<a
		href={ templ.SafeURL(href) }
		if newTab {
			target="_blank"
			rel="noopener noreferrer"
		}
	>
		{ children... }
	</a>
}

templ TerminalStack(joined bool, extra string) {
	<div class={ "flex flex-col min-h-0", templ.KV("[&>*+*]:mt-[-0.1rem]", joined), templ.KV("gap-4", !joined), extra }>
		{ children... }
	</div>
}

templ TerminalBorder(header string, footer string, extra string) {
	<div class={ "relative flex px-3.5 py-(--ypad) pt-[calc(var(--ypad)+0.0625rem)] [--ypad:var(--border-py,0.875rem)] border-[0.1rem] border-solid border-[color:var(--alt)]", extra }>
		<span class="absolute px-[0.625rem] text-[1rem] left-[0.625rem] top-[-0.75rem] bg-[var(--background)] text-[color:var(--alt)]">{ header }</span>
		<span class="absolute px-[0.625rem] text-[1rem] left-[0.625rem] bottom-[-0.75rem] bg-[var(--background)] text-[color:var(--alt)]">{ footer }</span>
		{ children... }
	</div>
}

templ CopyIcon() {
	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy preview-icon"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>
}

templ TerminalBorderWithCopy(header string, footer string, extra string, text string, href string, showLabel bool) {
	@TerminalBorder(header, footer, extra) {
		<div data-copy-scope class="group/copy flex w-full items-center justify-between gap-4">
			if href != "" {
				<a href={ templ.SafeURL(href) } class="wrap-anywhere">
					{ children... }
				</a>
			} else {
				<span data-copy={ text } class="cursor-pointer wrap-anywhere">
					{ children... }
				</span>
			}
			<span class="relative shrink-0">
				if showLabel {
					<span class="hidden group-data-copied/copy:block absolute right-full top-1/2 -translate-y-1/2 mr-2 px-[0.4rem] whitespace-nowrap bg-(--background) text-(--primary)">copied</span>
				}
				<button type="button" data-copy={ text } aria-label="copy" class="block p-[0.4rem] rounded-[0.4rem] cursor-pointer transition-colors hover:bg-(--alt)/25 group-data-copied/copy:bg-(--primary)/25!">
					@CopyIcon()
				</button>
			</span>
		</div>
	}
}

templ CopyPre(text string, preClass string) {
	<button type="button" data-copy={ text } class="group relative shrink-0 cursor-pointer text-left rounded-[0.4rem] p-[0.4rem] -m-[0.4rem] transition-colors hover:bg-(--alt)/25 data-copied:bg-(--primary)/25! data-copied:animate-[bump_0.25s]">
		<pre class={ preClass }>
			{ children... }
		</pre>
		<span class="hidden group-data-copied:block absolute right-[0.6rem] top-[0.6rem] px-[0.4rem] bg-(--background) text-(--primary) text-[0.8rem]">copied</span>
	</button>
}

templ NavLink(href string, label string) {
	<a href={ templ.SafeURL(href) } class="text-(--primary) hover:text-(--accent)">{ label }</a>
}

templ Nav(path string) {
	<nav class="flex justify-between gap-10 p-4 mb-6 border-[0.125rem] border-(--alt) text-[1.375rem]">
		<span>{ path }</span>
		<span class="flex gap-[1ch]">
			@NavLink("/", "home")
			for _, dir := range []string{"skills", "projects", "blogs"} {
				@NavLink("/"+dir, dir)
			}
			@NavLink("/shell", "shell")
		</span>
	</nav>
}

templ TerminalLayout(style Style, path string) {
	<!DOCTYPE html>
	<html lang="en" style={ styleToCss(style) }>
		@HeadComponent(path, "My personal website") {
			<link rel="stylesheet" href="/public/styles/terminal.css"/>
		}
		<body>
			<main class="flex flex-col w-[75rem] h-[40rem] p-8 border-[0.2rem] border-(--text) overflow-hidden text-[1.125rem]">
				@Nav(path)
				{ children... }
			</main>
		</body>
	</html>
}

const fingerprint = `+--[ED25519 256]--+
|       +. ..  +.B|
|      + o..o . BB|
|     ..o oo.o =+E|
|     ... oo. + o.|
|      . S .   =  |
|  .  .   +   o   |
| o    o o .      |
|  oo .o+ +       |
|  ++ooo+=        |
+----[SHA256]-----+`
const sshKey = "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIO7P9K9D5RkBk+JCRRS6AtHuTAc6cRpXfRfRMg/Kyren"

templ HomePage(style Style, latestBlog *Blog) {
	@TerminalLayout(style, "/home/kyren/") {
		<div class={ "grid grid-cols-[29%_1fr] gap-x-8 flex-1 min-h-0", templ.KV("gap-y-4", !false) }>
			<div class="flex flex-col min-h-0 [--border-py:0.75rem]">
				@TerminalStack(true, "") {
					@TerminalBorder("Profile", "", "[--border-py:0.875rem]") {
						<div class="flex items-center gap-4 h-38">
							<img src="/public/favicon.svg" alt="picture" class="h-full object-cover"/>
							@CopyPre(sshKey, "shrink-0 text-[0.675rem] leading-[normal]") {
								{ fingerprint }
							}
						</div>
					}
					@TerminalBorderWithCopy("Email", "", "", "contact@kyren.codes", "mailto:contact@kyren.codes", false) {
						contact@kyren.codes
					}
					@TerminalBorder("Git Repos (main)", "", "") {
						@Link("https://git.kyren.codes", true) {
							git.kyren.codes
						}
					}
					@TerminalBorder("GitHub (secondary)", "", "") {
						@Link("https://github.com/kyren223", true) {
							github.com/Kyren223
						}
					}
					@TerminalBorder("Discord", "", "") {
						@Link("https://discord.com/users/481884415090229258", true) {
							Kyren223
						}
					}
				}
			</div>
			<div class="flex flex-col gap-10 min-h-0 select-text">
				@TerminalBorder("Status", "", "") {
					<div class="flex gap-[1ch] text-[1rem]">
						<span>Working on</span>
						<span>
							@Link("/projects/krypton", false) {
								Krypton
							}
						</span>
						<span>|</span>
						<span>Learning Langdev & Compiler Design</span>
						<span>|</span>
						<span>Available for hire</span>
					</div>
				}
				@TerminalBorder("About Me", "", "") {
					Hi! I'm Kyren, a softwarea engineer and game developer.
					I love working with low level languages and learning things deeply.
					I am also a terminal nerd and Linux enthusiast who uses NVIM btw.
					And when I am not coding, I am most likely playing video games,
					watching Anime, or solving Rubik's cubes fast.
				}
				@BlogItem("Latest Blog Post", *latestBlog, "")
			</div>
			@TerminalBorderWithCopy("SSH Key", "", footerClass(false), sshKey, "", true) {
				{ sshKey }
			}
		</div>
	}
}

func footerClass(connected bool) string {
	style := "col-span-2 select-text [--border-py:0.5rem]"
	if connected {
		style += " mb-[0.30rem]"
	}
	return style
}

templ SkillsPage(style Style) {
	@TerminalLayout(style, "/home/kyren/skills.md") {
		@TerminalStack(false, "") {
			@TerminalBorder("Setup", "", "") {
				<span>
					$ fastfetch
					@Fastfetch(fetchRows)
				</span>
			}
		}
	}
}

templ ProjectsPage(style Style, projects []Project) {
	@TerminalLayout(style, "/home/kyren/projects") {
		<h1>Items</h1>
		<div class="card">
			<ul>
				<li>
					<span>foo</span>
					<span class="badge-active">[ACTIVE]</span>
				</li>
			</ul>
		</div>
	}
}

templ NotFoundPage(style Style, path string) {
	@TerminalLayout(style, "404") {
		@TerminalStack(true, "") {
			@TerminalBorder("Shell", "", "") {
				<span>
					<p>$ cd ~{ path }</p>
					<p class="pt-3">"{ path[1:] }": No such file or directory (os error 2) </p>
				</span>
			}
			@TerminalBorder("", "", "") {
				<div class="gap-[1ch]">
					<span>{ ">" }</span>
					<span class="text-(--secondary)">
						@Link("/", false) {
							{ "cd $HOME" }
						}
					</span>
				</div>
			}
		}
	}
}

templ ScrollBox(extra string) {
	<div data-scrollbox class={ "flex flex-1 min-h-0", extra }>
		<div data-scroll-area class="flex-1 min-w-0 overflow-y-auto border-[0.1rem] border-solid border-(--alt) p-[1rem] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
			{ children... }
		</div>
		<div data-scroll-track class="relative w-8 -ml-[0.1rem] border-[0.1rem] border-solid border-(--alt)">
			<div data-scroll-thumb class="absolute inset-x-[0.3rem] bg-(--secondary) cursor-grab touch-none"></div>
		</div>
	</div>
}

templ BlogsPage(style Style, blogs []Blog) {
	@TerminalLayout(style, "blogs") {
		@TerminalBorder("Shell", "", "mb-[1rem]") {
			$ ls -lh ~/blogs
		}
		@ScrollBox("") {
			@TerminalStack(false, "mt-[0.5rem]") {
				for i := 0; i < 1; i++ {
					for _, blog := range blogs {
						@BlogItem("", blog, "mb-[1rem]")
					}
				}
			}
		}
	}
}

type FetchRow struct {
	Icon  templ.Component
	Color string // tailwind text color class, used for the icon and label
	Label string
	Value string
}

templ IconMonitor(color string) {
	@Icon(color) {
		<rect width="20" height="14" x="2" y="3" rx="2"></rect>
		<line x1="8" x2="16" y1="21" y2="21"></line>
		<line x1="12" x2="12" y1="17" y2="21"></line>
	}
}

templ IconTerminal(color string) {
	@Icon(color) {
		<polyline points="4 17 10 11 4 5"></polyline>
		<line x1="12" x2="20" y1="19" y2="19"></line>
	}
}

templ IconCode(color string) {
	@Icon(color) {
		<polyline points="16 18 22 12 16 6"></polyline>
		<polyline points="8 6 2 12 8 18"></polyline>
	}
}

templ IconCpu(color string) {
	@Icon(color) {
		<rect width="16" height="16" x="4" y="4" rx="2"></rect>
		<rect width="6" height="6" x="9" y="9" rx="1"></rect>
		<path d="M15 2v2M15 20v2M2 15h2M2 9h2M20 15h2M20 9h2M9 2v2M9 20v2"></path>
	}
}

templ IconScriptLang(color string) {
	@Icon(color) {
		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-terminal preview-icon"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path><path d="m8 16 2-2-2-2"></path><path d="M12 18h4"></path></svg>
	}
}

templ IconEditor(color string) {
	@Icon(color) {
		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen preview-icon"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"></path></svg>
	}
}

templ IconDebugger(color string) {
	@Icon(color) {
		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bug-off preview-icon"><path d="M12 20v-8"></path><path d="M12.656 7H14a4 4 0 0 1 4 4v1.344"></path><path d="M14.12 3.88 16 2"></path><path d="M17.123 17.123A6 6 0 0 1 6 14v-3a4 4 0 0 1 1.72-3.287"></path><path d="m2 2 20 20"></path><path d="M21 5a4 4 0 0 1-3.55 3.97"></path><path d="M22 13h-3.344"></path><path d="M3 21a4 4 0 0 1 3.81-4"></path><path d="M3 5a4 4 0 0 0 3.55 3.97"></path><path d="M6 13H2"></path><path d="m8 2 1.88 1.88"></path><path d="M9.712 4.06A3 3 0 0 1 15 6v1.13"></path></svg>
	}
}

templ IconKeyboard(color string) {
	@Icon(color) {
		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-keyboard preview-icon"><path d="M10 8h.01"></path><path d="M12 12h.01"></path><path d="M14 8h.01"></path><path d="M16 12h.01"></path><path d="M18 8h.01"></path><path d="M6 8h.01"></path><path d="M7 16h10"></path><path d="M8 12h.01"></path><rect width="20" height="16" x="2" y="4" rx="2"></rect></svg>
	}
}

templ IconUptime(color string) {
	@Icon(color) {
		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock preview-icon"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path></svg>
	}
}

func row(icon func(color string) templ.Component, color, label, value string) FetchRow {
	return FetchRow{Icon: icon(color), Color: color, Label: label, Value: value}
}

var fetchRows = []FetchRow{
	// row(IconTerminal, "text-(--secondary)", "Terminal", "Ghostty & Zsh"),
	row(IconCode, "text-(--accent)", "Main Language", "C"),
	row(IconScriptLang, "text-(--accent)", "Scripting Langs", "Go and Python"),
	row(IconDebugger, "text-[#F16265]", "Debugger", "Raddebugger"),
	row(IconMonitor, "text-[#54D7A9]", "Operating System", "Fedora KDE Linux"),
	row(IconEditor, "text-[#54D7A9]", "Text Editor", "Neovim"),
	row(IconUptime, "text-[#D8C44B]", "Uptime", GetMyUptime()),
	// row(IconCpu, "text-(--extra)", "Hardware", "..."),
}

func branch(i, n int) string {
	switch {
	case n == 1:
		return "─"
	case i == 0:
		return "┌"
	case i == n-1:
		return "└"
	default:
		return "├"
	}
}

templ Fastfetch(rows []FetchRow) {
	<div
		style="
		display: grid;
		grid-template-columns: auto auto auto 1fr;
		align-items: center;
		column-gap: 1ch;
		line-height: normal;
	"
	>
		for i, row := range rows {
			<span class="text-(--alt)">{ branch(i, len(rows)) }</span>
			@row.Icon
			<span class={ row.Color, "font-bold" }>{ row.Label }</span>
			<span id={ row.Label }>{ row.Value }</span>
		}
	</div>
}

templ Icon(color string) {
	<svg width="1.1em" height="1.1em" class={ "shrink-0", color } viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
		{ children... }
	</svg>
}