From 04db35b49af0a0f92541c579d527cfa34bd61fbc Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Mon, 10 Sep 2018 15:05:07 -0400 Subject: [PATCH] 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 #1581 --- _config.yml | 44 ++++------ _includes/author-profile.html | 8 ++ docs/_config.yml | 39 +++------ docs/_docs/05-configuration.md | 41 +++++++-- docs/_docs/09-authors.md | 38 +++++--- docs/_docs/10-layouts.md | 86 ++++++------------- .../2012-03-15-layout-author-override.md | 37 +++++--- test/_config.yml | 38 +++----- test/_data/authors.yml | 24 ++++-- .../2012-03-15-layout-author-override.md | 36 +++++--- 10 files changed, 201 insertions(+), 190 deletions(-) diff --git a/_config.yml b/_config.yml index 1f11636b0055..3f2025c530b4 100644 --- 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:your.name@email.com + - 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 index bd560f71918c..1514f518cb31 100644 --- a/_includes/author-profile.html +++ b/_includes/author-profile.html @@ -48,6 +48,14 @@

{{ author.name }}

{% endif %} + {% if author.links %} + {% for link in author.links %} + {% if link.label and link.url %} +
  • {{ link.label }}
    • + {% endif %} + {% endfor %} + {% endif %} + {% if author.uri %}
  • - Awesome Social Network - -
    • -``` - -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 -
  • - - [3] - -
    • -``` - -To end up with: - -```html -
  • - - Reddit - -
    • -``` - -![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) `/_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 index 50635b9d2c45..333fc161970d 100644 --- 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: "billy@rick.com" - 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:billyrick@rick.com" + - 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: "cornelius@thewhip.com" - 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:cornelius@thewhip.com" + - 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/test/_config.yml b/test/_config.yml index e12304e42b81..7ec63b27d518 100644 --- a/test/_config.yml +++ b/test/_config.yml @@ -91,31 +91,19 @@ author: avatar : "/assets/images/bio-photo.jpg" 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 : - google_plus : - keybase : - instagram : - lastfm : - linkedin : - pinterest : - soundcloud : - stackoverflow : # "123456/username" (the last part of your profile url, e.g. http://stackoverflow.com/users/123456/username) - steam : - tumblr : - twitter : "mmistakes" - vine : - weibo : - xing : - youtube : # "https://youtube.com/c/MichaelRoseDesign" + 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/" + - 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/test/_data/authors.yml b/test/_data/authors.yml index d1ba8c629723..256ee1fe1812 100644 --- a/test/_data/authors.yml +++ b/test/_data/authors.yml @@ -2,17 +2,27 @@ Billy Rick: name : "Billy Rick" - uri : "http://thewhip.com" - email : "billy@rick.com" bio : "What do you want, jewels? I am a very extravagant man." avatar : "/assets/images/bio-photo-2.jpg" - twitter : "extravagantman" - google_plus : "BillyRick" + links: + - label: "Email" + icon: "fas fa-fw fa-envelope-square" + url: "mailto:billyrick@rick.com" + - 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 : "cornelius@thewhip.com" bio : "I ordered what?" avatar : "/assets/images/bio-photo.jpg" - twitter : "rhymeswithsackit" - google_plus : "CorneliusFiddlebone" \ No newline at end of file + links: + - label: "Email" + icon: "fas fa-fw fa-envelope-square" + url: "mailto:cornelius@thewhip.com" + - label: "Twitter" + icon: "fab fa-fw fa-twitter-square" + url: "https://twitter.com/rhymeswithsackit" \ No newline at end of file diff --git a/test/_posts/2012-03-15-layout-author-override.md b/test/_posts/2012-03-15-layout-author-override.md index 50635b9d2c45..280a7bdfb47b 100644 --- a/test/_posts/2012-03-15-layout-author-override.md +++ b/test/_posts/2012-03-15-layout-author-override.md @@ -8,25 +8,37 @@ Sites that may have content authored from various individuals can be accommodate 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: "billy@rick.com" - 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:billyrick@rick.com" + - 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: "cornelius@thewhip.com" - 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:cornelius@thewhip.com" + - 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.