feat(shortcode): person

css

allow named params

document

assets/css/_page/_single.scss

@@ -52,6 +52,16 @@
   }
 
   .content {
+    .person-mention.h-card {
+      display: inline-block;
+      img {
+        vertical-align: -12%;
+        max-height: 1.1em;
+        margin-right: 0ex;
+        border-radius: 50%;
+      }
+    }
+    
     > h2 {
       font-size: 1.5rem;
 

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

@@ -2,7 +2,7 @@
 weight: 4
 title: "Theme Documentation - Extended Shortcodes"
 date: 2020-03-03T16:29:41+08:00
-lastmod: 2020-03-03T16:29:41+08:00
+lastmod: 2020-06-12T09:32:15+03:00
 draft: false
 author: "Dillon"
 authorLink: "https://dillonzq.com"
@@ -1293,3 +1293,41 @@ You can see the output in the console of the developer tool.
 {{< script >}}
 console.log('Hello LoveIt!');
 {{< /script >}}
+
+## 12 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 takes the following parameters (all of these are optional, but it makes no sense to omit the first two):
+
+* **url** (**first** positional parameter)
+
+    URL of the personal page.
+
+* **name** (**second** positional parameter)
+
+    Name of the person.
+
+* **text** (**third** positional parameter)
+
+    Text to display as hover tooltip of the link.
+
+* **picture** (**fourth** positional parameter)
+
+    A picture to use as person's avatar.
+
+Example `person` input:
+
+```markdown
+{{</* person url="https://evgenykuznetsov.org" name="Evgeny Kuznetsov" text="author of this shortcode" picture="https://evgenykuznetsov.org/img/avatar.jpg" */>}}
+```
+
+This renders as {{< person url="https://evgenykuznetsov.org" name="Evgeny Kuznetsov" 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" */>}}
+```
+
+renders as {{< person "https://dillonzq.com/" Dillon "author of the LoveIt theme" >}}.

layouts/partials/plugin/h-card.html

@@ -0,0 +1,15 @@
+{{- $rel := .Rel -}}
+{{- $nick := .Nickname -}}
+{{- $text := .Text -}}
+{{- $n := .Nickname | default .Name | default .Email | default .URL | default "👀" -}}
+<span class="h-card{{ with .Class }} {{ . }}{{- end -}}">
+{{- 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" src="{{ . }}" alt="{{ $n }}">{{- else -}}<i class="far fa-user-circle"></i>{{ 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 -}}
+{{- with .URL -}}</a>{{- else -}}{{- with .Email -}}</a>{{- end -}}{{- end -}}
+{{- with .Email }}
+	<a href="mailto:{{ . }}" class="email"><span class="u-email">{{ . }}</span></a>
+{{- end -}}
+</span>

layouts/shortcodes/person.html

@@ -0,0 +1,5 @@
+{{- $url := cond .IsNamedParams (.Get "url") (.Get 0) -}}
+{{- $name := cond .IsNamedParams (.Get "name") (.Get 1) -}}
+{{- $text := cond .IsNamedParams (.Get "text") (.Get 2) -}}
+{{- $pic := cond .IsNamedParams (.Get "picture") (.Get 3) -}}
+{{- $p := dict "Class" "person-mention" "Name" $name "URL" $url "Text" $text "Image" $pic -}}{{- partial "plugin/h-card" $p -}}