From dc33dfe0a7fbe18d04b72e423a510f50e9829870 Mon Sep 17 00:00:00 2001 From: Robert Lord Date: Mon, 21 Oct 2013 14:04:05 -0700 Subject: [PATCH] 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; --- README.md | 13 +++++++++++++ source/index.md | 5 +++++ source/layouts/layout.erb | 12 ++++++++++-- source/stylesheets/all.css.scss | 26 ++++++++++++++++++++++++-- source/stylesheets/variables.scss | 1 + 5 files changed, 53 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 53f9734..c94c65b 100644 --- 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: + - Sign Up for a Developer Key + - Documentation Powered by Slate + +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. diff --git a/source/index.md b/source/index.md index a2cf316..0a6da7b 100644 --- a/source/index.md +++ b/source/index.md @@ -1,9 +1,14 @@ --- title: API Reference + language_tabs: - shell - ruby - python + +toc_footers: + - Sign Up for a Developer Key + - Documentation Powered by Slate --- # Introduction diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb index cdb1b2f..6690edb 100644 --- a/source/layouts/layout.erb +++ b/source/layouts/layout.erb @@ -62,9 +62,17 @@ under the License. -
+
<%= image_tag "logo.png" %> - +
+
+ <% if current_page.data.toc_footers %> +
    + <% current_page.data.toc_footers.each do |footer| %> +
  • <%= footer %>
    • + <% end %> +
+ <% end %>
diff --git a/source/stylesheets/all.css.scss b/source/stylesheets/all.css.scss index 29b159c..99efe53 100644 --- 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; + } + } + } diff --git a/source/stylesheets/variables.scss b/source/stylesheets/variables.scss index c42643a..f51cd03 100644 --- 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;