Skip to content

N
node-slate
Commit e669a0d4 authored by Christopher Rogers's avatar Christopher Rogers
Browse files
Options

Adds rudimentary search support 

Signed-off-by: 's avatarChristopher Rogers <chrissrogers@gmail.com>
parent d1b98be1
Hide whitespace changes
Inline Side-by-side
Showing with 166 additions and 162 deletions
source/javascripts/app/search.js
View file @ e669a0d4
(function (global) { (function (global) {
window.topic = topic;
var index = lunr(function () { var index = lunr(function () {
this.ref('id');
this.field('title', { boost: 10 }); this.field('title', { boost: 10 });
this.field('tags', { boost: 100 }); // this.field('tags', { boost: 100 });
this.field('body'); this.field('body');
this.ref('id');
}); });
$(bindSearch); $(populate);
$(bind);
function populate () {
$('h1').each(function () {
var title = $(this);
var body = title.nextUntil('h1');
var wrapper = $('<section id="section-' + title.prop('id') + '"></section>');
function bindSearch () { title.after(wrapper.append(body));
wrapper.prepend(title);
index.add({
id: title.prop('id'),
title: title.text(),
// tags: tags,
body: body.text()
});
});
}
function bind () {
$('#search').on('keyup', function () { $('#search').on('keyup', function () {
if (this.value) { if (this.value) {
var items = index.search(this.value); var items = index.search(this.value);
$('article, nav li').hide(); $('section, #toc .tocify-item').hide();
items.forEach(function (item) { items.forEach(function (item) {
$('#' + item.ref + ', #' + item.ref + '-nav').show(); $('#section-' + item.ref + ', .tocify-item[data-unique=' + item.ref).show();
}); });
} else { } else {
$('article, nav li').show(); $('section, #toc .tocify-item').show();
} }
}); });
$('form').on('submit', function (event) {
event.preventDefault();
});
}
function topic (title, tags, handle) {
index.add({
id: handle,
title: title,
tags: tags,
body: $('#' + handle + '-body').text()
});
} }
})(window); })(window);
source/stylesheets/screen.css.scss
View file @ e669a0d4
...@@ -213,178 +213,178 @@ html, body { ...@@ -213,178 +213,178 @@ html, body {
position: relative; position: relative;
z-index: 30; z-index: 30;
section {
&>h1, &>h2, &>h3, &>p, &>table, &>ul, &>ol, &>aside, &>dl {
margin-right: $examples-width;
padding: 0 $main-padding;
@include box-sizing(border-box);
display: block;
@include text-shadow($main-embossed-text-shadow);
}
&>h1, &>h2, &>h3, &>p, &>table, &>ul, &>ol, &>aside, &>dl { &>ul, &>ol {
margin-right: $examples-width; padding-left: $main-padding + 15px;
padding: 0 $main-padding; }
@include box-sizing(border-box);
display: block;
@include text-shadow($main-embossed-text-shadow);
}
&>ul, &>ol { // the div is the tocify hidden div for placeholding stuff
padding-left: $main-padding + 15px; &>h1, &>h2, &>div {
} clear:both;
}
// the div is the tocify hidden div for placeholding stuff h1 {
&>h1, &>h2, &>div { @extend %header-font;
clear:both; font-size: 30px;
} padding-top: 0.5em;
padding-bottom: 0.5em;
border-bottom: 1px solid #ccc;
margin-top: 2em;
margin-bottom: $h1-margin-bottom;
border-top: 1px solid #ddd;
@include background-image(
linear-gradient(top, #fff, #f9f9f9)
);
}
h1 { // The header at the very top of the page
@extend %header-font; // shouldn't have top margin.
font-size: 30px; // (the div is because of tocify)
padding-top: 0.5em; h1:first-child, div:first-child + h1 {
padding-bottom: 0.5em; margin-top: 0;
border-bottom: 1px solid #ccc; }
margin-top: 2em;
margin-bottom: $h1-margin-bottom;
border-top: 1px solid #ddd;
@include background-image(
linear-gradient(top, #fff, #f9f9f9)
);
}
// The header at the very top of the page h2 {
// shouldn't have top margin. @extend %header-font;
// (the div is because of tocify) font-size: 20px;
h1:first-child, div:first-child + h1 { margin-top: 4em;
margin-top: 0; margin-bottom: 0;
} border-top: 1px solid #ccc;
padding-top: 1.2em;
padding-bottom: 1.2em;
@include background-image(
linear-gradient(top, rgba(#fff,0.4), rgba(#fff, 0))
);
}
h2 { // h2s right after h1s should bump right up
@extend %header-font; // against the h1s.
font-size: 20px; h1 + h2, h1 + div + h2 {
margin-top: 4em; margin-top: $h1-margin-bottom * -1;
margin-bottom: 0; border-top: none;
border-top: 1px solid #ccc; }
padding-top: 1.2em;
padding-bottom: 1.2em;
@include background-image(
linear-gradient(top, rgba(#fff,0.4), rgba(#fff, 0))
);
}
// h2s right after h1s should bump right up h3 {
// against the h1s. @extend %header-font;
h1 + h2, h1 + div + h2 { font-size: 12px;
margin-top: $h1-margin-bottom * -1; margin-top: 2.5em;
border-top: none; margin-bottom: 0.8em;
} text-transform: uppercase;
}
h3 { hr {
@extend %header-font; margin: 2em 0;
font-size: 12px; border-top: 2px solid $examples-bg;
margin-top: 2.5em; border-bottom: 2px solid $main-bg;
margin-bottom: 0.8em; }
text-transform: uppercase;
}
hr { table {
margin: 2em 0; margin-bottom: 1em;
border-top: 2px solid $examples-bg; overflow: auto;
border-bottom: 2px solid $main-bg; th,td {
} text-align: left;
vertical-align: top;
line-height: 1.6;
}
table { th {
margin-bottom: 1em; padding: 5px 10px;
overflow: auto; border-bottom: 1px solid #ccc;
th,td { vertical-align: bottom;
text-align: left; }
vertical-align: top;
line-height: 1.6;
}
th { td {
padding: 5px 10px; padding: 10px;
border-bottom: 1px solid #ccc; }
vertical-align: bottom;
tr:last-child {
border-bottom: 1px solid #ccc;
}
tr:nth-child(odd)>td {
background-color: lighten($main-bg,4.2%);
}
tr:nth-child(even)>td {
background-color: lighten($main-bg,2.4%);
}
} }
td { dt {
padding: 10px; font-weight: bold;
} }
tr:last-child { dd {
border-bottom: 1px solid #ccc; margin-left: 15px;
} }
tr:nth-child(odd)>td { p, li, dt, dd {
background-color: lighten($main-bg,4.2%); line-height: 1.6;
margin-top: 0;
} }
tr:nth-child(even)>td { img {
background-color: lighten($main-bg,2.4%); max-width: 100%;
} }
}
dt { code {
font-weight: bold; background-color: rgba(0,0,0,0.05);
} padding: 3px;
border-radius: 3px;
@extend %break-words;
@extend %code-font;
}
dd { aside {
margin-left: 15px; padding-top: 1em;
} padding-bottom: 1em;
text-shadow: 0 1px 0 lighten($aside-notice-bg, 15%);
margin-top: 1.5em;
margin-bottom: 1.5em;
background: $aside-notice-bg;
line-height: 1.6;
p, li, dt, dd { &.warning {
line-height: 1.6; background-color: $aside-warning-bg;
margin-top: 0; text-shadow: 0 1px 0 lighten($aside-warning-bg, 15%);
} }
img { &.success {
max-width: 100%; background-color: $aside-success-bg;
} text-shadow: 0 1px 0 lighten($aside-success-bg, 15%);
}
}
code {
background-color: rgba(0,0,0,0.05);
padding: 3px;
border-radius: 3px;
@extend %break-words;
@extend %code-font;
}
aside { aside.warning {
padding-top: 1em;
padding-bottom: 1em;
text-shadow: 0 1px 0 lighten($aside-notice-bg, 15%);
margin-top: 1.5em;
margin-bottom: 1.5em;
background: $aside-notice-bg;
line-height: 1.6;
&.warning {
background-color: $aside-warning-bg;
text-shadow: 0 1px 0 lighten($aside-warning-bg, 15%);
} }
&.success { aside:before {
background-color: $aside-success-bg; vertical-align: middle;
text-shadow: 0 1px 0 lighten($aside-success-bg, 15%); padding-right: 0.5em;
font-size: 14px;
} }
}
aside.warning {
}
aside:before {
vertical-align: middle;
padding-right: 0.5em;
font-size: 14px;
}
aside.notice:before { aside.notice:before {
@extend %icon-info-sign; @extend %icon-info-sign;
} }
aside.warning:before { aside.warning:before {
@extend %icon-exclamation-sign; @extend %icon-exclamation-sign;
} }
aside.success:before { aside.success:before {
@extend %icon-ok-sign; @extend %icon-ok-sign;
}
} }
} }
...@@ -431,4 +431,4 @@ html, body { ...@@ -431,4 +431,4 @@ html, body {
border-bottom: 1px solid #404040; border-bottom: 1px solid #404040;
} }
} }
} }
\ 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