feat: add pkg-changelog shortcode template

1 files changed, 45 insertions, 0 deletions

diff --git a/layouts/shortcodes/pkg-changelog.html b/layouts/shortcodes/pkg-changelog.html
new file mode 100644
index 0000000..a7eacd6
--- /dev/null
+++ b/layouts/shortcodes/pkg-changelog.html
@@ -0,0 +1,45 @@
+{{- $count   := .Get "count" | default "10" -}}
+{{- $loading := i18n "pkg_changelog_loading" | default "Loading changelog..." -}}
+{{- $error   := i18n "pkg_changelog_error"   | default "Could not load changelog." -}}
+
+<div
+  x-data="pkgChangelog({{ $count }}, { loading: {{ $loading | jsonify }}, error: {{ $error | 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/ChangeLog.txt" target="_blank" rel="noopener" class="ml-2 text-accent underline">ChangeLog.txt</a>
+  </div>
+
+  <div x-show="state === 'loaded'" class="relative">
+    <div class="absolute left-3 top-0 bottom-0 w-px bg-border/40" aria-hidden="true"></div>
+
+    <ul class="space-y-6 pl-10" role="list">
+      <template x-for="(entry, idx) in entries" :key="idx">
+        <li class="relative">
+          <span
+            class="absolute -left-7 top-1 w-3 h-3 rounded-full bg-accent ring-2 ring-bg"
+            aria-hidden="true"
+          ></span>
+          <time
+            class="block text-xs font-semibold text-accent mb-1"
+            x-text="entry.timestamp"
+          ></time>
+          <pre
+            class="text-xs text-text-dim font-mono whitespace-pre-wrap break-words bg-surface/50 rounded px-3 py-2 border border-border/30"
+            x-text="entry.changes"
+          ></pre>
+        </li>
+      </template>
+    </ul>
+  </div>
+</div>