Merge pull request #40 from kentnek/kent-social-icons

README.md

@@ -52,32 +52,36 @@ If you would rather override the about page's layout with your own, you can do s
 
 ### Configuring Social Icons
 
-Social Icons are optional. As of right now we support Twitter and GitHub, but more can be supported in the future. To show any of these icons, just provide the value in the `[params]` section of `config.toml`.
+Social Icons are optional. To show any of these icons, just provide the value in the `[params]` section of `config.toml`.
 
 ```toml
 # config.toml
 
 [params]
-  twitter = "hugo-theme-codex"
-  github = "jakewies/hugo-theme-codex"
+  twitter = "https://twitter.com/GoHugoIO"
+  github = "https://github.com/jakewies/hugo-theme-codex"
+  # ...
+
+  iconTitles = ["Twitter", "GitHub"]
 ```
 
-If either of these options are given, `hugo-theme-codex` will render the social icon in the footer.
+If any of these options are given, `hugo-theme-codex` will render the social icon in the footer, using the order specified in `iconTitles`.
 
 See the contents of the [example site](https://github.com/jakewies/hugo-theme-codex/tree/master/exampleSite) for more details.
 
-You can also create additional social icons by replicating the code in `partials/social-icons.html`. For example, to add an email social icon, you can add the follwing:
-
-```html
-<a class="social-icons__icon social-icons__icon--email" href="mailto:[email protected]"></a>
-```
-Note that you also need to add the following css in corresponding css files where social icons are displayed, i.e. `about.css` and `post.css`:
-
-```css
-.social-icons__icon--email {
-  background-image: url("/icons/email.svg");
-}
-```
+You can also create additional social icons by:
+1. Add your own SVGs in `static/icons/`, for example `static/icons/reddit.svg`.
+2. Modify your site's config as follows:
+   ```toml
+   [params]
+      # ...
+      reddit = "<url to your reddit>"
+
+      iconTitles = [ "...", "Reddit"]
+   ```
+
+Make sure that the icon title must match the icon's file name. If the title contains more than one word, say "My Awesome Site",
+you can use dash "-" for the icon name: `my-awesome-site.svg`. 
 
 ### Creating a blog post
 

assets/scss/partials/_social-icons.scss

@@ -8,13 +8,8 @@
   height: 1.2rem;
   background-size: contain;
   background-repeat: no-repeat;
-}
-
-.social-icons__icon--twitter {
-  background-image: url(/icons/twitter.svg);
-  margin-right: 2rem;
-}
-
-.social-icons__icon--github {
-  background-image: url(/icons/github.svg);
+
+  &:not(:last-child) {
+    margin-right: 2em;
+  }
 }

exampleSite/config.toml

@@ -15,10 +15,20 @@ themesDir = "../../"
 
 # Optional params
 [params]
-  # Show Twitter icon linking to twitter.com/your-twitter-handle
-  twitter = "your-twitter-handle" # omit @
-  # Show Github icon linking to github.com/your-github-handle
-  github = "your-github-handle" # omit @
+  # Links to your social accounts, comment/uncomment as needed. Icons will be displayed for those specified.
+  twitter = "https://twitter.com/<your handle>"
+  github = "https://github.com/<your handle>"
+  # email = "mailto:<your email>"
+  # facebook = "https://facebook.com/<your handle>"
+  # gitlab = "https://gitlab.com/<your handle>"
+  # instagram = "https://instagram.com/<your handle>"
+  # linkedin = "<link to your profile>"
+  # youtube = "https://www.youtube.com/channel/<your channel>"
+
+  # Titles for your icons (shown as tooltips), and also their display order.
+  # Currently, these icons are supported: 
+  #   "Twitter", "GitHub", "Email", "Facebook", "GitLab", "Instagram", "LinkedIn", "YouTube"
+  iconTitles = ["Twitter", "GitHub"]
 
 # This disables Hugo's default syntax highlighting in favor
 # of prismjs. If you wish to use Hugo's default syntax highlighting

layouts/partials/social-icons.html

@@ -1,8 +1,15 @@
+{{ $currentPage := . }}
+{{ $icons := .Site.Params.iconOrder | default (slice "Twitter" "GitHub" "Email" "Facebook" "GitLab" "Instagram" "LinkedIn" "YouTube") }}
+
 <div class="social-icons">
-  {{ if isset .Site.Params "twitter" }}
-  <a class="social-icons__icon social-icons__icon--twitter" href="https://twitter.com/{{ .Site.Params.twitter }}"></a>
-  {{ end }}
-  {{ if isset .Site.Params "github" }}
-  <a class="social-icons__icon social-icons__icon--github" href="https://github.com/{{ .Site.Params.github }}"></a>
-  {{ end }}
+  {{ range $icons }}
+    {{ $icon := anchorize . }} 
+    {{ if isset $currentPage.Site.Params $icon }}
+      <a class="social-icons__icon" title="{{ . }}"
+         style="background-image: url(/icons/{{ $icon }}.svg)" 
+         href="{{ index $currentPage.Site.Params $icon }}"
+         target="_blank" rel="noopener">
+      </a>
+    {{ end }}
+  {{ end }}   
 </div>