Improve author link flexibility

Deprecate social networking links in `_config.yml` in favor or new `author.links` array for any link and in any order. All of Font Awesome's icons are available for use. ``` author: links: - label: "Your Website" icon: "fas fa-fw fa-link" url: "https://your-site.com" - label: "Twitter" icon: "fab fa-fw fa-twitter-square" url: "https://twitter.com/username" - label: "GitHub" icon: "fab fa-fw fa-github" url: "https://github.com/username" - label: "Instagram" icon: "fab fa-fw fa-instagram" url: "https://instagram.com/username" ``` Fixes mmistakes#1581
jchwenger · Sep 10, 2018 · f41d723 · f41d723
1 parent cd0f4d7
commit f41d723
Show file tree

Hide file tree

Showing 10 changed files with 201 additions and 190 deletions.
diff --git a/_config.yml b/_config.yml
@@ -105,31 +105,25 @@ author:
   bio              : "I am an amazing person."
   location         : "Somewhere"
   email            :
-  uri              :
-  home             : # null (default), "absolute or relative url to link to author home"
-  bitbucket        :
-  codepen          :
-  dribbble         :
-  flickr           :
-  facebook         :
-  foursquare       :
-  github           :
-  gitlab           :
-  google_plus      :
-  keybase          :
-  instagram        :
-  lastfm           :
-  linkedin         : # "john-doe-12345678" (the last part of your profile url, e.g. https://www.linkedin.com/in/john-doe-12345678)
-  pinterest        :
-  soundcloud       :
-  stackoverflow    : # "123456/username" (the last part of your profile url, e.g. https://stackoverflow.com/users/123456/username)
-  steam            : # "steamId" (the last part of your profile url, e.g. https://steamcommunity.com/id/steamId/)
-  tumblr           :
-  twitter          :
-  vine             :
-  weibo            :
-  xing             :
-  youtube          : # "https://youtube.com/c/MichaelRoseDesign"
+  links:
+    - label: "Email"
+      icon: "fas fa-fw fa-envelope-square"
+      # url: mailto:[email protected]
+    - label: "Website"
+      icon: "fas fa-fw fa-link"
+      # url: "https://your-website.com"
+    - label: "Twitter"
+      icon: "fab fa-fw fa-twitter-square"
+      # url: "https://twitter.com/"
+    - label: "Facebook"
+      icon: "fab fa-fw fa-facebook-square"
+      # url: "https://facebook.com/"
+    - label: "GitHub"
+      icon: "fab fa-fw fa-github"
+      # url: "https://github.com/"
+    - label: "Instagram"
+      icon: "fab fa-fw fa-instagram"
+      # url: "https://instagram.com/"
 
 
 # Reading Files

diff --git a/_includes/author-profile.html b/_includes/author-profile.html
@@ -48,6 +48,14 @@ <h3 class="author__name" itemprop="name">{{ author.name }}</h3>
         </li>
       {% endif %}
 
+      {% if author.links %}
+        {% for link in author.links %}
+          {% if link.label and link.url %}
+            <li><a href="{{ link.url }}"><i class="{{ link.icon | default: 'fas fa-link' }}" aria-hidden="true"></i> {{ link.label }}</a></li>
+          {% endif %}
+        {% endfor %}
+      {% endif %}
+
       {% if author.uri %}
         <li>
           <a href="{{ author.uri }}" itemprop="url">

diff --git a/docs/_config.yml b/docs/_config.yml
@@ -103,32 +103,19 @@ author:
   avatar           : "/assets/images/michael-rose.jpg"
   bio              : "Just another boring, tattooed, time traveling, designer."
   location         : "Buffalo, NY"
-  email            :
-  uri              : "https://mademistakes.com"
-  home             : "https://mademistakes.com"
-  bitbucket        :
-  codepen          :
-  dribbble         :
-  flickr           :
-  facebook         : *facebook
-  foursquare       :
-  github           : "mmistakes"
-  gitlab           :
-  google_plus      :
-  keybase          :
-  instagram        : "mmistakes"
-  lastfm           :
-  linkedin         :
-  pinterest        :
-  soundcloud       :
-  stackoverflow    : # https://stackoverflow.com/users/123456/username
-  steam            :
-  tumblr           :
-  twitter          : *twitter
-  vine             :
-  weibo            :
-  xing             :
-  youtube          :
+  links:
+    - label: "Made Mistakes"
+      icon: "fas fa-fw fa-link"
+      url: "https://mademistakes.com"
+    - label: "Twitter"
+      icon: "fab fa-fw fa-twitter-square"
+      url: "https://twitter.com/mmistakes"
+    - label: "GitHub"
+      icon: "fab fa-fw fa-github"
+      url: "https://github.com/mmistakes"
+    - label: "Instagram"
+      icon: "fab fa-fw fa-instagram"
+      url: "https://instagram.com/mmistakes"
 
 
 # Reading Files

