Skip to content

Commit acb0519

Browse files
authored
Render social platform icons via Font Awesome library (#839)
Merge pull request 839
1 parent 93b1921 commit acb0519

31 files changed

+42
-148
lines changed

README.md

Lines changed: 15 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -86,9 +86,8 @@ Refers to snippets of code within the `_includes` directory that can be inserted
8686
- `head.html` &mdash; Code-block that defines the `<head></head>` in *default* layout.
8787
- `custom-head.html` &mdash; Placeholder to allow users to add more metadata to `<head />`.
8888
- `header.html` &mdash; Defines the site's main header section. By default, pages with a defined `title` attribute will have links displayed here.
89-
- `social.html` &mdash; Renders social-media icons based on the `minima:social_links` data in the config file.
90-
- `social-item.html` &mdash; Template to render individual list-item containing graphic link to configured social-profile.
91-
- `social-links/*.svg` &mdash; SVG markup components of supported social-icons.
89+
- `social.html` &mdash; Renders social-media icons based on the `minima:social_links` data in the config file using
90+
the latest version of Font Awesome Free webfonts via remote CDN.
9291

9392

9493
### Sass
@@ -283,67 +282,25 @@ Minima 2.x | Minima 3.0
283282

284283
You can add links to the accounts you have on other sites, with respective icon as an SVG graphic, via the config file.
285284
From `Minima-3.0` onwards, the social media data is sourced from config key `minima.social_links`. It is a list of key-value pairs, each entry
286-
corresponding to a link rendered in the footer. For example, to render links to Jekyll GitHub repository and Twitter account, one should have:
285+
corresponding to a link rendered in the footer. For example, to render links to Jekyll GitHub repository and Twitter account (now X), one
286+
should have:
287287

288288
```yaml
289289
minima:
290290
social_links:
291-
- { platform: github, user_url: "https://github.com/jekyll/jekyll" }
292-
- { platform: twitter, user_url: "https://twitter.com/jekyllrb" }
291+
- title: Jekyll repository at GitHub
292+
icon: github
293+
url: "https://github.com/jekyll/jekyll"
294+
- title: Jekyll at X (formerly Twitter)
295+
icon: x-twitter
296+
url: "https://x.com/jekyllrb"
293297
```
294298

295-
Apart from the necessary keys illustrated above, `title` may also be defined to render a custom link-title. By default, the title is the same
296-
as `platform`. The `platform` key corresponds to the SVG id of the sprite in the composite file at URL `/assets/minima-social-icons.svg`.
297-
298-
The theme ships with an icon for `rss` and icons of select social-media platforms:
299-
300-
- `bluesky`
301-
- `codeberg`
302-
- `devto`
303-
- `dribbble`
304-
- `facebook`
305-
- `flickr`
306-
- `github`
307-
- `gitlab`
308-
- `google_scholar`
309-
- `instagram`
310-
- `keybase`
311-
- `linkedin`
312-
- `mastodon`
313-
- `microdotblog`
314-
- `pinterest`
315-
- `stackoverflow`
316-
- `telegram`
317-
- `twitter`
318-
- `whatsapp`
319-
- `x`
320-
- `youtube`
321-
322-
To render a link to a platform not listed above, one should first create a file at path `_includes/social-icons/<PLATFORM>.svg` comprised of
323-
graphic markup **without the top-level `<svg></svg>`**. The icon is expected to be centered within a viewbox of `"0 0 16 16"`. Then, make an
324-
entry under key `minima.social_links`.
325-
326-
For example, to render a link to an account of user `john.doe` at platform `deviantart.com`, the steps to follow would be:
327-
- Get DeviantArt logo in SVG format.
328-
- Using a text-editor, open the downloaded file to inspect if the `viewBox` attribute is defined on the `<svg>` element and is set
329-
as `"0 0 16 16" (or similar "square" dimension)`.
330-
- If the `viewBox` attribute is non-square or undefined, the graphic *may optionally need* to be edited in a vector graphic editor such as
331-
*Inkscape* or *Adobe Illustrator* for properly aligned render on page.
332-
- Edit the SVG file in text-editor to delete everything **except** what is contained between `<svg></svg>` and save it into the Jekyll
333-
project at path `_includes/social-icons/deviantart.svg`.
334-
- Finally, edit the Jekyll config file to enable loading of new icon graphic with:
335-
```yaml
336-
minima:
337-
social_links:
338-
- platform: deviantart # same as SVG filename.
339-
user_url: "https://www.deviantart.com/john.doe" # URL of profile page.
340-
title: My profile at DeviantArt.com # Optional. Text displayed on hovering over link.
341-
```
342-
343-
**Notes:**
344-
- The list of social-links is declarative. List-items are rendered in the order declared in the downstream configuration file and not merged
345-
with entries from upstream config file(s) such as theme-config-file or prior local config files.
346-
- The `user_url` is rendered as given without handling any special characters within.
299+
where `title` corresponds to the link-title displayed when a visitor hovers mouse-pointer over url / icon and
300+
`icon` refers to the Font Awesome icon id. e.g. `github` corresponds to `fa-github`.
301+
302+
Social platform icons are rendered using the latest version of Font Awesome Free webfonts sourced via remote CDN.
303+
The full list of available social icons can be found at https://fontawesome.com/search?ic=brands
347304

348305

349306
### Enabling Google Analytics

_config.yml

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -51,24 +51,17 @@ minima:
5151
# Refer to https://shopify.github.io/liquid/filters/date/ if you want to customize this.
5252
#date_format: "%b-%d-%Y"
5353

54-
# Generate social links in footer.
54+
# Social Media Links
55+
# Renders icons via Font Awesome Free webfonts CDN, based on ordered list of entries.
56+
#
57+
# Entry keys:
58+
# * title Tooltip rendered on hovering over icon.
59+
# * icon Font Awesome icon id. `github` corresponds to `fa-github`.
60+
# * url Full URL of social profile.
5561
#social_links:
56-
# - { platform: devto, user_url: "https://dev.to/jekyll" }
57-
# - { platform: dribbble, user_url: "https://dribbble.com/jekyll" }
58-
# - { platform: facebook, user_url: "https://www.facebook.com/jekyll" }
59-
# - { platform: flickr, user_url: "https://www.flickr.com/photos/jekyll" }
60-
# - { platform: github, user_url: "https://github.com/jekyll/minima" }
61-
# - { platform: gitlab, user_url: "https://gitlab.com/jekyll" }
62-
# - { platform: google_scholar, user_url: "https://scholar.google.com/citations?user=qc6CJjYAAAAJ" }
63-
# - { platform: instagram, user_url: "https://www.instagram.com/jekyll" }
64-
# - { platform: keybase, user_url: "https://keybase.io/jekyll" }
65-
# - { platform: linkedin, user_url: "https://www.linkedin.com/in/jekyll" }
66-
# - { platform: microdotblog, user_url: "https://micro.blog/jekyll" }
67-
# - { platform: pinterest, user_url: "https://www.pinterest.com/jekyll" }
68-
# - { platform: stackoverflow, user_url: "https://stackoverflow.com/users/1234567/jekyll" }
69-
# - { platform: telegram, user_url: "https://t.me/jekyll" }
70-
# - { platform: twitter, user_url: "https://twitter.com/jekyllrb" }
71-
# - { platform: x, user_url: "https://x.com/jekyllrb" }
72-
# - { platform: youtube, user_url: "https://www.youtube.com/jekyll" }
73-
74-
62+
# - title: Minima Theme repository at GitHub
63+
# icon: github
64+
# url: "https://github.com/jekyll/minima"
65+
# - title: Jekyll at X (formerly Twitter)
66+
# icon: x-twitter
67+
# url: "https://x.com/jekyllrb"

_includes/footer.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@
88
<p class="feed-subscribe">
99
<a href="{{ site.feed.path | default: 'feed.xml' | absolute_url }}">
1010
<svg class="svg-icon orange">
11-
<use xlink:href="{{ 'assets/minima-social-icons.svg#rss' | relative_url }}"></use>
11+
<path d="M12.8 16C12.8 8.978 7.022 3.2 0 3.2V0c8.777 0 16 7.223 16 16h-3.2zM2.194
12+
11.61c1.21 0 2.195.985 2.195 2.196 0 1.21-.99 2.194-2.2 2.194C.98 16 0 15.017 0
13+
13.806c0-1.21.983-2.195 2.194-2.195zM10.606
14+
16h-3.11c0-4.113-3.383-7.497-7.496-7.497v-3.11c5.818 0 10.606 4.79 10.606 10.607z"
15+
/>
1216
</svg><span>Subscribe</span>
1317
</a>
1418
</p>

_includes/head.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<meta http-equiv="X-UA-Compatible" content="IE=edge">
44
<meta name="viewport" content="width=device-width, initial-scale=1">
55
{%- seo -%}
6+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css">
67
<link rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}">
78
{%- feed_meta -%}
89
{%- if jekyll.environment == 'production' and site.google_analytics -%}

_includes/social-icons/bluesky.svg

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

_includes/social-icons/codeberg.svg

Lines changed: 0 additions & 11 deletions
This file was deleted.

_includes/social-icons/devto.svg

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

_includes/social-icons/dribbble.svg

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

_includes/social-icons/facebook.svg

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

_includes/social-icons/flickr.svg

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

0 commit comments

Comments
 (0)