feat: add ansible galaxy card shortcode

assets/icons/ansible.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg fill="currentColor" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><path d="M10.617 11.473l4.686 3.695-3.102-7.662zM12 0C5.371 0 0 5.371 0 12s5.371 12 12 12 12-5.371 12-12S18.629 0 12 0zm5.797 17.305c-.011.471-.403.842-.875.83-.236 0-.416-.09-.664-.293l-6.19-5-2.079 5.203H6.191L11.438 5.44c.124-.314.427-.52.764-.506.326-.014.63.189.742.506l4.774 11.494c.045.111.08.234.08.348-.001.009-.001.009-.001.023z"/></svg>

assets/js/fetch-repo.js

@@ -12,6 +12,14 @@
   }
 
   const platforms = {
+    "ansible-role": {
+      "results.0.download_count": "downloads",
+      "results.0.summary_fields.versions.0.name": "version",
+    },
+    "ansible-collection": {
+      download_count: "downloads",
+      "highest_version.version": "version",
+    },
     github: {
       full_name: "full_name",
       description: "description",
@@ -49,12 +57,27 @@
     },
   };
 
+  const formatThousands = (value) =>
+    value == null ? value : Number(value).toLocaleString("en-US");
+
   const processors = {
     huggingface: {
       description: (value) => value?.replace(/Dataset Card for .+?\s+Dataset Summary\s+/, "").trim() || value,
     },
+    "ansible-role": {
+      "results.0.download_count": formatThousands,
+    },
+    "ansible-collection": {
+      download_count: formatThousands,
+    },
   };
 
+  const getNested = (obj, path) =>
+    path.split(".").reduce((acc, key) => {
+      if (acc == null) return undefined;
+      return Array.isArray(acc) ? acc[Number(key)] : acc[key];
+    }, obj);
+
   const platform = Object.keys(platforms).find((p) => repoId.startsWith(p)) || "github";
   const mapping = platforms[platform];
 
