Huakun Shen 7b6c0934ab
Feature: add helper api (#95)
* feat: add helper API for installation guides and update UI components

- Implement helperAPI with methods to navigate to installation guides for Deno, FFmpeg, and Homebrew
- Update extension and help page components to use new helper API
- Modify command filtering in builtin commands
- Adjust page navigation in help pages to use goHome instead of goBack
- Remove unused imports and clean up components

* chore: bump @kksh/api to 0.1.2 and update dependent packages
2025-02-07 02:41:50 -05:00
..
2024-11-15 18:28:57 -05:00
2025-02-06 21:54:35 -05:00
2024-11-15 18:28:57 -05:00
2024-11-15 18:28:57 -05:00
2025-02-07 02:41:50 -05:00
2025-02-07 02:41:50 -05:00

Kunkun Custom UI Extension Template (Next.js)

Custom UI Extension Documentation

This is a template for a custom UI extension.

This type of extension is basically a static website. You can use any frontend framework you like, this template uses Next.js.

It is assumed that you have some knowledge of frontend development with Next.js.

Development

Development is the same as developing a normal website.

pnpm install
pnpm dev
pnpm build
  • To develop and preview the extension in Kunkun, you need to run the Add Dev Extension command in Kunkun, and register this extension's path.

In package.json, "devMain" is the url for development server, and "main" is the path to static .html file for production.

To load the extension in development mode, you have to enable it with Toggle Dev Extension Live Load Mode command in Kunkun. A Live badge will be shown on the commands. This indicates that dev extensions will be loaded from devMain instead of main.

Advanced

Rendering Mode

This is a Meta-Framework template, and already configured with SSG rendering mode. Please do not enable SSR unless you know what you are doing. There will not be a JS runtime in production, and Kunkun always load the extension as static files.

The main benefit of using a meta-framework is that it comes with routing, and will output multiple .html files, which makes multi-command support much easier.

Verify Build and Publish

pnpm build # make sure the build npm script works
npx kksh@latest verify # Verify some basic settings
npx kksh@latest verify --publish # Verify some basic settings before publishing

See Documentation for more details on how to publish your extension. You will need to publish your extension package to npm or jsr first with GitHub actioin, then register it on Kunkun's website.