nikon/docsearch
1
0
Fork 0
Code Activity Actions

live-demo

Browse source
This commit is contained in:
Shipow 2018-08-10 15:07:32 +02:00 committed by Pixelastic
parent 6923c3eedc
commit 1655233d10
4 changed files with 76 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,75 +14,78 @@ block content
.glide__track(data-glide-el="track")
.glide__slides
.glide__slide
img(src="assets/logos/babel.png", alt="DocSearch + ", width=80)
img(src="assets/logos/babel.png", alt="DocSearch + ", width=60)
.glide__slide
img(src="assets/logos/bootstrap.png", alt="DocSearch + ", width=80)
img(src="assets/logos/bootstrap.png", alt="DocSearch + ", width=60)
.glide__slide
img(src="assets/logos/circleio.jpg", alt="DocSearch + ", width=80)
img(src="assets/logos/circleio.jpg", alt="DocSearch + ", width=60)
.glide__slide
img(src="assets/logos/cordova.png", alt="DocSearch + ", width=80)
img(src="assets/logos/cordova.png", alt="DocSearch + ", width=60)
.glide__slide
img(src="assets/logos/electron.png", alt="DocSearch + ", width=80)
img(src="assets/logos/electron.png", alt="DocSearch + ", width=60)
.glide__slide
img(src="assets/logos/ember.png", alt="DocSearch + ", width=80)
img(src="assets/logos/ember.png", alt="DocSearch + ", width=60)
.glide__slide
img(src="assets/logos/eslint.jpg", alt="DocSearch + ", width=80)
img(src="assets/logos/eslint.jpg", alt="DocSearch + ", width=60)
.glide__slide
img(src="assets/logos/gitlab.png", alt="DocSearch + ", width=80)
img(src="assets/logos/gitlab.png", alt="DocSearch + ", width=60)
.glide__slide
img(src="assets/logos/go.png", alt="DocSearch + ", width=80)
img(src="assets/logos/go.png", alt="DocSearch + ", width=60)
.glide__slide
img(src="assets/logos/grafana.png", alt="DocSearch + ", width=80)
img(src="assets/logos/grafana.png", alt="DocSearch + ", width=60)
.glide__slide
img(src="assets/logos/graphql.png", alt="DocSearch + ", width=80)
img(src="assets/logos/graphql.png", alt="DocSearch + ", width=60)
.glide__slide
img(src="assets/logos/jekyll.jpg", alt="DocSearch + ", width=80)
img(src="assets/logos/jekyll.jpg", alt="DocSearch + ", width=60)
.glide__slide
img(src="assets/logos/netlify.png", alt="DocSearch + ", width=80)
img(src="assets/logos/netlify.png", alt="DocSearch + ", width=60)
.glide__slide
img(src="assets/logos/paypal.jpg", alt="DocSearch + " , width=80)
img(src="assets/logos/paypal.jpg", alt="DocSearch + " , width=60)
.glide__slide
img(src="assets/logos/postman.png", alt="DocSearch + ", width=80)
img(src="assets/logos/postman.png", alt="DocSearch + ", width=60)
.glide__slide
img(src="assets/logos/react.png", alt="DocSearch + ", width=80)
img(src="assets/logos/react.png", alt="DocSearch + ", width=60)
.glide__slide
img(src="assets/logos/scala.png", alt="DocSearch + ", width=80)
img(src="assets/logos/scala.png", alt="DocSearch + ", width=60)
.glide__slide
img(src="assets/logos/serverless.png", alt="DocSearch + ", width=80)
img(src="assets/logos/serverless.png", alt="DocSearch + ", width=60)
.glide__slide
img(src="assets/logos/socketio.png", alt="DocSearch + " , width=80)
img(src="assets/logos/socketio.png", alt="DocSearch + " , width=60)
.glide__slide
img(src="assets/logos/stripe.png", alt="DocSearch + ", width=80)
img(src="assets/logos/stripe.png", alt="DocSearch + ", width=60)
.glide__slide
img(src="assets/logos/symfony.png", alt="DocSearch + ", width=80)
img(src="assets/logos/symfony.png", alt="DocSearch + ", width=60)
.glide__slide
img(src="assets/logos/trello.png", alt="DocSearch + ", width=80)
img(src="assets/logos/trello.png", alt="DocSearch + ", width=60)
.glide__slide
img(src="assets/logos/vue.png", alt="DocSearch + ", width=80)
img(src="assets/logos/vue.png", alt="DocSearch + ", width=60)
.glide__slide
img(src="assets/logos/webpack.png", alt="DocSearch + ", width=80)
img(src="assets/logos/webpack.png", alt="DocSearch + ", width=60)
.glide__slide
img(src="assets/logos/yarn.jpg", alt="DocSearch + ", width=80)
img(src="assets/logos/yarn.jpg", alt="DocSearch + ", width=60)
.max-w-md.m-auto.text-center
h2.text-solstice.text-5.normal.pb-2 Offer your docs a Learn-as-you-type experience
p.text-3.pb-2.text-telluric We're kind of 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.text-3.text-telluric No one's to blame, building a good search for a documentation is a complex challenge. We just happen to have a lot of experience doing that, and we want to share it with the world.
.max-w-xl.m-auto.pt-3
img(src="assets/bg-docsearch-live-demo-bootstrap.png", alt="Live Demo Docsearch on Bootsrap")
.max-w-xl.m-auto.pt-3.mb-2
.demo-header-wrapper
.docsearch-live-demo-input-wrapper
input.docsearch-live-demo-input
.demo-content-wrapper
.max-w-xl.m-auto.text-center
.max-w-md.m-auto.mb-3
.text-solstice.text-5.normal.pb-2 Search Designed for Documentation
.pb-2.text-3.leading-2 Documentation speaks to your users. Ideally, this conversation will be pleasant and efficient. Everyone visiting your documentation page has a different need: Some are exploring your product, some are trying to get started, and some are stuck and need help.
.max-w-xl.m-auto.mb-3
.max-w-xl.m-auto.mb-2
img(src="assets/docsearch-UI-anatomy.png", alt="Anatomy of DocSearch UI")
.max-w-md.m-auto
.pb-2.text-3.leading-2 DocSearch is designed to provide relevant search results at every level. Its strutured layout give the users more context to understand the product. We call it the “Learn as you type” effect.
.max-w-lg.m-auto.mt-4
h2.text-solstice.text-5.normal.pb-2.text-center How it works
.max-w-lg.m-auto.mt-3
h2.text-solstice.text-5.normal.pb-2.text-center.mb-1 How it works
img(src="assets/docsearch-how-it-works.png", alt="how DocSearch works")
.flex.flrw
.fln.w-100.sm_w-50.md_w-33.p-1

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

