Add table of contents footer links feature

Now you can add links to the bottom of your table of contents! Documentation has also been changed to reflect this new feature. Please note that if you have a custom variables.scss, you'll have to merge in this line: $nav-footer-border-color: #666;

Add table of contents footer links feature
Now you can add links to the bottom of your table of contents! Documentation has also been changed to reflect this new feature. Please note that if you have a custom variables.scss, you'll have to merge in this line: $nav-footer-border-color: #666;
dc33dfe0 · Robert Lord · 81b9110c · dc33dfe0 · dc33dfe0 · dc33dfe0
Commit dc33dfe0 authored Oct 21, 2013 by Robert Lord
5 changed files
--- a/README.md
+++ b/README.md
@@ -125,6 +125,19 @@ Done! Language renamed. You can keep all your codeblocks for shell, but it'll lo

 Just replace `source/images/logo.png` with your logo.

+
+### How do I change the links that appear below the Table of Contents?
+
+Just edit, at the top of `index.md`,
+
+    toc_footers:
+     - <a href='#'>Sign Up for a Developer Key</a>
+     - <a href='http://github.com/tripit/slate'>Documentation Powered by Slate</a>
+
+Add more lines or remove lines as needed. Just make sure they start with the dash. If you don't want any footer links at all, just remove `toc_footers` altogether, and the link section should just disappear.
+
+Feel free to remove the "Documentation Powered by Slate" if you'd like, although we appreciate having that there since it helps more people discover Slate!
+
 ### How do I get my code samples to line up with the content I want them next to?

 Try putting code blocks and annotations right after headers. See the default `source/index.md` for an example, or file an issue if you're having trouble.

--- a/source/index.md
+++ b/source/index.md
 ---
 title: API Reference
+
 language_tabs:
  - shell
  - ruby
  - python
+
+toc_footers:
+ - <a href='#'>Sign Up for a Developer Key</a>
+ - <a href='http://github.com/tripit/slate'>Documentation Powered by Slate</a>
 ---

 # Introduction

--- a/source/layouts/layout.erb
+++ b/source/layouts/layout.erb
@@ -62,9 +62,17 @@ under the License.
  </head>

  <body class="<%= page_classes %>">
-    <div id="toc">
+    <div class="tocify-wrapper">
      <%= image_tag "logo.png" %>
-      <!-- table of contents will be inserted here -->
+      <div id="toc">
+      </div>
+      <% if current_page.data.toc_footers %>
+      <ul class="toc-footer">
+        <% current_page.data.toc_footers.each do |footer| %>
+          <li><%= footer %></li>
+        <% end %>
+      </ul>
+      <% end %>
    </div>
    <div class="page-wrapper">
      <div class="content">

--- a/source/stylesheets/all.css.scss
+++ b/source/stylesheets/all.css.scss
@@ -36,7 +36,7 @@ html, body {
 // TABLE OF CONTENTS
 ////////////////////////////////////////////////////////////////////////////////

-.tocify {
+.tocify-wrapper {
  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;
@@ -54,7 +54,7 @@ html, body {
    margin-bottom: $logo-margin;
  }

-  .tocify-item>a {
+  .tocify-item>a, .toc-footer li {
    padding: 0 $nav-padding 0 $nav-padding;
    display:block;
    overflow-x:hidden;
@@ -114,6 +114,28 @@ html, body {
      box-shadow: none; // otherwise it'll overflow out of the subheader
    }
  }
+
+  .toc-footer {
+    padding: 1em 0;
+    margin-top: 1em;
+    border-top: 1px dashed $nav-footer-border-color;
+
+    li,a {
+      color: $nav-text;
+      text-decoration: none;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+
+    li {
+      font-size: 0.8em;
+      line-height: 1.7;
+      text-decoration: none;
+    }
+  }
+
 }



--- a/source/stylesheets/variables.scss
+++ b/source/stylesheets/variables.scss
@@ -79,6 +79,7 @@ $h1-margin-bottom: 21px; // padding under the largest header tags
 // OTHER
 ////////////////////
 $nav-active-shadow: #000;
+$nav-footer-border-color: #666;
 $nav-embossed-border-top: 1px solid #000;
 $nav-embossed-border-bottom: 1px solid #404040;
 $main-embossed-text-shadow: 0px 1px 0px #fff;