Skip to content

Commit 42de7a5

Browse files
mmistakesmmistakes
committedSep 10, 2018
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
1 parent 68df0b6 commit 42de7a5

10 files changed

+201
-190
lines changed
 

‎_config.yml

+19-25
Original file line numberDiff line numberDiff line change
@@ -105,31 +105,25 @@ author:
105105
bio : "I am an amazing person."
106106
location : "Somewhere"
107107
email :
108-
uri :
109-
home : # null (default), "absolute or relative url to link to author home"
110-
bitbucket :
111-
codepen :
112-
dribbble :
113-
flickr :
114-
facebook :
115-
foursquare :
116-
github :
117-
gitlab :
118-
google_plus :
119-
keybase :
120-
instagram :
121-
lastfm :
122-
linkedin : # "john-doe-12345678" (the last part of your profile url, e.g. https://www.linkedin.com/in/john-doe-12345678)
123-
pinterest :
124-
soundcloud :
125-
stackoverflow : # "123456/username" (the last part of your profile url, e.g. https://stackoverflow.com/users/123456/username)
126-
steam : # "steamId" (the last part of your profile url, e.g. https://steamcommunity.com/id/steamId/)
127-
tumblr :
128-
twitter :
129-
vine :
130-
weibo :
131-
xing :
132-
youtube : # "https://youtube.com/c/MichaelRoseDesign"
108+
links:
109+
- label: "Email"
110+
icon: "fas fa-fw fa-envelope-square"
111+
# url: mailto:your.name@email.com
112+
- label: "Website"
113+
icon: "fas fa-fw fa-link"
114+
# url: "https://your-website.com"
115+
- label: "Twitter"
116+
icon: "fab fa-fw fa-twitter-square"
117+
# url: "https://twitter.com/"
118+
- label: "Facebook"
119+
icon: "fab fa-fw fa-facebook-square"
120+
# url: "https://facebook.com/"
121+
- label: "GitHub"
122+
icon: "fab fa-fw fa-github"
123+
# url: "https://github.com/"
124+
- label: "Instagram"
125+
icon: "fab fa-fw fa-instagram"
126+
# url: "https://instagram.com/"
133127

134128

135129
# Reading Files

‎_includes/author-profile.html

+8
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,14 @@ <h3 class="author__name" itemprop="name">{{ author.name }}</h3>
4848
</li>
4949
{% endif %}
5050

51+
{% if author.links %}
52+
{% for link in author.links %}
53+
{% if link.label and link.url %}
54+
<li><a href="{{ link.url }}"><i class="{{ link.icon | default: 'fas fa-link' }}" aria-hidden="true"></i> {{ link.label }}</a></li>
55+
{% endif %}
56+
{% endfor %}
57+
{% endif %}
58+
5159
{% if author.uri %}
5260
<li>
5361
<a href="{{ author.uri }}" itemprop="url">

‎docs/_config.yml

+13-26
Original file line numberDiff line numberDiff line change
@@ -103,32 +103,19 @@ author:
103103
avatar : "/assets/images/michael-rose.jpg"
104104
bio : "Just another boring, tattooed, time traveling, designer."
105105
location : "Buffalo, NY"
106-
email :
107-
uri : "https://mademistakes.com"
108-
home : "https://mademistakes.com"
109-
bitbucket :
110-
codepen :
111-
dribbble :
112-
flickr :
113-
facebook : *facebook
114-
foursquare :
115-
github : "mmistakes"
116-
gitlab :
117-
google_plus :
118-
keybase :
119-
instagram : "mmistakes"
120-
lastfm :
121-
linkedin :
122-
pinterest :
123-
soundcloud :
124-
stackoverflow : # https://stackoverflow.com/users/123456/username
125-
steam :
126-
tumblr :
127-
twitter : *twitter
128-
vine :
129-
weibo :
130-
xing :
131-
youtube :
106+
links:
107+
- label: "Made Mistakes"
108+
icon: "fas fa-fw fa-link"
109+
url: "https://mademistakes.com"
110+
- label: "Twitter"
111+
icon: "fab fa-fw fa-twitter-square"
112+
url: "https://twitter.com/mmistakes"
113+
- label: "GitHub"
114+
icon: "fab fa-fw fa-github"
115+
url: "https://github.com/mmistakes"
116+
- label: "Instagram"
117+
icon: "fab fa-fw fa-instagram"
118+
url: "https://instagram.com/mmistakes"
132119

