Skip to content

Commit

Permalink
Adds search engine
Browse files Browse the repository at this point in the history 
Adds client-side static search funtionnality
  • Loading branch information
nbozon committed May 3, 2020
1 parent 5de4798 commit 0282d8e
Show file tree
Hide file tree
Showing 7 changed files with 250 additions and 39 deletions.
7 changes: 7 additions & 0 deletions content/search.md
View file
@@ -0,0 +1,7 @@
---
title: "Search"
date: 2020-04-19T09:13:35+02:00
layout: "search"
outputs: ["json"]
noindex: true
---
150 changes: 117 additions & 33 deletions themes/grass/assets/css/style.css
View file
Expand Up @@ -116,7 +116,7 @@ a.nws:hover {
}
.mwl-l {
display: inline-block;
min-width:65%;
min-width: 65%;
}
.version li {
margin-bottom: 9px;
Expand Down Expand Up @@ -187,7 +187,6 @@ body {
background-color: var(--white-color);
overflow-x: hidden;
}
/* preloader */

.preloader {
position: fixed;
Expand Down Expand Up @@ -262,8 +261,7 @@ a:focus, button:focus, select:focus {
color: var(--grey-color-light) !important;
font-family: open_sansregular !important;
font-size: 28px;
font-weight:100 !important;

font-weight: 100 !important;
}
.section-gtitle {
margin-bottom: 40px;
Expand Down Expand Up @@ -350,13 +348,9 @@ pre {
top: 0;
left: 0;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 0.47) 59%, rgba(255, 255, 255, 0) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 0.47) 59%, rgba(255, 255, 255, 0) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 0.47) 59%, rgba(255, 255, 255, 0) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
/* IE6-9 */
}
.overlayg {
position: relative;
Expand Down Expand Up @@ -638,7 +632,6 @@ padding-right .pds-40 {
max-width: 730px !important;
}
}
/* /navigation */

