diff options
Diffstat (limited to 'website.templ')
| -rw-r--r-- | website.templ | 86 |
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> +} |