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

✨ Feat: add huggingface shortcode

assets/js/fetch-repo.js

@@ -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);

exampleSite/content/docs/shortcodes/index.it.md

@@ -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/>
@@ -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                             |
 | --------- | --------------------------------------- |
@@ -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

exampleSite/content/docs/shortcodes/index.ja.md

@@ -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 アイコンを出力し、アイコン名を唯一のパラメータとして受け取ります。アイコンは、現在のテキストサイズに合わせてスケーリングされます。

exampleSite/content/docs/shortcodes/index.md

@@ -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.

exampleSite/content/docs/shortcodes/index.zh-cn.md

@@ -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 图标并以图标名称作为其唯一参数。图标会自动缩放以匹配当前文本大小。