nikon/docsearch
1
0
Fork 0
Code Activity Actions

spacing

Browse source
This commit is contained in:
Shipow 2018-08-10 13:12:39 +02:00 committed by Pixelastic
parent 236701027d
commit 8e9b7c7e4a
3 changed files with 31 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,10 +5,11 @@ block content
.max-w-lg.m-auto.text-center
img.mt-3(src="assets/docsearch-logo.svg", alt="DocSearch logo" width=520)
.text-2.text-nova.mb-3 The best search experience for docs, integrates in minutes, for free.
.text-5.text-telluric.mb-2 Already 847 docs are providing search through DocSearch
.text-5.text-telluric.mb-3 Already 847 docs are providing search through DocSearch
a.c-button.c-button-primary(href="what-is-talksearch.html") Join the Program
.bg-moon
.max-w-lg.m-auto.text-center
.bg-moon.p-3
.max-w-lg.m-auto.text-center.mb-2
.glide
.glide__track(data-glide-el="track")
.glide__slides
@ -63,50 +64,47 @@ block content
.glide__slide
img(src="assets/logos/yarn.jpg", alt="DocSearch + ", width=80)
.bgtb-moon-white-pure
.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
img(src="assets/bg-docsearch-live-demo-bootstrap.png", alt="DocSearch logo")
.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.text-center
.max-w-md.m-auto
.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.
.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-xl.m-auto
.max-w-xl.m-auto.mb-3
img(src="assets/docsearch-UI-anatomy.png", alt="Anatomy of DocSearch UI")
.max-w-lg.m-auto.text-center
h2.text-solstice.text-5.normal.pb-2 How it works
.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
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
h3.pb-2.text-3.leading-2 We crawl your documentation pages
p.text-3 We built a website crawler designed to index every section of your documentation.
p.text-3 Just send us the URL of your documentation, and we’ll run the crawler every 24h so you’re always up-to-date.
h3.pb-1.text-3.leading-2 We crawl your documentation pages
p.text-2.leading-2 We built a website crawler designed to index every section of your documentation.
p.text-2.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.sm_w-50.md_w-33.p-1
h3.pb-2.text-3.leading-2 We configure your search experience
p.text-3 You don’t need to configure any settings or even have an Algolia account.
p.text-3 We take care of all of this automatically to ensure the best documentation search experience.
h3.pb-1.text-3.leading-2 We configure your search experience
p.text-2.leading-2 You don’t need to configure any settings or even have an Algolia account.
p.text-2.leading-2 We take care of all of this automatically to ensure the best documentation search experience.
.fln.w-100.sm_w-50.md_w-33.p-1
h3.pb-2.text-3.leading-2 You add the search autocomplete to your UI
p.text-3 We’ll send you the script so you can integrate Algolia autocomplete to power your search.
p.text-3 You will receive the same speed, relevance and best-in-class UX as our paying customers.
h3.pb-1.text-3.leading-2 You add the search autocomplete to your UI
p.text-2.leading-2 We’ll send you the script so you can integrate Algolia autocomplete to power your search.
p.text-2.leading-2 You will receive the same speed, relevance and best-in-class UX as our paying customers.
.max-w-xl.m-auto.pt-1
.max-w-xl.m-auto.mt-4
.max-w-md.m-auto.px-1.text-center
.text-solstice.text-5.normal.pb-2 Powerful Analytics with Algolia
.pb-2.text-3.leading-2 Search usage of your documentation givese you unvaluable insights about what your users need to ramp up their knowledge of your product. Follow metrics of popular queries, no results or click position to better optimize your content.
.max-w-lg.m-auto.mt-1
img(src="assets/illus-analytics.svg", alt="DocSearch Analytics")
.max-w-xl.m-auto.pt-1
.max-w-xl.m-auto.mt-4
.max-w-md.m-auto.px-1.text-center
.text-solstice.text-5.normal.pb-2 Try it live
.pb-2.text-3.leading-2 We’ve helped to integrate DocSearch into several open source projects. Take a look.
@ -160,8 +158,7 @@ block content
img.h-2(src='demos/takeoffconference/logo-small.png', alt='Logo of TakeOff Conf')
.fla.pl-1.text-solstice.uppercase.bold TakeOff Conf
.max-w-xl.m-auto.pt-1
.max-w-xl.m-auto.mt-4
.max-w-md.m-auto.px-1.text-center
.text-solstice.text-5.normal.pb-2 Get started
.pb-2.text-3.leading-2 We’ll get back to you within a few hours with everything you need to integrate your new search into your website. Oh, and did we mention it's FREE? No commitment. No subscription. Everything is on us!

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.6 MiB

After

Width:  |  Height:  |  Size: 1 MiB

6
docs/src/style.css
View file

@ -12,12 +12,16 @@
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #f5f5fa;
}
/* Hero */
.bg-docsearch-hero {
background-image: url('assets/bg-docsearch.svg'), linear-gradient(#fff, #f5f5fa);
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
background-position: center calc(100% - 18px);
}
/* Gradients */