Add npm icon

varunkuntal · Aug 16, 2018 · 02182f1 · 02182f1
1 parent 5056c80
commit 02182f1
Show file tree

Hide file tree

Showing 11 changed files with 28 additions and 1 deletion.
diff --git a/_config.yml b/_config.yml
@@ -47,6 +47,7 @@ author:
   googleplus: # "user_id"   the last part of your profile url, e.g. https://plus.google.com/u/0/user_id
   weibo     : # "user_id"   the last part of your profile url, e.g. https://www.weibo.com/user_id/profile?...
   douban    : # "user_name" the last part of your profile url, e.g. https://www.douban.com/people/user_name/
+  npm       : # "user_name" the last part of your profile url, e.g. https://www.npmjs.com/~user_name
 
 
 ## => GitHub Repository (if the site is hosted by GitHub)

diff --git a/_includes/author-links.html b/_includes/author-links.html
@@ -74,5 +74,12 @@
       </li>
     {%- endif -%}
 
+    {%- if _author.npm -%}
+      <li title="{{ __return | replace: '[NAME]', 'npm' }}">
+        <a class="button button--circle npm-button" itemprop="sameAs" href="https://www.npmjs.com/~{{ _author.npm }}" target="_blank">
+          <div class="icon">{%- include svg/icon/social/npm.svg -%}</div>
+        </a>
+      </li>
+    {%- endif -%}
   </ul>
 </div>
diff --git a/_includes/svg/icon/social/npm.svg b/_includes/svg/icon/social/npm.svg
diff --git a/_sass/components/_author-links.scss b/_sass/components/_author-links.scss
@@ -25,6 +25,9 @@
       }
       .douban-button {
         @include clickable($text-color-1, $douban-color);
+      }      
+      .npm-button {
+        @include clickable($text-color-1, $npm-color);
       }
     }
   }

diff --git a/_sass/skins/_chocolate.scss b/_sass/skins/_chocolate.scss
@@ -62,6 +62,7 @@ $twitter-color:    #1da1f2;
 $douban-color:     #42bd56;
 $github-color:     #000;
 $linkedin-color:   #1074af;
+$npm-color:        #fff;
 
 // highlight colors
 @import 'skins/highlight/tomorrow-night-eighties';
diff --git a/_sass/skins/_dark.scss b/_sass/skins/_dark.scss
@@ -62,6 +62,7 @@ $twitter-color:    #1da1f2;
 $douban-color:     #42bd56;
 $github-color:     #000;
 $linkedin-color:   #1074af;
+$npm-color:        #fff;
 
 // highlight colors
 @import 'skins/highlight/tomorrow-night';
diff --git a/_sass/skins/_default.scss b/_sass/skins/_default.scss
@@ -62,6 +62,7 @@ $twitter-color:    #1da1f2;
 $douban-color:     #42bd56;
 $github-color:     #000;
 $linkedin-color:   #1074af;
+$npm-color:        #fff;
 
 // highlight colors
 @import 'skins/highlight/tomorrow';
diff --git a/_sass/skins/_forest.scss b/_sass/skins/_forest.scss
@@ -62,6 +62,7 @@ $twitter-color:    #1da1f2;
 $douban-color:     #42bd56;
 $github-color:     #000;
 $linkedin-color:   #1074af;
+$npm-color:        #fff;
 
 // highlight colors
 @import 'skins/highlight/tomorrow';
diff --git a/_sass/skins/_ocean.scss b/_sass/skins/_ocean.scss
@@ -62,6 +62,7 @@ $twitter-color:    #1da1f2;
 $douban-color:     #42bd56;
 $github-color:     #000;
 $linkedin-color:   #1074af;
+$npm-color:        #fff;
 
 // highlight colors
 @import 'skins/highlight/tomorrow-night-blue';
diff --git a/_sass/skins/_orange.scss b/_sass/skins/_orange.scss
@@ -63,6 +63,7 @@ $twitter-color:    #1da1f2;
 $douban-color:     #42bd56;
 $github-color:     #000;
 $linkedin-color:   #1074af;
+$npm-color:        #fff;
 
 // highlight colors
 @import 'skins/highlight/tomorrow-night-eighties';
diff --git a/docs/_data/authors.yml b/docs/_data/authors.yml
@@ -10,4 +10,5 @@ Tian Qi:
   linkedin: # your Linkedin username
   googleplus: 101827554735084402671 # your Google+ username
   weibo: 234695683 # your Weibo username
-  douban: # your Douban username
+  douban: # your Douban username
+  npm: # your npm username