Save

1 files changed, 363 insertions, 33 deletions

diff --git a/website.templ b/website.templ
index 88b8c40..bec1453 100644
--- a/website.templ
+++ b/website.templ
@@ -1,5 +1,7 @@
 package main
 
+import "flag"
+
 templ HeadComponent(title string, description string) {
 	<head>
 		<meta charset="UTF-8"/>
@@ -28,8 +30,16 @@ templ HeadComponent(title string, description string) {
 	</head>
 }
 
+func Choose(chooseA bool, a string, b string) string {
+	if chooseA {
+		return a
+	} else {
+		return b
+	}
+}
+
 templ BlogItem(header string, blog Blog, extra string) {
-	@TerminalBorder(header, blog.Date.Format("January 2, 2006"), "bg-black/20 hover:bg-white/5 transition-colors duration-150 "+extra) {
+	@TerminalBorderForBlog(header, blog.Date.Format("January 2, 2006"), Choose(header == "", "bg-black/20 hover:bg-white/5 transition-colors duration-150", "")+" "+extra, header == "") {
 		<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">
@@ -59,17 +69,31 @@ templ TerminalStack(joined bool, extra string) {
 	</div>
 }
 
+templ TerminalBorderForBlog(header string, footer string, extra string, enable bool) {
+	if enable {
+		<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(--text)] text-[color:var(--alt)]">{ header }</span>
+			<span class="absolute px-[0.625rem] text-[0.6rem] left-[0.625rem] bottom-[-0.55rem] bg-[var(--background)] border-[0.05rem] text-(--alt)">{ footer }</span>
+			{ children... }
+		</div>
+	} else {
+		@TerminalBorder(header, footer, extra) {
+			{ children... }
+		}
+	}
+}
+
 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] text-[color:var(--alt)] bg-[linear-gradient(to_bottom,var(--background),var(--cmp-bg,transparent))]">{ header }</span>
-		<span class="absolute px-[0.625rem] text-[1rem] left-[0.625rem] bottom-[-0.75rem] text-[color:var(--alt)] bg-[linear-gradient(to_bottom,#181825,var(--background))]">{ footer }</span>
-		{ children... }
-	</div>
 	// <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="bg-transparent absolute px-[0.625rem] text-[1rem] left-[0.625rem] top-[-0.75rem] bg-[var(--background)] text-[color:var(--alt)]">{ header }</span>
-	// 	<span class="bg-transparent absolute px-[0.625rem] text-[1rem] left-[0.625rem] bottom-[-0.75rem] bg-[var(--background)] text-[color:var(--alt)]">{ footer }</span>
+	// 	<span class="absolute px-[0.625rem] text-[1rem] left-[0.625rem] top-[-0.75rem] text-[color:var(--alt)] bg-[linear-gradient(to_bottom,var(--background),var(--cmp-bg,transparent))]">{ header }</span>
+	// 	<span class="absolute px-[0.625rem] text-[1rem] left-[0.625rem] bottom-[-0.75rem] text-[color:var(--alt)] bg-[linear-gradient(to_bottom,#181825,var(--background))]">{ footer }</span>
 	// 	{ children... }
 	// </div>
+	<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-(--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() {
@@ -240,17 +264,15 @@ templ SkillsPage(style Style) {
 }
 
 type Project struct {
-	Slug       string       // e.g. "my-game"
-	Title      string       // e.g. "MyGame"
-	Category   string       // e.g. "Game written in Zig"
-	Desc       string       // 1-2 line description/pitch
-	Tags       []ProjectTag // ["Zig", "OpenGL", "Linux"]
-	Status     string
-	Icon       templ.Component
-	CgitURL    string // e.g. "https://cgit.yourdomain.com/my-game"
-	GithubURL  string // Fallback mirror link
-	IsFlagship bool
-	IsPinned   bool
+	Slug      string       // e.g. "my-game"
+	Title     string       // e.g. "MyGame"
+	Category  string       // e.g. "Game written in Zig"
+	Desc      string       // 1-2 line description/pitch
+	Tags      []ProjectTag // ["Zig", "OpenGL", "Linux"]
+	Status    string
+	Icon      templ.Component
+	CgitURL   string // e.g. "https://cgit.yourdomain.com/my-game"
+	GithubURL string // Fallback mirror link
 }
 
 type ProjectTag struct {
@@ -258,18 +280,37 @@ type ProjectTag struct {
 	Color string
 }
 
-type ProjectFLink struct {
+type ProjectLink struct {
 	URL  string
 	Icon templ.Component
 }
 
+type FlagshipInfo struct {
+	Downloads []Download
+	Version   string
+	Stats     []Stat
+	Snippet   string
+}
+
+type Download struct {
+	Label string // "Linux", "Windows"
+	URL   string
+	Size  string // "42 MB"
+}
+
+type Stat struct {
+	Label string
+	Value string
+}
+
 var p Project = Project{
 	Slug:     "krypton",
 	Title:    "Krypton",
 	Category: "Programming Language Compiler",
 	Desc:     "A modern Minecraft creator event. As a developer, I helped with minor improvements to the cosmetics system. ",
 	Icon:     IconCpu("text-[#F5A670] self-center"),
-	Status:   "ON",
+	// Icon:   IconKrypton(),
+	Status: "ON",
 	Tags: []ProjectTag{
 		// {"Programming Language", Color("--extra")},
 		// {"Compiler", Color("--extra")},
@@ -277,13 +318,297 @@ var p Project = Project{
 		{"LLVM", Color("text-[#FFFFFF]")},
 		// {"Java", Color("#F5A670")},
 	},
-	CgitURL:    "https://whatever",
-	GithubURL:  "",
-	IsFlagship: true,
-	IsPinned:   false,
+	CgitURL:   "https://whatever",
+	GithubURL: "",
+}
+
+var flagship FlagshipInfo = FlagshipInfo{
+	Version: "Sprout.0 2026-08-13",
+	Downloads: []Download{
+		{"linux-amd64", "https://foobar", "23 MB"},
+		// {"linux-arm64", "https://foobar", "52 MB"},
+		// {"macos-arm64", "https://fooshit", "47 MB"},
+		{"windows-amd64", "https://fooshit", "65.7 MB"},
+	},
+	// Stats:   []Stat{{"lines of code", "18.7k"}},
+	Snippet: `
+io :: import "core/io";
+
+main :: proc() {
+  io.printf("Hello, %s", "world");
+}
+`,
+}
+
+var versionBeforeDownloads = false
+
+const flagshipClasses = "[--border-py:1.25rem] border-(--accent)! bg-white/[0.03] shadow-[0_0_1.5rem_color-mix(in_srgb,var(--accent)_25%,transparent)]"
+
+templ FlagshipProject(project Project, extra string) {
+	@TerminalBorder("", "", flagshipClasses+" "+extra) {
+		<div class="flex gap-8 w-full">
+			<div class="flex flex-col gap-4 flex-1 min-w-0">
+				<div class="flex flex-wrap items-baseline gap-x-[1ch] gap-y-[0.4rem]">
+					@project.Icon
+					<a href={ templ.SafeURL("/projects/" + project.Slug) } class="text-[170%] font-bold text-(--accent) hover:underline">{ project.Title }</a>
+					<span class="text-[85%] text-(--primary)">{ project.Category }</span>
+					for _, tag := range project.Tags {
+						<code class={ "text-[75%] px-[0.4rem] inline-block rounded-[0.3rem] border-[0.01rem] bg-(--alt)/25" + " " + tag.Color }>{ tag.Name }</code>
+					}
+					<span class="ml-auto flex items-center self-center">
+						@IconLink("https://git.example.com/foo", "git", "") {
+							@IconGit("text-(--primary)")
+						}
+						@IconLink("https://github.com/foo", "github", "") {
+							@IconGithub("text-(--secondary)")
+						}
+						@IconLink("https://example.com", "website", "") {
+							@IconExternal("text-(--accent)")
+						}
+					</span>
+				</div>
+				<p class="leading-relaxed max-w-3xl">{ project.Desc }</p>
+				if len(flagship.Downloads) > 0 || flagship.Version != "" {
+					<div class="flex flex-wrap items-center gap-x-4 gap-y-2">
+						if versionBeforeDownloads {
+							@VersionTag(project)
+						}
+						for _, d := range flagship.Downloads {
+							@DownloadButton(d)
+						}
+						if !versionBeforeDownloads {
+							@VersionTag(project)
+						}
+					</div>
+				}
+				if len(flagship.Stats) > 0 {
+					<div class="flex flex-wrap gap-x-[2rem] gap-y-[0.4rem] text-[85%]">
+						for _, stat := range flagship.Stats {
+							<span class="flex gap-[1ch]">
+								<span class="font-bold text-(--primary)">{ stat.Value }</span>
+								<span class="text-(--alt)">{ stat.Label }</span>
+							</span>
+						}
+					</div>
+				}
+			</div>
+			if flagship.Snippet != "" {
+				<div class="shrink-0 self-start flex flex-col gap-[0.5rem] p-[1rem] rounded-[0.4rem] bg-black/30">
+					<span class="text-[75%] text-(--alt)">example</span>
+					@CopyPre(flagship.Snippet, "text-[80%] leading-[normal]") {
+						{ flagship.Snippet }
+					}
+				</div>
+			}
+		</div>
+	}
+}
+
+templ VersionTag(project Project) {
+	if flagship.Version != "" {
+		<span class="flex items-baseline gap-[1ch] text-[85%]">
+			<code class="text-[#46d46c]">{ flagship.Version }</code>
+			// <a href={ templ.SafeURL("/projects/" + project.Slug + "#changelog") } class="text-(--alt) hover:underline">changelog</a>
+		</span>
+	}
+}
+
+templ DownloadButton(d Download) {
+	<a href={ templ.SafeURL(d.URL) } class="no-underline inline-flex items-center gap-[1ch] px-[0.6rem] py-[0.1rem] rounded-[0.4rem] border-[0.1rem] border-solid border-(--secondary)/60 text-[85%] text-(--secondary) transition-colors hover:bg-(--secondary)/15">
+		@IconArchive("text-(--secondary)")
+		<span>{ d.Label }</span>
+		if d.Size != "" {
+			<span class="text-(--alt)">{ d.Size }</span>
+		}
+	</a>
+}
+
+templ IconArchive(color string) {
+	@Icon(color) {
+		<rect width="20" height="5" x="2" y="3" rx="1"></rect>
+		<path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"></path>
+		<path d="M10 12h4"></path>
+	}
+}
+
+const flagshipClassesV4 = "[--border-py:1.25rem] border-(--accent)! bg-white/[0.03] shadow-[0_0_1.5rem_color-mix(in_srgb,var(--accent)_25%,transparent)]"
+
+templ FlagshipProjectV4(project Project, extra string) {
+	@TerminalBorder("", "", flagshipClasses+" "+extra) {
+		<div class="flex gap-[2rem] w-full">
+			<div class="flex flex-col gap-[1rem] flex-1 min-w-0">
+				<div class="flex flex-wrap items-baseline gap-x-[1ch] gap-y-[0.4rem]">
+					@project.Icon
+					<a href={ templ.SafeURL("/projects/" + project.Slug) } class="text-[170%] font-bold text-(--accent) hover:underline">{ project.Title }</a>
+					<span class="text-[85%] text-(--primary)">{ project.Category }</span>
+					for _, tag := range project.Tags {
+						<code class={ "text-[75%] px-[0.4rem] inline-block rounded-[0.3rem] border-[0.01rem] bg-(--alt)/25" + " " + tag.Color }>{ tag.Name }</code>
+					}
+					<span class="ml-auto flex items-center self-center">
+						@IconLink("https://git.example.com/foo", "git", "") {
+							@IconGit("text-(--primary)")
+						}
+						@IconLink("https://github.com/foo", "github", "") {
+							@IconGithub("text-(--secondary)")
+						}
+						@IconLink("https://example.com", "website", "") {
+							@IconExternal("text-(--accent)")
+						}
+					</span>
+				</div>
+				<p class="leading-relaxed max-w-3xl">{ project.Desc }</p>
+				if len(project.Downloads) > 0 || project.Version != "" {
+					<div class="flex flex-wrap items-center gap-x-[1rem] gap-y-[0.5rem]">
+						for _, d := range project.Downloads {
+							@DownloadButton(d)
+						}
+						if project.Version != "" {
+							<code class="text-[85%] text-(--alt)">{ project.Version }</code>
+						}
+					</div>
+				}
+				if len(project.Stats) > 0 {
+					<div class="flex flex-wrap gap-x-[2rem] gap-y-[0.4rem] text-[85%]">
+						for _, stat := range project.Stats {
+							<span class="flex gap-[1ch]">
+								<span class="font-bold text-(--primary)">{ stat.Value }</span>
+								<span class="text-(--alt)">{ stat.Label }</span>
+							</span>
+						}
+					</div>
+				}
+			</div>
+			if project.Snippet != "" {
+				<div class="shrink-0 self-start flex flex-col gap-[0.5rem] p-[1rem] rounded-[0.4rem] bg-black/30">
+					<span class="text-[75%] text-(--alt)">example</span>
+					@CopyPre(project.Snippet, "text-[80%] leading-[normal]") {
+						{ project.Snippet }
+					}
+				</div>
+			}
+		</div>
+	}
 }
 
-templ FlagshipProject(project Project) {
+templ DownloadButtonV4(d Download) {
+	<a href={ templ.SafeURL(d.URL) } class="inline-flex items-center gap-[1ch] px-[0.8rem] py-[0.3rem] rounded-[0.4rem] border-[0.1rem] border-solid border-(--alt) text-(--primary) transition-colors hover:bg-(--alt)/25">
+		@IconDownload("text-(--primary)")
+		{ d.Label }
+	</a>
+}
+
+templ IconDownload(color string) {
+	@Icon(color) {
+		<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+		<polyline points="7 10 12 15 17 10"></polyline>
+		<line x1="12" x2="12" y1="15" y2="3"></line>
+	}
+}
+
+const flagshipClassesV3 = "[--border-py:1.25rem] border-(--primary)! bg-white/[0.03] shadow-[0_0_1.5rem_color-mix(in_srgb,var(--primary)_25%,transparent)]"
+
+templ FlagshipProjectV3(project Project, extra string) {
+	@TerminalBorder("", "", flagshipClasses+" "+extra) {
+		<div class="flex gap-[2rem] w-full">
+			<div class="flex flex-col gap-[1rem] flex-1 min-w-0">
+				<div class="flex flex-wrap items-baseline gap-x-[1ch] gap-y-[0.4rem]">
+					@project.Icon
+					<a href={ templ.SafeURL("/projects/" + project.Slug) } class="text-[170%] font-bold text-(--accent) hover:underline">{ project.Title }</a>
+					<code class="px-[0.5rem] rounded-[0.3rem] border-[0.1rem] border-(--accent)/50 text-[85%] text-(--accent)">{ project.Version }</code>
+					<span class="text-[85%] text-(--primary)">{ project.Category }</span>
+					for _, tag := range project.Tags {
+						<code class={ "text-[75%] px-[0.4rem] inline-block rounded-[0.3rem] border-[0.01rem] bg-(--alt)/25" + " " + tag.Color }>{ tag.Name }</code>
+					}
+					<span class="ml-auto flex items-center self-center">
+						@IconLink("https://git.example.com/foo", "git", "") {
+							@IconGit("text-(--primary)")
+						}
+						@IconLink("https://github.com/foo", "github", "") {
+							@IconGithub("text-(--secondary)")
+						}
+						@IconLink("https://example.com", "website", "") {
+							@IconExternal("text-(--accent)")
+						}
+					</span>
+				</div>
+				<p class="leading-relaxed max-w-3xl">{ project.Desc }</p>
+				if project.Install != "" {
+					@CopyPre(project.Install, "text-[85%] leading-[normal]") {
+						{ "$ " + project.Install }
+					}
+				}
+				if project.Devlog != nil {
+					<a href={ templ.SafeURL("/blogs/" + project.Devlog.Slug) } class="text-[85%] text-(--secondary) hover:underline">
+						{ "latest devlog: " + project.Devlog.Title }
+					</a>
+				}
+			</div>
+			if project.Snippet != "" {
+				<div class="shrink-0 self-start flex flex-col gap-[0.5rem] p-[1rem] rounded-[0.4rem] bg-black/30">
+					<span class="text-[75%] text-(--alt)">example</span>
+					@CopyPre(project.Snippet, "text-[80%] leading-[normal]") {
+						{ project.Snippet }
+					}
+				</div>
+			}
+		</div>
+	}
+}
+
+templ FlagshipProjectV2(project Project, extra string) {
+	@TerminalBorder(project.Version, "", flagshipClasses+" "+extra) {
+		<div class="flex gap-[2rem] w-full">
+			<div class="flex flex-col gap-[1rem] flex-1 min-w-0">
+				<div class="flex flex-wrap items-baseline gap-x-[1ch] gap-y-[0.4rem]">
+					@project.Icon
+					<a href={ templ.SafeURL("/projects/" + project.Slug) } class="text-[170%] font-bold text-(--primary) hover:underline">{ project.Title }</a>
+					<span class="text-[85%] text-(--secondary)">{ project.Category }</span>
+					for _, tag := range project.Tags {
+						<code class={ "text-[75%] px-[0.4rem] inline-block rounded-[0.3rem] border-[0.01rem] bg-(--alt)/25" + " " + tag.Color }>{ tag.Name }</code>
+					}
+					<span class="ml-auto flex items-center self-center">
+						@IconLink("https://git.example.com/foo", "git", "") {
+							@IconGit("text-(--primary)")
+						}
+						@IconLink("https://github.com/foo", "github", "") {
+							@IconGithub("text-(--secondary)")
+						}
+						@IconLink("https://example.com", "website", "") {
+							@IconExternal("text-(--accent)")
+						}
+					</span>
+				</div>
+				<p class="leading-relaxed max-w-3xl">{ project.Desc }</p>
+				<div class="flex flex-wrap items-center gap-[0.5ch] pt-[1rem] border-t border-white/10 text-[85%]">
+					for i, stage := range project.Pipeline {
+						if i > 0 {
+							<span class="text-(--alt)">→</span>
+						}
+						<code class="px-[0.4rem] rounded-[0.3rem] bg-(--alt)/25 text-(--accent)">{ stage }</code>
+					}
+				</div>
+				<div class="flex flex-wrap gap-x-[2.5rem] gap-y-[0.75rem]">
+					for _, stat := range project.Stats {
+						<div class="flex flex-col">
+							<span class="text-[150%] font-bold text-(--primary)">{ stat.Value }</span>
+							<span class="text-[75%] text-(--alt)">{ stat.Label }</span>
+						</div>
+					}
+				</div>
+			</div>
+			if project.Snippet != "" {
+				<div class="shrink-0 self-start flex flex-col gap-[0.5rem] p-[1rem] rounded-[0.4rem] bg-black/30">
+					<span class="text-[75%] text-(--alt)">example</span>
+					@CopyPre(project.Snippet, "text-[80%] leading-[normal]") {
+						{ project.Snippet }
+					}
+				</div>
+			}
+		</div>
+	}
+}
+
+templ FlagshipProjectV1(project Project) {
 	<div class="relative border border-[var(--primary)]/40 rounded bg-white/[0.03] p-6 mb-10 shadow-[0_0_15px_rgba(0,0,0,0.3)]">
 		<!-- Header Bar -->
 		<div class="flex items-center justify-between pb-3 mb-4 border-b border-white/10 font-mono text-xs">
@@ -401,6 +726,13 @@ templ IconExternal(color string) {
 	}
 }
 
+templ IconKrypton() {
+	@Icon("text-[#00f1ff]") {
+		<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-circle-dot preview-icon"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="12" r="10"></circle></svg>
+	}
+	// { "\uf192" }
+}
+
 templ ProjectItem(project Project, extra string) {
 	<div>
 		@TerminalBorder("", "", "[--border-py:0.25rem] py-2 text-[80%] bg-black/20 hover:bg-white/5 transition-colors duration-150"+" "+extra) {
@@ -438,17 +770,15 @@ func DoubleProject(project Project) Project {
 	return project
 }
 
-templ ProjectsPage(style Style, projects []Project) {
+templ ProjectsPage(style Style, projects []Project, pinned int) {
 	@TerminalLayout(style, "/home/kyren/projects") {
-		@FlagshipProject(p)
-		// @PinnedGrid(projects)
-		// All projects
+		@FlagshipProject(projects[0], "mb-[1.5rem]")
 		@ScrollBox("") {
 			@TerminalStack(false, "mt-[0.5rem]") {
 				for i := 0; i < 1; i++ {
-					for i, project := range projects {
-						if i % 2 == 0 {
-							@ProjectItem(DoubleProject(project), "my-[-0.15rem]")
+					for i, project := range projects[1:] {
+						if i < pinned {
+							@ProjectItem(project, "my-[-0.15rem] border-(--text)")
 						} else {
 							@ProjectItem(project, "my-[-0.15rem]")
 						}