mirror of
https://github.com/roots/wp-packages
synced 2026-07-22 02:10:54 +08:00
154cb2f376Replace Go's html/template with CloudyKit/jet/v6 for server-rendered templates. Jet provides first-class parameterized blocks, template inheritance via extends/yield, and C-like expressions — eliminating the dict helper workarounds that html/template required for reusable components. Add components.html with four reusable Jet blocks: - shell(command, variant, class) — copyable command boxes (replaces ~16 duplicated instances across 6 templates) - notice(variant, class) with yield content — alert boxes with variant-based styling and content slots - input(icon, name, ...) — form inputs with icon and keyboard hint - pagination(pager, class) — pagination controls driven by pre-computed buildPagination() data Key changes: - templates.go: embed.FS loader for Jet, function registration via AddGlobal, buildPagination() helper, render() using VarMap - handlers.go: simplified render calls (no more template combinations) - router.go: *jet.Set replaces *templateSet - All 13 templates converted to Jet syntax (extends/block/yield) - Tailwind scanning unaffected (templates remain .html files) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
29 lines
2.6 KiB
HTML
29 lines
2.6 KiB
HTML
{{import "components.html"}}
|
|
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 mb-10">
|
|
{{range _, pkg := Packages}}
|
|
<a href="/packages/wp-{{pkg.Type}}/{{pkg.Name}}" class="group min-w-0">
|
|
<div class="h-full rounded-xl border border-gray-200/60 bg-white p-4 transition-all duration-200 hover:border-brand-primary/40 hover:shadow-md">
|
|
<div class="flex items-start gap-3 mb-3">
|
|
<div class="mt-0.5 flex w-9 h-9 shrink-0 items-center justify-center rounded-lg bg-brand-lightest/60">
|
|
<svg class="w-4 h-4 text-brand-primary" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"/></svg>
|
|
</div>
|
|
<div class="min-w-0 flex-1">
|
|
<div class="flex items-center gap-2">
|
|
<h3 class="text-sm font-semibold text-gray-900 truncate group-hover:text-brand-primary transition-colors">{{if pkg.DisplayName}}{{pkg.DisplayName}}{{else}}{{pkg.Name}}{{end}}</h3>
|
|
</div>
|
|
<div class="flex items-center gap-2 mt-0.5">
|
|
{{if pkg.CurrentVersion}}<span class="text-xs font-mono text-gray-500">{{pkg.CurrentVersion}}</span>{{end}}
|
|
<span class="inline-flex items-center rounded-md bg-gray-100 px-1.5 py-0 h-4 text-[10px] text-gray-500">{{pkg.Type}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{if pkg.Description}}<p class="text-xs text-gray-500 line-clamp-2 mb-3 leading-relaxed">{{pkg.Description}}</p>{{end}}
|
|
<div class="flex items-center justify-between text-xs text-gray-500 pt-2 border-t border-gray-200/40">
|
|
<span class="flex items-center gap-1"><svg class="w-3 h-3 opacity-60" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"/></svg>{{formatNumber(pkg.ActiveInstalls)}} active installs</span>
|
|
<span class="flex items-center gap-1"><svg class="w-3 h-3 opacity-60" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"/></svg>{{formatNumber(pkg.WpPackagesInstallsTotal)}} composer installs</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
{{yield pagination(pager=Pagination, class="pb-8")}}
|
