mirror of
https://github.com/jbowdre/virtuallypotato.git
synced 2024-11-21 22:42:19 +00:00
switch to built-in search but placed in top nav intead of sidebar
This commit is contained in:
parent
76c9d66927
commit
8cea9c6d7b
7 changed files with 13 additions and 156 deletions
|
|
@ -11,75 +11,3 @@ Array.from(myLabels).forEach(label => {
|
|||
};
|
||||
});
|
||||
});
|
||||
|
||||
// Search helpers from https://github.com/onweru/compose
|
||||
const rootURL = window.location.protocol + "//" + window.location.host;
|
||||
const searchFieldClass = '.search_field';
|
||||
const searchClass = '.search';
|
||||
const quickLinks = '{{ T "quick_links" }}';
|
||||
const searchResultsLabel = '{{ T "search_results_label" }}';
|
||||
const shortSearchQuery = '{{ T "short_search_query" }}'
|
||||
const typeToSearch = '{{ T "type_to_search" }}';
|
||||
const noMatchesFound = '{{ T "no_matches" }}';
|
||||
|
||||
function createEl(element = 'div') {
|
||||
return document.createElement(element);
|
||||
}
|
||||
|
||||
function emptyEl(el) {
|
||||
while(el.firstChild)
|
||||
el.removeChild(el.firstChild);
|
||||
}
|
||||
|
||||
function wrapText(text, context, wrapper = 'mark') {
|
||||
let open = `<${wrapper}>`;
|
||||
let close = `</${wrapper}>`;
|
||||
let escapedOpen = `%3C${wrapper}%3E`;
|
||||
let escapedClose = `%3C/${wrapper}%3E`;
|
||||
function wrap(context) {
|
||||
let c = context.innerHTML;
|
||||
let pattern = new RegExp(text, "gi");
|
||||
let matches = text.length ? c.match(pattern) : null;
|
||||
|
||||
if(matches) {
|
||||
matches.forEach(function(matchStr){
|
||||
c = c.replaceAll(matchStr, `${open}${matchStr}${close}`);
|
||||
context.innerHTML = c;
|
||||
});
|
||||
|
||||
const images = elems('img', context);
|
||||
|
||||
if(images) {
|
||||
images.forEach(image => {
|
||||
image.src = image.src.replaceAll(open, '').replaceAll(close, '').replaceAll(escapedOpen, '').replaceAll(escapedClose, '');
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const contents = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "code", "td"];
|
||||
|
||||
contents.forEach(function(c){
|
||||
const cs = elems(c, context);
|
||||
if(cs.length) {
|
||||
cs.forEach(function(cx, index){
|
||||
if(cx.children.length >= 1) {
|
||||
Array.from(cx.children).forEach(function(child){
|
||||
wrap(child);
|
||||
})
|
||||
wrap(cx);
|
||||
} else {
|
||||
wrap(cx);
|
||||
}
|
||||
// sanitize urls and ids
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const hyperLinks = elems('a');
|
||||
if(hyperLinks) {
|
||||
hyperLinks.forEach(function(link){
|
||||
link.href = link.href.replaceAll(encodeURI(open), "").replaceAll(encodeURI(close), "");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,13 +7,6 @@ html, body
|
|||
&_brand
|
||||
img
|
||||
max-height: 2rem
|
||||
// search box
|
||||
&_search
|
||||
display: grid
|
||||
align-items: center
|
||||
.search
|
||||
@media screen and (min-width: 992px)
|
||||
margin-right: 1.5rem
|
||||
|
||||
.sidebar
|
||||
&_badge
|
||||
|
|
@ -77,58 +70,3 @@ code
|
|||
word-break: normal
|
||||
&.noClass
|
||||
line-break: normal
|
||||
|
||||
|
||||
// search from https://github.com/onweru/compose
|
||||
.search
|
||||
flex: 1
|
||||
display: flex
|
||||
justify-content: flex-end
|
||||
position: relative
|
||||
&_field
|
||||
padding: 0.5rem 1.5rem 0.5rem 2.5rem
|
||||
border-radius: 1.5rem
|
||||
width: 13.5rem
|
||||
outline: none
|
||||
border: none
|
||||
background: transparent
|
||||
color: var(--text)
|
||||
box-shadow: 0 1rem 4rem rgba(0,0,0,0.17)
|
||||
font-size: 1rem
|
||||
&_label
|
||||
width: 1rem
|
||||
height: 1rem
|
||||
position: absolute
|
||||
left: 0.33rem
|
||||
top: 0.25rem
|
||||
opacity: 0.33
|
||||
svg
|
||||
width: 100%
|
||||
height: 100%
|
||||
fill: var(--text)
|
||||
&_result
|
||||
padding: 0.5rem 1rem
|
||||
&:not(.passive):hover
|
||||
background-color: var(--theme)
|
||||
color: var(--light)
|
||||
&.passive
|
||||
display: grid
|
||||
&s
|
||||
width: 13.5rem
|
||||
background-color: var(--bg)
|
||||
border-radius: 0 0 0.25rem 0.25rem
|
||||
box-shadow: 0 1rem 4rem rgba(0,0,0,0.17)
|
||||
position: absolute
|
||||
top: 125%
|
||||
display: grid
|
||||
overflow: hidden
|
||||
z-index: 5
|
||||
&:empty
|
||||
display: none
|
||||
&_title
|
||||
padding: 0.5rem 1rem 0.5rem 1rem
|
||||
background: var(--theme)
|
||||
color: var(--light)
|
||||
font-size: 0.9rem
|
||||
opacity: 0.87
|
||||
text-transform: uppercase
|
||||
|
|
|
|||
|
|
@ -32,3 +32,12 @@ html
|
|||
&.tip
|
||||
border-color: hsl(93, 85%, 32%)
|
||||
background: hsl(93, 100%, 21%)
|
||||
|
||||
// search
|
||||
.search
|
||||
max-width: 20rem
|
||||
margin: 0.4rem 0 0.4rem 0
|
||||
&_field
|
||||
background: var(--translucent-light)
|
||||
color: var(--light)
|
||||
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ numberOfRelatedPosts = 6
|
|||
numberOfFeaturedPosts = 4
|
||||
toc = true
|
||||
timeless = false
|
||||
enableSearch = true
|
||||
|
||||
## Website author
|
||||
[author]
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
{{- $.Scratch.Add "index" slice -}}
|
||||
{{- range .Site.Pages -}}
|
||||
{{- if ne .Type "search" -}}
|
||||
{{- $.Scratch.Add "index" (dict "title" .Title "body" .Plain "link" .Permalink) -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- jsonify (uniq ($.Scratch.Get "index")) -}}
|
||||
|
|
@ -30,8 +30,8 @@
|
|||
{{- if $centerLogo }}
|
||||
{{- partial "logo" (dict "logo" $logo "class" "nav_center") }}
|
||||
{{- end }}
|
||||
<li class="nav_search">
|
||||
{{- partial "search" . }}
|
||||
<li class="search">
|
||||
{{ partialCached "search/widget" . }}
|
||||
</li>
|
||||
{{- partialCached "follow" . }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
<!-- search from https://github.com/onweru/compose -->
|
||||
<div class="search">
|
||||
<label for="find" class="search_label">
|
||||
<svg class="icon icon_search">
|
||||
<use xlink:href="#search"></use>
|
||||
</svg>
|
||||
</label>
|
||||
<input type="search" class="search_field" placeholder='{{ T "search_field_placeholder" }}' id="find" autocomplete="off">
|
||||
<div class="search_results results"></div>
|
||||
</div>
|
||||
<script src="{{ "/js/fuse.js" | relURL }}"></script>
|
||||
<script src="{{ "/js/search.js" | relURL }}"></script>
|
||||
Loading…
Reference in a new issue