pages/assets/js/search/ninja-footer.min.js
George 92cebc9bb1
Added support for search (#2415)
Added support for search within the template as suggested in #581. I
decided to go with a client side search based on [Ninja
keys](https://github.com/ssleptsov/ninja-keys), but using [deepdub's
fork](https://github.com/deepdub-ai/ninja-keys) as basis since it
supports fuzzy search.

Had to do a bunch of changes to their code to make it work without using
node to install everything. Also changed to use some colors defined in
our side and using both pages' titles and descriptions for search. Also
had to increase the template max width to better accomodate the new item
in navigation bar.

Missing implementations:
- [ ] One thing I'd love to do (but currently have no idea how) would be
to change the text next to the search button depending on the platform.
For example, if the user is accessing the site on a mac they should use
⌘k instead of ctrl k.
- [x] Test how this looks like (and how it is supposed to work) on
devices with smaller screens
- [x] Support for offline mode

Some screenshots:

---

## Dark version

![Screenshot from 2024-05-13
16-30-12](https://github.com/alshedivat/al-folio/assets/31376482/535acec5-dd7a-48cb-a17f-a295da98b5d3)

![Screenshot from 2024-05-13
16-30-26](https://github.com/alshedivat/al-folio/assets/31376482/6b2d94bb-3981-4252-ae2b-53994b514491)

![Screenshot from 2024-05-13
16-30-36](https://github.com/alshedivat/al-folio/assets/31376482/66262b56-2744-475d-b09f-2cb65210017b)

---

## Light version

![Screenshot from 2024-05-13
16-30-44](https://github.com/alshedivat/al-folio/assets/31376482/a0eec50c-e7ac-4b52-aee8-2050bff05d54)

![Screenshot from 2024-05-13
16-30-50](https://github.com/alshedivat/al-folio/assets/31376482/41d72066-3e68-4ec3-bf3d-140da621f67b)

![Screenshot from 2024-05-13
16-30-55](https://github.com/alshedivat/al-folio/assets/31376482/613fd56e-7180-4373-ab7a-dfed184b5a18)

---------

Signed-off-by: George Araujo <george.gcac@gmail.com>
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2024-05-23 23:21:16 -03:00

62 lines
2.2 KiB
JavaScript

/**
* Minified by jsDelivr using Terser v5.19.2.
* Original file: /npm/@deepdub/ninja-keys@1.2.11/dist/ninja-footer.js
*
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
*/
import{html}from"./lit/index.min.js";export const footerHtml=html` <div class="modal-footer" slot="footer">
<span class="help">
<svg
version="1.0"
class="ninja-examplekey"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1280 1280"
>
<path
d="M1013 376c0 73.4-.4 113.3-1.1 120.2a159.9 159.9 0 0 1-90.2 127.3c-20 9.6-36.7 14-59.2 15.5-7.1.5-121.9.9-255 1h-242l95.5-95.5 95.5-95.5-38.3-38.2-38.2-38.3-160 160c-88 88-160 160.4-160 161 0 .6 72 73 160 161l160 160 38.2-38.3 38.3-38.2-95.5-95.5-95.5-95.5h251.1c252.9 0 259.8-.1 281.4-3.6 72.1-11.8 136.9-54.1 178.5-116.4 8.6-12.9 22.6-40.5 28-55.4 4.4-12 10.7-36.1 13.1-50.6 1.6-9.6 1.8-21 2.1-132.8l.4-122.2H1013v110z"
/>
</svg>
to select
</span>
<span class="help">
<svg
xmlns="http://www.w3.org/2000/svg"
class="ninja-examplekey"
viewBox="0 0 24 24"
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="ninja-examplekey"
viewBox="0 0 24 24"
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" />
</svg>
to navigate
</span>
<span class="help">
<span class="ninja-examplekey esc">esc</span>
to close
</span>
<span class="help">
<svg
xmlns="http://www.w3.org/2000/svg"
class="ninja-examplekey backspace"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M6.707 4.879A3 3 0 018.828 4H15a3 3 0 013 3v6a3 3 0 01-3 3H8.828a3 3 0 01-2.12-.879l-4.415-4.414a1 1 0 010-1.414l4.414-4.414zm4 2.414a1 1 0 00-1.414 1.414L10.586 10l-1.293 1.293a1 1 0 101.414 1.414L12 11.414l1.293 1.293a1 1 0 001.414-1.414L13.414 10l1.293-1.293a1 1 0 00-1.414-1.414L12 8.586l-1.293-1.293z"
clip-rule="evenodd"
/>
</svg>
move to parent
</span>
</div>`;