nikon/docsearch
1
0
Fork 0
Code Activity Actions

form + fixes

Browse source
This commit is contained in:
Shipow 2018-08-11 08:16:50 +02:00 committed by Pixelastic
parent b1060c39df
commit 64ee54a6b0
4 changed files with 148 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,10 +6,10 @@ block content
img.mt-3.mb-1(src="assets/docsearch-logo.svg", alt="DocSearch logo" width=480)
.text-2.text-nova.mb-3 The best search experience for docs, integrates in minutes, for free.
.text-5.text-telluric.mb-3 Currently providing search for 847 documentations.
a.c-button.c-button-primary(href="what-is-talksearch.html") Join the Program
a.c-button.c-button-primary(href="#join-docsearch-program") Join the Program
.bg-moon.p-3
.max-w-xl.m-auto.text-center.mb-3
.bg-moon.px-2
.max-w-xl.m-auto.text-center.my-3
.glide
.glide__track(data-glide-el="track")
.glide__slides
@ -66,7 +66,7 @@ block content
.max-w-md.m-auto.text-center
h2.text-solstice.text-5.normal.pb-2 Offer your docs a Learn-as-you-type experience
h2.text-solstice.text-5.normal.pb-2 State-of-the-art search for documentation
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.mb-2
@ -77,7 +77,7 @@ block content
.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
.text-solstice.text-5.normal.pb-2 Learn-as-you-type experience
.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-2
img(src="assets/docsearch-UI-anatomy.png", alt="Anatomy of DocSearch UI")
@ -87,67 +87,98 @@ block content
.max-w-xl.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")
.bg-analytics.px-2
.max-w-lg.m-auto.mt-2
.flex.flrw
.fln.w-100.sm_w-50.md_w-33.p-1
.fln.w-100.md_w-33.px-2.pb-2
h3.pb-1.text-3.leading-2 We crawl your documentation pages
p.text-2.leading-2.text-justify We built a website crawler designed to index every section of your documentation.
p.text-2.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.
.fln.w-100.sm_w-50.md_w-33.p-1
.fln.w-100.md_w-33.px-2.pb-2
h3.pb-1.text-3.leading-2 We configure your search experience
p.text-2.leading-2.text-justify You don’t need to configure any settings or even have an Algolia account.
p.text-2.leading-2.text-justify 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
.fln.w-100.md_w-33.px-2.pb-2
h3.pb-1.text-3.leading-2 You add the search autocomplete to your UI
p.text-2.leading-2.text-justify We’ll send you the script so you can integrate Algolia autocomplete to power your search.
p.text-2.leading-2.text-justify You will receive the same speed, relevance and best-in-class UX as our paying customers.
.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")
img.elevation(src="assets/illus-analytics.svg", alt="DocSearch Analytics")
.max-w-xl.m-auto.mt-4
.max-w-xl.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.
.flex.flrw
.fln.w-100.sm_w-50.md_w-25.p-1.flex.flrnw
a.c-card.custom-demo.fla.flex.flcnw.p-05(href='demos/dotconferences/')
.fln.flc.relative.text-0.max-w-5.m-auto
img(src='assets/demos/example-bootstrap.gif', alt='Bootstrap')
.fln.pt-1.flex.flrnw.flc.pl-1
.fln.text-0
img.h-2(src='assets/logos/bootstrap.png', alt='Bootstrap')
.fla.pl-1.text-solstice.uppercase.bold Bootstrap
.fln.w-100.sm_w-50.md_w-25.p-1.flex.flrnw
a.c-card.custom-demo.fla.flex.flcnw.p-05(href='demos/saastr/')
.fln.flc.relative.text-0.max-w-5.m-auto
img(src='assets/demos/example-vuejs.gif', alt='Vue')
.fln.pt-1.flex.flrnw.flc.pl-1
.fln.text-0
img.h-2(src='assets/logos/vue.png', alt='Vue')
.fla.pl-1.text-solstice.uppercase.bold Vue
.fln.w-100.sm_w-50.md_w-25.p-1.flex.flrnw
a.c-card.custom-demo.fla.flex.flcnw.p-05(href='demos/googleio/')
.fln.flc.relative.text-0.max-w-5.m-auto
img(src='assets/demos/example-react.gif', alt='React')
.fln.pt-1.flex.flrnw.flc.pl-1
.fln.text-0
img.h-2(src='assets/logos/react.png', alt='React')
.fla.pl-1.text-solstice.uppercase.bold React
.fln.w-100.sm_w-50.md_w-25.p-1.flex.flrnw
a.c-card.custom-demo.fla.flex.flcnw.p-05(href='demos/usi/')
.fln.flc.relative.text-0.max-w-5.m-auto
img(src='assets/demos/example-stripe.gif', alt='Stripe')
.fln.pt-1.flex.flrnw.flc.pl-1
.fln.text-0
img.h-2(src='assets/logos/stripe.png', alt='Stripe')
.fla.pl-1.text-solstice.uppercase.bold Stripe
.max-w-xl.m-auto.mt-4.px-1.pb-3
.text-solstice.text-5.normal.pb-2.text-center Try it live
.pb-2.text-3.leading-2.text-center We’ve helped to integrate DocSearch into several open source projects. Take a look.
.flex.flrw
.fln.w-100.sm_w-50.md_w-25.p-1.flex.flrnw
a.c-card.custom-demo.fla.flex.flcnw.p-05(href='http://getbootstrap.com/docs/4.1/getting-started/introduction/')
.fln.flc.relative.text-0.max-w-5.m-auto
img(src='assets/demos/example-bootstrap.gif', alt='Bootstrap')
.fln.pt-1.flex.flrnw.flc.pl-1
.fln.text-0
img.h-2(src='assets/logos/bootstrap.png', alt='Bootstrap')
.fla.pl-1.text-solstice.uppercase.bold Bootstrap
.fln.w-100.sm_w-50.md_w-25.p-1.flex.flrnw
a.c-card.custom-demo.fla.flex.flcnw.p-05(href='https://vuejs.org/v2/guide/')
.fln.flc.relative.text-0.max-w-5.m-auto
img(src='assets/demos/example-vuejs.gif', alt='Vue')
.fln.pt-1.flex.flrnw.flc.pl-1
.fln.text-0
img.h-2(src='assets/logos/vue.png', alt='Vue')
.fla.pl-1.text-solstice.uppercase.bold Vue
.fln.w-100.sm_w-50.md_w-25.p-1.flex.flrnw
a.c-card.custom-demo.fla.flex.flcnw.p-05(href='https://reactjs.org/docs/getting-started.html')
.fln.flc.relative.text-0.max-w-5.m-auto
img(src='assets/demos/example-react.gif', alt='React')
.fln.pt-1.flex.flrnw.flc.pl-1
.fln.text-0
img.h-2(src='assets/logos/react.png', alt='React')
.fla.pl-1.text-solstice.uppercase.bold React
.fln.w-100.sm_w-50.md_w-25.p-1.flex.flrnw
a.c-card.custom-demo.fla.flex.flcnw.p-05(href='https://stripe.com/docs')
.fln.flc.relative.text-0.max-w-5.m-auto
img(src='assets/demos/example-stripe.gif', alt='Stripe')
.fln.pt-1.flex.flrnw.flc.pl-1
.fln.text-0
img.h-2(src='assets/logos/stripe.png', alt='Stripe')
.fla.pl-1.text-solstice.uppercase.bold Stripe
.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!
.bg-footer(id="join-docsearch-program").px-3
.max-w-sm.m-auto.mt-2
.max-w-md.m-auto.py-3
.text-5.normal.pb-2.text-white.text-center Get started
.pb-3.text-3.leading-2.text-white.text-center 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!
form.m-auto.max-w-sm.elevation.p-3
.mb-2
label.control-label(for="url") Website
input.form-control(name="url", placeholder="https://website.com/doc")
p.text-grey-dark.text-xs.italic We’ll crawl the <u>documentation pages</u> of your website and index them on Algolia.
.mb-2
label.control-label(for="email") Email
input.form-control(name="email", placeholder="you@example.org", type="email")
p.text-grey-dark.text-xs.italic We’ll email you the code you need to integrate the search into your documentation.
.mb-2
label
input(name="owner", type="checkbox")
span I'm the <u>owner</u> of that website
.mb-2
p Refer to
a.clickable(href="https://www.algolia.com/policies/terms") Algolia's Privacy Policy
| for more information on how we use and protect your data
button.c-button.c-button-primary.w-full.block(type="submit") Join the program
ul
li Docsearch 2015-2018
li Designed and built with love by Algolia
li Code licensed under MIT
li Github
li Issue
li Changelog
li Discord

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