@@ -77,7 +100,7 @@
     Object.entries(mapping).forEach(([dataField, elementSuffix]) => {
       const element = document.getElementById(`${repoId}-${elementSuffix}`);
       if (element) {
-        let value = data[dataField];
+        let value = getNested(data, dataField);
         if (processors[platform]?.[dataField]) {
           value = processors[platform][dataField](value);
         }

exampleSite/content/docs/shortcodes/index.md

@@ -187,6 +187,37 @@ The alert sign (`+` or `-`) is optional to control whether the admonition is fol
 
 <br/><br/><br/>
 
+## Ansible Galaxy Card
+
+`ansible` renders a card for an [Ansible Galaxy](https://galaxy.ansible.com/) entry, fetched at build time. It accepts either a `role` or a `collection` parameter, both in `namespace.name` form.
+
+<!-- prettier-ignore-start -->
+| Parameter    | Description                                                                          |
+| ------------ | ------------------------------------------------------------------------------------ |
+| `role`       | [String] Galaxy role in the format `namespace.name`, e.g. `geerlingguy.docker`       |
+| `collection` | [String] Galaxy collection in the format `namespace.name`, e.g. `community.general`  |
+<!-- prettier-ignore-end -->
+
+Set exactly one of `role` or `collection` per call.
+
+**Example 1: Role**
+
+```md
+{{</* ansible role="geerlingguy.docker" */>}}
+```
+
+{{< ansible role="geerlingguy.docker" >}}
+
+**Example 2: Collection**
+
+```md
+{{</* ansible collection="community.general" */>}}
+```
+
+{{< ansible collection="community.general" >}}
+
+<br/><br/><br/>
+
 ## Article
 
 `Article` will embed a single article into a markdown file. The `link` to the file should be the `.RelPermalink` of the file to be embedded. Note that the shortcode will not display anything if it's referencing it's parent. _Note: if you are running your website in a subfolder like Blowfish (i.e. /blowfish/) please include that path in the link._

layouts/shortcodes/ansible.html

@@ -0,0 +1,174 @@
+{{- $role := .Get "role" -}}
+{{- $collection := .Get "collection" -}}
+{{- $apiURL := "" -}}
+{{- $repoLink := "" -}}
+{{- $type := "" -}}
+{{- $namespace := "" -}}
+{{- $name := "" -}}
+
+{{- if $role -}}
+  {{- $parts := split $role "." -}}
+  {{- $namespace = index $parts 0 -}}
+  {{- $name = index $parts 1 -}}
+  {{- $apiURL = print "https://galaxy.ansible.com/api/v1/roles/?owner__username=" $namespace "&name=" $name -}}
+  {{- $repoLink = print "https://galaxy.ansible.com/ui/standalone/roles/" $namespace "/" $name "/" -}}
+  {{- $type = "role" -}}
+{{- else if $collection -}}
+  {{- $parts := split $collection "." -}}
+  {{- $namespace = index $parts 0 -}}
+  {{- $name = index $parts 1 -}}
+  {{- $apiURL = print "https://galaxy.ansible.com/api/v3/plugin/ansible/content/published/collections/index/" $namespace "/" $name "/" -}}
+  {{- $repoLink = print "https://galaxy.ansible.com/ui/repo/published/" $namespace "/" $name "/" -}}
+  {{- $type = "collection" -}}
+{{- end -}}
+
+{{ $id := delimit (slice "ansible" $type (partial "functions/uid.html" .)) "-" }}
+
+{{- $title := "" -}}
+{{- $description := "" -}}
+{{- $downloads := 0 -}}
+{{- $version := "" -}}
+{{- $tags := slice -}}
+{{- $license := "" -}}
+{{- $dataAvailable := false -}}
+
+{{- /* Formats an integer with comma thousand separators (lang.NumFmt is unavailable in this template context). */ -}}
+{{- define "_format-int" -}}
+  {{- $n := printf "%d" (int .) -}}
+  {{- $out := "" -}}
+  {{- $len := len $n -}}
+  {{- range $i := seq $len -}}
+    {{- $idx := sub $i 1 -}}
+    {{- $c := substr $n $idx 1 -}}
+    {{- if and (gt $idx 0) (eq (mod (sub $len $idx) 3) 0) -}}
+      {{- $out = print $out "," $c -}}
+    {{- else -}}
+      {{- $out = print $out $c -}}
+    {{- end -}}
+  {{- end -}}
+  {{- $out -}}
+{{- end -}}
+
+{{- with try (resources.GetRemote $apiURL) -}}
+  {{- with .Err -}}
+    {{- warnf "ansible shortcode: failed to fetch remote resource from %q: %s" $apiURL $.Position -}}
+  {{- else with .Value -}}
+    {{- $resp := . | transform.Unmarshal -}}
+    {{- if eq $type "role" -}}
+      {{- with index ($resp.results | default slice) 0 -}}
+        {{- $title = print $namespace "." .name -}}
+        {{- $description = .description -}}
+        {{- $downloads = .download_count -}}
+        {{- with .summary_fields -}}
+          {{- with index (.versions | default slice) 0 -}}
+            {{- $version = .name -}}
+          {{- end -}}
+          {{- $tags = .tags -}}
+        {{- end -}}
+        {{- $dataAvailable = true -}}
+      {{- end -}}
+    {{- else if eq $type "collection" -}}
+      {{- $title = print $namespace "." $name -}}
+      {{- $downloads = $resp.download_count -}}
+      {{- with $resp.highest_version -}}
+        {{- $version = .version -}}
+      {{- end -}}
+      {{- if $version -}}
+        {{- $versionURL := print $apiURL "versions/" $version "/" -}}
+        {{- with try (resources.GetRemote $versionURL) -}}
+          {{- with .Value -}}
+            {{- $verResp := . | transform.Unmarshal -}}
+            {{- with $verResp.metadata -}}
+              {{- $description = .description -}}
+              {{- $tags = .tags -}}
+              {{- with .license -}}
+                {{- $license = index . 0 -}}
+              {{- end -}}
+            {{- end -}}
+          {{- end -}}
+        {{- end -}}
+      {{- end -}}
+      {{- $dataAvailable = true -}}
+    {{- end -}}
+  {{- else -}}
+    {{- warnf "ansible shortcode: unable to get remote resource from %q: %s" $apiURL $.Position -}}
+  {{- end -}}
+{{- end -}}
+
+{{- if $dataAvailable -}}
+  <div class="ansible-card-wrapper">
+    <a id="{{ $id }}" target="_blank" href="{{ $repoLink }}" class="cursor-pointer">
+      <div
+        class="w-full md:w-auto pt-3 p-5 border border-neutral-200 dark:border-neutral-700 border rounded-md shadow-2xl">
+        <div class="flex items-center">
+          <span class="text-2xl text-neutral-800 dark:text-neutral mr-2">
+            {{ partial "icon.html" "ansible" }}
+          </span>
+          <div
+            class="m-0 font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
+            {{ $title }}
+          </div>
+        </div>
+
+        {{- if $description }}
+          <p class="m-0 mt-2 text-md text-neutral-800 dark:text-neutral">
+            {{ $description | markdownify }}
+          </p>
+        {{- end }}
+
+        <div class="m-0 mt-2 flex items-center flex-wrap">
+          <span class="rounded-md border border-primary-400 px-1 py-[1px] mr-3 text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">
+            {{ $type }}
+          </span>
+
+          <span class="text-md mr-2 text-neutral-800 dark:text-neutral">
+            {{ partial "icon.html" "download" }}
+          </span>
+          <div id="{{ $id }}-downloads" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
+            {{ template "_format-int" $downloads }}
+          </div>
+
+          {{- if $version }}
+            <span class="text-md mr-2 text-neutral-800 dark:text-neutral">
+              {{ partial "icon.html" "tag" }}
+            </span>
+            <div id="{{ $id }}-version" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
+              {{ $version }}
+            </div>
+          {{- end }}
+
+          {{- if $license }}
+            <span class="text-md mr-2 text-neutral-800 dark:text-neutral">
+              {{ partial "icon.html" "scale-balanced" }}
+            </span>
+            <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
+              {{ $license }}
+            </div>
+          {{- end }}
+        </div>
+
+        {{- if $tags }}
+          <div class="m-0 mt-2 flex flex-wrap gap-1">
+            {{- range first 5 $tags }}
+              <span
+                class="rounded-md border border-neutral-300 px-1 py-[1px] text-xs font-normal text-neutral-700 dark:border-neutral-600 dark:text-neutral-300">
+                {{ . }}
+              </span>
+            {{- end }}
+          </div>
+        {{- end }}
+      </div>
+      {{ $fetchRepo := resources.Get "js/fetch-repo.js" }}
+      {{ $fetchRepo = $fetchRepo | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}
+      <script
+        async
+        type="text/javascript"
+        src="{{ $fetchRepo.RelPermalink }}"
+        integrity="{{ $fetchRepo.Data.Integrity }}"
+        data-repo-url="{{ $apiURL }}"
+        data-repo-id="{{ $id }}"></script>
+    </a>
+  </div>
+{{- else if $apiURL -}}
+  {{ warnf "ansible shortcode: unable to fetch %q: %s" $apiURL .Position }}
+{{- end -}}