pages/assets/js/search-data.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

535 lines
15 KiB
JavaScript

---
---
// don't remove the above lines
// they are required to make the code work
// get the ninja-keys element
const ninja = document.querySelector('ninja-keys');
// add the home and posts menu items
ninja.data = [
{%- for page in site.pages -%}
{%- if page.permalink == '/' -%}{%- assign about_title = page.title -%}{%- endif -%}
{%- endfor -%}
{
id: "nav-{{ about_title | slugify }}",
title: "{{ about_title }}",
section: "Navigation",
handler: () => {
window.location.href = "{{ '/' | relative_url }}";
},
},
{%- assign sorted_pages = site.pages | sort: "nav_order" -%}
{%- for p in sorted_pages -%}
{%- if p.nav and p.autogen == null -%}
{%- if p.dropdown -%}
{%- for child in p.children -%}
{%- unless child.title == 'divider' -%}
{
{%- assign title = child.title | escape -%}
{%- if child.permalink contains "/blog/" -%}{%- assign url = "/blog/" -%} {%- else -%}{%- assign url = child.url -%}{%- endif -%}
id: "dropdown-{{ title | slugify }}",
title: "{{ title }}",
description: "{{ child.description | strip_html | strip_newlines | escape }}",
section: "Dropdown",
handler: () => {
window.location.href = "{{ url | relative_url }}";
},
},
{%- endunless -%}
{%- endfor -%}
{%- else -%}
{
{%- assign title = p.title | escape -%}
{%- if p.permalink contains "/blog/" -%}{%- assign url = "/blog/" -%} {%- else -%}{%- assign url = p.url -%}{%- endif -%}
id: "nav-{{ title | slugify }}",
title: "{{ title }}",
description: "{{ p.description | strip_html | strip_newlines | escape }}",
section: "Navigation",
handler: () => {
window.location.href = "{{ url | relative_url }}";
},
},
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- for post in site.posts -%}
{
{%- assign title = post.title | escape -%}
id: "post-{{ title | slugify }}",
title: "{{ title }}",
description: "{{ post.description | strip_html | strip_newlines | escape }}",
section: "Posts",
handler: () => {
window.location.href = "{{ post.url | relative_url }}";
},
},
{%- endfor -%}
{%- for project in site.projects -%}
{
{%- assign title = project.title | escape -%}
id: "project-{{ title | slugify }}",
title: "{{ title }}",
description: "{{ project.description | strip_html | strip_newlines | escape }}",
section: "Projects",
handler: () => {
window.location.href = "{{ project.url | relative_url }}";
},
},
{%- endfor -%}
{%- if site.socials_in_search -%}
{%- if site.email -%}
{
id: 'socials-email',
title: 'Send email',
section: 'Socials',
handler: () => {
window.open("mailto:{{ site.email | encode_email }}", "_blank");
},
},
{%- endif -%}
{%- if site.telegram_username -%}
{
id: 'socials-telegram',
title: 'Telegram',
section: 'Socials',
handler: () => {
window.open("https://telegram.me/{{ site.telegram_username }}", "_blank");
},
},
{%- endif -%}
{%- if site.whatsapp_number -%}
{
id: 'socials-whatsapp',
title: 'WhatsApp',
section: 'Socials',
handler: () => {
window.open("https://wa.me/{{ site.whatsapp_number }}", "_blank");
},
},
{%- endif -%}
{%- if site.orcid_id -%}
{
id: 'socials-orcid',
title: 'ORCID',
section: 'Socials',
handler: () => {
window.open("https://orcid.org/{{ site.orcid_id }}", "_blank");
},
},
{%- endif -%}
{%- if site.scholar_userid -%}
{
id: 'socials-google-scholar',
title: 'Google Scholar',
section: 'Socials',
handler: () => {
window.open("https://scholar.google.com/citations?user={{ site.scholar_userid }}", "_blank");
},
},
{%- endif -%}
{%- if site.semanticscholar_id -%}
{
id: 'socials-semantic-scholar',
title: 'Semantic Scholar',
section: 'Socials',
handler: () => {
window.open("https://www.semanticscholar.org/author/{{ site.semanticscholar_id }}", "_blank");
},
},
{%- endif -%}
{%- if site.publons_id -%}
{
id: 'socials-publons',
title: 'Publons',
section: 'Socials',
handler: () => {
window.open("https://publons.com/a/{{ site.publons_id }}/", "_blank");
},
},
{%- endif -%}
{%- if site.lattes_id -%}
{
id: 'socials-lattes',
title: 'Lattes',
section: 'Socials',
handler: () => {
window.open("http://lattes.cnpq.br/{{ site.lattes_id }}", "_blank");
},
},
{%- endif -%}
{%- if site.osf_id -%}
id: 'socials-open-science-framework',
title: 'Open Science Framework',
section: 'Socials',
handler: () => {
window.open("https://osf.io/{{ site.osf_id }}/", "_blank");
},
},
{%- endif -%}
{%- if site.research_gate_profile -%}
{
id: 'socials-researchgate',
title: 'ResearchGate',
section: 'Socials',
handler: () => {
window.open("https://www.researchgate.net/profile/{{site.research_gate_profile}}/", "_blank");
},
},
{%- endif -%}
{%- if site.ieee_id -%}
{
id: 'socials-ieee-xplore',
title: 'IEEE Xplore',
section: 'Socials',
handler: () => {
window.open("https://ieeexplore.ieee.org/author/{{site.ieee_id}}/", "_blank");
},
},
{%- endif -%}
{%- if site.acm_id -%}
{
id: 'socials-acm-dl',
title: 'ACM DL',
section: 'Socials',
handler: () => {
window.open("https://dl.acm.org/profile/{{site.acm_id}}/", "_blank");
},
},
{%- endif -%}
{%- if site.scopus_id -%}
{
id: 'socials-scopus',
title: 'Scopus',
section: 'Socials',
handler: () => {
window.open("https://www.scopus.com/authid/detail.uri?authorId={{site.scopus_id}}", "_blank");
},
},
{%- endif -%}
{%- if site.github_username -%}
{
id: 'socials-github',
title: 'GitHub',
section: 'Socials',
handler: () => {
window.open("https://github.com/{{ site.github_username }}", "_blank");
},
},
{%- endif -%}
{%- if site.linkedin_username -%}
{
id: 'socials-linkedin',
title: 'LinkedIn',
section: 'Socials',
handler: () => {
window.open("https://www.linkedin.com/in/{{ site.linkedin_username }}", "_blank");
},
},
{%- endif -%}
{%- if site.x_username -%}
{
id: 'socials-x',
title: 'X',
description: 'Twitter',
section: 'Socials',
handler: () => {
window.open("https://twitter.com/{{ site.x_username }}", "_blank");
},
},
{%- endif -%}
{%- if site.mastodon_username -%}
{
id: 'socials-mastodon',
title: 'Mastodon',
section: 'Socials',
handler: () => {
window.open("https://{{ site.mastodon_username }}", "_blank");
},
},
{%- endif -%}
{%- if site.medium_username -%}
{
id: 'socials-medium',
title: 'Medium',
section: 'Socials',
handler: () => {
window.open("https://medium.com/@{{ site.medium_username }}", "_blank");
},
},
{%- endif -%}
{%- if site.quora_username -%}
{
id: 'socials-quora',
title: 'Quora',
section: 'Socials',
handler: () => {
window.open("https://www.quora.com/profile/{{ site.quora_username }}", "_blank");
},
},
{%- endif -%}
{%- if site.flickr_id -%}
{
id: 'socials-flickr',
title: 'Flickr',
section: 'Socials',
handler: () => {
window.open("https://www.flickr.com/{{ site.flickr_id }}", "_blank");
},
},
{%- endif -%}
{%- if site.blogger_url -%}
{
id: 'socials-blogger',
title: 'Blogger',
section: 'Socials',
handler: () => {
window.open("{{ site.blogger_url }}", "_blank");
},
},
{%- endif -%}
{%- if site.work_url -%}
{
id: 'socials-work',
title: 'Work',
section: 'Socials',
handler: () => {
window.open("{{ site.work_url }}", "_blank");
},
},
{%- endif -%}
{%- if site.wikidata_id -%}
{
id: 'socials-wikidata',
title: 'Wikidata',
section: 'Socials',
handler: () => {
window.open("https://www.wikidata.org/wiki/{{ site.wikidata_id }}", "_blank");
},
},
{%- endif -%}
{%- if site.wikipedia_id -%}
{
id: 'socials-wikipedia',
title: 'Wikipedia',
section: 'Socials',
handler: () => {
window.open("https://wikipedia.org/wiki/User:{{ site.wikipedia_id }}", "_blank");
},
},
{%- endif -%}
{%- if site.strava_userid -%}
{
id: 'socials-strava',
title: 'Strava',
section: 'Socials',
handler: () => {
window.open("https://www.strava.com/athletes/{{ site.strava_userid }}", "_blank");
},
},
{%- endif -%}
{%- if site.keybase_username -%}
{
id: 'socials-keybase',
title: 'Keybase',
section: 'Socials',
handler: () => {
window.open("https://keybase.io/{{ site.keybase_username }}", "_blank");
},
},
{%- endif -%}
{%- if site.gitlab_username -%}
{
id: 'socials-gitlab',
title: 'GitLab',
section: 'Socials',
handler: () => {
window.open("https://gitlab.com/{{ site.gitlab_username }}", "_blank");
},
},
{%- endif -%}
{%- if site.dblp_url -%}
{
id: 'socials-dblp',
title: 'DBLP',
section: 'Socials',
handler: () => {
window.open("{{ site.dblp_url }}", "_blank");
},
},
{%- endif -%}
{%- if site.stackoverflow_id -%}
{
id: 'socials-stackoverflow',
title: 'Stackoverflow',
section: 'Socials',
handler: () => {
window.open("https://stackoverflow.com/users/{{ site.stackoverflow_id }}", "_blank");
},
},
{%- endif -%}
{%- if site.kaggle_id -%}
{
id: 'socials-kaggle',
title: 'Kaggle',
section: 'Socials',
handler: () => {
window.open("https://www.kaggle.com/{{ site.kaggle_id }}", "_blank");
},
},
{%- endif -%}
{%- if site.lastfm_id -%}
{
id: 'socials-last-fm',
title: 'Last FM',
section: 'Socials',
handler: () => {
window.open("https://www.last.fm/user/{{ site.lastfm_id }}", "_blank");
},
},
{%- endif -%}
{%- if site.spotify_id -%}
{
id: 'socials-spotify',
title: 'Spotify',
section: 'Socials',
handler: () => {
window.open("https://open.spotify.com/user/{{ site.spotify_id }}", "_blank");
},
},
{%- endif -%}
{%- if site.pinterest_id -%}
{
id: 'socials-pinterest',
title: 'Pinterest',
section: 'Socials',
handler: () => {
window.open("https://www.pinterest.com/{{ site.pinterest_id }}", "_blank");
},
},
{%- endif -%}
{%- if site.unsplash_id -%}
{
id: 'socials-unsplash',
title: 'Unsplash',
section: 'Socials',
handler: () => {
window.open("https://unsplash.com/@{{ site.unsplash_id }}", "_blank");
},
},
{%- endif -%}
{%- if site.instagram_id -%}
{
id: 'socials-instagram',
title: 'Instagram',
section: 'Socials',
handler: () => {
window.open("https://instagram.com/{{ site.instagram_id }}", "_blank");
},
},
{%- endif -%}
{%- if site.facebook_id -%}
{
id: 'socials-facebook',
title: 'Facebook',
section: 'Socials',
handler: () => {
window.open("https://facebook.com/{{ site.facebook_id }}", "_blank");
},
},
{%- endif -%}
{%- if site.bluesky_url -%}
{
id: 'socials-bluesky',
title: 'Bluesky',
section: 'Socials',
handler: () => {
window.open("https://bsky.app/profile/{{ site.bluesky_url }}", "_blank");
},
},
{%- endif -%}
{%- if site.youtube_id -%}
{
id: 'socials-youtube',
title: 'YouTube',
section: 'Socials',
handler: () => {
window.open("https://youtube.com/@{{ site.youtube_id }}", "_blank");
},
},
{%- endif -%}
{%- if site.discord_id -%}
{
id: 'socials-discord',
title: 'Discord',
section: 'Socials',
handler: () => {
window.open("https://discord.com/users/{{ site.discord_id }}", "_blank");
},
},
{%- endif -%}
{%- if site.zotero_username -%}
{
id: 'socials-zotero',
title: 'Zotero',
section: 'Socials',
handler: () => {
window.open("https://www.zotero.org/{{ site.zotero_username }}", "_blank");
},
},
{%- endif -%}
{%- if site.rss_icon -%}
{
id: 'socials-rss',
title: 'RSS Feed',
section: 'Socials',
handler: () => {
window.open("{{ site.baseurl }}/feed.xml", "_blank");
},
},
{%- endif -%}
{%- comment -%}
{%- if site.wechat_qr -%}
// check how to add wechat qr code
{
id: 'socials-wechat',
title: 'WeChat',
section: 'Socials',
handler: () => {
window.open("", "_blank");
},
},
{%- endif -%}
{%- endcomment -%}
{%- endif -%}
{%- if site.enable_darkmode -%}
{
id: 'light-theme',
title: 'Change theme to light',
description: 'Change the theme of the site to Light',
section: 'Theme',
handler: () => {
setThemeSetting("light");
},
},
{
id: 'dark-theme',
title: 'Change theme to dark',
description: 'Change the theme of the site to Dark',
section: 'Theme',
handler: () => {
setThemeSetting("dark");
},
},
{
id: 'system-theme',
title: 'Use system default theme',
description: 'Change the theme of the site to System Default',
section: 'Theme',
handler: () => {
setThemeSetting("system");
},
},
{%- endif -%}
];