nikon/docsearch
1
0
Fork 0
Code Activity Actions

Merge pull request #24 from algolia/feature/home-page-design

Browse source 
Feature/home page design
This commit is contained in:
Tim Carry 2015-12-21 12:34:06 +01:00
commit 51c07de862
36 changed files with 580 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
README.md
View file

@ -19,6 +19,8 @@ We've created the fastest, easiest way to search within documentation. Check out
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
<!-- START documentation.md -->
## Introduction
We're scratching our own itch here. As developers, we spend a lot of time reading documentation, and it isn’t always easy to find the information we need.
@ -54,6 +56,7 @@ To customize the look & feel of the dropdown menu, you can either:
* edit the color [variables](https://github.com/algolia/docsearch/blob/master/src/styles/_variables.scss) and rebuild this project CSS,
* or override the colors like we did in [dev/docsearch-styling.css](https://github.com/algolia/docsearch/blob/master/dev/docsearch-styling.css).
<!-- END documentation.md -->
## Development workflow
### Local example

BIN
docs/.DS_Store vendored Normal file
View file

Binary file not shown.

2
docs/Gemfile
View file

@ -4,7 +4,7 @@
source 'https://rubygems.org'
group :development, :test do
gem 'jekyll'
gem 'jekyll', '< 3'
gem 'haml'
gem 'rouge'
gem 'sass'

22
docs/Gemfile.lock
View file

@ -1,20 +1,23 @@
GEM
remote: https://rubygems.org/
specs:
addressable (2.3.8)
blankslate (2.1.2.4)
classifier-reborn (2.0.3)
classifier-reborn (2.0.4)
fast-stemmer (~> 1.0)
coderay (1.1.0)
coffee-script (2.4.1)
coffee-script-source
execjs
coffee-script-source (1.9.1.1)
coffee-script-source (1.10.0)
colorator (0.1)
em-websocket (0.5.1)
eventmachine (>= 0.12.9)
http_parser.rb (~> 0.6.0)
eventmachine (1.0.8)
execjs (2.6.0)
faraday (0.9.2)
multipart-post (>= 1.2, < 3)
fast-stemmer (1.0.2)
ffi (1.9.10)
formatador (0.2.5)
@ -62,7 +65,8 @@ GEM
coffee-script (~> 2.2)
jekyll-contentblocks (1.0.1)
jekyll
jekyll-gist (1.3.4)
jekyll-gist (1.4.0)
octokit (~> 4.2)
jekyll-paginate (1.1.0)
jekyll-sass-converter (1.3.0)
sass (~> 3.2)
@ -70,7 +74,7 @@ GEM
listen (~> 3.0)
kramdown (1.9.0)
liquid (2.6.3)
listen (3.0.3)
listen (3.0.5)
rb-fsevent (>= 0.9.3)
rb-inotify (>= 0.9)
lumberjack (1.0.9)
@ -78,12 +82,15 @@ GEM
method_source (0.8.2)
mini_portile (0.6.2)
multi_json (1.11.2)
multipart-post (2.0.0)
nenv (0.2.0)
nokogiri (1.6.6.2)
mini_portile (~> 0.6.0)
notiffany (0.0.8)
nenv (~> 0.1)
shellany (~> 0.0)
octokit (4.2.0)
sawyer (~> 0.6.0, >= 0.5.3)
parslet (1.5.0)
blankslate (~> 2.0)
posix-spawn (0.3.11)
@ -100,7 +107,10 @@ GEM
redcarpet (3.3.3)
rouge (1.7.7)
safe_yaml (1.0.4)
sass (3.4.19)
sass (3.4.20)
sawyer (0.6.0)
addressable (~> 2.3.5)
faraday (~> 0.8, < 0.10)
shellany (0.0.1)
slop (3.6.0)
thor (0.19.1)
@ -118,7 +128,7 @@ DEPENDENCIES
guard-jekyll-plus
guard-livereload
haml
jekyll
jekyll (< 3)
jekyll-contentblocks
nokogiri
rouge

21
docs/_config.yml
View file

@ -8,11 +8,28 @@ host: 0.0.0.0
# Navigation
navigation:
- text: About
url: /about/
-
text: Documentation
url: /documentation/
-
text: About
url: /about/
# Build settings
markdown: kramdown
kramdown:
input: GFM
hard_wrap: false
auto_ids: true
footnote_nr: 1
entity_output: as_char
smart_quotes: lsquo,rsquo,ldquo,rdquo
enable_coderay: true
coderay_wrap: div
coderay_line_numbers: nil
coderay_css: style
# Assets
sass:

14
docs/_includes/header.html
View file

@ -1,13 +1,14 @@
<header class="site-header">
<nav class="navbar navbar-default navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#instant-search-nav">
Menu&nbsp;&nbsp;<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="{{ site.baseurl }}/">{{ site.title }}</a>
<a id="logo" href="{{ site.baseurl }}/">
<img src="{{site.baseurl}}/img/algolia-logo.svg" alt="Algolia" />
</a>
presents
</div>
<div id="instant-search-nav" class="navbar-collapse collapse">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
{% assign url = page.url %}
{% for link in site.navigation %}
@ -15,6 +16,9 @@
<a href="{{ site.baseurl }}{{ link.url }}" title="{{ link.title }}">{{ link.text }}</a>
</li>
{% endfor %}
<li>
<a class="navbar-github-link" href="//github.com/algolia/docsearch"><i class="fa fa-github"></i></a>
</li>
</ul>
</div>
</div>

28
docs/_includes/newsletter-mc.html
View file

@ -2,21 +2,21 @@
<div id="mc_embed_signup">
<form action="//algolia.us3.list-manage.com/subscribe/post?u=f7b8acc6ec97794a08484ca9b&amp;id=285b80e148" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" novalidate>
<div id="mc_embed_signup_scroll">
<h3>Signup for our newsletter</h3>
<div class="spacer20"></div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon1"><i class="fa fa-envelope-o"></i></span>
<input type="email" value="" name="EMAIL" class="form-control" id="mce-EMAIL" placeholder="Email Address">
<span class="input-group-btn">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary">
</span>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_f7b8acc6ec97794a08484ca9b_285b80e148" tabindex="-1" value=""></div>
<h3>Sign up for our newsletter</h3>
<div class="spacer20"></div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon1"><i class="fa fa-envelope-o"></i></span>
<input type="email" value="" name="EMAIL" class="form-control" id="mce-EMAIL" placeholder="Email Address">
<span class="input-group-btn">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary">
</span>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_f7b8acc6ec97794a08484ca9b_285b80e148" tabindex="-1" value=""></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->

2
docs/_layouts/default.html
View file

@ -22,6 +22,8 @@
{%if page.noFooter == null %}
{% include footer.html %}
{% endif %}
<script src="//cdn.jsdelivr.net/jquery/2.1/jquery.min.js"></script>
<script src="{{ "/js/bootstrap.min.js" | prepend: site.baseurl }}"></script>
<script src="//cdn.jsdelivr.net/autocomplete.js/0/autocomplete.jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>

2
docs/css/_base.scss
View file

@ -1,5 +1,5 @@
$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-size-base: 14px;
$font-size-base: 16px;
$headings-font-family: "Raleway";
$headings-font-weight: 300;

308
docs/css/_home.scss
View file

@ -1,39 +1,305 @@
/* COLORS
// -------------------------
#46AEDA Algolia blue
#FF2E6C Radical Red
#091724 Black Pearl
#C7C4C4 Gray text
*/
/* GENERAL
// ------------------------- */
html, body {
position: relative;
@include size(100%,100%);
background-attachment: fixed; }
h2 {
font-size: 1.8em;
font-weight: normal;
letter-spacing: 1px;
margin-bottom: 1em;
width: 100%;
height: 100%;
background-attachment: fixed;
font-family: "Raleway", "Open Sans", Helvetica, Arial, sans-serif;
}
.showcase--image {
max-width: 200px;
/* HEADER
// ------------------------- */
header.site-header {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
background: linear-gradient(to right, rgba(10, 23, 36, 0.8) -50%, rgba(23, 44, 79, 0.5) 100%);
transition: background 2s ease;
border-bottom: 1px solid #232E3A;
}
header.site-header nav.navbar {
margin-bottom: 0;
background-color: #0B1724;
border-radius: 0;
border: none;
}
header.site-header nav.navbar .navbar-collapse.in {
background-color: #0B1724 !important;
animation: fadeInUp .2s ease-in-out;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 20%;
font-size: 1.2em;
}
header.site-header nav.navbar .navbar-collapse.in li {
padding-bottom: 1em;
}
header.site-header nav.navbar #logo img {
height: 32px;
margin-right: 12px;
}
header.site-header nav.navbar .navbar-header {
position: relative;
z-index: 2;
height: 50px;
font-size: 16px;
color: #FF2E6C;
line-height: 50px;
}
header.site-header nav.navbar .navbar-toggle {
background-color: #1d96c7;
border: solid 1px #1d96c7;
color: white;
}
header.site-header nav.navbar .navbar-toggle.collapsed {
background-color: transparent;
border: solid 1px rgba(255, 255, 255, 0.4);
color: white;
}
header.site-header nav.navbar .navbar-nav > li > a {
padding-bottom: 0;
}
header.site-header nav.navbar .navbar-nav > .active > a {
color: #1D96C7 !important;
background-color: transparent;
}
header.site-header nav.navbar .navbar-nav > li > a.navbar-github-link {
font-size: 32px;
padding-top: 10px;
}
header.site-header nav.navbar .navbar-nav > li > a.navbar-github-link:hover {
color: #46AEDA;
text-decoration: none;
}
.jumbotron {
/* JUMBOTRON
// ------------------------- */
.main-content .jumbotron {
padding-top: 60px;
height: 700px;
background: #091724 url(../img/header-bg.png) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: 0;
}
.jumbotron .jumbotron-header {
text-align: center;
color: #FFF;
}
.jumbotron .jumbotron-header h1 {
font-size: 60px;
font-weight: 500;
font-family: "Helvetica Neue", "Raleway", "Open Sans", Helvetica, Arial, sans-serif;
}
.jumbotron .jumbotron-header .big {
font-size: 90px;
}
.jumbotron .jumbotron-header .blue {
color: #46AEDA;
}
.jumbotron .jumbotron-left-column {
display: none;
padding-top: 100px;
float: left;
width: 400px;
color: #FFF;
margin-left: 120px;
}
.jumbotron .jumbotron-left-column p {
font-size: 22px;
}
@media (min-width: 1200px) {
.jumbotron .jumbotron-left-column {
display: block;
}
}
/* JOIN FORM
// ------------------------- */
#join-form {
background: white;
background: #242E3A;
display: block;
width: 400px;
padding: 5px 10px;
margin: 0 auto;
border: 2px solid #ccc;
border-radius: 6px;
color: #FFF;
max-width: 90%;
h3 {
text-align: center;
padding-bottom: 20px;
border-bottom: 1px solid #3A434E;
}
label {
display: block;
font-weight: normal;
}
p {
margin-top: 5px;
font-size: 13px;
color: #C7C4C4;
font-style: italic;
}
}
@media (min-width: $screen-lg) {
.jumbotron {
height: 400px;
}
@media (min-width: 1200px) {
#join-form {
position: absolute;
top: 60px;
right: -20px;
padding: 10px;
top: 200px;
right: 120px;
padding: 10px 40px 30px;
}
}
/* PAGE SECTIONS
// ------------------------- */
.page-section {
padding-top: 100px;
padding-bottom: 60px;
font-size: 16px;
line-height: 1.8;
color: #091724;
}
.page-section-dark {
background-color: #091724;
color: #C7C4C4;
}
h2.page-section-title {
font-size: 28px;
text-transform: uppercase;
font-weight: 600;
margin-top: 0;
margin-bottom: 30px;
text-align: center;
}
.page-section-dark h2.page-section-title{
color: #FFF;
}
h2.page-section-title:after {
display: block;
content: ' ';
height: 10px;
border-bottom: 3px solid #FF2E6C;
margin: 4px auto;
width: 60px;
}
#section_why {
padding-left: 20px;
padding-right: 20px;
font-size: 20px;
}
@media (min-width: 600px) {
#section_why {
padding-left: 120px;
padding-right: 120px;
}
}
#section_examples {
font-size: 18px;
text-align: center;
padding-left: 20px;
padding-right: 20px;
}
#section_examples a {
color: #C7C4C4;
}
#section_examples a:hover {
color: #46AEDA;
text-decoration: none;
}
#section_examples .showcase {
margin-top: 40px;
text-align: center;
}
@media (min-width: 600px) {
#section_examples {
padding-left: 0px;
padding-right: 0px;
}
}
#section_examples .showcase img.logo {
display: inline-block;;
height: 60px;
margin-bottom: 20px;
}
#section_examples .showcase img.example {
width: 100%;
}
#section_how h3 .how-it-works-number {
float: left;
line-height: 1;
color: #46AEDA;
font-size: 70px;
font-weight: bold;
font-family: "Helvetica Neue";
position: relative;
top: -13px;
margin-right: 7px;
}
#section_how p {
clear: both;
}
#section_how {
padding-left: 20px;
padding-right: 20px;
}
@media (min-width: 600px) {
#section_how p {
padding-left: 0px;
padding-right: 0px;
}
}
#section_get-started {
padding-left: 20px;
padding-right: 20px;
font-size: 20px;
}
@media (min-width: 600px) {
#section_get-started {
padding-left: 120px;
padding-right: 120px;
}
}
/* FOOTER
// ------------------------- */
footer.site-footer {
padding-top: 2em;
margin-top: 0;
border-top: 1px solid #eeeeee;
background-color: white;
text-align: center;
}
footer.site-footer .fa.fa-heart {
color: #e61870;
}
footer.site-footer .input-group-addon {
background-color: transparent;
}

