diff --git a/docs/package.json b/docs/package.json index 8d288a8a..dbc94ef5 100644 --- a/docs/package.json +++ b/docs/package.json @@ -52,7 +52,7 @@ "puppeteer": "^1.6.1", "stylelint": "^9.3.0", "stylelint-csstree-validator": "^1.3.0", - "tailwindcss": "^0.6.1" + "tailwindcss": "^0.6.4" }, "peerDependencies": {}, "dependencies": { diff --git a/docs/src/_layouts/homepage.pug b/docs/src/_layouts/homepage.pug index cee3cf54..ae008dcf 100644 --- a/docs/src/_layouts/homepage.pug +++ b/docs/src/_layouts/homepage.pug @@ -1,37 +1,138 @@ extends main.pug block content - .bgtb-white-pure-moon.pt-3.pb-3.poppins - .max-w-lg.m-auto.text-center.px-1 - img.h-3.md_h-4(src="assets/talksearch-logo.png", alt="TalkSearch logo") + .bg-docsearch-hero + .max-w-lg.m-auto.text-center + img.h-3.mt-3(src="assets/docsearch-logo.svg", alt="DocSearch logo") + .text-2.text-nova.mb-3 The best search experience for docs, integrates in minutes, for free. + .text-4.text-telluric.mb-2 Already 847 docs are providing search through DocSearch + a.c-button.c-button-primary(href="what-is-talksearch.html") Join the Program - .bg-moon - .flex.flrnw.max-w-xl.m-auto - .flex.flrw.my-2 - .fln.w-100.md_w-50.my-2.flex.flrnw.flc - a.fake-browser.fln.w-80.text-0.shadow-1(href="demos/dotconferences/") - img.rounded-b-auto(src="assets/still-dotconferences.png", alt="Example of TalkSearch on dotConferences") - .fln.w-100.md_w-50.flex.flrnw.flc - .c-card.w-80.p-1 - .text-3 - .p-1 TalkSearch is currently in private beta. - .p-1 If you'd like to join, send us an email at - a(href="mailto:talksearch@algolia.com") talksearch@algolia.com - - - + img(src="assets/logos/babel.png", alt="DocSearch + ", width=80) + img(src="assets/logos/bootstrap.png", alt="DocSearch + ", width=80) + img(src="assets/logos/circleio.jpg", alt="DocSearch + ", width=80) + img(src="assets/logos/cordova.png", alt="DocSearch + ", width=80) + img(src="assets/logos/electron.png", alt="DocSearch + ", width=80) + img(src="assets/logos/ember.png", alt="DocSearch + ", width=80) + img(src="assets/logos/eslint.jpg", alt="DocSearch + ", width=80) + img(src="assets/logos/gitlab.png", alt="DocSearch + ", width=80) + img(src="assets/logos/go.png", alt="DocSearch + ", width=80) + img(src="assets/logos/grafana.png", alt="DocSearch + ", width=80) + img(src="assets/logos/graphql.png", alt="DocSearch + ", width=80) + img(src="assets/logos/jekyll.jpg", alt="DocSearch + ", width=80) + img(src="assets/logos/netlify.png", alt="DocSearch + ", width=80) + img(src="assets/logos/paypal.jpg", alt="DocSearch + " , width=80) + img(src="assets/logos/postman.png", alt="DocSearch + ", width=80) + img(src="assets/logos/react.png", alt="DocSearch + ", width=80) + img(src="assets/logos/scala.png", alt="DocSearch + ", width=80) + img(src="assets/logos/serverless.png", alt="DocSearch + ", width=80) + img(src="assets/logos/socketio.png", alt="DocSearch + " , width=80) + img(src="assets/logos/stripe.png", alt="DocSearch + ", width=80) + img(src="assets/logos/symfony.png", alt="DocSearch + ", width=80) + img(src="assets/logos/trello.png", alt="DocSearch + ", width=80) + img(src="assets/logos/vue.png", alt="DocSearch + ", width=80) + img(src="assets/logos/webpack.png", alt="DocSearch + ", width=80) + 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.text-center + .max-w-md.m-auto + .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 + 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 + 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. + .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. + .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. + + + .max-w-xl.m-auto.pt-1 - .max-w-md.m-auto.px-1 - .text-solstice.text-5.normal.pb-2 Why TalkSearch? - .pb-2.text-3.leading-2 As conference organizers, we spend a lot of time and effort making sure our event will bring value to the audience. We hand-pick speakers with great content and we love when people share their knowledge to make everyone a better developer. - .pb-2.text-3.leading-2 That's why we record the talks, so we can then share them with people that could not attend in the first place. But that's hours and hours of content. Surely there is a better way to make this content discoverable? - .pb-2.text-3.leading-2 That's why we built TalkSearch. TalkSearch will allow your visitors to browse all your talks and search for any topic they're interested in. It will even search into what the speakers are actually saying and jump right to the matching moment in the video. - .p-2.flex.flrnw.flc - a.c-button.c-button-primary(href="what-is-talksearch.html") Check the documentation - - - .text-solstice.text-5.normal.pb-2 Demos - + .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-xl.m-auto.pt-1 + .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. + .flex.flrw + .fln.w-100.sm_w-50.md_w-33.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='demos/dotconferences/animated.gif', alt='Example of TalkSearch on dotConferences') + .fln.pt-1.flex.flrnw.flc.pl-1 + .fln.text-0 + img.h-2(src='demos/dotconferences/logo-small.png', alt='Logo of dotConferences') + .fla.pl-1.text-solstice.uppercase.bold dotConferences + .fln.w-100.sm_w-50.md_w-33.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='demos/saastr/animated.gif', alt='Example of TalkSearch on Saastr') + .fln.pt-1.flex.flrnw.flc.pl-1 + .fln.text-0 + img.h-2(src='demos/saastr/logo-small.png', alt='Logo of Saastr') + .fla.pl-1.text-solstice.uppercase.bold Saastr + .fln.w-100.sm_w-50.md_w-33.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='demos/googleio/animated.gif', alt='Example of TalkSearch on Google I/O') + .fln.pt-1.flex.flrnw.flc.pl-1 + .fln.text-0 + img.h-2(src='demos/googleio/logo-small.png', alt='Logo of Google I/O') + .fla.pl-1.text-solstice.uppercase.bold Google I/O + .fln.w-100.sm_w-50.md_w-33.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='demos/usi/animated.gif', alt='Example of TalkSearch on USI') + .fln.pt-1.flex.flrnw.flc.pl-1 + .fln.text-0 + img.h-2(src='demos/usi/logo-small.png', alt='Logo of USI') + .fla.pl-1.text-solstice.uppercase.bold USI + .fln.w-100.sm_w-50.md_w-33.p-1.flex.flrnw + a.c-card.custom-demo.fla.flex.flcnw.p-05(href='demos/chatbot-summit/') + .fln.flc.relative.text-0.max-w-5.m-auto + img(src='demos/chatbot-summit/animated.gif', alt='Example of TalkSearch on Chatbot Summit') + .fln.pt-1.flex.flrnw.flc.pl-1 + .fln.text-0 + img.h-2(src='demos/chatbot-summit/logo-alternate.png', alt='Logo of Chatbot Summit') + .fla.pl-1.text-solstice.uppercase.bold Chatbot Summit + .fln.w-100.sm_w-50.md_w-33.p-1.flex.flrnw + a.c-card.custom-demo.fla.flex.flcnw.p-05(href='demos/takeoffconference/') + .fln.flc.relative.text-0.max-w-5.m-auto + img(src='demos/takeoffconference/animated.gif', alt='Example of TalkSearch on TakeOff Conf') + .fln.pt-1.flex.flrnw.flc.pl-1 + .fln.text-0 + 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-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! diff --git a/docs/src/_layouts/styleguide.pug b/docs/src/_layouts/styleguide.pug new file mode 100644 index 00000000..acfc646a --- /dev/null +++ b/docs/src/_layouts/styleguide.pug @@ -0,0 +1,4 @@ +extends main.pug + +block content + diff --git a/docs/src/_styles/tailwind.css b/docs/src/_styles/tailwind.css index e2806c97..596cce6e 100644 --- a/docs/src/_styles/tailwind.css +++ b/docs/src/_styles/tailwind.css @@ -1,2 +1,3 @@ @tailwind preflight; +@tailwind components; @tailwind utilities; diff --git a/docs/src/assets/bg-docsearch-live-demo-bootstrap.png b/docs/src/assets/bg-docsearch-live-demo-bootstrap.png new file mode 100644 index 00000000..eaa9a813 Binary files /dev/null and b/docs/src/assets/bg-docsearch-live-demo-bootstrap.png differ diff --git a/docs/src/assets/bg-docsearch.svg b/docs/src/assets/bg-docsearch.svg new file mode 100644 index 00000000..8383768b --- /dev/null +++ b/docs/src/assets/bg-docsearch.svg @@ -0,0 +1,72 @@ + + + + bg-docsearch + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/src/assets/docsearch-UI-anatomy.png b/docs/src/assets/docsearch-UI-anatomy.png new file mode 100644 index 00000000..c3147c5a Binary files /dev/null and b/docs/src/assets/docsearch-UI-anatomy.png differ diff --git a/docs/src/assets/docsearch-how-it-works.png b/docs/src/assets/docsearch-how-it-works.png new file mode 100644 index 00000000..f857f2eb Binary files /dev/null and b/docs/src/assets/docsearch-how-it-works.png differ diff --git a/docs/src/assets/docsearch-logo.svg b/docs/src/assets/docsearch-logo.svg new file mode 100644 index 00000000..d31cfb9c --- /dev/null +++ b/docs/src/assets/docsearch-logo.svg @@ -0,0 +1,33 @@ + + + + docsearch-logo + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/docs/src/assets/logos/babel.png b/docs/src/assets/logos/babel.png new file mode 100644 index 00000000..733bcb76 Binary files /dev/null and b/docs/src/assets/logos/babel.png differ diff --git a/docs/src/assets/logos/bootstrap.png b/docs/src/assets/logos/bootstrap.png new file mode 100644 index 00000000..0213a6fb Binary files /dev/null and b/docs/src/assets/logos/bootstrap.png differ diff --git a/docs/src/assets/logos/circleio.jpg b/docs/src/assets/logos/circleio.jpg new file mode 100644 index 00000000..2700df31 Binary files /dev/null and b/docs/src/assets/logos/circleio.jpg differ diff --git a/docs/src/assets/logos/cordova.png b/docs/src/assets/logos/cordova.png new file mode 100644 index 00000000..dba556f0 Binary files /dev/null and b/docs/src/assets/logos/cordova.png differ diff --git a/docs/src/assets/logos/electron.png b/docs/src/assets/logos/electron.png new file mode 100644 index 00000000..82099380 Binary files /dev/null and b/docs/src/assets/logos/electron.png differ diff --git a/docs/src/assets/logos/ember.png b/docs/src/assets/logos/ember.png new file mode 100644 index 00000000..2af918c6 Binary files /dev/null and b/docs/src/assets/logos/ember.png differ diff --git a/docs/src/assets/logos/eslint.jpg b/docs/src/assets/logos/eslint.jpg new file mode 100644 index 00000000..fce91d86 Binary files /dev/null and b/docs/src/assets/logos/eslint.jpg differ diff --git a/docs/src/assets/logos/gitlab.png b/docs/src/assets/logos/gitlab.png new file mode 100644 index 00000000..552638c2 Binary files /dev/null and b/docs/src/assets/logos/gitlab.png differ diff --git a/docs/src/assets/logos/go.png b/docs/src/assets/logos/go.png new file mode 100644 index 00000000..7baba532 Binary files /dev/null and b/docs/src/assets/logos/go.png differ diff --git a/docs/src/assets/logos/grafana.png b/docs/src/assets/logos/grafana.png new file mode 100644 index 00000000..c929d366 Binary files /dev/null and b/docs/src/assets/logos/grafana.png differ diff --git a/docs/src/assets/logos/graphql.png b/docs/src/assets/logos/graphql.png new file mode 100644 index 00000000..de9c3a7c Binary files /dev/null and b/docs/src/assets/logos/graphql.png differ diff --git a/docs/src/assets/logos/jekyll.jpg b/docs/src/assets/logos/jekyll.jpg new file mode 100644 index 00000000..6121d65e Binary files /dev/null and b/docs/src/assets/logos/jekyll.jpg differ diff --git a/docs/src/assets/logos/laravel.png b/docs/src/assets/logos/laravel.png new file mode 100644 index 00000000..b65e3f42 Binary files /dev/null and b/docs/src/assets/logos/laravel.png differ diff --git a/docs/src/assets/logos/netlify.png b/docs/src/assets/logos/netlify.png new file mode 100644 index 00000000..7af530e0 Binary files /dev/null and b/docs/src/assets/logos/netlify.png differ diff --git a/docs/src/assets/logos/paypal.jpg b/docs/src/assets/logos/paypal.jpg new file mode 100644 index 00000000..123d25c4 Binary files /dev/null and b/docs/src/assets/logos/paypal.jpg differ diff --git a/docs/src/assets/logos/postman.png b/docs/src/assets/logos/postman.png new file mode 100644 index 00000000..59044d0f Binary files /dev/null and b/docs/src/assets/logos/postman.png differ diff --git a/docs/src/assets/logos/react.png b/docs/src/assets/logos/react.png new file mode 100644 index 00000000..3c3f358d Binary files /dev/null and b/docs/src/assets/logos/react.png differ diff --git a/docs/src/assets/logos/scala.png b/docs/src/assets/logos/scala.png new file mode 100644 index 00000000..d128b6c0 Binary files /dev/null and b/docs/src/assets/logos/scala.png differ diff --git a/docs/src/assets/logos/serverless.png b/docs/src/assets/logos/serverless.png new file mode 100644 index 00000000..70768a9e Binary files /dev/null and b/docs/src/assets/logos/serverless.png differ diff --git a/docs/src/assets/logos/socketio.png b/docs/src/assets/logos/socketio.png new file mode 100644 index 00000000..f3c67523 Binary files /dev/null and b/docs/src/assets/logos/socketio.png differ diff --git a/docs/src/assets/logos/stripe.png b/docs/src/assets/logos/stripe.png new file mode 100644 index 00000000..582277ad Binary files /dev/null and b/docs/src/assets/logos/stripe.png differ diff --git a/docs/src/assets/logos/symfony.png b/docs/src/assets/logos/symfony.png new file mode 100644 index 00000000..40371061 Binary files /dev/null and b/docs/src/assets/logos/symfony.png differ diff --git a/docs/src/assets/logos/trello.png b/docs/src/assets/logos/trello.png new file mode 100644 index 00000000..7ebb26cf Binary files /dev/null and b/docs/src/assets/logos/trello.png differ diff --git a/docs/src/assets/logos/vue.png b/docs/src/assets/logos/vue.png new file mode 100644 index 00000000..0c973f92 Binary files /dev/null and b/docs/src/assets/logos/vue.png differ diff --git a/docs/src/assets/logos/webpack.png b/docs/src/assets/logos/webpack.png new file mode 100644 index 00000000..b2194719 Binary files /dev/null and b/docs/src/assets/logos/webpack.png differ diff --git a/docs/src/assets/logos/yarn.jpg b/docs/src/assets/logos/yarn.jpg new file mode 100644 index 00000000..57fb743a Binary files /dev/null and b/docs/src/assets/logos/yarn.jpg differ diff --git a/docs/src/style.css b/docs/src/style.css index 1e25599e..61ec476e 100644 --- a/docs/src/style.css +++ b/docs/src/style.css @@ -5,6 +5,20 @@ @import "./_styles/highlight.css"; @import "./_styles/docsearch.css"; +/* Antialiasing */ +* { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* 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; +} + /* Gradients */ .bgtb-white-pure-moon { background-image: linear-gradient(#fff, #f5f5fa); @@ -113,4 +127,3 @@ code { 50px 0 0 rgba(236, 139, 99, 0.5); } } -