nikon/docsearch
1
0
Fork 0
Code Activity Actions

docs(homepage): Fix some design feedback

Browse source
This commit is contained in:
Pixelastic 2018-08-20 17:02:51 +02:00
parent 1ade9cdbcf
commit b241f849e3
6 changed files with 30 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
docs/src/_layouts/homepage.pug
View file

@ -84,9 +84,6 @@ block content
.glide__slide
img(src="assets/logos/stripe.jpg", alt="DocSearch + Stripe", width=60)
.glide__caption Stripe
.glide__slide
img(src="assets/logos/symfony.jpg", alt="DocSearch + Symfony", width=60)
.glide__caption Symfony
.glide__slide
img(src="assets/logos/trello.jpg", alt="DocSearch + Trello", width=60)
.glide__caption Trello
@ -111,7 +108,7 @@ block content
input.docsearch-live-demo-input
.demo-content-wrapper
.bg-analytics.px-2
.px-2.bg-analytics
.max-w-xl.m-auto.text-center.mb-2
.max-w-md.m-auto.mb-3
.text-solstice.text-5.normal.pb-2 Learn-as-you-type experience
@ -136,16 +133,16 @@ block content
.flex.flrw
.fln.w-100.md_w-33.px-2.p-2
h3.pb-1.text-3.leading-2 We crawl your documentation pages
p.text-1.leading-2.text-justify We built a website crawler designed to index every section of your documentation.
p.text-1.leading-2.text-justify Just send us the URL of your documentation, and we’ll run the crawler every 24h so you’re always up-to-date.
p.text-1.leading-2 We built a website crawler designed to index every section of your documentation.
p.text-1.leading-2 Just send us the URL of your documentation, and we’ll run the crawler every 24h so you’re always up-to-date.
.fln.w-100.md_w-33.px-2.p-2
h3.pb-1.text-3.leading-2 We configure your search experience
p.text-1.leading-2.text-justify You don’t need to configure any settings or even have an Algolia account.
p.text-1.leading-2.text-justify We take care of all of this automatically to ensure the best documentation search experience.
p.text-1.leading-2 You don’t need to configure any settings or even have an Algolia account.
p.text-1.leading-2 We take care of all of this automatically to ensure the best documentation search experience.
.fln.w-100.md_w-33.px-2.p-2
h3.pb-1.text-3.leading-2 You add the search autocomplete to your UI
p.text-1.leading-2.text-justify We’ll send you the script so you can integrate Algolia autocomplete to power your search.
p.text-1.leading-2.text-justify You will receive the same speed, relevance and best-in-class UX as our paying customers.
p.text-1.leading-2 We’ll send you the script so you can integrate Algolia autocomplete to power your search.
p.text-1.leading-2 You will receive the same speed, relevance and best-in-class UX as our paying customers.
.max-w-xl.m-auto.mt-3.px-1.pb-3
.text-solstice.text-5.normal.pb-2.text-center Try it live
@ -184,8 +181,9 @@ block content
img.h-2(src='assets/logos/stripe.jpg', alt='Stripe')
.fla.pl-1.text-solstice.uppercase.bold Stripe
.bg-footer.px-2
.max-w-sm.m-auto.mt-2
.relative.bg-white-pure
.bg-footer
.relative.max-w-sm.m-auto.mt-2.z-2
.max-w-md.m-auto.py-3
.text-5.normal.pb-2.text-white.text-center Get started
.pb-1.text-3.leading-2.text-white.text-center We’ll get back to you with everything you need to integrate your new search into your website.
@ -217,14 +215,14 @@ block content
//include ../_includes/newsletter.pug
.my-popper
.popper__arrow(x-arrow='right')
img(src='https://docsearch-shared.netlify.com/docsearch-logo.png', alt='DocSearch', width=200)
p
| Try to search for expressions like
a.ds-sample-query(data-sample='grid', href='#') grid
| ,
a.ds-sample-query(data-sample='form group', href='#') form group
| or
a.ds-sample-query(data-sample='invisble', href='#') invisble
| (sic) .
.my-popper
.popper__arrow(x-arrow='right')
img(src='https://docsearch-shared.netlify.com/docsearch-logo.png', alt='DocSearch', width=200)
p
| Try to search for expressions like
a.ds-sample-query(data-sample='grid', href='#') grid
| ,
a.ds-sample-query(data-sample='form group', href='#') form group
| or
a.ds-sample-query(data-sample='invisble', href='#') invisble
| (sic) .