diff --git a/docs/_docs/05-configuration.md b/docs/_docs/05-configuration.md
@@ -731,17 +731,42 @@ Used as the defaults for defining what appears in the author sidebar.
 
 ```yaml
 author:
-  name   : "Your Name"
-  avatar : "/assets/images/bio-photo.jpg"
-  bio    : "My awesome biography constrained to a sentence or two goes here."
-  email  : # optional
-  uri    : "http://your-site.com"
-  home   : # null (default), "absolute or relative url to link to author home"
+  name     : "Your Name"
+  avatar   : "/assets/images/bio-photo.jpg"
+  bio      : "My awesome biography constrained to a sentence or two goes here."
+  location : "Somewhere, USA" 
 ```
 
-Social media links are all optional, include the ones you want visible. In most cases you just need to add the username. If you're unsure double check `_includes/author-profile.html` to see how the URL is constructed.
+Author links are all optional, include the ones you want visible under the `author.links` array.
 
-To add social media links not included with the theme or customize the author sidebar further, read the full [layout documentation]({{ "/docs/layouts/#author-profile" | relative_url }}).
+| Name | Description |
+| --- | --- |
+| **label** | Link label (e.g. `"Twitter"`) |
+| **icon** | [Font Awesome icon](https://fontawesome.com/icons?d=gallery) classes (e.g. `"fab fa-fw fa-twitter-square"`) |
+| **url** | Link URL (e.g. `"https://twitter.com/mmistakes"`) |
+
+```yaml
+author:
+  name: "Your Name"
+  avatar: "/assets/images/bio-photo.jpg"
+  bio: "I am an amazing person."
+  location: "Somewhere"
+  links:
+    - label: "Made Mistakes"
+      icon: "fas fa-fw fa-link"
+      url: "https://mademistakes.com"
+    - label: "Twitter"
+      icon: "fab fa-fw fa-twitter-square"
+      url: "https://twitter.com/mmistakes"
+    - label: "GitHub"
+      icon: "fab fa-fw fa-github"
+      url: "https://github.com/mmistakes"
+    - label: "Instagram"
+      icon: "fab fa-fw fa-instagram"
+      url: "https://instagram.com/mmistakes"
+```
+
+To customize the author sidebar, read the full [layout documentation]({{ "/docs/layouts/#author-profile" | relative_url }}).
 
 ## Reading Files
 

diff --git a/docs/_docs/09-authors.md b/docs/_docs/09-authors.md
@@ -2,32 +2,44 @@
 title: "Authors"
 permalink: /docs/authors/
 excerpt: "Instructions and settings for working with multiple site authors."
-last_modified_at: 2016-11-03T10:55:15-04:00
+last_modified_at: 2018-09-10T12:33:24-04:00
 ---
 
 Sites that may have content authored from various individuals can be accommodated by using [data files](https://jekyllrb.com/docs/datafiles/).
 
 To assign an author to a post or page that is different from the site author specified in `_config.yml`:
 
-**Step 1.** Create `_data/authors.yml` and add authors using the following format. Any variables found under `author:` in `_config.yml` can be used (e.g. `name`, `avatar`, `uri`, social media profiles, etc.).
+**Step 1.** Create `_data/authors.yml` and add authors using the following format. Any variables found under `author:` in `_config.yml` can be used (e.g. `name`, `bio`, `avatar`, author `links`, etc.).
 
 ```yaml
 # /_data/authors.yml
 
 Billy Rick:
-  name: "Billy Rick"
-  uri: "http://thewhip.com"
-  email: "[email protected]"
-  bio: "What do you want, jewels? I am a very extravagant man."
-  avatar: "/assets/images/bio-photo-2.jpg"
-  twitter: "extravagantman"
+  name        : "Billy Rick"
+  bio         : "What do you want, jewels? I am a very extravagant man."
+  avatar      : "/assets/images/bio-photo-2.jpg"
+  links:
+    - label: "Email"
+      icon: "fas fa-fw fa-envelope-square"
+      url: "mailto:[email protected]"
+    - label: "Website"
+      icon: "fas fa-fw fa-link"
+      url: "https://thewhip.com"
+    - label: "Twitter"
+      icon: "fab fa-fw fa-twitter-square"
+      url: "https://twitter.com/extravagantman"
 
 Cornelius Fiddlebone:
-  name: "Cornelius Fiddlebone"
-  email: "[email protected]"
-  bio: "I ordered what?"
-  avatar: "/assets/images/bio-photo.jpg"
-  twitter: "rhymeswithsackit"
+  name        : "Cornelius Fiddlebone"
+  bio         : "I ordered what?"
+  avatar      : "/assets/images/bio-photo.jpg"
+  links:
+    - label: "Email"
+      icon: "fas fa-fw fa-envelope-square"
+      url: "mailto:[email protected]"
+    - label: "Twitter"
+      icon: "fab fa-fw fa-twitter-square"
+      url: "https://twitter.com/rhymeswithsackit"
 ```
 
 **Step 2.** Assign one of the authors in `authors.yml` to a post or page you wish to override the `site.author` with. 

diff --git a/docs/_docs/10-layouts.md b/docs/_docs/10-layouts.md
@@ -525,68 +525,36 @@ defaults:
 **Note:** To disable the author sidebar profile for a specific post or page, add `author_profile: false` to the YAML Front Matter instead.
 {: .notice--warning}
 
-The theme comes pre-built with a selection of links for the most common social media networks. These are all optional and can be [assigned in `_config.yml`]({{ "/docs/configuration/" | relative_url }}).
+To assign more author links, add to the `author.links` array  in [`_config.yml`]({{ "/docs/configuration/" | relative_url }}) link so. Any of [Font Awesome's icons](https://fontawesome.com/icons?d=gallery) are available for use.
 
-To add more links you'll need to crack open [`_includes/author-profile-custom-links.html`](https://github.com/mmistakes/minimal-mistakes/blob/master/_includes/author-profile-custom-links.html) and add the appropriate `<li>` markup shown below. 
-
-**Please note:** Links added here will appear after the ones in [`_includes/author-profile.html`](https://github.com/mmistakes/minimal-mistakes/blob/master/_includes/author-profile.html). If you'd like to change the order of appearance you'll need to edit that file directly.
+```yaml
+author:
+  name: "Your Name"
+  avatar: "/assets/images/bio-photo.jpg"
+  bio: "I am an amazing person."
+  location: "Somewhere"
+  links:
+    - label: "Made Mistakes"
+      icon: "fas fa-fw fa-link"
+      url: "https://mademistakes.com"
+    - label: "Twitter"
+      icon: "fab fa-fw fa-twitter-square"
+      url: "https://twitter.com/mmistakes"
+    - label: "GitHub"
+      icon: "fab fa-fw fa-github"
+      url: "https://github.com/mmistakes"
+    - label: "Instagram"
+      icon: "fab fa-fw fa-instagram"
+      url: "https://instagram.com/mmistakes"
+```
+
+**Note:** Depending on the icon and theme skin used, colors may not be used. Popular social networks like Twitter, Facebook, Instagram, Google+, etc. have the appropriate brand color set in CSS. To change or add missing colors edit [`_utilities.scss`](https://github.com/mmistakes/minimal-mistakes/blob/master/_sass/minimal-mistakes/_utilities.scss) in `<site root>/_sass/minimal-mistakes/`.
 {: .notice--info}
 
-#### Social network link example
-
-```html
-<li>
-  <a href="https://whatever-social-network.com/username">
-    <i class="fab fa-fw" aria-hidden="true"></i> Awesome Social Network
-  </a>
-</li>
-```
-
-To add a new link you'll need three things:
-
-1. Destination URL
-2. [Font Awesome icon](https://fontawesome.com/icons?d=gallery) (`fa-` class)
-3. Label for the link
-
-It's up to you if you want to wrap it in a `{% raw %}{% if %} ... {% endif %}{% endraw %}`conditional and add a variable to `_config.yml`. If you don't plan to change it then hard-coding the string is perfectly acceptable.
-
-Let's run through how you'd add a new link that points to a Reddit profile. Starting with the three things from above:
-
-1. `https://www.reddit.com/user/username`
-2. [`fa-reddit`](http://fontawesome.io/icon/reddit/)
-3. `Reddit`
-
-And plug them into the appropriate locations:
-
-```html
-<li>
-  <a href="[1]">
-    <i class="fab fa-fw [2]" aria-hidden="true"></i> [3]
-  </a>
-</li>
-```
-
-To end up with:
-
-```html
-<li>
-  <a href="https://www.reddit.com/user/username">
-    <i class="fab fa-fw fa-reddit" aria-hidden="true"></i> Reddit
-  </a>
-</li>
-```
-
-![Reddit link in author profile]({{ "/assets/images/mm-author-profile-reddit-gs.png" | relative_url }})
-
-To add a touch of color to the default black (`#000`) icon a few more steps are necessary.
-
-Start by copying [`_utilities.scss`](https://github.com/mmistakes/minimal-mistakes/blob/master/_sass/minimal-mistakes/_utilities.scss) `<site root>/_sass`. Open it up to the icon section (it's near the bottom) and nest a new class beneath `.social-icons` that matches the one used to declare the Font Awesome icon. In our case `.fa-reddit`.
-
-Simply add a `color` declaration and the corresponding hex code.
+For example, to color a Reddit icon, simply add a `color` declaration and the corresponding hex code like so:
 
 ```scss
 .social-icons {
-  
   .fa-reddit {
     color: #ff4500;
   }
@@ -595,12 +563,6 @@ Simply add a `color` declaration and the corresponding hex code.
 
 ![Reddit link in author profile with color]({{ "/assets/images/mm-author-profile-reddit-color.png" | relative_url }})
 
-**ProTip:** For bonus points you can add it as a Sass `$variable` that you set in [`_variables.scss`](https://github.com/mmistakes/minimal-mistakes/blob/master/_sass/minimal-mistakes/_variables.scss) like the other ["brand" colors](http://brandcolors.net/). You'll need to add this file to `/_sass/` as well if you're using the Ruby Gem version of the theme.
-{: .notice--info}
-
-**Please please please** don't submit [pull requests]({{ "/docs/contributing/" | relative_url }}) adding in support for "missing" social media links. I'm trying to keep things down to the minimum (hence the theme's name) and have no interest in merging such PRs :expressionless:.
-{: .notice--warning}
-
 ### Custom Sidebar Content
 
 Blocks of content can be added by using the following under `sidebar`:

diff --git a/docs/_posts/2012-03-15-layout-author-override.md b/docs/_posts/2012-03-15-layout-author-override.md
@@ -2,31 +2,44 @@
 title: "Layout: Author Override"
 author: Billy Rick
 excerpt: "A post to test author overrides using a data file."
+last_modified_at: 2018-09-10T12:32:27-04:00
 ---
 
 Sites that may have content authored from various individuals can be accommodated by using [data files](https://jekyllrb.com/docs/datafiles/).
 
 To attribute an author to a post or page that is different from the site author specified in `_config.yml`:
 
-**Step 1.** Create `_data/authors.yml` and add authors using the following format. Anything variables found under `author` in `_config.yml` can be used (e.g. `name`, `avatar`, `uri`, social media profiles, etc.).
+**Step 1.** Create `_data/authors.yml` and add authors using the following format. Anything variables found under `author` in `_config.yml` can be used (e.g. `name`, `bio`, `avatar`, author `links`, etc.).
 
 ```yaml
 # /_data/authors.yml
 
 Billy Rick:
-  name: "Billy Rick"
-  uri: "http://thewhip.com"
-  email: "[email protected]"
-  bio: "What do you want, jewels? I am a very extravagant man."
-  avatar: "/assets/images/bio-photo-2.jpg"
-  twitter: "extravagantman"
+  name        : "Billy Rick"
+  bio         : "What do you want, jewels? I am a very extravagant man."
+  avatar      : "/assets/images/bio-photo-2.jpg"
+  links:
+    - label: "Email"
+      icon: "fas fa-fw fa-envelope-square"
+      url: "mailto:[email protected]"
+    - label: "Website"
+      icon: "fas fa-fw fa-link"
+      url: "https://thewhip.com"
+    - label: "Twitter"
+      icon: "fab fa-fw fa-twitter-square"
+      url: "https://twitter.com/extravagantman"
 
 Cornelius Fiddlebone:
-  name: "Cornelius Fiddlebone"
-  email: "[email protected]"
-  bio: "I ordered what?"
-  avatar: "/assets/images/bio-photo.jpg"
-  twitter: "rhymeswithsackit"
+  name        : "Cornelius Fiddlebone"
+  bio         : "I ordered what?"
+  avatar      : "/assets/images/bio-photo.jpg"
+  links:
+    - label: "Email"
+      icon: "fas fa-fw fa-envelope-square"
+      url: "mailto:[email protected]"
+    - label: "Twitter"
+      icon: "fab fa-fw fa-twitter-square"
+      url: "https://twitter.com/rhymeswithsackit"
 ```
 
 **Step 2.** Assign one of the authors in `authors.yml` to a post or page you wish to override the `site.author` with.