.breadcrumb {
margin-bottom: 0 !important;
Expand All @@ -663,7 +656,6 @@ ul.breadcrumb li a {
ul.breadcrumb li a:hover {
color: var(--grass-color-dark) !important;
}
/* Add a slash symbol (/) before/behind each list item */

ul.breadcrumb li+li:before {
padding: 6px;
Expand All @@ -673,19 +665,15 @@ ul.breadcrumb>li>i {
display: inline-block !important;
font-size: .85em;
}
/* Add a color to all links inside the list */

ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;
display: inline-block !important;
}
ul.breadcrumb li > span{
display:inline-block;
margin-top: 2px !important;
ul.breadcrumb li>span {
display: inline-block;
margin-top: 2px !important;
}
/* Add a color on mouse-over */

ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
Expand Down Expand Up @@ -740,7 +728,7 @@ ul {
margin: 0 0 20px 20px;
}
ul li a {
display: inline-block;
display: inline-block;
font-size: 15px;
font-weight: 400;
padding: 2px 0px;
Expand Down Expand Up @@ -822,10 +810,6 @@ li.parent::before {
li.parent a {
font-size: 20px;
}
#accordion i {
font-size: 14px;
line-height: 2;
}
.tind {
padding-left: 1em !important;
color: var(--grey-color-dark);
Expand All @@ -835,24 +819,124 @@ li.parent a {
min-height: 4rem !important;
height: 4rem !important;
}

.edt {
font-family: open_sansregular; !important;
font-family: open_sansregular;
!important;
}

nobullets {
list-style-type: none;
list-style-type: none;
}

.hljs {
background:#c5c8c6;
color: #1d1f21;
background: #c5c8c6;
color: #1d1f21;
}
.hljs-keyword {
color: #1d1f21;
}
code {
color: #1d1f21;
}
.search {
position: relative;
display: inline-block;
width: auto;
font-size: 15px;
padding: 0;
margin: 0;
vertical-align: middle;
}
.search-results {
display: none;
background-color: #fff;
position: absolute;
min-width: 100px;
top: 34px;
box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.12);
z-index: 1;
}
.search-results a {
color: var(--grey-color-light);
padding: .45rem 1.5rem;
text-decoration: none;
display: block;
}
.search-results a:hover {
background-color: #fff;
color: var(--grass-color-alt);
}
input[type=search] {
background: #FFFFFF;
border: 0;
padding: 1px 1px 1px 9px;
width: 32px;
transition: width 0.2s
}
input[type=search] {
cursor: pointer;
}
input[type=search]:focus {
display: inline-block;
background-color: #ffffff;
width: 100%;
outline: none;
color: green;
cursor: auto;
}
::placeholder {
color: var(--grey-color-light);
opacity: 1;
font-family: FontAwesome !important;
}
input[type=search]:hover::placeholder {
color: var(--grass-color-alt) !important;
}
:-ms-input-placeholder {
color: var(--grey-color-light);
}
::-ms-input-placeholder {
color: var(--grey-color-light);
}
::-webkit-input-placeholder {
opacity: 1;
-webkit-transition: opacity .5s;
transition: opacity .5s;
}
:-moz-placeholder {
opacity: 1;
-moz-transition: opacity .5s;
transition: opacity .5s;
}
/* FF 4-18 */

.hljs-keyword{
color: #1d1f21;
::-moz-placeholder {
opacity: 1;
-moz-transition: opacity .5s;
transition: opacity .5s;
}

:-ms-input-placeholder {
opacity: 1;
-ms-transition: opacity .5s;
transition: opacity .5s;
}

code{
color: #1d1f21;
::placeholder {
opacity: 1;
transition: opacity .5s;
}

*:focus::-webkit-input-placeholder {
opacity: 0;
}
*:focus:-moz-placeholder {
opacity: 0;
}
*:focus::-moz-placeholder {
opacity: 0;
}
*:focus:-ms-input-placeholder {
opacity: 0;
}
*:focus::placeholder {
opacity: 0;
}
34 changes: 34 additions & 0 deletions themes/grass/layouts/_default/search.json
View file
@@ -0,0 +1,34 @@
{{ $stopwords := (slice "again" "and" "in" "is" "no" "or" "this" "well" "yes") }}
{ "results": [
{{ $pages := (where .Site.RegularPages ".Params.noindex" "ne" true) }}
{{ $lastindex := (sub (len $pages) 1) }}
{{ range $index, $page := $pages }}
{{ $scratch := newScratch }}
{{- $content := (.Content | plainify | lower) -}}
{{- $content := (replaceRE "\"" "" $content) -}}
{{- $content := (replaceRE "\\\\" " " $content) -}}
{{- $content := (replaceRE "“" "" $content) -}}
{{- $content := (replaceRE "”" "" $content) -}}
{{- $content := (replaceRE "\n+" " " $content) -}}
{{- $content := (replaceRE "\r+" " " $content) -}}
{{- $content := (replaceRE "\t+" " " $content) -}}
{{- $content := (replaceRE " +" " " $content) }}
{{- $content := (trim $content " ") }}
{{- $words := (split $content " ") -}}
{
"url": "{{ .Permalink }}",
"title": "{{ .Title }}",
"content": "{{- range $words -}}
{{- $word := (.) -}}
{{- if and (not (in ($scratch.Get "seenwords") $word)) (ne (substr $word 0 1) $word) (not (in $stopwords $word)) -}}
{{- print $word " " -}}
{{- end -}}
{{ $scratch.Add "seenwords" (slice $word) }}
{{- end -}}"
}
{{- $scratch.Delete "seenwords" -}}
{{- if ne $lastindex $index }},{{ end }}
{{ end }}
]}


20 changes: 17 additions & 3 deletions themes/grass/layouts/partials/breadcrumb.html
View file
@@ -1,6 +1,6 @@
<div class="container">

<div class="col-lg-12">
<div class="row">
<div class="col-8">
<ul class="breadcrumb bg-white">
{{ $url := replace .Permalink ( printf "%s" .Site.BaseURL) "" }}
{{ $.Scratch.Add "path" .Site.BaseURL }}
Expand All @@ -16,7 +16,21 @@
{{ end }}
{{ end }}

</ul>
</ul>
</div>

<div class="col-4">
<div class="search pull-right" id="search">
<form>
<input type="search" placeholder="&#xf002" v-model="txt" @keyup="search()" @blur="close()" maxlength="50">
</form>
<div class="search-results" :style="{'display': showresult?'block':'none'}">
<a v-for="item in result" :href="item.url">{{ printf "{{ item.title }}" }}</a>
</div>
</div>
</div>

</div>
</div>


63 changes: 60 additions & 3 deletions themes/grass/layouts/partials/footer.html
View file
@@ -1,7 +1,6 @@
{{ "<!-- footer -->" | safeHTML }}
<footer class="section bg-gray pb-0">
<div class="container">

<div class="container">
<div class="row">
<div class="col-md-4 text-md-left text-center">
{{ with .Site.Params.copyright }} <p><small>{{ . }}</small></p> {{ end }}
Expand All @@ -28,12 +27,70 @@
{{ "<!-- highlight -->" | safeHTML }}
<script src="{{ .Site.BaseURL }}plugins/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

<script src="{{ .Site.BaseURL }}plugins/vue/vue.min.js"></script>
<script src="{{ .Site.BaseURL }}plugins/axios/axios.min.js"></script>
{{ "<!-- Main Script -->" | safeHTML }}
{{ $script := resources.Get "js/script.js" | minify}}
<script src="{{ $script.Permalink }}"></script>



<script>
let vuesearch = new Vue({
el: '#search',
data: {
txt: '',
timeoutID: 0,
showresult: true,
result: {},
bdd: []
},
mounted: function() {
axios.get('{{ with .Site.GetPage "/search.md" }}{{ .Permalink }}{{ end }}')
.then(function (response) {
vuesearch.bdd = response.data.results;
})
.catch(function (error) {
console.log(error);
});
},
methods: {
close: function() {
setTimeout(function() {
vuesearch.showresult = false;
vuesearch.txt = '';
}, 300);
},
search: function() {
clearTimeout(this.timeoutID);
this.timeoutID = setTimeout(this.dosearch, 500);
},
dosearch: function() {
this.result = [];
let words = this.txt.split(' ');
let words2 = [];
words.forEach(function(element) {
if(element) {words2.push(element);}
});
let r;
let resultmp;
words2.forEach(function(e) {
r = vuesearch.bdd.filter(p => p.content.indexOf(e.toLowerCase()) !== -1);
if(vuesearch.result.length===0) {vuesearch.result = r.slice(); return;}
resultmp = [];
vuesearch.result.forEach(function(all1) {
r.forEach(function(all2) {
if(all1.url===all2.url) {resultmp.push(all1);}
});
});
vuesearch.result = resultmp.slice();
});
this.result = this.result.slice(0, 5); // 5 results max
this.showresult = (this.result.length>0);
}
}
});
</script>
</body>

</html>

0 comments on commit 0282d8e

Please sign in to comment.