fixed js + added tooltips
This commit is contained in:
Shipow
Pixelastic
parent
abef584fa3
commit
0927c746b5
6 changed files with 146 additions and 53 deletions
|
|
@ -56,6 +56,7 @@
|
|||
},
|
||||
"peerDependencies": {},
|
||||
"dependencies": {
|
||||
"@glidejs/glide": "^3.2.3"
|
||||
"@glidejs/glide": "^3.2.3",
|
||||
"popper.js": "^1.14.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
| .
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
67
docs/src/js/main.js
Normal file
67
docs/src/js/main.js
Normal file
|
|
@ -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,
|
||||
});
|
||||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue