docula 0.3.6 → 0.3.7

package/templates/default/assets/css/styles/search/algolia.css

@@ -0,0 +1,125 @@
+#hits {
+  height: calc(100vh - 72px);
+  position: fixed;
+  top: 72px;
+  overflow-y: auto;
+  background-color: var(--search-input-background);
+  width: 100%;
+}
+
+#hits > div {
+  padding: 0 24px;
+}
+
+.search-box {
+  display: flex;
+  width: 100%;
+  border-color: var(--search-input-background);
+  background-color: var(--search-input-background);
+  border: none;
+  border-bottom: 1px solid var(--border);
+  height: 72px;
+}
+
+.search-box input {
+  border-color: var(--search-input-background);
+  border: none !important;
+  border-bottom: 1px solid var(--border);
+  font-size: 18px;
+  height: 71px !important;
+}
+
+.ais-SearchBox {
+  position: relative;
+  flex: 0.8;
+}
+
+.close-modal--btn {
+  flex: 0.2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 13px;
+  border-left: 1px solid var(--border);
+  margin: 10px 0;
+  cursor: pointer;
+  opacity: 0.6;
+}
+
+.ais-SearchBox-submit, .ais-SearchBox-reset {
+  position: absolute;
+  top: 24px;
+  cursor: pointer;
+  opacity: 0.6;
+}
+
+.ais-SearchBox-submit svg {
+  fill: currentColor;
+  width: 16px;
+  height: 16px;
+}
+
+.ais-SearchBox-reset svg {
+  fill: currentColor;
+  width: 10px;
+  height: 10px;
+}
+
+.ais-SearchBox-submit {
+  left: 16px
+}
+
+.ais-SearchBox-reset {
+  right: 16px;
+}
+
+.search-result {
+  padding: 0;
+  margin-top: 24px;
+}
+
+.search-result hr {
+  margin: 46px 0;
+  opacity: 0.3
+}
+
+@media screen and (min-width: 640px) {
+  .ais-SearchBox {
+    flex: 0.9;
+  }
+
+  .close-modal--btn {
+    flex: 0.1;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  #hits {
+    height: calc(780px - 72px);
+    position: fixed;
+  }
+
+  #hits > div {
+    padding: 0 48px;
+  }
+
+  .search-container {
+    height: 780px;
+  }
+
+  .search-box {
+    justify-content: center;
+  }
+
+  .ais-SearchBox-submit, .ais-SearchBox-reset {
+    top: 16px;
+  }
+
+  .ais-SearchBox {
+    flex: 0.8;
+  }
+
+  .close-modal--btn {
+    justify-content: flex-end;
+  }
+}

package/templates/default/assets/css/styles/search/pagefind.css

@@ -0,0 +1,60 @@
+.pagefind-ui__search-input {
+  border-radius: 0 !important;
+  border-bottom: 1px solid var(--border);
+}
+
+.pagefind-ui__result, .pagefind-ui__message {
+  padding-left: 16px !important;
+  padding-right: 16px !important;
+}
+
+.pagefind-ui__results-area {
+  overflow-y: auto !important;
+  margin-top: 0 !important;
+  height: calc(100vh - 72px) !important;
+}
+
+.pagefind-ui__result-link {
+  color: var(--color-primary) !important;
+}
+
+.pagefind-ui__result-link:hover {
+  color: var(--color-secondary) !important;
+}
+
+.pagefind-ui__button {
+  margin-top: 0 !important;
+  border-top: none !important;
+  border-top-right-radius: 0 !important;
+  border-top-left-radius: 0 !important;
+  border: 1px solid var(--border) !important;
+}
+
+.pagefind-ui__button {
+  background-color: var(--search-input-background) !important;
+}
+
+.pagefind-ui__result-excerpt {
+  line-height: 1.5 !important;
+}
+
+.pagefind-ui__result-excerpt > mark {
+  background-color: var(--background-search-highlight) !important;
+  color: var(--color-search-highlight) !important;
+}
+
+.pagefind-ui__form::before {
+  top: 28px !important;
+}
+
+.pagefind-ui__drawer {
+  background-color: var(--search-input-background) !important;
+  border-bottom-left-radius: 8px !important;
+  border-bottom-right-radius: 8px !important;
+}
+
+@media screen and (min-width: 992px) {
+  .pagefind-ui__results-area {
+    max-height: 504px !important;
+  }
+}

package/templates/default/assets/css/styles/variables.css

@@ -0,0 +1,30 @@
+:root {
+  --font-family: 'Open Sans', sans-serif;
+
+  --color-primary:  #08c2ff;
+  --color-secondary: #bd72d1;
+  --color-secondary-dark: #af34d0;
+  --color-text: #322d3c;
+
+  --background: #ffffff;
+  --home-background: #F0F2FA;
+  --header-background: #fbfbfb;
+
+  --sidebar-background: #ffffff;
+  --sidebar-text: #322d3c;
+  --sidebar-text-active: #08c2ff;
+
+  --border: rgba(238,238,245,1);
+
+  --background-search-highlight: var(--color-secondary-dark);
+  --color-search-highlight: #ffffff;
+  --search-input-background: var(--header-background);
+
+  --code: rgba(238,238,245,1);
+
+  --pagefind-ui-text: var(--color-text) !important;
+  --pagefind-ui-font: var(--font-family) !important;
+  --pagefind-ui-background: var(--background) !important;
+  --pagefind-ui-border: var(--border) !important;
+  --pagefind-ui-scale: .9 !important;
+}

package/templates/default/assets/images/logo.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="512" height="512" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <linearGradient x1="30%" y1="20%" x2="65%" y2="50%" id="gradient">
+            <stop stop-color="#24C6DC" offset="0%"></stop>
+            <stop stop-color="#C86DD7" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <path fill="url(#gradient)" fill-rule="nonzero" d="M189 196v-17.4c13.7 10.2 40.2 15 66.5 15 26.3 0 52.8-4.8 66.5-15V196c0 12-30 21.8-66.5 21.8-36.6 0-66.5-9.8-66.5-21.8zm133 16.6v19.8c-3.7 11-32.3 19.4-66.5 19.4s-62.8-8.5-66.5-19.4v-20c13.7 10.4 40.2 15 66.5 15 26.3 0 52.8-4.6 66.5-14.8zM189 162v-17.4c13.7 10.2 40.2 15 66.5 15 26.3 0 52.8-4.8 66.5-15V162c0 12-30 22-66.5 22-36.6 0-66.5-10-66.5-22zm66.5-12c-36.7 0-66.5-10-66.5-22s29.8-21.8 66.5-21.8S322 116 322 128s-29.8 22-66.5 22zm.5 362C114.6 512 0 397.4 0 256S114.6 0 256 0s256 114.6 256 256-114.6 256-256 256zm0-3c139.7 0 253-113.3 253-253S395.6 3 256 3 3 116.4 3 256s113.3 253 253 253zM122 351.2l56-51h5l-56.5 51 59.3 60h-5l-58.7-59.7v59.8h-3.5v-111h3.4v51zm77 23.3c0 4.4.7 8.7 2 13 1.3 4.3 3.3 8 6 11.5 2.6 3.5 6 6.3 10 8.4 4 2 9 3 14.5 3 5.7 0 10.7-1 15-3.3 4.5-2 8.3-5.4 11.5-9.7l2.5 2.2c-3.5 4.6-7.7 8-12.4 10.5-4.7 2.4-10.2 3.6-16.5 3.6-5.3 0-10.2-1-14.6-3-4.5-1.8-8.3-4.5-11.5-8-3.2-3.4-5.6-7.5-7.4-12.3-1.6-5-2.5-10-2.5-15.7 0-5.5 1-10.5 2.7-15 1.8-4.7 4.2-8.7 7.3-12 3-3.4 6.7-6 11-7.8 4-2 8.6-2.8 13.4-2.8 5.6 0 10.5 1 14.7 3 4.2 2 7.7 4.6 10.4 8 3 3 5 6.8 6.3 11 1.4 4 2 8.3 2 12.6v3H199zm61-3c0-4.7-.8-9-2.4-13-1.5-3.8-3.5-7-6.2-10-2.6-2.6-5.7-4.8-9.4-6.3-3.6-1.5-7.7-2.3-12.2-2.3-5.5 0-10 1-14 3.4-4 2.2-7 5-9.5 8.3-2.5 3.3-4.3 6.8-5.4 10.4-1.3 3.7-1.8 7-1.8 9.6h61zm40.7 63.7c-1.6 4.5-4 8-6.6 10.5-2.7 2.4-6.3 3.6-10.7 3.6-1 0-2 0-3.3-.3-1.2 0-2.3-.3-3-.7l.8-3c.6.3 1.5.5 2.6.7 1 .2 2.2.3 3.2.3 2.2 0 4-.4 5.8-1.3 1.6-.8 3-2 4-3.2 1.3-1.3 2.2-2.8 3-4.4.8-1.7 1.5-3.4 2-5l7-19-28.5-74.2h3.6l26.6 70.4 25.6-70.4h3.7l-35.8 96zm76.3-24h-4.5l-28.4-72h3.8l27 68.7h.2l26-68.8h3.7L377 411.4z"></path>
+</svg>