133120

134121
# Reading Files

‎docs/_docs/05-configuration.md

+33-8
Original file line numberDiff line numberDiff line change
@@ -731,17 +731,42 @@ Used as the defaults for defining what appears in the author sidebar.
731731

732732
```yaml
733733
author:
734-
name : "Your Name"
735-
avatar : "/assets/images/bio-photo.jpg"
736-
bio : "My awesome biography constrained to a sentence or two goes here."
737-
email : # optional
738-
uri : "http://your-site.com"
739-
home : # null (default), "absolute or relative url to link to author home"
734+
name : "Your Name"
735+
avatar : "/assets/images/bio-photo.jpg"
736+
bio : "My awesome biography constrained to a sentence or two goes here."
737+
location : "Somewhere, USA"
740738
```
741739

742-
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.
740+
Author links are all optional, include the ones you want visible under the `author.links` array.
743741

744-
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 }}).
742+
| Name | Description |
743+
| --- | --- |
744+
| **label** | Link label (e.g. `"Twitter"`) |
745+
| **icon** | [Font Awesome icon](https://fontawesome.com/icons?d=gallery) classes (e.g. `"fab fa-fw fa-twitter-square"`) |
746+
| **url** | Link URL (e.g. `"https://twitter.com/mmistakes"`) |
747+
748+
```yaml
749+
author:
750+
name: "Your Name"
751+
avatar: "/assets/images/bio-photo.jpg"
752+
bio: "I am an amazing person."
753+
location: "Somewhere"
754+
links:
755+
- label: "Made Mistakes"
756+
icon: "fas fa-fw fa-link"
757+
url: "https://mademistakes.com"
758+
- label: "Twitter"
759+
icon: "fab fa-fw fa-twitter-square"
760+
url: "https://twitter.com/mmistakes"
761+
- label: "GitHub"
762+
icon: "fab fa-fw fa-github"
763+
url: "https://github.com/mmistakes"
764+
- label: "Instagram"
765+
icon: "fab fa-fw fa-instagram"
766+
url: "https://instagram.com/mmistakes"
767+
```
768+
769+
To customize the author sidebar, read the full [layout documentation]({{ "/docs/layouts/#author-profile" | relative_url }}).
745770

746771
## Reading Files
747772

‎docs/_docs/09-authors.md

+25-13
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,44 @@
22
title: "Authors"
33
permalink: /docs/authors/
44
excerpt: "Instructions and settings for working with multiple site authors."
5-
last_modified_at: 2016-11-03T10:55:15-04:00
5+
last_modified_at: 2018-09-10T12:33:24-04:00
66
---
77

88
Sites that may have content authored from various individuals can be accommodated by using [data files](https://jekyllrb.com/docs/datafiles/).
99

1010
To assign an author to a post or page that is different from the site author specified in `_config.yml`:
1111

12-
**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.).
12+
**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.).
1313

