feat: Add support for friend link shortcode

- Add friend link shortcode template - Add friend link shortcode stylesheet - Add documentation for friend link shortcode - Add test page for friend link shortcode
HEIGE-PCloud · Apr 30, 2021 · 997bb42 · 997bb42
1 parent 768a0f5
commit 997bb42
Show file tree

Hide file tree

Showing 6 changed files with 233 additions and 0 deletions.
diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
@@ -317,6 +317,7 @@
     @import "../_partial/_single/mapbox";
     @import "../_partial/_single/music";
     @import "../_partial/_single/bilibili";
+    @import "../_partial/_single/friend";
 
     hr {
       margin: 2rem 0;

diff --git a/assets/css/_partial/_single/_friend.scss b/assets/css/_partial/_single/_friend.scss
@@ -0,0 +1,124 @@
+$avatar-border-color: #f0f0f0;
+$avatar-border-color-dark: #363636;
+$avatar-border-color-black: #363636;
+
+$friend-link-background-color: #f8f8f8;
+$friend-link-background-color-dark: #252627;
+$friend-link-background-color-black: #111111;
+
+$friend-link-color: #2d96bd;
+$friend-link-color-dark: #a9a9b3;
+$friend-link-color-black: #d9d9d9;
+
+$friend-link-hover-color: #ef3982;
+$friend-link-hover-color-dark: #ffffff;
+$friend-link-hover-color-black: #ffffff;
+
+.friend-avatar {
+    width: 56px;
+    height: 56px;
+    padding: 2px;
+    margin-top: 14px;
+    margin-left: 14px;
+    border-radius: 50%;
+    border: 1px solid $avatar-border-color;
+    [theme=dark] & {
+        border: 1px solid $avatar-border-color-dark;   
+    }
+    [theme=black] & {
+        border: 1px solid $avatar-border-color-black;   
+    }
+}
+
+.friend-link-div {
+    height: 92px;
+    margin-top: 10px;
+    width: 48%;
+    display: inline-block !important;
+    border-radius: 5px;
+    background: $friend-link-background-color;
+    [theme=dark] & {
+        background: $friend-link-background-color-dark;
+    }
+    [theme=black] & {
+        background: $friend-link-background-color-black;
+    }
+    -webkit-transition: transform 0.4s ease;
+    -moz-transition: transform 0.4s ease;
+    -o-transition: transform 0.4s ease;
+    transition: transform 0.4s ease;
+    &:hover {
+        transform: scale(1.01);
+    }
+}
+
+.friend-link-avatar {
+    width: 92px;
+    float: left;
+}
+
+.friend-link-avatar {
+    margin-right: 2px;
+}
+
+.friend-link-info {
+    margin-top: 18px;
+    margin-right: 18px;
+    color: $friend-link-color;
+    [theme=dark] & {
+        color: $friend-link-color-dark;
+    }
+    [theme=black] & {
+        color: $friend-link-color-black;
+    }
+    &:hover {
+        color: $friend-link-hover-color;
+        [theme=dark] & {
+            color: $friend-link-hover-color-dark;
+        }
+        [theme=black] & {
+            color: $friend-link-hover-color-black;
+        }
+    }
+}
+
+.friend-name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    font-style: normal;
+
+}
+
+.friend-bio {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    color: $global-font-secondary-color;
+    [theme=dark] & {
+        color: $global-font-secondary-color-dark;
+    }
+    [theme=black] & {
+        color: $global-font-secondary-color-black;
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .friend-bio {
+        display: none;
+    }
+    .friend-link-avatar {
+        width: 84px;
+        margin: auto;
+    }
+    .friend-link-info {
+        height: 100%;
+        margin: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .friend-name {
+        font-size: 14px;
+    }
+}
diff --git a/exampleSite/content/posts/tests/friend-link-tests/index.en.md b/exampleSite/content/posts/tests/friend-link-tests/index.en.md
@@ -0,0 +1,21 @@
+---
+title: "Friend link test"
+subtitle: ""
+date: 2021-04-29T13:41:31+01:00
+lastmod: 2021-04-29T13:41:31+01:00
+draft: true
+author: ""
+authorLink: ""
+description: ""
+categories: [Tests]
+hiddenFromHomePage: false
+hiddenFromSearch: false
+---
+
+<!--more-->
+
+{{< friend name="PCloud" url="https://github.com/HEIGE-PCloud/" avatar="https://avatars.githubusercontent.com/u/52968553?v=4" bio="This is PCloud~💤" >}}
+
+{{< friend name="PCloud" url="https://github.com/HEIGE-PCloud/" avatar="https://avatars.githubusercontent.com/u/52968553?v=4" bio="This is PCloud as well~" >}}
+
+{{< friend name="PCloud" url="https://github.com/HEIGE-PCloud/" avatar="https://avatars.githubusercontent.com/u/52968553?v=4" bio="Awwwwww, toooooooo many PCloud🤔" >}}
diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.en.md
@@ -1293,3 +1293,39 @@ You can see the output in the console of the developer tool.
 {{< script >}}
 console.log('Just DoIt!');
 {{< /script >}}
+
+## 12 friend
+
+{{< version 0.2.11 >}}
+
+`friend` is a shortcode to insert a friend link to your friend's site in your post.
+
+The `friend` shortcode has the following named parameters:
+
+* **name** *[required]* (**first** positional parameter)
+
+    Your friend site's name.
+
+* **url** *[required]* (**second** positional parameter)
+
+    The link to your friend site.
+
+* **avatar** *[required]* (**third** positional parameter)
+
+    Your friend site's avatar.
+
+* **bio** *[required]* (**fourth** positional parameter)
+
+    A short bio of your friend site.
+
+Example `friend` input:
+
+```markdown
+{{</* friend "PCloud" "https://github.com/HEIGE-PCloud/" "https://avatars.githubusercontent.com/u/52968553?v=4" "This is PCloud~💤" */>}}
+Or
+{{</* friend name="PCloud" url="https://github.com/HEIGE-PCloud/" avatar="https://avatars.githubusercontent.com/u/52968553?v=4" bio="This is PCloud~💤" */>}}
+```
+
+The rendered output looks like this:
+
+{{< friend name="PCloud" url="https://github.com/HEIGE-PCloud/" avatar="https://avatars.githubusercontent.com/u/52968553?v=4" bio="This is PCloud~💤" >}}
diff --git a/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-extended-shortcodes/index.zh-cn.md
@@ -1295,3 +1295,40 @@ console.log('Just DoIt!');
 {{< script >}}
 console.log('Just DoIt!');
 {{< /script >}}
+
+## 12 friend
+
+{{< version 0.2.11 >}}
+
+`friend` shortcode 用来在你的页面上插入友链.
+
+`friend` shortcode 有以下命名参数:
+
+* **name** *[必需]* (**第一个**位置参数)
+
+    友站的名称.
+
+* **url** *[必需]* (**第二个**位置参数)
+
+    友站的链接.
+
+* **avatar** *[必需]* (**第三个**位置参数)
+
+    友站的头像.
+
+* **bio** *[必需]* (**第四个**位置参数)
+
+    友站的简介.
+
+一个 `friend` 示例:
+
+
+```markdown
+{{</* friend "PCloud" "https://github.com/HEIGE-PCloud/" "https://avatars.githubusercontent.com/u/52968553?v=4" "This is PCloud~💤" */>}}
+或者
+{{</* friend name="PCloud" url="https://github.com/HEIGE-PCloud/" avatar="https://avatars.githubusercontent.com/u/52968553?v=4" bio="This is PCloud~💤" */>}}
+```
+
+呈现的输出效果如下:
+
+{{< friend name="PCloud" url="https://github.com/HEIGE-PCloud/" avatar="https://avatars.githubusercontent.com/u/52968553?v=4" bio="This is PCloud~💤" >}}
diff --git a/layouts/shortcodes/friend.html b/layouts/shortcodes/friend.html
@@ -0,0 +1,14 @@
+{{ if .IsNamedParams }}
+<a target="_blank" href={{ .Get "url" }} title={{ .Get "name" }} class="friend-link">
+    <div class="friend-link-div">
+        <div class="friend-link-avatar">
+            <img class="friend-avatar" src={{ .Get "avatar" }} />
+        </div>
+        <div class="friend-link-info">
+            <i class="fas fa-user-circle fa-fw"></i>
+            <i class="friend-name">{{ .Get "name" }}</i>
+            <p class="friend-bio">{{ .Get "bio" }}</p>
+        </div>
+    </div>
+</a>
+{{ end }}