Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ebabel-eu/voice-book-search
Search for books with a voice activated input
https://github.com/ebabel-eu/voice-book-search
amp-html voice-as-an-interface web-components
Last synced: 24 days ago
JSON representation
Search for books with a voice activated input
- Host: GitHub
- URL: https://github.com/ebabel-eu/voice-book-search
- Owner: ebabel-eu
- License: gpl-3.0
- Created: 2019-06-04T17:37:35.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T23:24:31.000Z (almost 2 years ago)
- Last Synced: 2024-10-24T10:06:56.379Z (2 months ago)
- Topics: amp-html, voice-as-an-interface, web-components
- Language: HTML
- Homepage: https://voice-book-search.firebaseapp.com
- Size: 1.06 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# voice-book-search
Search for books with a voice activated input
## Development
### Pre-install
Your local environment relies on [Node.js](https://nodejs.org), and [Firebase](https://firebase.google.com/) (you may need to `sudo` on your machine):
```
npm install -g firebase-tools
```
Once installed, you may need to login if it's not already done:
```
firebase login
```
If you are in a cloud virtual machine, you might need to run a different login command, and when on another device you have authenticated, paste back into virtual machine the authorozation token:
```
firebase login --no-localhost
```
### Install
To install development environment dependencies:
```
npm install
```
### Build
The CSS can be minified after `npm install` has been run:
```
npm run build
```
## Deployment
### Deploy only hosting
```
firebase deploy --only hosting
```
## Technical stack
This stack is using web native technologies for both desktop and mobile devices:
- AMP-HTML
- Service Workers
- Web Components
## Validate AMP
To check if AMP-HTML is valid, append `#development=1` to the url and check the console.
https://voice-book-search.firebaseapp.com/#development=1
## Learning resources
The following pages have been useful in learning how to write the code in this repository:
### AMP-HTML
- [AMP Boilerplate](https://amp.dev/boilerplate/)
- [AMP Validation](https://amp.dev/documentation/guides-and-tutorials/learn/validation-workflow/validate_amp)
- [AMP URL and Code Validator](https://search.google.com/test/amp)
- [AMP Guides](https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup?format=websites)
- [AMP YouTube channel](https://www.youtube.com/watch?v=OO9oKhs80aI&list=PLXTOW_XMsIDQf5mXiTT6MhdYluziN7dwP&index=4)
- [Create a custom AMP component](https://codelabs.developers.google.com/codelabs/creating-your-first-amp-component/index.html?index=..%2F..index#1)
### Web Speech
- [Webspeech Demo](https://github.com/googlearchive/webplatform-samples/tree/master/webspeechdemo)
## todo
### Blockers
- Search with voice (or plain text in input).
- Web components (in Typescript).
- Infinite carousel (no third party dependency, native only).
- Stop scrolling on blur of page. See event `slideChange` triggered when slide changes. I could check if the page is in focus and allow the slide change, or return false and block the slide change if the page is on blur.
- Display book covers (-S, -M, or -L) depending on size of viewport.
- Load images lazily as the carousel scrolls with a small buffer of a few images.
- Relative time of a moment when the last search query was performed should be updatedautomatically. Display the relative time in a user's preferred language (navigator.language).
### Mediun priorities
- Design
### Low priorities
- Improve build script, automatically paste custom css into html.
- Minify the html from src to public.
- Improve the microphone images (maybe svg).
- Translate interface based on navigator.language
- Offer to switch UI language with a menu.