Add more social icons, and an easy way to configure them

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:
+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"]
+   ```
 
-```html
-<a class="social-icons__icon social-icons__icon--email" href="mailto:youremail@example.com"></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");
-}
-```
+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>

static/icons/email.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>

static/icons/facebook.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-facebook"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>

static/icons/gitlab.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-gitlab"><path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z"></path></svg>

static/icons/instagram.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>

static/icons/linkedin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>

static/icons/youtube.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-youtube"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg>