Skip to content

Commit af76d31

Browse files
LukyVjElPicador
LukyVj
authored and
ElPicador
committed
feat(docs): new community header / footer (#114)
1 parent 2f2508c commit af76d31

20 files changed

+1385
-338
lines changed

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2015 Algolia
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎docs/_includes/footer.html

+32-9
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,33 @@
1-
<footer class="site-footer">
2-
<p>
3-
Designed and built with <i class="fa fa-heart"></i> by <a href="https://www.algolia.com/?utm_medium=social-owned&utm_source=documentation+search&utm_campaign=homepage"><img src="{{site.baseurl}}/img/logo-algolia-dark.png" alt="Algolia" height="20"></a>
4-
</p>
5-
<div class="spacer50"></div>
6-
<div class="m400 m-l-r-auto">
7-
{% include newsletter-mc.html %}
1+
<section class='ac-footer'>
2+
<div class='ac-footer-container'>
3+
<p class='ac-footer-links'>
4+
Code licensed under
5+
<a class='ac-footer-link-item' href='https://github.com/algolia/docsearch/blob/master/LICENSE'>MIT</a>
6+
<br>
7+
<a class='ac-footer-link-item' href='https://github.com/algolia/docsearch'>Github</a>
8+
<a class='ac-footer-link-item' href='https://github.com/algolia/docsearch/issues'>Issues</a>
9+
<a class='ac-footer-link-item' href='https://www.algolia.com/policies/privacy'>Privacy policy</a>
10+
</p>
811
</div>
9-
<div class="spacer80"></div>
10-
</footer>
12+
<div class='ac-footer-container ac-footer-brand'>
13+
<p>This project is part of</p>
14+
<img class='ac-footer-brand-icon' src='http://res.cloudinary.com/hilnmyskv/image/upload/logo-community.svg'>
15+
<figure>
16+
<img class='ac-footer-brand-logo' src='http://res.cloudinary.com/hilnmyskv/image/upload/v1463417234/algolia-community_n6tixd.svg'>
17+
<figcaption>Algolia Community</figcaption>
18+
</figure>
19+
<a class='ac-footer-btn ac-footer-btn-cta' href='https://community.algolia.com/'>See More</a>
20+
<span class='ac-icon ac-icon-love-dark'></span>
21+
</div>
22+
<p class='ac-footer-version'>&nbsp;</p>
23+
<div class='ac-footer-actions'>
24+
<div class='footer-container'>
25+
<p>Build unique search experiences with Algolia</p>
26+
<a class='ac-footer-btn ac-footer-btn-ghost-grey' href='https://www.algolia.com/why?utm_medium=social-owned&amp;utm_source=places%20website&amp;utm_campaign=homepage&amp;utm_term=why'>
27+
See Why
28+
<span class='ac-icon-triangle'></span>
29+
</a>
30+
<a class='ac-footer-btn ac-footer-btn-ghost-pink' href='https://www.algolia.com/users/sign_up?utm_medium=social-owned&amp;utm_source=places%20website&amp;utm_campaign=homepage&amp;utm_term=get_started'>Get Started For Free</a>
31+
</div>
32+
</div>
33+
</section>

‎docs/_includes/header.html

+80-32
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,82 @@
1-
<header class="site-header">
2-
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
3-
<div class="container-fluid">
4-
<div class="navbar-header">
5-
<a class="logo-community" href="https://community.algolia.com/">
6-
<img src="https://res.cloudinary.com/hilnmyskv/image/upload/logo-community-inline-dark.svg" width="150" alt="Algolia Community" />
7-
</a>
8-
<a class="project-title" href="{{ site.baseurl }}/">
9-
DocSearch
10-
</a>
11-
</div>
12-
<div class="navbar-collapse collapse">
13-
<ul class="nav navbar-nav navbar-right">
14-
<li class="searchbar-wrapper">
15-
<div class="navbar-form">
16-
<div class="form-group">
17-
{% include searchbar.html %}
18-
</div>
19-
</div>
20-
</li>
21-
{% assign url = page.url %}
22-
{% for link in site.navigation %}
23-
<li {% if url == link.url %}class="active"{% endif %}>
24-
<a href="{{ site.baseurl }}{{ link.url }}" title="{{ link.title }}">{{ link.text }}</a>
25-
</li>
26-
{% endfor %}
27-
<li>
28-
<a class="navbar-github-link" href="//github.com/algolia/docsearch"><i class="fa fa-github"></i></a>
29-
</li>
30-
</ul>
1+
<div class='ac-nav'>
2+
<div class='ac-nav-container'>
3+
<div class='ac-nav-brand'>
4+
<a class='ac-logo' href='https://community.algolia.com/' title='Algolia Community'>
5+
<img alt='Algolia Community' class='ac-logo__lg' src='https://res.cloudinary.com/hilnmyskv/image/upload/logo-community-inline-dark.svg' width='150'>
6+
<img alt='Algolia Community' class='ac-logo__sm' src='https://res.cloudinary.com/hilnmyskv/image/upload/v1461180081/logo-community-sm.svg'>
7+
</a>
8+
<span class='ac-nav-brand-breadcrumb'></span>
9+
<a class='ac-nav-brand-title' href='./' title='Home'>DocSearch</a>
10+
</div>
11+
<div class='ac-nav-menu'>
12+
<div class='ac-nav-searchbox'>
13+
<form class='searchbox' id='docsearch-form' novalidate='novalidate' onsubmit='return false;' style='visibility:hidden;height:0'>
14+
<div class='searchbox__wrapper' role='search'>
15+
<input autocomplete='off' class='searchbox__input' id='docsearch' name='search' placeholder='Search in the doc' required='required' type='search'>
16+
<button class='searchbox__submit' title='Submit your search query.' type='submit'>
17+
<svg aria-label='Search' role='img'>
18+
<use xlink:href='#sbx-icon-search-13' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
19+
</svg>
20+
</button>
21+
<button class='searchbox__reset hide' title='Clear the search query.' type='reset'>
22+
<svg aria-label='Reset' role='img'>
23+
<use xlink:href='#sbx-icon-clear-3' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
24+
</svg>
25+
</button>
26+
</input>
27+
</div>
28+
</form>
29+
<div class='svg-icons' style='height: 0; width: 0; position: absolute; visibility: hidden'>
30+
<svg xmlns='http://www.w3.org/2000/svg'>
31+
<symbol id="sbx-icon-clear-3" viewBox="0 0 40 40"><path d="M16.228 20L1.886 5.657 0 3.772 3.772 0l1.885 1.886L20 16.228 34.343 1.886 36.228 0 40 3.772l-1.886 1.885L23.772 20l14.342 14.343L40 36.228 36.228 40l-1.885-1.886L20 23.772 5.657 38.114 3.772 40 0 36.228l1.886-1.885L16.228 20z" fill-rule="evenodd"/></symbol>
32+
<symbol id="sbx-icon-search-13" viewBox="0 0 12 12"><path d="M12 11.077c0-.245-.1-.483-.267-.65L9.26 7.955c.584-.843.894-1.853.894-2.877C10.154 2.272 7.882 0 5.077 0S0 2.272 0 5.077s2.272 5.077 5.077 5.077c1.024 0 2.034-.31 2.877-.894l2.474 2.466c.166.173.404.274.65.274.504 0 .922-.418.922-.923zm-3.692-6c0 1.78-1.45 3.23-3.23 3.23-1.782 0-3.232-1.45-3.232-3.23s1.45-3.23 3.23-3.23c1.782 0 3.232 1.45 3.232 3.23z" fill="#FFF" fill-rule="evenodd" opacity="0.85"/></symbol>
33+
</svg>
3134
</div>
3235
</div>
33-
</nav>
34-
</header>
36+
<ul class='ac-nav-menu-list'>
37+
{% assign url = page.url %}
38+
{% for link in site.navigation %}
39+
<li class='ac-nav-menu-list-item {% if url == link.url %}active{% endif %} '>
40+
<a data-path="{{ site.baseurl }}{{ link.url }}" href="{{ site.baseurl }}{{ link.url }}" data-current="{% if url == link.url %}true{% endif %}" title="{{ link.text }}">{{ link.text }}</a>
41+
</li>
42+
{% endfor %}
43+
<li class='ac-nav-menu-list-icon'>
44+
<a class='ac-icon' href='https://github.com/algolia/docsearch' title='GitHub repository'>
45+
<span class='ac-icon ac-icon-github'></span>
46+
</a>
47+
</li>
48+
</ul>
49+
</div>
50+
</div>
51+
52+
</div>
53+
54+
<script type="text/javascript">
55+
56+
$(function(){
57+
$('.searchbox .aa-input').on('change', function() {
58+
$('.aa-input').addClass('filled');
59+
});
60+
61+
$('.searchbox .aa-input').on('blur', function() {
62+
if ($(this).val().length === 0){
63+
$(this).removeClass('filled');
64+
}
65+
});
66+
67+
$('.searchbox [type="reset"]').on('click', function() {
68+
myDocSearch.autocomplete.autocomplete.setVal('');
69+
$('.aa-input').focus();
70+
$(this).addClass("hide");
71+
});
72+
});
73+
function updateReset() {
74+
var searchbox = $('.aa-input');
75+
var reset = $('.searchbox [type="reset"]');
76+
reset.removeClass("hide");
77+
if (searchbox.val().length === 0){
78+
reset.addClass("hide");
79+
}
80+
}
81+
82+
</script>

‎docs/_includes/searchbar.html

-55
This file was deleted.

‎docs/_layouts/default.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
{% endif %}
5555

5656
<script src="{{ "/js/bootstrap.min.js" | prepend: site.baseurl }}"></script>
57+
<script src="{{ "/js/responsiveNavigation.js" | prepend: site.baseurl }}"></script>
5758

5859
{% if site.env == 'development' %}
5960
<script>
@@ -66,13 +67,14 @@
6667
var myDocSearch = docsearch({
6768
apiKey: '25626fae796133dc1e734c6bcaaeac3c',
6869
indexName: 'docsearch',
69-
inputSelector: '.sbx-custom__input',
70+
inputSelector: '.searchbox__input',
7071
autocompleteOptions: {
7172
debug: false
7273
}
7374
});
7475
</script>
7576

77+
7678
{% include marketing.html %}
7779

7880
{% contentblock site-footer %}

‎docs/css/_base.scss

+29-6
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,46 @@
1+
// Algolia's UI-Component :
2+
// ------------------------
3+
//
4+
// VARIABLES
5+
// ---------
6+
7+
// Breakpoints
8+
$bp-huge: 2000px;
9+
$bp-big: 1440px;
10+
$bp-medium: 960px;
11+
$bp-small: 768px;
12+
13+
// Dimensions
14+
$max-container-width: 940px;
15+
$navigation-height: 50px;
16+
$margin: 16px;
17+
$anchor-offset: 100px;
18+
19+
20+
// Fonts
21+
$font-name: "Raleway";
22+
$font-fallback: Helvetica Neue, helvetica;
23+
$font-settings: $font-name, $font-fallback;
24+
125
$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
226
$font-size-base: 16px;
327

428
$headings-font-family: "Raleway";
529
$headings-font-weight: 300;
630

31+
// Colors
32+
$red-pink: #fb366e;
33+
$steel: #788795;
34+
$black: #0a1724;
35+
$white-75: rgba(white, 0.75);
736
$brand-primary: #1d96c7;
8-
//$code-color: #a3b6cb;
9-
1037
$text-color: rgba(black, 0.75);
11-
12-
$anchor-offset: 100px;
1338
$community-color: #674492;
1439
$success-color: #58d158;
1540
$gray-light: #f3f3f3;
1641
$dark-blue: #0d1d30;
1742
$light-blue: lighten($dark-blue, 70%);
18-
1943
$secondary-color: green;
2044

21-
$navbar-height: 50px;
2245

2346

0 commit comments

Comments
 (0)