Merge pull request #2378 from ZhenShuo2021/feat/huggingface-card

✨ Feat: add huggingface shortcode
2026-10-24 20:52:55 +00:00 · 2025-08-03 01:44:17 +01:00
commit a3dd43e992
@@ -36,6 +36,17 @@
      stars_count: "stars_count",
      forks_count: "forks_count",
    },
+    huggingface: {
+      description: "description",
+      likes: "likes",
+      downloads: "downloads",
+    },
+  };
+
+  const processors = {
+    huggingface: {
+      description: (value) => value?.replace(/Dataset Card for .+?\s+Dataset Summary\s+/, "").trim() || value,
+    },
  };

  const platform = Object.keys(platforms).find((p) => repoId.startsWith(p)) || "github";
@@ -49,7 +60,13 @@

    Object.entries(mapping).forEach(([dataField, elementSuffix]) => {
      const element = document.getElementById(`${repoId}-${elementSuffix}`);
-      if (element) element.innerHTML = data[dataField];
+      if (element) {
+        let value = data[dataField];
+        if (processors[platform]?.[dataField]) {
+          value = processors[platform][dataField](value);
+        }
+        element.innerHTML = value;
+      }
    });
  } catch (error) {
    console.error(error);
@@ -202,16 +202,15 @@ This shortcode is for importing code from external sources easily without copyin
 | `startLine` | **Optional** The line number to start the import from.    |
 | `endLine` | **Optional** The line number to end the import at.        |

-
 <!-- prettier-ignore-end -->

-
 **Example:**

 ```md
 {{</* codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/layouts/shortcodes/mdimporter.html" type="go" */>}}

 ```
+
 {{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/layouts/shortcodes/mdimporter.html" type="go" >}}

 ```md
@@ -221,7 +220,6 @@ This shortcode is for importing code from external sources easily without copyin

 {{< codeimporter url="https://raw.githubusercontent.com/nunocoracao/blowfish/main/config/_default/hugo.toml" type="toml" startLine="11" endLine="18">}}

-
 <br/><br/>

 ## Codeberg Card
@@ -239,6 +237,7 @@ This shortcode is for importing code from external sources easily without copyin
 ```md
 {{</* codeberg repo="forgejo/forgejo" */>}}
 ```
+
 {{< codeberg repo="forgejo/forgejo" >}}

 <br/><br/><br/>
@@ -304,6 +303,7 @@ Blowfish also supports automatic conversion of images included using standard Ma
 ```md
 {{</* forgejo server="https://v11.next.forgejo.org" repo="a/mastodon" */>}}
 ```
+
 {{< forgejo server="https://v11.next.forgejo.org" repo="a/mastodon" >}}

 <br/><br/><br/>
@@ -340,7 +340,6 @@ In order to add images to the gallery, use `img` tags for each image and add `cl

 <br/><br/><br/>

-
 **Example 2: responsive gallery**

 ```md
@@ -411,6 +410,7 @@ In order to add images to the gallery, use `img` tags for each image and add `cl
 ```md
 {{</* gitea server="https://git.fsfe.org" repo="FSFE/fsfe-website" */>}}
 ```
+
 {{< gitea server="https://git.fsfe.org" repo="FSFE/fsfe-website" >}}

 <br/><br/><br/>
@@ -437,7 +437,7 @@ In order to add images to the gallery, use `img` tags for each image and add `cl

 ## GitLab Card

-`gitlab` allows you to quickly link a GitLab Project (GitLab's jargon for repo). 
+`gitlab` allows you to quickly link a GitLab Project (GitLab's jargon for repo).
 It displays realtime stats about it, such as the number of stars and forks it has.
 Unlike `github` it can't display the main programming language of a project.
 Finally, custom GitLab instance URL can be provided, as long as the `api/v4/projects/` endpoint is available, making this shortcode compatible with most self-hosted / enterprise deployments.
@@ -459,6 +459,35 @@ Finally, custom GitLab instance URL can be provided, as long as the `api/v4/proj

 <br/><br/><br/>

+## Hugging Face Card
+
+`huggingface` allows you to quickly link a Hugging Face model or dataset, displaying real-time information such as the number of likes and downloads, along with type and description.
+
+| Parameter  | Description                                                    |
+|------------|----------------------------------------------------------------|
+| `model`    | [String] Hugging Face model in the format of `username/model` |
+| `dataset`  | [String] Hugging Face dataset in the format of `username/dataset` |
+
+**Note:** Use either `model` or `dataset` parameter, not both.
+
+**Example 1 (Model):**
+
+```md
+{{</* huggingface model="google-bert/bert-base-uncased" */>}}
+```
+
+{{< huggingface model="google-bert/bert-base-uncased" >}}
+
+**Example 2 (Dataset):**
+
+```md
+{{</* huggingface dataset="stanfordnlp/imdb" */>}}
+```
+
+{{< huggingface dataset="stanfordnlp/imdb" >}}
+
+<br/><br/><br/>
+
 ## Icon

 `icon` outputs an SVG icon and takes the icon name as its only parameter. The icon is scaled to match the current text size.
@@ -501,13 +530,10 @@ Check out the [mathematical notation samples]({{< ref "mathematical-notation" >}

 <br/><br/><br/>

-
 ## Keyword

-
 The `keyword` component can be used to visually highlight certain important words or phrases, e.g. professional skills etc. The `keywordList` shortcode can be used to group together multiple `keyword` items. Each item can have the following properties.

-
 <!-- prettier-ignore-start -->
 | Parameter | Description                             |
 | --------- | --------------------------------------- |
@@ -559,7 +585,7 @@ When life gives you lemons, make lemonade.
 When life gives you lemons, make lemonade.
 {{< /lead >}}

-<br/><br/><br/> 
+<br/><br/><br/>

 ## List

@@ -598,7 +624,7 @@ The `where` and `value` values are used in the following query `where .Site.Regu

 <br/><br/><br/>

-## LTR/RTL 
+## LTR/RTL

 `ltr` and `rtl` allows you to mix your contents. Many RTL language users want to include parts of the content in LTR. Using this shortcode will let you do so, and by leveraging `%` as the outer-most dilemeter in the shortcode [Hugo shortcodes](https://gohugo.io/content-management/shortcodes/#shortcodes-with-markdown), any markdown inside will be rendered normally.

@@ -631,10 +657,8 @@ This shortcode allows you to import markdown files from external sources. This i
 | --------- | ------------------------------------------------------- |
 | `url`     | **Required** URL to an externally hosted markdown file. |

-
 <!-- prettier-ignore-end -->

-
 **Example:**

 ```md
@@ -644,7 +668,6 @@ This shortcode allows you to import markdown files from external sources. This i

 {{< mdimporter url="https://raw.githubusercontent.com/nunocoracao/nunocoracao/master/README.md" >}}

-
 <br/><br/>

 ## Mermaid
@@ -694,7 +717,6 @@ You can see some additional Mermaid examples on the [diagrams and flowcharts sam

 The `timeline` creates a visual timeline that can be used in different use-cases, e.g. professional experience, a project's achievements, etc. The `timeline` shortcode relies on the `timelineItem` sub-shortcode to define each item within the main timeline. Each item can have the following properties.

-
 <!-- prettier-ignore-start -->
 | Parameter   | Description                                  |
 | ----------- | -------------------------------------------- |
@@ -744,14 +766,12 @@ With other shortcodes
 {{</* /timeline */>}}
 ```

-
 {{< timeline >}}

 {{< timelineItem icon="github" header="header" badge="badge test" subheader="subheader" >}}
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus.
 {{</ timelineItem >}}

-
 {{< timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader">}}
 With html code
 <ul>
@@ -778,7 +798,6 @@ With other shortcodes
 {{</ timelineItem >}}
 {{</ timeline >}}

-
 <br/><br/><br/>

 ## TypeIt
@@ -860,7 +879,6 @@ consectetur adipiscing elit.
 "Toto, I've a feeling we're not in Kansas anymore." The Wizard of Oz (1939)
 {{< /typeit >}}

-
 <br/><br/><br/>

 ## Youtube Lite
@@ -456,6 +456,35 @@ Blowfish も、標準の Markdown 構文を使用して含まれる画像の自

 <br/><br/><br/>

+## Hugging Face カード
+
+`huggingface` を使用すると、Hugging Face のモデルやデータセットを素早くリンクし、いいね数やダウンロード数などのリアルタイム情報を表示できます。
+
+| パラメータ | 説明                                                          |
+|-----------|---------------------------------------------------------------|
+| `model`   | [文字列] `ユーザー名/モデル名` の形式での Hugging Face モデル  |
+| `dataset` | [文字列] `ユーザー名/データセット名` の形式での Hugging Face データセット |
+
+**注意:** `model` または `dataset` パラメータのどちらか一方を使用してください。
+
+**例1（モデル）:**
+
+```md
+{{</* huggingface model="google-bert/bert-base-uncased" */>}}
+```
+
+{{< huggingface model="google-bert/bert-base-uncased" >}}
+
+**例2（データセット）:**
+
+```md
+{{</* huggingface dataset="stanfordnlp/imdb" */>}}
+```
+
+{{< huggingface dataset="stanfordnlp/imdb" >}}
+
+<br/><br/><br/>
+
 ## アイコン

 `icon` は SVG アイコンを出力し、アイコン名を唯一のパラメータとして受け取ります。アイコンは、現在のテキストサイズに合わせてスケーリングされます。
@@ -460,6 +460,35 @@ Finally, custom GitLab instance URL can be provided, as long as the `api/v4/proj

 <br/><br/><br/>

+## Hugging Face Card
+
+`huggingface` allows you to quickly link a Hugging Face model or dataset, displaying real-time information such as the number of likes and downloads, along with type and description.
+
+| Parameter  | Description                                                    |
+|------------|----------------------------------------------------------------|
+| `model`    | [String] Hugging Face model in the format of `username/model` |
+| `dataset`  | [String] Hugging Face dataset in the format of `username/dataset` |
+
+**Note:** Use either `model` or `dataset` parameter, not both.
+
+**Example 1 (Model):**
+
+```md
+{{</* huggingface model="google-bert/bert-base-uncased" */>}}
+```
+
+{{< huggingface model="google-bert/bert-base-uncased" >}}
+
+**Example 2 (Dataset):**
+
+```md
+{{</* huggingface dataset="stanfordnlp/imdb" */>}}
+```
+
+{{< huggingface dataset="stanfordnlp/imdb" >}}
+
+<br/><br/><br/>
+
 ## Icon

 `icon` outputs an SVG icon and takes the icon name as its only parameter. The icon is scaled to match the current text size.
@@ -463,6 +463,35 @@ Blowfish 还支持使用标准 Markdown 语法自动转换图像。只需使用

 <br/><br/><br/>

+## Hugging Face 卡片
+
+`huggingface` 让您能够快速链接 Hugging Face 模型或数据集，显示实时信息如点赞数和下载量，以及类型和描述。
+
+| 参数      | 描述                                                         |
+|-----------|--------------------------------------------------------------|
+| `model`   | [字符串] 格式为 `用户名/模型名` 的 Hugging Face 模型         |
+| `dataset` | [字符串] 格式为 `用户名/数据集名` 的 Hugging Face 数据集     |
+
+**注意：** 使用 `model` 或 `dataset` 参数中的一个，不要同时使用。
+
+**示例1（模型）：**
+
+```md
+{{</* huggingface model="google-bert/bert-base-uncased" */>}}
+```
+
+{{< huggingface model="google-bert/bert-base-uncased" >}}
+
+**示例2（数据集）：**
+
+```md
+{{</* huggingface dataset="stanfordnlp/imdb" */>}}
+```
+
+{{< huggingface dataset="stanfordnlp/imdb" >}}
+
+<br/><br/><br/>
+
 ## 图标

 `icon` 输出一个 SVG 图标并以图标名称作为其唯一参数。图标会自动缩放以匹配当前文本大小。
@@ -0,0 +1,106 @@
+{{ $id := delimit (slice "huggingface" (partial "functions/uid.html" .)) "-" }}
+{{- $model := .Get "model" -}}
+{{- $dataset := .Get "dataset" -}}
+{{- $hfAPI := "" -}}
+{{- $repoLink := "" -}}
+{{- $type := "" -}}
+
+{{- if $model -}}
+  {{- $hfAPI = print "https://huggingface.co/api/models/" $model -}}
+  {{- $repoLink = print "https://huggingface.co/" $model -}}
+  {{- $type = "model" -}}
+{{- else if $dataset -}}
+  {{- $hfAPI = print "https://huggingface.co/api/datasets/" $dataset -}}
+  {{- $repoLink = print "https://huggingface.co/datasets/" $dataset -}}
+  {{- $type = "dataset" -}}
+{{- end -}}
+
+{{- $huggingfaceData := dict -}}
+{{- with try (resources.GetRemote $hfAPI) -}}
+  {{- with .Err -}}
+    {{- warnf "huggingface shortcode: failed to fetch remote resource from %q: %s" $hfAPI $.Position -}}
+  {{- else with .Value -}}
+    {{- $huggingfaceData = . | transform.Unmarshal -}}
+  {{- else -}}
+    {{- warnf "huggingface shortcode: unable to get remote resource from %q: %s" $hfAPI $.Position -}}
+  {{- end -}}
+{{- end -}}
+
+{{- with $huggingfaceData -}}
+  <div class="huggingface-card-wrapper">
+    <a id="{{ $id }}" target="_blank" href="{{ $repoLink }}" class="cursor-pointer">
+      <div
+        class="w-full md:w-auto p-0 m-0 border border-neutral-200 dark:border-neutral-700 border rounded-md shadow-2xl">
+        <div class="w-full md:w-auto pt-3 p-5">
+          <div class="flex items-center">
+            <span class="text-2xl text-neutral-800 dark:text-neutral me-2">
+              <span class="relative inline-block align-text-bottom icon">
+                {{ template "HuggingFaceSVG" . }}
+              </span>
+            </span>
+            <div
+              id="{{ $id }}-id"
+              class="m-0 font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">
+              {{ .id | markdownify }}
+            </div>
+          </div>
+
+          {{- if .description -}}
+            <div id="{{ $id }}-description" class="m-0 mt-2 text-md text-neutral-800 dark:text-neutral">
+              {{ .description | replaceRE `Dataset Card for .+\s+Dataset Summary\s+` "" }}
+            </div>
+          {{- end -}}
+
+
+          <div class="m-0 mt-2 flex items-center">
+            <span
+              class="mr-1 inline-block h-3 w-3 rounded-full"
+              style="background-color: {{ if eq $type "model" }}
+                #ff6b35
+              {{ else }}
+                #0077b6
+              {{ end }}"></span>
+            <div class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
+              {{ if eq $type "model" }}
+                {{ if .pipeline_tag }}{{ .pipeline_tag }}{{ else }}model{{ end }}
+              {{ else }}
+                {{ if .task_categories }}{{ index .task_categories 0 }}{{ else }}dataset{{ end }}
+              {{ end }}
+            </div>
+
+            <span class="text-md mr-1 text-neutral-800 dark:text-neutral">
+              {{ partial "icon.html" "heart-empty" }}
+            </span>
+            <div id="{{ $id }}-likes" class="m-0 mr-5 text-md text-neutral-800 dark:text-neutral">
+              {{ if .likes }}{{ .likes }}{{ else }}0{{ end }}
+            </div>
+
+            <span class="text-md mr-1 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">
+              {{ if .downloads }}{{ .downloads }}{{ else }}0{{ end }}
+            </div>
+          </div>
+        </div>
+      </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="{{ $hfAPI }}"
+        data-repo-id="{{ $id }}"></script>
+    </a>
+  </div>
+{{- else -}}
+  {{ warnf "huggingface shortcode: unable to fetch %q: %s" $hfAPI .Position }}
+{{- end -}}
+
+{{ define "HuggingFaceSVG" }}
+  {{/* prettier-ignore-start */}}
+  <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 475 439"><path d="M235.793 396.126a187.281 187.281 0 00187.285-187.284A187.283 187.283 0 00235.793 21.558 187.287 187.287 0 0048.509 208.842a187.286 187.286 0 00187.284 187.284z" fill="#FFD21E"/><path d="M423.078 208.842A187.283 187.283 0 00235.793 21.558 187.283 187.283 0 0048.509 208.842a187.283 187.283 0 00319.714 132.43 187.284 187.284 0 0054.855-132.43zm-396.127 0a208.842 208.842 0 11417.685 0 208.842 208.842 0 01-417.685 0z" fill="#FF9D0B"/><path d="M296.641 157.912c6.898 2.371 9.593 16.491 16.545 12.827a26.946 26.946 0 008.24-40.841 26.952 26.952 0 00-28.632-8.767 26.942 26.942 0 00-19.055 23.099 26.943 26.943 0 003.014 15.352c3.288 6.198 13.744-3.88 19.941-1.724l-.053.054zm-126.923 0c-6.898 2.371-9.647 16.491-16.545 12.827a26.946 26.946 0 01-8.24-40.841 26.952 26.952 0 0128.632-8.767 26.944 26.944 0 0116.041 38.451c-3.288 6.198-13.797-3.88-19.941-1.724l.053.054z" fill="#3A3B45"/><path d="M234.446 287.205c52.979 0 70.063-47.212 70.063-71.464 0-12.612-8.461-8.624-22.043-1.941-12.557 6.198-29.426 14.768-47.966 14.768-38.75 0-70.063-37.08-70.063-12.827 0 24.252 17.031 71.464 70.063 71.464h-.054z" fill="#FF323D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M193.863 274.863a46.895 46.895 0 0128.565-24.199c2.155-.646 4.365 3.072 6.682 6.899 2.156 3.665 4.42 7.384 6.683 7.384 2.426 0 4.851-3.665 7.168-7.276 2.426-3.773 4.797-7.438 7.115-6.737a46.403 46.403 0 0126.947 22.474c20.103-15.845 27.486-41.715 27.486-57.667 0-12.612-8.461-8.624-22.043-1.941l-.754.378c-12.45 6.198-29.05 14.39-47.266 14.39-18.216 0-34.762-8.192-47.266-14.39-14.012-6.953-22.797-11.318-22.797 1.563 0 16.438 7.869 43.439 29.48 59.122z" fill="#3A3B45"/><path d="M362.446 183.242a17.515 17.515 0 10.002-35.03 17.515 17.515 0 00-.002 35.03zm-250.61 0a17.515 17.515 0 100-35.03 17.515 17.515 0 000 35.03zM75.78 242.526c-8.731 0-16.492 3.557-21.935 10.079a32.173 32.173 0 00-7.168 20.264 38.275 38.275 0 00-10.456-1.617c-8.353 0-15.899 3.18-21.234 8.947a31.257 31.257 0 00-4.312 37.726 28.566 28.566 0 00-9.647 15.198 31.512 31.512 0 004.312 25.546 28.136 28.136 0 00-1.995 27.056c5.498 12.503 19.24 22.312 45.919 32.875 16.545 6.576 31.744 10.779 31.851 10.833a238.92 238.92 0 0058.907 8.623c31.583 0 54.165-9.701 67.153-28.779 20.911-30.666 17.947-58.746-9.162-85.801-14.929-14.983-24.899-37.025-26.947-41.876-4.204-14.336-15.306-30.289-33.684-30.289a30.716 30.716 0 00-24.792 13.258c-5.389-6.79-10.671-12.126-15.414-15.198a39.885 39.885 0 00-21.396-6.845zm0 21.558c2.749 0 6.144 1.186 9.809 3.503 11.533 7.33 33.684 45.434 41.822 60.255 2.695 4.958 7.384 7.06 11.534 7.06 8.353 0 14.821-8.246.808-18.755-21.127-15.792-13.743-41.607-3.665-43.17.431-.108.916-.108 1.294-.108 9.162 0 13.204 15.791 13.204 15.791s11.857 29.75 32.229 50.122c20.318 20.319 21.396 36.649 6.575 58.368-10.132 14.821-29.48 19.295-49.368 19.295-20.533 0-41.66-4.851-53.463-7.869-.593-.162-72.489-20.48-63.38-37.726 1.509-2.911 4.042-4.096 7.222-4.096 12.826 0 36.11 19.078 46.187 19.078 2.21 0 3.773-.916 4.474-3.233 4.257-15.36-64.997-21.828-59.177-44.032 1.078-3.935 3.827-5.498 7.761-5.498 16.923 0 54.973 29.804 62.95 29.804.592 0 1.077-.161 1.293-.539 3.988-6.467 1.778-10.994-26.409-28.025-28.079-17.031-47.858-27.271-36.648-39.505 1.293-1.401 3.126-2.048 5.39-2.048 17.084 0 57.451 36.756 57.451 36.756s10.887 11.318 17.516 11.318c1.509 0 2.802-.539 3.665-2.048 4.635-7.868-43.44-44.301-46.134-59.338-1.833-10.24 1.293-15.36 7.06-15.36z" fill="#FF9D0B"/><path d="M189.39 397.15c14.821-21.773 13.743-38.103-6.575-58.422-20.372-20.318-32.229-50.122-32.229-50.122s-4.419-17.246-14.498-15.629c-10.078 1.617-17.462 27.378 3.665 43.169 21.073 15.792-4.204 26.517-12.342 11.696-8.084-14.821-30.289-52.925-41.822-60.255-11.48-7.276-19.564-3.233-16.87 11.857 2.696 15.037 50.824 51.47 46.135 59.284-4.689 7.923-21.181-9.216-21.181-9.216s-51.577-46.942-62.841-34.708c-11.21 12.234 8.569 22.474 36.648 39.505 28.187 17.031 30.397 21.558 26.409 28.025-4.042 6.468-66.183-45.972-72.004-23.713-5.82 22.15 63.434 28.564 59.177 43.924-4.312 15.36-48.829-28.996-57.883-11.749-9.162 17.3 62.787 37.618 63.38 37.78 23.175 6.036 82.189 18.809 102.831-11.426z" fill="#FFD21E"/><path d="M398.502 242.526c8.731 0 16.545 3.557 21.935 10.079a32.173 32.173 0 017.168 20.264 38.272 38.272 0 0110.509-1.617c8.354 0 15.899 3.18 21.235 8.947a31.257 31.257 0 014.311 37.726 28.564 28.564 0 019.594 15.198 31.513 31.513 0 01-4.312 25.546 28.142 28.142 0 011.994 27.056c-5.497 12.503-19.24 22.312-45.864 32.875-16.6 6.576-31.798 10.779-31.906 10.833a238.914 238.914 0 01-58.907 8.623c-31.582 0-54.164-9.701-67.153-28.779-20.911-30.667-17.947-58.746 9.162-85.801 14.983-14.983 24.954-37.026 27.002-41.876 4.203-14.336 15.252-30.289 33.63-30.289a30.716 30.716 0 0124.792 13.258c5.389-6.791 10.671-12.126 15.467-15.198a39.888 39.888 0 0121.343-6.845zm0 21.558c-2.749 0-6.09 1.186-9.809 3.503-11.48 7.33-33.684 45.434-41.822 60.255a13.106 13.106 0 01-11.534 7.06c-8.3 0-14.821-8.246-.754-1Line truncated
+  {{/* prettier-ignore-end */}}
+{{ end }}