Merge pull request jekyll#141 from ashawley/domingohui-master

Refactor social links
brashrebel · Jan 16, 2018 · 7495baa · 7495baa
2 parents 98553e3 + f5065c6
commit 7495baa
Show file tree

Hide file tree

Showing 12 changed files with 90 additions and 35 deletions.
diff --git a/History.markdown b/History.markdown
@@ -6,6 +6,7 @@
   * Add default table styles (#144)
   * Add `jekyll-seo-tag` dependency (#139)
   * Add Microformats markup (#160)
+  * Add more social links (#141)
 
 ### Documentation
 

diff --git a/README.md b/README.md
@@ -47,7 +47,6 @@ Refers to snippets of code within the `_includes` directory that can be inserted
   - `google-analytics.html` &mdash; Inserts Google Analytics module (active only in production environment).
   - `head.html` &mdash; Code-block that defines the `<head></head>` in *default* layout.
   - `header.html` &mdash; Defines the site's main header section. By default, pages with a defined `title` attribute will have links displayed here.
-  - `icon-* files` &mdash; Inserts github and twitter ids with respective icons.
 
 ### Sass
 
@@ -144,6 +143,26 @@ If you don't want to display comments for a particular post you can disable them
 
 --
 
+### Social networks
+
+You can add links to the accounts you have on other sites, with respective icon, by adding one or more of the following options in your config:
+
+```yaml
+twitter_username: jekyllrb
+github_username:  jekyll
+dribbble_username: jekyll
+facebook_username: jekyll
+flickr_username: jekyll
+instagram_username: jekyll
+linkedin_username: jekyll
+pinterest_username: jekyll
+youtube_username: jekyll
+googleplus_username: +jekyll
+rss: rss
+```
+
+--
+
 ### Enabling Google Analytics
 
 To enable Google Anaytics, add the following lines to your Jekyll site:

diff --git a/_config.yml b/_config.yml
@@ -6,8 +6,19 @@ description: > # this means to ignore newlines until "baseurl:"
   line in _config.yml. It will appear in your document head meta (for
   Google search results) and in your feed.xml site description.
 
-twitter_username: jekyllrb
-github_username:  jekyll
+social_sites:
+  twitter: jekyllrb
+  github:  jekyll
+  #dribbble: jekyll
+  #facebook: jekyll
+  #flickr: jekyll
+  #instagram: jekyll
+  #linkedin: jekyll
+  #pinterest: jekyll
+  #youtube: jekyll
+  #googleplus: +jekyll
+
+rss: rss
 
 # Minima date format
 # refer to http://shopify.github.io/liquid/filters/date/ if you want to customize this

diff --git a/_includes/footer.html b/_includes/footer.html
@@ -22,19 +22,7 @@ <h2 class="footer-heading">{{ site.title | escape }}</h2>
       </div>
 
       <div class="footer-col footer-col-2">
-        <ul class="social-media-list">
-          {% if site.github_username %}
-          <li>
-            {% include icon-github.html username=site.github_username %}
-          </li>
-          {% endif %}
-
-          {% if site.twitter_username %}
-          <li>
-            {% include icon-twitter.html username=site.twitter_username %}
-          </li>
-          {% endif %}
-        </ul>
+        {% include social.html %}
       </div>
 
       <div class="footer-col footer-col-3">

diff --git a/_includes/icon-github.html b/_includes/icon-github.html
diff --git a/_includes/icon-github.svg b/_includes/icon-github.svg
diff --git a/_includes/icon-twitter.html b/_includes/icon-twitter.html
diff --git a/_includes/icon-twitter.svg b/_includes/icon-twitter.svg
diff --git a/_includes/social.html b/_includes/social.html
@@ -0,0 +1,13 @@
+<ul class="social-media-list">
+  {% if site.social_sites.dribbble %}<li><a href="https://dribbble.com/{{ site.social_sites.dribbble | cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#dribbble"></use></svg> <span class="username">{{ site.social_sites.dribbble | escape }}</span></a></li>{% endif %}
+  {% if site.social_sites.facebook %}<li><a href="https://www.facebook.com/{{ site.social_sites.facebook | cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#facebook"></use></svg> <span class="username">{{ site.social_sites.facebook | escape }}</span></a></li>{% endif %}
+  {% if site.social_sites.flickr %}<li><a href="https://www.flickr.com/photos/{{ site.social_sites.flickr | cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#flickr"></use></svg> <span class="username">{{ site.social_sites.flickr | escape }}</span></a></li>{% endif %}
+  {% if site.social_sites.github %}<li><a href="https://github.com/{{ site.social_sites.github | cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#github"></use></svg> <span class="username">{{ site.social_sites.github | escape }}</span></a></li>{% endif %}
+  {% if site.social_sites.instagram %}<li><a href="https://instagram.com/{{ site.social_sites.instagram | cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#instagram"></use></svg> <span class="username">{{ site.social_sites.instagram | escape }}</span></a></li>{% endif %}
+  {% if site.social_sites.linkedin %}<li><a href="https://www.linkedin.com/in/{{ site.social_sites.linkedin | cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#linkedin"></use></svg> <span class="username">{{ site.social_sites.linkedin | escape }}</span></a></li>{% endif %}
+  {% if site.social_sites.pinterest %}<li><a href="https://www.pinterest.com/{{ site.social_sites.pinterest | cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#pinterest"></use></svg> <span class="username">{{ site.social_sites.pinterest | escape }}</span></a></li>{% endif %}
+  {% if site.social_sites.twitter %}<li><a href="https://www.twitter.com/{{ site.social_sites.twitter | cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#twitter"></use></svg> <span class="username">{{ site.social_sites.twitter | escape }}</span></a></li>{% endif %}
+  {% if site.social_sites.youtube %}<li><a href="https://youtube.com/{{ site.social_sites.youtube | cgi_escape | escape }}"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#youtube"></use></svg> <span class="username">{{ site.social_sites.youtube | escape }}</span></a></li>{% endif %}
+  {% if site.social_sites.googleplus %}<li><a href="https://plus.google.com/{{ site.social_sites.googleplus | escape }}"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#googleplus"></use></svg> <span class="username">{{ site.social_sites.googleplus | escape }}</span></a></li>{% endif %}
+  {% if site.rss %}<li><a href="{{ 'feed.xml' | relative_url }}"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#rss"></use></svg> <span>{{ site.rss | escape }}</span></a></li>{% endif %}
+</ul>
diff --git a/_sass/minima/_base.scss b/_sass/minima/_base.scss
@@ -195,20 +195,17 @@ pre {
 /**
  * Icons
  */
-.icon > svg {
-  display: inline-block;
-  vertical-align: middle;
 
-  path {
-    fill: $grey-color;
-  }
+.svg-icon {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    fill: #{$grey-color};
+    padding-right: 5px;
+    vertical-align: text-top;
 }
 
 .social-media-list {
-  .icon {
-    padding-right: 5px;
-  }
-
   li + li {
     padding-top: 5px;
   }

diff --git a/about.md b/about.md
@@ -4,12 +4,15 @@ title: About
 permalink: /about/
 ---
 
-This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](http://jekyllrb.com/)
+This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](https://jekyllrb.com/)
 
-You can find the source code for the Jekyll new theme at:
-{% include icon-github.html username="jekyll" %} /
+You can find the source code for Minima at GitHub:
+[jekyll][jekyll-organization] /
 [minima](https://github.com/jekyll/minima)
 
-You can find the source code for Jekyll at
-{% include icon-github.html username="jekyll" %} /
+You can find the source code for Jekyll at GitHub:
+[jekyll][jekyll-organization] /
 [jekyll](https://github.com/jekyll/jekyll)
+
+
+[jekyll-organization]: https://github.com/jekyll
diff --git a/assets/minima-social-icons.svg b/assets/minima-social-icons.svg