diff --git a/docs/src/_layouts/homepage.pug b/docs/src/_layouts/homepage.pug index b5e244ff..d6c34c1f 100644 --- a/docs/src/_layouts/homepage.pug +++ b/docs/src/_layouts/homepage.pug @@ -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 diff --git a/docs/src/_layouts/main.pug b/docs/src/_layouts/main.pug index a21952c9..34bc9531 100644 --- a/docs/src/_layouts/main.pug +++ b/docs/src/_layouts/main.pug @@ -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 diff --git a/docs/src/assets/bg-docsearch-live-demo-bootstrap.png b/docs/src/assets/bg-docsearch-live-demo-bootstrap.png index 84965114..a7896d8a 100644 Binary files a/docs/src/assets/bg-docsearch-live-demo-bootstrap.png and b/docs/src/assets/bg-docsearch-live-demo-bootstrap.png differ diff --git a/docs/src/style.css b/docs/src/style.css index 81a70156..5e917020 100644 --- a/docs/src/style.css +++ b/docs/src/style.css @@ -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);