Skip to content

N
node-slate
Commit bc79a655 authored by Robert Lord's avatar Robert Lord
Browse files
Options

More changes

parent 6c077ba8
Hide whitespace changes
Inline Side-by-side
Showing with 159 additions and 56 deletions
config.rb
View file @ bc79a655
...@@ -50,7 +50,7 @@ set :images_dir, 'images' ...@@ -50,7 +50,7 @@ set :images_dir, 'images'
set :markdown_engine, :redcarpet set :markdown_engine, :redcarpet
set :markdown, :fenced_code_blocks => true, :smartypants => true, :disable_indented_code_blocks => true, :prettify => true, :with_toc_data => true, :tables => true set :markdown, :fenced_code_blocks => true, :smartypants => true, :disable_indented_code_blocks => true, :prettify => true, :tables => true
# Activate the syntax highlighter # Activate the syntax highlighter
activate :syntax activate :syntax
......
source/javascripts/jquery.tocify.js
View file @ bc79a655
/* jquery Tocify - v1.8.0 - 2013-09-16 /* jquery Tocify - v1.8.0 - 2013-09-16
* http://www.gregfranko.com/jquery.tocify.js/ * http://www.gregfranko.com/jquery.tocify.js/
* Copyright (c) 2013 Greg Franko; Licensed MIT */ * Copyright (c) 2013 Greg Franko; Licensed MIT
* Modified lightly by Robert Lord to fix a bug I found,
* and also so it adds ids to headers
* also because I want height caching, since the
* height lookup for h1s and h2s was causing serious
* lag spikes below 30 fps */
// Immediately-Invoked Function Expression (IIFE) [Ben Alman Blog Post](http://benalman.com/news/2010/11/immediately-invoked-function-expression/) that calls another IIFE that contains all of the plugin logic. I used this pattern so that anyone viewing this code would not have to scroll to the bottom of the page to view the local parameters that were passed to the main IIFE. // Immediately-Invoked Function Expression (IIFE) [Ben Alman Blog Post](http://benalman.com/news/2010/11/immediately-invoked-function-expression/) that calls another IIFE that contains all of the plugin logic. I used this pattern so that anyone viewing this code would not have to scroll to the bottom of the page to view the local parameters that were passed to the main IIFE.
(function(tocify) { (function(tocify) {
...@@ -149,6 +154,10 @@ ...@@ -149,6 +154,10 @@
// Generates the HTML for the dynamic table of contents // Generates the HTML for the dynamic table of contents
self._generateToc(); self._generateToc();
// Caches heights and anchors
self.cachedHeights = [],
self.cachedAnchors = [];
// Adds CSS classes to the newly generated table of contents HTML // Adds CSS classes to the newly generated table of contents HTML
self._addCSSClasses(); self._addCSSClasses();
...@@ -377,6 +386,10 @@ ...@@ -377,6 +386,10 @@
hashValue = this._generateHashValue(arr, self, index); hashValue = this._generateHashValue(arr, self, index);
// ADDED BY ROBERT
// actually add the hash value to the element's id
self.attr("id", "link-" + hashValue);
// Appends a list item HTML element to the last unordered list HTML element found within the HTML element calling the plugin // Appends a list item HTML element to the last unordered list HTML element found within the HTML element calling the plugin
item = $("<li/>", { item = $("<li/>", {
...@@ -414,10 +427,16 @@ ...@@ -414,10 +427,16 @@
hashGeneratorOption = this.options.hashGenerator; hashGeneratorOption = this.options.hashGenerator;
if (hashGeneratorOption === "pretty") { if (hashGeneratorOption === "pretty") {
// remove weird characters
// prettify the text // prettify the text
hashValue = self.text().toLowerCase().replace(/\s/g, "-"); hashValue = self.text().toLowerCase().replace(/\s/g, "-");
// ADDED BY ROBERT
// remove weird characters
hashValue = hashValue.replace(/[^\x00-\x7F]/g, "");
// fix double hyphens // fix double hyphens
while (hashValue.indexOf("--") > -1) { while (hashValue.indexOf("--") > -1) {
hashValue = hashValue.replace(/--/g, "-"); hashValue = hashValue.replace(/--/g, "-");
...@@ -645,28 +664,22 @@ ...@@ -645,28 +664,22 @@
// _Local variables_ // _Local variables_
// Stores the distance to the closest anchor // Stores the distance to the closest anchor
var closestAnchorDistance = null, var // Stores the index of the closest anchor
// Stores the index of the closest anchor
closestAnchorIdx = null, closestAnchorIdx = null,
// Keeps a reference to all anchors
anchors = $(self.options.context).find("div[data-unique]"),
anchorText; anchorText;
self.calculateHeights();
// Determines the index of the closest anchor // Determines the index of the closest anchor
anchors.each(function(idx) { self.cachedAnchors.each(function(idx) {
var distance = /*Math.abs*/(($(this).next().length ? $(this).next() : $(this)).offset().top - winScrollTop - self.options.highlightOffset); if (self.cachedHeights[idx] - $(window).scrollTop() < 0) {
if (distance < 0) {
closestAnchorDistance = distance;
closestAnchorIdx = idx; closestAnchorIdx = idx;
} else { } else {
return false; return false;
} }
}); });
anchorText = $(anchors[closestAnchorIdx]).attr("data-unique"); anchorText = $(self.cachedAnchors[closestAnchorIdx]).attr("data-unique");
// Stores the list item HTML element that corresponds to the currently traversed anchor tag // Stores the list item HTML element that corresponds to the currently traversed anchor tag
elem = $('li[data-unique="' + anchorText + '"]'); elem = $('li[data-unique="' + anchorText + '"]');
...@@ -684,9 +697,9 @@ ...@@ -684,9 +697,9 @@
if(self.options.scrollHistory) { if(self.options.scrollHistory) {
if(window.location.hash !== anchorText) { if(window.location.hash !== "#" + anchorText) {
window.location.hash = anchorText; window.location.replace("#" + anchorText);
} }
...@@ -707,6 +720,23 @@ ...@@ -707,6 +720,23 @@
}, },
// calculateHeights
// ----
// ADDED BY ROBERT
calculateHeights: function() {
var self = this;
if (self.cachedHeights.length == 0) {
self.cachedHeights = [];
self.cachedAnchors = [];
var anchors = $(self.options.context).find("div[data-unique]");
anchors.each(function(idx) {
var distance = (($(this).next().length ? $(this).next() : $(this)).offset().top - self.options.highlightOffset);
self.cachedHeights[idx] = distance;
});
self.cachedAnchors = anchors;
}
},
// Show // Show
// ---- // ----
// Opens the current sub-header // Opens the current sub-header
...@@ -956,7 +986,7 @@ ...@@ -956,7 +986,7 @@
$("html, body").animate({ $("html, body").animate({
// Sets the jQuery `scrollTop` to the top offset of the HTML div tag that matches the current list item's `data-unique` tag // Sets the jQuery `scrollTop` to the top offset of the HTML div tag that matches the current list item's `data-unique` tag
"scrollTop": $('div[data-unique="' + elem.attr("data-unique") + '"]').offset().top - ($.isFunction(scrollTo) ? scrollTo.call() : scrollTo) + "px" "scrollTop": $('div[data-unique="' + elem.attr("data-unique") + '"]').next().offset().top - ($.isFunction(scrollTo) ? scrollTo.call() : scrollTo) + "px"
}, { }, {
......
source/javascripts/lang_selector.js
View file @ bc79a655
languages = []
function activateLanguage(language) { function activateLanguage(language) {
$("#lang-selector a").removeClass('active'); $("#lang-selector a").removeClass('active');
$("#lang-selector a[data-language-name='" + language + "']").addClass('active'); $("#lang-selector a[data-language-name='" + language + "']").addClass('active');
$(".highlight").hide(); for (var i=0; i < languages.length; i++) {
$(".highlight." + languages[i]).hide();
}
$(".highlight." + language).show(); $(".highlight." + language).show();
$(".highlight.text").show(); // always show text
} }
function setupLanguages(languages) { function setupLanguages(l) {
languages = l;
currentLanguage = languages[0]; currentLanguage = languages[0];
activateLanguage(languages[0]); if (location.search.substr(1) != "") {
activateLanguage(location.search.substr(1));
} else {
activateLanguage(languages[0]);
}
$("#lang-selector a").bind("click", function() { $("#lang-selector a").bind("click", function() {
activateLanguage($(this).data("language-name")); activateLanguage($(this).data("language-name"));
...@@ -17,3 +24,4 @@ function setupLanguages(languages) { ...@@ -17,3 +24,4 @@ function setupLanguages(languages) {
}); });
} }
source/layouts/layout.erb
View file @ bc79a655
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<script> <script>
$(function() { $(function() {
$("#toc").tocify({ var toc = $("#toc").tocify({
selectors: "h1,h2", selectors: "h1,h2",
extendPage: false, extendPage: false,
theme: "none", theme: "none",
...@@ -25,11 +25,12 @@ ...@@ -25,11 +25,12 @@
ignoreSelector: ".toc-ignore", ignoreSelector: ".toc-ignore",
hashGenerator: 'pretty', hashGenerator: 'pretty',
highlightOffset: 60, highlightOffset: 60,
scrollTo: -2,
scrollHistory: true scrollHistory: true
}); });
setupLanguages([ setupLanguages([
<% current_page.data.languages.each do |lang| %> <% current_page.data.languages.each do |lang| %>
['<%= lang %>'], ['<%= lang[0] %>'],
<% end %> <% end %>
]); ]);
}); });
...@@ -38,20 +39,18 @@ ...@@ -38,20 +39,18 @@
<body class="<%= page_classes %>"> <body class="<%= page_classes %>">
<div id="toc"> <div id="toc">
<div class="toc-bottom"> <%= image_tag "logo.png" %>
<%= current_page.data.external_links %>
</div>
<!-- table of contents will be inserted here --> <!-- table of contents will be inserted here -->
</div> </div>
<div class="page-wrapper"> <div class="page-wrapper">
<div class="content"> <div class="content">
<h1 id="bigtitle" class="bigtitle toc-ignore"><%= current_page.data.title || "API Documentation" %></h1> <!-- <h1 id="bigtitle" class="bigtitle toc-ignore"><%= current_page.data.title || "API Documentation" %></h1> -->
<%= yield %> <%= yield %>
</div> </div>
<div class="dark-box"> <div class="dark-box">
<div id="lang-selector"> <div id="lang-selector">
<% current_page.data.languages.each do |lang| %> <% current_page.data.languages.each do |lang| %>
<a href="#" data-language-name="<%= lang %>"><%= lang %></a> <a href="#" data-language-name="<%= lang[0] %>"><%= lang[1] %></a>
<% end %> <% end %>
</div> </div>
</div> </div>
......
source/stylesheets/all.css.scss
View file @ bc79a655
...@@ -14,6 +14,7 @@ html, body { ...@@ -14,6 +14,7 @@ html, body {
color: $main-text-color; color: $main-text-color;
padding: 0; padding: 0;
margin: 0; margin: 0;
-webkit-font-smoothing: antialiased;
} }
.page-wrapper { .page-wrapper {
...@@ -21,12 +22,11 @@ html, body { ...@@ -21,12 +22,11 @@ html, body {
min-width: 700px; min-width: 700px;
position: relative; position: relative;
z-index: 10; z-index: 10;
background-color: #fff; background-color: $main-bg;
padding-top: 10px;
padding-bottom: 10px;
padding-top: 10px; // prevent headers margin from overflowing
.dark-box { .dark-box {
width: 50%; width: $examples-width;
background: $examples-bg; background: $examples-bg;
position: absolute; position: absolute;
right: 0; right: 0;
...@@ -40,6 +40,7 @@ html, body { ...@@ -40,6 +40,7 @@ html, body {
z-index: 50; z-index: 50;
font-weight: bold; font-weight: bold;
background-color: $lang-select-bg; background-color: $lang-select-bg;
@include background-image(linear-gradient(top, #1d82c6, #1864ab));
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
a { a {
background-color: $lang-select-bg; background-color: $lang-select-bg;
...@@ -50,6 +51,7 @@ html, body { ...@@ -50,6 +51,7 @@ html, body {
padding: 0 10px; padding: 0 10px;
border-right: 1px solid $lang-select-border; border-right: 1px solid $lang-select-border;
line-height: 30px; line-height: 30px;
@include background-image(linear-gradient(top, #1d82c6, #1864ab));
&:hover { &:hover {
background-color: $lang-select-hover-bg; background-color: $lang-select-hover-bg;
...@@ -60,6 +62,7 @@ html, body { ...@@ -60,6 +62,7 @@ html, body {
border-top: 1px solid $examples-bg; border-top: 1px solid $examples-bg;
border-right-color: $examples-bg; border-right-color: $examples-bg;
margin-bottom: -1px; margin-bottom: -1px;
background-image: none;
position: relative; position: relative;
z-index: 70; z-index: 70;
} }
...@@ -84,73 +87,117 @@ html, body { ...@@ -84,73 +87,117 @@ html, body {
} }
code { code {
background-color: #ebf2f4; background-color: rgba(0,0,0,0.05);
border-radius: 5px;
padding: 3px; padding: 3px;
border-radius: 3px;
} }
&>h1, &>h2, &>h3, &>p, &>table { &>h1, &>h2, &>h3, &>p, &>table, &>ul, &>ol {
margin-right: 50%; margin-right: $examples-width;
@include box-sizing(border-box); @include box-sizing(border-box);
padding: 0 $main-padding; padding: 0 $main-padding;
display: block; display: block;
@include embedded-text;
}
&>ul, &>ol {
padding-left: $main-padding + 15px;
}
li {
} }
&>h1, &>h2, &>div { // the div is the tocify hidden div for placeholding stuff &>h1, &>h2, &>div { // the div is the tocify hidden div for placeholding stuff
clear:both; clear:both;
} }
th,td { table {
text-align: left; th,td {
padding: 10px; text-align: left;
border-bottom: 1px solid $line-color; vertical-align: top;
vertical-align: top; line-height: 1.6;
line-height: 1.6; }
}
th {
padding: 5px 10px;
border-bottom: 1px solid #666;
vertical-align: bottom;
// @include background-image(linear-gradient(bottom, darken($main-bg, 3%), $main-bg));
@include embedded-text;
}
td {
padding: 10px;
}
th { tr:nth-child(even) {
padding-top: 0; // so that there isn't an awk space above tables background-color: lighten($main-bg,4.2%);
}
} }
h1#bigtitle { h1#bigtitle {
margin-top: 0.5em; margin-top: 0;
margin-bottom: 0;
font-size: 35px; font-size: 35px;
text-align: center;
} }
h1 { h1 {
font-size: 30px; font-size: 30px;
margin-top: 1.5em; padding-top: 0.5em;
margin-bottom: 0.5em; padding-bottom: 0.5em;
margin-top: 2em;
margin-bottom: 0;
border-top: 1px solid #bbb;
@include background-image(linear-gradient(top, #fff, #f9f9f9));
@include embedded-text;
} }
h2 { h2 {
font-size: 20px; font-size: 20px;
margin-top: 2em; margin-top: 2em;
margin-bottom: 1em; margin-bottom: 0;
padding-bottom: 1.2em;
}
h2, h1 + p {
border-top: 1px solid #ccc;
padding-top: 1.2em;
@include background-image(linear-gradient(top, rgba(#fff,0.75), rgba(#fff, 0)));
@include embedded-text;
}
h1 + h2, h1 + div + h2 {
margin-top: 0;
} }
h3 { h3 {
font-size: 15px; font-size: 12px;
margin-top: 1.2em; margin-top: 2.5em;
margin-bottom: 1.2em; margin-bottom: 0.8em;
text-transform: uppercase;
@include embedded-text;
} }
h1,h2,h3 { h1,h2,h3 {
font-weight: bold; font-weight: bold;
} }
p { p, li {
line-height: 1.6; line-height: 1.6;
margin-top: 0;
} }
pre, blockquote { pre, blockquote {
float:right; float:right;
width: 50%; width: $examples-width;
clear:right; clear:right;
@include box-sizing(border-box); @include box-sizing(border-box);
padding: 0 $main-padding; padding: 0 $main-padding;
margin: 0; margin: 0;
color: #fff; color: #fff;
@include text-shadow(0px 1px 2px rgba(0,0,0,0.4));
} }
pre { pre {
...@@ -159,6 +206,7 @@ html, body { ...@@ -159,6 +206,7 @@ html, body {
@include fancy-inset-border-top; @include fancy-inset-border-top;
@include fancy-inset-border-bottom; @include fancy-inset-border-bottom;
} }
} }
/* The Table of Contents container element */ /* The Table of Contents container element */
...@@ -171,6 +219,12 @@ html, body { ...@@ -171,6 +219,12 @@ html, body {
width: $nav-width; width: $nav-width;
background-color: $nav-bg; background-color: $nav-bg;
font-size: 13px; font-size: 13px;
font-weight: bold;
&>img {
display: block;
margin-bottom: $logo-margin;
}
} }
.tocify-item>a { .tocify-item>a {
...@@ -179,7 +233,7 @@ html, body { ...@@ -179,7 +233,7 @@ html, body {
overflow-x:hidden; overflow-x:hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@include text-shadow(0px -1px 1px rgba(0,0,0,0.3)); @include text-shadow(0px -1px 1px rgba(0,0,0,0.5));
} }
/* The Table of Contents is composed of multiple nested unordered lists. These styles remove the default styling of an unordered list because it is ugly. */ /* The Table of Contents is composed of multiple nested unordered lists. These styles remove the default styling of an unordered list because it is ugly. */
...@@ -199,8 +253,8 @@ html, body { ...@@ -199,8 +253,8 @@ html, body {
} }
.tocify .tocify-focus { .tocify .tocify-focus {
background-color: #1d82c6;
@include box-shadow(0px 1px 0px #000); @include box-shadow(0px 1px 0px #000);
@include background-image(linear-gradient(top, #1d82c6, #1864ab));
} }
/* Top level header elements */ /* Top level header elements */
...@@ -211,6 +265,8 @@ html, body { ...@@ -211,6 +265,8 @@ html, body {
.tocify-subheader { .tocify-subheader {
display: none; display: none;
background-color: $nav-subitem-bg; background-color: $nav-subitem-bg;
font-weight: 500;
@include background-image(linear-gradient(top, darken($nav-subitem-bg,2%),$nav-subitem-bg 10%, $nav-subitem-bg 90%, darken($nav-subitem-bg,2%)));
.tocify-item>a { .tocify-item>a {
padding-left: $nav-padding + $nav-indent; padding-left: $nav-padding + $nav-indent;
font-size: 12px; font-size: 12px;
......
source/stylesheets/variables.scss
View file @ bc79a655
...@@ -11,6 +11,7 @@ $code-bg: #262626; ...@@ -11,6 +11,7 @@ $code-bg: #262626;
$nav-subitem-bg: #262626; $nav-subitem-bg: #262626;
$lang-select-bg: #1d82c6; $lang-select-bg: #1d82c6;
$lang-select-hover-bg: #175fa1; $lang-select-hover-bg: #175fa1;
$main-bg: #eaf2f6;
// border colors // border colors
$lang-select-border: #113a6f; $lang-select-border: #113a6f;
...@@ -22,6 +23,8 @@ $lang-select-border: #113a6f; ...@@ -22,6 +23,8 @@ $lang-select-border: #113a6f;
// $nav-subitem-bg: #262626; // $nav-subitem-bg: #262626;
$lang-select-text: #fff; $lang-select-text: #fff;
$examples-width: 40%;
// indentation amount for sub-items // indentation amount for sub-items
$nav-indent: 10px; $nav-indent: 10px;
...@@ -34,6 +37,9 @@ $main-text-color: #333; ...@@ -34,6 +37,9 @@ $main-text-color: #333;
// currently just the color of table borders // currently just the color of table borders
$line-color: #cfcfcf; $line-color: #cfcfcf;
// margin between nav items and logo
$logo-margin: 0px;
// these are for the code blocks on the right, and the // these are for the code blocks on the right, and the
// subheader navbar thing that swoops in // subheader navbar thing that swoops in
...@@ -45,3 +51,7 @@ $line-color: #cfcfcf; ...@@ -45,3 +51,7 @@ $line-color: #cfcfcf;
border-bottom: 1px solid #404040; border-bottom: 1px solid #404040;
box-shadow: none; box-shadow: none;
} }
@mixin embedded-text($opacity: 1) {
@include text-shadow(0px 1px 0px rgba(#fff,$opacity));
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment