Skip to content

Commit 30b80d1

Browse files
DirtyFDirtyF
authored
Merge pull request jekyll#141 from ashawley/domingohui-master
Refactor social links
2 parents c1129d6 + 1c9a949 commit 30b80d1

File tree

12 files changed

+90
-35
lines changed

12 files changed

+90
-35
lines changed

‎History.markdown

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
* Add default table styles (#144)
77
* Add `jekyll-seo-tag` dependency (#139)
88
* Add Microformats markup (#160)
9+
* Add more social links (#141)
910

1011
### Documentation
1112

‎README.md

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ Refers to snippets of code within the `_includes` directory that can be inserted
4747
- `google-analytics.html` — Inserts Google Analytics module (active only in production environment).
4848
- `head.html` &mdash; Code-block that defines the `<head></head>` in *default* layout.
4949
- `header.html` &mdash; Defines the site's main header section. By default, pages with a defined `title` attribute will have links displayed here.
50-
- `icon-* files` &mdash; Inserts github and twitter ids with respective icons.
5150

5251
### Sass
5352

@@ -144,6 +143,26 @@ If you don't want to display comments for a particular post you can disable them
144143

145144
--
146145

146+
### Social networks
147+
148+
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:
149+
150+
```yaml
151+
twitter_username: jekyllrb
152+
github_username: jekyll
153+
dribbble_username: jekyll
154+
facebook_username: jekyll
155+
flickr_username: jekyll
156+
instagram_username: jekyll
157+
linkedin_username: jekyll
158+
pinterest_username: jekyll
159+
youtube_username: jekyll
160+
googleplus_username: +jekyll
161+
rss: rss
162+
```
163+
164+
--
165+
147166
### Enabling Google Analytics
148167
149168
To enable Google Anaytics, add the following lines to your Jekyll site:

‎_config.yml

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,19 @@ description: > # this means to ignore newlines until "baseurl:"
66
line in _config.yml. It will appear in your document head meta (for
77
Google search results) and in your feed.xml site description.
88
9-
twitter_username: jekyllrb
10-
github_username: jekyll
9+
social_sites:
10+
twitter: jekyllrb
11+
github: jekyll
12+
#dribbble: jekyll
13+
#facebook: jekyll
14+
#flickr: jekyll
15+
#instagram: jekyll
16+
#linkedin: jekyll
17+
#pinterest: jekyll
18+
#youtube: jekyll
19+
#googleplus: +jekyll
20+
21+
rss: rss
1122

1223
# Minima date format
1324
# refer to http://shopify.github.io/liquid/filters/date/ if you want to customize this

‎_includes/footer.html

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,7 @@ <h2 class="footer-heading">{{ site.title | escape }}</h2>
2222
</div>
2323

2424
<div class="footer-col footer-col-2">
25-
<ul class="social-media-list">
26-
{% if site.github_username %}
27-
<li>
28-
{% include icon-github.html username=site.github_username %}
29-
</li>
30-
{% endif %}
31-
32-
{% if site.twitter_username %}
33-
<li>
34-
{% include icon-twitter.html username=site.twitter_username %}
35-
</li>
36-
{% endif %}
37-
</ul>
25+
{% include social.html %}
3826
</div>
3927

4028
<div class="footer-col footer-col-3">

‎_includes/icon-github.html

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎_includes/icon-github.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎_includes/icon-twitter.html

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎_includes/icon-twitter.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎_includes/social.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<ul class="social-media-list">
2+
{% 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 %}
3+
{% 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 %}
4+
{% 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 %}
5+
{% if site.social_sites.github %}<li><a href="/{{ 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 %}
6+
{% 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 %}
7+
{% 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 %}
8+
{% 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 %}
9+
{% 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 %}
10+
{% 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 %}
11+
{% 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 %}
12+
{% 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 %}
13+
</ul>

‎_sass/minima/_base.scss

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -195,20 +195,17 @@ pre {
195195
/**
196196
* Icons
197197
*/
198-
.icon > svg {
199-
display: inline-block;
200-
vertical-align: middle;
201198

202-
path {
203-
fill: $grey-color;
204-
}
199+
.svg-icon {
200+
width: 16px;
201+
height: 16px;
202+
display: inline-block;
203+
fill: #{$grey-color};
204+
padding-right: 5px;
205+
vertical-align: text-top;
205206
}
206207

207208
.social-media-list {
208-
.icon {
209-
padding-right: 5px;
210-
}
211-
212209
li + li {
213210
padding-top: 5px;
214211
}

0 commit comments

Comments
 (0)