1414
```yaml
1515
# /_data/authors.yml
1616

1717
Billy Rick:
18-
name: "Billy Rick"
19-
uri: "http://thewhip.com"
20-
email: "billy@rick.com"
21-
bio: "What do you want, jewels? I am a very extravagant man."
22-
avatar: "/assets/images/bio-photo-2.jpg"
23-
twitter: "extravagantman"
18+
name : "Billy Rick"
19+
bio : "What do you want, jewels? I am a very extravagant man."
20+
avatar : "/assets/images/bio-photo-2.jpg"
21+
links:
22+
- label: "Email"
23+
icon: "fas fa-fw fa-envelope-square"
24+
url: "mailto:billyrick@rick.com"
25+
- label: "Website"
26+
icon: "fas fa-fw fa-link"
27+
url: "https://thewhip.com"
28+
- label: "Twitter"
29+
icon: "fab fa-fw fa-twitter-square"
30+
url: "https://twitter.com/extravagantman"
2431

2532
Cornelius Fiddlebone:
26-
name: "Cornelius Fiddlebone"
27-
email: "cornelius@thewhip.com"
28-
bio: "I ordered what?"
29-
avatar: "/assets/images/bio-photo.jpg"
30-
twitter: "rhymeswithsackit"
33+
name : "Cornelius Fiddlebone"
34+
bio : "I ordered what?"
35+
avatar : "/assets/images/bio-photo.jpg"
36+
links:
37+
- label: "Email"
38+
icon: "fas fa-fw fa-envelope-square"
39+
url: "mailto:cornelius@thewhip.com"
40+
- label: "Twitter"
41+
icon: "fab fa-fw fa-twitter-square"
42+
url: "https://twitter.com/rhymeswithsackit"
3143
```
3244
3345
**Step 2.** Assign one of the authors in `authors.yml` to a post or page you wish to override the `site.author` with.

‎docs/_docs/10-layouts.md

+24-62
Original file line numberDiff line numberDiff line change
@@ -525,68 +525,36 @@ defaults:
525525
**Note:** To disable the author sidebar profile for a specific post or page, add `author_profile: false` to the YAML Front Matter instead.
526526
{: .notice--warning}
527527

528-
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 }}).
528+
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.
529529

