kokopi/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add:badges

Browse Source
This commit is contained in:
kokopi-dev
2026-03-10 19:06:17 +09:00
parent 63699c2450
commit 313548cd99
9 changed files with 225 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
components/badge.templ Normal file
View File

@@ -0,0 +1,47 @@
package components
type BadgeVariant string
const (
BadgeInProgress BadgeVariant = "in-progress"
BadgeDeployed BadgeVariant = "deployed"
)
type badgeConfig struct {
label string
dot string
class string
}
func badgeProps(variant BadgeVariant) badgeConfig {
switch variant {
case BadgeDeployed:
return badgeConfig{
label: "Deployed",
dot: "bg-teal-500",
class: "bg-teal-100 text-teal-700 ring-teal-600/20",
}
default: // in-progress
return badgeConfig{
label: "In Progress",
dot: "bg-violet-400",
class: "bg-violet-100 text-violet-700 ring-violet-600/20",
}
}
}
templ Badge(variant BadgeVariant) {
{{ props := badgeProps(variant) }}
<span
class={ "flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ring-1 ring-inset" , props.class }
>
if props.label == "Deployed" {
<span class="size-3.5 text-teal-600">
<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="0"><animate id="spinner_kIfO" begin="0;spinner_xBIM.end" attributeName="r" calcMode="spline" dur="1.2s" values="0;11" keySplines=".52,.6,.25,.99" fill="freeze"/><animate begin="0;spinner_xBIM.end" attributeName="opacity" calcMode="spline" dur="1.2s" values="1;0" keySplines=".52,.6,.25,.99" fill="freeze"/></circle><circle cx="12" cy="12" r="0"><animate id="spinner_Pbsh" begin="spinner_kIfO.begin+0.2s" attributeName="r" calcMode="spline" dur="1.2s" values="0;11" keySplines=".52,.6,.25,.99" fill="freeze"/><animate begin="spinner_kIfO.begin+0.2s" attributeName="opacity" calcMode="spline" dur="1.2s" values="1;0" keySplines=".52,.6,.25,.99" fill="freeze"/></circle><circle cx="12" cy="12" r="0"><animate id="spinner_xBIM" begin="spinner_kIfO.begin+0.4s" attributeName="r" calcMode="spline" dur="1.2s" values="0;11" keySplines=".52,.6,.25,.99" fill="freeze"/><animate begin="spinner_kIfO.begin+0.4s" attributeName="opacity" calcMode="spline" dur="1.2s" values="1;0" keySplines=".52,.6,.25,.99" fill="freeze"/></circle></svg>
</span>
} else {
<span class={ "h-1.5 w-1.5 rounded-full animate-pulse" , props.dot }></span>
}
{ props.label }
</span>
}

16
components/icons/icons.templ
View File

@@ -1,5 +1,21 @@
package icons
templ Ban(className string) {
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class={ className }
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M4.929 4.929 19.07 19.071"></path>
</svg>
}
templ ArrowUpRight(className string) {
<svg
xmlns="http://www.w3.org/2000/svg"

37
components/layout.templ
View File

@@ -4,43 +4,8 @@ import (
"fmt"
"personal-site/constants"
"time"
"personal-site/components/icons"
)
templ navbar(params *constants.LayoutParams) {
<header class="sticky top-0 z-50 w-full border-b border-zinc-800 bg-bg-100/80 backdrop-blur-sm">
<div class="max-w-3xl mx-auto px-4 h-12 flex items-center justify-between">
<a
href="/"
class="font-mono text-xs text-fg-200 tracking-widest uppercase hover:text-fg-100 transition-colors duration-150 shrink-0"
>
{ params.NavTitle }
</a>
<nav class="flex items-center gap-4">
<a
href="/projects"
class="text-xs text-fg-300 hover:text-fg-100 transition-colors duration-150"
>projects</a>
<a
href="https://git.kokopi.dev/kokopi/personal-site"
class="text-xs text-fg-300 hover:text-fg-100 transition-colors duration-150 flex items-center gap-1.5 sm:p-0 p-0.5"
aria-label="Gitea"
>
@icons.Gitea("size-4 shrink-0")
<span class="hidden sm:inline">gitea</span>
</a>
<a
href="https://github.com/kokopi-dev/personal-site"
class="text-xs text-fg-300 hover:text-fg-100 transition-colors duration-150 flex items-center gap-1.5 sm:p-0 p-0.5"
aria-label="GitHub"
>
@icons.Github("size-4 shrink-0")
<span class="hidden sm:inline">github</span>
</a>
</nav>
</div>
</header>
}
templ MainLayout(params *constants.LayoutParams) {
@@ -53,7 +18,7 @@ templ MainLayout(params *constants.LayoutParams) {
</head>
<body class="relative bg-linear-to-b from-bg-400 to-bg-100 text-fg-100 overflow-hidden font-sans">
<div class="h-screen grid grid-rows-[auto_1fr_auto] overflow-y-auto overflow-x-hidden">
@navbar(params)
@Navbar(params)
// base container
<div class="p-4 mt-6 flex flex-col gap-6 max-w-3xl mx-auto">
{ children... }

39
components/navbar.templ Normal file
View File

@@ -0,0 +1,39 @@
package components
import "personal-site/constants"
import "personal-site/components/icons"
templ Navbar(params *constants.LayoutParams) {
<header class="sticky top-0 z-50 w-full border-b border-zinc-800 bg-bg-100/80 backdrop-blur-sm">
<div class="max-w-3xl mx-auto px-4 h-12 flex items-center justify-between">
<a
href="/"
class="font-mono text-xs text-fg-200 tracking-widest uppercase hover:text-fg-100 transition-colors duration-150 shrink-0"
>
{ params.NavTitle }
</a>
<nav class="flex items-center gap-4">
<a
href="/projects"
class="text-xs text-fg-300 hover:text-fg-100 transition-colors duration-150"
>projects</a>
<a
href="https://git.kokopi.dev/kokopi/personal-site"
class="text-xs text-fg-300 hover:text-fg-100 transition-colors duration-150 flex items-center gap-1.5 sm:p-0 p-0.5"
aria-label="Gitea"
>
@icons.Gitea("size-4 shrink-0")
<span class="hidden sm:inline">gitea</span>
</a>
<a
href="https://github.com/kokopi-dev/personal-site"
class="text-xs text-fg-300 hover:text-fg-100 transition-colors duration-150 flex items-center gap-1.5 sm:p-0 p-0.5"
aria-label="GitHub"
>
@icons.Github("size-4 shrink-0")
<span class="hidden sm:inline">github</span>
</a>
</nav>
</div>
</header>
}