diff options
| -rw-r--r-- | layouts/shortcodes/pkg-list.html | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/layouts/shortcodes/pkg-list.html b/layouts/shortcodes/pkg-list.html new file mode 100644 index 0000000..df382dd --- /dev/null +++ b/layouts/shortcodes/pkg-list.html @@ -0,0 +1,70 @@ +{{- $loading := i18n "pkg_list_loading" | default "Loading packages..." -}} +{{- $error := i18n "pkg_list_error" | default "Could not load packages." -}} +{{- $filter := i18n "pkg_list_filter" | default "Filter packages..." -}} +{{- $view := i18n "pkg_list_link_label" | default "View" -}} + +<div + x-data="pkgList({ loading: {{ $loading | jsonify }}, error: {{ $error | jsonify }}, filter: {{ $filter | jsonify }}, view: {{ $view | jsonify }} })" + x-init="init()" + class="not-prose my-6" +> + <div x-show="state === 'loading'" class="flex items-center gap-2 text-text-dim py-4"> + <svg class="animate-spin w-4 h-4 text-accent" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true"> + <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> + <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path> + </svg> + <span x-text="i18n.loading"></span> + </div> + + <div x-show="state === 'error'" class="px-4 py-3 rounded-lg bg-surface border border-border text-sm text-text"> + <span x-text="i18n.error"></span> + <a href="https://packages.danix.xyz" target="_blank" rel="noopener" class="ml-2 text-accent underline">packages.danix.xyz</a> + </div> + + <div x-show="state === 'loaded'"> + <div class="mb-3"> + <input + type="text" + x-model="filter" + :placeholder="i18n.filter" + class="w-full sm:w-72 px-3 py-2 text-sm bg-bg border border-border/50 rounded-lg text-text placeholder-text-dim focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-colors" + aria-label="Filter packages" + /> + </div> + <div class="overflow-x-auto rounded-lg border border-border/50"> + <table class="w-full text-sm text-left"> + <thead class="bg-surface text-text-dim uppercase text-xs tracking-wide"> + <tr> + <th class="px-4 py-3">Package</th> + <th class="px-4 py-3">Version</th> + <th class="px-4 py-3 text-right">Link</th> + </tr> + </thead> + <tbody class="divide-y divide-border/30"> + <template x-for="pkg in filtered" :key="pkg.label"> + <tr class="hover:bg-surface/50 transition-colors"> + <td class="px-4 py-2 font-mono font-medium text-text" x-text="pkg.name"></td> + <td class="px-4 py-2 font-mono text-text-dim" x-text="pkg.version"></td> + <td class="px-4 py-2 text-right"> + <a + :href="pkg.url" + target="_blank" + rel="noopener" + class="inline-flex items-center gap-1 text-accent hover:underline text-xs" + :aria-label="'View ' + pkg.name + ' in repository'" + > + <span x-text="pkg.label"></span> + <i data-feather="external-link" class="w-3 h-3" aria-hidden="true"></i> + </a> + </td> + </tr> + </template> + <tr x-show="filtered.length === 0"> + <td colspan="3" class="px-4 py-4 text-center text-text-dim text-sm">No packages match your filter.</td> + </tr> + </tbody> + </table> + </div> + <p class="mt-2 text-xs text-text-dim" x-text="filtered.length + ' / ' + packages.length + ' packages'"></p> + </div> +</div> |