package/templates/default/doc.njk

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    {% include "shared/head.njk" %}
+    <title>{{site.name}} - {{ title }}</title>
+</head>
+
+<body>
+<div class="layout">
+    {% include "multipage/header.njk" %}
+    {% include "multipage/sidebar.njk" %}
+    {% include "multipage/main.njk" %}
+    {% include "multipage/searchModal.njk" %}
+</div>
+
+{% include "multipage/searchEngine.njk" %}
+{% include "shared/highlightScript.njk" %}
+{% include "multipage/scripts.njk" %}
+
+
+</body>
+</html>

package/templates/default/index.njk

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+{% include "shared/head.njk" %}
+
+<body>
+{% include "multipage/homeHeader.njk" %}
+
+<main class="home">
+  <div class="home-hero">
+    <img src="/../assets/images/logo.svg" alt="logo" />
+    <div class="home-container">
+      <h1>{{ site.homeTitle }}</h1>
+    </div>
+    <a href="/docs" class="home-docs-button">Documentation</a>
+  </div>
+
+  {% include "shared/homeData.njk" %}
+</main>
+
+{% include "shared/footer.njk" %}
+
+{% include "multipage/searchModal.njk" %}
+{% include "multipage/scripts.njk" %}
+{% include "shared/highlightScript.njk" %}
+{% include "multipage/searchEngine.njk" %}
+
+</body>
+</html>

package/templates/default/landing/landingHero.njk

@@ -0,0 +1,8 @@
+<section>
+  <div class="home-hero">
+    <img src="/../assets/images/logo.svg" alt="logo" />
+    <div class="home-container">
+      <h1>{{ site.homeTitle }}</h1>
+    </div>
+  </div>
+</section>

package/templates/default/landing/singlePage.njk

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+{% include "shared/head.njk" %}
+
+<body>
+  {% include "landing/landingHero.njk" %}
+
+   <article class="home-container">
+     <h1>{{title}}</h1>
+     <div class="content">
+     {{ content | safe }}
+     </div>
+   </article>
+
+  {% include "shared/homeData.njk" %}
+
+  {% include "shared/footer.njk" %}
+
+  {% include "shared/highlightScript.njk" %}
+
+
+</body>
+</html>
+

package/templates/default/multipage/header.njk

