additional search tweaks

assets/js/search.js

@@ -5,6 +5,9 @@ function displayResults (results, store) {
     for (const n in results) {
       const item = store[results[n].ref];
       resultList += '<li><a href="' + item.url + '">' + item.title + '</a></li>'
+      if (item.description)
+        resultList += '<p>' + item.description + '</p>'
+      else
         resultList += '<p>' + item.content.substring(0, 150) + '...</p>'
     }
     searchResults.innerHTML = resultList;

layouts/partials/search-form.html

@@ -1,5 +1,5 @@
 <form id="search"
   action='{{ with .GetPage "/search" }}{{ .Permalink }}{{ end }}' method="get">
-  <input type="search" id="search-query" name="query" placeholder="Looking for something?" aria-label="search text">
+  <input type="input" id="search-query" name="query" placeholder="grep -i" aria-label="search text">
   <button type="submit" aria-label="search button"><i class="fa-solid fa-magnifying-glass"></i></button>
 </form>

layouts/partials/search-index.html

@@ -5,6 +5,7 @@
       "title": "{{ .Title }}",
       "tags": [{{ range .Params.Tags }}"{{ . }}",{{ end }}],
       "content": {{ .Content | plainify }},
+      "description": {{ .Description | plainify }},
       "url": "{{ .Permalink }}"
     },
     {{ end }}

layouts/search/list.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 {{ partial "search-form.html" . }}
-
+<br>
 <ul id="results">
   <li>
     Enter a keyword above to search this site.

static/css/custom.css

@@ -223,42 +223,31 @@ form {
   display: flex;
   flex-direction: row;
   border-radius: 0.25rem;
-  margin: 0.25rem;
-  height: 1.5rem;
+  outline: 0.25rem solid var(--bg);
 }
 
 input {
   flex-grow: 2;
   border: none;
   background-color: var(--off-bg);
-  /* border-radius: 0.25rem; */
   color: var(--off-fg);
+  height: 1.5rem;
+  border-radius: 0.25rem;
+  padding-left: 0.5rem;
+  font-family: var(--font-monospace);
 }
 
 input:focus {
   outline: none;
 }
 
-input:placeholder-shown {
-  font-style: italic;
-}
-
 form:focus-within {
   outline: 1px solid var(--logo);
-  /* border-radius: 0.25rem; */
 }
 
-/* form input {
-  border-radius: 0.25rem;
-  margin: 0.25rem;
-  background-color: var(--off-bg);
-} */
-
 form button {
-  /* border-radius: 0.25rem;
-  margin: 0.25rem; */
   outline: none;
   border: none;
   background-color: var(--off-bg);
-  color: var(--logo);
+  color: var(--link);
 }