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
├──  script
├── 󰣞 src
│   ├──  components
│   ├──  plugins              # Plugin types and plugin examples
│   ├──  styles               # The actual CSS files
│   ├──  util
│   ├──  worker
│   ├──  _kiku_plugin.css     # Template to generate _kiku_plugin.css during the build process
│   ├──  _kiku_plugin.js      # Template to generate _kiku_plugin.js during the build process
│   ├──  back.html            # Template to generate the Back Template for Kiku and _kiku_back.html
│   ├──  front.html           # Template to generate the Front Template for Kiku and _kiku_front.html
│   ├──  index.tsx            # Entry point for the JavaScript bundle
│   ├──  style.css            # Template to generate the Styling Template for Kiku and _kiku_style.css
│   └──  types.ts
├──  index.html
├──  package.json
├──  tsconfig.json
└──  vite.config.ts

Tech Stack

• SolidJS
• TailwindCSS
• DaisyUI

Preprocess

• Run script/downloadFonts to download the web fonts used by Kiku.
• Adjust your Anki path in script/copyDist.ts and vite.config.ts.
• 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 script/generateKikuDbMain.ts, which depends on other scripts such as script/scrapJpdb.ts, script/scrapWk.ts, script/parseJmdict.ts, and script/parseKanjiVg.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 generateTemplate to generate the Front, Back, and Styling templates and post-process the build output.
• pnpm copyDist to copy the generated files to your Anki collection.media directory.
• pnpm updateNoteType to update the Kiku note type without re-importing the .apkg.
• pnpm apply to run build, generateTemplate, copyDist, and updateNoteType 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 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.