From a7ecfccc8a5f1bb8d0d3ae03dc125672b428f31f Mon Sep 17 00:00:00 2001 From: Kyren223 Date: Fri, 9 Oct 2026 06:19:56 +0300 Subject: Save --- website.templ | 396 +++++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 363 insertions(+), 33 deletions(-) (limited to 'website.templ') 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) { @@ -28,8 +30,16 @@ templ HeadComponent(title string, description string) { } +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 == "") {

@@ -59,17 +69,31 @@ templ TerminalStack(joined bool, extra string) { } +templ TerminalBorderForBlog(header string, footer string, extra string, enable bool) { + if enable { +
+ { header } + { footer } + { children... } +
+ } else { + @TerminalBorder(header, footer, extra) { + { children... } + } + } +} + templ TerminalBorder(header string, footer string, extra string) { -
- { header } - { footer } - { children... } -
//
- // { header } - // { footer } + // { header } + // { footer } // { children... } //
+
+ { header } + { footer } + { children... } +
} 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) { +
+
+
+ @project.Icon + { project.Title } + { project.Category } + for _, tag := range project.Tags { + { tag.Name } + } + + @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)") + } + +
+

{ project.Desc }

+ if len(flagship.Downloads) > 0 || flagship.Version != "" { +
+ if versionBeforeDownloads { + @VersionTag(project) + } + for _, d := range flagship.Downloads { + @DownloadButton(d) + } + if !versionBeforeDownloads { + @VersionTag(project) + } +
+ } + if len(flagship.Stats) > 0 { +
+ for _, stat := range flagship.Stats { + + { stat.Value } + { stat.Label } + + } +
+ } +
+ if flagship.Snippet != "" { +
+ example + @CopyPre(flagship.Snippet, "text-[80%] leading-[normal]") { + { flagship.Snippet } + } +
+ } +
+ } +} + +templ VersionTag(project Project) { + if flagship.Version != "" { + + { flagship.Version } + // changelog + + } +} + +templ DownloadButton(d Download) { + + @IconArchive("text-(--secondary)") + { d.Label } + if d.Size != "" { + { d.Size } + } + +} + +templ IconArchive(color string) { + @Icon(color) { + + + + } +} + +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) { +
+
+
+ @project.Icon + { project.Title } + { project.Category } + for _, tag := range project.Tags { + { tag.Name } + } + + @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)") + } + +
+

{ project.Desc }

+ if len(project.Downloads) > 0 || project.Version != "" { +
+ for _, d := range project.Downloads { + @DownloadButton(d) + } + if project.Version != "" { + { project.Version } + } +
+ } + if len(project.Stats) > 0 { +
+ for _, stat := range project.Stats { + + { stat.Value } + { stat.Label } + + } +
+ } +
+ if project.Snippet != "" { +
+ example + @CopyPre(project.Snippet, "text-[80%] leading-[normal]") { + { project.Snippet } + } +
+ } +
+ } } -templ FlagshipProject(project Project) { +templ DownloadButtonV4(d Download) { + + @IconDownload("text-(--primary)") + { d.Label } + +} + +templ IconDownload(color string) { + @Icon(color) { + + + + } +} + +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) { +
+
+
+ @project.Icon + { project.Title } + { project.Version } + { project.Category } + for _, tag := range project.Tags { + { tag.Name } + } + + @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)") + } + +
+

{ project.Desc }

+ if project.Install != "" { + @CopyPre(project.Install, "text-[85%] leading-[normal]") { + { "$ " + project.Install } + } + } + if project.Devlog != nil { + + { "latest devlog: " + project.Devlog.Title } + + } +
+ if project.Snippet != "" { +
+ example + @CopyPre(project.Snippet, "text-[80%] leading-[normal]") { + { project.Snippet } + } +
+ } +
+ } +} + +templ FlagshipProjectV2(project Project, extra string) { + @TerminalBorder(project.Version, "", flagshipClasses+" "+extra) { +
+
+
+ @project.Icon + { project.Title } + { project.Category } + for _, tag := range project.Tags { + { tag.Name } + } + + @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)") + } + +
+

{ project.Desc }

+
+ for i, stage := range project.Pipeline { + if i > 0 { + → + } + { stage } + } +
+
+ for _, stat := range project.Stats { +
+ { stat.Value } + { stat.Label } +
+ } +
+
+ if project.Snippet != "" { +
+ example + @CopyPre(project.Snippet, "text-[80%] leading-[normal]") { + { project.Snippet } + } +
+ } +
+ } +} + +templ FlagshipProjectV1(project Project) {
@@ -401,6 +726,13 @@ templ IconExternal(color string) { } } +templ IconKrypton() { + @Icon("text-[#00f1ff]") { + + } + // { "\uf192" } +} + templ ProjectItem(project Project, extra string) {
@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]") } -- cgit v1.3.1