Create search results template

Author: JoelCDL

index.hbs

@@ -20,6 +20,7 @@
         <li><a href="src/templates/blog-index.hbs">Blog Index</a></li>
         <li><a href="src/templates/blog-post.hbs">Blog Post</a></li>
         <li><a href="src/templates/home.hbs">Home</a></li>
+        <li><a href="src/templates/search-results.hbs">Search Results</a></li>
         <li><a href="src/templates/secondary.hbs">Secondary</a></li>
       </ul>
       <h2>Components</h2>

src/css/templates/search-results.css

@@ -0,0 +1,29 @@
+/* Search Results Template */
+
+.t-search-results {
+  .c-breadcrumb {
+    margin-inline: var(--uc3-space-lg);
+  }
+
+  .c-search-result {
+    margin-block-end: var(--uc3-space-lg);
+  }
+}
+
+.t-search-results__header {
+  margin-block-end: var(--uc3-space-lg);
+
+  h1 {
+    margin-block: 0 var(--uc3-space-sm);
+    font-variant: normal;
+  }
+
+  p {
+    margin-block: unset;
+  }
+}
+
+.t-search-results__content {
+  padding-block: var(--uc3-space-lg);
+  padding-inline: var(--template-inline-content-padding);
+}

src/generated-content/searchresults.js

@@ -0,0 +1,32 @@
+// Search Results Template //
+
+const { faker } = require('@faker-js/faker')
+const list = []
+
+for (let i = 0; i < 10; i++) {
+  const fakerDate = faker.date.past()
+  const postDateUnformatted = new Date(fakerDate)
+  const dateFormat = {year: 'numeric', month: 'long', day: 'numeric'}
+  const postDate = postDateUnformatted.toLocaleDateString('en-US', dateFormat)
+
+  list.push({
+    search_result: {
+      title: faker.commerce.productDescription(),
+      description: faker.lorem.sentences({ min: 4, max: 6 }),
+      date: postDate,
+      datetime: fakerDate
+    }
+  })
+}
+
+module.exports = {
+  items: list,
+  search_results_breadcrumb: {
+    breadcrumb: {
+      text: [
+        'University of California Curation Center (UC3)',
+        'Search Results for \"uc3\"'
+      ]
+    }
+  }
+}

src/templates/search-results.hbs

@@ -0,0 +1,17 @@
+{{#extend "base"}}{{#content "body"}}
+<div class="t-search-results">
+  {{> header }}
+  {{> breadcrumb search_results_breadcrumb }}
+  <main id="maincontent" class="t-search-results__content">
+    <div class="t-search-results__header">
+      <h1>Search Results</h1>
+      <p>Showing 1 - 10 of 200 results for "<strong>uc3</strong>"</p>
+    </div>
+    {{#each searchresults.items}}
+      {{> search-result }}
+    {{/each}}
+    {{> pagination }}
+  </main>
+  {{> footer }}
+</div>
+{{/content}}{{/extend}}