17 add search and indexing

best-cigars-guide/blocks/header/header.js

@@ -153,7 +153,7 @@ export default async function decorate(block) {
   searchBox.innerHTML = `
   <form role="search" action="/best-cigars-guide/search" class="search search-header">
     <label for="header-search-term">Search</label>
-    <input type="search" id="header-search-term" maxlength="255" placeholder="Search" name="s" autocomplete="off">
+    <input type="search" id="header-search-term" maxlength="255" placeholder="Search" name="q" autocomplete="off">
     <button type="submit" class="search-submit" value="Submit" title="Submit">
       <span class="icon icon-search"><img data-icon-name="search" src="/best-cigars-guide/icons/search.svg" alt="Search" title="Search" loading="lazy"></span>
     </button>

best-cigars-guide/blocks/search/search.css

@@ -0,0 +1,122 @@
+/* search box */
+.search .search-box {
+  display: grid;
+  grid-template-columns: 24px 1fr;
+  gap: 8px;
+  align-items: center;
+}
+
+.search .search-box input {
+  width: 100%;
+  border: 1px solid var(--dark-color);
+  padding: 5px 15px;
+  font: inherit;
+}
+
+/* search results */
+.search ul.search-results {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
+  gap: 16px;
+  padding-left: 0;
+  list-style: none;
+}
+
+.search ul.search-results > li {
+  border: 1px solid var(--dark-color);
+}
+
+.search ul.search-results > li > a {
+  display: block;
+  background-color: var(--background-color);
+  color: currentcolor;
+  cursor: pointer;
+  height: 100%;
+}
+
+.search ul.search-results > li > a:hover,
+.search ul.search-results > li > a:focus {
+  text-decoration: none;
+}
+
+.search ul.search-results > li .search-result-title,
+.search ul.search-results > li p {
+  padding: 0 16px;
+}
+
+.search ul.search-results > li .search-result-title {
+  font-size: var(--body-font-size-m);
+  font-weight: normal;
+}
+
+.search ul.search-results > li .search-result-title a {
+  color: currentcolor;
+  text-decoration: none;
+}
+
+.search ul.search-results > li p {
+  font-size: var(--body-font-size-s);
+}
+
+.search ul.search-results > li .search-result-image {
+  aspect-ratio: 4 / 3;
+}
+
+.search ul.search-results > li picture img {
+  display: block;
+  width: 100%;
+  object-fit: cover;
+}
+
+/* no results */
+.search ul.search-results.no-results {
+  display: block;
+  padding-left: 32px;
+}
+
+.search ul.search-results.no-results > li {
+  border: none;
+}
+
+/* minimal variant */
+.search.minimal ul.search-results {
+  display: block;
+  padding-left: 32px;
+}
+
+.search.minimal ul.search-results > li {
+  position: relative;
+  border: none;
+}
+
+.search.minimal ul.search-results > li .search-result-title,
+.search.minimal ul.search-results > li p {
+  padding: unset;
+}
+
+.search.minimal ul.search-results > li .search-result-title a {
+  color: var(--link-color);
+}
+
+/* stylelint-disable no-descending-specificity */
+.search.minimal ul.search-results > li > a {
+  background-color: unset;
+}
+
+.search.minimal ul.search-results > li > a:hover a,
+.search.minimal ul.search-results > li > a:focus a {
+  text-decoration: underline;
+  color: var(--link-hover-color);
+}
+
+.search.minimal ul.search-results > li .search-result-image {
+  position: absolute;
+  top: 2px;
+  left: -32px;
+}
+
+.search.minimal ul.search-results > li picture img {
+  height: 24px;
+  width: 24px;
+  border-radius: 50%;
+}