530-
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.
531-
532-
**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.
530+
```yaml
531+
author:
532+
name: "Your Name"
533+
avatar: "/assets/images/bio-photo.jpg"
534+
bio: "I am an amazing person."
535+
location: "Somewhere"
536+
links:
537+
- label: "Made Mistakes"
538+
icon: "fas fa-fw fa-link"
539+
url: "https://mademistakes.com"
540+
- label: "Twitter"
541+
icon: "fab fa-fw fa-twitter-square"
542+
url: "https://twitter.com/mmistakes"
543+
- label: "GitHub"
544+
icon: "fab fa-fw fa-github"
545+
url: "https://github.com/mmistakes"
546+
- label: "Instagram"
547+
icon: "fab fa-fw fa-instagram"
548+
url: "https://instagram.com/mmistakes"
549+
```
550+
551+
**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/`.
533552
{: .notice--info}
534553

535-
#### Social network link example
536-
537-
```html
538-
<li>
539-
<a href="https://whatever-social-network.com/username">
540-
<i class="fab fa-fw" aria-hidden="true"></i> Awesome Social Network
541-
</a>
542-
</li>
543-
```
544-
545-
To add a new link you'll need three things:
546-
547-
1. Destination URL
548-
2. [Font Awesome icon](https://fontawesome.com/icons?d=gallery) (`fa-` class)
549-
3. Label for the link
550-
551-
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.
552-
553-
Let's run through how you'd add a new link that points to a Reddit profile. Starting with the three things from above:
554-
555-
1. `https://www.reddit.com/user/username`
556-
2. [`fa-reddit`](http://fontawesome.io/icon/reddit/)
557-
3. `Reddit`
558-
559-
And plug them into the appropriate locations:
560-
561-
```html
562-
<li>
563-
<a href="[1]">
564-
<i class="fab fa-fw [2]" aria-hidden="true"></i> [3]
565-
</a>
566-
</li>
567-
```
568-
569-
To end up with:
570-
571-
```html
572-
<li>
573-
<a href="https://www.reddit.com/user/username">
574-
<i class="fab fa-fw fa-reddit" aria-hidden="true"></i> Reddit
575-
</a>
576-
</li>
577-
```
578-
579-
![Reddit link in author profile]({{ "/assets/images/mm-author-profile-reddit-gs.png" | relative_url }})
580-
581-
To add a touch of color to the default black (`#000`) icon a few more steps are necessary.
582-
583-
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`.
584-
585-
Simply add a `color` declaration and the corresponding hex code.
554+
For example, to color a Reddit icon, simply add a `color` declaration and the corresponding hex code like so:
586555

587556
```scss
588557
.social-icons {
589-
590558
.fa-reddit {
591559
color: #ff4500;
592560
}
@@ -595,12 +563,6 @@ Simply add a `color` declaration and the corresponding hex code.
595563

596564
![Reddit link in author profile with color]({{ "/assets/images/mm-author-profile-reddit-color.png" | relative_url }})
597565

598-
**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.
599-
{: .notice--info}
600-
601-
**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:.
602-
{: .notice--warning}
603-
604566
### Custom Sidebar Content
605567

606568
Blocks of content can be added by using the following under `sidebar`:

‎docs/_posts/2012-03-15-layout-author-override.md

+25-12
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,44 @@
22
title: "Layout: Author Override"
33
author: Billy Rick
44
excerpt: "A post to test author overrides using a data file."
5+
last_modified_at: 2018-09-10T12:32:27-04:00
56
---
67

78
Sites that may have content authored from various individuals can be accommodated by using [data files](https://jekyllrb.com/docs/datafiles/).
89

910
To attribute an author to a post or page that is different from the site author specified in `_config.yml`:
1011

11-
**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.).
12+
**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.).
1213

1314
```yaml
1415
# /_data/authors.yml
1516

1617
Billy Rick:
17-
name: "Billy Rick"
18-
uri: "http://thewhip.com"
19-
email: "billy@rick.com"
20-
bio: "What do you want, jewels? I am a very extravagant man."
21-
avatar: "/assets/images/bio-photo-2.jpg"
22-
twitter: "extravagantman"
18+
name : "Billy Rick"
19+
bio : "What do you want, jewels? I am a very extravagant man."
20+
avatar : "/assets/images/bio-photo-2.jpg"
21+
links:
22+
- label: "Email"
23+
icon: "fas fa-fw fa-envelope-square"
24+
url: "mailto:billyrick@rick.com"
25+
- label: "Website"
26+
icon: "fas fa-fw fa-link"
27+
url: "https://thewhip.com"
28+
- label: "Twitter"
29+
icon: "fab fa-fw fa-twitter-square"
30+
url: "https://twitter.com/extravagantman"
2331

2432
Cornelius Fiddlebone:
25-
name: "Cornelius Fiddlebone"
26-
email: "cornelius@thewhip.com"
27-
bio: "I ordered what?"
28-
avatar: "/assets/images/bio-photo.jpg"
29-
twitter: "rhymeswithsackit"
33+
name : "Cornelius Fiddlebone"
34+
bio : "I ordered what?"
35+
avatar : "/assets/images/bio-photo.jpg"
36+
links:
37+
- label: "Email"
38+
icon: "fas fa-fw fa-envelope-square"
39+
url: "mailto:cornelius@thewhip.com"
40+
- label: "Twitter"
41+
icon: "fab fa-fw fa-twitter-square"
42+
url: "https://twitter.com/rhymeswithsackit"
3043
```
3144
3245
**Step 2.** Assign one of the authors in `authors.yml` to a post or page you wish to override the `site.author` with.

‎test/_config.yml

+13-25
Original file line numberDiff line numberDiff line change
@@ -91,31 +91,19 @@ author:
9191
avatar : "/assets/images/bio-photo.jpg"
9292
bio : "I am an amazing person."
9393
location : "Somewhere"
94-
email :
95-
uri :
96-
home : # null (default), "absolute or relative url to link to author home"
97-
bitbucket :
98-
codepen :
99-
dribbble :
100-
flickr :
101-
facebook :
102-
foursquare :
103-
github :
104-
google_plus :
105-
keybase :
106-
instagram :
107-
lastfm :
108-
linkedin :
109-
pinterest :
110-
soundcloud :
111-
stackoverflow : # "123456/username" (the last part of your profile url, e.g. http://stackoverflow.com/users/123456/username)
112-
steam :
113-
tumblr :
114-
twitter : "mmistakes"
115-
vine :
116-
weibo :
117-
xing :
118-
youtube : # "https://youtube.com/c/MichaelRoseDesign"
94+
links:
95+
- label: "Your Website"
96+
icon: "fas fa-fw fa-link"
97+
url: "https://your-site.com"
98+
- label: "Twitter"
99+
icon: "fab fa-fw fa-twitter-square"
100+
url: "https://twitter.com/"
101+
- label: "GitHub"
102+
icon: "fab fa-fw fa-github"
103+
url: "https://github.com/"
104+
- label: "Instagram"
105+
icon: "fab fa-fw fa-instagram"
106+
url: "https://instagram.com/"
119107

120108

121109
# Reading Files

‎test/_data/authors.yml

+17-7
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,27 @@
22

33
Billy Rick:
44
name : "Billy Rick"
5-
uri : "http://thewhip.com"
6-
email : "billy@rick.com"
75
bio : "What do you want, jewels? I am a very extravagant man."
86
avatar : "/assets/images/bio-photo-2.jpg"
9-
twitter : "extravagantman"
10-
google_plus : "BillyRick"
7+
links:
8+
- label: "Email"
9+
icon: "fas fa-fw fa-envelope-square"
10+
url: "mailto:billyrick@rick.com"
11+
- label: "Website"
12+
icon: "fas fa-fw fa-link"
13+
url: "https://thewhip.com"
14+
- label: "Twitter"
15+
icon: "fab fa-fw fa-twitter-square"
16+
url: "https://twitter.com/extravagantman"
1117

1218
Cornelius Fiddlebone:
1319
name : "Cornelius Fiddlebone"
14-
email : "cornelius@thewhip.com"
1520
bio : "I ordered what?"
1621
avatar : "/assets/images/bio-photo.jpg"
17-
twitter : "rhymeswithsackit"
18-
google_plus : "CorneliusFiddlebone"
22+
links:
23+
- label: "Email"
24+
icon: "fas fa-fw fa-envelope-square"
25+
url: "mailto:cornelius@thewhip.com"
26+
- label: "Twitter"
27+
icon: "fab fa-fw fa-twitter-square"
28+
url: "https://twitter.com/rhymeswithsackit"

‎test/_posts/2012-03-15-layout-author-override.md

+24-12
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,37 @@ Sites that may have content authored from various individuals can be accommodate
88

99
To attribute an author to a post or page that is different from the site author specified in `_config.yml`:
1010

11-
**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.).
11+
**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.).
1212

