Fixed #79: Modularized social links integration

docs/customization.md

@@ -102,6 +102,7 @@ The directory layout of the Material theme is as follows:
 │  ├─ nav-item.html                    # Main navigation item
 │  ├─ nav.html                         # Main navigation
 │  ├─ search.html                      # Search box
+│  ├─ social.html                      # Social links
 │  ├─ source.html                      # Repository information
 │  ├─ svgs.html                        # Inline SVG definitions
 │  ├─ toc-item.html                    # Table of contents item
@@ -151,6 +152,7 @@ The Material theme provides the following template blocks:
 | `site_meta`  | Wraps the meta tags in the document head        |
 | `site_name`  | Wraps the site name in the header bar           |
 | `site_nav`   | Wraps the site navigation and table of contents |
+| `social`     | Wraps the social links in the footer            |
 | `styles`     | Wraps the stylesheets (also extra sources)      |
 
 For more on this topic refer to the [MkDocs documentation][4]

docs/getting-started.md

@@ -239,9 +239,9 @@ extra:
 
 If you want to link your social accounts, the Material theme provides an easy
 way for doing this in the footer of the documentation using the automatically
-included [Socicon][8] webfont. The syntax is simple - the `type` denotes the
+included [FontAwesome][8] webfont. The syntax is simple – the `type` denotes
-name of the social service, e.g. `github`, `twitter` or `linkedin` and the
+the name of the social service, e.g. `github`, `twitter` or `linkedin` and
-`link`, well, resembles the link:
+the `link`, well, resembles the link:
 
 ``` yaml
 extra:
@@ -254,9 +254,11 @@ extra:
       link: 'https://de.linkedin.com/in/martin-donath-20a95039'
 ```
 
-The links are generated in order.
+The links are generated in order and the type of the link must match the name
+of the FontAwesome glyph. The `fa` is automatically added, so `github` will
+result in `fa fa-github`.
 
-  [8]: http://www.socicon.com/chart.php
+  [8]: http://fontawesome.io/icons/
 
 ### Google Analytics integration
 

material/base.html

@@ -36,7 +36,7 @@
       {% include "partials/fonts.html" %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-b85bf442e8.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-7822ba8d37.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-0352baa348.palette.css">
       {% endif %}

material/partials/fonts.html

@@ -6,6 +6,3 @@
   <style>body,input{font-family:"{{ text }}","Helvetica Neue",Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"{{ code }}","Courier New",Courier,monospace}</style>
 {% endif %}
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-{% if config.extra.social %}
-  <link rel="stylesheet" href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css">
-{% endif %}

material/partials/footer.html

@@ -49,13 +49,9 @@
         <a href="http://squidfunk.github.io/mkdocs-material/">
           Material for MkDocs</a>
       </div>
-      {% if config.extra.social %}
+      {% block social %}
-        <div class="md-footer-social">
+        {% include "partials/social.html" %}
-          {% for social in config.extra.social %}
+      {% endblock %}
-            <a href="{{ social.link }}" class="md-footer-social__link socicon-{{ social.type }}"></a>
-          {% endfor %}
-        </div>
-      {% endif %}
     </div>
   </div>
 </footer>

material/partials/social.html

@@ -0,0 +1,9 @@
+{% if config.extra.social %}
+  <div class="md-footer-social">
+    {% set path = "ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" %}
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/{{ path }}">
+    {% for social in config.extra.social %}
+      <a href="{{ social.link }}" class="md-footer-social__link fa fa-{{ social.type }}"></a>
+    {% endfor %}
+  </div>
+{% endif %}

mkdocs.yml

@@ -43,7 +43,7 @@ extra:
     text: Roboto
     mono: Roboto Mono
   social:
-    - type: github
+    - type: github-alt
       link: https://github.com/squidfunk
     - type: twitter
       link: https://twitter.com/squidfunk

src/assets/stylesheets/layout/_footer.scss

@@ -169,7 +169,7 @@
 
     // Adjust line-height to match height for correct alignment
     &::before {
-      line-height: 2;
+      line-height: 1.9;
     }
   }
 }

src/partials/fonts.html

@@ -40,9 +40,3 @@
 <!-- Material icons as a default iconset -->
 <link rel="stylesheet" type="text/css"
     href="https://fonts.googleapis.com/icon?family=Material+Icons" />
-
-<!-- Social icon webfont, if necessary -->
-{% if config.extra.social %}
-  <link rel="stylesheet" type="text/css"
-      href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css">
-{% endif %}

src/partials/footer.html

@@ -89,15 +89,10 @@
           Material for MkDocs</a>
       </div>
 
-      <!-- Link to social media accounts, if any -->
+      <!-- Social links -->
-      {% if config.extra.social %}
+      {% block social %}
-        <div class="md-footer-social">
+        {% include "partials/social.html" %}
-          {% for social in config.extra.social %}
+      {% endblock %}
-            <a href="{{ social.link }}" class="md-footer-social__link
-                  socicon-{{ social.type }}"></a>
-          {% endfor %}
-        </div>
-      {% endif %}
     </div>
   </div>
 </footer>

src/partials/social.html

@@ -0,0 +1,34 @@
+<!--
+  Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to
+  deal in the Software without restriction, including without limitation the
+  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+  sell copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+  IN THE SOFTWARE.
+-->
+
+<!-- Social links in footer -->
+{% if config.extra.social %}
+  <div class="md-footer-social">
+    {% set path = "ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" %}
+    <link rel="stylesheet" type="text/css"
+        href="https://cdnjs.cloudflare.com/{{ path }}">
+    {% for social in config.extra.social %}
+      <a href="{{ social.link }}" class="md-footer-social__link
+            fa fa-{{ social.type }}"></a>
+    {% endfor %}
+  </div>
+{% endif %}