mirror of
https://github.com/danbulant/api_docs
synced 2026-06-19 22:31:47 +00:00
Adds rudimentary search support
Signed-off-by: Christopher Rogers <chrissrogers@gmail.com>
This commit is contained in:
Christopher Rogers
parent
d1b98be182
commit
e669a0d4ac
2 changed files with 178 additions and 174 deletions
|
|
@ -1,40 +1,44 @@
|
||||||
(function (global) {
|
(function (global) {
|
||||||
|
|
||||||
window.topic = topic;
|
|
||||||
|
|
||||||
var index = lunr(function () {
|
var index = lunr(function () {
|
||||||
this.field('title', { boost: 10 });
|
|
||||||
this.field('tags', { boost: 100 });
|
|
||||||
this.field('body');
|
|
||||||
this.ref('id');
|
this.ref('id');
|
||||||
|
this.field('title', { boost: 10 });
|
||||||
|
// this.field('tags', { boost: 100 });
|
||||||
|
this.field('body');
|
||||||
});
|
});
|
||||||
|
|
||||||
$(bindSearch);
|
$(populate);
|
||||||
|
$(bind);
|
||||||
|
|
||||||
function bindSearch () {
|
function populate () {
|
||||||
$('#search').on('keyup', function () {
|
$('h1').each(function () {
|
||||||
if (this.value) {
|
var title = $(this);
|
||||||
var items = index.search(this.value);
|
var body = title.nextUntil('h1');
|
||||||
$('article, nav li').hide();
|
var wrapper = $('<section id="section-' + title.prop('id') + '"></section>');
|
||||||
items.forEach(function (item) {
|
|
||||||
$('#' + item.ref + ', #' + item.ref + '-nav').show();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
$('article, nav li').show();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$('form').on('submit', function (event) {
|
title.after(wrapper.append(body));
|
||||||
event.preventDefault();
|
wrapper.prepend(title);
|
||||||
|
|
||||||
|
index.add({
|
||||||
|
id: title.prop('id'),
|
||||||
|
title: title.text(),
|
||||||
|
// tags: tags,
|
||||||
|
body: body.text()
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function topic (title, tags, handle) {
|
function bind () {
|
||||||
index.add({
|
$('#search').on('keyup', function () {
|
||||||
id: handle,
|
if (this.value) {
|
||||||
title: title,
|
var items = index.search(this.value);
|
||||||
tags: tags,
|
$('section, #toc .tocify-item').hide();
|
||||||
body: $('#' + handle + '-body').text()
|
items.forEach(function (item) {
|
||||||
|
$('#section-' + item.ref + ', .tocify-item[data-unique=' + item.ref).show();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
$('section, #toc .tocify-item').show();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
|
td {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
dt {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p, li, dt, dd {
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
th {
|
img {
|
||||||
padding: 5px 10px;
|
max-width: 100%;
|
||||||
border-bottom: 1px solid #ccc;
|
|
||||||
vertical-align: bottom;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
td {
|
code {
|
||||||
padding: 10px;
|
background-color: rgba(0,0,0,0.05);
|
||||||
|
padding: 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
@extend %break-words;
|
||||||
|
@extend %code-font;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:last-child {
|
aside {
|
||||||
border-bottom: 1px solid #ccc;
|
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 {
|
||||||
|
background-color: $aside-success-bg;
|
||||||
|
text-shadow: 0 1px 0 lighten($aside-success-bg, 15%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:nth-child(odd)>td {
|
|
||||||
background-color: lighten($main-bg,4.2%);
|
aside.warning {
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:nth-child(even)>td {
|
aside:before {
|
||||||
background-color: lighten($main-bg,2.4%);
|
vertical-align: middle;
|
||||||
}
|
padding-right: 0.5em;
|
||||||
}
|
font-size: 14px;
|
||||||
|
|
||||||
dt {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
dd {
|
|
||||||
margin-left: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p, li, dt, dd {
|
|
||||||
line-height: 1.6;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
background-color: rgba(0,0,0,0.05);
|
|
||||||
padding: 3px;
|
|
||||||
border-radius: 3px;
|
|
||||||
@extend %break-words;
|
|
||||||
@extend %code-font;
|
|
||||||
}
|
|
||||||
|
|
||||||
aside {
|
|
||||||
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.notice:before {
|
||||||
background-color: $aside-success-bg;
|
@extend %icon-info-sign;
|
||||||
text-shadow: 0 1px 0 lighten($aside-success-bg, 15%);
|
}
|
||||||
|
|
||||||
|
aside.warning:before {
|
||||||
|
@extend %icon-exclamation-sign;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside.success:before {
|
||||||
|
@extend %icon-ok-sign;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
aside.warning {
|
|
||||||
}
|
|
||||||
|
|
||||||
aside:before {
|
|
||||||
vertical-align: middle;
|
|
||||||
padding-right: 0.5em;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
aside.notice:before {
|
|
||||||
@extend %icon-info-sign;
|
|
||||||
}
|
|
||||||
|
|
||||||
aside.warning:before {
|
|
||||||
@extend %icon-exclamation-sign;
|
|
||||||
}
|
|
||||||
|
|
||||||
aside.success:before {
|
|
||||||
@extend %icon-ok-sign;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -431,4 +431,4 @@ html, body {
|
||||||
border-bottom: 1px solid #404040;
|
border-bottom: 1px solid #404040;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue