feat(docs): person

assets/css/main.css

@@ -481,6 +481,10 @@ ul {
   scrollbar-width: thin;
 }
 
+.tw-align-image {
+  vertical-align: -0.125em;
+}
+
 :root {
   /* ========== Global ========== */
   /* Color of the background */
@@ -918,6 +922,10 @@ html.dark {
   padding-bottom: 0.5rem;
 }
 
+.tw-align-\[-0\.125em\] {
+  vertical-align: -0.125em;
+}
+
 .tw-text-fgColor-link-muted {
   color: var(--global-link-color);
 }

assets/css/tailwind.css

@@ -21,6 +21,10 @@
   .tw-scrollbar-thin {
     scrollbar-width: thin;
   }
+
+  .tw-align-image {
+    vertical-align: -0.125em;
+  }
 
   :root {
     /* ========== Global ========== */

exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md

@@ -1580,3 +1580,45 @@ A `fa-icon` example:
 The rendered output looks like this:
 
 {{< fa-icon regular smile >}}
+
+## person
+
+`person` is a shortcode to insert a link to a personal webpage marked up as [h-card](http://microformats.org/wiki/h-card).
+
+The `person` shortcode has the following named parameters:
+
+* **url** *[required]* (**first** positional parameter)
+
+    URL of the personal page.
+
+* **name** *[required]* (**second** positional parameter)
+
+    Name of the person.
+
+* **text** *[optional]* (**third** positional parameter)
+
+    Text to display as hover tooltip of the link.
+
+* **picture** *[optional]* (**fourth** positional parameter)
+
+    A picture to use as person's avatar.
+
+* **nick** *[optional]*
+
+    Nickame of the person.
+
+Example `person` input:
+
+```markdown
+{{</* person url="https://evgenykuznetsov.org" name="Evgeny Kuznetsov" nick="nekr0z" text="author of this shortcode" picture="https://evgenykuznetsov.org/img/avatar.jpg" */>}}
+```
+
+This renders as {{< person url="https://evgenykuznetsov.org" name="Evgeny Kuznetsov" nick="nekr0z" text="author of this shortcode" picture="https://evgenykuznetsov.org/img/avatar.jpg" >}}.
+
+Without an explicitly given picture, a generic icon is used. This input:
+
+```markdown
+{{</* person "https://dillonzq.com/" Dillon "author of the LoveIt theme" */>}}
+```
+
+This renders as {{< person "https://dillonzq.com/" Dillon "author of the LoveIt theme" >}}.

exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md

@@ -1583,3 +1583,45 @@ print("Hello world!")
 呈现的输出效果如下:
 
 {{< fa-icon regular smile >}}
+
+## person
+
+`person` shortcode 用来在你的文章中以 [h-card](http://microformats.org/wiki/h-card) 的格式插入个人网站链接。
+
+`person` shortcode 有以下命名参数：
+
+* **url** *[必需]* (**第一个**位置参数)
+
+    个人网站的链接。
+
+* **name** *[必需]* (**第二个**位置参数)
+
+    个人的名字。
+
+* **text** *[可选]* (**第三个**位置参数)
+
+    个人的简介。
+
+* **picture** *[可选]* (**第四个**位置参数)
+
+    个人的头像。
+
+* **nick** *[可选]*
+
+    个人的昵称。
+
+一个 `person` 示例:
+
+```markdown
+{{</* person url="https://evgenykuznetsov.org" name="Evgeny Kuznetsov" nick="nekr0z" text="author of this shortcode" picture="https://evgenykuznetsov.org/img/avatar.jpg" */>}}
+```
+
+呈现的输出效果为 {{< person url="https://evgenykuznetsov.org" name="Evgeny Kuznetsov" nick="nekr0z" text="author of this shortcode" picture="https://evgenykuznetsov.org/img/avatar.jpg" >}}.
+
+一个使用通用图标的 `person` 示例:
+
+```markdown
+{{</* person "https://dillonzq.com/" Dillon "author of the LoveIt theme" */>}}
+```
+
+呈现的输出效果为 {{< person "https://dillonzq.com/" Dillon "author of the LoveIt theme" >}}.

layouts/partials/plugin/h-card.html

@@ -4,7 +4,7 @@
 {{- $n := .Nickname | default .Name | default .Email | default .URL | default "👀" -}}
 <span class="h-card {{ with .Class }} {{ . }}{{- end -}} tw-inline-block">
 {{- with .URL -}}<a href="{{ . }}" class="u-url url"{{ with $rel }} rel="{{ . }}"{{- end -}}{{ with $text }} title="{{ . }}"{{ end }}>{{- else -}}{{- with .Email -}}<a href="mailto:{{ . }}" class="email"{{ with $text }} title="{{ . }}"{{ end }}>{{- end -}}{{- end -}}
-{{- with .Image -}}<img class="u-photo photo tw-max-h-4 tw-inline-block tw-rounded-full" src="{{ . }}" alt="{{ $n }}">&#8201;{{- else -}}{{- partial "plugin/fontawesome.html" (dict "Style" "regular" "Icon" "user-circle") -}}{{ end -}}&#8201;
+{{- with .Image -}}<img class="u-photo photo tw-max-h-4 tw-inline-block tw-rounded-full tw-align-image" src="{{ . }}" alt="{{ $n }}">&#8201;{{- else -}}{{- partial "plugin/fontawesome.html" (dict "Style" "regular" "Icon" "user-circle") -}}{{ end -}}&#8201;
 {{- with .Name -}}<span class="p-name fn">{{ . }}</span>{{ with $nick }} ({{- end -}}{{- end -}}
 {{- with .Nickname -}}<span class="p-nickname nickname">{{ . }}</span>{{- end -}}
 {{- with .Name -}}{{ with $nick }}){{- end -}}{{- end -}}