@ -22,7 +22,6 @@ html(lang='en')
link(type="text/css", rel="stylesheet", href="./style.css")
link(type="text/css", rel="stylesheet", href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css")
link(type="text/css", rel="stylesheet", href="https://unpkg.com/@glidejs/glide@3.2.3/dist/css/glide.core.min.css")
link(type="text/css", rel="stylesheet", href="https://unpkg.com/@glidejs/glide@3.2.3/dist/css/glide.theme.min.css")
body.hind.text-telluric
include ../_includes/tag-manager-noscript.pug
include ../_includes/header.pug
@ -39,7 +38,6 @@ html(lang='en')
| inputSelector: '.custom-search-input',
| debug: false
|});
|docsearch({
| apiKey: '5990ad008512000bba2cf951ccf0332f',
| indexName: 'bootstrap',

33
docs/src/assets/bg-footer.svg Normal file
View file

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1413px" height="711px" viewBox="0 0 1413 711" 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(-303.000000, 0.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>
Side by side

After

Width:  |  Height:  |  Size: 6.7 KiB

38
docs/src/style.css
View file

@ -24,6 +24,20 @@ body {
background-position: center calc(100% - 18px);
}
.bg-analytics {
background-image: url('assets/bg-analytics.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center 250px;
}
.bg-footer {
background-image: url('assets/bg-footer.svg');
background-size: cover;
background-repeat: no-repeat;
background-position: center -150px;
}
/* Logo slider (gslide) */
.glide__slide{
border-radius: 8px;
@ -67,14 +81,28 @@ body {
}
/* Gradients */
.bgtb-white-pure-moon {
background-image: linear-gradient(#fff, #f5f5fa);
.control-label {
display: inline-block;
margin-bottom: 4px;
font-weight: bold;
text-transform: uppercase;
}
.bgtb-moon-white-pure {
background-image: linear-gradient(#f5f5fa, #fff);
.form-control {
border-radius: 4px;
border: solid 1px #DBDBE7;
padding: 8px 16px;
width: 100%;
margin-bottom: 8px;
}
.elevation {
background-image: linear-gradient(0deg, #F5F5FA 0%, #FFFFFF 100%);
box-shadow: 0 2px 4px 0 rgba(93,100,148,0.20), 0 5px 15px 0 rgba(37,44,97,0.15);
border-radius: 5px;
}
/* Global styles */
a,
a:active {