Merge pull request #1175 from maxmind/kevin/search-page

Add search page

assets/js/GoogleSearch.ts

@@ -0,0 +1,49 @@
+interface IItems {
+  cacheId: string;
+  link: string;
+  snippet: string;
+  title: string;
+}
+
+interface IQuery {
+  count: number;
+  startIndex: number;
+  totalResults: string;
+}
+
+export interface ISearchResults {
+  items?: IItems[];
+  queries: {
+    nextPage?: IQuery[];
+    previousPage?: IQuery[];
+    request: IQuery[];
+  };
+  spelling?: {
+    correctedQuery: string;
+  };
+}
+
+const cx = "cde039a7678700a13";
+const key = "AIzaSyAI4atAz3I5ujXCjoEXRvdwqcYn3AIsCA8";
+const url = `https://www.googleapis.com/customsearch/v1/siterestrict?cx=${cx}&key=${key} `;
+
+const GoogleSearch = async (
+  query: string,
+  startIndex: string | null
+): Promise<ISearchResults> => {
+  let requestUrl = `${url}&q=${query}`;
+
+  if (startIndex) {
+    requestUrl = requestUrl + `&start=${startIndex}`;
+  }
+
+  const response = await fetch(requestUrl);
+
+  if (!response.ok) {
+    throw new Error(`There was an error searching for ${query}`);
+  }
+
+  return (await response.json()) as ISearchResults;
+};
+
+export default GoogleSearch;

assets/js/search-results.ts

@@ -0,0 +1,106 @@
+import GoogleSearch from "./GoogleSearch";
+
+window.addEventListener("DOMContentLoaded", () => {
+  const loading = <HTMLDivElement>document.querySelector(".loading");
+  const resultsCount = <HTMLElement>(
+    document.querySelector(".search-results__count")
+  );
+  const resultsHeading = <HTMLHeadingElement>(
+    document.querySelector(".search-results__heading")
+  );
+  const resultsList = <HTMLDivElement>(
+    document.querySelector(".search-results__list")
+  );
+  const searchNext = <HTMLLinkElement>document.querySelector(".search__next");
+  const searchPrev = <HTMLLinkElement>(
+    document.querySelector(".search__previous")
+  );
+
+  const searchProperty = window.location.search;
+  const urlSearchParams = new URLSearchParams(searchProperty);
+  const query = urlSearchParams.get("query") ?? "";
+  const startIndex = urlSearchParams.get("start");
+
+  const fetchResults = async () => {
+    try {
+      const results = await GoogleSearch(query, startIndex);
+      loading.style.display = "none";
+
+      if (results.items) {
+        resultsHeading.textContent = `Search results for ${query}`;
+        resultsCount.textContent = `Displaying results
+          ${results.queries.request[0].startIndex}
+          -
+          ${
+            results.queries.request[0].startIndex +
+            results.queries.request[0].count -
+            1
+          }
+          of
+          ${results.queries.request[0].totalResults}`;
+
+        results.items.forEach((result) => {
+          const article = document.createElement("article");
+          article.className = "search__result-list-item";
+
+          const a = document.createElement("a");
+          a.className = "search__result-title";
+          a.href = `${result.link}`;
+          a.textContent = `${result.title}`;
+
+          const small = document.createElement("small");
+          small.className = "search__result-url";
+          small.textContent = `${result.link}`;
+
+          const p = document.createElement("p");
+          p.className = "search__result-description";
+          p.textContent = `${result.snippet}`;
+
+          resultsList.appendChild(article);
+          article.appendChild(a);
+          article.appendChild(small);
+          article.appendChild(p);
+        });
+
+        if (results.queries.nextPage) {
+          searchNext.style.display = "block";
+
+          const nextUrl = new URL(document.location.href);
+          nextUrl.search = new URLSearchParams({
+            query: query,
+            start: results.queries.nextPage[0].startIndex.toString(),
+          }).toString();
+          searchNext.href = nextUrl.toString();
+        }
+
+        if (results.queries.previousPage) {
+          searchPrev.style.display = "block";
+
+          const prevUrl = new URL(document.location.href);
+          prevUrl.search = new URLSearchParams({
+            query: query,
+            start: results.queries.previousPage[0].startIndex.toString(),
+          }).toString();
+          searchPrev.href = prevUrl.toString();
+        }
+      } else {
+        resultsHeading.textContent = `No results found for ${query}`;
+      }
+    } catch {
+      loading.style.display = "none";
+
+      const p = document.createElement("p");
+      p.textContent = "Please try again.";
+
+      resultsHeading.textContent = "There was an issue performing the search.";
+      resultsHeading.insertAdjacentElement("afterend", p);
+    }
+  };
+
+  if (query.trim() === "") {
+    loading.style.display = "none";
+    resultsHeading.textContent = "Please enter a search query";
+  } else {
+    fetchResults();
+  }
+});

assets/js/search.ts

@@ -0,0 +1,26 @@
+window.addEventListener('DOMContentLoaded', () => {
+  const $searchBtn = <HTMLButtonElement>(
+    document.querySelector('.search__button')
+  );
+  const $searchBar = <HTMLElement>document.querySelector('.searchbar');
+  const $searchBarInput = <HTMLInputElement>(
+    document.querySelector('.searchbar .input')
+  );
+
+  $searchBtn.addEventListener('click', () => {
+    $searchBar.classList.add('searchbar__open');
+    $searchBarInput.focus();
+  });
+
+  const showSearchBar = () => {
+    if ($searchBarInput === document.activeElement) {
+      $searchBar.classList.add('searchbar__open');
+      $searchBtn.style.display = 'none';
+    } else {
+      $searchBar.classList.remove('searchbar__open');
+      $searchBtn.style.display = 'block';
+    }
+  };
+
+  document.body.addEventListener('click', showSearchBar);
+});

