@hyperbook/markdown 0.13.2 → 0.15.0

package/dist/assets/client.js

@@ -33,13 +33,81 @@ var hyperbook = (function () {
     const tocDrawerEl = document.getElementById("toc-drawer");
     tocDrawerEl.open = !tocDrawerEl.open;
   }
+  // search
+
+  const searchInputEl = document.getElementById("search-input");
+  searchInputEl.addEventListener("keypress", (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      search();
+    }
+  });
+
+  function searchToggle() {
+    const searchDrawerEl = document.getElementById("search-drawer");
+    searchDrawerEl.open = !searchDrawerEl.open;
+  }
+
+  function search() {
+    const resultsEl = document.getElementById("search-results");
+    resultsEl.innerHTML = "";
+    const query = searchInputEl.value;
+    const idx = window.lunr.Index.load(LUNR_INDEX);
+    const documents = SEARCH_DOCUMENTS;
+    const results = idx.search(query);
+    for (let result of results) {
+      const doc = documents[result.ref];
+
+      const container = document.createElement("a");
+      container.href = doc.href;
+      container.classList.add("search-result");
+      const heading = document.createElement("div");
+      heading.textContent = doc.heading;
+      heading.classList.add("search-result-heading");
+      const content = document.createElement("div");
+      content.classList.add("search-result-content");
+      const href = document.createElement("div");
+      href.classList.add("search-result-href");
+      href.textContent = doc.href;
+
+      let contentHTML = "";
+      const terms = Object.keys(result.matchData.metadata);
+      const term = terms[0];
+      if (result?.matchData?.metadata?.[term]?.content?.position?.length > 0) {
+        const pos = result.matchData.metadata[term].content.position[0];
+        const start = pos[0];
+        const len = pos[1];
+        let cutoffBefore = start - 50;
+        if (cutoffBefore < 0) {
+          cutoffBefore = 0;
+        } else {
+          contentHTML += "...";
+        }
+        contentHTML += doc.content.slice(cutoffBefore, start);
+
+        contentHTML += `<mark>${doc.content.slice(start, start + len)}</mark>`;
+        let cutoffAfter = start + len + 50;
+
+        contentHTML += doc.content.slice(start + len, cutoffAfter);
+        if (cutoffAfter < doc.content.length) {
+          contentHTML += "...";
+        }
+      }
+
+      content.innerHTML = contentHTML;
+
+      container.appendChild(heading);
+      container.appendChild(content);
+      container.appendChild(href);
+      resultsEl.appendChild(container);
+    }
+  }
 
   function qrcodeOpen() {
     const qrCodeDialog = document.getElementById("qrcode-dialog");
     const qrcodeEls = qrCodeDialog.getElementsByClassName("make-qrcode");
     const urlEls = qrCodeDialog.getElementsByClassName("url");
     const qrcodeEl = qrcodeEls[0];
-    const urlEl = urlEls[0];
     const qrcode = new window.QRCode({
       content: window.location.href,
       padding: 0,
@@ -113,6 +181,8 @@ var hyperbook = (function () {
     toggleBookmark,
     navToggle,
     tocToggle,
+    searchToggle,
+    search,
     qrcodeOpen,
     qrcodeClose,
   };

package/dist/assets/content.css

@@ -377,6 +377,108 @@ figure {
   cursor: pointer;
 }
 
+#search-toggle {
+  background-color: var(--color-text);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  margin-right: 16px;
+  mask-repeat: no-repeat;
+  mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1zZWFyY2giIGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iOCIvPjxsaW5lIHgxPSIyMSIgeDI9IjE2LjY1IiB5MT0iMjEiIHkyPSIxNi42NSIvPjwvc3ZnPg==')
+}
+
+#search-toggle:hover {
+  background-color: var(--color-brand);
+}
+
+#search-drawer {
+  overflow-y: auto;
+  background: var(--color-nav);
+}
+
+#search-drawer .search-input {
+  display: flex;
+  margin-top: 16px;
+  margin-bottom: 16px;
+  gap: 8px;
+  border: 1px solid var(--color-nav-border);
+  background-color: var(--color-nav);
+  padding: 8px;
+  border-radius: 4px;
+  align-items: center;
+  justify-content: center;
+}
+
+#search-drawer .search-input .search-icon {
+  background-color: var(--color-text);
+  width: 24px;
+  height: 24px;
+  mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1zZWFyY2giIGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMTEiIGN5PSIxMSIgcj0iOCIvPjxsaW5lIHgxPSIyMSIgeDI9IjE2LjY1IiB5MT0iMjEiIHkyPSIxNi42NSIvPjwvc3ZnPg==');
+  mask-repeat: no-repeat;
+}
+
+#search-drawer .search-input input {
+  flex: 1;
+  background: none;
+  color: var(--color-text);
+  border: none;
+  width: 100%;
+}
+
+#search-drawer .search-input .search-button {
+  background-color: var(--color-text);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  mask-repeat: no-repeat;
+  mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1hcnJvdy1yaWdodCIgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bGluZSB4MT0iNSIgeDI9IjE5IiB5MT0iMTIiIHkyPSIxMiIvPjxwb2x5bGluZSBwb2ludHM9IjEyIDUgMTkgMTIgMTIgMTkiLz48L3N2Zz4=')
+}
+
+#search-results {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+#search-results .search-result {
+  display: flex;
+  gap: 4px;
+  flex-direction: column;
+  text-decoration: none;
+  color: var(--color-text);
+  font-size: 1rem;
+  border-radius: 8px;
+  background-color: var(--color-nav-border);
+  padding: 8px;
+}
+
+#search-results .search-result-heading {
+  font-size: 1.2rem;
+  font-weight: 500;
+}
+
+#search-results .search-result-content {
+  text-overflow: ellipsis;
+  font-size: 0.8rem;
+}
+
+#search-results .search-result-href {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  text-wrap: nowrap;
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+
+.search-drawer-content {
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  height: calc(var(--app-height));
+  overflow-y: auto;
+  gap: 8px;
+}
+
 #toc-drawer {
   overflow-y: auto;
   background: var(--color-nav);
@@ -385,6 +487,7 @@ figure {
 .toc-drawer-content {
   display: flex;
   flex-direction: column;
+  height: calc(var(--app-height));
 }
 
 .toc-drawer-content>nav {
@@ -448,7 +551,6 @@ figure {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: var(--color-background);
   border-radius: 8px;
 }
 
@@ -466,11 +568,11 @@ figure {
   width: 100%;
 }
 
-.hyperbook-markdown .close-icon {
+#qrcode-dialog .close .close-icon {
   background-color: var(--color-text);
   width: 32px;
   height: 32px;
-  mask-image: url('data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="%230F1729"/></svg>');
+  mask-image: url('data:image/svg+xml,<svg width="32px" height="32px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="%230F1729"/></svg>');
 }
 
 .hyperbook-markdown .qrcode-icon {
@@ -500,7 +602,7 @@ figure {
 }
 
 .hyperbook-markdown #toc-toggle:hover,
-.hyperbook-markdown #qrcode-toggle:hover {
+.hyperbook-markdown #qrcode-open:hover {
   opacity: 1;
 }