11
docs/css/_page.scss
View file

@ -1,4 +1,11 @@
.page-content {
font-size: 1.1em;
line-height: 1.5em; }
line-height: 1.5em;
}
pre {
font-size: .8em;
}
.CodeRay .code pre * {
background: transparent !important;
}

41
docs/documentation.md Normal file
View file

@ -0,0 +1,41 @@
---
layout: page
title: Documentation
permalink: /documentation/
---
## Introduction
We're scratching our own itch here. As developers, we spend a lot of time reading documentation, and it isn’t always easy to find the information we need.
Not blaming anyone here. Building a good search for a documentation is a complex challenge. We happen to have a lot of experience doing that, and we want to share it with the world. For free.
Just submit the form on the [community.algolia.com/docsearch/](https://community.algolia.com/docsearch/) website and we'll get back to you with what you need to integrate your new search into your website.
1. We'll crawl your documentation pages,
2. We'll configure your search experience,
3. and you'll need to add the a small JS/CSS code snippet to your website.
## Setup
Once we've crawled your documentation website we'll send you the credentials you need to add the following code snippet to your website:
```html
<link rel="stylesheet" href="//cdn.jsdelivr.net/docsearch.js/0/docsearch.min.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/docsearch.js/0/docsearch.min.js"></script>
<script type="text/javascript">
docSearch({
apiKey: '<API_KEY>',
indexName: '<INDEX_NAME>',
inputSelector: '<YOUR_INPUT_DOM_SELECTOR>'
});
</script>
```
## Customization
To customize the look & feel of the dropdown menu, you can either:
* edit the color [variables](https://github.com/algolia/docsearch/blob/master/src/styles/_variables.scss) and rebuild this project CSS,
* or override the colors like we did in [dev/docsearch-styling.css](https://github.com/algolia/docsearch/blob/master/dev/docsearch-styling.css).

BIN
docs/img/.DS_Store vendored Normal file
View file

Binary file not shown.

1
docs/img/algolia-logo.svg Normal file
View file

@ -0,0 +1 @@
<svg width="50" height="16" viewBox="0 0 50 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>algolia-logo</title><desc>Created with Sketch.</desc><defs><path d="M30.046 6.24l-.658 2.366 2.118-1.178c-.308-.572-.832-1.005-1.46-1.187zM24.85 8.656c0 2.533 2.023 4.586 4.52 4.586 2.496 0 4.52-2.052 4.52-4.585S31.866 4.07 29.37 4.07c-2.497 0-4.52 2.054-4.52 4.587zm4.52-3.277c1.78 0 3.228 1.47 3.228 3.275 0 1.806-1.45 3.276-3.23 3.276-1.778 0-3.227-1.47-3.227-3.274 0-1.807 1.45-3.277 3.23-3.277zm1.56-1.88c0-.018.004-.035.004-.054v-.413c0-.457-.363-.827-.81-.827h-1.42c-.45 0-.812.37-.812.827v.406c.452-.13.928-.2 1.42-.2.564 0 1.107.09 1.617.26zm-4.957.81c-.317-.324-.83-.324-1.148 0l-.143.145c-.317.323-.317.847 0 1.17l.153.155c.325-.53.74-1 1.22-1.385l-.082-.084z" id="a"/></defs><g fill="none" fill-rule="evenodd"><g transform="translate(-432 -160) translate(432 160)"><use fill="#00B7E5" xlink:href="#a"/><use xlink:href="#a"/></g><path d="M8.826 12.138c-.185-.478-.36-.948-.522-1.41-.163-.46-.332-.93-.506-1.41H2.676l-1.028 2.82H0c.435-1.168.843-2.248 1.224-3.24.38-.993.752-1.935 1.117-2.827.367-.89.73-1.74 1.088-2.552.36-.812.734-1.616 1.126-2.413h1.452c.39.797.767 1.6 1.125 2.413.36.812.72 1.663 1.086 2.555.364.893.736 1.835 1.117 2.828.38.993.788 2.073 1.224 3.24h-1.73zM7.342 8.046c-.35-.924-.694-1.818-1.036-2.683-.343-.865-.7-1.696-1.07-2.492-.38.8-.74 1.63-1.084 2.495-.342.865-.683 1.76-1.02 2.683h4.21zm6.89 4.644c-.93-.022-1.59-.22-1.98-.598-.39-.376-.583-.963-.583-1.76V.26L13.18 0v10.09c0 .248.02.453.063.614.044.16.114.29.21.388.1.096.23.17.392.217.162.046.362.086.6.12l-.21 1.26M21.834 12.123c-.13.086-.38.195-.75.33-.37.134-.803.2-1.298.2-.505 0-.98-.08-1.426-.24-.446-.162-.836-.41-1.17-.75-.332-.337-.595-.758-.79-1.262-.192-.502-.29-1.102-.29-1.8 0-.61.092-1.172.275-1.682.183-.51.45-.95.798-1.32.35-.37.776-.66 1.282-.868.505-.21 1.074-.315 1.708-.315.7 0 1.31.05 1.83.153.52.102.96.196 1.314.28v7.47c0 1.286-.333 2.22-1 2.8-.666.578-1.676.868-3.03.868-.527 0-1.024-.043-1.49-.13-.47-.085-.875-.186-1.218-.304l.27-1.303c.3.116.67.22 1.105.312.435.092.89.138 1.362.138.89 0 1.533-.176 1.925-.53.393-.354.59-.918.59-1.69v-.354zm-.62-6.333c-.254-.037-.595-.057-1.024-.057-.806 0-1.427.264-1.862.79-.436.525-.653 1.222-.653 2.09 0 .484.06.897.185 1.24.124.344.29.628.5.853.21.226.45.392.725.5.274.107.557.16.847.16.397 0 .763-.056 1.096-.17.333-.112.596-.243.79-.393V5.91c-.15-.042-.352-.082-.605-.12zm16.353 6.9c-.932-.022-1.592-.22-1.982-.598-.39-.376-.585-.963-.585-1.76V.26L36.51 0v10.09c0 .248.022.452.066.614.043.16.113.29.21.387.098.1.228.17.39.22.163.05.363.09.602.12l-.21 1.26" fill="#fff"/><path d="M40.555 2.564c-.308 0-.57-.09-.786-.272-.22-.182-.328-.426-.328-.734s.108-.553.325-.734c.214-.182.477-.272.785-.272.31 0 .57.09.788.272.216.18.325.426.325.734s-.11.552-.324.734c-.215.18-.48.272-.786.272zm-.85 1.55h1.72v8.576h-1.72V4.114zm7.003-.252c.614 0 1.133.084 1.555.25.423.167.763.402 1.02.707.26.302.443.664.552 1.083.11.42.165.882.165 1.388v5.605l-.55.094c-.237.04-.503.08-.8.112-.296.035-.617.066-.963.095-.346.03-.69.043-1.03.043-.482 0-.926-.05-1.332-.153s-.757-.267-1.053-.49c-.297-.225-.527-.52-.692-.89-.164-.367-.247-.81-.247-1.327 0-.495.096-.92.29-1.277.19-.356.45-.643.78-.862.33-.215.714-.376 1.153-.48.438-.103.9-.155 1.382-.155.154 0 .313.01.478.026.164.017.32.04.47.07l.386.077c.11.023.186.04.23.052v-.45c0-.264-.027-.525-.082-.784-.055-.26-.154-.49-.297-.69-.142-.2-.337-.362-.584-.483-.25-.12-.57-.18-.966-.18-.505 0-.946.037-1.325.112-.378.074-.66.152-.848.232l-.18-1.327c.197-.094.526-.183.987-.27.46-.086.96-.13 1.497-.13zm.132 8.035c.362 0 .683-.01.963-.026.28-.015.513-.046.7-.092V9.103c-.11-.057-.29-.106-.536-.146-.247-.04-.546-.06-.897-.06-.23 0-.475.017-.732.05-.258.036-.494.108-.708.217-.214.11-.393.258-.535.448-.143.19-.214.44-.214.75 0 .575.178.974.53 1.198.35.225.83.337 1.432.337z" fill="#fff"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
docs/img/header-bg.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
docs/img/showcase/.DS_Store vendored Normal file
View file

Binary file not shown.

BIN
docs/img/showcase/babeljs.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 97 KiB

BIN
docs/img/showcase/bootstrap.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 64 KiB

BIN
docs/img/showcase/eslint.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 58 KiB

BIN
docs/img/showcase/example-babel.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 516 KiB

BIN
docs/img/showcase/example-bootstrap.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 767 KiB

BIN
docs/img/showcase/example-eslint.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 616 KiB

BIN
docs/img/showcase/example-react.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 216 KiB

BIN
docs/img/showcase/example-scala.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 456 KiB

BIN
docs/img/showcase/logo-babel.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.2 KiB

BIN
docs/img/showcase/logo-bootstrap.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
docs/img/showcase/logo-eslint.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
docs/img/showcase/logo-react.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

BIN
docs/img/showcase/logo-scala.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
docs/img/showcase/reactjs.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 82 KiB

144
docs/index.haml
View file

@ -5,39 +5,113 @@ layout: default
.main-content
.jumbotron
.container.pos-rel
%h1 Documentation Search
.jumbotron-header
%h1.jumbotron-title
%span.blue
%span.big> D
OC
= succeed "EARCH" do
%span.big S
%p#top The easiest way to add search to your documentation.
.jumbotron-left-column
%p We’ve created the fastest, easiest way to search within documentation.
%p And best of all? It’s free!
%form#join-form{action: '#', method: 'POST'}
%h3 Want to try it out?
.spacer20
.input-group
%span.input-group-addon
%i.fa.fa-fw.fa-envelope-o
%input.form-control{type: 'email', placeholder: 'you@example.org', name: 'email'}
%p.text-sm We'll crawl the documentation pages of your website and index them using Algolia.
.spacer20
.input-group
%span.input-group-addon
%i.fa.fa-fw.fa-globe
%input.form-control{type: 'text', placeholder: 'https://website.com/doc', name: 'url'}
%p.text-sm We'll send you the code you need to improve the search of your documentation.
.spacer20
.text-center
%button.btn.btn-primary.btn-lg{type: 'submit'}
Help me improve my search
%i.fa.fa-heart
#section_why.page-section
.container
.row
.col-sm-10.col-sm-offset-1
%h2.page-section-title Why DocSearch?
%p We’re scratching our own itch here. As developers, we spend a lot of time reading documentation, and it isn’t always easy to find the information we need.
%p Not blaming anyone here. Building a good search for a documentation is a complex challenge. We happen to have a lot of experience doing that, and we want to share it with the world. For free.
#section_examples.page-section.page-section-dark
.container
.row
.col-sm-10.col-sm-offset-1
%h2.page-section-title DocSearch is live
%p
We’ve integrated DocSearch into several open source projects.
%br Take a look.
.row
.col-sm-4.showcase
%a{:href => "//bootstrap.algolia.com", :target => "_blank"}
%img.img-responsive.logo{:src => "./img/showcase/logo-bootstrap.png"}
%img.img-responsive.example{:src => "./img/showcase/example-bootstrap.gif"}
Bootstrap
.col-sm-4.showcase
%a{:href => "//eslint.org/", :target => "_blank"}
%img.img-responsive.logo{:src => "./img/showcase/logo-eslint.png"}
%img.img-responsive.example{:src => "./img/showcase/example-eslint.gif"}
ESLint
.col-sm-4.showcase
%a{:href => "//docs.scala-lang.org/", :target => "_blank"}
%img.img-responsive.logo{:src => "./img/showcase/logo-scala.png"}
%img.img-responsive.example{:src => "./img/showcase/example-scala.gif"}
Scala
.col-sm-4.showcase
%a{:href => "//babeljs.algolia.com/", :target => "_blank"}
%img.img-responsive.logo{:src => "./img/showcase/logo-babel.png"}
%img.img-responsive.example{:src => "./img/showcase/example-babel.gif"}
Babel.js
.col-sm-4.showcase
%a{:href => "//reactjs.algolia.com/", :target => "_blank"}
%img.img-responsive.logo{:src => "./img/showcase/logo-react.png"}
%img.img-responsive.example{:src => "./img/showcase/example-react.gif"}
React
#section_how.page-section
.container
.row
%h2.page-section-title How it works
.row
.col-sm-4.how-it-works
%h3
%span.how-it-works-number> 1
We crawl your documentation pages
%p We built a website crawler designed to index every section of your documentation.
%p Just send us the URL of your documentation, and we’ll periodically run the crawler so you’re always up-to-date.
.col-sm-4.how-it-works
%h3
%span.how-it-works-number> 2
We configure your search experience
%p You don’t need to configure any settings or even have an Algolia account.
%p We take of all of this automatically to ensure the best documentation search experience.
.col-sm-4.how-it-works
%h3
%span.how-it-works-number> 3
You add the JS/CSS snippets to your website
%p We’ll send you a few lines to code to integrate Algolia autocomplete and power your search.
%p You will receive the same speed, relevance and best-in-class UX as our paying customers.
#section_get-started.page-section.page-section-dark
.container
.row
.col-sm-10.col-sm-offset-1
%h2.page-section-title Get started
%p Add the url of your documentation site and your email to the form at the top of the page. We’ll get back to you with what you need to integrate your new search into your website.
%p Don’t forget, DocSearch is completely free! There’s no need to sign up for Algolia or submit any payment information. Let’s tackle document search together.
.spacer30
%p.text-center
%a.btn.btn-primary.btn-lg{href: '#top'}
Help me improve my search
%i.fa.fa-heart
%p Add relevant, fast and reliable search to your documentation website in minutes.
%iframe#join-form{height: 356, allowTransparency: true, frameborder: 0, scrolling: 'no', src: '//www.formget.com/app/embed/form/H5IR-174988/i?w=328'}
.container
%h1 Showcase
.row.text-center
.col-sm-3.showcase
%img.img-responsive{src: '/img/showcase/eslint.png'}
%p Eslint
.col-sm-3
%img.img-responsive{src: '/img/showcase/babeljs.png'}
%p Babel
.col-sm-3
%img.img-responsive{src: '/img/showcase/bootstrap.png'}
%p Bootstrap
.col-sm-3
%img.img-responsive{src: '/img/showcase/reactjs.png'}
%p React
%h1 Features
.row.text-center
.col-sm-4
%img{src: 'http://placehold.it/200x200'}
%p Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, sit, veritatis tempora ipsum, provident fugiat quas, eum dicta architecto
.col-sm-4
%img{src: 'http://placehold.it/200x200'}
%p Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, sit, veritatis tempora ipsum, provident fugiat quas, eum dicta architecto
.col-sm-4
%img{src: 'http://placehold.it/200x200'}
%p Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, sit, veritatis tempora ipsum, provident fugiat quas, eum dicta architecto
%p Here are some examples of what you could build with docsearch.
{% contentfor site-footer %}
<script src="{{ "/js/home.js" | prepend: site.baseurl }}"></script>
{% endcontentfor %}

24
docs/js/home.js Normal file
View file

@ -0,0 +1,24 @@
(function($) {
$('#join-form').on('submit', function() {
var $button = $(this).find('button');
var $email = $(this).find('input[name="email"]');
var $url = $(this).find('input[name="url"]');
$button.attr('disabled', true);
$.ajax({
url: 'https://www.algolia.com/docsearch/join',
type: 'POST',
data: {
email: $email.val(),
url: $url.val()
}
}).done(function() {
$email.val('');
$url.val('');
$button.text('Thank you!');
}).fail(function() {
$button.attr('disabled', null);
alert('An error occurred, please try again later.');
})
return false;
});
})(jQuery);

1
package.json
View file

@ -11,6 +11,7 @@
"build": "./scripts/build",
"build:css": "./scripts/build-css",
"build:js": "./scripts/build-js",
"build:docs": "./scripts/build-docs",
"release": "./scripts/release",
"release:beta": "./scripts/release-beta",
"lint": "eslint .",

3
scripts/build
View file

@ -7,3 +7,6 @@ rm -rf dist
# JavaScript
npm run build:js
npm run build:css
# Documentation
npm run build:docs

33
scripts/build-docs Executable file
View file

@ -0,0 +1,33 @@
#! /bin/bash
set -o nounset
set -o errexit
readonly SOURCE=README.md
readonly OUTPUT=docs/documentation.md
readonly START_TAG="<!-- START documentation.md -->"
readonly END_TAG="<!-- END documentation.md -->"
function escape_regex {
echo "$@" | sed -e 's/[]\/\!$*.^|[]/\\&/g'
}
function extract {
sed -n "/^\s*$(escape_regex $START_TAG)\s*$/,/^\s*$(escape_regex $END_TAG)\s*$/p" \
| sed '$d' \
| sed -n '2,$p'
}
function main {
rm -rf $OUTPUT && touch $OUTPUT
echo "---" >> $OUTPUT
echo "layout: page" >> $OUTPUT
echo "title: Documentation" >> $OUTPUT
echo "permalink: /documentation/" >> $OUTPUT
echo "---" >> $OUTPUT
cat $SOURCE | extract >> $OUTPUT
}
main

7
scripts/gh-pages Executable file
View file

@ -0,0 +1,7 @@
#!/usr/bin/env bash
rm -rf node_modules/gh-pages/.cache
rm -rf docs/_site
cd docs
JEKYLL_ENV=production bundle exec jekyll build
gh-pages --dist _site --branch gh-pages