feat: google search replaced with algolia search

- removed google search code from vuejs
- added algolia docs search scripts
This commit is contained in:
jirikrepl
2020-01-14 12:02:08 +01:00
parent c8beeb9770
commit ab90848b98
2 changed files with 11 additions and 61 deletions

View File

@@ -13,6 +13,8 @@
<script src="/js/smooth-scroll.js"></script>
<link href="/css/doc-theme.css?" rel="stylesheet">
<link rel="icon" href="/favicon.ico">
<!-- Algolia Docs Search -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
</head>
<body>
</script>
@@ -32,13 +34,13 @@
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.13/vuetify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.5.1/vue-resource.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
page: 1,
pageCount: 0,
q: null,
error: null,
results: null,
drawer: true,
@@ -67,62 +69,10 @@
}, 3500);
}
// we use a /search/ page essentially to generate/store a browser
// history, if in search page, query results
if (document.location.pathname === "/search/") {
this.q = decodeURI(window.location.search.split("=")[1])
this.fetchResults (this.q)
}
var elem2 = document.getElementById("vuetify-theme-stylesheet");
elem2.parentNode.removeChild(elem2);
},
methods: {
handleGoogleError() {
const q = 'site:docs.pycom.io ' + this.q;
const loc = encodeURI('https://bing.com?q=' + q)
window.location = loc
},
navResult (url) {
window.location = url;
},
fetchResults (kw, start) {
if (!start) { start = 1 }
let key = "AIzaSyCDyOKwSjrgE_tkSbO0kbI8Omc6VZMwqA8";
let cx = "000185904715529159933:pfyw5o4foii";
let url = "https://www.googleapis.com/customsearch/v1";
url = url + "?cx=" + cx + "&key=" + key + "&q=" + encodeURI(kw) + "&start=" + start
this.$http.get(url).then((res) => {
if (res.data) {
this.results = res.data
this.page = Math.trunc(res.data.queries.request[0].startIndex /10) + 1
// Mmm ... Google result number is varying accross page ....
this.pageCount = Math.min(10, Math.trunc(res.data.searchInformation.totalResults/10) + 1)
} else {
this.handleGoogleError();
this.results = null;
}
}, response => {
this.results = null;
console.log(response)
this.handleGoogleError();
this.error = { status: response.error, message: response.text }
// ====
})
},
search(p) {
window.location = '/search/?q=' + encodeURI(this.q)
},
pageClicked(p) {
event.stopPropagation()
event.preventDefault()
this.$nextTick(() => {
const start = ((this.page - 1) * 10) + 1
this.fetchResults(this.q, start)
})
},
},
watch: {
// whenever question changes, this function will run
branch: function (newb, old) {
@@ -130,10 +80,16 @@
window.location = newb + window.location.pathname
}
},
},
});
// initialize Algolia doc search
docsearch({
apiKey: 'a99fde9999fbec81c1772eb9ffcca488',
indexName: 'pycom',
inputSelector: '.algolia-search-field input',
debug: false // Set debug to true if you want to inspect the dropdown
});
</script>
{{- partial "alexia.html" . -}}

View File

@@ -5,18 +5,12 @@
class="lighten-4 pt-0"
style="overflow-y: hidden; overflow-x: hidden;margin-top:70px;"
>
<!--<v-container style="height: 68px; background-color: rgb(23, 23, 48);" class="dark mb-0 pb-1 pt-3 elevation-5 " >
<v-img class="ml-4" height=48 width=190 src="/logo.svg">
</v-container>-->
<v-container class="ma-0 pa-0 elevation-1">
<v-text-field
v-model="q"
style="width: 100%;"
@change="search"
@click:append="search"
class="grey lighten-5 mt-0 mr-2 pa-3 ma-0 mono"
class="grey lighten-5 mt-0 mr-2 pa-3 ma-0 mono algolia-search-field"
light
hide-details
append-icon="search"