Update search layout

layouts/_default/search.html

@@ -1,12 +1,20 @@
 {{ define "head-end" }}
-{{- $script := resources.Get "search.js" | resources.Fingerprint -}}
+{{- $script := resources.Get "js/search.js" | resources.Fingerprint -}}
 <script src="{{ $script.Permalink }}" integrity="{{ $script.Data.Integrity }}" crossorigin="anonymous"></script>
 {{ end }}
 
 {{ define "content" }}
-<div class="search">
- <h1>Search Results</h1>
- <hr>
+<div class="search container">
+ <div class="row">
+ <div class="col-md-6">
+ <form class="search-form" action="{{ absLangURL "search" }}">
+ <div class="input-group">
+ <input class="form-control border-right-0" id="searchQuery" name="q" type="search" placeholder="Search" aria-label="Search">
+ <button class="btn-search input-group-text" type="submit"><i class="fas fa-fw fa-search"></i></button>
+ </div>
+ </form>
+ </div>
+ </div>
  <div id="searchResults" class="search-results"></div>
 </div>
 

layouts/partials/head.html

@@ -12,4 +12,5 @@
 {{- $script := resources.Get "js/main.js" | resources.Fingerprint -}}
 <script src="{{ $script.Permalink }}" integrity="{{ $script.Data.Integrity }}" crossorigin="anonymous"></script>
 {{- partial "head/math" . -}}
+<meta data-name="search-index" content="{{ absLangURL "index.json" }}">
 {{- partial "head/custom" . -}}

layouts/partials/head/math.html

@@ -1,4 +1,4 @@
 {{- if or .Params.math .Site.Params.math -}}
-{{- $script := resources.Get "katex.js" | resources.Fingerprint -}}
+{{- $script := resources.Get "js/katex.js" | resources.Fingerprint -}}
 <script defer src="{{ $script.Permalink }}" integrity="{{ $script.Data.Integrity }}" crossorigin="anonymous"></script>
 {{- end -}}

layouts/partials/header/search-form.html

@@ -4,7 +4,7 @@
  </a>
  <ul class="dropdown-menu dropdown-menu-right search-dropdown-menu" aria-labelledby="navbarDropdownSearch">
  <li>
- <form id="searchForm" class="search-bar" action="{{ absLangURL "search" }}" data-index="{{ absLangURL "index.json" }}">
+ <form class="search-form" action="{{ absLangURL "search" }}">
  <div class="input-group">
  <input class="form-control border-right-0" id="searchQuery" name="q" type="search" placeholder="Search" aria-label="Search">
  <button class="btn-search input-group-text" type="submit"><i class="fas fa-fw fa-search"></i></button>

src/scss/_header.scss

@@ -27,7 +27,7 @@
  width: 240px;
 }
 
-.search-bar {
+.search-form {
  display: flex;
  margin: 0 .25rem;
 }

src/search.js

@@ -1,11 +1,9 @@
 import Fuse from "fuse.js"
 import Mustache from "mustache"
 
-var searchForm, searchInput, searchResults, searchResultTemplate
+var searchResults, searchResultTemplate
 
 document.addEventListener('DOMContentLoaded', function() {
- searchForm = document.getElementById('searchForm')
- searchInput = document.getElementById('searchQuery')
  searchResults = document.getElementById('searchResults')
  searchResultTemplate = document.getElementById('searchResultTemplate').innerHTML
  initSearch()
@@ -16,11 +14,12 @@ function initSearch() {
  let searchQuery = searchParams.get("q")
 
  if (searchQuery) {
- searchInput.value = searchQuery
+ document.body.querySelectorAll('.search-form input').forEach(function (input) {
+ input.value = searchQuery
+ })
  search(searchQuery)
  } else {
  searchResults.innerHTML = '<p class="text-muted">Please enter search keywords.</p>'
- searchInput.focus()
  }
 }
 
@@ -51,7 +50,7 @@ function search(query) {
  }
  }
  xhr.responseType = 'json'
- xhr.open('GET', searchForm.getAttribute("data-index"), true)
+ xhr.open('GET', document.head.querySelector('meta[data-name="search-index"]').getAttribute('content'), true)
  xhr.send(null)
 }
 

webpack.config.js

@@ -3,8 +3,8 @@ const path = require('path');
 module.exports = {
  entry: {
  main: './src/js/index.js',
- //search: ['./src/search.js', './src/search.scss'],
- //katex: ['./src/katex.js', './src/katex.scss'],
+ search: ['./src/search.js', './src/search.scss'],
+ katex: ['./src/katex.js', './src/katex.scss'],
  },
  mode: 'production',
  output: {