@@ -0,0 +1,23 @@
+<header class="header" id="header">
+    <div class="header-content">
+        <nav class="nav">
+            <div class="header-menu hide-d">
+                <a class="header-logo" href="/">
+                    <img src="/../assets/images/logo.svg" alt="logo" />
+                  </a>
+                <button id="open-sidebar" class="icon menu-btn">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>
+                    <span>Menu</span>
+                </button>
+            </div>
+
+
+            <div class="header-search">
+                <button aria-label="Open search" class="icon search-btn" id="search-btn">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352c79.5 0 144-64.5 144-144s-64.5-144-144-144S64 128.5 64 208s64.5 144 144 144z"/></svg>
+                    <span class="hidden search-text">Search the documentation</span>
+                </button>
+            </div>
+        </nav>
+    </div>
+</header>

package/templates/default/multipage/homeHeader.njk

@@ -0,0 +1,20 @@
+<header class="home-header">
+  <div class="header-content">
+    <nav class="nav">
+      <div class="header-menu">
+        <a class="header-logo" href="/">
+          <img src="/../assets/images/logo.svg" alt="logo" />
+        </a>
+        <a href="/docs" class="docs-link">Docs</a>
+      </div>
+
+
+      <div class="header-search">
+        <button class="icon search-btn" id="search-btn">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352c79.5 0 144-64.5 144-144s-64.5-144-144-144S64 128.5 64 208s64.5 144 144 144z"/></svg>
+          <span class="hidden search-text">Search the documentation</span>
+        </button>
+      </div>
+    </nav>
+  </div>
+</header>

package/templates/default/multipage/main.njk

@@ -0,0 +1,47 @@
+<div class="main-container">
+    <div class="main-content">
+        <article class="content">
+            <div class="items-start">
+                {% set navPages = collections.all | eleventyNavigationBreadcrumb(eleventyNavigation.key, { includeSelf: true }) %}
+                <div class="breadcrumb">
+                    {% if navPages[0].url %}
+                    <a href="{{navPages[0].url}}">{{ navPages[0].title }}</a>
+                    {% else %}
+                    <span>{{ navPages[0].title }}</span>
+                    {% endif %}
+                    {% if navPages[1] %}
+                    <span>/ {{ navPages[1].title }}</span>
+                    {% endif %}
+
+                </div>
+                {% if date %}
+                <div class="date hidden">
+                    <span>{% formatDate "MMM dd, yyyy", date %}</span>
+                </div>
+                {% endif %}
+
+            </div>
+            <h1>{{title}}</h1>
+
+            <!--   on this page start  -->
+            <div class="on-page-container on-page-main">
+                <h5>On this page</h5>
+                {{ content | toc | safe }}
+
+            </div>
+
+            <!--   on this page end  -->
+
+
+            {{ content | safe }}
+
+        </article>
+
+        <div class="on-page-container on-page--desktop">
+            <div id="on-page" style="display: none">
+                <h5>On this page</h5>
+                {{ content | toc | safe }}
+            </div>
+        </div>
+    </div>
+</div>

package/templates/default/multipage/scripts.njk

@@ -0,0 +1,47 @@
+<script defer>
+  const sidebar = document.querySelector('#sidebar');
+  const header = document.querySelector('#header');
+  const path = window.location.pathname;
+  const isHome = path === '/' || path === '/index.html';
+  const isDesktop  = window.innerWidth >= 992;
+
+  const handleScroll = () => {
+    const onPage = document.querySelector('#on-page');
+    if(!isHome) {
+      if (window.scrollY > 250 && window.innerWidth >= 1458) {
+        onPage.style.display = 'block';
+        onPage.classList.add('on-page-fixed');
+      } else {
+        onPage.classList.remove('on-page-fixed');
+        onPage.style.display = 'none';
+      }
+    }
+  };
+  window.addEventListener('scroll', handleScroll);
+
+
+  const  closeSidebar = () => {
+    const closeBtn = document.querySelector('#close-sidebar');
+    closeBtn.addEventListener('click', () => {
+      sidebar.classList.add('hidden');
+      header.classList.remove('bottom');
+    });
+  }
+
+  const openSidebar = () => {
+    const openBtn = document.querySelector('#open-sidebar');
+    openBtn.addEventListener('click', () => {
+      sidebar.classList.remove('hidden');
+      header.classList.add('bottom');
+    });
+  }
+
+  const handleMobileSidebar = () => {
+    if (!isHome && !isDesktop) {
+      openSidebar()
+      closeSidebar();
+    }
+  }
+  document.addEventListener('DOMContentLoaded', handleMobileSidebar, false)
+</script>
+

