Website stuff, mostly done, needs finishing touches that I am too lazy

to do

1 files changed, 69 insertions, 17 deletions

diff --git a/website.templ b/website.templ
index 733aca1..10fd1bd 100644
--- a/website.templ
+++ b/website.templ
@@ -96,7 +96,12 @@ templ TerminalBorder(header string, footer string, extra string) {
 }
 
 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>
+	<span class="block group-data-[copied]/copy:hidden">
+		@IconCopy("text-[#ffffff]")
+	</span>
+	<span class="hidden group-data-[copied]/copy:block">
+		@IconCheckmark("text-[#46d46c]")
+	</span>
 }
 
 templ TerminalBorderWithCopy(header string, footer string, extra string, text string, href string, showLabel bool) {
@@ -141,7 +146,7 @@ templ Nav(path string) {
 		<span>{ path }</span>
 		<span class="flex gap-[1ch]">
 			@NavLink("/", "home")
-			for _, dir := range []string{"projects", "info", "blogs"} {
+			for _, dir := range []string{"projects", "blogs"} {
 				@NavLink("/"+dir, dir)
 			}
 			@NavLink("/shell", "shell")
@@ -247,19 +252,6 @@ func footerClass(connected bool) string {
 	return style
 }
 
-templ InfoPage(style Style) {
-	@TerminalLayout(style, "/home/kyren/info.md") {
-		@TerminalStack(false, "") {
-			@TerminalBorder("Info", "", "") {
-				<span>
-					$ fastfetch
-					@Fastfetch(fetchRows)
-				</span>
-			}
-		}
-	}
-}
-
 type Project struct {
 	Slug     string
 	Title    string
@@ -416,6 +408,18 @@ templ IconGit(color string) {
 	}
 }
 
+templ IconCheckmark(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-check preview-icon"><path d="M20 6 9 17l-5-5"></path></svg>
+	}
+}
+
+templ IconCopy(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-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 IconGithub(color string) {
 	@Icon(color) {
 		<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
@@ -557,7 +561,7 @@ templ ScrollBox(extra string) {
 }
 
 templ BlogsPage(style Style, blogs []Blog) {
-	@TerminalLayout(style, "blogs") {
+	@TerminalLayout(style, "/home/kyren/blogs") {
 		@TerminalBorder("Shell", "", "mb-[1rem]") {
 			$ ls -lh ~/blogs
 		}
@@ -751,7 +755,7 @@ templ Icon(color string) {
 }
 
 templ BlogPage(style Style, blog Blog, prev *Blog, next *Blog) {
-	@TerminalLayout(style, blog.Title) {
+	@TerminalLayout(style, "/home/kyren/blogs/"+blog.Slug) {
 		@ScrollBox("") {
 			@BlogItem("", blog, "mb-[1rem]")
 			<article class="prose select-text font-(family-name:--font-normal) text-[17.6px] leading-[1.7]">
@@ -774,3 +778,51 @@ templ BlogNav(label string, blog *Blog, extra string) {
 		<div></div>
 	}
 }
+
+templ ShellPage(style Style) {
+	@TerminalLayout(style, "/bin/bash") {
+		@ScrollBox("") {
+			<div data-shell class="flex flex-col gap-[1rem]">
+				<div id="shell-history" class="flex flex-col gap-[1rem]">
+					@ShellEntry("fastfetch", Fastfetch(fetchRows))
+				</div>
+				<div data-shell-prompt class="flex gap-[1ch]">
+					<span class="shrink-0 text-(--primary)">$</span>
+					<div class="relative flex-1">
+						<input data-shell-input type="text" class="block w-full bg-transparent outline-none caret-transparent" autocomplete="off" autocapitalize="off" spellcheck="false"/>
+						<span data-shell-caret class="absolute inset-y-0 w-[1ch] flex items-center whitespace-pre bg-(--text) text-(--background) pointer-events-none"></span>
+					</div>
+				</div>
+			</div>
+		}
+		<script src="/public/shell.js" defer></script>
+	}
+}
+
+templ ShellLines(lines []string) {
+	<div class="flex flex-col">
+		for _, line := range lines {
+			<span>{ line }</span>
+		}
+	</div>
+}
+
+templ ShellEntry(cmd string, output templ.Component) {
+	@TerminalBorder("$ "+cmd, "", "") {
+		<div class="min-w-0 w-full">
+			@output
+		</div>
+	}
+}
+
+templ ShellText(text string) {
+	<p>{ text }</p>
+}
+
+templ ShellHelp(names []string) {
+	<div class="flex flex-col">
+		for _, name := range names {
+			<span>{ name }</span>
+		}
+	</div>
+}