https://github.com/kkgthb/web-site-11ty-08-algolia-frontend

CDN-based Algolia search -- just HTML, no 11ty actually required
https://github.com/kkgthb/web-site-11ty-08-algolia-frontend

11ty algolia algolia-instant-search algolia-instantsearch front-end html jekyll

Last synced: about 1 month ago
JSON representation

CDN-based Algolia search -- just HTML, no 11ty actually required

• Host: GitHub
• URL: https://github.com/kkgthb/web-site-11ty-08-algolia-frontend
• Owner: kkgthb
• Created: 2021-10-04T21:56:49.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-10-06T19:12:53.000Z (over 3 years ago)
• Last Synced: 2024-11-09T06:25:17.895Z (3 months ago)
• Topics: 11ty, algolia, algolia-instant-search, algolia-instantsearch, front-end, html, jekyll
• Language: HTML
• Homepage: https://katiekodes.com/search-algolia-front-end
• Size: 74.2 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# An algolia front-end using CDN-based Algolia Instant Search libraries

This codebase has nothing to do with 11ty.  When I developed the code at first, I was just coding in a single `c:\example\algoliaindex.html` and double-clicking it to open it in my browser.

I've 11ty-ified the single HTML file as a convenient way to break up the codebase into more legible parts, as a way to let it run in a `localhost` environment _(which makes `` submissions actually work)_, and as a way to use values stored in a `/.env` file rather than hand-typing an application ID, application key, & index name into `` tags.

FYI, the `.env` file looks like this:

```

ALGOLIA_APP_ID=ABC123DEF987

ALGOLIA_API_KEY=1abcde234ffed5678cbaabcdef909876efdcba

ALGOLIA_INDEX_NAME=really_cool_index_name

```

---

## JavaScript library instant search

So far, at my `example.com/search01` path, I've successfully pulled 3 environment variables _(my Algolia app ID, my front-end Algolia search API key, and my Algolia index name)_ into some front-end JavaScript that injects a bunch of DOM into the following HTML:

```html

<div id="search-searchbar" class=""></div>

<div id="search-poweredby" class=""></div>

<div id="search-hits" class=""></div>

```

Check out `/src/computed_pseudo_pages/singleton_search_page_01.liquid` and the `<SCRIPT>` tags it leverages, which I broke out into `/src/_includes/components/search_approach_01/initial_imports.html` and `/src/_includes/components/search_approach_01/widgets_script.html`.

This architecture let me embed search into my personal web site using Algolia's CDN-distributed Instant Search libraries.

I actually did simply hand-type the application ID, application key, & index name into `<SCRIPT>` tags the HTML of a web page on my site.  No fancy plugins or anything like that.

![Screenshot of the search page](https://katiekodes.com/images/screenshots/screenshots-algolia/screenshot-algolia-search-simple-frontend.png)

---

## Non-JavaScript search

From the `example.com` home page, you can submit a search into the "**Search approach #1**" box and it will take you to `example.com/search01/?query=your_query`, and actual search results for `your_query` will be in the search results, so that's also neat.

I have this architecture on every page of my site, right below the header.  I like that it avoids injecting site-wide client-side JavaScript from Algolia, when very few people actually search my site.

---

## Click tracking

Woohoo!  I figured out click-tracking.  See the "search approach #3" components / page.