From 0927c746b5df4eee6e66eb4c351fca74bbb35bc5 Mon Sep 17 00:00:00 2001 From: Shipow Date: Sat, 11 Aug 2018 19:25:18 +0200 Subject: [PATCH] fixed js + added tooltips --- docs/package.json | 3 +- docs/scripts/lib/js.js | 5 +- docs/src/_layouts/homepage.pug | 18 ++++++-- docs/src/_layouts/main.pug | 23 ++-------- docs/src/js/main.js | 67 +++++++++++++++++++++++++++ docs/src/style.css | 83 +++++++++++++++++++++++----------- 6 files changed, 146 insertions(+), 53 deletions(-) create mode 100644 docs/src/js/main.js diff --git a/docs/package.json b/docs/package.json index ad4961d2..37fe6dcd 100644 --- a/docs/package.json +++ b/docs/package.json @@ -56,6 +56,7 @@ }, "peerDependencies": {}, "dependencies": { - "@glidejs/glide": "^3.2.3" + "@glidejs/glide": "^3.2.3", + "popper.js": "^1.14.4" } } diff --git a/docs/scripts/lib/js.js b/docs/scripts/lib/js.js index cb21ce16..e555049e 100644 --- a/docs/scripts/lib/js.js +++ b/docs/scripts/lib/js.js @@ -33,7 +33,6 @@ export default { const relativePath = path.relative('./src', filepath); const destination = `./dist/${relativePath}`; let content = await helper.readFile(filepath); - content = await this.includeTemplates(content); content = await this.interpolatePlaceholders(content); content = await this.compileWithBabel(content, destination); @@ -42,7 +41,7 @@ export default { async run() { // Compile JavaScript files - const jsFiles = await helper.getFiles('*.js'); + const jsFiles = await helper.getFiles('js/*.js'); await pMap(jsFiles, async filepath => { await this.compile(filepath); }); @@ -50,7 +49,7 @@ export default { // Listen to changes in js files and rewrite them watch() { - helper.watch('./src/*.js', filepath => { + helper.watch('./src/js/*.js', filepath => { this.compile(filepath); }); }, diff --git a/docs/src/_layouts/homepage.pug b/docs/src/_layouts/homepage.pug index 40c6ea87..df0ccd6b 100644 --- a/docs/src/_layouts/homepage.pug +++ b/docs/src/_layouts/homepage.pug @@ -5,7 +5,7 @@ block content .max-w-md.m-auto.text-center.px-2 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 900+ documentations + .text-5.text-telluric.mb-3 Currently providing search for 900+ projects docs a.c-button.c-button-primary(href="#join-docsearch-program") Join the Program .bg-moon.px-2 @@ -65,9 +65,9 @@ block content img(src="assets/logos/yarn.jpg", alt="DocSearch + Yarn", width=60) .max-w-md.m-auto.text-center - h2.text-solstice.text-5.normal.pb-2 State-of-the-art search for documentation + h2.text-solstice.text-5.normal.pb-2 State-of-the-art search for technical documentation p.text-3.pb-1.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.pb-2.text-telluric No one's to blame, building a good search is a complex challenge. We just happen to have a lot of experience doing that, and we want to share it with the world. + p.text-3.pb-2.text-telluric No one's to blame, building a good search is a complex challenge. We just happen to have a lot of experience doing that, and we want to share it with the developer community. .max-w-xl.m-auto.pt-3.mb-2 .demo-header-wrapper @@ -199,3 +199,15 @@ block content input#newsletter_email.form-control-primary.w-100(name="newsletter_email", placeholder="you@example.org", type="email") .fla.pl-1 .button.c-button.w-100 Sign Up + .hide + .my-popper + .popper__arrow(x-arrow='right') + img(src='https://docsearch-shared.netlify.com/docsearch-logo.png', alt='DocSearch', width=200) + p + | Try to search for expressions like + a.ds-sample-query(data-sample='ajax', href='#') ajax + | , + a.ds-sample-query(data-sample='live', href='#') live + | or + a.ds-sample-query(data-sample='html', href='#') html + | . diff --git a/docs/src/_layouts/main.pug b/docs/src/_layouts/main.pug index 42bce5b9..669e2ab7 100644 --- a/docs/src/_layouts/main.pug +++ b/docs/src/_layouts/main.pug @@ -4,7 +4,7 @@ html(lang='en') - const siteTitle = current.title || site.title - const siteDescription = site.description; - const siteUrl = site.url; - - const ogImage = siteUrl + 'img/og_image.png'; + - const ogImage = siteUrl + 'asets/og_image.png'; meta(charset='utf-8') meta('http-equiv'='x-ua-compatible',content='ie-edge') title= siteTitle @@ -30,22 +30,7 @@ html(lang='en') script(src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js") script(src="https://unpkg.com/@glidejs/glide@3.2.3/dist/glide.min.js") - - script - |docsearch({ - | apiKey: 'e3082526e1d5f37055241c335ab10f72', - | indexName: 'talksearch', - | 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: 16, autoplay: 1300, breakpoints : {600: { perView: 4 }, 800: { perView: 8 }, 1200: { perView: 10 }} }).mount()} - + script(src="https://unpkg.com/popper.js/dist/umd/popper.min.js") + script(src="js/main.js") + include ../_includes/tag-manager.pug diff --git a/docs/src/js/main.js b/docs/src/js/main.js new file mode 100644 index 00000000..87c3b512 --- /dev/null +++ b/docs/src/js/main.js @@ -0,0 +1,67 @@ +window.onload = function() { + const reference = document.querySelector( + '.docsearch-live-demo-input-wrapper' + ); + const popper = document.querySelector('.my-popper'); + + const anotherPopper = new Popper(reference, popper, { + placement: 'bottom-start', + }); + + function openDocsearch(sampleQuery) { + demoDocsearch.autocomplete.autocomplete.setVal(sampleQuery); + demoDocsearch.autocomplete.autocomplete.open(); + } + + function typeWriter() { + const speed = 250; + if (i < txt.length) { + query += txt.charAt(i); + openDocsearch(query); + i++; + setTimeout(typeWriter, speed); + } + } + + let i = 0; + let txt; + let query = ''; + + document.querySelectorAll('.ds-sample-query').forEach(el => { + el.onclick = function() { + txt = el.getAttribute('data-sample'); + typeWriter(); + }; + }); + + demoDocsearch.autocomplete.on('autocomplete:opened', () => { + anotherPopper.destroy(); + }); + + new Glide('.glide', { + type: 'carousel', + startAt: 0, + perView: 16, + autoplay: 1300, + breakpoints: { + 600: { perView: 4 }, + 800: { perView: 8 }, + 1200: { perView: 10 }, + }, + }).mount(); +}; + +docsearch({ + apiKey: 'e3082526e1d5f37055241c335ab10f72', + indexName: 'talksearch', + inputSelector: '.custom-search-input', + debug: false, +}); + +var demoDocsearch = docsearch({ + apiKey: '5990ad008512000bba2cf951ccf0332f', + indexName: 'bootstrap', + inputSelector: '.docsearch-live-demo-input', + enhancedSearchInput: true, + debug: false, +}); diff --git a/docs/src/style.css b/docs/src/style.css index 88b73f1f..4cc5ff12 100644 --- a/docs/src/style.css +++ b/docs/src/style.css @@ -4,22 +4,8 @@ @import "./_styles/fonts.css"; @import "./_styles/highlight.css"; @import "./_styles/docsearch.css"; -/* @import "node_modules/@glidejs/glide/src/assets/sass/glide.core"; */ - - - - -/* Antialiasing */ -* { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} /* Backgrounds */ -body { - background-color: #f5f5fa; -} - .bg-docsearch-hero { background-image: url('assets/bg-docsearch.svg'), linear-gradient(#fff, #f5f5fa); background-size: cover; @@ -84,6 +70,52 @@ body { background-position: center -46px; } +/* Tooltips (popper.js) */ +.my-popper { + padding: 24px; + min-width: 350px; + max-width: 48%; + margin: 0 auto; + box-shadow: 0 0 10px 2px #ccc; + background: #FFFFFF; + box-shadow: 0 8px 18px 0 rgba(37,44,97,0.15), 0 2px 4px 0 rgba(93,100,148,0.2); + z-index: 200; + font-size: 14px; + color: #8A8AAB; + line-height: 28px; + text-align: center; + background-image: linear-gradient(#fff, #f5f5fa); + border-radius: 2px; + border-top: solid 3px #5468ff; +} + +.my-popper .popper__arrow{ + width: 0; + height: 0; + border-style: solid; + position: absolute; + margin: 8px; +} + +.my-popper .popper__arrow { + border-color: white; +} + +.my-popper[x-placement^="bottom"] { + margin-top: 8px; +} + +.my-popper[x-placement^="bottom"] .popper__arrow { + border-width: 0 8px 8px 8px; + border-left-color: transparent; + border-right-color: transparent; + border-top-color: transparent; + top: -8px; + left: calc(50% - 8px); + margin-top: 0; + margin-bottom: 0; +} + /* Forms */ .control-label { display: inline-block; @@ -114,7 +146,17 @@ body { border-radius: 5px; } +/* Antialiasing */ +* { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + /* Global styles */ +body { + background-color: #f5f5fa; +} + a, a:active { @apply .cursor-pointer; @@ -179,19 +221,6 @@ code { pointer-events: auto; } -/* Demo on the homepage */ -.custom-demo-mask { - opacity: 1; - transition-property: opacity; - transition-duration: 0.25s; - will-change: opacity; -} -.custom-demo:hover { - .custom-demo-mask { - opacity: 0; - } -} - /** * When we need to show code in action, we often need to show screenshots or * screencasts. This class will still an element to make it look like a browser