Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tomgroenwoldt/helix-shortcut-quiz

Learn the helix editor keymap on the web!
https://github.com/tomgroenwoldt/helix-shortcut-quiz

game helix-editor learning quiz

Last synced: about 1 month ago
JSON representation

Learn the helix editor keymap on the web!

Awesome Lists containing this project

README

        

[![pages-build-deployment](https://github.com/tomgroenwoldt/helix-shortcut-quiz/actions/workflows/pages/pages-build-deployment/badge.svg)](https://github.com/tomgroenwoldt/helix-shortcut-quiz/actions/workflows/pages/pages-build-deployment)
# Helix Shortcut Quiz

A web quiz built with [yew](https://yew.rs/) for testing your knowledge of [helix editor](https://helix-editor.com/) shortcuts. Try it out [here](https://tomgroenwoldt.github.io/helix-shortcut-quiz/)!

![helix-shortcut-quiz](https://user-images.githubusercontent.com/70777530/228351818-b7ebe8f2-a672-4759-86ab-e395c9cf211b.gif)

## How to play
| Key | Action |
|----------|:-------------:|
`Esc` | Clear input
`Backspace` | Pop last char of input
`Enter` | Submit correct input
`Left arrow` | Skip to left GIF
`Right arrow` | Skip to right GIF

Your category progress is stored in the local storage of your browser. You can reset this store via the `Reset this category`
button.

## Development

### Dependencies

If you don't already have it installed, it's time to install Rust: .

To compile Rust to WASM, we need to have the `wasm32-unknown-unknown` target installed.
Install it with the following command:

```bash
rustup target add wasm32-unknown-unknown
```

Install trunk:

```bash
cargo install trunk
```

### GIF generation

The `yew` app serves GIFs generated by [`vhs`](https://github.com/charmbracelet/vhs). The current state of `vhs` doesn't
support the recording of the helix block cursor. The problem lies deeper within the [`ttyd`](https://github.com/tsl0922/ttyd)
dependency which uses the [`xterm.js`](https://github.com/xtermjs/xterm.js) canvas addon.

If you want to generate the GIFs yourself you should go ahead, clone the custom forks I made and use those binaries instead.
After building the two binaries place them in the `gif_generation/` directory and execute `generate_all_gifs.sh`.

### Run the application locally

```bash
trunk serve
```

## Contributing
Any kinds of contributions are welcome! Feel free to reach out to me via issues or pull requests :)