Development

Project Structure

The Kiku repo is a monorepo managed by Turborepo, with pnpm as the package manager and Biome as the linter and formatter.

 kiku
├──  apps
│   └──  docs                 # Documentation
├──  packages
│   ├──  addon                # Kiku Note Manager
│   └──  note                 # Kiku Note Type
├── 󰊢 .gitignore
├──  biome.json
├──  package.json
├──  pnpm-lock.yaml
├──  pnpm-workspace.yaml
├── 󰂺 README.md
└──  turbo.json

Kiku Note Type

Kiku Note is a TypeScript project that uses Vite as the bundler.

 kiku/packages/note
├──  .db                      # Databases used by Kiku
├──  .fonts                   # Default web fonts used by Kiku
├──  dist
├──  plugins                  # Plugin types and plugin examples
├──  preprocess
├──  preview                  # Previewers (Anki)
├──  script
├──  template                 # Templates to generate Anki note files
│   ├──  _kiku_plugin.css     # Template to generate _kiku_plugin.css
│   ├──  _kiku_plugin.js      # Template to generate _kiku_plugin.js
│   ├──  back.html            # Template to generate the Back Template and _kiku_back.html
│   ├──  front.html           # Template to generate the Front Template and _kiku_front.html
│   └──  style.css            # Template to generate the Styling Template and _kiku_style.css
├──  tools                    # Shared tools and configuration
├── 󰣞 src
│   ├──  components
│   ├──  styles               # The actual CSS files
│   ├──  util
│   ├──  worker
│   └──  index.tsx            # Entry point for the JavaScript bundle
├──  package.json
├──  tsconfig.json
└──  vite.config.ts

Tech Stack

• SolidJS
• TailwindCSS
• DaisyUI

Preprocess

• Run preprocess/download-fonts.ts (with npx vite-node) to download the web fonts used by Kiku.
• Create a .env file in packages/note from .env.example and configure your Anki path there.
• For packaging, prepare a deck named "Kiku" in Anki.

Databases

INFO

.db/_kiku_db_main.tar and .db/_kiku_db_main_manifest.json have been excluded from .gitignore, so you don't have to worry about them.

.db/_kiku_db_main.tar and .db/_kiku_db_main_manifest.json are generated by preprocess/generate-kiku-db-main.ts, which depends on other scripts such as preprocess/scrap-jpdb.ts, preprocess/scrap-wk.ts, preprocess/parse-jmdict.ts, and preprocess/parse-kanji-vg.ts being run first.

Build

INFO

Some scripts require Anki with AnkiConnect to be running.

• pnpm run build to build the JavaScript and CSS bundles.
• pnpm generate-template to generate the Front, Back, and Styling templates and post-process the build output.
• pnpm copy-anki-build to copy the generated files to your Anki collection.media directory.
• pnpm update-note-type to update the Kiku note type without re-importing the .apkg.
• pnpm apply to run build, generate-template, copy-anki-build, and update-note-type in sequence.
• pnpm package to package the .apkg.

Developing with the Vite Dev Server

Simply run pnpm run dev to start the Vite dev server on port 5173. This loads preview/anki/index.html, which is designed to mimic Anki's WebView output. The dev server also serves your Anki collection.media directory.

Switch between http://localhost:5173/?side=back# and http://localhost:5173/?side=front# to switch between the back and front sides. You can change the note fields by modifying src/util/examples.ts. You can visit Settings > Debug > AnkiFields from Kiku to copy the fields.