assets/jsconfig.json

@@ -5,7 +5,6 @@
    "*": [
     "*"
    ]
-  },
-  "target": "ESNext"
+  }
  }
-}
+}

assets/scss/_loading.scss

@@ -0,0 +1,104 @@
+.loading,
+.dot__container {
+  height: 100px;
+  position: relative;
+  width: 100px;
+}
+
+.loading {
+  animation: anirotate 10s linear infinite;
+  margin: 100px auto;
+  transform-origin: center;
+}
+
+.dot {
+  background: var(--mm-color-logo-blue-light);
+  border-radius: 5px;
+  height: 10px;
+  position: absolute;
+  transform: translate(0, 0);
+  width: 10px;
+
+  &:nth-child(1) {
+    animation: ani1 2s infinite;
+    left: calc(50% - 5px);
+    top: 0;
+  }
+
+  &:nth-child(2) {
+    animation: ani2 2s infinite;
+    bottom: calc(28% - 5px);
+    left: calc(11% - 5px);
+  }
+
+  &:nth-child(3) {
+    animation: ani3 2s infinite;
+    bottom: calc(28% - 5px);
+    right: calc(11% - 5px);
+
+  }
+}
+
+.dot__container {
+  border: 0 solid var(--mm-color-logo-blue-light);
+  border-radius: 50px;
+  position: absolute;
+
+  &:nth-child(2) {
+    .dot {
+      animation-delay: -0.5s;
+    }
+    transform: rotate(40deg);
+  }
+
+  &:nth-child(3) {
+    .dot {
+      animation-delay: -1s;
+    }
+    transform: rotate(80deg);
+  }
+}
+
+@keyframes anirotate {
+  0% {
+    transform: rotate(0deg);
+
+  }
+
+  100% {
+    transform: rotate(-359deg);
+  }
+}
+
+@keyframes ani1 {
+  0% {
+    transform: translate(0, 0);
+
+  }
+
+  100% {
+    transform: translate(-40px, 67px);
+  }
+}
+
+@keyframes ani2 {
+  0% {
+    transform: translate(0, 0);
+
+  }
+
+  100% {
+    transform: translate(77px, 0);
+  }
+}
+
+@keyframes ani3 {
+  0% {
+    transform: translate(0, 0);
+
+  }
+
+  100% {
+    transform: translate(-39px, -67px);
+  }
+}

assets/scss/_page.scss

@@ -6,6 +6,7 @@
 .page__content {
   max-width: 800px;
   padding: var(--mm-spacing);
+  width: 100%;
 }
 
 .page__sidebar {

assets/scss/_search-results.scss

@@ -28,7 +28,6 @@
     font-weight: 700;
     line-height: 1.2em;
     margin: 0;
-    padding-top: var(--mm-spacing);
     position: relative;
     scroll-margin-top: calc(var(--page-header-height) + var(--mm-spacing));
   }
@@ -95,7 +94,6 @@
 
   .search__next,
   .search__previous {
-    border-bottom: 2px dotted var(--mm-color-display-text);
     color: var(--mm-color-display-text);
     font-size: 18px;
     text-decoration: none;

assets/scss/index.scss

@@ -4,6 +4,7 @@
 @import 'mixins';
 @import 'page';
 @import 'pre';
+@import 'loading';
 @import 'search';
 @import 'search-results';
 @import 'sidebar';

content/search-results.md

@@ -0,0 +1,5 @@
+---
+title: "Search results"
+description: "MaxMind Developer Portal search results page"
+layout: "search-results"
+---

layouts/_default/baseof.html

@@ -30,6 +30,7 @@
   </body>
   {{ $codeset := resources.Get "js/codeset.ts" | js.Build }}
   {{ $geoipCrontab := resources.Get "js/geoip-crontab.ts" | js.Build }}
-  {{ $js := slice $codeset $geoipCrontab | resources.Concat "js/bundle.js" }}
+  {{ $search := resources.Get "js/search.ts" | js.Build }}
+  {{ $js := slice $codeset $geoipCrontab $search | resources.Concat "js/bundle.js" }}
   <script type="module" src="{{ $js.RelPermalink }}"></script>
 </html>

layouts/page/search-results.html

@@ -0,0 +1,26 @@
+{{ define "main" }}
+<div class="page__wrapper">
+  <div class="page__sidebar">
+    {{ partial "sidebar.html" . }}
+  </div>
+  <div class="page__content">
+    <div class="search-results">
+      {{ partial "loading" . }}
+      <header class="search-results__header">
+        <h1 class="search-results__heading">
+        </h1>
+        <small class="search-results__count"></small>
+      </header>
+      <div class="search-results__list">
+      </div>
+      <nav class="search__pagination">
+        <a href="" class="search__previous">‹ Previous</a>
+        <a href="" class="search__next">Next ›</a>
+      </nav>
+    </div>
+    {{ $searchResults := resources.Get "js/search-results.ts" | js.Build }}
+    <script type="module" src="{{ $searchResults.RelPermalink }}"></script>
+  </div>
+</div>
+{{ end }}
+

layouts/partials/loading.html

@@ -0,0 +1,17 @@
+<div class="loading">
+  <div class="dot__container">
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+  <div class="dot__container">
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+  <div class="dot__container">
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+</div>