1313
```yaml
1414
# /_data/authors.yml
1515

1616
Billy Rick:
17-
name: "Billy Rick"
18-
uri: "http://thewhip.com"
19-
email: "billy@rick.com"
20-
bio: "What do you want, jewels? I am a very extravagant man."
21-
avatar: "/assets/images/bio-photo-2.jpg"
22-
twitter: "extravagantman"
17+
name : "Billy Rick"
18+
bio : "What do you want, jewels? I am a very extravagant man."
19+
avatar : "/assets/images/bio-photo-2.jpg"
20+
links:
21+
- label: "Email"
22+
icon: "fas fa-fw fa-envelope-square"
23+
url: "mailto:billyrick@rick.com"
24+
- label: "Website"
25+
icon: "fas fa-fw fa-link"
26+
url: "https://thewhip.com"
27+
- label: "Twitter"
28+
icon: "fab fa-fw fa-twitter-square"
29+
url: "https://twitter.com/extravagantman"
2330

2431
Cornelius Fiddlebone:
25-
name: "Cornelius Fiddlebone"
26-
email: "cornelius@thewhip.com"
27-
bio: "I ordered what?"
28-
avatar: "/assets/images/bio-photo.jpg"
29-
twitter: "rhymeswithsackit"
32+
name : "Cornelius Fiddlebone"
33+
bio : "I ordered what?"
34+
avatar : "/assets/images/bio-photo.jpg"
35+
links:
36+
- label: "Email"
37+
icon: "fas fa-fw fa-envelope-square"
38+
url: "mailto:cornelius@thewhip.com"
39+
- label: "Twitter"
40+
icon: "fab fa-fw fa-twitter-square"
41+
url: "https://twitter.com/rhymeswithsackit"
3042
```
3143
3244
**Step 2.** Assign one of the authors in `authors.yml` to a post or page you wish to override the `site.author` with.

0 commit comments

Comments
 (0)
Please sign in to comment.