Skip to content

Commit

Permalink
Extract search widget to component
Browse files Browse the repository at this point in the history
  • Loading branch information
caendesilva committed May 29, 2022
1 parent a8cb38a commit 420f662
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 39 deletions.
40 changes: 1 addition & 39 deletions resources/views/components/docs/search-page.blade.php
Original file line number Diff line number Diff line change
@@ -1,41 +1,3 @@
<h1>Search the documentation</h1>

<style>
#search-input {
font-size: 16px;
line-height: 1.5;
padding: 6px 10px;
background-color: #eee;
color: #000
}
.hyde-search-context {
margin-bottom: 10px;
}
.dark #search-input {
background-color: #333;
color: #fff;
}
.dark .hyde-search-context mark.search-highlight {
background-color: rgba(255, 255, 0, 0.75);
}
</style>

<div id="hyde-search">
<noscript>
The search feature requires JavaScript to be enabled in your browser.
</noscript>
<input type="search" name="search" id="search-input" placeholder="Search..." autocomplete="off" autofocus>
</div>

@once('scripts')
<script src="https://cdn.jsdelivr.net/npm/hydesearch@0.2.1/dist/HydeSearch.min.js" defer></script>

<script>
window.addEventListener('load', function() {
const searchIndexLocation = 'search.json';
const Search = new HydeSearch(searchIndexLocation);
Search.init();
});
</script>
@endonce
@include('hyde::components.docs.search-widget')
39 changes: 39 additions & 0 deletions resources/views/components/docs/search-widget.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<style>
#search-input {
font-size: 16px;
line-height: 1.5;
padding: 6px 10px;
background-color: #eee;
color: #000
}
.hyde-search-context {
margin-bottom: 10px;
}
.dark #search-input {
background-color: #333;
color: #fff;
}
.dark .hyde-search-context mark.search-highlight {
background-color: rgba(255, 255, 0, 0.75);
}
</style>

<div id="hyde-search">
<noscript>
The search feature requires JavaScript to be enabled in your browser.
</noscript>
<input type="search" name="search" id="search-input" placeholder="Search..." autocomplete="off" autofocus>
</div>

@once('scripts')
<script src="https://cdn.jsdelivr.net/npm/hydesearch@0.2.1/dist/HydeSearch.min.js" defer></script>

<script>
window.addEventListener('load', function() {
const searchIndexLocation = 'search.json';
const Search = new HydeSearch(searchIndexLocation);
Search.init();
});
</script>
@endonce

0 comments on commit 420f662

Please sign in to comment.