@ -39,7 +39,15 @@ html(lang='en')
| inputSelector: '.custom-search-input',
| debug: false
|});
|docsearch({
| apiKey: '5990ad008512000bba2cf951ccf0332f',
| indexName: 'bootstrap',
| inputSelector: '.docsearch-live-demo-input',
| enhancedSearchInput: true,
| debug: false
|});
script
|window.onload = function () {new Glide('.glide',{type: 'carousel',startAt: 0, perView: 10, autoplay: true}).mount()}
|window.onload = function () {new Glide('.glide',{type: 'carousel',startAt: 0, perView: 14, autoplay: 1300}).mount()}
include ../_includes/tag-manager.pug

BIN
docs/src/assets/bg-docsearch-live-demo-bootstrap.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1 MiB

After

Width:  |  Height:  |  Size: 1 MiB

34
docs/src/style.css
View file

@ -24,6 +24,40 @@ body {
background-position: center calc(100% - 18px);
}
/* Logo slider (gslide) */
.glide__slide{
background-color: white;
border-radius: 4px;
overflow: hidden;
padding: 4px;
img {
display: block;
}
}
/* Live Demo */
.docsearch-live-demo-input-wrapper {
margin-top: 5px;
margin-right: 8px;
float: right;
}
.demo-header-wrapper{
height: 38px;
background: url("assets/bg-docsearch-live-demo-bootstrap.png") #563E7C no-repeat;
background-size: 1200px;
background-position: left top;
}
.demo-content-wrapper{
height: 400px;
background: url("assets/bg-docsearch-live-demo-bootstrap.png") no-repeat;
background-size: 1200px;
background-position: center -40px;
}
/* Gradients */
.bgtb-white-pure-moon {
background-image: linear-gradient(#fff, #f5f5fa);