feat(algolia): add the shortcuts component

Author: razonyang

assets/algolia/js/index.ts

@@ -29,7 +29,7 @@ import { default as params } from '@params'
                     indexName: params.algolia.indexname,
                     query,
                     params: {
-                      hitsPerPage: 10,
+                      hitsPerPage: 5,
                       attributesToSnippet: ['title:10', 'content:35'],
                       snippetEllipsisText: '…',
                     },
@@ -41,6 +41,23 @@ import { default as params } from '@params'
               return item.url;
             },
             templates: {
+              header({ html }) {
+                return html`<div class="aa-Header">
+                  <a class="badge bg-secondary mx-2" data-bs-toggle="collapse" href="#aa-shortcuts" role="button" aria-expanded="false" aria-controls="aa-shortcuts">
+                    Shortcuts
+                  </a>
+                  <div class="collapse p-2" id="aa-shortcuts">
+                    <div class="card card-body pb-0">
+                      <ul class="list-unstyled">
+                        <li class="my-2"><kbd>CTRL</kbd>+<kbd>K</kbd> to open</li>
+                        <li class="my-2"><kbd>ESC</kbd> to close</li>
+                        <li class="my-2"><kbd>↑</kbd> <kbd>↓</kbd> to navigate</li>
+                        <li class="my-2"><kbd>ENTER</kbd> to select</li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>`;
+              },
               item({ item, components, html }) {
                 return html`<a href="${item.url}" class="aa-ItemWrapper surface px-2 py-1 rounded">
                         <div class="aa-ItemContent">

purgecss.config.js

@@ -14,17 +14,20 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
   safelist: {
     standard: [
       'active',
+      'badge', 'bg-secondary',
       'bottom-0',
       'btn-primary', 'btn-outline-primary',
+      'collapse',
       'col-xxl-10',
       'd-flex',
       'end-0',
       'fs-lg', 'fs-sm', 'fs-xl', 'fs-xs', 'fst-italic',
       'justify-content-center',
-      'mb-0', 'mb-1',
+      'mb-0', 'mb-1', 'my-2', 'mx-2',
+      'list-unstyled',
       'offcanvas-backdrop',
       'opacity-0', 'opacity-50', 'opacity-100', 'overflow-hidden',
-      'p-1', 'pe-3', 'pt-0', 'pt-1', 'px-2', 'py-1', 'px-3', 'py-2', 'position-absolute', 'position-fixed', 'position-relative', 'position-sticky',
+      'p-1', 'pb-0', 'pe-3', 'pt-0', 'pt-1', 'px-2', 'py-1', 'px-3', 'py-2', 'position-absolute', 'position-fixed', 'position-relative', 'position-sticky',
       'rounded', 'rounded-top',
       'show',
       'text-nowrap', 'text-pre-wrap', 'text-uppercase', 'text-white', 'top-0', 'text-bg-secondary', 'text-success', 'text-truncate',