diff options
Diffstat (limited to 'website.templ')
| -rw-r--r-- | website.templ | 147 |
1 files changed, 77 insertions, 70 deletions
diff --git a/website.templ b/website.templ index a3f137a..face9f9 100644 --- a/website.templ +++ b/website.templ @@ -1,81 +1,88 @@ package main -import "fmt" +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/theme.js" defer></script> + <link rel="stylesheet" href="/public/style.css"/> + { children... } + </head> +} + +templ NavLink(href string, label string) { + <a href={ templ.SafeURL(href) } class="text-(--primary) hover:text-(--accent)">{ label }</a> +} -// 1. Shared Base Layout Component -templ PageLayout(title string) { - <!DOCTYPE html> - <html lang="en"> - <head> - <meta charset="UTF-8"/> - <title>{ title }</title> - <style> - body { font-family: monospace; background: #0f172a; color: #f8fafc; padding: 2rem; line-height: 1.5; } - nav a { color: #38bdf8; margin-right: 1rem; text-decoration: none; } - nav a:hover { text-decoration: underline; } - .card { background: #1e293b; padding: 1rem; border-radius: 8px; margin-top: 1rem; border: 1px solid #334155; } - .badge-active { color: #4ade80; } - .badge-inactive { color: #f87171; } - </style> - <link rel="stylesheet" href="/public/style.css"/> - </head> - <body> - <nav> - <a href="/">/home</a> - <a href="/about">/about</a> - <a href="/items">/items</a> - </nav> - <hr style="border-color: #334155; margin: 1rem 0;"/> - { children... } - </body> - </html> +templ NavComponent(path string) { + <nav class="flex justify-between gap-10 p-4 mb-[1.5625rem] border-2 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> } -// 2. Page 1: Home -templ HomePage() { - @PageLayout("Home") { - <h1>Home</h1> - <p>Go server running with Templ templates and Air hot-reloading.</p> - } +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="w-[75rem] h-[40rem] p-8 border-[0.2rem] border-(--text) overflow-hidden text-[1.125rem]"> + @NavComponent(path) + { children... } + </main> + </body> + </html> } -// 3. Page 2: About -templ AboutPage() { - @PageLayout("About") { - <h1 class="text-3xl font-bold underline">About</h1> - <p>Single-binary web app using Go's standard library net/http.</p> - } +templ HomePage(style Style) { + @TerminalLayout(style, "/home/kyren/") { + <div id="content" class="w-0 h-0 invisible sm:w-full sm:h-full sm:visible"> + <h1>Home</h1> + <p>Go server running with Templ templates and Air hot-reloading.</p> + </div> + } } -// Data struct for dynamic rendering -type Item struct { - Name string - Active bool +templ SkillsPage(style Style) { + @TerminalLayout(style, "/home/kyren/skills.md") { + <h1 class="text-3xl font-bold">About</h1> + <p>Single-binary web app using Go's standard library net/http.</p> + } } -// 4. Page 3: Dynamic Data (Conditionals + Loops) -templ ItemsPage(items []Item) { - @PageLayout("Items") { - <h1>Items</h1> - <div class="card"> - if len(items) == 0 { - <p>No items in database.</p> - } else { - <ul> - for _, item := range items { - <li> - <span>{ item.Name }</span> - if item.Active { - <span class="badge-active"> [ACTIVE]</span> - } else { - <span class="badge-inactive"> [INACTIVE]</span> - } - </li> - } - </ul> - } - </div> - <p style="color: #94a3b8; font-size: 0.8rem; margin-top: 1rem;"> - { fmt.Sprintf("Total items processed: %d", len(items)) } - </p> - } +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> + } +} |