package/templates/default/multipage/searchEngine.njk

@@ -0,0 +1,5 @@
+{% if config.searchEngine == 'algolia' %}
+  {% include "search/algolia.njk" %}
+{% elif config.searchEngine == 'pagefind' %}
+  {% include "search/pagefind.njk" %}
+{% endif %}

package/templates/default/multipage/searchModal.njk

@@ -0,0 +1,19 @@
+<div class="search-modal" id="search-modal">
+    <div class="search-container" id="search-container">
+        {% if config.searchEngine == 'algolia' %}
+        <div id="searchbox" class="search-box">
+            <span class="close-modal--btn" id="close-modal-btn">Cancel</span>
+        </div>
+        <div id="hits"></div>
+
+        {% elif config.searchEngine == 'pagefind' %}
+        <div id="search" class="search-box">
+                <span class="close-modal-btn hide-d" id="close-modal-btn">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"/>
+                    </svg>
+                </span>
+        </div>
+
+        {% endif %}
+    </div>
+</div>

package/templates/default/multipage/sidebar.njk

@@ -0,0 +1,50 @@
+<aside class="sidebar hidden" id="sidebar" data-pagefind-ignore>
+    <div class="sidebar-logo">
+      <a class="header-link" href="/">
+          <img src="/../assets/images/logo.svg" alt="logo" />
+      </a>
+    </div>
+
+    <section class="sidebar-container">
+        <button class="close-btn icon" id="close-sidebar">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"/></svg>
+            <span>Close</span>
+        </button>
+        <div class="sidebar-content">
+            {% set navPages = collections.all | eleventyNavigation %}
+
+            {% macro renderNavListItem(entry) -%}
+            {% if entry.children.length %}
+            <li>
+                <details
+                    {%- for child in entry.children %}
+                    {% if child.parent == entry.title and child.url == page.url %}
+                    class="active"
+                    open
+                    {% endif %}
+                    {% endfor %}
+                >
+                    <summary>{{ entry.title }}</summary>
+                    <ul class="child-list" role="list">
+                        {%- for child in entry.children %}{{ renderNavListItem(child) }}{% endfor -%}
+                    </ul>
+                </details>
+            </li>
+            {% else %}
+            <li>
+                <a href="{{ entry.url }}"{% if entry.url == page.url %} class="active" {% endif %}>{{ entry.title }}</a>
+            </li>
+            {%- endif -%}
+            {%- endmacro %}
+
+            <ul class="nav-list" role="list">
+                {%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
+            </ul>
+
+        </div>
+    </section>
+    <footer class="sidebar-footer">
+        {{ site.footer }} {{ site.authorName }} {% year %}
+    </footer>
+
+</aside>

package/templates/default/releases.njk

@@ -0,0 +1,38 @@
+---
+permalink: /releases/
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  {% include "shared/head.njk" %}
+  <title>{{site.name}} - Releases</title>
+</head>
+
+<body>
+{% include "landing/landingHero.njk" %}
+
+<main class="home-container">
+  <div class="content-container versions-container">
+    <h2 class="home-title">Releases</h2>
+    {% for release in github.releases %}
+    <div class="release">
+      <div class="release-header">
+        <a class="release-title" href="{{ release.html_url }}" target="_blank" rel="noopener noreferrer">{{ release.name }}</a>
+        <span class="release-date">{% formatDate "MMM dd, yyyy", release.published_at %}</span>
+      </div>
+      <div class="release-body">
+        {% if release.body %}
+          <p>{% parseRelease release.body %}</p>
+        {% endif %}
+      </div>
+    </div>
+    {% endfor %}
+    </div>
+
+</main>
+
+{% include "shared/highlightScript.njk" %}
+
+</body>
+</html>

package/templates/default/search/algolia.njk

@@ -0,0 +1,98 @@
+<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.14.3/dist/algoliasearch-lite.umd.js" integrity="sha256-dyJcbGuYfdzNfifkHxYVd/rzeR6SLLcDFYEidcybldM=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.50.3/dist/instantsearch.production.min.js" integrity="sha256-VIZm35iFB4ETVstmsxpzZrlLm99QKqIzPuQb1T0ooOc=" crossorigin="anonymous"></script>
+
+
+
+{% set algoliaKey = config.pluginConfig.algolia.apiKey %}
+{% set algoliaAppId = config.pluginConfig.algolia.appId %}
+{% set algoliaIndexName = config.pluginConfig.algolia.indexName %}
+
+<script>
+  const searchClient = algoliasearch('{{algoliaAppId}}', '{{algoliaKey}}');
+  const search = instantsearch({
+    indexName: '{{algoliaIndexName}}',
+    searchClient,
+    searchFunction(helper) {
+      const results = document.querySelector('#hits');
+      results.style.display = helper.state.query === '' ? 'none' : '';
+      helper.search();
+    }
+  });
+  search.addWidgets([
+    instantsearch.widgets.searchBox({
+      container: '#searchbox',
+      placeholder: 'Search for concepts',
+      autofocus: true,
+    }),
+    instantsearch.widgets.hits({
+      container: '#hits',
+      templates: {
+        empty(results, { html }) {
+          return html`No results for <q>${results.query}</q>`;
+        },
+        item(hit, { html, components }) {
+          return html`
+          <article class="search-result">
+              <a href="${hit.url}">
+                <h2>${components.Highlight({ hit, attribute: 'title', highlightedTagName: 'span' })}</h2>
+                <p>${components.Highlight({ hit, attribute: 'description', highlightedTagName: 'span' })}</p>
+              </a>
+              <hr />
+          </article>
+        `;
+        }
+      }
+    }),
+  ]);
+  search.start();
+</script>
+
+<script>
+  const searchBtn = document.querySelector('#search-btn');
+  const closeModalBtn = document.querySelector('#close-modal-btn');
+  const searchModal = document.querySelector('#search-modal');
+
+  const closeEmptyModal = (e) => {
+    const algoliaInput = document.querySelector('.ais-SearchBox-input');
+    if(algoliaInput) {
+      if(!algoliaInput.value ) {
+        if (algoliaInput === e.target || algoliaInput.contains(e.target)) return;
+        searchModal.classList.remove('show-modal');
+      }
+    }
+  }
+
+  const closeDesktopModal = (e) => {
+    const algoliaInput = document.querySelector('.ais-SearchBox-input');
+    if(isDesktop && algoliaInput) {
+      if(algoliaInput.value ) {
+        if (searchModalContainer === e.target || searchModalContainer.contains(e.target)) return;
+        searchModal.classList.remove('show-modal');
+      }
+    }
+  }
+
+  searchModal.addEventListener('click', (e) => {
+    closeEmptyModal(e);
+    closeDesktopModal(e)
+  });
+
+  const autofocusInput = () => {
+    const algoliaInput = document.querySelector('.ais-SearchBox-input');
+    if (algoliaInput) {
+      algoliaInput.focus();
+    }
+  };
+
+  const handleSearchModal = () => {
+    searchModal.classList.add('show-modal');
+    autofocusInput()
+  };
+  searchBtn.addEventListener('click', handleSearchModal);
+
+  if(closeModalBtn) {
+    closeModalBtn.addEventListener('click', () => {
+      searchModal.classList.remove('show-modal');
+    });
+  }
+</script>