https://github.com/xieyuheng/mimor
A web component for creating flashcard by simple <question> & <answer> markup.
https://github.com/xieyuheng/mimor
anki anki-like flashcard question-and-answer web-component xml
Last synced: about 1 year ago
JSON representation
A web component for creating flashcard by simple <question> & <answer> markup.
- Host: GitHub
- URL: https://github.com/xieyuheng/mimor
- Owner: xieyuheng
- License: gpl-3.0
- Created: 2024-10-27T17:21:29.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-12-25T04:19:51.000Z (over 1 year ago)
- Last Synced: 2025-03-28T18:50:38.440Z (over 1 year ago)
- Topics: anki, anki-like, flashcard, question-and-answer, web-component, xml
- Language: Vue
- Homepage: https://mimor.xieyuheng.com
- Size: 7.45 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE-OF-CONDUCT.md
- Authors: AUTHORS
Awesome Lists containing this project
README
# Mimor Web Component
[ [Playground](https://mimor.xieyuheng.com/playground) ]
A web component for creating flashcard by simple `` & `` markup.
## Usage
### Install
#### Using CDN
```html
```
#### Using npm
```shell
npm install mimor
```
```js
import 'mimor'
```
### `` Web Component
A web component call "x-mimor" will be defined:
```html
```
Use the following `Props` to config the component:
```typescript
type Props = {
src: string
text?: string
langTag?: 'en' | 'zh'
themeName?: 'dark' | 'light'
}
```
It is ok to use lisp-case naming convention in html:
```html
```
### Example `.mimor` file
[ [Goto The Playground](https://mimor.xieyuheng.com/playground/PG1ldGFkYXRhIHRoZW1lLWNvbG9yPSJibHVlIiAvPgoKPHF1ZXN0aW9uPgogIFdoYXQgaXQgbWVhbnMgdG8gcmVtZW1iZXIgc29tZXRoaW5nPwoKICA8YW5zd2VyPgogICAgVG8gcmVtZW1iZXIgc29tZXRoaW5nIGlzIHRvIGJlIGFibGUgdG8gcmVjYWxsIGl0IGZyb20gbWVtb3J5IHdoZW4gbmVlZGVkLgogIDwvYW5zd2VyPgo8L3F1ZXN0aW9uPgoKPHF1ZXN0aW9uPgogIEhvdyB0byByZW1lbWJlciBzb21ldGhpbmc_CgogIDxhbnN3ZXI-CiAgICBPbmUgd2F5IHRvIHJlbWVtYmVyIHNvbWV0aGluZyBpcyB0byByZWNhbGwgaXQgb2Z0ZW4uCiAgPC9hbnN3ZXI-CjwvcXVlc3Rpb24-Cgo8cXVlc3Rpb24-CiAgSG93IGRvIHlvdSB1c2UgbWltb3IgdG8gbWFrZSBtZW1vcnkgYSBjaG9pY2U_CgogIDxhbnN3ZXI-CiAgICBCeSBtYWtpbmcgbm90ZXMgaW4gZm9ybSBvZiAmbHQ7cXVlc3Rpb24mZ3Q7IGFuZCAmbHQ7YW5zd2VyJmd0OywKICAgIGFuZCB0byByZWNhbGwgdGhlbSB3aGVuZXZlciB3aXNoZWQsCiAgICB0byBoZWxwIG1lIHJlbWVtYmVyIHRoZW0uCiAgPC9hbnN3ZXI-CjwvcXVlc3Rpb24-Cg) ]
```mimor
What it means to remember something?
To remember something is to be able to recall it from memory when needed.
How to remember something?
One way to remember something is to recall it often.
How do you use mimor to make memory a choice?
By making notes in form of <question> and <answer>,
and to recall them whenever wished,
to help me remember them.
```
[](https://mimor.xieyuheng.com/playground/PG1ldGFkYXRhIHRoZW1lLWNvbG9yPSJibHVlIiAvPgoKPHF1ZXN0aW9uPgogIFdoYXQgaXQgbWVhbnMgdG8gcmVtZW1iZXIgc29tZXRoaW5nPwoKICA8YW5zd2VyPgogICAgVG8gcmVtZW1iZXIgc29tZXRoaW5nIGlzIHRvIGJlIGFibGUgdG8gcmVjYWxsIGl0IGZyb20gbWVtb3J5IHdoZW4gbmVlZGVkLgogIDwvYW5zd2VyPgo8L3F1ZXN0aW9uPgoKPHF1ZXN0aW9uPgogIEhvdyB0byByZW1lbWJlciBzb21ldGhpbmc_CgogIDxhbnN3ZXI-CiAgICBPbmUgd2F5IHRvIHJlbWVtYmVyIHNvbWV0aGluZyBpcyB0byByZWNhbGwgaXQgb2Z0ZW4uCiAgPC9hbnN3ZXI-CjwvcXVlc3Rpb24-Cgo8cXVlc3Rpb24-CiAgSG93IGRvIHlvdSB1c2UgbWltb3IgdG8gbWFrZSBtZW1vcnkgYSBjaG9pY2U_CgogIDxhbnN3ZXI-CiAgICBCeSBtYWtpbmcgbm90ZXMgaW4gZm9ybSBvZiAmbHQ7cXVlc3Rpb24mZ3Q7IGFuZCAmbHQ7YW5zd2VyJmd0OywKICAgIGFuZCB0byByZWNhbGwgdGhlbSB3aGVuZXZlciB3aXNoZWQsCiAgICB0byBoZWxwIG1lIHJlbWVtYmVyIHRoZW0uCiAgPC9hbnN3ZXI-CjwvcXVlc3Rpb24-Cg)
### In browser editor
You can also use this [in browser editor](https://editor.xieyuheng.com),
to edit mimors and preview mimors locally.
Currently we support Chromium-based browsers (such as Chrome and Edge).
[](https://editor.xieyuheng.com)
## Development
```sh
npm install # Install dependencies
npm run dev # Start the dev server
npm run check # Type check
npm run build # Build the lib/ and dist/
npm run format # Format the code
```
## Contributions
To make a contribution, fork this project and create a pull request.
Please read the [STYLE-GUIDE.md](STYLE-GUIDE.md) before you change the code.
Remember to add yourself to [AUTHORS](AUTHORS).
Your line belongs to you, you can write a little
introduction to yourself but not too long.
## License
[GPLv3](LICENSE)