2
docs/src/_layouts/main.pug
View file

@ -4,7 +4,7 @@ html(lang='en')
- const siteTitle = current.title || site.title
- const siteDescription = site.description;
- const siteUrl = site.url;
- const ogImage = siteUrl + 'asets/og_image.png';
- const ogImage = siteUrl + '/assets/og_image.png';
meta(charset='utf-8')
meta('http-equiv'='x-ua-compatible',content='ie-edge')
title= siteTitle

9
docs/src/_styles/components.css
View file

@ -69,11 +69,12 @@
}
.bg-footer {
@apply bg-cover bg-no-repeat;
@apply absolute pin-x z-1;
background-image: url("assets/bg-footer.svg");
background-color: #fdfdfe;
background-size: 2200px;
background-repeat: no-repeat;
background-position: center top;
background-position: 100% 100%;
height: 500px;
}
/* Logo slider (gslide) */

34
docs/src/assets/bg-footer.svg
View file

@ -1,33 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1981px" height="587px" viewBox="0 0 1981 587" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
<title>Group</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="50%" y1="100%" x2="50%" y2="-2.48949813e-15%" id="linearGradient-1">
<stop stop-color="#F5F5FA" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Group" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-12.000000, -124.000000)">
<rect id="Rectangle-87-Copy" fill="#5468FF" x="0" y="0" width="2000" height="748"></rect>
<g id="Waves" transform="translate(0.000000, 127.000000)">
<path d="M0,411 C166.666667,411 166.666667,541.716706 333.333333,541.716706 C500,541.716706 500,483.148747 666.666667,483.148747 C833.333333,483.148747 833.333333,543 1000,543 C1166.66667,543 1166.66667,437.534871 1333.33333,437.534871 C1500,437.534871 1500,539.293873 1666.66667,539.293873 C1833.33333,539.293873 1833.44252,502.260057 2000,502.260057 L2000,1005.50025 L0,1005.50025 L0,411 Z" id="Stroke-1" fill="url(#linearGradient-1)"></path>
<path d="M0,371 C166.666667,371 166.666667,541.327829 333.333333,541.327829 C500,541.327829 500,465.012004 666.666667,465.012004 C833.333333,465.012004 833.333333,543 1000,543 C1166.66667,543 1166.66667,405.575741 1333.33333,405.575741 C1500,405.575741 1500,538.170804 1666.66667,538.170804 C1833.33333,538.170804 1833.44252,489.91462 2000,489.91462" id="Stroke-1" stroke="#A6B0F9" opacity="0.5"></path>
<path d="M0,371 C166.666667,371 166.666667,539.816025 333.333333,539.816025 C500,539.816025 500,455.030542 666.666667,455.030542 C833.333333,455.030542 833.333333,542 1000,542 C1166.66667,542 1166.66667,394.140686 1333.33333,394.140686 C1500,394.140686 1500,531.892815 1666.66667,531.892815 C1833.33333,531.892815 1833.44252,463.876691 2000,463.876691" id="Stroke-3" stroke="#FFFFFF"></path>
<path d="M0,371 C166.666667,371 166.666667,538.305528 333.333333,538.305528 C500,538.305528 500,445.091685 666.666667,445.091685 C833.333333,445.091685 833.333333,541 1000,541 C1166.66667,541 1166.66667,382.754266 1333.33333,382.754266 C1500,382.754266 1500,525.638788 1666.66667,525.638788 C1833.33333,525.638788 1833.44252,437.952173 2000,437.952173" id="Stroke-5" stroke="#A6B0F9" opacity="0.5"></path>
<path d="M0,371 C166.666667,371 166.666667,537.778467 333.333333,537.778467 C500,537.778467 500,435.574703 666.666667,435.574703 C833.333333,435.574703 833.333333,541 1000,541 C1166.66667,541 1166.66667,371.422668 1333.33333,371.422668 C1500,371.422668 1500,520.287141 1666.66667,520.287141 C1833.33333,520.287141 1833.44252,412.387867 2000,412.387867" id="Stroke-7" stroke="#A6B0F9" stroke-dasharray="10"></path>
<path d="M0,370.931098 C166.666667,370.931098 166.666667,536.267097 333.333333,536.267097 C500,536.267097 500,425.619119 666.666667,425.619119 C833.333333,425.619119 833.333333,540 1000,540 C1166.66667,540 1166.66667,360 1333.33333,360 C1500,360 1500,514.037594 1666.66667,514.037594 C1833.33333,514.037594 1833.44252,386.481885 2000,386.481885" id="Stroke-9" stroke="#A6B0F9" opacity="0.5"></path>
<path d="M0,371.314685 C166.666667,371.314685 166.666667,535.74493 333.333333,535.74493 C500,535.74493 500,416.297155 666.666667,416.297155 C833.333333,416.297155 833.333333,540 1000,540 C1166.66667,540 1166.66667,349 1333.33333,349 C1500,349 1500,508.708578 1666.66667,508.708578 C1833.33333,508.708578 1833.44252,361.092638 2000,361.092638" id="Stroke-11" stroke="#A6B0F9" opacity="0.5"></path>
<path d="M0,371.001977 C166.666667,371.001977 166.666667,534.229919 333.333333,534.229919 C500,534.229919 500,406.189858 666.666667,406.189858 C833.333333,406.189858 833.333333,539 1000,539 C1166.66667,539 1166.66667,337.333043 1333.33333,337.333043 C1500,337.333043 1500,502.430781 1666.66667,502.430781 C1833.33333,502.430781 1833.44252,335 2000,335" id="Stroke-13" stroke="#A6B0F9" opacity="0.5"></path>
<path d="M0,371.740001 C166.666667,371.740001 166.666667,533.718017 333.333333,533.718017 C500,533.718017 500,397.132777 666.666667,397.132777 C833.333333,397.132777 833.333333,539 1000,539 C1166.66667,539 1166.66667,326.739226 1333.33333,326.739226 C1500,326.739226 1500,497.169255 1666.66667,497.169255 C1833.33333,497.169255 1833.44252,310 2000,310" id="Stroke-15" stroke="#A6B0F9" opacity="0.5"></path>
<path d="M0,371.453664 C166.666667,371.453664 166.666667,532.203955 333.333333,532.203955 C500,532.203955 500,387.068891 666.666667,387.068891 C833.333333,387.068891 833.333333,538 1000,538 C1166.66667,538 1166.66667,315.130794 1333.33333,315.130794 C1500,315.130794 1500,490.909888 1666.66667,490.909888 C1833.33333,490.909888 1833.44252,284 2000,284" id="Stroke-17" stroke="#A6B0F9" opacity="0.5"></path>
<path d="M0,371.148293 C166.666667,371.148293 166.666667,530.691906 333.333333,530.691906 C500,530.691906 500,376.99817 666.666667,376.99817 C833.333333,376.99817 833.333333,537 1000,537 C1166.66667,537 1166.66667,303.509292 1333.33333,303.509292 C1500,303.509292 1500,484.650997 1666.66667,484.650997 C1833.33333,484.650997 1833.44252,258 2000,258" id="Stroke-19" stroke="#A6B0F9" opacity="0.5"></path>
<path d="M0,370.829752 C166.666667,370.829752 166.666667,529.178785 333.333333,529.178785 C500,529.178785 500,366.922332 666.666667,366.922332 C833.333333,366.922332 833.333333,536 1000,536 C1166.66667,536 1166.66667,291.879534 1333.33333,291.879534 C1500,291.879534 1500,478.392807 1666.66667,478.392807 C1833.33333,478.392807 1833.44252,220 2000,220" id="Stroke-21" stroke="#A6B0F9" opacity="0.5"></path>
<path d="M0,371.5 C166.666667,371.5 166.666667,529.143312 333.333333,529.143312 C500,529.143312 499.833333,340.75 666.5,340.75 C833.166667,340.75 833.333333,536.5 1000,536.5 C1166.66667,536.5 1166.83333,250.5 1333.5,250.5 C1500.16667,250.5 1500,473.442675 1666.66667,473.442675 C1833.33333,473.442675 1833.44252,145 2000,145" id="Stroke-23" stroke="#A6B0F9" opacity="0.5"></path>
<path d="M0,268.5 C166.666667,268.5 166.666667,525.028662 333.333333,525.028662 C500,525.028662 500,246.207659 666.666667,246.207659 C833.333333,246.207659 833.333333,537 1000,537 C1166.66667,537 1166.66667,121.177299 1333.33333,121.177299 C1500,121.177299 1500,434.388535 1666.66667,434.388535 C1833.33333,434.388535 1833.44252,0 2000,0" id="Stroke-23" stroke="#A6B0F9" opacity="0.5"></path>
</g>
</g>
</g>
</svg>
<svg width="1981" preserveAspectRatio="none" height="587" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="a"><stop stop-color="#F5F5FA" offset="0%"/><stop stop-color="#FFF" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path fill="#5468FF" d="M-12-124h2000v748H-12z"/><path d="M0 411c166.667 0 166.667 130.717 333.333 130.717 166.667 0 166.667-58.568 333.334-58.568C833.333 483.149 833.333 543 1000 543c166.667 0 166.667-105.465 333.333-105.465 166.667 0 166.667 101.759 333.334 101.759 166.666 0 166.776-37.034 333.333-37.034v503.24H0V411z" fill="url(#a)" transform="translate(-12 3)"/><path d="M-12 374c166.667 0 166.667 170.328 333.333 170.328 166.667 0 166.667-76.316 333.334-76.316C821.333 468.012 821.333 546 988 546c166.667 0 166.667-137.424 333.333-137.424C1488 408.576 1488 541.17 1654.667 541.17c166.666 0 166.776-48.256 333.333-48.256" stroke="#A6B0F9" opacity=".5"/><path d="M-12 374c166.667 0 166.667 168.816 333.333 168.816 166.667 0 166.667-84.785 333.334-84.785C821.333 458.03 821.333 545 988 545c166.667 0 166.667-147.86 333.333-147.86 166.667 0 166.667 137.753 333.334 137.753 166.666 0 166.776-68.016 333.333-68.016" stroke="#FFF"/><path d="M-12 374c166.667 0 166.667 167.306 333.333 167.306 166.667 0 166.667-93.214 333.334-93.214C821.333 448.092 821.333 544 988 544c166.667 0 166.667-158.246 333.333-158.246C1488 385.754 1488 528.64 1654.667 528.64c166.666 0 166.776-87.687 333.333-87.687" stroke="#A6B0F9" opacity=".5"/><path d="M-12 374c166.667 0 166.667 166.778 333.333 166.778C488 540.778 488 438.575 654.667 438.575 821.333 438.575 821.333 544 988 544c166.667 0 166.667-169.577 333.333-169.577 166.667 0 166.667 148.864 333.334 148.864 166.666 0 166.776-107.9 333.333-107.9" stroke="#A6B0F9" stroke-dasharray="10"/><path d="M-12 373.931c166.667 0 166.667 165.336 333.333 165.336C488 539.267 488 428.62 654.667 428.62 821.333 428.62 821.333 543 988 543c166.667 0 166.667-180 333.333-180C1488 363 1488 517.038 1654.667 517.038c166.666 0 166.776-127.556 333.333-127.556" stroke="#A6B0F9" opacity=".5"/><path d="M-12 374.315c166.667 0 166.667 164.43 333.333 164.43C488 538.745 488 419.297 654.667 419.297 821.333 419.297 821.333 543 988 543c166.667 0 166.667-191 333.333-191C1488 352 1488 511.709 1654.667 511.709c166.666 0 166.776-147.616 333.333-147.616" stroke="#A6B0F9" opacity=".5"/><path d="M-12 374.002c166.667 0 166.667 163.228 333.333 163.228C488 537.23 488 409.19 654.667 409.19 821.333 409.19 821.333 542 988 542c166.667 0 166.667-201.667 333.333-201.667 166.667 0 166.667 165.098 333.334 165.098C1821.333 505.43 1821.443 338 1988 338" stroke="#A6B0F9" opacity=".5"/><path d="M-12 374.74c166.667 0 166.667 161.978 333.333 161.978C488 536.718 488 400.133 654.667 400.133 821.333 400.133 821.333 542 988 542c166.667 0 166.667-212.26 333.333-212.26 166.667 0 166.667 170.43 333.334 170.43C1821.333 500.17 1821.443 313 1988 313" stroke="#A6B0F9" opacity=".5"/><path d="M-12 374.454c166.667 0 166.667 160.75 333.333 160.75C488 535.204 488 390.069 654.667 390.069 821.333 390.069 821.333 541 988 541c166.667 0 166.667-222.87 333.333-222.87 166.667 0 166.667 175.78 333.334 175.78C1821.333 493.91 1821.443 287 1988 287" stroke="#A6B0F9" opacity=".5"/><path d="M-12 374.148c166.667 0 166.667 159.544 333.333 159.544C488 533.692 488 379.998 654.667 379.998 821.333 379.998 821.333 540 988 540c166.667 0 166.667-233.49 333.333-233.49 166.667 0 166.667 181.14 333.334 181.14C1821.333 487.651 1821.443 261 1988 261" stroke="#A6B0F9" opacity=".5"/><path d="M-12 373.83c166.667 0 166.667 158.349 333.333 158.349C488 532.179 488 369.922 654.667 369.922 821.333 369.922 821.333 539 988 539c166.667 0 166.667-244.12 333.333-244.12 166.667 0 166.667 186.513 333.334 186.513C1821.333 481.393 1821.443 223 1988 223" stroke="#A6B0F9" opacity=".5"/><path d="M-12 374.5c166.667 0 166.667 157.643 333.333 157.643 166.667 0 166.5-188.393 333.167-188.393 166.667 0 166.833 195.75 333.5 195.75s166.833-286 333.5-286 166.5 222.943 333.167 222.943C1821.333 476.443 1821.443 148 1988 148" stroke="#A6B0F9" opacity=".5"/><path d="M-12 271.5c166.667 0 166.667 256.529 333.333 256.529C488 528.029 488 249.208 654.667 249.208 821.333 249.208 821.333 540 988 540c166.667 0 166.667-415.823 333.333-415.823C1488 124.177 1488 437.39 1654.667 437.39 1821.333 437.389 1821.443 3 1988 3" stroke="#A6B0F9" opacity=".5"/></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
docs/src/assets/og_image.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 164 KiB

4
docs/src/js/home.js
View file

@ -14,9 +14,9 @@ window.onload = function() {
const reference = document.querySelector(
'.docsearch-live-demo-input-wrapper'
);
const popper = document.querySelector('.my-popper');
const popperElement = document.querySelector('.my-popper');
const anotherPopper = new Popper(reference, popper, {
const anotherPopper = new Popper(reference, popperElement, {
placement: 'bottom-start',
removeOnDestroy: 'true',
});