Mimor Web Component

[ Playground ]

A web component for creating flashcard by simple <question> & <answer> markup.

Usage

Install

Using CDN

<script src="https://unpkg.com/mimor"></script>

Using npm

npm install mimor

import 'mimor'

<x-mimor> Web Component

A web component call "x-mimor" will be defined:

<x-mimor
  style="height: 36rem; width: 36rem"
  src="https://mimor.xieyuheng.com/contents/example.mimor"
  theme-name="light"
></x-mimor>

Use the following Props to config the component:

type Props = {
  src: string
  text?: string
  langTag?: 'en' | 'zh'
  themeName?: 'dark' | 'light'
}

It is ok to use lisp-case naming convention in html:

<x-mimor
  src="https://..."
  text="..."
  lang-tag="en"
  theme-name="light"
></x-mimor>

Examples

[ Goto The Playground ]

<metadata theme-color="blue" />

<question>
  What it means to remember something?

  <answer>
    To remember something is to be able to recall it from memory when needed.
  </answer>
</question>

<question>
  How to remember something?

  <answer>
    One way to remember something is to recall it often.
  </answer>
</question>

<question>
  How do you use mimor to make memory a choice?

  <answer>
    By making notes in form of &lt;question&gt; and &lt;answer&gt;,
    and to recall them whenever wished,
    to help me remember them.
  </answer>
</question>

In browser editor

You can also use this in browser editor, to edit mimors and preview mimors locally.

Currently we support Chromium-based browsers (such as Chrome and Edge).

Development

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 before you change the code.

Remember to add yourself to AUTHORS. Your line belongs to you, you can write a little introduction to yourself but not too long.

License

GPLv3